{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "card",
  "title": "Card",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-vue/components/card/Card.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { cardVariants } from './card.variants'\n\n// Inlined union: SFC compiler can't extract runtime props from\n// `CardVariants['variant']`.\nconst props = defineProps<{\n  variant?: 'default' | 'elevated' | 'outline' | 'ghost'\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div data-uipkge data-slot=\"card\" :class=\"cn(cardVariants({ variant }), 'overflow-hidden', props.class)\">\n    <slot />\n  </div>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/card/Card.vue"
    },
    {
      "path": "packages/registry-vue/components/card/CardAction.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-uipkge\n    data-slot=\"card-action\"\n    :class=\"cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/card/CardAction.vue"
    },
    {
      "path": "packages/registry-vue/components/card/CardContent.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div data-uipkge data-slot=\"card-content\" :class=\"cn('p-6 pt-0', props.class)\">\n    <slot />\n  </div>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/card/CardContent.vue"
    },
    {
      "path": "packages/registry-vue/components/card/CardDescription.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <p data-uipkge data-slot=\"card-description\" :class=\"cn('text-muted-foreground text-sm', props.class)\">\n    <slot />\n  </p>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/card/CardDescription.vue"
    },
    {
      "path": "packages/registry-vue/components/card/CardFooter.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div data-uipkge data-slot=\"card-footer\" :class=\"cn('flex items-center p-6 pt-0', props.class)\">\n    <slot />\n  </div>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/card/CardFooter.vue"
    },
    {
      "path": "packages/registry-vue/components/card/CardHeader.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div data-uipkge data-slot=\"card-header\" :class=\"cn('flex flex-col space-y-1.5 p-6', props.class)\">\n    <slot />\n  </div>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/card/CardHeader.vue"
    },
    {
      "path": "packages/registry-vue/components/card/CardTitle.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div'\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <component\n    :is=\"props.as ?? 'h3'\"\n    data-uipkge\n    data-slot=\"card-title\"\n    :class=\"cn('leading-none font-semibold tracking-tight', props.class)\"\n  >\n    <slot />\n  </component>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/card/CardTitle.vue"
    },
    {
      "path": "packages/registry-vue/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": "~/app/components/ui/card/card.variants.ts"
    },
    {
      "path": "packages/registry-vue/components/card/index.ts",
      "content": "export { default as Card } from './Card.vue'\nexport { default as CardAction } from './CardAction.vue'\nexport { default as CardContent } from './CardContent.vue'\nexport { default as CardDescription } from './CardDescription.vue'\nexport { default as CardFooter } from './CardFooter.vue'\nexport { default as CardHeader } from './CardHeader.vue'\nexport { default as CardTitle } from './CardTitle.vue'\n\n// Re-export variant API from the sibling file (kept separate to avoid the\n// Card.vue <-> index.ts circular import that broke dev SSR).\nexport { cardVariants, type CardVariants } from './card.variants'\n",
      "type": "registry:ui",
      "target": "~/app/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"
  ]
}