Card Component

Examples that show variant, tone, shadow, interactive, and section structures.

Primary Soft Card

Slight lift on hover; interactive card.

This card uses tone="primary" and variant="soft".

Status

Success Solid

Can be used as a status/state card.

Operation completed successfully. 🎉

Warning Outline

Calmer warning-toned card.

Your limit is almost full.
Consider reviewing your settings.

Glass Info Card

Glassmorphism style with loading overlay.

Shows blur + spinner overlay while content loads.

Card Sections: Header · Body · Footer

Billing

Pro Plan

$129 / mo

Pro plan offers advanced analytics, unlimited projects, and priority support.

Unlimited components
Team collaboration
Priority support line

Usage Examples

Basic Card

import { Card } from "@/components/card";

<Card
  title="Card Title"
  description="Card description"
>
  <p>Card content</p>
</Card>

Variants · Tone · Shadow · Interactive

<Card
  title="Primary Soft Card"
  description="Interactive card"
  tone="primary"
  variant="soft"
  shadow="md"
  interactive
>
  <p>This card is primary soft.</p>
</Card>

<Card
  title="Success Solid"
  description="Status card"
  tone="success"
  variant="solid"
  shadow="lg"
>
  <p>Operation completed successfully.</p>
</Card>

<Card
  title="Glass Info"
  description="Glassmorphism"
  tone="info"
  variant="glass"
  shadow="lg"
  isLoading
>
  <p>Content is loading...</p>
</Card>

Card Sections

<Card tone="default" variant="soft" shadow="md">
  <Card.Header>
    <div>
      <p className="text-xs uppercase tracking-wide opacity-60">
        Billing
      </p>
      <h3 className="font-semibold text-base">Pro Plan</h3>
    </div>
    <span className="text-sm opacity-80">₺129 / ay</span>
  </Card.Header>

  <Card.Body className="space-y-2 text-sm">
    <p>Pro plan offers advanced analytics and priority support.</p>
    <ul className="list-disc list-inside space-y-1 opacity-80">
      <li>Unlimited components</li>
      <li>Team collaboration</li>
      <li>Priority support</li>
    </ul>
  </Card.Body>

  <Card.Footer>
    <button className="px-4 py-2 rounded-xl bg-foreground text-background text-sm font-medium">
      Upgrade plan
    </button>
    <button className="text-xs opacity-70 underline">
      View details
    </button>
  </Card.Footer>
</Card>