Everything you need
Production-ready components with the flexibility you need.
Accessible
Built on Base UI with WAI-ARIA compliance. Keyboard navigation, focus management, and screen reader support included.
Dark modeCPU Usage25%Memory65%Disk Space90%Own Your Code
Components copy into your project via the CLI. No runtime dependency.
Terminal$npx @dinachi/cli@latest init✓ Detected Next.js project✓ Created components.json✓ Installed clsx, tailwind-merge, cva✓ Created lib/utils.ts$npx @dinachi/cli@latest add button✓ Copied button.tsx → components/ui/✓ Ready to useThemeable
OKLCH design tokens with CSS custom properties. Drag to see both modes.
@theme--primary--secondary--accent--destructive--muted@theme--primary--secondary--accent--destructive--muted- Browse all63
Components
From form inputs to overlays, everything you need to build complete interfaces.
SeparatorSkeletonSliderSwitchTabsTextTextareaToastToggleToggle GroupToolbarTooltipAnimated IconAnimated ListAnimated TabsCarouselCompare SliderExpandable CardHold to ConfirmLoad TransitionMarqueeNumber TickerProgress RingScroll ProgressScroll RevealSortableStagger ListStreaming TextSwipeable RowText MorphText Shimmer AI Skills
Let your AI agent add, configure, and compose components for you.
Render prop pattern
Compose elements with Base UI's
renderprop — noasChildneeded.import { Button } from '@/components/ui/button'<Buttonvariant="outline"render={<Link href="/docs" />}>Read the docs</Button>PreviewRenders as<a>with button styles
What will you ship next?
Initialize Dinachi in your project with a single command.