October 2026 - Sounds, pill radius and site settings

Sounds#

@fabricator/sounds adds interface sounds, synthesized with the Web Audio API: no audio files and no dependencies. There are 32 short sounds, one for each kind of component: buttons by weight (primary, secondary, destructive), rows and links, checkboxes, switches, toggles, radios and options, tabs, pagination, carousels, accordions, menus, dialogs, alert dialogs, sheets and drawers, toasts by type, sliders, resizable handles and refusals. The catalogue is inspired by Bencho's sound library; the sounds themselves are our own, except the switch pair, which comes from Bencho's liquid toggle.

Mount <SoundEffects /> once at the root of your app and every component plays the right sound, in every base, with no changes to the components themselves. Sounds are off until you turn them on. Sounds and the pill radius also install in existing projects that keep their own style, because they only rely on attributes every component shares. Use data-sound to change or silence a sound, and playSound or useSound for your own interactions. See Sounds.

pnpmnpmyarnbun
bunx --bun fabricator-ui@latest add sounds
Copy

Pill radius#

Every corner comes from the --radius token. @fabricator/radius-pill sets it to 1.25rem, so controls become full pills and containers stay concentric with their items. See Sizes.

pnpmnpmyarnbun
bunx --bun fabricator-ui@latest add radius-pill
Copy

Surface base colour#

Every surface is now calculated from one base colour, held by --surface-hue and --surface-chroma. Both default to 0, the neutral ladder, so nothing changes until you set them. Set them and every level takes the tint, in light and dark mode, and text keeps its AA contrast. The Surfaces page has hue and strength sliders that preview both themes and generate the CSS.

pnpmnpmyarnbun
bunx --bun fabricator-ui@latest add foundations
Copy

Site settings#

The header, the docs sidebar and the docs side panel have a settings menu:

• Theme: light or dark.
• Sound: turns the component sounds on or off.
• Icons: Lucide (the default), Tabler, HugeIcons, Phosphor or Remix Icon, applied live to every preview.
• Radius: Rounded or Pill.
• Motion: Relaxed, Default, Snappy or Off, scaling every animation.
• Surface: Neutral, a tinted preset (Slate, Sand, Sage, Ocean, Indigo, Plum, Rose), or a custom tint from the Surfaces page, applied to the whole site.

Cursors#

Every Fabricator component now shows the cursor that matches what a press does:

• pointer on anything that activates: buttons, toggles, tabs, accordion triggers, checkboxes, radios, switches, select and combobox triggers, and every menu, select, combobox and command row. Labels of checkboxes, switches and radios get it too.
• text on input-OTP slots and the combobox chips row.
• grab, then grabbing, on slider thumbs and drawer handles; the slider track is pointer.
• not-allowed on disabled controls and slider thumbs, and on buttons that stay focusable while disabled.

The rules live in the style, so className still overrides them.

Search#

A new component: a round search button that springs open into the field as one object, takes focus, and closes again on Escape or when you leave it empty. It has default and outline variants, three sizes, a clear button, and controlled or uncontrolled open and value. See Search.

pnpmnpmyarnbun
bunx --bun fabricator-ui@latest add search
Copy

Motion speeds#

The three motion tiers are now tokens: fast 90ms, moderate 210ms and slow 290ms, with exits at 70ms, 160ms and 220ms. Components use the duration-fast, duration-moderate and duration-slow utilities (and their -exit forms), and --motion-scale scales every one of them at once. See Motion.

Collapsible#

Collapsible now looks and moves like Accordion: a title row with a chevron that turns on the spring, and content that opens and closes with the same height animation.

Checkbox and Radio Group#

Both are 18px with a quiet outline. Checked, they fill with the foreground colour, and an inverted check or dot pops in on the bouncy spring. They give a little when pressed, and focus is the 1px ring with an offset. The check wipes in on the bouncy spring and fades out when cleared; switching radios crossfades the dots.

Questionnaire#

Questionnaire now uses the library's own controls. Single-choice answers show the Radio Group mark and multiple-choice answers the Checkbox mark, both lit by the whole row, so hovering or pressing a row firms or presses its mark. The free-text answer is the Input, lined up with the question text, and shortcut keys are Kbd keycaps. Rows read like Field choice cards: foreground labels, a hover tint, and the active fill once chosen.

Status colours#

Info, success, warning and error each have a full palette: a solid for icons and fills, a text colour, a hairline border, and an eight-level tinted surface ladder that pairs with the surface shadows. Every pair meets WCAG AA in light and dark. See Surfaces.

• Alert: info, success, warning and error variants, and a contrast prop. low (the default) keeps the neutral panel and colours the icon; high tints the whole alert with a status hairline. See Alert.
• Badge: info, success, warning and error variants. See Badge.
• Toast and Sonner: success, info, warning and error icons take their status colour.

The new variants are additive: default and destructive are unchanged.

Smoother rendering#

• The foundations turn on grayscale font anti-aliasing, legibility and kerning, optical sizes, and no faux bold or italic, for every app that uses Fabricator components.
• Dialogs and alert dialogs are centered without a half-pixel translate, so their text stays sharp at every window size.

Removed#

• Right-to-left docs and demos. Fabricator UI is left-to-right only; the RTL guide, sections and demos are gone.
• Native Select is no longer part of the Fabricator library: it only restyled the browser's own <select>. Use Select. Blocks and examples that used it now use Select. Projects that keep their own style can still install it.

Fixes#

• Every kind of component has its own sound, and each family its own material: buttons knock, selection controls click, rows tick, tabs ring, menus pop, dialogs bloom, sheets slide and toasts chime by type. Primary and destructive buttons now sound different from the others in Base UI too.

• Scroll Area fades its edges where there is more to scroll.

• Sonner toasts (Radix, React Aria) now get the Fabricator style.

• Calendar and Date Picker: hovering the selected day no longer hides its number, and keyboard focus uses the 1px focus ring.

• Sidebar rows that open a collapsible now get the Fluid Hover highlight in every base.