Card

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@/components/ui/card"

<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
    <CardDescription>Description</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Content goes here.</p>
  </CardContent>
  <CardFooter>
    <Button>Action</Button>
  </CardFooter>
</Card>

<Card className="w-80">
  <CardHeader>
    <CardTitle>Notifications</CardTitle>
    <CardDescription>You have 3 unread messages.</CardDescription>
  </CardHeader>
  <CardContent>
    <p className="text-sm text-muted-foreground">Check your inbox to stay up to date.</p>
  </CardContent>
</Card>

<Card className="w-80">
  <CardHeader>
    <CardTitle>Team</CardTitle>
    <CardDescription>Manage your team members.</CardDescription>
    <CardAction>
      <Button variant="outline" size="compact">Invite</Button>
    </CardAction>
  </CardHeader>
  <CardContent>
    <p className="text-sm text-muted-foreground">3 members · 1 pending invite</p>
  </CardContent>
</Card>

<Card className="w-80">
  <CardHeader>
    <CardTitle>Delete account</CardTitle>
    <CardDescription>This action cannot be undone.</CardDescription>
  </CardHeader>
  <CardContent>
    <p className="text-sm text-muted-foreground">All your data will be permanently removed.</p>
  </CardContent>
  <CardFooter className="gap-2">
    <Button variant="outline" size="compact">Cancel</Button>
    <Button variant="destructive" size="compact">Delete</Button>
  </CardFooter>
</Card>

npx shadcn@latest add https://solar-ui.com/r/card.json

import * as React from "react"
import { cn } from "@/lib/utils"
 
function Card({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card"
      className={cn("bg-card text-card-foreground rounded-xl border shadow-sm", className)}
      {...props}
    />
  )
}
 
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-header"
      className={cn("flex flex-col gap-1.5 p-6", className)}
      {...props}
    />
  )
}
 
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-title"
      className={cn("leading-none font-semibold", className)}
      {...props}
    />
  )
}
 
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-description"
      className={cn("text-muted-foreground text-sm", className)}
      {...props}
    />
  )
}
 
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-action"
      className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
      {...props}
    />
  )
}
 
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-content"
      className={cn("p-6 pt-0", className)}
      {...props}
    />
  )
}
 
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-footer"
      className={cn("flex items-center p-6 pt-0", className)}
      {...props}
    />
  )
}
 
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardAction, CardContent }