Card

1import * as React from "react";
2 
3import { cn } from "@/lib/utils";
4 
5function Card({ className, ...props }: React.ComponentProps<"div">) {
6  return (
7    <div
8      data-slot="card"
9      className={cn(
10        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
11        className
12      )}
13      {...props}
14    />
15  );
16}
17 
18function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
19  return (
20    <div
21      data-slot="card-header"
22      className={cn(
23        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
24        className
25      )}
26      {...props}
27    />
28  );
29}
30 
31function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
32  return (
33    <div
34      data-slot="card-title"
35      className={cn("leading-none font-semibold", className)}
36      {...props}
37    />
38  );
39}
40 
41function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
42  return (
43    <div
44      data-slot="card-description"
45      className={cn("text-muted-foreground text-sm", className)}
46      {...props}
47    />
48  );
49}
50 
51function CardAction({ className, ...props }: React.ComponentProps<"div">) {
52  return (
53    <div
54      data-slot="card-action"
55      className={cn(
56        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
57        className
58      )}
59      {...props}
60    />
61  );
62}
63 
64function CardContent({ className, ...props }: React.ComponentProps<"div">) {
65  return (
66    <div
67      data-slot="card-content"
68      className={cn("px-6", className)}
69      {...props}
70    />
71  );
72}
73 
74function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
75  return (
76    <div
77      data-slot="card-footer"
78      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
79      {...props}
80    />
81  );
82}
83 
84export {
85  Card,
86  CardHeader,
87  CardFooter,
88  CardTitle,
89  CardAction,
90  CardDescription,
91  CardContent,
92};