All componentselevatedoutlinesubtlesolidsmmdlg
Card
Content containers with elevated, outline, subtle, and solid variants — Root resolves variant and size once and every part inherits them through context.
Project settings
Manage tokens and themes.
Variants
Project settings
Manage tokens and themes.
Project settings
Manage tokens and themes.
Project settings
Manage tokens and themes.
Project settings
Manage tokens and themes.
Sizes
Project settings
Manage tokens and themes.
Project settings
Manage tokens and themes.
Project settings
Manage tokens and themes.
Install
zsh — card
1bunx stylexblocks add cardUsage — Ark UI
card.tsx
12345678910111213141516171819202122import { Card } from "#components/ui/ark-ui/card.tsx";import { Button } from "#components/ui/ark-ui/button.tsx";
export function Example() { return ( // variant/size resolve once on Root; every part inherits them via context <Card.Root variant="elevated" size="md"> <Card.Header> <Card.Title>Project settings</Card.Title> <Card.Description>Manage tokens and themes.</Card.Description> </Card.Header> <Card.Body>Rename the project or transfer ownership.</Card.Body> <Card.Footer> <Button variant="surface" size="sm">Cancel</Button> <Button variant="solid" size="sm">Save</Button> </Card.Footer> </Card.Root> );}
// composition works per part — e.g. render the title as a link:// <Card.Title asChild><a href="/settings">Project settings</a></Card.Title>