QuackElements
Browse components+
Components/Card

Card

A flexible surface for grouping related content and actions.

Interactive example

Team plan
Everything your product team needs to move together.
12 collaborators

Installation

Run the CLI from your project root. Dependencies and component source are added automatically.

$npx quackelements add card

Usage

The generated file lives in your repository, so the component API and styles remain fully editable.

example.tsx
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/quack/card"

export function CardDemo() {
  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
        <CardTitle>Team plan</CardTitle>
        <CardDescription>Everything your product team needs.</CardDescription>
      </CardHeader>
      <CardContent>12 active collaborators</CardContent>
    </Card>
  )
}