{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card",
  "title": "Card",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-react/components/card/card.tsx",
      "content": "import * as React from 'react'\nimport { cn } from '@/lib/utils'\nimport { cardVariants, type CardVariants } from './card.variants'\n\nexport interface CardProps extends React.HTMLAttributes<HTMLDivElement>, CardVariants {}\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(({ className, variant, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-uipkge=\"\"\n    data-slot=\"card\"\n    className={cn(cardVariants({ variant }), 'overflow-hidden', className)}\n    {...props}\n  />\n))\nCard.displayName = 'Card'\n\nconst CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} data-uipkge=\"\" data-slot=\"card-header\" className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />\n  ),\n)\nCardHeader.displayName = 'CardHeader'\n\nconst CardTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(\n  ({ className, ...props }, ref) => (\n    <h3\n      ref={ref}\n      data-uipkge=\"\"\n      data-slot=\"card-title\"\n      className={cn('leading-none font-semibold tracking-tight', className)}\n      {...props}\n    />\n  ),\n)\nCardTitle.displayName = 'CardTitle'\n\nconst CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(\n  ({ className, ...props }, ref) => (\n    <p ref={ref} data-uipkge=\"\" data-slot=\"card-description\" className={cn('text-muted-foreground text-sm', className)} {...props} />\n  ),\n)\nCardDescription.displayName = 'CardDescription'\n\nconst CardAction = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-uipkge=\"\"\n      data-slot=\"card-action\"\n      className={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}\n      {...props}\n    />\n  ),\n)\nCardAction.displayName = 'CardAction'\n\nconst CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} data-uipkge=\"\" data-slot=\"card-content\" className={cn('p-6 pt-0', className)} {...props} />\n  ),\n)\nCardContent.displayName = 'CardContent'\n\nconst CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} data-uipkge=\"\" data-slot=\"card-footer\" className={cn('flex items-center p-6 pt-0', className)} {...props} />\n  ),\n)\nCardFooter.displayName = 'CardFooter'\n\nexport { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter }\n",
      "type": "registry:ui",
      "target": "~/components/ui/card/card.tsx"
    },
    {
      "path": "packages/registry-react/components/card/card.variants.ts",
      "content": "import type { VariantProps } from 'class-variance-authority'\nimport { cva } from 'class-variance-authority'\n\n/**\n * Variant definitions live in their own file (rather than the package\n * `index.ts`) so `Card.vue` can `import { cardVariants } from './card.variants'`\n * without creating a circular dependency back through the index. The circular\n * form caused intermittent `$setup.cardVariants is not a function` errors\n * during dev SSR when several `<Card>` instances rendered in a v-for before\n * the module graph had fully resolved.\n */\nexport const cardVariants = cva(\n  'bg-card text-card-foreground rounded-xl border shadow-sm transition-colors duration-150',\n  {\n    variants: {\n      variant: {\n        default: 'border-border',\n        elevated: 'border-transparent shadow-md hover:shadow-md',\n        outline: 'border-2',\n        ghost: 'border-transparent shadow-none hover:bg-muted/50',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nexport type CardVariants = VariantProps<typeof cardVariants>\n",
      "type": "registry:ui",
      "target": "~/components/ui/card/card.variants.ts"
    },
    {
      "path": "packages/registry-react/components/card/index.ts",
      "content": "export { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter, type CardProps } from './card'\nexport { cardVariants, type CardVariants } from './card.variants'\n",
      "type": "registry:ui",
      "target": "~/components/ui/card/index.ts"
    }
  ],
  "dependencies": [
    "class-variance-authority"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Bordered container with an opinionated header / content / footer layout. Use it as the wrapper around any self-contained block of content — settings panels, dashboard tiles, list cells.",
  "categories": [
    "layout"
  ]
}