Card
unreleasedstable
A content container for grouping related information and actions.
Create project
Deploy your new project in one-click.
This will take a few seconds to complete.
import {
Card,
CardDescription,
CardFooter,
CardHeader,
CardPanel,
CardTitle,
} from "@/components/ui/card";
export function Component() {
return (
<Card>
<CardHeader>
<CardTitle>Create project</CardTitle>
<CardDescription>Configure a new workspace.</CardDescription>
</CardHeader>
<CardPanel>Project settings go here.</CardPanel>
<CardFooter>Actions go here.</CardFooter>
</Card>
);
}Card
Root container with border, surface, and card foreground tokens.
CardHeader
Top region for title, description, and optional action.
CardTitle
Primary heading inside the card header.
CardDescription
Supporting description text inside the card header.
CardPanel
Main content region with default card padding.
CardFooter
Bottom region for actions or secondary information.
Create project
Deploy your new project in one-click.
This will take a few seconds to complete.