Skip to main content

​
Overview

The Card component provides a structured way to display content in a self-contained container. It’s built with composition in mind, allowing you to combine different parts like headers, titles, descriptions, content areas, and footers to create rich card layouts.

​
Use Cases

  • Product listings and feature cards
  • User profile cards and dashboard widgets
  • Article previews and blog post summaries
  • Settings panels and configuration sections
  • Call-to-action containers

​
Installation

The Card component is included with the UI package. Make sure you have @zayne-labs/ui-react installed: 
pnpm add @zayne-labs/ui-react

​
Basic Usage

import { Card } from "@zayne-labs/ui-react/ui/card";

<Card.Root>
  <Card.Header>
    <Card.Title>Card Title</Card.Title>
    <Card.Description>Card description goes here</Card.Description>
  </Card.Header>
  <Card.Content>
    Your main content goes here.
  </Card.Content>
  <Card.Footer>
    Footer content or actions
  </Card.Footer>
</Card.Root>

​
Component Parts

The Card component is composed of several parts that can be used together:

​
Card.Root

The root container for the card. Renders as an article element by default. 
<Card.Root className="custom-card">
  {/* Card content */}
</Card.Root>
Props:
  • as - Change the rendered element (default: "article")
  • asChild - Merge props with child element using Slot pattern
  • className - Custom CSS classes
  • All standard HTML attributes for the element type

​
Card.Header

Container for the card’s header section. Renders as a header element by default. 
<Card.Header className="custom-header">
  <Card.Title>Title</Card.Title>
  <Card.Description>Description</Card.Description>
</Card.Header>

​
Card.Title

The main heading for the card. Renders as an h3 element by default with semibold styling. 
<Card.Title as="h2" className="custom-title">
  Card Title
</Card.Title>

​
Card.Description

A muted text description. Renders as a p element with muted foreground color. 
<Card.Description>
  This is a description of the card content.
</Card.Description>

​
Card.Content

The main content area of the card. Renders as a div by default. 
<Card.Content>
  <p>Main content goes here.</p>
</Card.Content>

​
Card.Action

A button element for card actions. Renders as a button by default. 
<Card.Action onClick={() => console.log('clicked')}>
  Click me
</Card.Action>
Container for the card’s footer section. Renders as a footer element by default. 
<Card.Footer>
  <button>Action</button>
</Card.Footer>

​
Examples

​
Product Card

import { Card } from "@zayne-labs/ui-react/ui/card";

<Card.Root className="max-w-sm rounded-lg border p-6">
  <Card.Header>
    <Card.Title>Premium Plan</Card.Title>
    <Card.Description>Perfect for growing teams</Card.Description>
  </Card.Header>
  <Card.Content className="py-4">
    <div className="text-3xl font-bold">$29<span className="text-sm">/month</span></div>
    <ul className="mt-4 space-y-2">
      <li>✓ Unlimited projects</li>
      <li>✓ Priority support</li>
      <li>✓ Advanced analytics</li>
    </ul>
  </Card.Content>
  <Card.Footer>
    <Card.Action className="w-full rounded bg-primary px-4 py-2 text-white">
      Get Started
    </Card.Action>
  </Card.Footer>
</Card.Root>

​
User Profile Card

import { Card } from "@zayne-labs/ui-react/ui/card";

<Card.Root className="w-80 rounded-xl border shadow-sm">
  <Card.Content className="p-6">
    <div className="flex items-center gap-4">
      <img 
        src="/avatar.jpg" 
        alt="User" 
        className="h-16 w-16 rounded-full" 
      />
      <div>
        <Card.Title className="text-lg">Jane Doe</Card.Title>
        <Card.Description>Software Engineer</Card.Description>
      </div>
    </div>
  </Card.Content>
  <Card.Footer className="border-t p-4">
    <div className="flex gap-2">
      <Card.Action className="flex-1 rounded border px-3 py-2">
        Message
      </Card.Action>
      <Card.Action className="flex-1 rounded bg-primary px-3 py-2 text-white">
        Follow
      </Card.Action>
    </div>
  </Card.Footer>
</Card.Root>

​
Minimal Card

import { Card } from "@zayne-labs/ui-react/ui/card";

<Card.Root className="rounded-lg border p-4">
  <Card.Content>
    <p className="text-sm">Simple card content without header or footer.</p>
  </Card.Content>
</Card.Root>

​
Using asChild with Custom Elements

import { Card } from "@zayne-labs/ui-react/ui/card";
import Link from "next/link";

<Card.Root asChild>
  <Link href="/products/1" className="block rounded-lg border p-6 hover:shadow-lg">
    <Card.Header>
      <Card.Title>Clickable Card</Card.Title>
      <Card.Description>This entire card is a link</Card.Description>
    </Card.Header>
    <Card.Content>
      Click anywhere on this card to navigate.
    </Card.Content>
  </Link>
</Card.Root>

​
Styling

All Card parts accept className props and include data attributes for styling: 
<Card.Root 
  className="custom-card"
  // data-scope="card"
  // data-part="root"
  // data-slot="card-root"
>
  {/* ... */}
</Card.Root>

​
Data Attributes

Each part includes these data attributes:
  • data-scope="card" - Identifies the component scope
  • data-part - Identifies the specific part (root, header, title, etc.)
  • data-slot - Identifies the slot name (card-root, card-header, etc.)

​
CSS Example

/* Target all card components */
[data-scope="card"] {
  /* styles */
}

/* Target specific parts */
[data-part="title"] {
  /* title styles */
}

/* Target by slot */
[data-slot="card-header"] {
  /* header styles */
}

​
Polymorphic Components

Most Card parts support the as prop to change the rendered element: 
<Card.Root as="section">
  <Card.Header as="div">
    <Card.Title as="h2">Title</Card.Title>
    <Card.Description as="span">Description</Card.Description>
  </Card.Header>
</Card.Root>

​
Accessibility

  • The Card.Root renders as a semantic article element by default
  • Card.Header and Card.Footer use semantic header and footer elements
  • Card.Title uses heading elements (h3 by default) for proper document outline
  • Card.Action includes type="button" by default

​
API Reference

For detailed prop types and advanced usage, see the Card API Reference.

Build docs developers (and LLMs) love

Get started for freeTalk to us