Highlight Grid

Installation

pnpm dlx @glinui/cli@latest add highlight-grid

Prefer the package? npm install @glinui/ui @glinui/motion @glinui/tokens

Usage

Our own design (clean-room, no upstream code). One highlight panel glides between hairline cells instead of every cell animating on its own.

The panel is measured against the grid with physical offsets, so mirrored RTL layouts work. A ResizeObserver keeps it aligned when the grid reflows.

Entering the grid from outside places the panel on the entry cell with no fly-in from a corner.

<HighlightGrid variant="plain" cells={cells} />

<HighlightGrid variant="plain" cells={cells} />

<HighlightGrid columns={2} cells={cells.map((c) => ({ ...c, href: "#" + c.id }))} />

<HighlightGrid columns={2} cells={cells.map((c) => ({ ...c, href: "#" + c.id }))} />

<section aria-labelledby="why">
  <h3 id="why">Why teams switch</h3>
  <HighlightGrid columns={3} cells={cells} />

<section aria-labelledby="why">
  <h3 id="why">Why teams switch</h3>
  <HighlightGrid columns={3} cells={cells} />
</section>

Accessibility

• A list of cells with a roving tabindex. Arrow keys, Home and End move focus and the highlight follows.
• The panel is aria-hidden and pointer-events-none, so cells and links stay clickable.
• Touch: tapping a cell moves the highlight and it stays until you tap elsewhere.
• The highlight is never the only indicator, keyboard focus also shows a ring.

Reduced Motion

The glide, resize and fade only run at motion level full. Otherwise the highlight jumps to the new cell.

API Reference

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

import { HighlightGrid } from "@glinui/ui"