Components(157)

Design system primitives: buttons, badges and other building blocks our sections are composed from. Install one and reuse it across your whole project.

Borders

Inspector Toggles

Settings row holding a set of pills that are each on or off, so any number of them can be on at once: what inspector-segmented is for one choice out of several, this is for several choices at once, and what inspector-switch is for a single flag, this is for a handful that belong together.

Inspector Textarea

The family's block row: the same surface and tones, but the label sits above a multi-line field whose height comes from the text, with a character count whenever there is a limit to see. Collapsible, so a paragraph written once can be folded down to the height of a row without leaving the form.

landing pagesaaspricing

Inspector Tags

Settings block for a list of short strings: tags are typed one after another and wrap under the label, a comma or a paste splits several at once, and Backspace on an empty field reaches back into the list. Collapsible, so a long list folds down to the height of a row with the count still on it.

Inspector Tabs

The strip that splits a settings panel into two or three questions instead of one long scroll. It is the strip and nothing else: what the tabs switch between stays in the panel's own markup, beside the state that decides it. The pill slides between equal columns, arrow keys both move and select, and a tab can carry a count of what has changed under it.

Inspector Switch

Settings row with a label on the left and a switch on the right, sharing the family's pill: the label takes the row's spare width, so a press almost anywhere toggles it.

Inspector Stepper

Settings row for a bounded number: minus and plus either side of a typeable value, with hold-to-repeat, Shift for coarse steps and full keyboard stepping.

Inspector Spacing

Settings row for the four edges of a box: the row carries a CSS-shorthand summary, and opens a cross where each field sits on the edge it sets, tied together or not.

Inspector Slider

Compact settings row where the label and the live value sit inside the track: magnetic tick snapping, a rubber band when you overdrag, Shift for precision, Alt-click to reset, wheel and typed input, an option to keep the handle on show while idle, on a native range input for full accessibility.

Command Palette

Inspector Shortcut

Settings row that records a key combination: press it, press the keys, and the row keeps them as kbd chips printed in the platform's own glyphs. Mod stands for Cmd on a Mac and Ctrl everywhere else, so one stored value is right on both.

Inspector Shadow

Settings row for a box shadow: the row shows the shadow itself, and opens an editor holding a larger preview with offset, blur, spread and colour under it, each one a row of the family.

Inspector Select

Settings row that pairs a label with its current choice inside one pill, opening a width-matched dropdown below: option icons, colour swatches, descriptions and grouped sections, on top of the accessible shadcn select.

Dark Mode

Inspector Segmented

Settings row whose choices sit side by side on the right, with a marker that slides between them: the readable alternative to a switch when the two states deserve names, and the compact one to a select at three or four options.

API key••••••••_KEY

Inspector Secret

A value shown without being readable over a shoulder: an API key, a token, a signing secret. Hidden, it keeps its last few characters legible, since that tail is how one key is told from another; copy works whether or not it is revealed, and revealing fires a callback for panels that keep a log of it.

em

Inspector Scrub

A number with no ends, dragged from the row itself: for the values that have no maximum worth naming, like a z-index, an X offset or a letter-spacing. The drag is relative rather than positional, so pressing anywhere is safe, and a soft range gives the bar something to draw against that the value is free to leave. Only the reported number is quantized, so the pointer never fights the grid.

CustomWhatever you put here

Inspector Row

The family's escape hatch: label on the left, whatever you hand it on the right, and the same surface, metrics and focus ring as every other row, so a control the family does not have yet still looks like it belongs.

Inspector Range

Settings row for a span rather than a value: two thumbs on the row itself, the band between them filling it, and both ends of the pair read out on the right. Ticks, tones and thumb states follow inspector-slider exactly, appearing on hover.

Inspector Position

Settings row for a point on a surface: the row names the nine spots CSS names and shows the rest as two percentages, and opens a square pad the point is dragged around, with the thirds drawn on it and a pull towards them.

Applies to every breakpoint.

Inspector Note

The line of prose that belongs between rows: what a setting is for, why one is switched off, what a value will cost. Four tones, each with its own mark, and the same text size as the rows around it.

Color stops

Inspector Multicolor

Settings row for a list of colours: a swatch per stop, each opening the OKLCH picker, and a remove and add pair at the far right bounded by min and max.

Contrast5.30:1

Inspector Meter

The row that reports rather than asks: a measurement the work produced, shown in the family's surface so it can sit among the settings that caused it. Threshold bands colour the bar and the number without the caller recomputing them, and it is a meter rather than a progress bar, which is how it is announced.

Inspector Media

Settings row for an image or a video: the asset itself as a thumbnail on the right, and pressing the row opens a width-matched editor with the URL, a preview and a remove. Given a picker of your own, it hands the choosing to your media library instead.

Inspector Link

Settings row for a destination: the row reads the URL with its scheme stripped and marks whether it leaves the tab, and opens an editor holding an optional page menu, the URL field and the target and nofollow switches.

Inspector Input

Settings row with a label on the left and a plain text field on the right, sharing the family's pill: the whole row is the label, so pressing anywhere puts the caret in the field.

Inspector Icon

Settings row that names the chosen icon and shows it on the right; pressing the row opens a searchable palette below it, width-matched to the row, with clearing offered at the foot of it. The icon set is passed in, so the row never bundles an icon library of its own.

Markdown version