The shadcn registry of the Wibo design system: 68 items. Register the namespace in components.json and add items with the shadcn CLI. Generators read SKILL.md.
{ "registries": { "@wibo": "https://wibo-ui.vercel.app/r/{name}.json" } }
pnpm dlx shadcn@latest add @wibo/styles @wibo/button @wibo/card
| Item | Type | Description | File |
|---|---|---|---|
utils | lib | cn(): joins class names and resolves Tailwind conflicts, aware of the Wibo theme. | r/utils.json |
use-sliding-indicator | lib | useSlidingIndicator(): one shared highlight that slides between the items of a list (sidebar rows, tabs), for hover and for the current item. | r/use-sliding-indicator.json |
square-image | lib | Square crops of a picked picture (centre and zoom in source pixels) and their PNG encoding in the browser, for avatars and logos. | r/square-image.json |
org-tree | lib | The org chart's pure tree logic: items with a parent id folded into a forest in name order (roots: no parent, a parent outside the set, or a cycle), the move check (onto itself, into its own subtree, deeper than twelve levels) and the parents a move may pick. | r/org-tree.json |
tokens | lib | Typed design tokens per surface and theme, plus applyTheme() for the artifact theme handoff. | r/tokens.json |
styles | item | Tailwind 4 entry stylesheet: tokens, the app and marketing surfaces, light and dark. | r/styles.json |
button | ui | Action trigger: rounded rectangle, press feedback, stable loading state; default is the black primary of the app surface. | r/button.json |
submit-button | ui | Submit button of a server-action form: spinner while the form submits (useFormStatus). | r/submit-button.json |
input | ui | Single-line text input. | r/input.json |
textarea | ui | Multi-line text input that grows with its content. | r/textarea.json |
label | ui | Accessible label for a form control. | r/label.json |
select | ui | Single-choice dropdown for short option lists. | r/select.json |
combobox | ui | Select with search for long option lists. | r/combobox.json |
checkbox | ui | Boolean choice with an indeterminate state. | r/checkbox.json |
switch | ui | On/off toggle for settings that apply immediately. | r/switch.json |
radio-group | ui | Single choice among a few visible options. | r/radio-group.json |
swatch-group | ui | Single choice among visual options (colours, shapes, avatars) as a grid of square tiles with radio-group semantics and keyboard support. | r/swatch-group.json |
badge | ui | Small status or count label in semantic colours. | r/badge.json |
card | ui | Bordered content container with header, action, content and footer slots. | r/card.json |
separator | ui | One-pixel divider. | r/separator.json |
dialog | ui | Modal window for focused tasks and confirmations. | r/dialog.json |
sheet | ui | Side panel over the page for details, filters and mobile navigation. | r/sheet.json |
dropdown-menu | ui | Menu of actions opened from a button. | r/dropdown-menu.json |
popover | ui | Floating panel anchored to a trigger. | r/popover.json |
tooltip | ui | Short hint on hover and focus. | r/tooltip.json |
tabs | ui | Pill or underlined tabs with one indicator that slides to the active tab. | r/tabs.json |
table | ui | Plain table primitives with numeric cells. | r/table.json |
data-table | ui | TanStack Table v9 table with sorting, toolbar slot, column visibility and pagination. | r/data-table.json |
pagination | ui | Link pagination and controlled previous/next controls with rows per page. | r/pagination.json |
skeleton | ui | Loading placeholder. | r/skeleton.json |
alert | ui | Inline message: default, info, success, warning, danger. | r/alert.json |
toast | ui | Minimal toast provider and useToast() hook. | r/toast.json |
empty-state | ui | Icon or illustration, title, a balanced description and the action under it; framed with a dashed rim on a page, plain inside a card. | r/empty-state.json |
stat-card | ui | Large number, one-line caption and optional delta chip. | r/stat-card.json |
chart | ui | Recharts container with series config to CSS variables, tooltip, legend and hidden data table on Wibo tokens. | r/chart.json |
charts | ui | Line, bar, distribution and sparkline on the chart primitives with the mark specs applied. | r/charts.json |
key-value-list | ui | Description list of labelled values. | r/key-value-list.json |
timeline | ui | Ordered steps with status for runs and audit trails. | r/timeline.json |
org-chart | ui | A tree by parent drawn as nested lists with connector lines: roots in a row, their reports in a row, deeper levels stacked. Cards drawn by the caller, optional drag and drop with the move check, an actions slot for the keyboard's way to every move. | r/org-chart.json |
code-block | ui | Monospace code with copy, and a collapsible JSON viewer mode. | r/code-block.json |
collapsible | ui | A block shown and hidden under the row that names it, with a turning chevron. | r/collapsible.json |
command | ui | cmdk command list and the command palette dialog with a Cmd+K hook. | r/command.json |
breadcrumb | ui | Location trail for the top bar. | r/breadcrumb.json |
avatar | ui | Rounded-square (or circle) picture with an initials fallback; neutral or accent tone. | r/avatar.json |
agent-avatar | ui | An agent's face: coloured disc, geometric head with eyes, translucent shoulders; eight shapes, eight colours, a default derived from the agent id, static or animated (idle, thinking, greeting). Its colours and motion live in the Wibo stylesheet (@wibo/styles). | r/agent-avatar.json |
chip | ui | Removable filter chip. | r/chip.json |
date-range | ui | Start and end date as two native date inputs. | r/date-range.json |
form | ui | Field, label, control, description and error wiring, fieldset and settings section. | r/form.json |
app-shell | component | Sidebar column, content frame with a slim banner slot, mobile bar and navigation sheet; no top bar. | r/app-shell.json |
sidebar | component | Wibo mark header, sections, nav items with a sliding hover and active highlight and a pending state, groups whose nested items fold under a row that links to its page, and the footer rows. | r/sidebar.json |
sidebar-account | component | The signed-in person at the foot of the sidebar, under a hairline: avatar, name and email; the row opens the account menu (settings, theme, sign out). | r/sidebar-account.json |
topbar | component | Optional top bar with breadcrumb, context switcher and actions slots. | r/topbar.json |
staff-banner | component | Slim strip at the top of the content frame while Wibo staff are inside a Workspace. | r/staff-banner.json |
powered-by-wibo | component | Footer for artifacts. | r/powered-by-wibo.json |
wibo-logo-data | lib | The Wibo mark and wordmark PNGs inlined as data URIs (generated from src/assets). | r/wibo-logo-data.json |
wibo-logo | component | WiboMark (square "w") and WiboWordmark images with alt text. | r/wibo-logo.json |
page-header | component | Breadcrumb trail, title row with an optional avatar or icon, description and actions. | r/page-header.json |
page-container | component | The centred readable column of a page: narrow, medium, wide or full, with the shared gutters and arrival motion; bleed for one canvas across the whole content frame. | r/page-container.json |
page-skeletons | component | Loading states in the page's shape: page column, header, tabs, table, cards, stats, form. | r/page-skeletons.json |
table-toolbar | component | Search, filter chips, column toggle and time range slots above a table. | r/table-toolbar.json |
section-group | component | Titled page section, optionally a responsive grid. | r/section-group.json |
inbox-list | component | Items waiting for a person with kind, title, meta and status. | r/inbox-list.json |
approval-card | component | Proposed agent action with preview, details and approve, edit, reject. | r/approval-card.json |
form-sheet | component | Side sheet for data entry: title, scrolling fields, a footer with cancel and submit always in reach; full width on phones. | r/form-sheet.json |
confirm-dialog | component | Confirmation before an act that takes something away or decides: what it does, an optional typed name or note, the error in place, an answer shown once. | r/confirm-dialog.json |
row-menu | component | A row's verbs behind three dots: icons, destructive items last and red, notes under disabled items; also at a page header. | r/row-menu.json |
settings-dialog | component | Settings in a large dialog after shadcn's sidebar-13: sections by group on the left, breadcrumb and scrolling content on the right, full screen with a stacked list on phones; SettingsBlock for each card, SettingsForm for one preference edited in place with its own Save. | r/settings-dialog.json |
image-upload | component | Picture field for avatars and logos: preview, upload or replace, remove, and a crop dialog (drag and zoom) that encodes a square PNG in the browser. | r/image-upload.json |