Dev Design Library

Fibo components

fibo, a design system for experimental projects. shadcn/ui and Base UI, published as an installable shadcn registry.

Components
53
Framework
React
Stack
React, TypeScript, Tailwind
License
MIT
GitHub stars
1
Source
https://github.com/toribryan/fibo
Website
https://fibo.toribryan.com
Install
pnpm dlx shadcn@latest add @fibo/{name}

All Fibo components

  • Alert Dialog: Asks for a decision before something that can't be undone, with Cancel focused and no click-outside dismiss.
  • Annotated Text: Hand-drawn marks on a word or phrase, from underlines and circles to a highlighter, plus sticker chips that can cycle through words.
  • Attachment: One added file as a chip or an image thumbnail, with its upload status and buttons to remove or retry.
  • Avatar: A person's photo, or their initials when there's no photo.
  • Badge: A short label for status, category or count.
  • Button: Triggers an action or event with a single click.
  • Calendar: 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…
  • Chapter Scrubber: A rail of marks that swell under the pointer like the Dock, previewing the chapter at the crest.
  • Chat Composer: A message box built from parts around one draft, so each chat surface composes its own.
  • Checkbox: Turns a single option on or off, or picks many from a list.
  • Command Menu: A Cmd+K palette with nested pages, recent commands, ranked search and a preview pane.
  • Count: A number at a glance: capped at 99+, shortened to 1.2K or signed as +4, read out in full.
  • Data Table: A table for lists people work through, on TanStack Table: sorting, search, filters with counts, pages, selection, cell types, locked rows…
  • Date Picker: 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.
  • Dialog: A window over the page for a short task, such as editing a few fields, that keeps focus until it's done or dismissed.
  • Drop Zone: Wraps an area people can drop files onto, with an overlay while they drag and files split by type.
  • Empty State: What shows where content would be: a title, why it's empty, and what to do next.
  • Field: A label, description and error wired to one form control, with a group that sets the size of a whole form.
  • Filter Menu: A filter menu of fields and values that turns into a search as you type.
  • Floating Nav: A pill of destinations that floats above the bottom of a phone screen and steps aside while you scroll.
  • Input: A single line of free text.
  • Input Group: An input with an icon, text or button beside it, drawn as one field.
  • Integration Visual: A hub and the tools wired into it, with pulses along the routes.
  • Jump Bar: Takes people to unread messages, new messages or the present in a conversation.
  • Kbd: Shows a key or a keyboard shortcut in text.
  • Label: Names a form control and widens its hit area.
  • Map Pin: A pin for a point on a map, with a preview that opens on click or tap.
  • Menu: A short list of actions that opens from a button.
  • Message List: A conversation that groups each person's messages under one heading, with a single tab stop.
  • Pagination: Moves through a long list one page at a time.
  • Pixel Snail: A one-colour pixel snail that crawls on a loop while something loads.
  • Progress: Shows how far a task has got, or that it's under way.
  • Radio Group: Picks exactly one option from a short list.
  • Reactions: Lets people respond to content with an emoji in one tap.
  • Rich Text Editor: Formatted writing on Tiptap: headings, marks, lists, quotes and links from a toolbar or Markdown shortcuts, with an optional character…
  • Search Input: 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.
  • Select: Picks one option from a list that opens on demand.
  • Separator: A thin rule between groups of content, across or down, with an optional label.
  • Sheet: A panel that slides in from an edge for a focused task.
  • Skeleton: A placeholder in the shape of content that's still loading.
  • Slider: Picks a number, or a range, by dragging along a track.
  • Spinner: A spinning ring that says something is loading.
  • Status Dot: A small mark for whether someone is present, away or offline, told apart by shape.
  • Sticker Avatar: An avatar cut out like a die-cut sticker, with a paper edge that follows its shape and a status told by shape.
  • Switch: Turns a setting on or off, taking effect at once.
  • Table: Rows and columns of data, at one compact density.
  • Tabs: 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…
  • Textarea: Several lines of free text that grow with the content.
  • Toast: A brief message in the corner about something that just happened.
  • Token Flow: Walks a colour token from raw value to primitive to semantic role.
  • Tooltip: A short label that appears when a control is hovered or focused.
  • Typing Indicator: Says who's typing in a conversation, naming up to three people.
  • Voice Memo: An aluminium recorder that writes down what you say, with the transcript filling in beside it as you talk.

Browse by category