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-xs',
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-1.5 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};