Pills & Tags
Semantic status pill for pending, processing, review and completed states.
Requires React 19, ReactDOM 19, TypeScript and lucide-react 1.14.0. Import frame.css once and use a frame-root wrapper; set its background to var(--color-bg-page) and color to var(--color-text-primary), or supply a matching host surface; add dark to an ancestor for dark mode.
Tested with shadcn 4.21.0, React 19.2.5, Vite 8.0.10 and Tailwind 3.4.19 / 4.3.3. Start with a configured React/Vite shadcn app. Files install into src/components/frame; import its frame.css. For manual copy, save the complete component and stylesheet below. Examples leave optional voice features off; retain the MIT license and third-party notices.
Required stylesheet: frame.cssnpx shadcn@4.21.0 add https://raw.githubusercontent.com/BeibeiZhang/frame-design-system/main/registry/status-tag.json
THE canonical pill component. Every tag/badge/pill renders through this. 8 semantic variants × 2 sizes × icon override.
Variant × state matrix (6×1 = 6 cells)
| variant ↓ / state → | default |
|---|---|
| pending | pending |
| in-progress | in-progress |
| in-review | in-review |
| success | success |
| failed | failed |
| neutral | neutral |
Compact neutral label with an optional outline and tooltip.
Requires React 19, ReactDOM 19, TypeScript and lucide-react 1.14.0. Import frame.css once and use a frame-root wrapper; set its background to var(--color-bg-page) and color to var(--color-text-primary), or supply a matching host surface; add dark to an ancestor for dark mode.
Tested with shadcn 4.21.0, React 19.2.5, Vite 8.0.10 and Tailwind 3.4.19 / 4.3.3. Start with a configured React/Vite shadcn app. Files install into src/components/frame; import its frame.css. For manual copy, save the complete component and stylesheet below. Examples leave optional voice features off; retain the MIT license and third-party notices.
Required stylesheet: frame.cssnpx shadcn@4.21.0 add https://raw.githubusercontent.com/BeibeiZhang/frame-design-system/main/registry/tag.json
Thin alias — neutral StatusTag at size='sm' with no icon. Inline labels: emoji chips, n/3 counters, type labels.
Compact rounded-full chip for inline suggestions, selections, draggable trait pickers.
Variant × state matrix (2×3 = 6 cells)
| variant ↓ / state → | default | hover | disabled |
|---|---|---|---|
| label only | |||
| icon + label |
Filter-bar chip — distinct from Chip (uses `type-detail` not `type-h2`, supports a count badge).
Variant × state matrix (2×3 = 6 cells)
| variant ↓ / state → | default | hover | disabled |
|---|---|---|---|
| default | |||
| active |
Compact context action with optional pressed state for prompt toolbars.
Requires React 19, ReactDOM 19, TypeScript and lucide-react 1.14.0. Import frame.css once and use a frame-root wrapper; set its background to var(--color-bg-page) and color to var(--color-text-primary), or supply a matching host surface; add dark to an ancestor for dark mode.
Tested with shadcn 4.21.0, React 19.2.5, Vite 8.0.10 and Tailwind 3.4.19 / 4.3.3. Start with a configured React/Vite shadcn app. Files install into src/components/frame; import its frame.css. For manual copy, save the complete component and stylesheet below. Examples leave optional voice features off; retain the MIT license and third-party notices.
Required stylesheet: frame.cssnpx shadcn@4.21.0 add https://raw.githubusercontent.com/BeibeiZhang/frame-design-system/main/registry/utility-chip.json
Mono-text utility pill for paths, IDs, tool-surface labels. Solid bg-bg-hover on hover (not gradient).
Decorative icon badge for message context or workflow groups; not an interactive control.
Requires React 19, ReactDOM 19, TypeScript and lucide-react 1.14.0. Import frame.css once and use a frame-root wrapper; set its background to var(--color-bg-page) and color to var(--color-text-primary), or supply a matching host surface; add dark to an ancestor for dark mode.
Tested with shadcn 4.21.0, React 19.2.5, Vite 8.0.10 and Tailwind 3.4.19 / 4.3.3. Start with a configured React/Vite shadcn app. Files install into src/components/frame; import its frame.css. For manual copy, save the complete component and stylesheet below. Examples leave optional voice features off; retain the MIT license and third-party notices.
Required stylesheet: frame.cssnpx shadcn@4.21.0 add https://raw.githubusercontent.com/BeibeiZhang/frame-design-system/main/registry/icon-badge.json
Decorative icon-in-circle badge (non-interactive, aria-hidden) — a round bg-bg-hover plate behind a glyph, used next to list items / section headers. For a CLICKABLE round icon use IconButton.
DS-147. One-line passive status above a content area — a bg-bg-hover strip (fill only, no border) with a 16px secondary glyph and a type-caption line. Not a control, no dismiss. Pass role='status' when it appears or changes after load.
Couldn’t reach this folder’s remote — working from its local copy for now.
With role="status" — announced when it appears.
Compact time or effort label using the shared status presentation.
Requires React 19, ReactDOM 19, TypeScript and lucide-react 1.14.0. Import frame.css once and use a frame-root wrapper; set its background to var(--color-bg-page) and color to var(--color-text-primary), or supply a matching host surface; add dark to an ancestor for dark mode.
Tested with shadcn 4.21.0, React 19.2.5, Vite 8.0.10 and Tailwind 3.4.19 / 4.3.3. Start with a configured React/Vite shadcn app. Files install into src/components/frame; import its frame.css. For manual copy, save the complete component and stylesheet below. Examples leave optional voice features off; retain the MIT license and third-party notices.
Required stylesheet: frame.cssnpx shadcn@4.21.0 add https://raw.githubusercontent.com/BeibeiZhang/frame-design-system/main/registry/time-pill.json
Thin alias — StatusTag (in-progress, sm) with a User icon. 'time estimate' semantics at call sites.
DS-145. Passive blue label saying the data on screen is a sample. placement='inline' sits to the right of a page title on the same line and wraps under it on narrow screens (WorkPal guest mode: label 'Sample data' with a sign-in tooltip, on every page that would show the user's own content); placement='edge' is the ribbon pulled flush to a panel's left edge (default label).