Card
A surface with a title, description, and content.
Upstream documentationExamples
Installation
Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.
Install Card
pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/card.json'Usage
A complete example using the installed component and hook paths.
Card usage
"use client";import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";const CardPreview = function CardPreview() { return ( <Card className="w-full"> <CardHeader> <CardTitle>One shared theme</CardTitle> <CardDescription>The same tokens, on every surface.</CardDescription> </CardHeader> <CardContent> <p className="text-sm text-muted-foreground">A compact card specimen.</p> </CardContent> </Card> ); };export default function Demo() { return <CardPreview />;}API Reference
Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.
Card
Card props
React.ComponentProps<"div"> & { size?: "default" | "sm" }- size
- "default"
CardHeader
CardHeader props
React.ComponentProps<"div">CardFooter
CardFooter props
React.ComponentProps<"div">CardTitle
CardTitle props
React.ComponentProps<"div">CardAction
CardAction props
React.ComponentProps<"div">CardDescription
CardDescription props
React.ComponentProps<"div">CardContent
CardContent props
React.ComponentProps<"div">