rapidUI

Changelog

What changed in rapidUI, newest first.

Sheet: a drawer's className sets its width

· Pull request #43

Sheet sized each side with data-[side=…]: variants, which out-ranked a drawer's own classes, so every left or right sheet was w-3/4 sm:max-w-sm whatever its className asked for. Each side's size is now a plain class, so className overrides it.

Fixed

  • Sheet: SheetContent's className overrides the default width (w-3/4 sm:max-w-sm on left and right), e.g. sm:max-w-lg or w-full. The defaults are unchanged. Re-install Sheet; it now depends on class-variance-authority.

Sub Tabs: the selected tab stands out

· Pull request #42

The selected sub tab is now semibold and the others use the muted text colour, so it no longer stands out only by a white background on the grey track (about 1.1:1).

Changed

  • Sub Tabs: unselected tabs use text-muted-foreground; the selected tab adds font-semibold. Re-install Sub Tabs.

Fixed

  • Rapid theme: --muted-foreground is #686973 (was #757680), 4.7:1 on --muted instead of 3.9:1. Update the theme variables.

Accordion: choose the heading level

· Pull request #41

Accordion triggers always sat in an H3, which skipped a level when an accordion came straight after a page H1. A new headingLevel prop picks H2, H3 or H4 to fit the page outline; the default stays H3, so existing accordions are unchanged.

Added

  • Accordion: headingLevel on AccordionTrigger (2, 3 or 4; default 3). Re-install Accordion.

Calmer hovers, matching chevrons, top-aligned toasts

· Pull request #40

Outline buttons hover with a light tint instead of the strong secondary blue, so hover no longer looks like an open or selected state. Select and Combobox chevrons match, toasts keep their icon and close button at the top, and pressed editor buttons use the lighter tint.

Changed

  • Button: outline hovers with --accent and keeps its border; it sets text-foreground, so it stays readable inside coloured areas such as a navy sidebar. aria-expanded keeps the stronger secondary look. Re-install Button.
  • Rich Text Editor: pressed toolbar buttons (Bold, Italic, Link…) use the lighter --accent background; the icon colour is unchanged. Re-install Rich Text Editor.

Fixed

  • Select: the chevron uses text-muted-foreground like Combobox, instead of 50% opacity, which was below 3:1 contrast. Re-install Select.
  • Toast: the icon, action and close button align with the first line of text instead of the vertical centre. Re-install Toast.

Data Table: themes can colour the pinned header

The right-pinned header cell (actions column on a narrow, scrolling table) set its background inline, which overrode a theme's header colour and left a light cell in a coloured header row. The background now comes from a class, so theme header rules apply.

Fixed

  • Data Table: the pinned header cell takes the header colour a theme sets. Re-install Data Table.

Pagination: compact on small screens

· Pull request #38

Page numbers overflowed narrow containers on phones and cut off the first page and the previous button. With the new total prop, small screens show only the current page as "current / total".

Added

  • Pagination: PaginationLink takes total (page count). Pass it to every page link: below sm the active link shows "2 / 14" and the other page links and ellipses hide. Without total nothing changes. Re-install Pagination and Data Table.

Fixed

  • Data Table: the pagination footer no longer overflows on phones.

Tieto theme

· Pull request #37

A third theme next to Rapid and Neutral: Tieto's navy (#15245e), light blue and impact yellow on the same token names, from tieto.com's design tokens. 360 Collect offers it as a colour theme under Profile > Appearance; the docs site and Storybook switch to it from the brand menu. Installation

Added

  • Theme: styles/tieto.css and the tieto-theme registry item (shadcn init …/r/styles/tieto.json). Navy sidebar with a yellow accent on the active item, navy primary, 4px radius; dark mode keeps the charcoal canvas with navy only in the sidebar.

Changed

  • Brand switcher (site) and the Brand toolbar (Storybook) list Tieto; lib/site/brand.ts scopes any override theme with scopeBrandTokens(brand, css), replacing scopeNeutralTokens.

Menubar: a disabled trigger looks and behaves disabled

· Pull request #32

A disabled Menubar trigger looked like the others and still reacted to hover. It now matches disabled items.

Fixed

  • Menubar: a disabled MenubarTrigger is dimmed and ignores the pointer, like a disabled item. Re-install Menubar.

Separator: vertical separators are centred in their row

· Pull request #24

A vertical Separator given a height (h-4) sat at the top of its row instead of in the middle, and a plain self-center from the caller could not fix it, because the stretch came from a data-vertical: variant. Found in the 360 Collect form builder toolbar.

Changed

  • Separator: a vertical separator fills a row that has a set height (as before), gets a 16px line in a row that takes its height from its content, and stays centred when you give it h-*. Your h-*, w-* and self-* classes now replace the defaults instead of losing to them; drop any self-center or data-vertical:self-center you added as a workaround.

Fixed

  • Separator: vertical separators with a fixed height, such as the one in the Data Table faceted filter button, are centred instead of top-aligned. Re-install Separator.

Date Time Picker, Visual Time Picker and File Dropzone: named by their label, with the form error

Screen-reader fixes found in a full accessibility check of the 360 Collect public site: the pickers and the File Dropzone could only take a fixed aria-label, so a form field announced just "Date, button" without "required", the chosen value or its error (WCAG 1.3.1, 3.3.1, 4.1.2).

Added

  • Date Time Picker and Visual Time Picker: aria-labelledby and aria-describedby. With aria-labelledby the trigger is named by the label plus itself, so the chosen value follows: "Date of birth, required, 15 Oct 2026". The pop-up is named after the field instead of just "dialog".
  • File Dropzone: aria-labelledby, aria-describedby (added to its own hint and error) and aria-invalid, so a form can mark a required, empty upload invalid and link its error.

Fixed

  • File Dropzone: adding or removing a file is announced ("2 files") from an <output>; before, only the list below the drop area changed, which a screen reader does not notice. Re-install Date Time Picker, Time Picker and File Dropzone.

File Dropzone border contrast, Combobox chevron button name

· Pull request #22

Two accessibility fixes found on the 360 Collect public site after the Base UI migration: the File Dropzone border had 1.2:1 contrast (WCAG 1.4.11 needs 3:1), and the Combobox chevron button had no accessible name (WCAG 4.1.2).

Added

  • Combobox: triggerLabel on ComboboxInput, the accessible name of the chevron button (default "Show options").

Fixed

  • File Dropzone: the dashed border is border-input instead of border-border. A control boundary needs 3:1 against its background (WCAG 1.4.11); border was 1.2:1 on the dropzone background in the Neutral theme. The RDF apps had this before the Base UI migration. Re-install File Dropzone.
  • Combobox: the chevron button in ComboboxInput shows only an icon and had no accessible name, so a screen reader announced just "button". It is now named "Show options"; pass triggerLabel with your translation. Re-install Combobox.

Visible focus on File Dropzone, link errors in Rich Text Editor, Data Table background

· Pull request #21

Three fixes the RDF apps already had: keyboard focus on File Dropzone is visible again inside clipping containers, Rich Text Editor tells the user when a link is not a web address, and Data Table has its own background so it does not blend into a grey page.

Fixed

  • File Dropzone: the focus indicator is drawn inside the border (outline-2 -outline-offset-2) instead of as a ring outside it. A ring is clipped away by any parent with overflow: hidden, so keyboard users could not see that the dropzone had focus. The red error ring is inset for the same reason, and a focused dropzone with an error keeps a red outline instead of turning blue. Re-install File Dropzone.
  • Rich Text Editor: an invalid link shows "Enter a valid web address, like example.com" under the URL field (aria-invalid, aria-describedby, FieldError) and the popover stays open, instead of failing silently with a console error. A link also needs a host that looks like a domain (no spaces, at least one dot), so text like "not a link" is no longer accepted. Enter in the URL field adds the link, as clicking "Add link" does. Rich Text Editor now depends on Field. Re-install Rich Text Editor.
  • Data Table: the bordered frame has bg-background, so the rows no longer show the page through them on a grey (muted) page. Re-install Data Table.

Organization Switcher: collapse and expand

· Pull request #20

Organisations with sub-organisations can be collapsed and expanded in the Organization Switcher, as in the RDF Dashboard. Organization Switcher

Added

  • Organization Switcher: collapsible on OrganizationSwitcher and a new part, OrganizationSwitcherExpander. Re-install Organization Switcher, add collapsible next to searchable, and put <OrganizationSwitcherExpander value={organization.id} expanded={organization.expanded} hasChildren={organization.hasChildren} aria-label={…} /> last in each row. Everything is expanded at first; pass defaultCollapsed, or collapsed with onCollapsedChange to save the state. The list hands each organisation two new fields, hasChildren and expanded. Nothing changes for a switcher without collapsible.

Organization Switcher: the selected sub-organisation comes first

· Pull request #19

With a sub-organisation selected, the trigger names it on the main line instead of its top-level organisation. Organization Switcher

Fixed

  • Organization Switcher: with a sub-organisation selected, OrganizationSwitcherValue showed the top-level organisation as the main line and the sub-organisation in small text under it, so the trigger read as if the top-level organisation were selected. It now shows the selected organisation as the main line and the organisations above it underneath, e.g. "Building and Environment" over "Ekdalen Municipality". A top-level selection is unchanged. Re-install Organization Switcher; nothing else changes in the app.
  • Organization Switcher: a selected sub-organisation without a logo showed the first letter of its top-level organisation in the trigger's tile, so a collapsed sidebar pointed at the wrong organisation. The tile now shows the sub-organisation's own first letter, as the docs describe. A top-level organisation's logo is still used when the sub-organisation has none.

Theme colours instead of fixed colours

· Pull request #18

Number Input, Rich Text Editor, File Dropzone and Slider used fixed Tailwind colours (indigo, slate, white) and now use theme tokens, so they match the other components and follow the theme in light and dark mode. Number Input, Rich Text Editor and Slider had these colours before the Base UI migration too; File Dropzone used theme tokens in the RDF apps and lost them in the migration.

Fixed

  • Number Input: the border and hover are the same as other inputs (border-input, hover:border-primary) instead of indigo, the steppers use the default ghost hover and the value uses foreground. Re-install Number Input.
  • Rich Text Editor: links use text-primary instead of indigo, so they follow the theme. Re-install Rich Text Editor.
  • File Dropzone: the icon, "or drag here" and the hint use muted-foreground and foreground in light mode too, instead of slate, as they did in the RDF apps before the Base UI migration. Re-install File Dropzone.
  • Slider: the thumb is bg-background instead of white, so it no longer glows in dark mode. Re-install Slider.

Status colours from the design system

· Pull request #17

Status tints use the design system’s own background, text and border colours again instead of the status colour at 10%, so warning reads as orange instead of beige and every status looks the same in Badge, Alert, Banner, Attachment and Stat Card.

Added

  • Theme: info, success, warning and destructive each get -subtle (background), -subtle-foreground (text and icon) and -border tokens, in light and dark, for both the Rapid and Neutral themes, e.g. bg-warning-subtle text-warning-subtle-foreground border-warning-border. Re-install the theme; use these instead of opacity tints such as bg-warning/10 in your own screens.

Changed

  • Badge: info, success, warning and destructive use the new status tokens. Warning is light orange instead of beige, and every status has the same background strength in light and dark mode. Re-install the theme first, then Badge.
  • Neutral theme: info is blue instead of grey, so an info badge or alert no longer looks the same as default and secondary. primary stays black. Re-install the Neutral theme.
  • Alert and Banner: the status variants use the new -subtle, -subtle-foreground and -border tokens. Alert destructive now has a tinted background like the other statuses, and its body text stays in foreground instead of turning red. Re-install the theme first, then Alert and Banner.
  • Attachment (error state) and Stat Card (good and bad trends) use the new status text and tint tokens. Re-install the theme first, then Attachment and Stat Card.

Fixed

  • Badge: the destructive badge text had a contrast of 3.9:1 on its tint in light mode; it now meets 4.5:1.

Organization Switcher

· Pull request #15

A new component for the top of the sidebar: it shows which organisation the user works in and lets them switch, with optional sub-organisations, search and favourites. Organization Switcher

Added

  • Organization Switcher, composed from OrganizationSwitcherTrigger, OrganizationSwitcherValue, OrganizationSwitcherContent, OrganizationSwitcherList and OrganizationSwitcherItem. Pass a flat list as items and the selected id as value. Give a sub-organisation, such as a department, the id of its organisation as parentId; the list hands you each organisation with its depth and path for the item, and the trigger shows the organisation with the sub-organisation below. For long lists, add searchable with OrganizationSwitcherSearch and OrganizationSwitcherEmpty. In a sidebar, pass render={<SidebarMenuButton size="lg" />} to the trigger. For favourites, pass the saved ids as favorites and save them in onFavoritesChange, put OrganizationSwitcherFavorite after each item and list the favourites with OrganizationSwitcherFavorites; this needs searchable. It replaces a hand-built DropdownMenu in the sidebar header.

Accessibility and layout fixes

· Pull request #11

Six fixes found while migrating the RDF apps: Spinner and Alert announcements, a FileInput that can be labelled, the collapsed Sidebar, the width of dropdown menus and a ScrollArea that scrolls in a flex column.

Changed

  • Empty: EmptyTitle takes as (h1–h6), so an empty state that is the whole page, such as a 404, gets a real heading. Re-install Empty.
  • Select: the trigger fills its container by default (w-full), like Input and the previous Select, so a Select in a form lines up with the fields around it. Re-install Select. Give a trigger that should hug its content, such as a filter in a toolbar, className="w-fit" or a fixed width.
  • Alert: the default role now follows the variant. destructive keeps role="alert"; default, info, success and warning get role="status", so screen readers no longer interrupt for notes that are on the page at load. Re-install Alert, then add role="alert" to any non-destructive alert that is urgent and has to interrupt, such as a session about to end, and role="note" to static guidance that should never be announced. An explicit role still wins, as before.
  • DropdownMenuContent: the menu is sized by its content and is never narrower than the trigger, instead of always taking the trigger width. Re-install Dropdown Menu; menus with their own width class such as w-56 keep it, and you can remove width classes that were only there to stop labels from wrapping. Menubar menus build on the same content and follow it.
  • Internal clean-ups with no API or visual change in Calendar, Carousel, Chart, Data Table, Direction, Field, File Dropzone, Form, Full Calendar, Message Scroller, Number Input, Sidebar, Slider, Time Picker, Toast, Toggle Group and the useFile hook: memoised context values, stable list keys, read-only props and helpers moved out of components. The exported ToastTypeLabels type is written differently but accepts the same objects, the built-in toast types plus your own. Nothing to change in an app; you get them the next time you re-install.

Fixed

  • Data Table: the registry now installs @tanstack/react-table@^8.21.3. The version was not pinned, so new installs got TanStack Table 9, which the component is not written for and does not type-check against. Re-install Data Table, or run npm install @tanstack/react-table@^8.21.3 in an app that already has version 9.
  • Every component now installs its npm packages at the version range rapidUI is built and tested with (@base-ui/react@^1.8.0, lucide-react@^1.48.0, react-day-picker@^10.0.1 and so on) instead of the latest release, so a new major version of a package can no longer break a fresh install. Nothing to change in an app; a re-install may move a package to the pinned range.
  • Card: the edge is a real border instead of a ring, so it is no longer clipped when a card sits flush against a scrolling container. Re-install Card. The content box is 2px narrower; border classes on a card (border-dashed, border-primary/50) now change that edge.
  • Button Group: a filled button between outlined ones fills the full height of the group. Re-install Button Group.
  • Switch: the thumb sits 2px inside the track instead of touching its outline. The switch is 36×20px (28×16px for sm). Re-install Switch.
  • Card: a card in a height-limited flex column (a page layout with h-full, for example) no longer shrinks below its content and clips it, so the page scrolls again. Re-install Card. Pass min-h-0 when a card should shrink and scroll inside.
  • Spinner: aria-hidden now removes role="status" and the label, so a spinner next to visible text is not announced as well. Re-install Spinner; pass aria-hidden inside buttons and badges with text, and pass aria-label with a translation where the spinner stands alone ("Loading" is only the English default).
  • FileInput: accepts id, aria-label, aria-labelledby, aria-describedby and aria-invalid and forwards them to the button that opens the file picker. Re-install File Input and label it with <FieldLabel htmlFor={id}>; its own size error is added to aria-describedby.
  • Sidebar: with collapsible="icon", the first pixels of a menu button label no longer show next to the icon, and the logo or avatar in a size="lg" button is centred in the 40px button. Re-install Sidebar; no changes are needed in the app.
  • DropdownMenuContent: a menu opened from an icon button was 128px wide and wrapped its labels.
  • ScrollArea: the root has overflow-hidden again, as it had on Radix, so <ScrollArea className="flex-1"> in a flex column scrolls instead of growing with its content. Re-install ScrollArea; you can remove overflow-hidden or min-h-0 that you added to it as a workaround.
  • Breadcrumb: BreadcrumbSeparator and BreadcrumbEllipsis no longer set role="presentation" next to aria-hidden="true". The role was redundant on a hidden element and accessibility checkers flagged it; screen readers skip both as before. Re-install Breadcrumb.

Status variants

· Pull request #10

Badge and Alert get info, success and warning variants, and Button gets ghost-destructive, the variants the RDF apps used before.

Added

  • Badge: info, success and warning variants for case and application status. Re-install Badge and replace tints set through className, such as bg-primary/10 text-primary, with variant="info". Keep the text label, and an icon where you can, so status never relies on colour alone.
  • Alert: info, success and warning variants. Re-install Alert and replace custom className tints (bg-primary/5, bg-muted/50, bg-destructive/5) with the matching variant. The body text stays in foreground; only the border, background and icon take the colour.
  • Button: a ghost-destructive variant for a delete beside other actions, such as Edit, Duplicate and Delete on a case row. It looks like ghost at rest and turns red on hover and focus. Re-install Button to use it, and give icon-only buttons an aria-label.

Base UI

· Pull request #9

rapidUI moves from Radix to Base UI, with a new size scale and a theme switch on this site. Nothing changes in an app until it re-installs its components. Migrating to Base UI

Added

  • Full Calendar: month, week and day views with a time grid, for apps that show and schedule events.
  • Toast, built on Base UI Toast, with info, success, warning and error types, actions and loading states.
  • Stat Card for key figures with a trend, Description List for key–value facts, and Banner for page-wide messages.
  • --success and --warning theme tokens (with -foreground) in Rapid and Neutral, matching Dashboard and 360 Collect. Toast, Banner and Stat Card use them.
  • Combobox with multiple selection (chips), built on Base UI Combobox.
  • A theme switch in the site header that shows every page and example in Rapid or Neutral.
  • The Migrating to Base UI guide.

Changed

  • Every component is built on Base UI instead of Radix. asChild is replaced by the render prop.
  • Combobox uses the new shadcn API (ComboboxInput, ComboboxList, items).
  • Drawer is built on Base UI Drawer instead of vaul.
  • New size scale: buttons, fields, tabs and navigation are 40px by default, 32px for sm/xs and 48px for lg. Small controls keep a clickable area of at least 24px.
  • Dialogs and sheets scroll at high zoom, Drawer moves focus into the drawer, and Slider thumbs and Progress are named for screen readers.
  • The destructive badge uses a lighter red in dark mode for better contrast.
  • Calendar follows shadcn's default look: 36px days, a neutral range between the start and end dates and a solid focus ring. Weeks still start on Monday.

Removed

  • MultiSelect: use Combobox with multiple.
  • The radix-ui and vaul dependencies.

Fixed

  • The Message Scroller "scroll to end" button is centred again (an unsupported inset-s-1/2 class left it at the start).
  • Avatar draws its outline only over photos, and MessageAvatar no longer adds its own background, so initials show one ring, centred.
  • Table rows no longer paint their own background, so a table inside a rounded border keeps its corners. Give that border overflow-hidden so selected rows are clipped too.
  • TimePicker content is vertically centred.
  • Enter works on the RichTextEditor toolbar buttons.

rapidUI

· Pull request #8

The registry becomes rapidUI: a new name and logo, this docs site with llms.txt, and a sync with the latest shadcn/ui.

Added

  • This docs site, with live examples, install commands and /llms.txt + /llms-full.txt for AI agents.
  • 19 components from shadcn: Aspect Ratio, Attachment, Bubble, Carousel, Direction, Drawer, Empty, Field, Hover Card, Item, Kbd, Marker, Menubar, Message, Message Scroller, Native Select, Navigation Menu, Questionnaire and Spinner.
  • TimePicker, a time field in the style of Input, and a visible read-only style for form controls.
  • The Neutral theme alongside Rapid.

Changed

  • Sizes, radius and structure follow the latest shadcn/ui; the rapidUI colours stay. The theme uses only shadcn CSS variables.
  • Combobox V2 is renamed Combobox.
  • Examples show realistic public-sector content.
  • Storybook runs locally (bun storybook) and is no longer deployed.

Removed

  • Combobox (v1), Country Picker, Full Calendar, National ID Input, Phone Input, Required Mark, Signature, Date Range Picker, Sonner, Chat, Video Player, Action Button, Unsaved Changes Dialog and the dashboard-01 block.