361491

Controls that fit together.

KP-07

North paddock

AutumnWinter
Rainfall412MM8%up 8% on the season before
Held on the keyline64%
x
Dams full3 of 4
01/04Panel · Segmented · Stat

Keyline UI

React components for dense, work-heavy interfaces. Toolbars, tables and menus share one frame, its seams and its cells, and keep working when the space runs out. You install their source with the shadcn CLI.

Sheet 1 of 73 · Built on Base UI

  1. 1Frame. The cut. One 3px edge around the region, like a printer’s keyline: it holds every part in register.
  2. 2Seam. The fold. One 1px line where two parts meet, drawn by only one of them.
  3. 3Cell. The keypoint. State lives in a cell; when the width runs out, a toolbar’s filter flows into More and stays checked.
!Get started
  1. 1npx shadcn@latest registry add @keyline-ui=https://keyline-ui.dev/r/{name}.json
  2. 2npx shadcn@latest add @keyline-ui/<name>