Card
A container for grouped content with optional compact sizing.
The card component supports a size prop that defaults to "default" for standard spacing and sizing.
<div className="w-full max-w-sm"> <Card> <CardHeader> <CardTitle>Default Card</CardTitle> <CardDescription>This card uses the default size variant.</CardDescription> </CardHeader> <CardContent> <div> The card component supports a size prop that defaults to "default" for standard spacing and sizing. </div> </CardContent> <CardFooter> <Button variant="secondary" className="w-full"> Review proposal </Button> </CardFooter> </Card></div>Usage
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@reva/ui";Examples
We'll add more examples later, inspired by https://ui.shadcn.com/create?preset=b6sBtHJVj&template=vite-monorepo&item=card-example
Size
Use size="sm" for tighter padding, gap, and type scale on the root card.
The small variant tightens padding, gap, and type scale. Use it in sidebars, tables, and other dense layouts.
<div className="w-full max-w-xs"> <Card size="sm"> <CardHeader> <CardTitle>Small card</CardTitle> <CardDescription>This card uses the small size variant.</CardDescription> </CardHeader> <CardContent> <div> The small variant tightens padding, gap, and type scale. Use it in sidebars, tables, and other dense layouts. </div> </CardContent> <CardFooter> <Button variant="secondary" size="sm" className="w-full"> Review proposal </Button> </CardFooter> </Card></div>With form
Compose Card with Field, Input and Combobox to host a focused form on a card surface. Use CardAction for a secondary action in the header (e.g. a sign-up link) and stack the primary and alternate buttons in CardFooter. The Combobox popover floats above the Card, sharing the same elevated surface token as the Card itself.
const workspaces = ["Acme Capital", "Hayven Advisors", "Lumen Wealth"];export function CardLoginFormDemo() { return ( <div className="w-full max-w-sm"> <Card> <CardHeader> <CardTitle>Login to your account</CardTitle> <CardDescription> Enter your email below to login to your account </CardDescription> <CardAction> <Button variant="link">Sign Up</Button> </CardAction> </CardHeader> <CardContent> <form> <FieldGroup> <Field> <FieldLabel htmlFor="card-login-email">Email</FieldLabel> <Input id="card-login-email" type="email" placeholder="m@example.com" required /> </Field> <Field> <HStack justify="between" align="center"> <FieldLabel htmlFor="card-login-password">Password</FieldLabel> <a href="#forgot-password" className="text-sm text-fg-muted underline-offset-4 hover:text-fg-link hover:underline"> Forgot your password? </a> </HStack> <Input id="card-login-password" type="password" required /> </Field> <Field> <FieldLabel htmlFor="card-login-workspace">Workspace</FieldLabel> <Combobox items={workspaces}> <ComboboxInput id="card-login-workspace" placeholder="Select workspace" /> <ComboboxContent> <ComboboxEmpty>No workspaces found.</ComboboxEmpty> <ComboboxList> {(item) => ( <ComboboxItem key={item} value={item}> {item} </ComboboxItem> )} </ComboboxList> </ComboboxContent> </Combobox> </Field> </FieldGroup> </form> </CardContent> <CardFooter className="flex-col gap-2"> <Button type="submit" className="w-full">Login</Button> <Button variant="secondary" className="w-full">Login with Google</Button> </CardFooter> </Card> </div> );}Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | "default" | "sm" | "default" | Controls padding, gap, and type scale on the root card. |