# Redline: Details

> A studio's "we sweat the details" section around a product card. Left alone, it tours the card's padding, the gap between the title and the price, the button's 44px height and the space around the photo. Point at anything to take over, click to pin, and hold Alt to measure between two parts. With `spec`, text shows its font.

A shadcn/ui block from the [@keyframeui](https://keyframeui.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/keyframeui/redline-demo).

- Page, with a live preview: https://shadcn.exchange/r/keyframeui/redline-demo
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/keyframeui/redline-demo-light-9b49329224728338.png
- Registry item: https://keyframeui.com/r/redline-demo.json
- Categories: inspector, hover, design
- Listed: 2026-10-14, source last changed 2026-10-15

## Install

```bash
npx shadcn@latest add https://keyframeui.com/r/redline-demo.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `https://keyframeui.com/r/redline.json`

## Notes from the registry

Live preview, examples and props: https://keyframeui.com/components/redline#redline-demo

## Files

### `registry/demos/redline-demo.tsx`

```tsx
import { Redline } from "@/components/ui/redline";

const photo =
  "https://images.unsplash.com/photo-1507473885765-e6ed057f782c?auto=format&fit=crop&w=480&h=360&q=80";

export function RedlineDemo() {
  return (
    <section className="w-full max-w-4xl text-zinc-900 dark:text-zinc-50">
      <div className="grid gap-x-10 gap-y-3 sm:grid-cols-2 sm:items-end">
        <div>
          <p className="font-mono text-xs tracking-widest text-zinc-500 uppercase">Craft</p>
          <h3 className="mt-2 text-3xl font-semibold tracking-tight text-balance">
            We sweat the details you&apos;ll never notice
          </h3>
        </div>
        <p className="text-sm/6 text-pretty text-zinc-600 dark:text-zinc-400">
          Every space on this card was decided, not defaulted. Point at anything to see its
          numbers, click to pin it, then hold <span className="font-medium">⌥</span> and point at
          another to measure between them.
        </p>
      </div>

      <Redline
        tour={["card", "details", "button", "photo"]}
        spec
        className="mt-8 flex justify-center rounded-2xl border border-zinc-200 bg-zinc-50 bg-[radial-gradient(circle,rgb(0_0_0/0.07)_1px,transparent_1px)] bg-size-[16px_16px] px-6 py-14 dark:border-zinc-800 dark:bg-zinc-900/60 dark:bg-[radial-gradient(circle,rgb(255_255_255/0.06)_1px,transparent_1px)]"
      >
        <article
          data-redline="card"
          className="flex w-64 flex-col gap-4 rounded-2xl bg-white p-3 shadow-[0_1px_2px_rgb(0_0_0/0.05),0_12px_32px_-16px_rgb(0_0_0/0.25)] ring-1 ring-zinc-950/5 dark:bg-zinc-950 dark:ring-white/10"
        >
          {/* eslint-disable-next-line @next/next/no-img-element -- a remote photo in an installable demo */}
          <img
            data-redline="photo"
            src={photo}
            alt="A gray floor lamp against a white wall"
            draggable={false}
            className="aspect-4/3 w-full rounded-lg bg-zinc-100 object-cover dark:bg-zinc-900"
          />
          <div data-redline="details" className="flex flex-col gap-1">
            <h4 data-redline="title" className="text-base/6 font-medium tracking-tight">
              Kessel Floor Lamp
            </h4>
            <p data-redline="price" className="text-sm/5 text-zinc-500 tabular-nums dark:text-zinc-400">
              $240
            </p>
          </div>
          <button
            data-redline="button"
            type="button"
            className="h-11 rounded-lg bg-zinc-900 px-4 text-sm font-medium text-white dark:bg-zinc-50 dark:text-zinc-900"
          >
            Add to cart
          </button>
        </article>
      </Redline>
    </section>
  );
}
```