Docs
Playground

Getting started

—Conventions —Installation —CLI —Skills —LLMs

Foundations

Integrations

—JSON Render —Playground

Form19

—Autocomplete —Button —Checkbox —Checkbox Group —Combobox —Field —Fieldset —Form —Input —Label —Number Field —OTP Field —Radio —Select —Slider —Switch —Textarea —Toggle —Toggle Group

Display5

—Accordion —Avatar —Badge —Collapsible —Text

Layout4

—Card —Scroll Area —Separator —Toolbar

Navigation4

—Link —Menubar —Navigation Menu —Tabs

Overlay8

—Alert Dialog —Context Menu —Dialog —Drawer —Menu —Popover —Preview Card —Tooltip

Feedback4

—Meter —Progress —Skeleton —Toast

Motion19

—Animated IconNew —Animated ListNew —Animated TabsNew —CarouselNew —Compare SliderNew —Expandable CardNew —Hold to ConfirmNew —Load TransitionNew —MarqueeNew —Number TickerNew —Progress RingNew —Scroll ProgressNew —Scroll RevealNew —SortableNew —Stagger ListNew —Streaming TextNew —Swipeable RowNew —Text MorphNew —Text ShimmerNew

Components

63 components, grouped by what they do. Copy and paste into your app.

Form19

Autocomplete Button Checkbox Checkbox Group Combobox Field Fieldset Form Input Label Number Field OTP Field Radio Select Slider Switch Textarea Toggle Toggle Group

Display5

Accordion Avatar Badge Collapsible Text

Layout4

Card Scroll Area Separator Toolbar

Navigation4

Link Menubar Navigation Menu Tabs

Overlay8

Alert Dialog Context Menu Dialog Drawer Menu Popover Preview Card Tooltip

Feedback4

Meter Progress Skeleton Toast

Motion19

These depend on motion, so they sit outside add --all. Take the tier with npx @dinachi/cli@latest add --motion, or name one on its own.

Animated IconNew Animated ListNew Animated TabsNew CarouselNew Compare SliderNew Expandable CardNew Hold to ConfirmNew Load TransitionNew MarqueeNew Number TickerNew Progress RingNew Scroll ProgressNew Scroll RevealNew SortableNew Stagger ListNew Streaming TextNew Swipeable RowNew Text MorphNew Text ShimmerNew