Folder tabs that sit on a glass panel with always-visible counts, and a segmented control for views.
FolderTabs switch between queues of the same list (Open, In review, Cancelled). Each tab shows its count so the workload reads without opening each; the panel's top-left corner squares off so the tabs sit on it.
SegmentedControl switches the view of the same content (Chart or Table, List or Board). The active segment is a white key lifted out of a recess.
Installation
npx shadcn@latest add KezLahd/rime/tabsAlso installs: base, glass-panel.
Usage
import { FolderTabs, SegmentedControl } from "@/components/ui";
<SegmentedControl aria-label="View" value={view} onChange={setView} options={[{ value: "chart", label: "Chart" }, { value: "table", label: "Table" }]} />Examples
Folder tabs
Showing the open queue.
Segmented control
API
Generated from the component's TypeScript types and JSDoc (scripts/gen-ui-registry.mjs), so it always matches the source.
FolderTabs
| Prop | Type | Default | Description |
|---|---|---|---|
| tabsRequired | ReadonlyArray<FolderTab> | ||
| valueRequired | string | ||
| onChangeRequired | (id: string) => void | ||
| aria-labelRequired | string | ||
| childrenRequired | ReactNode | Content of the active tab's panel. | |
| panelPadding | GlassPanelProps["padding"] | "md" | |
| panelVariant | GlassPanelProps["variant"] | "page" | |
| className | string |
SegmentedControl
| Prop | Type | Default | Description |
|---|---|---|---|
| optionsRequired | ReadonlyArray<SegmentedOption<V>> | ||
| valueRequired | V | ||
| onChangeRequired | (value: V) => void | ||
| aria-labelRequired | string | ||
| size | "sm" | "md" | "md" | |
| className | string |
Theme tokens
Per-component tokens are undeclared by default, so the default shown is the fallback the CSS uses. Set one at :root (or in theme.css) to restyle every instance. Live values are read from this page, so they follow the Rime Studio.
| Token | Default | Live value |
|---|---|---|
| --r-flat | max(0px, calc(var(--segmented-radius, var(--r-sm)) - 3px)) | … |
| --segmented-radius | var(--r-sm) | … |
| --tab-brand-active-from | #fdfcff | … |
| --tab-brand-active-to | #f3eefb | … |
| --tab-brand-from | #f7f4fc | … |
| --tab-brand-ink | #4e3470 | … |
| --tab-brand-rgb | 78, 52, 112 | … |
| --tab-brand-to | #efe9f8 | … |
| --tab-pad-x | calc(20px * var(--density)) | … |
| --tab-radius | var(--r-md) | … |
System tokens it reads
| Token | Default | Live value |
|---|---|---|
| --danger-ink | tokens.css | … |
| --density | tokens.css | … |
| --dur | tokens.css | … |
| --dur-fast | tokens.css | … |
| --ease | tokens.css | … |
| --focus-color | tokens.css | … |
| --focus-ring | tokens.css | … |
| --ink-body | tokens.css | … |
| --ink-brand | tokens.css | … |
| --ink-disabled | tokens.css | … |
| --ink-muted | tokens.css | … |
| --ink-secondary | tokens.css | … |
| --r-md | tokens.css | … |
| --r-sm | tokens.css | … |
| --recess-fill | tokens.css | … |
| --rgb-brand | tokens.css | … |
| --rgb-contact | tokens.css | … |
| --rgb-white | tokens.css | … |
| --shadow-panel | tokens.css | … |
| --shadow-recess | tokens.css | … |
| --shadow-specular | tokens.css | … |
| --success-ink | tokens.css | … |
| --surface-solid | tokens.css | … |
| --text-caption | tokens.css | … |
| --text-small | tokens.css | … |
| --warning-ink | tokens.css | … |
Accessibility
- FolderTabs implement the ARIA tabs pattern: role="tablist", arrow keys move between tabs, the panel is role="tabpanel".
- SegmentedControl is a radiogroup: arrow keys change the value.
Do and don't
Do
- Always show counts on folder tabs.
Don't
- Don't use folder tabs for page navigation; that is the sidebar.
For AI agents
This page as markdown, rendered from the same registry entry. Point an agent at it (or add .md to this page's URL), or at /llms.txt for the index.
Open tabs.md