Source-owned React primitives

Caliper UI. Engineered for precision.

Typed React components on native browser APIs and Tailwind CSS. No runtime package beyond React.

pnpm add caliper-ui

Component previewInteractive

Choose a variant

H 32pxR 4pxFOCUS 1px4 VARIANTS

Selected: solid

Implementation

Review the implementation before you copy it.

The preview uses React, native browser APIs, Tailwind CSS, and one local helper.

The primitives import React and a local class helper. Dialog behavior uses the browser’s native dialog element.

Keys supported by the command menu and dialog.

Open command menu⌘K

Move selection↑↓

Run selected actionEnter

CloseEsc

Three background colors used by this preview.

Canvas
#09090b

Surface
#121215

Raised
#18181b

Inventory

Each row is a primitive on this page. Source files are listed for inspection.

Implemented UI primitives and their source files.
Component	Behavior	Source file
Button	4 variants · 3 sizes	button.tsx
Input	Native props · invalid state	input.tsx
Dialog	Native <dialog> · controlled or uncontrolled	dialog.tsx
Command Palette	Search · arrows · Enter · ⌘/Ctrl K	command-palette.tsx
Table	Semantic parts · horizontal overflow	table.tsx
Kbd	Keyboard key labels	kbd.tsx
Field	Visible label · hint · error	field.tsx
Gauge	Native <meter> · numeric readout	gauge.tsx
Slider	Native range input	slider.tsx
Select	Native <select>	select.tsx
Disclosure	Native <details>	disclosure.tsx