Dinachi

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

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

Active

Last updated 2 hours ago

Progress75%

#API Reference

PropTypeDefaultDescription
classNamestring—Additional CSS classes to apply to the card