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.
Adds the component and everything it depends on to your project.
npx shadcn add https://ui.beste.co/component/r-base/inspector-noteNew here? Read the installation guide.
The import and the props worth knowing about, in one place.
import { InspectorNote } from "@/components/beste/component/inspector-note";
// Quiet by default
<InspectorNote>Applies to every page in this project.</InspectorNote>
// Louder, when the reader is about to be surprised
<InspectorNote tone="warning">This overrides the theme value.</InspectorNote>
<InspectorNote tone="info">Only used when the section has no background of its own.</InspectorNote>
<InspectorNote tone="danger">Removing this cannot be undone.</InspectorNote>
<InspectorNote
tone="info"
size="sm" // "sm" | "default" | "lg"
icon={SparklesIcon} // replaces the mark the tone brings
>
Generated once and then cached.
</InspectorNote>
// Or with no mark at all
<InspectorNote hideIcon>Values are in pixels.</InspectorNote>
// The warning and danger tones are announced when they appear, since a warning that
// turns up beside a control the reader is already using has to reach them.Turn the props on the right; the snippet under them is what you would write to get what you see.
import { InspectorNote } from "@/components/beste/component/inspector-note";
<InspectorNote
children="Applies to every breakpoint."
tone="warning"
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | The note. One or two sentences: anything longer belongs in the docs. |
tone | "muted" | "info" | "warning" | "danger" | "muted" | What kind of note this is, which is also how it looks. |
size | "sm" | "default" | "lg" | "default" | Padding preset. |
icon | LucideIcon | — | Icon shown before the text. Each tone but `muted` brings its own, so this is for replacing one, or for giving `muted` a mark of its own. |
hideIcon | boolean | — | Drop the icon the tone brought with it. |
className | string | — |
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.
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.
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.
A number and the unit that gives it meaning, in one row: px, rem, a percentage, or a keyword like auto that is the whole value on its own. Each unit may bring its own range, so a percentage stops at 100 while pixels do not.