{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card",
  "type": "registry:ui",
  "title": "Card",
  "description": "The elevated surface primitive, with header, title, description, content, and footer slots.",
  "categories": [
    "display",
    "layout"
  ],
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "https://whiskeyjack.net/r/utils.json"
  ],
  "files": [
    {
      "path": "components/ui/card.tsx",
      "type": "registry:ui",
      "target": "components/ui/card.tsx",
      "content": "import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\n\nconst Card = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"rounded-xl\",\n      \"bg-[var(--color-surface-light)] text-[var(--color-text-primary-light)]\",\n      // Elevation plus a hairline edge, in place of a 1px border. The card's\n      // boundary reads as a lit edge rather than a drawn rule, which lets a\n      // stack of them sit closer together without turning into a grid.\n      \"shadow-card-bevel\",\n      \"dark:bg-[var(--color-surface-dark)] dark:text-[var(--color-text-primary-dark)]\",\n      className\n    )}\n    {...props}\n  />\n));\nCard.displayName = \"Card\";\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex flex-col space-y-1.5 p-6\", className)}\n    {...props}\n  />\n));\nCardHeader.displayName = \"CardHeader\";\n\nconst CardTitle = React.forwardRef<\n  HTMLHeadingElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h3\n    ref={ref}\n    className={cn(\n      \"text-2xl font-semibold leading-none tracking-tight\",\n      className\n    )}\n    {...props}\n  />\n));\nCardTitle.displayName = \"CardTitle\";\n\nconst CardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn(\n      \"text-sm text-[var(--color-text-secondary-light)]\",\n      \"dark:text-[var(--color-text-secondary-dark)]\",\n      className\n    )}\n    {...props}\n  />\n));\nCardDescription.displayName = \"CardDescription\";\n\n/**\n * Two ways a card carries its content, which differ by whether a `CardHeader`\n * sits above it.\n *\n * `default` keeps the shadcn geometry: full padding, and **no top padding**,\n * because the header directly above already supplied it.\n *\n * `compact` is for a card with **no** `CardHeader` -- one whose content leads\n * with its own section heading. It needs top padding back (there is no header\n * to provide it) but less of it than a header would occupy, and slightly\n * tighter sides to suit the denser stacked-card layouts these appear in. So it\n * is not uniformly smaller than `default`: sides tighten, the top gains.\n */\nconst cardContentVariants = cva(\"\", {\n  variants: {\n    density: {\n      default: \"p-6 pt-0\",\n      compact: \"p-5 pt-3\",\n    },\n  },\n  defaultVariants: {\n    density: \"default\",\n  },\n});\n\nexport interface CardContentProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof cardContentVariants> {}\n\nconst CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(\n  ({ className, density, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(cardContentVariants({ density }), className)}\n      {...props}\n    />\n  )\n);\nCardContent.displayName = \"CardContent\";\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex items-center p-6 pt-0\", className)}\n    {...props}\n  />\n));\nCardFooter.displayName = \"CardFooter\";\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };\n"
    }
  ],
  "docs": "Use Card to group related content into a panel. The semantic tokens keep it correct in light, dark, and OLED with no per-card styling, and --shadow-card is its standard elevation. CardContent takes a density: default (p-6 pt-0) pairs with a CardHeader, which supplies the top padding; compact (p-5 pt-3) is for a card with no header whose content leads with its own heading, so it needs that top padding back. Reach for compact instead of hand-writing the padding on stacked self-titled cards.",
  "meta": {
    "group": "display",
    "related": [
      "empty-state",
      "notice"
    ],
    "exports": [
      "Card",
      "CardHeader",
      "CardTitle",
      "CardDescription",
      "CardContent",
      "CardFooter"
    ],
    "siteSlug": "card"
  }
}