The registry
Components
Shared controls from @fabrials/ui and @fabrials/ai-ui, plus WebMCP and MCP blocks you can copy into an app. Design-system pages are previews. Agent blocks stay installable from the registry.
Brand
The dithered Highstorm light and the product marks. Landings, sign-in and product marks use them.
- Dither bandA thin storm band that signs a section or page heading.
- Dither canvasThe engine under the brand pieces: any brightness field, dithered onto a colour ramp.
- Dither gemA cut gem filled with dithered light: the product mark in navigation, lists and empty states.
- Dither sceneThe Highstorm storm front behind a landing hero or a sign-in page.
- Product lockupA product's name with its gem, for headers and sign-in.
Controls
Buttons, fields and choices used across Fabrials products.
- ButtonThe action control. One primary action per task, with quiet alternatives.
- CheckboxA binary choice that can sit in a form or a selection list.
- FieldConnects a label, hint and error to one control.
- Field setGrouped form fields on a real fieldset: a titled subsection with a hairline above, and fields laid out with the house gap.
- File inputA file picker that is a button, with the chosen name, a clear action, a description and an error.
- Filter chipAn active filter with a one-click clear, as a link or a button.
- Icon buttonAn icon-only button that always has a name: 44px, a tooltip on hover and on keyboard focus, an optional shortcut.
- InputA single-line text field for names, identifiers and short values.
- LabelThe visible name of a control.
- Multi-selectSeveral values from a list, summarised in the trigger.
- Native radio groupThe browser's own radios in a fieldset with a legend, for forms that must work without JavaScript and for swatch pickers.
- Native selectThe browser's own select, styled, for long lists and forms that must work without JavaScript.
- Radio groupOne choice from a short list that stays visible.
- SelectA closed list of options.
- SwitchAn immediate on or off setting.
- TextareaA multi-line field for notes, prompts and messages.
- Theme switcherSystem, light or dark, as a compact segmented control.
- Toggle groupA segmented choice for ranges and views.
- ToolbarOne tab stop for a row of controls: Tab enters and leaves once, the arrows, Home and End move between the buttons.
Overlays
Dialogs, menus and previews that keep keyboard focus.
- Alert dialogA confirmation for a destructive or hard-to-undo action.
- Confirm dialogConfirm first, then run an async action with a pending state and an inline error.
- DialogA modal task with a title, an explanation and explicit actions.
- Dropdown menuA small list of actions for one record.
- Hover cardA preview of a person, file or citation.
- PopoverA small anchored panel for one extra choice.
- SheetA side panel for filters and secondary tasks.
- Status popoverA one-sentence status in a toolbar or header: an icon, or an icon and a word, that opens a popover with what to do about it.
- TooltipA short name for an icon button.
Collections
Tables, tabs and other ways to scan a set of records.
- AccordionQuestions and details that open in place.
- AlertA status that stays on the page.
- AvatarA person or account, with initials when there is no image.
- BadgeA short status that always has a text label.
- CardA bounded summary of one subject.
- CollapsibleA disclosure for reasoning, sources or a long detail.
- ComboboxA text field that filters a list of known values.
- Description listTerms and values, such as a record's properties.
- DisclosureA styled native details element: a 44px summary with a chevron and a count, a panel that stays in the page, no JavaScript.
- File thumbnailAn image preview or a file-type tile for file lists.
- ProgressHow far a known task has gone.
- Recency groupsGroups a history by Today, Yesterday, Previous 7 days, Previous 30 days, then month.
- Scroll areaA region that scrolls without moving the page.
- SeparatorA visual break between groups.
- SkeletonA placeholder while the first response is still loading.
- TableA data table with a caption and column headers.
- TabsSwitch between peer views of the same subject.
Navigation
Shells, menus and the command palette.
- BreadcrumbWhere the page sits, with a way back up.
- CommandThe command palette. Search a short list of real destinations.
- Command launcherThe launcher of a palette, and the rows of a palette that is not cmdk.
- KbdA flat hint for a keyboard shortcut.
- Nav switcherA switcher for where you are: a trigger that names the current mailbox, workspace or project, and a popover of links.
- Nav tabsLinks styled as tabs, for the sections of one record.
- Navigation menuThe top-level links of a site, with one panel of related links.
- PaginationPages of a long collection.
- Resizable panesPanes with draggable, keyboard-operable handles: navigation, list and reader.
- SidebarThe persistent navigation of an operational app.
Composition
Groups, loading and motion used inside a task.
- Button groupRelated actions that belong to one choice.
- CarouselA sideways list of peer items, such as citations.
- Input groupA field with an addon or an action attached to it.
- LoadingPaints real components as their own skeleton while data loads, with no layout shift.
- Shimmer textA CSS-only loading label with a light sweep.
- SnippetA command or short code with a copy button.
- SpinnerAn indeterminate wait.
- ToasterA short confirmation that does not move the page.
- Truncated textA single line that shows its full text in a tooltip only when it is cut off.
Metrics
Totals and series drawn from real usage data.
- Activity stripA row of intensity cells, like posts per day or per hour.
- File sizeA byte count as people read it: 25 MB, 1,5 kB.
- MeterHow much of a quota or budget is used.
- Number tickerA total that counts to the current value.
- Relative time"3 minutes ago" in any locale, with the full date on hover.
- Series chartA bar or line chart for one shared series contract.
- SparklineA small line of recent values.
- StatOne number with its change and a short trend.
- Status dotA state as a dot and a word.
- TimelineAn event feed with a marker, title, time and detail.
Patterns
Page structure shared by operational screens.
- Application headerOne 56 px row for the session chrome of an app: brand, navigation, a command slot and actions.
- Auth layoutThe sign-in page: brand, a card for the form, and an aside for the storm.
- Bulk actionsActions that appear after the person selects rows.
- Collection toolbarSearch, filters and actions for one collection.
- ItemA record row for master-detail panes: one stretched target, controls above it, current and selected fills, unread weight.
- Page headerThe name of the page, a one-line description and the primary action.
- Section headerThe name of a section inside a page.
- Settings sectionA settings row with the title, description and status on the left and the controls on the right.
- Site headerThe top bar of a public site: mark, navigation, actions and a phone menu.
- State panelLoading, empty, error, stale and offline states.
- Suggestion cardEmpty-state prompts in a grid on wide screens and a scroll row on narrow ones.
- Workspace shellNavigation, a header slot and the main task.
Documentation
Code samples, install commands, file trees and repository links for docs and READMEs.
- Code panelA code sample with its file name, a copy button, line numbers, highlighted lines, boxed words and diff marks.
- Code tabsSeveral versions of one sample in one frame: languages, frameworks or files.
- FilesA file tree: what a command creates or what a package contains. Folders open and close.
- Package installA command in npm, pnpm, yarn and bun. Choosing one switches every command on the page.
- Repository linkA GitHub repository as a compact link with its stars and forks.
Effects
Decorative moonlight for sign-in and landing pages only.
AI chat
Presentational chat pieces from @fabrials/ai-ui. The host supplies the data.
- Activity disclosureCollapsible reasoning, search steps and tool activity inside an answer.
- AttachmentsFiles attached to a message, inline, as a grid or as a list.
- Chat composerThe message field with tools, attachments, send and stop.
- Chat messageA user or assistant turn with copy, edit, retry and timestamp actions.
- Citations and sourcesNumbered citation chips linked to a list of source cards.
- Code block and markdownAnswer styles for rendered markdown and a code block with copy and download.
- Voice inputA microphone button that records a clip and hands it to the host for transcription.
AI providers
Provider marks and account presentation from @fabrials/ai-ui.
Interaction
Forms, choices and actions for a shared interface.
- Action buttonA single action with pending, error and duplicate-click handling.
- Arguments formTurn a tool schema into a usable form, with a JSON escape hatch.
- ComparisonShow choices side by side and highlight the evidence behind a recommendation.
- ConfirmationGive an action a clear review point before it runs.
- Data explorerSearch, filter, sort and select records with one shared state.
- Date rangeNative date fields and an accessible calendar, working in tandem.
- Multi-step flowGuide a shared human-agent workflow through review and completion.
WebMCP
Expose your interface to agents in the browser.
MCP
Discover tools, connect to servers and display results.
- Connection panelAn endpoint, an auth method, and a clear connection state.
- ElicitationAnswer the server when a tool needs another piece of information.
- Execution historyFollow progress, inspect results, and cancel outstanding requests.
- MCP dashboardA complete working console, composed from the registry.
- Resources & promptsRead resources, resolve templates, and fill reusable prompts.
- Result viewerReadable text, structured content and media, with raw data one click away.
- Tool catalogMake tool discovery readable, searchable and keyboard accessible.
- Tool detailA tool description, its arguments, and the action in one place.
Foundation
Clients and adapters that connect everything.
Kibo UI
Larger, composable pieces for product interfaces: boards, uploads, calendars and more. MIT, community tier. Origin and license.
- Contribution GraphMITA GitHub-style contribution graph component that displays activity levels over time.
- DropzoneMITAllows users to drag-and-drop files into a container to upload or process them.
- KanbanMITA kanban board is a visual tool that helps you manage and visualize your work. It is a board with columns, and each column represents a status, e.g. "Backlog", "In Progress", "Done".
- RatingMITA star rating component with keyboard navigation and hover effects.
Magic UI
Animated components and effects for landing pages, built on Tailwind and Motion. MIT, community tier. Origin and license.
- Animated ListMITA list that animates each item in sequence with a delay. Used to showcase notifications or events on your landing page.1 design note
- Dot PatternMITA background dot pattern made with SVGs, fully customizable using Tailwind CSS.3 design notes
- File TreeMITA component used to showcase the folder and file structure of a directory.2 design notes
- MarqueeMITAn infinite scrolling component that can be used to display text, images, or videos.2 design notes
- TerminalMITA terminal component2 design notes