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