Component Style Guide

This page is a reference for every UI element available inside doc pages. Use it to copy patterns, check available variants, and ensure visual consistency across new content. All components follow the project color system and layer rules.

Every element here is copy-paste ready into any registry.tsx page body. Wrap interactive Shadcn components in a not-prose div and they will inherit the correct typography reset automatically.

Typography

Headings

Headings use the docs-body prose styles. h2 gets a top border when preceded by content. h3 is lighter and used for sub-sections.

Lists

Unordered list

• First item — plain text, disc bullet by default
• Bold label — followed by a description of what this item does
• Italic item — used for quotes, examples, or softer references
• Item with a code snippet inside the list entry

Ordered list

1. First step — describe what the user should do here
2. Second step — the next action in the sequence
3. Third step — outcome or confirmation
4. Fourth step — optional follow-up or next milestone

Alerts & Callouts

Four callout styles cover the full range of tones. Use sparingly — one callout per major concept. The yellow and blue variants use className overrides instead of a named variant.

Cards

Basic card

Two-column card grid

Icon feature cards

Colorful gradient cards

Ad concept card — inspiration gallery

Vertical video preview on the left + metadata on the right. Use for inspiration galleries, use-case libraries, and browseable ad concept lists.

Tables

Tables automatically inherit docs-body styles — full-width, alternating hover rows, sticky header border. Works without any extra markup.

Accordions & Collapsibles

Use type="single" collapsible for one-at-a-time expand, or type="multiple" to allow several panels open simultaneously. Both patterns use the native Shadcn Accordion component.

Single — one item open at a time

Multiple — all items independently expandable

Status Pills

All tags use the shared DocTag component. Pass a variant for the colour and an optional label to override the display text.

The label prop lets you combine concepts: <DocTag variant="fashion" label="UGC · Fashion" />

Video Player

Use DocVideoPlayer for any embeddable video in a doc page. It plays inline with muted loop and expands to a non-fullscreen modal on click. The aspectRatio prop accepts 16/9, 9/16, 4/3, or 1/1.

16:9 landscape

9:16 vertical (mobile / Reels)

Image Placeholders

While real screenshots are pending, use these placeholder blocks to reserve space. Replace with an <img> or <Image> when assets are available.

Step Sequences

Numbered step sequences for procedural guides. Two styles — compact inline and card-based expanded.

Compact steps

Card-based steps

Separators

The Separator component renders a horizontal rule. Useful for breaking long sections without a full heading.

Labeled divider

Feature Grid

Icon + label + description grid. Use for listing product capabilities or section overviews. Works in 2 or 3 columns.

Code Blocks

Inline code uses bg-secondary with a border radius. For multi-line blocks, use the following pattern — a pre-styled div inside not-prose.

Linen summer dress for women 25–35 who care about sustainability.
Relaxed, confident tone.
UGC style — show it being worn at a market and a casual dinner.
Hook: "I never thought I'd find a dress I could wear absolutely everywhere."

CTA Banners

Gradient banners for end-of-section prompts, upgrade nudges, or next-step guides. Use a solid coloured button for the primary action and a ghost/outline for secondary.

Media Rows

Compact list rows with a square video thumbnail. Use for tutorial indexes and resource lists where space is tight.