{
  "name": "card",
  "title": "Card",
  "description": "A glass panel with the Clow edge-light. Variants for glass, plain paper, soft, and interactive lift.",
  "category": "layout",
  "install": {
    "command": "npx shadcn@latest add @clow/card",
    "registryConfig": {
      "@clow": "https://clow.cards/r/{name}.json"
    }
  },
  "props": {
    "variant": {
      "type": "select",
      "options": [
        "glass",
        "plain",
        "soft",
        "interactive"
      ],
      "default": "glass",
      "description": "glass = frosted panel (default), plain = solid paper, soft = quieter, interactive = lifts on hover for clickable cards."
    }
  },
  "agent": {
    "prompt": "Use Card to group related content. variant=glass (default) for frosted panels with edge-light; plain for solid paper; soft for quieter groups; interactive when the whole card is clickable (lifts on hover with outer glow). Compose with CardHeader > CardTitle + CardDescription, then CardContent and CardFooter. Don't nest cards.",
    "examples": [
      "<Card><CardHeader><CardTitle>Usage</CardTitle><CardDescription>Last 30 days</CardDescription></CardHeader><CardContent>…</CardContent></Card>",
      "<Card variant=\"interactive\" onClick={…}>…</Card>"
    ]
  },
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "utils"
  ],
  "links": {
    "docs": "https://clow.cards/docs/card",
    "markdown": "https://clow.cards/llms/card.md",
    "registryItem": "https://clow.cards/r/card.json"
  }
}
Draw

Playground

Usage

Examples

Relay status

Props

Usage

Relay status
