@darksnow-ui/card

A flexible card container component with header, content, and footer sections.

Installation

npm install @darksnow-ui/card
# or
yarn add @darksnow-ui/card
# or
pnpm add @darksnow-ui/card

Usage

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@darksnow-ui/card"

export function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
        <CardDescription>Card description goes here</CardDescription>
      </CardHeader>
      <CardContent>
        <p>Card content. You can put any content here.</p>
      </CardContent>
      <CardFooter>
        <p className="text-sm text-theme-content-muted">Card footer</p>
      </CardFooter>
    </Card>
  )
}

Components

Card

The main container component.

| Prop | Type | Default | Description | |------|------|---------|-------------| | className | string | - | Additional CSS classes | | children | ReactNode | - | Card content |

CardHeader

Contains the card title and description.

| Prop | Type | Default | Description | |------|------|---------|-------------| | className | string | - | Additional CSS classes | | children | ReactNode | - | Header content |

CardTitle

The main title of the card.

| Prop | Type | Default | Description | |------|------|---------|-------------| | className | string | - | Additional CSS classes | | children | ReactNode | - | Title content |

CardDescription

Subtitle or description text.

| Prop | Type | Default | Description | |------|------|---------|-------------| | className | string | - | Additional CSS classes | | children | ReactNode | - | Description content |

CardContent

The main content area of the card.

| Prop | Type | Default | Description | |------|------|---------|-------------| | className | string | - | Additional CSS classes | | children | ReactNode | - | Content |

CardFooter

Footer section for actions or additional info.

| Prop | Type | Default | Description | |------|------|---------|-------------| | className | string | - | Additional CSS classes | | children | ReactNode | - | Footer content |

Examples

Basic Card

<Card className="w-full max-w-md">
  <CardHeader>
    <CardTitle>Notifications</CardTitle>
    <CardDescription>You have 3 unread messages.</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Your content here.</p>
  </CardContent>
  <CardFooter>
    <p className="text-sm text-theme-content-muted">Last updated 2 hours ago</p>
  </CardFooter>
</Card>

Interactive Card with Actions

import { Button } from "@darksnow-ui/button"

<Card>
  <CardHeader>
    <CardTitle>Project Alpha</CardTitle>
    <CardDescription>Deploy your new project in one-click.</CardDescription>
  </CardHeader>
  <CardContent>
    <div className="grid gap-2">
      <div className="flex items-center justify-between text-sm">
        <span className="text-theme-content-muted">Progress</span>
        <span>72%</span>
      </div>
      <div className="w-full bg-theme-mark-light rounded-full h-2">
        <div
          className="bg-theme-accent h-2 rounded-full"
          style={{ width: "72%" }}
        ></div>
      </div>
    </div>
  </CardContent>
  <CardFooter className="flex justify-between">
    <Button variant="outline" size="sm">Cancel</Button>
    <Button size="sm">Deploy</Button>
  </CardFooter>
</Card>

Stats Card

<Card>
  <CardHeader>
    <CardTitle>Total Revenue</CardTitle>
    <CardDescription>Monthly revenue growth</CardDescription>
  </CardHeader>
  <CardContent>
    <div className="text-2xl font-bold">$45,231.89</div>
    <p className="text-xs text-theme-highlight mt-1">
      +20.1% from last month
    </p>
  </CardContent>
</Card>

Team Members Card

import { Badge } from "@darksnow-ui/badge"

<Card>
  <CardHeader>
    <CardTitle>Team Members</CardTitle>
  </CardHeader>
  <CardContent>
    <div className="space-y-4">
      <div className="flex items-center space-x-4">
        <div className="w-10 h-10 rounded-full bg-theme-accent flex items-center justify-center">
          JD
        </div>
        <div className="flex-1">
          <p className="text-sm font-medium">John Doe</p>
          <p className="text-xs text-theme-content-muted">[email protected]</p>
        </div>
        <Badge variant="outline">Admin</Badge>
      </div>
    </div>
  </CardContent>
  <CardFooter>
    <Button variant="outline" className="w-full">View all</Button>
  </CardFooter>
</Card>

Create/Empty State Card

<Card className="border-dashed">
  <CardContent className="flex flex-col items-center justify-center py-10">
    <svg
      className="h-10 w-10 text-theme-content-muted mb-4"
      fill="none"
      stroke="currentColor"
      viewBox="0 0 24 24"
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth={2}
        d="M12 4v16m8-8H4"
      />
    </svg>
    <CardTitle className="mb-2">Create new project</CardTitle>
    <CardDescription className="text-center">
      Deploy your new project in one-click.
    </CardDescription>
    <Button className="mt-4">Create Project</Button>
  </CardContent>
</Card>

Hover Effects

<Card className="hover:shadow-lg transition-shadow cursor-pointer">
  <CardHeader>
    <CardTitle>Clickable Card</CardTitle>
    <CardDescription>This card has hover effects</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Hover over me to see the shadow effect.</p>
  </CardContent>
</Card>

Grid Layout

<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
  <Card>
    <CardHeader>
      <CardTitle>Card 1</CardTitle>
    </CardHeader>
    <CardContent>Content 1</CardContent>
  </Card>
  
  <Card>
    <CardHeader>
      <CardTitle>Card 2</CardTitle>
    </CardHeader>
    <CardContent>Content 2</CardContent>
  </Card>
  
  <Card>
    <CardHeader>
      <CardTitle>Card 3</CardTitle>
    </CardHeader>
    <CardContent>Content 3</CardContent>
  </Card>
</div>

Styling

The card components use these CSS classes:

• Card: rounded-xl border border-theme-mark-light bg-theme-surface text-theme-content shadow-theme-md
• CardHeader: flex flex-col space-y-1.5 p-6
• CardTitle: font-semibold leading-none tracking-tight
• CardDescription: text-sm text-theme-content-muted
• CardContent: p-6 pt-0
• CardFooter: flex items-center p-6 pt-0

Accessibility

• Semantic HTML structure with proper heading hierarchy
• Supports keyboard navigation when interactive
• Color contrast meets WCAG guidelines
• Screen reader friendly content structure

Theming

The card uses CSS custom properties for theming:

• --theme-surface - Card background
• --theme-mark-light - Border color
• --theme-content - Text color
• --theme-content-muted - Muted text color

License

MIT © DarkSnow UI