---
name: "@fibo"
slug: "fibo"
description: "An achromatic design system on Base UI: the standard parts plus playful niche components, with semantic tokens that match Figma variables one to one."
category: "Forms"
tags: ["accessibility", "audio", "buttons", "cards", "design-system", "editor", "forms", "loaders", "maps", "media", "navigation", "overlays", "retro", "tables", "theming"]
framework: "react"
license: null
author: null
website: "https://fibo.toribryan.com"
github: null
registry: "https://fibo.toribryan.com/r/registry.json"
pro: false
pro_url: null
github_stars: null
component_count: 50
generated_at: "2026-10-10T06:32:55.998Z"
---

# @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.

## Links

- Website: https://fibo.toribryan.com
- Registry JSON: https://fibo.toribryan.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/fibo
- This file: https://sh4dcn.vercel.app/md/fibo.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://fibo.toribryan.com/r/registry.json
pnpm dlx shadcn@latest add https://fibo.toribryan.com/r/registry.json
bunx shadcn@latest add https://fibo.toribryan.com/r/registry.json
# fetch the raw registry index
curl -s https://fibo.toribryan.com/r/registry.json
```

## Components (50)

| name | type | description | install |
| --- | --- | --- | --- |
| avatar | registry: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 | registry:ui | A short label for status, category or count. | `npx shadcn@latest add https://fibo.toribryan.com/r/badge.json` |
| button | registry:ui | Triggers an action or event with a single click. | `npx shadcn@latest add https://fibo.toribryan.com/r/button.json` |
| calendar | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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` |
| empty-state | registry: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 | registry: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 | registry: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 | registry:ui | A pill of destinations that floats above the bottom of a phone screen and steps aside while you scroll. | `npx shadcn@latest add https://fibo.toribryan.com/r/floating-nav.json` |
| input-group | registry: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 | registry:ui | A single line of free text. | `npx shadcn@latest add https://fibo.toribryan.com/r/input.json` |
| integration-visual | registry: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 | registry: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 | registry:ui | Shows a key or a keyboard shortcut in text. | `npx shadcn@latest add https://fibo.toribryan.com/r/kbd.json` |
| label | registry:ui | Names a form control and widens its hit area. | `npx shadcn@latest add https://fibo.toribryan.com/r/label.json` |
| map-pin | registry: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 | registry:ui | A short list of actions that opens from a button. | `npx shadcn@latest add https://fibo.toribryan.com/r/menu.json` |
| message-list | registry: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 | registry:ui | Moves through a long list one page at a time. | `npx shadcn@latest add https://fibo.toribryan.com/r/pagination.json` |
| pixel-snail | registry: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 | registry: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 | registry:ui | Picks exactly one option from a short list. | `npx shadcn@latest add https://fibo.toribryan.com/r/radio-group.json` |
| reactions | registry:ui | Lets people respond to content with an emoji in one tap. | `npx shadcn@latest add https://fibo.toribryan.com/r/reactions.json` |
| rich-text-editor | registry: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` |
| select | registry:ui | Picks one option from a list that opens on demand. | `npx shadcn@latest add https://fibo.toribryan.com/r/select.json` |
| separator | registry: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 | registry: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 | registry:ui | A placeholder in the shape of content that's still loading. | `npx shadcn@latest add https://fibo.toribryan.com/r/skeleton.json` |
| slider | registry:ui | Picks a number, or a range, by dragging along a track. | `npx shadcn@latest add https://fibo.toribryan.com/r/slider.json` |
| spinner | registry:ui | A spinning ring that says something is loading. | `npx shadcn@latest add https://fibo.toribryan.com/r/spinner.json` |
| status-dot | registry: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 | registry: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 | registry:ui | Turns a setting on or off, taking effect at once. | `npx shadcn@latest add https://fibo.toribryan.com/r/switch.json` |
| table | registry:ui | Rows and columns of data, at one compact density. | `npx shadcn@latest add https://fibo.toribryan.com/r/table.json` |
| tabs | registry: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 | registry:ui | Several lines of free text that grow with the content. | `npx shadcn@latest add https://fibo.toribryan.com/r/textarea.json` |
| toast | registry: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 | registry: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 | registry: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 | registry: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 | registry:ui | An aluminum recorder that writes down what you say, with the transcript filling in beside it as you talk. | `npx shadcn@latest add https://fibo.toribryan.com/r/voice-memo.json` |
| theme | registry: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` |
| theme-mechanical | registry: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` |
| theme-electrical | registry: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` |

## For AI agents

```text
You are adding components from @fibo to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/fibo.md) for the component list.
2. Fetch the machine-readable index: https://fibo.toribryan.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: fibo).
```