Getting Started
Foundations
Components
Card
A versatile card component for grouping related content and actions. Supports headers, footers, and flexible layouts.
#Installation
npx @dinachi/cli@latest add card#Usage
tsx
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card'#Examples
Default Card
A basic card with header and content
Card Title
Card description goes here.
This is the main content area of the card. You can add any content here.
Card with Footer
Card with header, content, and footer with actions
Create Account
Enter your details to create a new account.
Card Variations
Multiple card styles for pricing comparison
Free Plan
For personal use
$0
per month
Pro Plan
For teams and businesses
$29
per month
Interactive Card
Card with hover effects and progress indicator
Project Status
ActiveLast updated 2 hours ago
Progress75%
#API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | Additional CSS classes to apply to the card |