FiberUICard
Displays a card with header, content, and footer.
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 asChild>
<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 asChild>
<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,
};