{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card",
  "type": "registry:ui",
  "title": "Card",
  "description": "A bordered surface that groups related content, with header, content and footer parts.",
  "dependencies": [
    "radix-ui@^1.6.7"
  ],
  "registryDependencies": [
    "https://blank.vageshwar.dev/r/theme.json",
    "https://blank.vageshwar.dev/r/utils.json"
  ],
  "files": [
    {
      "path": "ui/card.tsx",
      "type": "registry:ui",
      "content": "// BlankUI: card. Managed by BlankUI. Read card.md before editing. Do not nest cards.\nimport type { ComponentProps } from \"react\"\nimport { Slot } from \"radix-ui\"\nimport { cn } from \"@/lib/utils\"\n\n/**\n * A bordered surface that groups related content.\n *\n * @example\n * <Card>\n *   <CardHeader>\n *     <CardTitle>Team</CardTitle>\n *     <CardDescription>Invite people to your workspace.</CardDescription>\n *   </CardHeader>\n *   <CardContent>...</CardContent>\n *   <CardFooter><Button>Invite</Button></CardFooter>\n * </Card>\n */\nexport function Card({ className, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card\"\n      className={cn(\n        \"flex flex-col gap-6 rounded-lg border bg-surface py-6 text-foreground shadow-sm\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** Holds the title, description and an optional action. */\nexport function CardHeader({ className, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\"flex flex-col gap-1.5 px-6\", className)}\n      {...props}\n    />\n  )\n}\n\nexport interface CardTitleProps extends ComponentProps<\"h3\"> {\n  /** Render the child element instead of an `h3`, for example an `h2` when the card is a page section. */\n  asChild?: boolean\n}\n\n/** The card heading. Renders an `h3` by default. */\nexport function CardTitle({ asChild = false, className, ...props }: CardTitleProps) {\n  const Comp = asChild ? Slot.Root : \"h3\"\n  return (\n    <Comp\n      data-slot=\"card-title\"\n      className={cn(\"font-heading text-lg leading-tight font-semibold\", className)}\n      {...props}\n    />\n  )\n}\n\n/** Short supporting text under the title. */\nexport function CardDescription({ className, ...props }: ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"card-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\n/** The main body of the card. */\nexport function CardContent({ className, ...props }: ComponentProps<\"div\">) {\n  return <div data-slot=\"card-content\" className={cn(\"px-6\", className)} {...props} />\n}\n\n/** Actions at the bottom of the card, laid out in a row. */\nexport function CardFooter({ className, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\"flex items-center gap-2 px-6\", className)}\n      {...props}\n    />\n  )\n}\n"
    },
    {
      "path": "ui/card.md",
      "type": "registry:ui",
      "content": "---\nname: card\ntitle: Card\ndescription: A bordered surface that groups related content, with header, content and footer parts.\ncategory: display\nwhenToUse:\n  - Group related content, like a settings section or a summary.\n  - Items in a grid of projects, plans or stats.\nwhenNotToUse:\n  - when: You only need space between elements.\n    use: layout\n  - when: Content should block the page until the user responds.\n    use: dialog\n  - when: Showing rows of data with the same fields.\n    use: table\nrelated: [layout, button]\nrequiredParts: [Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter]\nantiPatterns:\n  - avoid: '<div className=\"rounded-lg border p-6 shadow\">'\n    instead: \"<Card>\"\n  - avoid: \"A Card inside another Card\"\n    instead: \"Use a Stack inside one Card, or separate Cards in a Grid\"\n  - avoid: '<CardContent className=\"p-6\"> (adding padding)'\n    instead: \"<CardContent> already has padding\"\n---\n\n# Card\n\n## Import\n\n```tsx\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\n```\n\n## Example\n\n```tsx\n<Card>\n  <CardHeader>\n    <CardTitle>Notifications</CardTitle>\n    <CardDescription>Choose what you want to hear about.</CardDescription>\n  </CardHeader>\n  <CardContent>\n    <Stack gap={3}>...</Stack>\n  </CardContent>\n  <CardFooter>\n    <Button>Save</Button>\n  </CardFooter>\n</Card>\n```\n\n## Card grid\n\n```tsx\n<Grid columns={{ base: 1, md: 3 }} gap={6}>\n  {plans.map((plan) => (\n    <Card key={plan.id}>\n      <CardHeader>\n        <CardTitle>{plan.name}</CardTitle>\n        <CardDescription>{plan.price}</CardDescription>\n      </CardHeader>\n    </Card>\n  ))}\n</Grid>\n```\n\n## Notes\n\n- `CardTitle` renders an `h3`. Use `asChild` to pick another heading level: `<CardTitle asChild><h2>Billing</h2></CardTitle>`.\n- Every part already has padding and spacing. Do not add `p-*` classes.\n"
    }
  ],
  "docs": "Read components/ui/card.md before using Card. Docs: https://blank.vageshwar.dev/docs/card",
  "meta": {
    "category": "display",
    "requiredParts": [
      "Card",
      "CardHeader",
      "CardTitle",
      "CardDescription",
      "CardContent",
      "CardFooter"
    ],
    "related": [
      "layout",
      "button"
    ]
  }
}