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 — Base UI
card.tsx
1234567891011121314151617181920212223import { Card } from "#components/ui/base-ui/card.tsx";import { Button } from "#components/ui/base-ui/button.tsx";
export function Example() { return ( // variant/size resolve once on Root; parts inherit them via context and // expose data-variant / data-size attributes <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 render={<a href="/settings" />}>Project settings</Card.Title>