Card

A bordered surface grouping related content, with optional header, content and footer areas. Layout only: no role or behaviour. Give Title a heading element (React `render={<h2 />}`, Angular `<h2 libCardTitle>`) when the card starts a section.

Installation

npx nuecrea-ui add card

Usage

import { Button } from '@/components/ui/button';
import * as Card from '@/components/ui/card';

export default function CardStory() {
  return (
    <main className="grid max-w-sm gap-6">
      <Card.Root>
        <Card.Header>
          <Card.Title>Upgrade to Pro</Card.Title>
          <Card.Description>
            Unlimited projects and priority support.
          </Card.Description>
        </Card.Header>
        <Card.Content>
          <p className="text-sm">$12 per member, billed monthly.</p>
        </Card.Content>
        <Card.Footer>
          <Button variant="outline">Later</Button>
          <Button>Upgrade</Button>
        </Card.Footer>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <p className="text-sm">A card with content only.</p>
        </Card.Content>
      </Card.Root>
    </main>
  );
}

API reference

Card.Root

The card surface. Stacks its parts with a gap. Renders <div>.

Card.Title

The card's title. A <div> by default; render it as a heading of the level the page needs. Renders <div>.

Card.Description

Supporting text under the title. Renders <div>.

Card.Content

The card's main content. Renders <div>.