Card
A versatile container component designed to organize and present content in a structured card layout, typically composed of distinct header, body, and footer sections. It provides a clean and consistent way to group related information within a unified visual block.
Example
Installation
Install following dependencies:
npm install react-aria-components tw-animate-css tailwindcss-react-aria-components class-variance-authority lucide-react clsx tailwind-merge motionAdd cn helper using clsx and twMerge for conditional class merging in Tailwind components.
Copy and paste the following code into your project.
npx libravelui@latest add cardAnatomy
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardFooter,
CardTitle,
} from "@/components/ui/core/card";<Card className="w-full max-w-sm">
<CardHeader>
<CardTitle>Title belongs here</CardTitle>
<CardDescription>Head description belongs here</CardDescription>
</CardHeader>
<CardContent>Content goes here</CardContent>
<CardFooter>Footer content goes here</CardFooter>
</Card>Another Examples
Actionable Card
A card component designed to present concise information alongside a clear call to action. Ideal for use in dashboards, summaries, or feature highlights where quick user decisions are encouraged.
Interactive Card
A flexible card component that responds to user interaction such as hover or focus. Perfect for showcasing items that lead to deeper engagement, like navigating to detail pages or triggering modal views.
Shortcut
Shortcut (also known as Keyboard or KBD) support ensures smooth navigation via the keyboard. It's essential for users who rely on keyboard-only interaction and appreciated by power users for quick, efficient access to features.
Description List
A semantic structure used to display pairs of terms and their corresponding descriptions. Ideal for presenting structured data like metadata, definitions, or key-value content in a readable format.