ComponentsCore

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 motion

Add cn helper using clsx and twMerge for conditional class merging in Tailwind components.

lib/utils.ts

Copy and paste the following code into your project.

components/ui/core/card.tsx
npx @libravelui@latest add card

Anatomy

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.

Edit on GitHub

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.