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.
Adds the component and everything it depends on to your project.
npx shadcn add https://ui.beste.co/component/r-base/inspector-tabsNew here? Read the installation guide.
The import and the props worth knowing about, in one place.
import { InspectorTabs } from "@/components/beste/component/inspector-tabs";
// The panel owns its body, so the strip only has to say which one is showing
const [tab, setTab] = React.useState("design");
<InspectorTabs
value={tab}
onValueChange={setTab}
aria-label="Section settings"
tabs={[
{ value: "design", label: "Design" },
{ value: "content", label: "Content", badge: 2 }, // a count of what has changed
{ value: "seo", label: "SEO", disabled: !hasSeo },
]}
/>
{tab === "design" ? <DesignRows /> : null}
{tab === "content" ? <ContentRows /> : null}
// With a body of your own, point each tab at it so the two are tied together for
// anyone not looking at the screen
<InspectorTabs
value={tab}
onValueChange={setTab}
tabs={[
{ value: "design", label: "Design", controls: "design-rows" },
{ value: "content", label: "Content", controls: "content-rows" },
]}
/>
<div id="design-rows" role="tabpanel" hidden={tab !== "design"}>
<DesignRows />
</div>
// A switcher and nothing else, which panels want just as often. Give it an
// aria-label, since there is no visible text naming the set.
<InspectorTabs
aria-label="Direction"
size="sm" // "sm" | "default" | "lg"
tone="outline" // "muted" (default) | "outline" | "ghost"
value={direction}
onValueChange={setDirection}
tabs={[
{ value: "row", label: "Row", icon: MoveHorizontalIcon },
{ value: "column", label: "Column", icon: MoveVerticalIcon },
]}
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { InspectorTabs } from "@/components/beste/component/inspector-tabs";
<InspectorTabs
className="w-72"
tabs={[{"value":"design","label":"Design"},{"value":"content","label":"Content","badge":2}]}
/>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.
| Left / Right | Move to the next tab and select it |
|---|---|
| Home / End | Jump to the first or last tab |
| Tab | Leaves the strip for whatever the panel puts after it |
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
tabs | InspectorTab[] | — | The tabs, in the order they are shown. |
value | string | — | Controlled selection, by `value`. Pair it with `onValueChange`. |
defaultValue | string | — | Initial selection in uncontrolled mode. Falls back to the first tab. |
onValueChange | (value: string) => void | — | |
disabled | boolean | — | Block interaction and dim the strip. |
tone | "muted" | "outline" | "ghost" | "muted" | Surface treatment of the strip: filled (default), hairline outline, or bare. |
size | "sm" | "default" | "lg" | "default" | Strip height preset. |
className | string | — | |
aria-label | string | — | Accessible name for the strip. |
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.
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.
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.
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.