Skip to content
All primitives

A primitive is one control you drop into a form or a toolbar — a segmented control, an input with an addon, a tag field.

Pickers & Media

6 of the 54 primitives in the catalog. Every one is a single file of plain markup and Tailwind classes — paste it and it works.

Open the full page for this primitive

Gradient Picker

Draggable stops with pointer capture, an angle, and the CSS it produces shown and copyable — with the stop list kept sorted, because an unsorted linear-gradient is not an error, it just renders wrong.

Pickers & Media238 lines1 dep
Open the full page for this primitive

Image Picker

A drop zone that counts drag events instead of flickering on every child boundary, validates on drop where the accept attribute does nothing, and revokes its object URLs.

Pickers & Media184 lines1 dep
Open the full page for this primitive

Credit Card Input

Brand detection, per-brand digit grouping and CVC length, a Luhn check that catches a transposed digit before the network declines it, and the autocomplete tokens that make a card actually autofill.

Pickers & Media279 linesNo deps
Open the full page for this primitive

QR Code

A real, scannable symbol with no dependency — Reed-Solomon over GF(256), block interleaving and all eight masks scored by the standard penalty rules. Byte mode, level M, up to 213 bytes.

Pickers & Media538 linesNo deps