Componentdata0.6 KB gzipZero dependencies

Card

Double-frame surface container with header, content, and footer.

Preview

Live Preview

Front Row

Row C · Seat 12 · No refunds

Keep this stub until the end of the show.

Installation

Tokens guide →

Add to your project via CLI (zero dependencies, code you own):

npx bigbullui add card

Or install the full npm package:

npm install bigbullui

Usage

Open in StackBlitz

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";

<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
    <CardDescription>Description</CardDescription>
  </CardHeader>
  <CardContent>Content</CardContent>
</Card>

Usage guidance

Use Card when a ticket stub surface needs Double-frame surface container with header, content, and footer. Keep props minimal and prefer composition with sibling stubs.

Avoid Card for long form flows or dense data grids where a dedicated layout block fits better.

Source code

card.tsx

Zero dependencies (only React + utils). Copy and paste directly into your project:

import * as React from "react";
import { cn } from "./lib/utils";

export type CardProps = React.ComponentProps<"div"> & {
  /** Dual-mode: false renders instantly with no motion. Default true. */
  animated?: boolean;
};

function Card({ className, animated = true, ...props }: CardProps) {
  return (
    <div
      className={cn(
        "rounded-lg border-[1.5px] border-foreground bg-card text-card-foreground outline-1 outline-dashed outline-offset-[-7px] min-w-0",
        animated
          ? "transition-shadow duration-200 hover:shadow-[5px_5px_0_0_var(--color-border)] motion-reduce:transition-none"
          : "transition-none",
        className
      )}
      {...props}
    />
  );
}

function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
  return <div className={cn("flex flex-col gap-1.5 p-6", className)} {...props} />;
}

function CardTitle({ className, ...props }: React.ComponentProps<"h3">) {
  return <h3 className={cn("font-mono text-[15px] font-bold uppercase leading-none tracking-[0.12em]", className)} {...props} />;
}

function CardDescription({ className, ...props }: React.ComponentProps<"p">) {
  return <p className={cn("text-sm text-muted-foreground", className)} {...props} />;
}

function CardContent({ className, ...props }: React.ComponentProps<"div">) {
  return <div className={cn("p-6 pt-0", className)} {...props} />;
}

function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
  return <div className={cn("flex items-center p-6 pt-0", className)} {...props} />;
}

export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter };

Metric CardDashboard KPI card with value, trend delta and period label.Stat TileKPI metric box with big tabular numbers, delta change and sparkline bars.ItemGeneric row surface with leading media, title, description, and trailing actions; hover lift with accent bar slide-in.LinkCardWhole-card link with sliding arrow, darkening border on hover and fade-up entrance.