sh4dcnv2 · atlas
← libraries

@fibo

An achromatic design system on Base UI: the standard parts plus playful niche components, with semantic tokens that match Figma variables one to one.

56 components react shadcn-cli

Install this registry

shadcn (npm) npx shadcn@latest add https://fibo.toribryan.com/r/registry.json
pnpm pnpm dlx shadcn@latest add https://fibo.toribryan.com/r/registry.json
bun bunx shadcn@latest add https://fibo.toribryan.com/r/registry.json
fetch registry curl -s https://fibo.toribryan.com/r/registry.json

Components

56 total
Alert dialog ui

Asks for a decision before something that can't be undone, with Cancel focused and no click-outside dismiss.

npx shadcn@latest add https://fibo.toribryan.com/r/alert-dialog.json
Annotated text ui

Hand-drawn marks on a word or phrase, from underlines and circles to a highlighter, plus sticker chips that can cycle through words.

npx shadcn@latest add https://fibo.toribryan.com/r/annotated-text.json
Avatar ui

A person's photo, or their initials when there's no photo.

npx shadcn@latest add https://fibo.toribryan.com/r/avatar.json
Badge ui

A short label for status, category or count.

npx shadcn@latest add https://fibo.toribryan.com/r/badge.json
Button ui

Triggers an action or event on click.

npx shadcn@latest add https://fibo.toribryan.com/r/button.json
Calendar ui

A month grid for picking a day or a range, with full keyboard use; pages side by side, scrolls on phones, or fills a page with a month of events.

npx shadcn@latest add https://fibo.toribryan.com/r/calendar.json
Chapter scrubber ui

A rail of marks that swell under the pointer like the Dock, previewing the chapter at the crest.

npx shadcn@latest add https://fibo.toribryan.com/r/chapter-scrubber.json
Chat composer ui

A message box built from parts around one draft, so each chat surface composes its own.

npx shadcn@latest add https://fibo.toribryan.com/r/chat-composer.json
Checkbox ui

Turns a single option on or off, or picks many from a list.

npx shadcn@latest add https://fibo.toribryan.com/r/checkbox.json
Command menu ui

A Cmd+K palette with nested pages, recent commands, ranked search and a preview pane.

npx shadcn@latest add https://fibo.toribryan.com/r/command-menu.json
Count ui

A number at a glance: capped at 99+, shortened to 1.2K or signed as +4, read out in full.

npx shadcn@latest add https://fibo.toribryan.com/r/count.json
Data table ui

A table for lists people work through, on TanStack Table: sorting, search, filters with counts, pages, selection, cell types, locked rows and pinned columns.

npx shadcn@latest add https://fibo.toribryan.com/r/data-table.json
Date picker ui

A field that opens a calendar to pick a day, or a range with presets and Apply; a popover on desktop, a drawer on phones.

npx shadcn@latest add https://fibo.toribryan.com/r/date-picker.json
Dialog ui

A window over the page for a short task, such as editing a few fields, that keeps focus until it's done or dismissed.

npx shadcn@latest add https://fibo.toribryan.com/r/dialog.json
Empty state ui

What shows where content would be: a title, why it's empty, and what to do next.

npx shadcn@latest add https://fibo.toribryan.com/r/empty-state.json
Field ui

A label, description and error wired to one form control, with a group that sets the size of a whole form.

npx shadcn@latest add https://fibo.toribryan.com/r/field.json
Filter menu ui

A filter menu of fields and values that turns into a search as you type.

npx shadcn@latest add https://fibo.toribryan.com/r/filter-menu.json
Floating nav ui

A pill of destinations floating above the bottom of a phone screen that steps aside on scroll.

npx shadcn@latest add https://fibo.toribryan.com/r/floating-nav.json
Input group ui

An input with an icon, text or button beside it, drawn as one field.

npx shadcn@latest add https://fibo.toribryan.com/r/input-group.json
Input ui

A single line of free text.

npx shadcn@latest add https://fibo.toribryan.com/r/input.json
Integration visual ui

A hub and the tools wired into it, with pulses along the routes.

npx shadcn@latest add https://fibo.toribryan.com/r/integration-visual.json
Jump bar ui

Takes people to unread messages, new messages or the present in a conversation.

npx shadcn@latest add https://fibo.toribryan.com/r/jump-bar.json
Kbd ui

Shows a key or a keyboard shortcut in text.

npx shadcn@latest add https://fibo.toribryan.com/r/kbd.json
Label ui

Names a form control and widens its hit area.

npx shadcn@latest add https://fibo.toribryan.com/r/label.json
Map pin ui

A pin for a point on a map, with a preview that opens on click or tap.

npx shadcn@latest add https://fibo.toribryan.com/r/map-pin.json
Menu ui

A short list of actions that opens from a button.

npx shadcn@latest add https://fibo.toribryan.com/r/menu.json
Message list ui

A conversation that groups each person's messages under one heading, with a single tab stop.

npx shadcn@latest add https://fibo.toribryan.com/r/message-list.json
Pagination ui

Moves through a long list one page at a time.

npx shadcn@latest add https://fibo.toribryan.com/r/pagination.json
Pixel snail ui

A one-color pixel snail that crawls on a loop while something loads.

npx shadcn@latest add https://fibo.toribryan.com/r/pixel-snail.json
Progress ui

Shows how far a task has got, or that it's under way.

npx shadcn@latest add https://fibo.toribryan.com/r/progress.json
Radio group ui

Picks exactly one option from a short list.

npx shadcn@latest add https://fibo.toribryan.com/r/radio-group.json
Reactions ui

Emoji responses to content, in one tap.

npx shadcn@latest add https://fibo.toribryan.com/r/reactions.json
Rich text editor ui

Formatted writing on Tiptap: headings, marks, lists, quotes and links from a toolbar or Markdown shortcuts, with an optional character limit.

npx shadcn@latest add https://fibo.toribryan.com/r/rich-text-editor.json
Search input ui

A search box with a Cmd+K shortcut and a clear button, and a compact trigger for a header whose search opens in a command menu.

npx shadcn@latest add https://fibo.toribryan.com/r/search-input.json
Select ui

Picks one option from a list that opens on demand.

npx shadcn@latest add https://fibo.toribryan.com/r/select.json
Separator ui

A thin rule between groups of content, across or down, with an optional label.

npx shadcn@latest add https://fibo.toribryan.com/r/separator.json
Sheet ui

A panel that slides in from an edge for a focused task.

npx shadcn@latest add https://fibo.toribryan.com/r/sheet.json
Skeleton ui

A placeholder in the shape of content that's still loading.

npx shadcn@latest add https://fibo.toribryan.com/r/skeleton.json
Slider ui

Picks a number, or a range, by dragging along a track.

npx shadcn@latest add https://fibo.toribryan.com/r/slider.json
Status dot ui

A small mark for whether someone is present, away or offline, told apart by shape.

npx shadcn@latest add https://fibo.toribryan.com/r/status-dot.json
Sticker avatar ui

An avatar cut out like a die-cut sticker, with a paper edge that follows its shape and a status told by shape.

npx shadcn@latest add https://fibo.toribryan.com/r/sticker-avatar.json
Switch ui

Turns a setting on or off, taking effect at once.

npx shadcn@latest add https://fibo.toribryan.com/r/switch.json
Table ui

Rows and columns of data, at one compact density.

npx shadcn@latest add https://fibo.toribryan.com/r/table.json
Tabs ui

Switches between views of one subject in place, as a segmented control or a row of tabs with an underline; scrolls sideways when it runs out of room.

npx shadcn@latest add https://fibo.toribryan.com/r/tabs.json
Textarea ui

Several lines of free text that grow with the content.

npx shadcn@latest add https://fibo.toribryan.com/r/textarea.json
Toast ui

A brief message in the corner about something that just happened.

npx shadcn@latest add https://fibo.toribryan.com/r/toast.json
Token flow ui

Walks a color token from raw value to primitive to semantic role.

npx shadcn@latest add https://fibo.toribryan.com/r/token-flow.json
Tooltip ui

A short label that appears when a control is hovered or focused.

npx shadcn@latest add https://fibo.toribryan.com/r/tooltip.json
Typing indicator ui

Says who's typing in a conversation, naming up to three people.

npx shadcn@latest add https://fibo.toribryan.com/r/typing-indicator.json
Voice memo ui

An aluminum recorder with a live transcript beside it.

npx shadcn@latest add https://fibo.toribryan.com/r/voice-memo.json
App shell block

A workspace app's frame: a header with Command menu on Cmd+K, pages for home, projects and an inbox, and Floating nav to move between them.

npx shadcn@latest add https://fibo.toribryan.com/r/app-shell.json
Settings page block

A settings screen in tabs for profile, notifications and account, with a save bar that appears on change and a confirmed danger zone.

npx shadcn@latest add https://fibo.toribryan.com/r/settings-page.json
Sitemap block

A human-readable sitemap: a location search, popular picks, and every destination grouped by job, in columns that fold to cards on a phone.

npx shadcn@latest add https://fibo.toribryan.com/r/sitemap.json
Theme theme

fibo's full token set, light and dark: the achromatic roles, status colors and named -subtle, -hover and -ring roles.

npx shadcn@latest add https://fibo.toribryan.com/r/theme.json
Mechanical theme theme

A warm, tactile theme: a beige page, a terracotta primary, and raised controls that press onto a solid bottom edge like keys. Applies under data-theme="mechani…

npx shadcn@latest add https://fibo.toribryan.com/r/theme-mechanical.json
Electrical theme theme

A flat, ledger-like theme: a sage page, white cards, ink buttons and one yellow highlight on whatever is selected. Applies under data-theme="electrical", in li…

npx shadcn@latest add https://fibo.toribryan.com/r/theme-electrical.json