Card
Displays a card with a header, content, and footer.
Installation
npx shadcn@latest add @tetra-ui/cardUsage
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card";<Card>
<CardHeader>
<CardTitle>Card Title</CardTitle>
<CardDescription>Card Description</CardDescription>
</CardHeader>
<CardContent>
<Text>Card Content</Text>
</CardContent>
<CardFooter>
<Text>Card Footer</Text>
</CardFooter>
</Card>With form fields
Cards work well as containers for grouped form content. Combine with Field and input components:
import { Button } from "@/components/ui/button";
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Field, FieldControl, FieldLabel } from "@/components/ui/form";
import { PasswordInput } from "@/components/ui/password-input";
import { Stack } from "@/components/ui/stack";
import { TextInput } from "@/components/ui/text-input";<Card>
<CardHeader>
<CardTitle>Welcome back</CardTitle>
<CardDescription>Login to your account to continue</CardDescription>
</CardHeader>
<CardContent>
<Stack gap="md">
<Field>
<FieldLabel>Username</FieldLabel>
<FieldControl>
<TextInput placeholder="Enter your username" />
</FieldControl>
</Field>
<Field>
<FieldLabel>Password</FieldLabel>
<FieldControl>
<PasswordInput placeholder="Enter your password" />
</FieldControl>
</Field>
</Stack>
</CardContent>
<CardFooter className="gap-2">
<Button>Login</Button>
<Button variant="ghost">Sign Up</Button>
</CardFooter>
</Card>