Card
A flexible card component for displaying grouped content like headers, images, and footers. Perfect for dashboards, profiles, and listings, with built-in dark mode and responsiveness.
Basic Usage
Create project
Deploy your new project in one-click.
import { Button } from "@repo/ui/components/button";
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@repo/ui/components/card";
import { Input } from "@repo/ui/components/input";
import { Label } from "@repo/ui/components/label";
export function Example1() {
return (
<Card className="w-80 sm:w-96">
<CardHeader>
<CardTitle>Create project</CardTitle>
<CardDescription>
Deploy your new project in one-click.
</CardDescription>
</CardHeader>
<CardContent>
<form>
<div className="grid w-full items-center gap-4">
<div className="flex flex-col space-y-1.5">
<Label htmlFor="name">Name</Label>
<Input
id="name"
placeholder="Name of your project"
/>
</div>
</div>
</form>
</CardContent>
<CardFooter className="flex justify-between">
<Button variant="outline">Cancel</Button>
<Button>Deploy</Button>
</CardFooter>
</Card>
);
}
Login Form
Login
Enter your email below to login to your account.
import { Button } from "@repo/ui/components/button";
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@repo/ui/components/card";
import { Input } from "@repo/ui/components/input";
import { Label } from "@repo/ui/components/label";
export function Example2() {
return (
<Card className="w-80 sm:w-96">
<CardHeader>
<CardTitle className="text-2xl">Login</CardTitle>
<CardDescription>
Enter your email below to login to your account.
</CardDescription>
</CardHeader>
<CardContent className="grid gap-4">
<div className="grid gap-2">
<Label htmlFor="email">Email</Label>
<Input
id="email"
type="email"
placeholder="m@example.com"
required
/>
</div>
<div className="grid gap-2">
<Label htmlFor="password">Password</Label>
<Input id="password" type="password" required />
</div>
</CardContent>
<CardFooter>
<Button className="w-full">Sign in</Button>
</CardFooter>
</Card>
);
}
Notifications
Notifications
You have 3 unread messages.
Your call has been confirmed.
1 hour ago
You have a new message!
1 hour ago
Your subscription is expiring soon!
2 hours ago
import { Button } from "@repo/ui/components/button";
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@repo/ui/components/card";
import { Checkbox } from "@repo/ui/components/checkbox";
import { Label } from "@repo/ui/components/label";
const notifications = [
{
title: "Your call has been confirmed.",
description: "1 hour ago",
},
{
title: "You have a new message!",
description: "1 hour ago",
},
{
title: "Your subscription is expiring soon!",
description: "2 hours ago",
},
];
export function Example3() {
return (
<Card className="w-80 sm:w-96">
<CardHeader>
<CardTitle>Notifications</CardTitle>
<CardDescription>You have 3 unread messages.</CardDescription>
</CardHeader>
<CardContent className="grid gap-4">
<Label className="has-aria-checked:border-blue-600 has-aria-checked:bg-blue-50 dark:has-aria-checked:border-blue-900 dark:has-aria-checked:bg-blue-950 flex items-center space-x-4 rounded-md border p-4">
<div className="flex-1 space-y-1">
<p className="text-sm font-medium leading-none">
Push Notifications
</p>
<p className="text-muted-foreground text-sm">
Send notifications to device.
</p>
</div>
<Checkbox className="data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white dark:data-[state=checked]:border-blue-700 dark:data-[state=checked]:bg-blue-700" />
</Label>
<div>
{notifications.map((notification, index) => (
<div
key={index}
className="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0"
>
<span className="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500" />
<div className="space-y-1">
<p className="text-sm font-medium leading-none">
{notification.title}
</p>
<p className="text-muted-foreground text-sm">
{notification.description}
</p>
</div>
</div>
))}
</div>
</CardContent>
<CardFooter>
<Button className="w-full">Mark all as read</Button>
</CardFooter>
</Card>
);
}
Cookie Settings
Cookie Settings
Manage your cookie settings here.
import { Button } from "@repo/ui/components/button";
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@repo/ui/components/card";
import { Checkbox } from "@repo/ui/components/checkbox";
import { Label } from "@repo/ui/components/label";
import { Separator } from "@repo/ui/components/separator";
export function Example4() {
return (
<Card className="w-80 overflow-hidden sm:w-96">
<CardHeader>
<div className="mb-5 h-[100px] w-full rounded-lg bg-zinc-100 dark:bg-zinc-800" />
<CardTitle>Cookie Settings</CardTitle>
<CardDescription>
Manage your cookie settings here.
</CardDescription>
</CardHeader>
<CardContent>
<div className="grid gap-4">
<div className="flex items-center justify-between space-x-2">
<Label
htmlFor="necessary"
className="flex flex-col space-y-1"
>
<span>Strictly Necessary</span>
<span className="text-muted-foreground font-normal leading-snug">
These cookies are essential in order to use the
website and use its features.
</span>
</Label>
<Checkbox
id="necessary"
className="h-4 w-4"
defaultSelected
isDisabled
/>
</div>
<Separator />
<div className="flex items-center justify-between space-x-2">
<Label
htmlFor="functional"
className="flex flex-col space-y-1"
>
<span>Functional Cookies</span>
<span className="text-muted-foreground font-normal leading-snug">
These cookies allow the website to provide
personalized functionality.
</span>
</Label>
<Checkbox id="functional" className="h-4 w-4" />
</div>
<Separator />
<div className="flex items-center justify-between space-x-2">
<Label
htmlFor="performance"
className="flex flex-col space-y-1"
>
<span>Performance Cookies</span>
<span className="text-muted-foreground font-normal leading-snug">
These cookies help to improve the performance of
the website.
</span>
</Label>
<Checkbox id="performance" className="h-4 w-4" />
</div>
</div>
</CardContent>
<CardFooter>
<Button className="w-full">Save preferences</Button>
</CardFooter>
</Card>
);
}
Team Members
Team Members
Invite your team members to collaborate.
SD
Sofia Davis
m@example.com
JL
Jackson Lee
p@example.com
import { Button } from "@repo/ui/components/button";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@repo/ui/components/card";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@repo/ui/components/popover";
export function Example5() {
return (
<Card className="w-80 sm:w-96">
<CardHeader>
<CardTitle>Team Members</CardTitle>
<CardDescription>
Invite your team members to collaborate.
</CardDescription>
</CardHeader>
<CardContent className="grid gap-6">
<div className="flex items-center justify-between space-x-4">
<div className="flex items-center space-x-4">
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-zinc-200 font-bold dark:bg-zinc-700">
<span>SD</span>
</div>{" "}
<div>
<p className="text-sm font-medium leading-none">
Sofia Davis
</p>
<p className="text-muted-foreground text-sm">
m@example.com
</p>
</div>
</div>
<Popover>
<PopoverTrigger>
<Button variant="outline" className="ml-auto">
Owner
</Button>
</PopoverTrigger>
<PopoverContent className="p-0">
<div className="flex flex-col p-2">
<Button
variant="ghost"
className="justify-start"
>
Viewer
</Button>
<Button
variant="ghost"
className="justify-start"
>
Developer
</Button>
<Button
variant="ghost"
className="justify-start"
>
Billing
</Button>
<Button
variant="ghost"
className="justify-start"
>
Owner
</Button>
</div>
</PopoverContent>
</Popover>
</div>
<div className="flex items-center justify-between space-x-4">
<div className="flex items-center space-x-4">
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-zinc-200 font-bold dark:bg-zinc-700">
<span>JL</span>
</div>
<div>
<p className="text-sm font-medium leading-none">
Jackson Lee
</p>
<p className="text-muted-foreground text-sm">
p@example.com
</p>
</div>
</div>
<Popover>
<PopoverTrigger>
<Button variant="outline" className="ml-auto">
Member
</Button>
</PopoverTrigger>
<PopoverContent className="p-0">
<div className="flex flex-col p-2">
<Button
variant="ghost"
className="justify-start"
>
Viewer
</Button>
<Button
variant="ghost"
className="justify-start"
>
Developer
</Button>
<Button
variant="ghost"
className="justify-start"
>
Billing
</Button>
<Button
variant="ghost"
className="justify-start"
>
Owner
</Button>
</div>
</PopoverContent>
</Popover>
</div>
</CardContent>
</Card>
);
}
Component Code
import * as React from "react";
import { cn } from "@repo/ui/lib/utils";
function Card({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card"
className={cn(
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
className,
)}
{...props}
/>
);
}
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-header"
className={cn(
"@container/card-header has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6",
className,
)}
{...props}
/>
);
}
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-title"
className={cn("font-semibold leading-none", className)}
{...props}
/>
);
}
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-description"
className={cn("text-muted-foreground text-sm", className)}
{...props}
/>
);
}
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-action"
className={cn(
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
className,
)}
{...props}
/>
);
}
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-content"
className={cn("px-6", className)}
{...props}
/>
);
}
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-footer"
className={cn("[.border-t]:pt-6 flex items-center px-6", className)}
{...props}
/>
);
}
export {
Card,
CardHeader,
CardFooter,
CardTitle,
CardAction,
CardDescription,
CardContent,
};
Button
A highly customizable button component with support for various variants, sizes, and loading states. Built for accessibility and easy styling with Tailwind CSS utility classes.
Checkbox
An accessible checkbox component for forms and selection lists. Supports indeterminate states, custom styling, and keyboard navigation, built on top of React Aria primitives.