Command Palette

Search for a command to run...

Card

Displays a card with header, content, and footer.

DocsAPI Reference
Create project
Deploy your new project in one-click.

Installation

npx shadcn@latest add card

Usage

import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/xfork-ui/card"
<Card>
<CardHeader>
  <CardTitle>Card Title</CardTitle>
  <CardDescription>Card Description</CardDescription>
</CardHeader>
<CardContent>
  <p>Card Content</p>
</CardContent>
<CardFooter>
  <p>Card Footer</p>
</CardFooter>
</Card>

Examples

Notifications
You have 3 unread messages.

Push Notifications

Send notifications to device.

Your call has been confirmed.

1 hour ago

You have a new message!

1 hour ago

Your subscription is expiring soon!

2 hours ago

Changelog

11-03-2024 a11y for title and description

Changed the CardTitle and CardDescription components to use div instead of h3 and p to improve accessibility.

card.tsx
const CardTitle = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
  ref={ref}
  className={cn("font-semibold leading-none tracking-tight", className)}
  {...props}
/>
))
CardTitle.displayName = "CardTitle"
const CardDescription = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
  ref={ref}
  className={cn("text-sm text-muted-foreground", className)}
  {...props}
/>
))
CardDescription.displayName = "CardDescription"