Guides for React

Thin lines in the border color outline a box, a column or a grid cell. They can run past the corners, bleed to the page's edges, fade in from nothing, add an inner pair of lines with a hatched or dotted gutter, and carry a plus, a dot or a square where they cross.

Use Guides to give a page structure without cards: one column that runs through every section of the page, and inside each section its own pattern of bands, cells or frames. It is decoration only. In React it is plain markup that works the same with Base UI, hidden from assistive technology, and it never takes a click.

Installation

Anatomy

Usage

import { Guides } from "@/components/ui/guides";

<div className="relative p-8">
  <Guides extend="md" marks="corners" />
  <h3>Ship the first version</h3>
</div>

Guides fills the nearest positioned ancestor, so give the box it outlines relative. Put it first inside the box: content after it that has a position and a background paints over its lines.

Stacking sections

A page is a stack of sections, so the lines come in two layers.

• The spine is the same in every section. Each section uses one page column and draws only its top rule:

  <section className="relative overflow-x-clip px-4 sm:px-6">
    <div className="relative mx-auto w-full max-w-6xl py-16 md:py-24">
      <Guides bleed marks="top" rules="top" />
      {/* the section's own pattern */}
    </div>
  </section>

  The side lines of every section sit at the same place, so they join into one pair from the top of the page to the bottom. Each boundary is drawn once, by the section below it.

• The interior is different in every section: bands that cut through inner lines, hatched gutters, cells, a framed figure. That keeps a page of sections from looking like one section repeated.

Keep extend and fade off the spine, since they would cross into the neighbouring sections. A hero that opens the page may fade its spine in from the top.

Demos

Spine

Two stacked sections share one column. Their side lines join into one pair, and each draws only the rule above it with a mark on each crossing, so the boundary between them is a single line.

Bands

inner="dashed" adds a second pair of lines inside the sides, inset="lg" from them. Each list is a band with relative and its own background, so it covers the inner lines as it crosses them and its borders run from side to side. Use this for FAQs, changelogs and long lists.

Gutter

gutter="hatch" fills the band between the sides and the inner lines with diagonal hatching; gutter="dots" fills it with a dot grid. Here it frames a call to action.

Cells

Each cell draws its own lines 1rem past its corners and a mark on its top-start corner. With a gap between the cells, the overshooting lines meet and the grid reads as one drawing. Use this for features, stats or testimonials instead of separate cards.

Mark shapes

markShape draws a plus, a dot or a small square on each crossing. The square is filled with the background, so it sits on the lines rather than under them.

Framed figure

A dashed frame with square marks holds an illustration, inside a solid frame whose lines run past its corners.

RTL

dir is rtl on the box. The lines, the inner lines and the marks are placed with logical sides, so marks="start" moves to the top-right corner and every mark stays centred on its crossing.

FAQ

API Reference