The columns of a grid as a list of lengths: the row shows the CSS it comes to, the editor holds one length per line with a picture of the shares above them. There is no reordering on purpose, because a track's place in the list is its place in the grid.
The import and the props worth knowing about, in one place.
import { InspectorTracks, tracksToCss } from "@/components/beste/component/inspector-tracks";
<InspectorTracks
label="Columns"
defaultValue={[
{ size: 1, unit: "fr" },
{ size: 2, unit: "fr" },
{ size: 240, unit: "px" },
]}
/>
<InspectorTracks
label="Rows"
value={rows}
onValueChange={setRows}
onOpenChange={(open) => console.log("editor open:", open)}
units={["fr", "px", "auto"]} // ["fr", "px", "%", "auto"] by default
minTracks={2}
maxTracks={6}
tone="outline" // "muted" (default) | "outline" | "ghost"
size="sm" // "sm" | "default" | "lg"
/>
// The value is only useful once it is a template, so the join ships with it
<div style={{ display: "grid", gridTemplateColumns: tracksToCss(columns) }}>{children}</div>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { InspectorTracks } from "@/components/beste/component/inspector-tracks";
<InspectorTracks
label="Columns"
className="w-72"
defaultValue={[{"size":1,"unit":"fr"},{"size":2,"unit":"fr"},{"size":240,"unit":"px"}]}
/>Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.
| Up / Down | Step the focused track size |
|---|---|
| Shift + Up / Down | Step it by ten |
| Enter | Accept what was typed |
| Escape | Throw away what was typed, or close the editor |
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
label* | string | — | Label rendered on the left, inside the row. |
icon | LucideIcon | — | Optional leading icon shown before the label. |
value | Track[] | — | Controlled value. Pair it with `onValueChange`. |
defaultValue | Track[] | — | Initial value in uncontrolled mode. |
onValueChange | (value: Track[]) => void | — | |
onOpenChange | (open: boolean) => void | — | Fires when the editor opens or closes. |
units | string[] | ["fr", "px", "%", "auto"] | The units a track may be measured in. `auto` is understood as "the contents decide", and its number field steps aside. |
minTracks | number | 1 to 12 | How many tracks there may be. |
maxTracks | number | — | |
disabled | boolean | — | Block interaction and dim the row. |
tone | "muted" | "outline" | "ghost" | "muted" | Surface treatment: filled (default), hairline outline, or bare until hover. |
size | "sm" | "default" | "lg" | "default" | Row height preset. |
className | string | — | |
aria-label | string | — | Accessible name. Falls back to `label`. |
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.
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.
The choice that has to be seen to be made: a template, a layout, a chart type. Each option is a picture, normally a rendered screenshot passed as a URL, or markup for the choices no photograph would show. The row is the trigger, the grid is width-matched to it, and the captions under the pictures can be dropped for a set whose pictures say everything.
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.
Settings row for a CSS filter stack, all ten functions of it: the row shows the whole stack applied to something, and opens an editor holding the nine numeric filters as rows of the family plus a drop shadow section, over a preview large enough to judge.
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.