Docs

Molecules

Card

Container for grouping related content, actions, and media.

5 examplesPrimitive ComponentReact 19 & Next.js 16Tailwind CSS v4
Install
pnpm add @quinkit/ui
Import
import { Card } from "@quinkit/ui";

Interactive Examples

Live previews · code · themes · viewport · dark mode

Basic

Header, content, and footer regions.

Basic rendered preview

Create project

Deploy your new project in one click.

Composable header, content, and footer regions for product UI.

Product card

Media, details, and a primary action.

Product card rendered preview

Product image

Aurora Headphones

New

Wireless, noise-cancelling.

$299.00

Metric / stat cards

Compact KPI cards for dashboards.

Metric / stat cards rendered preview

Revenue

$48,250

+12.5% vs last month

Active users

2,318

+4.2% vs last month

Churn

1.1%

-0.3% vs last month

Profile card

An avatar with identity and an action.

Profile card rendered preview

AL

Ada Lovelace

Principal Engineer

Pricing card

A plan with price and feature list.

Pricing card rendered preview

Pro

Popular

For growing teams.

$29 /month

  • Unlimited projects
  • Advanced analytics
  • Priority support
  • SSO & audit logs

Overview

Card is a Week 4 molecule for grouping related content, actions, and metadata inside a theme-aware container.

It supports header, title, description, content, and footer slots. It uses semantic design tokens such as bg-card, text-card-foreground, and border-border, so it adapts automatically to dark mode, themes, and palettes.

API

ComponentPurpose
CardRoot content container.
CardHeaderHeader region for title/description/controls.
CardTitleSemantic heading. Supports as="h2", as="h3", or as="h4".
CardDescriptionMuted supporting text.
CardContentMain body region.
CardFooterFooter actions and metadata.

Accessibility Details

  • Use CardTitle with the correct heading level for page structure.
  • Buttons and links inside CardFooter keep their native keyboard behavior.
  • The card itself is non-interactive by default; use links/buttons inside it instead of making the entire card clickable unless required.

Dark mode and reduced motion

  • Uses semantic tokens for light/dark/theme compatibility.
  • Uses motion-reduce:transition-none to respect reduced motion preferences.

Accessibility & Keyboard

Card adheres to WAI-ARIA design patterns for accessible web components.

Keyboard Navigation

  • Tab / Shift + Tab — Focuses control and moves between interactive elements.
  • Space / Enter — Triggers action or toggles selection.
  • Escape — Closes open popovers, overlays, or dropdown menus.

ARIA Standards

  • Built with semantic HTML tags and explicit aria-* attributes.
  • Uses high-contrast focus rings (ring-ring) visible in both light & dark mode.
  • Supports screen readers with non-visual label fallbacks.

Registry Install

Add a shadcn-compatible bridge file to your project that re-exports from @quinkit/ui.

Registry
npx shadcn@latest add https://quinkit-ui.vercel.app/r/card.json