Data display

Card

A container for one item: a project, a post, a product. Use it in two ways:

Shortcut props: media, eyebrow, title, description, footer; any children go between the description and the footer.
Composition: leave the props out and build the card from its parts (CardMedia, CardHeader, CardEyebrow, CardTitle, CardDescription, CardContent, CardFooter) in any order.

Case study

Atelier Noir

A fashion house site built on the kit.

Component

Pixel button

The signature hover dissolve.

2 kB brotli
Keyboard focus runs the effect too

Stable

demos/card.tsx

import { Badge } from "pixelbits/badge";
import { Button } from "pixelbits/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardEyebrow,
  CardFooter,
  CardHeader,
  CardMedia,
  CardTitle,
} from "pixelbits/card";

export default function Demo() {
  return (
    <div className="grid w-full max-w-3xl gap-4 sm:grid-cols-2">
      {/* Shortcut props */}
      <Card
        interactive
        media={
          <div className="h-32 bg-[linear-gradient(180deg,#1d1a2b,#7a4a3a_60%,#e2a36a)]" />
        }
        eyebrow="Case study"
        title="Atelier Noir"
        description="A fashion house site built on the kit."
      />
      {/* Composition: the same parts, in any order */}
      <Card interactive>
        <CardMedia>
          <div className="h-32 bg-[linear-gradient(180deg,#10201b,#2f5d4c_60%,#9fd3b7)]" />
        </CardMedia>
        <CardHeader>
          <CardEyebrow>Component</CardEyebrow>
          <CardTitle>Pixel button</CardTitle>
          <CardDescription>The signature hover dissolve.</CardDescription>
        </CardHeader>
        <CardContent>
          <ul className="grid gap-1 text-[0.8125rem] text-pb-muted">
            <li>2 kB brotli</li>
            <li>Keyboard focus runs the effect too</li>
          </ul>
        </CardContent>
        <CardFooter>
          <Badge variant="success" dot>
            Stable
          </Badge>
          <Button size="sm" variant="ghost" className="ms-auto">
            Details
          </Button>
        </CardFooter>
      </Card>
    </div>
  );
}

Installation

npm: import

import { Card, CardMedia, CardHeader, CardEyebrow, CardTitle, CardDescription, CardContent, CardFooter } from "pixelbits/card";

shadcn: copy the source

npx shadcn add https://pixelbits.ali-moradi-develop.com/r/card.json

API

<Card>

A container for one item: a project, a post, a product. Use it in two ways:

Shortcut props: media, eyebrow, title, description, footer; any children go between the description and the footer.
Composition: leave the props out and build the card from its parts (CardMedia, CardHeader, CardEyebrow, CardTitle, CardDescription, CardContent, CardFooter) in any order.

Example

<Card media={<img src="/noir.jpg" alt="" />} eyebrow="Case study" title="Atelier Noir"
  description="A fashion house site built on the kit." interactive />

<Card interactive>
  <CardMedia><img src="/noir.jpg" alt="" /></CardMedia>
  <CardHeader>
    <CardEyebrow>Case study</CardEyebrow>
    <CardTitle>Atelier Noir</CardTitle>
    <CardDescription>A fashion house site built on the kit.</CardDescription>
  </CardHeader>
  <CardFooter><Badge>2026</Badge></CardFooter>
</Card>

Prop	Type	Default	Description
media	ReactNode	—	Media on top (an image or an illustration), shown edge to edge.
eyebrow	ReactNode	—	Small mono overline above the title, e.g. `"Case study"`.
title	ReactNode	—	The title.
description	ReactNode	—	Supporting text under the title.
footer	ReactNode	—	Actions or meta at the bottom (buttons, badges, a link).
interactive	boolean	false	Make the whole card a hover target: the border warms to the accent and the media zooms in pixel steps. Put a link inside (e.g. in the title); the card does not become a link itself.

Also accepts every prop of Omit<HTMLAttributes<HTMLDivElement>, "title">.

<CardMedia>

Media at the top of a Card, edge to edge; zooms on interactive cards.

<CardHeader>

The padded block that holds the eyebrow, title and description of a Card.

<CardEyebrow>

Small mono overline above a card title, e.g. "Case study".

<CardTitle>

The title of a Card, an <h3>.

<CardDescription>

Supporting text under a card title.

<CardContent>

Free content of a Card with the card's padding (lists, stats, forms).

<CardFooter>

Actions or meta at the bottom of a Card, above a hairline.