Componentdata0.53 KB gzipZero dependencies

DescriptionList

Term/description pairs with mono uppercase terms, muted descriptions and staggered row entrances.

Preview

Live Preview

Term 1

Description for term one.

Term 2

Description for term two.

Term 3

Description for term three.

Installation

Tokens guide →

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

npx bigbullui add description-list

Or install the full npm package:

npm install bigbullui

Usage

Open in StackBlitz

import { DescriptionList } from "@/components/ui/description-list";

<DescriptionList items={[{ term: "Venue", description: "Stub Hall" }]} />

Usage guidance

Use DescriptionList when a ticket stub surface needs Term/description pairs with mono uppercase terms, muted descriptions and staggered row entrances. Keep props minimal and prefer composition with sibling stubs.

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

Source code

description-list.tsx

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

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

export interface DescriptionListItem {
  term: string;
  description: React.ReactNode;
}

export interface DescriptionListProps {
  items?: DescriptionListItem[];
  className?: string;
}

export function DescriptionList({
  items,
  className,
}: DescriptionListProps) {
  if (!items) {
    return <div className={cn("grid grid-cols-2 gap-4", className)} />;
  }

  const rowClasses = "border-b border-dashed border-border/20";

  return (
    <div
      className={cn(
        "grid grid-cols-2 gap-4 md:grid-cols-3 motion-reduce:transition-none",
        className
      )}
    >
      {items.map((item, index) => (
        <div
          key={item.term}
          className={cn(
            "row-span-2",
            `animate-[fade-in-up_0.3s_ease-out_both]`,
            `animation-delay: ${index * 40}ms`,
            className
          )}
        >
          <dt className="font-mono text-[9px] text-muted-foreground uppercase tracking-[0.1em]">
            {item.term}
          </dt>
          <dd className="mt-1 text-sm text-muted-foreground line-clamp-2">
            {item.description}
          </dd>
        </div>
      ))}
    </div>
  );
}

Props

Prop	Type	Description
items?	DescriptionListItem[]
className?	string