Build interfaces
at the speed of thought
Arcana UI is a modern React component library with 22 production-ready components, a warm stone/indigo design system, WCAG AA accessibility, and an AI-first API surface.
Get started in minutes
npm install @arcana-ui/core @arcana-ui/tokens
# In your app entry point:
import '@arcana-ui/tokens/dist/arcana.css'
# Use any component:
import { Button, Input, Modal } from '@arcana-ui/core'
function App() {
return (
<Button variant="primary" size="md">
Hello, Arcana
</Button>
)
}Everything you need
Design tokens
A complete warm stone/indigo palette with semantic color roles, spacing, radius, shadow, and motion tokens — all as CSS custom properties.
Accessible by default
Every component passes axe-core checks. Keyboard navigation, ARIA attributes, focus management, and screen-reader support built in.
AI-first
Ships with llms.txt, llms-full.txt, and manifest.ai.json so AI assistants can understand and use your component API without docs.
Dark mode
First-class dark mode support via CSS custom properties. Switch themes at runtime without JavaScript re-renders.
Zero runtime overhead
CSS Modules, no CSS-in-JS, no runtime style injection. Tree-shaken ESM output for lean production bundles.
Composable
Every component accepts className and style overrides. CSS custom properties let you theme at any level without forking.