{
"schemaVersion": 1,
"target": "react",
"name": "card",
"version": "0.2.0",
"category": "core",
"title": "Card",
"description": "A hairline surface for grouped content, with header, content, and footer parts and an optional interactive state.",
"tags": [
"layout",
"surface",
"panel"
],
"requires": {
"projectTypes": [
"next",
"vite-react"
],
"styling": "tailwind-v4"
},
"npmDependencies": {},
"registryDependencies": [],
"docsPath": "/components/card",
"props": [
{
"name": "interactive",
"type": "boolean",
"default": "false",
"description": "Strengthens the border and shadow on hover and when something inside has keyboard focus. Use when the card contains the primary link or action."
},
{
"name": "CardHeader, CardTitle, CardDescription, CardContent, CardFooter",
"type": "ComponentProps<…>",
"description": "Layout parts. Each accepts the props of its element (div, h3, or p)."
}
],
"accessibility": [
"CardTitle renders an
; pass a different element with your own heading if the page outline needs it.",
"The interactive state also shows on keyboard focus inside the card (has-focus-visible). It only changes border and shadow color, so nothing moves; the transition is removed with reduced motion."
],
"states": [
"default",
"hover",
"focus-within"
],
"files": [
{
"path": "ui/card.tsx",
"content": "import type { ComponentProps } from \"react\";\n\nfunction cx(...classes: (string | false | null | undefined)[]) {\n return classes.filter(Boolean).join(\" \");\n}\n\nexport interface CardProps extends ComponentProps<\"div\"> {\n /**\n * For cards that act as links or buttons: the border and shadow strengthen on hover and\n * when something inside has keyboard focus.\n */\n interactive?: boolean;\n}\n\nexport function Card({ interactive = false, className, ...props }: CardProps) {\n return (\n \n );\n}\n\n/** Title block. Holds a CardTitle and an optional CardDescription. */\nexport function CardHeader({ className, ...props }: ComponentProps<\"div\">) {\n return ;\n}\n\nexport function CardTitle({ className, ...props }: ComponentProps<\"h3\">) {\n return ;\n}\n\nexport function CardDescription({ className, ...props }: ComponentProps<\"p\">) {\n return
;\n}\n\nexport function CardContent({ className, ...props }: ComponentProps<\"div\">) {\n return ;\n}\n\n/** Action row, separated from the content by a divider. */\nexport function CardFooter({ className, ...props }: ComponentProps<\"div\">) {\n return (\n \n );\n}\n"
}
],
"example": {
"content": "import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from \"@/components/seamless/ui/card\";\n\nconst stats = [\n { label: \"Runs\", value: \"1,284\" },\n { label: \"Success\", value: \"97.2%\" },\n { label: \"Median\", value: \"4.1 s\" },\n];\n\nexport default function CardExample() {\n return (\n \n \n Research agent\n Answers questions from your docs and cites its sources.\n \n \n