Component Docs

Grid Lines

Animated dotted or dashed edges that bring editorial polish to cards, hero headers, and connected layouts. Use them to guide attention without heavy backgrounds.

Quick Start Patterns Custom Lines API

Why teams ship it

Drop-in framing, auto-reveal animation, and offsets make it easy to connect content without introducing custom SVGs or pseudo-elements.

Presets

7 ready

Animation

Scroll aware

Offsets

Per edge

Theme

Dark friendly

Quick Start

Ship a framed hero in seconds.

Wrap any block with `GridLines`, toggle the sides you need, and sprinkle optional animation via `global`. The component handles positioning and cleanup for you.

01Import the component from your shared UI folder.
02Compose the sides you need (`top`, `bottom`, `left`, `right`).
03Use `global` when several sides share styling or timing.
04Pass `autoReveal` (or `revealOnScroll`) so the lines animate once you're ready.

Tip: keep the content padding generous (24–40px) so the dash rhythm has room to breathe.

Example

import { GridLines } from "@/components/grid-lines";

export function HeroEyebrow() {
  return (
    <GridLines top bottom global={{ autoReveal: true, duration: "1.4s" }}>
      <div className="bg-card p-10 text-center">
        <p className="text-xs font-semibold uppercase tracking-[0.35em] text-emerald-500">
          Release Note
        </p>
        <h3 className="text-2xl font-semibold">Framed hero headline</h3>
        <p className="mt-2 text-sm text-muted-foreground">
          Lines animate once to hint at interactivity.
        </p>
      </div>
    </GridLines>
  );
}

Layout Patterns

Compositions that feel deliberate.

Grid lines shine when they direct attention. Borrow these starting points for common editorial moments.

Hero Frame

Pairs top and bottom lines with a gentle reveal for hero copy.

Drop inside hero sections to hint at scrollable content while keeping the layout airy.

Context Card

Wrap supporting content when you need a boxed treatment.

Use the box preset with slightly thicker dashes for callouts, release notes, or sidebars.

Bridged Stack

Extend lines into the gutter to connect cards in a row.

Offsets keep the eye flowing across multiple tiles without adding background fills.

Presets

Pick a preset, dial in the details.

Presets keep your start time low while still letting you tune dash patterns, offsets, and animation.

Staggered Reveal

Sequential delays on every edge for cinematic hero entrances.

Scroll Reveal

Lazily animates once the element enters the viewport—ideal for long docs.

Subtle

Featherweight lines balanced for light backgrounds and quiet UI moments.

Bold

Thicker dashes and louder opacity for hero cards and dashboards.

Custom Lines

Connect cards, color edges, choreograph timing.

Use offsets for multi-card layouts, or override each side with its own palette and cadence.

Connected cards

Extend top and bottom lines into the gutter to visually connect tiles without merging backgrounds.

📊

Analytics

Live dashboards with story-driven panels.

🎯

Goals

Line up OKRs and key initiatives.

🚀

Launch Plan

Sequence milestones with built-in rhythm.

Choose lineStyle="horizontal" on ConnectedCards if you only want top/bottom edges to bridge gaps.

<GridLines
  top={{ rightOffset: "28px" }}
  bottom={{ rightOffset: "28px" }}
  global={{ dashWidth: "12px", thickness: "2px" }}
>
  <div className="bg-card p-6">
    Lines extend into the gutter to connect adjacent cards.
  </div>
</GridLines>;

Individual control

Every edge accepts the full `GridLineProps` set, so you can stagger timing or lean into bold palettes.

Tip: pair per-edge colors with theme tokens so the frame adapts to dark mode.

<GridLines
  top={{ color: "rgba(59, 130, 246, 0.45)" }}
  right={{ delay: "0.2s", color: "rgba(34, 197, 94, 0.45)" }}
  bottom={{ delay: "0.4s", color: "rgba(244, 63, 94, 0.45)" }}
  left={{ delay: "0.6s", color: "rgba(168, 85, 247, 0.5)" }}
  global={{ duration: "1.6s", autoReveal: true }}
>
  <div className="bg-background p-8 text-sm text-muted-foreground">
    Rainbow edges with individually timed lines.
  </div>
</GridLines>;

API Reference

Props you'll reach for most.

Every prop maps directly to the underlying `GridLine` component, so you can progressively enhance as layouts get richer.

Prop	Type	Default	Description
top / right / bottom / left	boolean \| Partial<GridLineProps>	false	Toggle an edge or pass a config object with advanced line props.
global	Partial<GridLineProps>	{}	Shared configuration merged into every active line (dash width, color, timing, etc.).
wrapChildren	boolean	true	If false, renders the lines as siblings — handy when you manage layout yourself.
className	string	undefined	Tailwind/utility classes for the wrapper that receives the lines.
as	ElementType	"div"	Swap the wrapper element without losing position logic.
GridLinesPresets	Record<string, GridLinesConfig>	-	Curated configurations for box, staggered, subtle, bold, scrollReveal, and more.

offset / leftOffset / rightOffset / topOffset / bottomOffset

Extend a line beyond its container to bridge gaps between columns or bleed into margins.

delay & duration

Chain reveals or hold edges longer to create pacing that matches your narrative.

autoReveal & revealOnScroll

Let lines animate once on mount or when they become visible in the viewport.

dashWidth & dashSize

Tune dash density and spacing so lines feel intentional against your background.