Dinachi
  • Docs
  • Playground

Getting started

—Conventions—Installation—CLI—Skills—LLMs

Foundations

—Theming

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

Card

A versatile card component for grouping related content and actions. Supports headers, footers, and flexible layouts.

View Source

#Installation

npx @dinachi/cli@latest add card

#Usage

tsx
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card'

#Examples

#API Reference

PropTypeDefaultDescription
classNamestring—Additional CSS classes to apply to the card
Previous:Button
Next:Checkbox