Build faster
Production-ready
components.
Terminal
$npx @dinachi/cli@latest init|
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 mode
CPU 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 use
Themeable
OKLCH design tokens with CSS custom properties. Light and dark modes built-in.
@theme
--primary
--secondary
--accent
--destructive
--muted
40
Components
From form inputs to overlays, everything you need to build complete interfaces.
AccordionAlert DialogAutocompleteAvatarBadgeButtonCardCheckboxCheckbox GroupCollapsibleComboboxContext MenuDialogDrawerFieldFieldsetFormInputLabelMenuAccordionAlert DialogAutocompleteAvatarBadgeButtonCardCheckboxCheckbox GroupCollapsibleComboboxContext MenuDialogDrawerFieldFieldsetFormInputLabelMenu
MenubarMeterNavigation MenuNumber FieldPopoverPreview CardProgressRadioScroll AreaSelectSeparatorSkeletonSliderSwitchTabsToastToggleToggle GroupToolbarTooltipMenubarMeterNavigation MenuNumber FieldPopoverPreview CardProgressRadioScroll AreaSelectSeparatorSkeletonSliderSwitchTabsToastToggleToggle GroupToolbarTooltip
AI Skills
Let your AI agent add, configure, and compose components for you.
Render prop pattern
Compose elements with Base UI's render prop — no asChild needed.
import { Button } from '@/components/ui/button'
<Button
variant="outline"
render={<a href="/contact" />}
>
Contact us
</Button>
Preview
Renders as
<a> with button stylesWhat will you ship next?
Initialize Dinachi in your project with a single command.