Docs/Components/Card

Card

A container component for grouping related content and actions.

Card Title

Card description goes here.

Card content

Installation

Install the component Card in your project using the CLI.

Card.tsx

pnpm dlx behsseui@latest add Card

Install the component manually.

Create a ui folder at the root of the project, then a component folder inside it, and finally a Card.tsx file in that folder.

Copy and paste the following code into your project.

ui/components/Card.tsx

1import { cn } from "@/lib/utils"
2
3interface CardProps extends React.HTMLAttributes<HTMLDivElement> {}
4
5function Card({ className, ...props }: CardProps) {
6  return (
7    <div
8      className={cn(
9        "rounded-lg border border-border bg-card text-card-foreground shadow-sm",
10        className
11      )}
12      {...props}
13    />
14  )
15}
16
17interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
18
19function CardHeader({ className, ...props }: CardHeaderProps) {
20  return (
21    <div
22      className={cn("flex flex-col space-y-1.5 p-6", className)}
23      {...props}
24    />
25  )
26}
27
28interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}
29
30function CardTitle({ className, ...props }: CardTitleProps) {
31  return (
32    <h3
33      className={cn("text-2xl font-semibold leading-none tracking-tight", className)}
34      {...props}
35    />
36  )
37}
38
39interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {}
40
41function CardDescription({ className, ...props }: CardDescriptionProps) {
42  return (
43    <p
44      className={cn("text-sm text-muted-foreground", className)}
45      {...props}
46    />
47  )
48}
49
50interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {}
51
52function CardContent({ className, ...props }: CardContentProps) {
53  return (
54    <div
55      className={cn("p-6 pt-0", className)}
56      {...props}
57    />
58  )
59}
60
61interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {}
62
63function CardFooter({ className, ...props }: CardFooterProps) {
64  return (
65    <div
66      className={cn("flex items-center p-6 pt-0", className)}
67      {...props}
68    />
69  )
70}
71
72export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter }
73

Usages

Different variants and use cases for the Card component.

Default

A basic card with header, title, description and content.

Card Title

Card description goes here.

Card content

Default.tsx

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card description goes here.</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card content</p>
  </CardContent>
</Card>

Simple

A simple card with only content.

A simple card with only content.

Simple.tsx

<Card>
  <CardContent className="pt-6">
    <p>A simple card with only content.</p>
  </CardContent>
</Card>
← Retour aux composants