Card

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