Card (Shared)

Composable card with header, title, description, content, and footer sub-components. A flexible container for grouping related content.

Project Update

Latest changes to the component library

All 49 static components have been polished with consistent design tokens including frosted glass overlays, ring borders, and hover shadows.

Overview

Card is a compound component with 6 sub-components that can be composed together. Each part uses data-slot attributes for styling and targeting.

Usage

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

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

Installation

Install via CLI

TypeScript

npx edbn-ui@latest add card

Examples

Basic Card

Notifications

You have 3 unread messages

Check your inbox for the latest updates.

With Footer

Cookie Settings

Manage your cookie preferences

We use cookies to improve your experience. You can customize your preferences below.

Sub-components

Carddiv

Root container — rounded-2xl, gradient bg, ring border. Supports variant prop: default | solid | ghost | elevated

CardHeaderdiv

Header section with contrasting background and bottom separator

CardTitlediv

Semibold heading with tight tracking

CardDescriptiondiv

Muted description text

CardContentdiv

Main content area with padding

CardFooterdiv

Footer with contrasting background and top separator for actions