Changelog

1.4.2 — 16 October 2026

Alert can run across the top of a page or a card and close itself, and a link can stay underlined. Update Alert, Button and the kit's stylesheet in the same step, and every item that shows a link Button; Alert now installs Button and Motion with it.

• Alert:
  • layout="banner" runs across the top of a page, above its header, for something that concerns the whole page. It takes its tone's tint across the full width, with a hairline below it. See Page banner.
  • layout="band" is the same band at the top of a Card, directly under its header, across the card's full width. See Card band.
  • Their action is a text link in the primary text color, underlined: at the end of the row, in AlertAction (the standard), or at the end of the sentence.
  • A banner and a band put the icon, the text, the action and the close control on one row while their own width allows it. Below 32rem of that width, the icon and the close control sit on the title's line and the action goes under the text. Only the icon carries the tone; the title stays in the primary text color.
  • AlertClose adds the kit's ghost close control. The Alert glides up and fades out with the kit's motion, and focus moves to the next element after it instead of to the page. open, defaultOpen and onOpenChange let the application decide how long it stays closed. See Closing.
• Button: a link is underlined at rest now and fades slightly on hover and press, and a text Button underlines on hover and press. Every link Button in the kit shows its underline, among them the names in an Activity Feed and the links of the Modal blocks. A link in a sentence keeps its words together and moves to the next line as a whole. See Button.

1.4.1 — 16 October 2026

Hover and pressed fills are lighter, and they follow two shared ladders instead of a value per component. Update the kit's stylesheet and the Table in the same step.

• Rows and ghost controls: ghost Buttons, Resource List rows, the Sidebar and navigation rows and Table rows share one ladder. In Light a row draws 3 % on hover, 6 % pressed and 5 % while it is selected or current; in Dark 3.5 %, 7 % and 6 %. They drew up to 8 % on hover before (12 % in Dark), and the Sidebar's workspace row had values of its own. The tokens are --sp-rw-interaction-hover, --sp-rw-interaction-pressed and --sp-rw-interaction-selected. See Resource List, Sidebar and Table.
• Default and outline Buttons: 4 % on hover and 7 % pressed in Light, 6 % and 10 % in Dark, from --sp-rw-interaction-on-fill-hover and --sp-rw-interaction-on-fill-pressed. The outline Button drew 8 % and 10 % before (12 % and 16 % in Dark). See Button.
• Badge: a badge that is a link or a button tints 6 % of its text color on hover instead of 12 %. See Badge.
• Select triggers, Toggles, Accordion triggers, Checkboxes and menu items keep their 4 % on hover and 8 % pressed.

1.4.0 — 16 October 2026

Siteplane UI 1.4 adds the settings an application asked for while it built a website overview with 1.3, and fixes what a look at the kit's styles in the browser's developer tools found. Every new setting defaults to the look of 1.3. Two looks change: the Dashboard Shell's top bar now stays in view, and the secondary Badge is lighter. Update every Siteplane UI item you use in the same step.

• Dashboard Shell: the top bar stays in view while the content scrolls. From the sidebar's breakpoint up, the shell is as tall as the window and only the main area scrolls. On a phone the page scrolls under the bar, so the browser can still collapse its toolbar. stickyHeader={false} lets the page scroll as a whole, as in 1.3. See Dashboard Shell.
• Sidebar:
  • While the sidebar collapses or expands, the header's mark keeps its place, and its name fades with the row labels.
  • Two-line rows, such as a workspace switcher with its plan, change their height at the sidebar's pace, so the rows below no longer jump.
  • Without a layout the content takes the primary surface, as it does in the push and inset layouts, so the sidebar and the content never share one grey.
  • In the examples, the account stays at the bottom of the collapsed rail.
  • See Sidebar.
• Badge:
  • secondary is lighter and translucent, mixed from the kit's tokens: the muted grey at 60 % in Light and 6 % of the text color in Dark. It reads on a white card, on a tinted row and on a dark card. See Badge.
  • The default and outline badges draw their hairline on their edge, so no band of their fill shows outside the line.
• Card:
  • A card follows the provider's density, or its own density prop: compact cards have an inset of 16 px instead of 20 px. See Card.
  • Three tokens set the inset: --sp-rw-card-inset for all sides, and --sp-rw-card-inset-block and --sp-rw-card-inset-inline for the top and bottom and for the sides. See Card.
  • CardMedia takes tone="neutral", which draws a bare icon in the secondary text color instead of the accent. See Card.
• Page Header and Metric Card: iconTone="neutral" draws their icon in the secondary text color. See Page Header and Metric Card.
• Area Chart and Line Chart: height="fill" with minHeight, as on the Bar Chart. The chart takes the height its container gives it, such as a grid cell beside a taller card. See Area Chart and Line Chart.
• Resource List:
  • ResourceListHeader heads a list. In a divided list, the line below it is drawn like the lines between the rows. See Resource List.
  • In a divided list with clickable rows, the lines are as wide as the rows' hover surface.
  • A title or description with an element inside, such as a quieter suffix, keeps its full text in title. A list that a Server Component renders now hydrates without a mismatch.
  • A list follows only its own density, so a compact Card or provider around a list set to default no longer shrinks its rows.
• Filter Bar: FilterBarTabs takes grow={false}. The bar is then as wide as its tabs instead of taking the rest of its row, so its surface ends after the last tab and the filters keep their place at the end of the row. See Filter Bar.
• Tabs: a tab bar with an adjacent action, such as FilterBarTabs, places its selection on the selected tab inside a Dialog that zooms in while it opens. It used to lie a few pixels beside the tab.
• Styles:
  • Three rules referred to tokens that the kit never defined: the text color of a highlighted Drawer menu row and of a highlighted option, and the size of the Calendar heading icon. They now use defined tokens or are gone, with no visible change.
  • The selection rule of the date input no longer shares a selector list with selectors that Chrome rejects.
  • The kit's stylesheet no longer generates utility classes from its test files.
  • The structural rules of Card, Resource List, Group, Input Group, Switch, Alert and Navigation Menu moved from long utility classes into the kit's stylesheet, and no part sets a property both in a rule and in a class. The look is unchanged, and the browser's developer tools show short, named rules. Take the updated stylesheet together with the updated components.

1.3.1 — 15 October 2026

• Sidebar header: in the layout with the logo above the workspace, the logo's mark expands the collapsed rail, so the expand control shows in the first row, where the collapse button was. The workspace mark keeps opening the workspace menu on the rail. In the examples, a workspace with a logo shows it in its mark, and one without shows its initial. See Sidebar.

1.3.0 — 15 October 2026

Siteplane UI 1.3 makes copying a component of its own. Code, Color Picker and the ModalBlock fields copied through buttons of their own; they now share Copy Button, and the agent skill sends agents to it. Update every Siteplane UI item you use in the same step.

• Copy Button: a new component that copies a value, as an icon or with a label. The icon turns into a check, the tooltip reads "Copied", and screen readers hear the result. The value can come from a function, also one that returns it later. useCopyToClipboard and copyToClipboard copy for a menu item or another control. See Copy Button.
• Code, Color Picker and ModalBlock copy through Copy Button, so every copy action in the kit looks and announces the same. An icon-only copy shows a tooltip, and a cross when the copy fails.
• Links: the text of a link Button can be selected and copied like any link. Other variants keep their label from being selected. See Button.
• Tooltip: a text that changes while the tooltip is open, such as "Copied", keeps its line.
• Agent skill: every interactive control comes from the kit. Before an agent adds a button, a toggle or an icon action, it searches the catalog for the verb, such as copy, reveal or close, and uses lucide icons only as glyphs inside kit parts. A table of small actions names the part for each.

1.2.0 — 15 October 2026

Siteplane UI 1.2 comes from two tests of 1.1.0. A stress page mounted every part at once with long, unbroken and right-to-left content. An application built a website overview with the kit and recorded every place where it needed its own CSS. 1.2 fixes what both found and adds the parts and settings the application had to build itself. Every new setting defaults to the look of 1.1. Two changes apply everywhere: text renders with grayscale antialiasing, and the shadcn-compatible text colors take the kit's text tokens. Update every Siteplane UI item you use in the same step.

Right to left

• Sidebar and Dashboard Shell: side is the inline start or end, so in a right-to-left page a left sidebar sits on the right. Its gap, rail, menu badge, group action and mobile sheet follow. See Sidebar.
• Switch and Stepper: the Switch thumb travels toward the inline end, and the Stepper connector runs under its markers.
• Breadcrumb and Pagination: the chevrons mirror. Pagination takes labels for its words. See Pagination.
• Date and time fields: Date Field, Date Range Picker, Time Field and Date Time Picker lay out their segments in the locale's direction, so an en-US date reads the same in a right-to-left page. Their buttons stay at the page's inline end.
• Pages without a language: every kit rule for right to left also matches a page that only sets dir="rtl".

Long values and counts

• Tag and Badge: a long label ends in an ellipsis where its container leaves no room, and keeps its full text in title. A filter row or a feed no longer runs past its column.
• Combobox: a chip with a long value ends in an ellipsis inside the field, keeps its remove button and carries the full value in title.
• Button: the label of a Button stays on one line and ends in an ellipsis where the Button meets the edge of its space. While it is cut, it carries its full text in title. A multiline Button wraps as before. See Button.
• Code, Field and Label: inline Code and field labels and descriptions wrap a long unbroken value.
• Counts: count Badges and the Avatar Group count grow as pills. AvatarGroupCount takes count and shows large numbers in compact notation, such as +1.3K, with the exact number for screen readers. See Avatar Group.
• Number Field: a long value ends in an ellipsis at rest and scrolls to the caret while it has focus.
• Tabs: a tab list that overflows shows a scroll button at each edge while more tabs wait that way. On a touch screen the list scrolls by swiping and shows no buttons. The selected tab scrolls into view. See Tabs.
• Menus: a popup is at most 20rem wide, and its rows truncate.
• Sidebar labels and Breadcrumb: labels truncate with an ellipsis, and the workspace chevron stays in its row. The current Breadcrumb page truncates and keeps its text in title, and a trail shrinks inside a grid or flex parent.
• Meter and Progress: labels wrap a long word, and a ProgressCircle at 0 shows no dot.
• Pagination: a page link grows with long numbers instead of filling its square.
• Page Header: actions that don't fit beside the title wrap below it, decided by the header's own width. The title keeps at least 20rem. See Page Header.
• Metric Card: a long figure wraps before the menu button, and a long title wraps inside the card, or ends in an ellipsis after the lines titleLines sets, with the full title in a tooltip. A card without a change shows no empty Badge.
• Bar List: long labels stay on one line with an ellipsis and keep their full text in title.

Hydration and focus

• 12-hour times: a prerendered Time Field with AM and PM no longer fails hydration. Node and browsers write different spaces in formatted dates and times, and the kit now writes plain spaces in the Time Field, Date Time Picker, Date Field, Date Range Picker, Calendar, Date Picker, Task Calendar and the chart formatters.
• Dialog: when the first field starts out of view, the popup takes focus, so a long dialog opens at its top. An initialFocus you pass still wins. See Dialog.
• Table: with no rows, the select-all checkbox is unchecked and disabled.
• Fieldset: a Fieldset stretched to a taller neighbour keeps its rows at the top.

Overlays

• Tooltip: a tooltip is at most 18rem wide, so a long text wraps into a compact block and an unbroken word breaks. See Tooltip.
• Select: the scroll arrows of a long list are strips inside the panel that fade into the list, no longer separate pills.
• Combobox: with chips, an item keeps the height of an item in a one-line field, however many rows of chips the field holds.
• Dialog, Sheet, Drawer and Alert Dialog: a header that is the popup's last part, such as a title alone, keeps as much space below its text as above it.

Charts

• Curve: Line and Area Charts draw a monotone curve by default, which never swings past the data. curve="smooth" keeps the earlier curve. See Line Chart.
• More than five series: the brand shades spread over up to eight series, and the categorical palette gains --chart-6 to --chart-8. Both start over from the ninth series. See Chart colors.
• Bar Chart: valueLabels writes the values above the bars, highlight marks one category with a soft hatched fill, such as a day still running, and height="fill" takes the height of its container down to minHeight. See Bar Chart.
• Bar List: a row takes a quieter second line through description, and heading adds a row of column names. See Bar List.
• Pie Chart: centerValue, centerLabel and centerFormat fit a figure into the donut's hole, in compact notation when it doesn't fit in full. See Pie Chart.
• Legends and tooltips: a chart legend never grows wider than its card: long labels wrap, a long word breaks, and each dot stays on the first line of its label. The chart tooltip is at most 18rem wide and wraps a long label, so it stays beside the point it describes.

New parts

• Data List: a new component for label and value rows, horizontal or vertical, with optional dividers. See Data List.
• Truncate: a new component that cuts text after one line, after a number of lines or at a width a class sets, and shows the full text in a tooltip while it is cut. See Truncate.
• Card:
  • CardMedia leads a header with an avatar or an icon.
  • CardTitleMeta sets context beside the title.
  • A header above a Separator has the same space above and below its title.
  • An action beside a title alone keeps the header as tall as a header without one, so cards side by side keep one header height.
  • --sp-rw-card-inset sets the padding of every part.
  • See Card.
• Resource List: variant="divided" draws a line between rows. See Resource List.
• Timeline: TimelineNow marks the present between events. See Timeline.
• Badge: profile="status" shows the status dot and its text without a frame. See Badge.
• Sidebar: SidebarMenuButtonText, SidebarMenuButtonTitle and SidebarMenuButtonDescription make a row with a name and a quieter detail.
• Sidebar header: SidebarBrand puts the app's logo in a row of its own, beside the collapse button, and shows only its mark on the collapsed rail. The Sidebar and Dashboard Shell pages show three header layouts: the workspace on top, the logo above the workspace, and the logo alone. See Sidebar.
• Metric Card: the variants figure, figure-large and figure-inline show figures without a card. See Metric Card.
• Page Header: variant="section" is a heading over a group of cards, with an optional icon, count and actions.

Theming

• Font weights: --sp-rw-font-weight-title, --sp-rw-font-weight-label and --sp-rw-font-weight-strong carry the weights of titles, labels and semibold text, and --sp-rw-badge-font-weight the Badge's. Button's --sp-rw-button-font-family, --sp-rw-button-font-weight and --sp-rw-button-letter-spacing are documented. The typeface table lists the weights for each typeface. See Typeface.
• Text on the accent: --sp-rw-fg-on-accent colors text and checks on accent fills, so a light brand color can take dark text while destructive fills stay white. See Override component colors.
• Antialiasing: the kit sets grayscale font smoothing on the root. On macOS, text draws slightly thinner than before.
• One set of text colors: text-foreground, text-muted-foreground and the other shadcn-compatible text colors take the kit's text tokens. In Light, text that used them moves from 26.9 % to the kit's 10 % lightness. Among it are form labels, Fieldset legends, Resource List titles, Combobox and Autocomplete values, the current Breadcrumb page, Code, Toasts and Notifications. Dark is unchanged. See Text colors.

Installation

• Updating: npm writes ^ ranges when shadcn add installs dependencies; set save-exact=true in .npmrc to keep the kit's exact versions. See Updating.
• Strict TypeScript: the kit compiles with noImplicitOverride, exactOptionalPropertyTypes and noUncheckedIndexedAccess.

1.1.0 — 14 October 2026

Siteplane UI 1.1 comes from a test of 1.0.0 in a real application. Every example was installed into a new Next.js app, built for production and served under a strict Content Security Policy. The examples were then measured before and after hydration, under CPU throttling and frame by frame. No documented API changes. A renamed part keeps its old name as a deprecated alias until 2.0. Reinstall every Siteplane UI item you use in the same update, because the 1.1 stylesheet styles the parts through classes that components from 1.0 don't render.

Content Security Policy

• Installation: the page gives the complete Next.js setup for a nonce-based policy, src/proxy.ts and src/app/layout.tsx.

  • The policy adds style-src-attr 'unsafe-inline'. Base UI, React Aria and the kit set positions and visually hidden styles in style attributes, which a nonce cannot cover.
  • Without the directive, a Checkbox shows a second, native checkbox and Slider thumbs sit at the start of the track.
  • See Content Security Policy.

• SiteplaneUIProvider: with a nonce, the provider passes it on:

  • to React Aria, through a <meta property="csp-nonce">;
  • to the kit's lists and swaps that use Motion's popLayout.

  It turns off Base UI's <style> elements, and their scrollbar rules ship in the kit stylesheet. Its display: contents comes from the stylesheet.

• No inline scripts or styles:

  • Tabs show their selection before hydration through CSS.
  • Animated Buttons, Icon Morphs and Theme Toggles ship their rules in animated-buttons.css, icon-morphs.css and theme-toggles.css. Reinstall these items to get the files.

• Static styles in CSS: the Spinner's angles and delays and the Sidebar and Dashboard Shell widths come from the stylesheet, so a policy that blocks style attributes keeps the layout. A className on SidebarProvider or DashboardShell can now set the widths, as style can.

Motion

• Lists and reveals: list items and reveal panels come and go as Web Animations, and list items glide with a translate on the compositor. A height that follows, as in MotionSwap, Tabs and wrapping lists, is a CSS transition on the same tokens. Each starts in the frame after the one that shows the change, so a slow first frame no longer shows most of the movement at once. Reduced motion stays instant. See Motion.
• Moving sets: a set that moves in the same update, such as a centred Tag Group that loses a tag, glides from where its items were seen. The item that leaves fades where it was.
• First frame: a list whose items arrive one render after it, as a Tag Group's do, shows them at rest when it mounts. Before, its height grew in from zero.
• Combobox: chips rendered through ComboboxValue fade in when added. A removed chip fades out where it was while the chips after it glide. The combobox item no longer installs motion.
• Measuring only on change: Pagination measures its indicator when the list resizes or the current page changes. The Popover measures only on a flip, and MotionNumber only when a digit or roll changes.

Components

• Alert: the success, warning and error rims follow their status colours, so overriding a status colour reaches the rim. The look is unchanged.
• Button: on an accent, destructive, inverse or glass Button, the copy check takes the Button's text colour instead of green. In Dark, the text of a pressed muted-accent Button keeps 4.5:1 contrast on a card.
• Calendar: with two months, a month set outside the visible months shows first, also an earlier one.
• Charts:
  • Hydration: Bar, Line and Area Charts draw their plot once they have measured their width. The server HTML holds the plot's box at its full height, the legend and what screen readers read. No chart shows a plot laid out for 640 px before hydration. Without JavaScript the plot stays empty.
  • Labels: charts take labels for the words they give screen readers.
  • Focus stop: it carries a hint that the arrow keys move between the data points.
  • Pie Chart: its empty track takes the neutral of an empty share.
• Date Range Picker: iconMode="none" leaves the range to typing, without the calendar button. incompleteLabel sets the error of an incomplete range. See Date Range Picker.
• Detail Drawer: the popup part is DetailDrawerPopup, like every other overlay's popup. DetailDrawerContent keeps working as a deprecated alias until 2.0. See Detail Drawer.
• Drawer Menu: DrawerMenuRadioItem takes indicatorPosition. See Drawer.
• Fieldset: new FieldsetDescription part, read with the group by screen readers. See Fieldset.
• File Type Icon: no longer repeats an id when a page shows several icons.
• Filter Bar: FilterBarActiveFilters takes open. The row of applied filters and the space above it reveal and collapse. See Filter Bar.
• Form and Field: a form reset clears Field errors and validity and the errors passed to Form.
• Input Group: insetEnd keeps the end of the input or textarea clear for an action placed over it. See Input Group.
• Labels for other languages: incompleteLabel on Date Field, Time Field, Date Range Picker and Date Time Picker, labels on Code Block, Color Picker and the charts, and dismissLabel on ToastProvider.
• Menus: a switch row's track has the standalone Switch's 3:1 edge. A disabled row shows the not-allowed cursor.
• Navigation Menu: a render prop on a link or trigger replaces the element inside its Button, and the Button keeps its styling. See Navigation Menu.
• Overlays: the corner close of Dialog, Sheet, Drawer, Popover, Toast and Notification rests in the muted text colour.
• Progress: the fill follows the accent, so a brand override recolours Progress, Meter and File Upload. The default colour is unchanged.
• Sidebar: a group label rendered as a disabled button fades like a disabled label.
• Slider: SliderValue is 12 px at every size; at md it was 14 px.
• Table:
  • A click, a press, or Enter or Space on a control inside a row stays with that control.
  • With selectionTrigger="checkbox", a press on a row runs its onAction also while rows are selected.
• Tabs: the dark styles of the list, rail and selection also apply when .dark or data-theme="dark" is set on <html>.
• Textarea: new maxLines stops the growth at a number of lines, after which the text scrolls. See Textarea.
• Titles: EmptyTitle takes level, and Page Header, Settings List and Inline CTA take titleLevel, to set the heading level. See Empty State.
• Tooltip: TooltipPopup forwards disableAnchorTracking. Chart tooltips use it, which ends WebKit's "ResizeObserver loop" errors.

Siteplane UI Pro

• Modal Block:
  • The footer date range is a Date Range Picker.
  • ModalDateRangeFields shows its presets as the Calendar's shortcuts, and ModalDateRangePresets is deprecated.
  • The assistant's message keeps clear of the dictation button.
  • The account rows end with the check.
• Metric Card: in the chart-frame layout, the figure keeps clear of the menu button.
• Page Header and Header Navigation: both lay out by their own width instead of the window's.

Styling hooks

• Part classes: every part renders a class named after its data-slot, such as sp-button or sp-select-trigger, and the bases that several parts share carry an sp-base- class, such as sp-base-toggle. The kit's rules select these classes. A browser files all data-slot rules under the attribute's name, so it checked each part against every one of them.
  • On the landing page, a style recalculation takes 54.5 % less time.
  • On a page with every example at 4× CPU slowdown, a theme switch takes 160 ms instead of 392 to 416 ms, and a size switch 256 ms instead of 416 to 456 ms.
  • The data-slot attributes stay documented, and rules on them keep working. The classes are internal, like the kit's other class names.
• sp- names: the kit's internal classes, keyframes and custom properties that began with siteplane- now begin with sp-, like the documented tokens. CSS that targets one of them needs the new name. The stable hooks are the parts' data-slot attributes and the documented tokens.
• Updating: components installed from 1.0 don't render the part classes, so the 1.1 stylesheet doesn't reach them. Reinstall all the Siteplane UI items you use in the same update. See Updating and manual installation.

Docs and examples

• Examples:
  • Portraits load from https://ui.siteplane.io/avatars/, so an installed example shows faces instead of initials.
  • Date examples never show the day the page was built as today.
  • Examples follow the example widths.
• Installation: the Siteplane UI Pro section says that Pro is free for now, and the license key goes into .env.local.
• Docs pages: the package manager switch, the API tables and the breadcrumb use the kit's Toggle Group, Native Table and Breadcrumb. A missing /source/… or /examples/… address shows the normal 404 page.

Docs — 13 October 2026

• Getting started: The page starts with a prompt for your coding agent. Copy it and send it to Claude Code, Codex, Cursor or another agent in your application directory, and the agent sets up the kit by the installation guide and installs the skill. Show prompt unfolds the prompt, so you can read it first. The manual steps follow under Set up by hand. See Set up with your agent.
• Code blocks: Plain-text code blocks keep their blank lines.
• Pro: Every Pattern page and the Patterns overview link Siteplane UI Pro to the Pro page with the prices. A Pattern page still links the Pro license for its source.

1.0.0 — 11 October 2026

Siteplane UI 1.0 makes the documented API stable. The components, parts, props, types and tokens that these docs describe keep working in every 1.x release. From now on, when a 1.x release renames something, the old name stays as a deprecated alias until 2.0, and your editor names the replacement. Exports that the docs don't describe are internal and can change. See Stability and deprecations.

To make that promise, 1.0 gives each idea one name across the kit and removes the earlier names that 0.6.0 still accepted. Most old names are removed and need the changes below, grouped by component. Only the names marked as deprecated aliases keep working, until 2.0. Installed source changes only when you install again, so you decide when 1.0 reaches your application.

Breaking changes

• Sizes: size="default" → size="md", the provider's controlSize="default" → controlSize="md", and size="icon" → size="icon-md". The old names are removed. SiteplaneControlSizeInput → SiteplaneControlSize and WithControlSizeAlias<T> → T, and normalizeControlSize is removed. See Providers.
• Radius: radius="default" → radius="md" and SiteplaneRadiusInput → SiteplaneRadius. The old names are removed, and resolveRadius and useResolvedRadius no longer map "default". The provider's radius now sets the corners of every component instead of only the rounded-* utilities. At the default md the components keep their corners, while rounded-control, rounded-surface and rounded-overlay now follow the provider radius too: 8, 12 and 16 px at md instead of a fixed 6, 10 and 14 px.
  • Without a provider the kit uses the md base, so Frame, Resource List, Code and Kbd Group corners are 2 px rounder than in 0.6.3.
  • An --radius from your own stylesheet now scales every kit corner, at the root and inside md providers. The 0.5rem of a shadcn theme turns an 8 px Button corner into 6.4 px; the shadcn v4 default of 0.625rem changes nothing.
  • The provider no longer writes inline --radius* variables, and a :root override of a role radius token gives way inside a provider whose radius is not md. The kit no longer declares --sp-rw-radius-badge, so a badge falls back to the xs radius; setting it on :root still works, now at every provider radius.
  • These variables are removed: --sp-semantic-radius-control, --sp-semantic-radius-surface, --sp-semantic-radius-overlay, --sp-primitive-dimension-radius-md, --sp-primitive-dimension-radius-lg, --sp-primitive-dimension-radius-full, --badge-sm-radius, --checkbox-radius and --kbd-radius.
• Dark mode: The kit stays light until your application sets .dark or data-theme="dark". In 0.6.3, some tokens followed the operating system's dark preference while the rest stayed light, so an application without a theme rendered half dark. Set the theme on your root element, as the Next.js and Vite guides do. See Theming.
• Button: surface is removed, and so is bleed; use className="self-stretch" to stretch a button. profile takes default, avatar, field-action, inline and navigation-link. The other profiles and profileMode are internal, and profileTone (muted, accent or destructive) applies to inline only; ButtonProfileTone no longer includes chart-1 to chart-5. ResponsiveNavigationButtonProps, TabsTabButtonProps, SelectTriggerButtonProps, SelectTriggerButtonMode and TaskPillButtonProps are no longer exported. See Button.
• Other profiles: Input, Textarea, Checkbox, Radio, Radio Group, Switch, Separator, Toggle, DialogPopup, SheetPopup, AutocompleteInput and AutocompleteItem no longer take profile, and Input no longer takes profileMode. InputProfile, InputProfileMode and TextareaProfile are no longer exported. toggleVariants takes no profile, and checkboxVariants and radioVariants take no size. Date Field keeps profile="input-group", and ComboboxInput keeps profile="embedded".
• Current item (deprecated aliases): isActive → active on PaginationLink, PaginationPrevious, PaginationNext, SidebarMenuButton and SidebarMenuSubButton, and current → active on StepperButtonItem. The old names keep working as deprecated aliases.
• Theme Toggles (deprecated aliases): checked, defaultChecked and onCheckedChange → pressed, defaultPressed and onPressedChange, as on Toggle. The old names keep working as deprecated aliases. LayeredThemeToggle's checkedIcon is removed; the icon always shows the current mode. See Theme Toggles.
• Overlay parts: Every overlay's popup part is named *Popup, except Detail Drawer's DetailDrawerContent. The shadcn names, such as DialogContent, AlertDialogContent, SheetContent, PopoverContent, TooltipContent and SelectContent, stay as documented aliases. DrawerContent is now an alias of DrawerPopup like the others; the bare part it named before is DrawerPrimitive.Content.
• Dialog family: bottomStickOnMobile is removed from DialogPopup, AlertDialogPopup and CommandDialogPopup; on small screens they always open as a sheet at the bottom. The footer variant of Dialog, Alert Dialog, Sheet, Drawer and Detail Drawer, which had no effect, is removed.
• Dialog and Alert Dialog: Both are 440 px wide by default instead of 512 px. For 512 px, pass className="sm:max-w-lg", or choose another width with size. A max-w-* class without a breakpoint now also applies below 640 px, and between 512 and 639 px Alert Dialog opens as the full-width sheet that Dialog shows there. See Dialog.
• Colors (deprecated aliases): Status values are info, success, warning and error, the brand value is accent, and gray is neutral. variant sets them where the value also changes the surface, as on Alert and Badge, and tone where color is the whole variation. These earlier values keep working as deprecated aliases until 2.0:
  • Badge variant="brand" → accent.
  • TimelineItem variant → tone, and its default → neutral.
  • Meter tone: default → accent and destructive → error.
  • TooltipPopup tone: default → neutral and destructive → error.
  • Notification tone: gray → neutral, brand → accent, and default → no tone. FeaturedIcon tone: gray → neutral and brand → accent.
  • ResourceListIndicator tone: muted → neutral.
  • The rendered data-variant and data-tone attributes carry the new values, so CSS keyed on the old ones needs updating. MeterTone, FeaturedIconTone and ResourceListIndicatorTone list only the new values.
• Calendar: Calendar takes the vocabulary of the date pickers. Its old props and value shapes are removed, with no aliases. See Calendar.
  • Values are native Date objects instead of CalendarDate, a multiple selection is Date[], and a range is { from, to } instead of { start, end }, also in shortcuts.
  • onChange → onValueChange, and isDisabled, isReadOnly and isInvalid → disabled, readOnly and aria-invalid.
  • minValue and maxValue → startMonth and endMonth for the months, or disabled={{ before, after }} for the days. isDateUnavailable → disabled with a day matcher or a list of them.
  • focusedValue, defaultFocusedValue and onFocusChange → month, defaultMonth and onMonthChange, and visibleDuration={{ months: 2 }} → numberOfMonths={2}.
  • Other React Aria props are no longer passed on, CalendarProps and CalendarRangeProps are no longer generic, and CalendarValue is removed.
  • Day bounds set with disabled={{ before, after }} show as struck-out unavailable days instead of faded days outside the range.
• Date pickers: calendarProps takes CalendarOptions on Date Field, Date Picker, Date Range Picker and Date Time Picker. Date Field's calendarProps no longer takes className, locale or size; use the field's own locale. disabled: true in calendarProps disables the whole calendar instead of striking out every day, and a list of matchers in disabled no longer takes a boolean or a nested Date[], which now matches nothing. At xl the date and time fields render data-text-size="base" when textSize is unset.
• Time Field: alignment → align, with no alias, and the data-time-field-alignment attribute → data-time-field-align. onValueChange reports undefined when the field is cleared. See Time Field.
• Select and List Box: selectTriggerIconClassName is removed. className on SelectPopup styles the popup instead of the list inside it. In both components the check now comes first in each option's markup, so CSS that relied on the old order or on Select's grid columns needs updating. A Select option ends 16 px after its label instead of 32 px. See Select.
• Badge: profile="group-overflow-count" is no longer public; use AvatarGroupCount inside AvatarGroup. BadgeProfile is count, entitlement or verified. See Avatar Group.
• Navigation Menu: A link inside NavigationMenuContent takes the panel row style without popup; pass popup={false} for the bar style. NavigationMenu and NavigationMenuItem are kit wrappers with a data-slot instead of the Base UI parts themselves. See Navigation Menu.
• Sidebar: In the push layout, SidebarInset pads its content by the sidebar's offset and moves it with the sidebar. Remove your own padding with --sidebar-content-offset, or the offset doubles; a padding utility on SidebarInset replaces the offset. See Sidebar.
• Modal, Activity Feed, File Upload and Notification (Siteplane UI Pro):
  • Deprecated aliases: ModalBlock's tone default → neutral and destructive → error. The date range parts, ModalImageCrop and ModalTextEditor report through onValueChange instead of onChange. ActivityFeedItem's presence → status and statusLabel, the names Avatar uses for its dot.
  • Removed, with no alias: ModalPasswordField's showLabel and hideLabel → labels={{ show, hide }}. ModalDateRange is { from: Date; to: Date } instead of two CalendarDate values, and modal-block no longer installs @internationalized/date.
  • File Upload's onRejected adds the reason count, so a handler typed with the two earlier reasons, or a complete FileUploadLabels object, needs it.
  • notify() leaves the timeout to ToastProvider unless you pass one, and a Notification's dismiss button is named after its title.
  • See Modal.
• Confirm Dialog and Validated Form: Both leave the catalog; they were fixed demos without props. For a confirmation, compose Alert Dialog as in Confirm a request. For errors from your server, compose Form and Field as in Server validation; its example item form-server-errors-example is now form-server-validation-example. The 0.6.3 and earlier catalogs still contain both components.
• Removed exports: The recipes controlRecipe, buttonRecipe, surfaceRecipe, overlayRecipe, fieldRecipe and collectionItemRecipe are removed with their *RecipeOptions types, RecipeSize, RecipeRadius and their .sp-* classes; focusRingRecipe stays. So are the token TypeScript exports tokenEntries, tokenCssVariables, TokenName and TokenEntry, whose generated tokens.ts is no longer installed. useLeavingPane, swapFadeClassName, BackgroundPatternTile, backgroundPatternCells, isometricPeriod, backgroundPatternTile, toastSurfaceClassName and toastDismissClassName are no longer exported; ToastPosition stays public. The kit-internal surface.ts drops formControlFocusWithin, formControlTrigger, formControlWrap and surfaceClassNames.dialogOverlayViewportMobileStick.
• CSS variables: The motion tokens are one documented set. The renamed variables have no aliases, so set the new names. See Motion settings.
  • --motion-ease-apple-out and --motion-ease-floating-panel → --motion-ease-standard, and --motion-ease-ring-pulse → --motion-ease-linear.
  • --motion-duration-route, --motion-duration-floating-panel and --motion-duration-drawer → --motion-duration-moderate, --motion-duration-calendar-drill → --motion-duration-slow, and --motion-duration-checkbox-exit → --motion-duration-linger.
  • --sp-rw-duration-state → --motion-duration-fast, --sp-rw-ease-standard → --motion-ease-state, and --sp-rw-ease-switch → --motion-ease-switch.
  • The internal --motion-gap of the Motion list is --siteplane-motion-gap.
  • --motion-duration-button-press and --motion-ease-crisp are removed, as are the unused --motion-sheet-x, --motion-sheet-y, --motion-toast-y, --motion-row-y, --motion-page-y, --motion-hover-y, --motion-hover-scale, --motion-stagger-subtle, --motion-stagger-list, --motion-backdrop-blur and --motion-glass-blur.
  • The variables that only served the recipes are removed: --sp-primitive-duration-*, --sp-primitive-easing-*, --sp-primitive-number-scale-*, --sp-semantic-motion-*, --sp-control-height, --sp-control-padding-inline, --sp-control-gap, --sp-field-gap and --sp-radius-*.
  • An override of --sp-rw-field-shadow or --sp-rw-control-rim no longer reaches Checkbox and Radio, whose edge is --sp-rw-choice-rim over the new --sp-rw-field-depth. The Switch track's edge is --sp-rw-switch-edge, declared on the switch itself, so an override must target that element; --sp-rw-switch-rim stays the hook from an ancestor.
• Smaller changes:
  • className={(state) => …} on a kit component is a type error now; style states through data attributes instead. The raw Base UI re-exports, such as FormPrimitive and TogglePrimitive, keep Base UI's types.
  • Color Picker accepts only the props it supports, so input props no longer reach its hidden input.
  • toggleVariants() no longer returns cursor-pointer or the disabled cursor and opacity utilities. The kit stylesheet sets the cursor and the disabled fade of a Toggle.
  • The default and comet Spinners take svg props, and DetailDrawerContent takes its side from the root.
  • PageHeader, FrameHeader and FrameFooter render a div instead of a header or footer landmark.
  • Toast and Notification are marked siteplane-toast-surface instead of siteplane-floating-surface.
  • These hooks are removed: data-surface on Button and Resource List rows, data-checked-icon on Layered Theme Toggle, data-badge-profile, data-empty-surface, data-slot="activity-feed-presence" and --table-cell-padding-x.
  • Registry item titles drop "Siteplane": the Button item is titled "Button" instead of "Siteplane Button".

New

• Avatar Group: A new free component overlaps several avatars, each with a 2 px ring in the color of the surface it sits on, and AvatarGroupCount shows how many people it leaves out. size takes sm, md, lg or xl, from 24 to 48 px, and the avatars overlap by a quarter of it. See Avatar Group.
• Dialog and Alert Dialog: size takes xs, sm, md or lg, which are 400, 440, 600 and 880 px wide from 640 px up; sm is the default. The DialogSize and AlertDialogSize types name the steps, and the popup renders its size as data-width. See Alert Dialog.
• Calendar options: Calendar and every picker's calendarProps share the exported CalendarOptions, CalendarDayMatcher and DateRange types, and CalendarSingleProps and CalendarMultipleProps join CalendarRangeProps. Calendar takes readOnly, month, onMonthChange and numberOfMonths, and Date Field's calendarProps takes defaultMonth.
• Date Picker: It takes size and textSize like the other date and time fields, and name, form and required like Date Field; the form receives the date as YYYY-MM-DD. See Date Picker.
• Menus: MenuRadioItem, DropdownMenuRadioItem and ContextMenuRadioItem take indicatorPosition="end" for rows that lead with a logo or an avatar, such as a workspace switcher. The check then ends the row. See Menu.
• Text editor: ModalTextEditor takes tools, the tools its toolbar shows, such as ["bold", "italic", "bulletList", "link"] for a short note. The toolbar keeps its own order, a separator stands only between two groups, and without the link tool a click on a link and Cmd/Ctrl+K leave the link alone. Without tools the toolbar shows all of them, as before. ModalTextEditorTool names a tool. See Modal Block.
• Notification: surface="raised" sets a notification into content, such as a text message shown inside a sign-in card. It keeps the toast's fill and radius and draws a Card's edge instead of the floating shadow. floating, the toast's own surface, stays the default. See Notification.
• Toggle: lift lifts the icon once each time the toggle turns on, for a reaction such as a like: up and back with a slight tilt, timed by the motion tokens. Reduced motion keeps the icon still. See Toggle.
• Color Picker: open and defaultOpen complete onOpenChange. readOnly keeps the color while its controls still open for reading and copying. See Color Picker.
• Tag, Toolbar and Progress: Tag takes defaultSelected. Toolbar takes size and hands it to its buttons, links, groups and input. ProgressCircle takes value={null} for an indeterminate arc, as Progress does.
• Sidebar: stateCookie on SidebarProvider and Dashboard Shell renames the sidebar_state cookie, and stateCookie={false} writes none. SidebarMenuItem takes expandTrigger and expandLabel for an item that expands from the collapsed rail.
• Charts: Pie Chart takes locale, and Line, Area, Bar and Pie Chart take aria-describedby.
• Button: A text Button with profile="inline" and shape="square" is a bare icon action for use outside a field. The icon sits in the square target of the control size with no background, and keyboard focus draws the focus ring around the icon. With profileTone="muted" it is the action at the end of a Sidebar row. See Button.
• More props: DrawerPopup takes closeProps, PreviewCardPopup takes side and alignOffset, and AlertDialogHeader and AlertDialogFooter take render, as their siblings do.
• Stable: Navigation Menu and File Type Icon are stable.
• Motion settings: The 41 motion tokens are one documented set, with a duration scale from micro (100 ms) to linger (380 ms) and curves named by role. See Motion settings.
• Siteplane UI Pro: Every example on a Pattern page installs from @siteplane-pro, as <pattern>-demo for the first example and <pattern>-<id>-example for the others, and with a license key shadcn search @siteplane-pro lists them. Pattern pages show their install command. Modal holds its confirm button while a returned promise runs, with confirmLoading and confirmError. Password Strength, File Upload and the Modal parts, now ModalUpload and ModalTimeField too, take their words through labels, and notify() takes a manager for a provider with its own toast manager. See Installation.
• Textarea: A textarea that grows with its content, plain or in an Input Group, shows no resize grip, because a dragged height would stop it growing. In a browser without field-sizing: content it keeps its height and the vertical grip. See Textarea.
• Settings List: The rows follow the width of the list instead of the screen. A responsive row puts its control beside its copy once the list is 36rem (576 px) wide, so a list beside a sidebar stays stacked while it is narrow. See Settings List.
• Calendar options: todayDate sets the day that counts as today, in Calendar and in the calendarProps of every picker. The calendar marks it and, without a selected date, opens on its month. See Calendar.
• Time Field and Date Time Picker: hourCycle={12} shows a 12-hour clock with the locale's AM and PM, in the segments and in the time selector. The value stays in 24-hour time, and 24 stays the default. See Time Field.
• Combobox: ComboboxItem takes indicatorPosition="end" for rows that lead with an avatar or a logo, such as an assignee picker. The check then ends the row, as on the menus' radio items. See Combobox.
• Dashboard Shell: DashboardShellMain takes flush for a view with panes of its own, such as an inbox. Its content then runs to the edges of the main area, without the 16 px padding. See Dashboard Shell.
• Content Security Policy: SiteplaneUIProvider takes the nonce of a Content Security Policy. The kit puts it on its inline scripts and styles, such as the Tabs selection script and the styles of Animated Buttons, Icon Morphs and Theme Toggles, and passes it to Base UI's CSPProvider. See Content Security Policy.
• Relative sizes: useRelativeControlSize sizes a part by its size at the default lg, and the part keeps its steps from lg at every control size. Compact toggles that are sm at lg stay sm up to lg and become md at xl; a code field that is xl at lg becomes md at sm. resolveRelativeControlSize does the same outside a component. See Control size.

Fixes

• Reduced motion: The system setting, html with data-motion-reduce="true" and SiteplaneMotionProvider preset="reduced" each make every kit motion instant. That now includes the state fades of buttons and fields, Accordion and Collapsible, the Tabs and Pagination indicators, the Switch, the Select caret and the Tooltip glide. An application's token override no longer brings motion back.
• Charts: A very narrow plot, or two points on one date, no longer crashes a Line or Area Chart. Screen readers announce a chart as one focus stop with a summary of its data. While the keyboard or a tap moves between the items, a live region reads out what the tooltip shows. Labels and the plot stay in the chart's box, a long category name at the side of a horizontal Bar Chart ends in an ellipsis, a Bar List label wraps, and an empty chart shows its empty label. A chart whose container keeps changing width, such as beside a sliding sidebar, redraws as a transition: the slide stays smooth, and the chart ends at the final width.
• Tabs and Filter Bar: The active tab's pill or underline shows in the first paint of a server-rendered page. Before, it appeared only once the page had hydrated. Under a Content Security Policy with nonces, pass the nonce to SiteplaneUIProvider so the script that places it may run.
• Control size: The Patterns keep their proportions at every control size and look as designed at lg. Modal Block's code field, date presets, swatches, copy and permission buttons, tag suggestions and attachments and Password Strength's meter move by the same steps as the provider's control size; ModalImageCrop's swatches turn xl at xl, so the selected one's ring stays as tall as the upload button. Header Navigation's mobile rows, the media play button, the carousel dots and the crop handles keep their size. The search row and the results of Command follow the control size too, and are unchanged at lg. See Control size.
• Modal Block: Wherever the toolbar of ModalTextEditor wraps, in a narrow card or at a larger control size, the separators give way to wider spacing, so none ends a row. Before, they did so only on phones.
• Tabs: Switching panels shows the new panel at once, while the indicator glides and the panels' container follows the new height. The fade through before left a moment with neither panel, which read as a flicker. The tab list also keeps its height while the container follows a taller panel; it could collapse for a moment before. See Tabs.
• Date and time fields: Clearing a segment empties the field, so it submits no value, onValueChange reports undefined and a required field blocks the submit. A year typed from 0 to 99 stays that year instead of turning into 19xx.
• Disabled states: A disabled control fades once. A disabled button inside a field, such as a copy or step button, no longer fades the whole field. A Toggle that a Toolbar disables stays in the tab order and reports aria-disabled. It now fades and shows the not-allowed cursor, with no hover or press fill, like a Toggle with the disabled attribute.
• Cursors: A part that acts as a button without rendering a Button shows the pointer cursor, and the not-allowed cursor while disabled. Before, it showed the default arrow. This covers a custom render on AccordionTrigger, CollapsibleTrigger, SelectTrigger, TabsTab, ToolbarButton, the Combobox and Autocomplete triggers and clear buttons, ComboboxChipRemove and the Number Field step buttons. The triggers of Dialog, Alert Dialog, Sheet, Drawer, Popover and Menu and the close parts of Dialog, Alert Dialog, Sheet, Drawer and Popover follow when they render no Button, and so does a SidebarGroupLabel rendered as a button. A cursor utility in className still wins. In Calendar and the date pickers, an unavailable day shows the not-allowed cursor, as a disabled day does.
• Sidebar: The mobile sheet takes over below 768 px, Tailwind's md, instead of 800 px. A collapsed offcanvas sidebar leaves the tab order, the trigger and the rail report aria-expanded, and Ctrl/Cmd+B leaves text fields alone. The rail is a full-height target along the sidebar's edge, clear of its scrollbar.
• Overlays: The drawer behind a nested Drawer keeps its fill. The Popover and Tooltip viewports cross-fade on the motion tokens, and the date, date range, date time and color pickers play their closing motion. Long dialog, sheet and drawer titles wrap.
• Tabs and Motion: After a switch, the element that holds the Tabs panels or a MotionSwap no longer keeps a fixed pixel height. Before, switching back to a taller panel could leave it at the height of the panel before, and the content below overlapped it. See Tabs and Motion.
• Feedback: Only error and warning Alerts interrupt a screen reader; the others are a polite status. Content passed to notify() fades behind the front toast, and a copy is announced once in a live region.
• Accessibility: A Combobox chip's remove button names its value, and a disabled Color Swatch Picker leaves the tab order. The Tabs panel and a focused Scroll Area draw the focus outline, the Breadcrumb ellipsis has a 24 px target, and a muted inline action, such as that ellipsis, turns primary on keyboard focus as it does on hover.
• Brand color: A brand override reaches the rim of a checked Checkbox or Radio, the rim of the info Alert and the Switch on dark glass.
• Installation: Examples from the registry keep every import they show, and Toggle no longer breaks tsc -b in a Vite application.
• Data display: A focused Table cell draws the kit focus ring, and a selected row keeps its fill on hover. Avatar initials scale with the avatar, and a long Badge label ends in an ellipsis without losing its descenders.

Look

• Typeface: The kit is set in Inter, at weight 400 with -0.015em tracking, instead of Wix Madefor Text at 450 and -0.02em. Install @fontsource-variable/inter and import it where you imported Wix Madefor Text. To keep Wix Madefor Text, or to use Geist, Roboto, DM Sans or the system font, set the three typeface tokens to the values in Theming. See Typeface.
• Button: In Dark, the default Button's fill is the next step above a Card, 27.2 % lightness instead of 33.3 %, so it no longer stands out as the brightest surface on the page.
• Select, Combobox, Tabs, Checkbox and Kbd: In Dark, their translucent fill is 8 % instead of 16 %. A Select on a Card or Dialog now matches the default Button instead of standing out above it.
• Combobox: A multiple Combobox's field is as tall as an Input of its size, 36 px at lg instead of 32 px at every size. Its chips are 20 px at sm, 24 px at md and lg and 32 px at xl. See Multiple selection.
• Choice controls: An unchecked Checkbox, Radio or Switch track has an edge of at least 3:1 against every surface, in Light and Dark.
• Select and List Box: The check leads the selected option, as in Combobox and the menus, and every label starts at the same x.
• Labels: Label, FieldLabel and SelectLabel share one color, and a label fades once with its disabled control.
• Navigation: Links in Header Navigation and Navigation Menu rest in secondary text and take a light fill on hover, like Sidebar rows. The current page keeps an 8% fill with the full text color. See Header Navigation.
• Sidebar: SidebarMenuAction is a bare icon without a hover or pressed background. The icon rests in the muted text color and turns to the primary text color on hover, on keyboard focus and while its menu is open, and keyboard focus draws the focus ring around the icon. Its target, its position and showOnHover are unchanged. See Sidebar.
• Dialogs: A dialog behind a nested dialog stays visible and steps back, 10% less opaque for each dialog in front of it.
• Toast and Notification: Both now use the surface of Popover and Dialog, with a shadow instead of a border, and their close sits 8 px from the edge. Notification's plain and progress icons, and a bare icon in Inline CTA's plan panel, are 20 px instead of 24 px.
• Fields: Date and time text is 16 px at xl, like the other fields. The Color Picker swatch trigger is 40 px at xl, the size of the palette swatches.
• File Type Icon: The labels take the kit's status and accent colors by file type.
• Resource List: Titles and descriptions keep one line with an ellipsis and show their full text as a native tooltip.
• Motion: The fast step is 150 ms instead of 140 ms, and the standard curve is cubic-bezier(0.16, 1, 0.3, 1) instead of cubic-bezier(0.22, 1, 0.36, 1). The copy icon redraws in 320 ms instead of 340 ms, the Layered Theme Toggle turns in 240 ms instead of 260 ms, and the Switch track fades in 150 ms, together with its thumb.

Docs

• Installation: Getting started and Installation write a complete components.json instead of running shadcn init, which wrote its own theme over the kit. See Installation.
• Stability: Installation states what 1.0 keeps stable and how deprecations work, and Help lists the right-to-left and English-text limits. See Help.
• Pages: Every component page, its examples and the agent skill follow the 1.0 API. Component page titles name the component as a React component, such as "Date Picker – React component". The skill's application-examples reference is now references/dashboard-examples.md.
• Registry: The 1.0.0 catalog pins this release. Earlier catalogs are unchanged.

0.6.3 — 9 October 2026

• Header Navigation: On a glass header, the menu button on phones no longer sits on a solid square. See Header Navigation.
• Registry: The 0.6.3 catalog pins this release. Earlier catalogs are unchanged.

0.6.2 — 9 October 2026

• Slider: A Slider rendered inside a hidden container, such as a section that opens later, shows its thumb and fill once the container appears. Before, the thumb stayed hidden. See Slider.
• Header Navigation: A glass class passed in className replaces the header's page background again, as it did before 0.5.0. On phones, the menu button, its close button and the menu rows take the xl touch size (48 px). See Header Navigation.
• Modal: In a narrow dialog or card, the card number of ModalPaymentFields takes a row of its own below the name and expiry, so all 16 digits show. See Modal.
• Registry: The 0.6.2 catalog pins this release. Earlier catalogs are unchanged.

0.6.1 — 9 October 2026

• Animated Buttons: ExpandingArrowButton takes variant="default". It sets the arrow and its label on the default Button's surface, with that Button's fill, hairline rim, depth and states. The arrow's fill grows between the surface and its rim. See Animated Buttons.
• Registry: The 0.6.1 catalog pins this release. Earlier catalogs are unchanged.

0.6.0 — 9 October 2026

• Sizes: Sizes are sm, md, lg and xl. md is the new name of default, which named the 32 px step although a control without a size follows the provider and renders lg. size="default" still works and selects md. In the same way, Button's icon size icon is now icon-md, CodeBlock's sizes are md and sm, and the provider's radius="default" is now md; the earlier names still work. The rendered data-size, data-control-size and data-radius attributes now read md instead of default, so CSS keyed on [data-size="default"] needs md. The types SiteplaneControlSize and SiteplaneRadius no longer include default; components and the provider accept it through the new SiteplaneControlSizeInput and SiteplaneRadiusInput. siteplaneRadiusValues.default is now siteplaneRadiusValues.md. See Providers.
• Pointer: A disabled Button, Checkbox, Radio, Switch or Sidebar rail shows the not-allowed pointer, and a loading Button shows the progress pointer. Disabled checkboxes and radios no longer glow on hover. See Button.
• Input Group: InputGroupText keeps the descenders of its text, such as the "p" in "https://". See Input Group.
• Glass: On dark glass, a Switch has a darker track when off and a lighter accent when on, so both states stand out. See Card.
• Registry: The 0.6.0 catalog pins this release. Earlier catalogs are unchanged.

Brand — 9 October 2026

• Logo: The docs header, the landing page and the social card show the Siteplane UI logo with black lettering in the light theme and white lettering in the dark theme. "UI" stays white in the brand-colored badge in both themes.

0.5.0 — 9 October 2026

• Styling: A utility in className now overrides the kit's own styles, for example <Button className="w-full">. The kit's stylesheets sit in a cascade layer, siteplane, between Tailwind's components and utilities. Some classes passed to components had no effect before, because the kit's rules won; they apply now. The components themselves render as before. See Theming.
• Setup: Make base.css the first import of your global stylesheet, in place of @import "tailwindcss". It imports Tailwind and declares the layer order. If your app declares its own layers, keep siteplane between components and utilities.
• Variant helpers: buttonVariants, badgeVariants, toggleVariants and switchVariants return only the classes that take effect; the kit's stylesheet supplies the rest. switchVariants now styles the menu track.
• Registry: The 0.5.0 catalog pins this release. Earlier catalogs are unchanged.

0.4.14 — 8 October 2026

• Avatar: The offline status dot is solid gray, so a photo no longer shows through it. See Avatar.
• Docs: Combobox, Autocomplete, Select, Number Field, OTP Field and Slider show sizes in their own section, apart from the variants and the disabled state. Every field in these examples has a visible label, and the default row shows the default size instead of repeating the large one.
• Registry: The 0.4.14 catalog pins this release. Earlier catalogs are unchanged.

0.4.13 — 8 October 2026

• Fields: A leading icon sits 8 px from the edge with the text 6 px after it, at every size and width. This applies to Input Group, Autocomplete, Combobox and the Select search. See Input Group.
• Avatar: The "+N" overflow of a group has its separating ring again, in the color of the surface. See Avatar.
• Field actions: In Safari, showing a password no longer marks a required field as left.
• Sidebar: On phones, closing the sidebar returns focus to its trigger in every browser. See Sidebar.
• Tokens: The unused --sp-rw-fg-special, --sp-rw-bg-special and --sp-rw-bg-special-translucent are removed.
• Registry: The 0.4.13 catalog pins this release. Earlier catalogs are unchanged, and Installation now lists 0.4.7 to 0.4.12 as well.

0.4.12 — 8 October 2026

• Glass: Button, Tooltip, Popover, Menu, Dropdown Menu, Context Menu and Card take variant="glass", a tinted, blurred surface for use over a photo, a video or a color surface. Glass is a dark card with light text in both themes; data-glass-tone="light" and data-glass-ink="dark" choose a lighter card or dark text. Secondary text and icons on glass follow its text color, a switch on glass keeps an unchecked track darker than its thumb, and glass popups open and close with the same motion as the others. The new Glass page shows every glass variant, and each of these component pages has a Glass section.
• Registry: The 0.4.12 catalog pins this release. Earlier catalogs are unchanged.

0.4.11 — 8 October 2026

• License: The components move from the MIT License to the Siteplane UI License. You can use, change and share them in any project, including client work. Charging for them as part of a UI kit, a component library, a template or a page builder is not permitted. See License.
• Registry: The 0.4.11 catalog pins this release. Every published catalog now carries the Siteplane UI License; the component code in them is unchanged.

0.4.10 — 8 October 2026

• Number Field: emphasized sets the value semibold and one step larger, for steppers whose number is the content, such as a cart quantity. See Number Field.
• Modal: The examples on the Modal page show each modal open in its frame, so you can compare them without clicking. Beside a footer start such as date inputs, Cancel and Confirm now wrap together. See Modal.
• Docs: The examples show the same people as the landing page.
• Registry: The 0.4.10 catalog pins this release. Earlier catalogs are unchanged.

0.4.9 — 8 October 2026

• Docs: Links between docs pages no longer reload the whole page, so the sidebar keeps its scroll position.
• Layout: Space, size and alignment fixes across the kit. Most of them show only with particular combinations of parts, sizes or long values.
• Button:
  • variant="special" is removed; use accent for branded actions. muted-special is now muted-accent, the brand color as a tint.
  • A multiline Button whose label fits on one line is as tall as a plain one, and ListBox rows follow the same heights. When the label wraps, a leading icon sits on the first line.
  • See Button.
• Checkbox and Radio: Beside a label with a description, the control sits on the label's first line. See Checkbox.
• Menu slot: A menu whose rows have no icon, check or radio keeps no empty space before its labels. See Context Menu.
• Number Field: The value is 16 px at xl, like Input. See Number Field.
• Avatar: The status dot scales with the avatar, at a quarter of its size. See Avatar.
• Notification: The rings of a featured icon exist only as the pulse. With pulse={false} or reduced motion, the icon shows its glyph alone. See Notification.
• Dialog and Sheet:
  • The corner close is the 24 px muted X that Drawer and Toast use.
  • A header keeps 40 px clear for the close, so a long title never runs under it.
  • Footers wrap.
  • A footer that follows the header directly sits 24 px below the text.
  • See Dialog and Sheet.
• Popover: PopoverPopup takes showCloseButton and closeProps, like Dialog, Sheet and Drawer. See Popover.
• Icon sizes: Button, Toggle, Tabs, menu rows and Toolbar share one icon scale: 14 px at xs, 12 px for icon-2xs, 16 px from sm to lg and 20 px at xl. Tabs and Toggle labels are 16 px at xl.
• Forms:
  • A label above a field sits on a 16 px line, closer to the field. A label beside a checkbox, radio or switch keeps the 21 px line.
  • A Field's description and error start under the label text when the label holds a choice control.
  • Checkbox, radio and switch sit on the first line of a wrapping label.
  • RadioGroup and CheckboxGroup take the gap you set.
  • See Field and Label.
• Menus:
  • Switch rows take the same leading slot as other rows.
  • Menu popups stay inside the viewport, and long row labels end in an ellipsis.
  • Menus keep their compact rows at every control size.
  • See Menu.
• Card and Alert:
  • Card spacing holds for a header followed directly by a footer, for divided footers and for an action beside a single title.
  • Alert leaves no empty space when its icon, title or action is missing. Below 640 px its action moves into the text column.
  • See Card and Alert.
• Long values: Titles, descriptions and labels wrap long unbroken values such as URLs instead of overflowing their box. This applies to cards, alerts, overlays, timelines, steppers, empty states, accordions, collapsibles and notifications.
• More components:
  • Timeline markers center on the first text line.
  • Toggle padding="comfortable" takes effect.
  • Badge icons scale with the badge.
  • Table head height and cell padding follow the size.
  • The default CodeBlock has a relaxed line height.
  • The xl ColorPicker trigger is 48 px.
  • DateField, TimeField and DateTimePicker keep their width in a flex row.
  • ComboboxChip truncates long values.
  • ResourceList rows give absent slots no room.
  • Sidebar rows with a badge or action keep their end clear.
• Patterns:
  • Modal forms lose the empty space under their last field.
  • Notification leads share one 36 px column.
  • Alignment fixes in Inline CTA details, File Upload, Activity Feed and Metric Card icons.
  • Page Header renders no empty actions area.
  • Narrow Metric Cards place the change badge under the value.
  • See Modal and Notification.
• Registry: The 0.4.9 catalog pins this release. Earlier catalogs are unchanged.

Docs — 8 October 2026

• Navigation: The sidebar lists the docs in one level of groups, with every component category as a group of its own. Each group shows its number of pages and folds, and a filter field above the groups narrows them by name.
• Search: The search sits in the header. The field or ⌘K opens a dialog that lists every page by group and, for a query, the matching pages and sections.
• Header: The header is lower, links to GitHub and shows the new Siteplane UI logo, with a dark variant for the dark theme.
• Examples and code: Example cards and code blocks draw only their edge, the copy buttons are the kit's, and in the dark theme the page and its cards share one color.

0.4.8 — 8 October 2026

• Modal: ModalImageCrop shows the whole picture, so a tall photo can be framed from top to bottom. The crop value is now measured in the picture, from 0 to 1 across its width and height; for pictures that are not 16:9 it used to be measured in the 16:9 area. onImageLoad reports the picture’s size in pixels, and the selected thumbnail shows what the frame holds. See Modal.
• Color Swatch Picker: Image options take imageSize and imagePosition (CSS background-size and background-position) to show part of the picture. See Color Swatch Picker.
• Registry: The 0.4.8 catalog pins this release. Earlier catalogs are unchanged.

0.4.7 — 8 October 2026

• Background Pattern: A ninth pattern, siteplane, draws the Siteplane mark as a line grid. Each mark nests between the two above it, and the slit of its S is a single line. See Background Pattern.
• Registry: The 0.4.7 catalog pins this release. Earlier catalogs are unchanged.

0.4.6 — 8 October 2026

• Dark theme: A new neutral dark palette with a darker page (#151515), panels at #1a1a1a, cards, menus and dialogs at #202020, and softer secondary text. Default buttons keep an opaque fill that is lighter than every surface they sit on.
• Outline edges: Outline toggles draw the same edge as outline buttons, and it now shows in Dark. Toggle, Checkbox, Radio and the Slider thumb no longer draw a stray 1 px line along one edge, and the Switch track has an edge in Dark. See Toggle and Switch.
• Registry: The 0.4.6 catalog pins this release. Earlier catalogs are unchanged.

0.4.5 — 8 October 2026

• Card: Card titles are 18 px, like the Dialog, Sheet and Drawer titles. The tinted header band keeps its compact title. A header with only a title no longer leaves 6 px of empty space under it. See Card.
• Field: Floating label fields take no leading icon, so every label and value starts on the same line. A field with a leading icon keeps its label above the control. Trailing actions such as the password toggle stay. See Field.
• Modal: The seats stepper shows its number at 18 px. See Modal.
• Registry: The media-query hook now installs with the base item. The 0.4.5 catalog pins this release. Earlier catalogs are unchanged.

0.4.4 — 7 October 2026

• Notification: The rings of a featured icon are the pulse now. They keep traveling outwards from the glyph as they fade, a new ring every 2 seconds, and no ring stands still. With pulse={false}, reduced motion or after a finite --motion-ring-pulse-count, the rings stay still at 28 and 40 px. The new --motion-ring-pulse-opacity and --motion-ease-ring-pulse tokens set how strong the rings start and how they move. See Notification.
• Registry: The 0.4.4 catalog pins this release. Earlier catalogs are unchanged.

0.4.3 — 7 October 2026

• Field: labelPlacement="floating" draws the label inside the field, where a placeholder would sit, and floats it to the top on focus or once there is a value. It works with Input (including a leading icon and the password toggle), Textarea, Select, single-select Combobox and Autocomplete. Floating fields are 48 px high. See Field.
• Required fields:
  • requiredIndicator marks the label of a required field with a red asterisk.
  • With validationMode="onBlur", a required field left empty now warns as soon as you leave it.
  • FieldError shows its message as a bubble beside the field with variant="tooltip", the default in a floating field. Only the field you are in shows its bubble; other invalid fields show their invalid frame.
• Password Strength: A new Pro pattern rates a new password while it is typed, with a strength meter, the requirements it still misses and a show/hide toggle. Its label sits on top or floats. See Password Strength.
• Meter: tone colors the fill (destructive, warning or success). An empty meter shows no fill, and the fill moves with the value motion.
• Tooltip: TooltipPopup takes tone="destructive", an arrow and interactive={false}.
• Registry: The 0.4.3 catalog pins this release. It contains no Patterns. Earlier catalogs are unchanged.

0.4.2 — 7 October 2026

• Notification: Ring icons pulse continuously by default, including a standalone FeaturedIcon and every notification in a stack. pulse={false} turns the pulse off, reduced motion keeps the rings still, and --motion-ring-pulse-count limits the waves. See Notification.
• Charts and Motion: The Bar, Line, Area and Pie Charts, the Bar List, the Sparkline and Motion are stable, no longer previews.
• Brand: The docs header, the favicon and the social card show the logo with its updated fade.
• Registry: The 0.4.2 catalog pins this release. Earlier catalogs are unchanged.

0.4.1 — 7 October 2026

• Charts: In Dark, the brand shades of the Bar Chart, Line Chart, Area Chart, Pie Chart and Bar List fade towards a deeper brand instead of graying into the card. They stay blue, the first series stays the strongest, and text on the Bar List's bars stays legible. --chart-brand-fade sets the color the shades fade towards; Light keeps fading into the card.
• Registry: The 0.4.1 catalog pins this release. Earlier catalogs are unchanged.

0.4.0 — 7 October 2026

• Charts: A new Charts group in the docs.
  • New components: the Bar Chart, Line Chart, Area Chart, Bar List and Sparkline, next to the rebuilt Pie Chart.
  • Interaction: each plot is one focus stop with arrow keys. A crosshair, the dots and a label on the axis glide to the active item, and its tooltip card trails beside it while the rest of the chart steps back slightly.
  • Changing data: new data glides in, and everything is instant under reduced motion.
• Colors: charts shade the brand color from strong to light by default. palette="categorical" gives each series its own chart color.
• Pie Chart:
  • Breaking: the default palette is now brand; pass palette="categorical" for the earlier colors.
  • New options: variant (donut or pie), center, legend and popOut.
  • Tooltip: the card trails beside the share instead of following the pointer.
• Motion: the follow motion (useFollowValue, useFollowPoint, followed and the --motion-duration-follow tokens) glides a mark after a moving target. MotionNumber reads left to right inside right-to-left text, useTweenedRows takes absent and useTweenedValues takes starts. See Motion.
• Tooltip: a TooltipPopup with an anchor of its own sizes to its content and follows the anchor without a transition.
• Metric Card: its chart is the Sparkline, scaled from the lowest to the highest value so a small change shows its shape.
• File Type Icon and Icon Morphs:
  • File Type Icon: its optional props accept undefined.
  • Icon Morphs: the Menu Icon Morph's bars sit a whole pixel apart, so all three stay equally thick.
• Registry: The 0.4.0 catalog pins this release. Earlier catalogs are unchanged.

0.3.14 — 7 October 2026

• Docs: The Tabs divider example shows the notification count as a light gray badge.
• Registry: The 0.3.14 catalog pins this release. Earlier catalogs are unchanged.

0.3.13 — 7 October 2026

• Badge: light draws a slowly turning brand and amber light along the badge's edge, with a soft halo outside it; the light stands still when motion is reduced. shape="pill" rounds a badge fully, as on Button, and the new --sp-rw-radius-badge token sets the radius of every badge, tags included, from your theme. See Badge.
• Registry: The 0.3.13 catalog pins this release. Earlier catalogs are unchanged.

0.3.12 — 7 October 2026

• Tabs: The underline of variant="underline" shows its full 2 px instead of 1 px. divider on TabsList draws a hairline under all tabs, with the active underline sitting on it; give the list w-full to run the line across its container. See Tabs.
• Registry: The 0.3.12 catalog pins this release. Earlier catalogs are unchanged.

0.3.11 — 7 October 2026

• Input: A file input draws a short divider between its button and the file name, in the color and weight of the Input Group addon divider. See Input.
• Registry: The 0.3.11 catalog pins this release. Earlier catalogs are unchanged.

0.3.10 — 7 October 2026

• Icon Morphs: The Menu Icon Morph draws finer bars, close to the stroke of a lucide icon at the Button's icon size: 1.5 px at sm and default and 2 px at lg and xl, so all three bars draw equally sharp on high-density screens. The Controlled navigation example opens and closes its list with Collapsible. See Icon Morphs.
• Docs: Animated Buttons, Icon Morphs and Theme Toggles have their own Animated group at the end of the Components navigation.
• Registry: The 0.3.10 catalog pins this release. Earlier catalogs are unchanged.

0.3.9 — 7 October 2026

• Background Pattern: A new Pro pattern puts a decorative CSS pattern behind a section or card: dots, grid, stripes, squares, lattice, and the isometric family with cubes and hexagons, with sizes, fades, surfaces, tones, a hairline weight and grain. See Background Pattern.
• Registry: The 0.3.9 catalog pins this release. It contains no Patterns. Earlier catalogs are unchanged.

0.3.8 — 6 October 2026

• Modal: The corner close button follows the layout. A modal with a media header hides it by default; showCloseButton turns it on and places it as an opaque button inside the top-end corner of the media. showCloseButton replaces hideCloseButton. See Modal.
• Notification: The rings of a tone's featured icon pulse outwards three times when the notification appears, then rest. Only the front of a stack pulses, pulse={false} turns it off, and reduced motion keeps the rings still. See Notification.
• Docs: Group headings in the docs navigation are set apart from their items, and the Sidebar and Dashboard Shell examples use the default group label.
• Registry: The 0.3.8 catalog pins this release. Earlier catalogs are unchanged.

0.3.7 — 6 October 2026

• Patterns: The docs have a Patterns section again: application compositions built from the free components, with live previews of Activity Feed, File Upload, Header Navigation, Inline CTA, Metric Card, Modal, Notification and Page Header. Their source is part of Siteplane UI Pro and is not published; Pro licenses are coming soon. The free components stay MIT licensed.
• Registry: The 0.3.7 catalog pins this release. It contains no Patterns. Earlier catalogs are unchanged.

0.3.6 — 6 October 2026

• Checks: Every check in the kit draws in and out with one shared motion: Checkbox, the checkbox and radio items of menus, Select, Combobox, List Box, Color Swatch Picker, and Resource List and Table selection. With reduced motion they appear at once.
• Filter Bar: Tabs that don't fit fade at the edge where more tabs wait.
• Resource List: flush aligns the row content with the content around the list, while the row fills keep their inset.
• Docs: The Dashboard Shell, Sidebar and Application layout pages lead with the inset layout, and shell examples fill their preview edge to edge.
• Registry: The 0.3.6 catalog pins this release. Earlier catalogs are unchanged.

0.3.5 — 6 October 2026

• Surface edges: Cards, frames, panels and drawers draw one edge everywhere, the stronger contour (24 % in Light, a 52 % hairline in Dark). The edge prop on Card, Card Frame and Drawer Popup and surfaceEdge on SiteplaneUIProvider are removed. See Card for how a card reads on different backgrounds.
• Button: The default variant is opaque, white in Light, instead of translucent. default-raised is removed; use default. Avatar buttons show hover, pressed and open states over the portrait.
• Filter Bar: FilterBarTabs puts a search segment into the tab bar. It opens a search field inside the same bar, and Escape or clearing returns to the tabs. See Filter Bar.
• Drawer: DrawerPopup takes width: readable (512 px, the default) or full for bottom and top panels.
• Color Picker and Color Swatch Picker: The popover is 250 px wide at every size, the hue thumb sits on the center of its track, and the trigger swatch scales with the trigger. The docs show the ring indicator, image swatches and a palette that ends with a custom color.
• Input and OTP Field: The file input centers its line at every size. A joined OTP Field marks the current slot with the focus ring of a separate slot.
• Rings: The rings around Stepper markers, Avatar status dots and Timeline markers take the color of the surface they sit on.
• Docs: Lighter borders in the docs, a password example with show and hide, a Delete item in the Dropdown Menu, a Group search form that submits on Enter, and Filter Bar examples that filter real lists.
• Registry: The 0.3.5 catalog pins this release. Earlier catalogs are unchanged.

0.3.4 — 6 October 2026

• Frame and Card: A Frame panel draws one Card edge instead of a border, a shadow and an extra line, and a Card joined into a Card Frame is square inside it. The Card page shows every variant and both edge strengths. See Card and Frame.
• Drawer and Detail Drawer: DrawerPopup sets the strong surface edge for its content by default, so cards inside a drawer read; edge="subtle" turns it off. The Detail Drawer examples show a customer and a list of invoices. See Detail Drawer.
• Toast: Toasts from several providers that share a screen position stack instead of covering each other, and reduced motion also stops their transitions.
• Date and time: A range selection in Calendar and Date Range Picker fades in like a single day. Date Field and Time Field have a compact default width; pass className="w-full" to fill a column. The popovers of Date Field, Date Picker, Date Range Picker and Date Time Picker use the popup surface with its radius, and the time selector rows have the menu row height.
• Timeline: The ring around a marker takes the color of the surface it sits on.
• Docs: The interactive Stepper examples keep their checkmarks while another step is open, the Progress examples fill like a real upload, and the Scroll Area page shows scrollFade on its own example.
• Registry: The 0.3.4 catalog pins this release. Earlier catalogs are unchanged.

0.3.3 — 6 October 2026

• Badge: The default Badge is a white surface with a hairline. brand (the solid accent) and inverse (black, the previous default) are new variants, and count badges stay black. If you relied on the black default, set variant="inverse". See Badge.
• Drawer: Bottom and top drawers keep a readable width of 512 px, centered on wide screens; straight still spans the edge. DrawerMenu takes size: xl gives touch rows of 48 px and marks the current page with a fill. A DrawerMenuItem rendered through DrawerClose keeps its row styling. See Drawer.
• Sidebar and Dashboard Shell: The collapsed rail is 52 px wide, so every icon shares one axis. Header, groups and footer keep their spacing while the content scrolls. The Dashboard Shell sidebar sits flat on the page background, and its content panel draws a strong edge.
• Menus: Destructive items color their icon like their label.
• Input: Password dots are larger and evenly spaced; the caret keeps its height.
• Docs: New Drawer examples (filters, mobile navigation, file actions, positions and variants), a link preview for Preview Card, the Menu account trigger as an avatar button, Resource List examples that stay on the page, and a company mark in the Sidebar and Dashboard Shell examples.
• Registry: The 0.3.3 catalog pins this release. Earlier catalogs are unchanged.

0.3.2 — 6 October 2026

• OTP Field: layout="joined" draws the slots as one field with thin dividers between the characters; separate boxes stay the default. See OTP Field.
• Number Field: The field has a compact default width (176 px at the default size) instead of filling its container; pass className="w-full" to fill a form column.
• Fields: The elevated surface of Input, Input Group, Textarea, Number Field and OTP Field draws a clear contour all round.
• Menus: inset items without an icon start their label where icon items do. Drawer Menu checkbox and radio indicators sit in the icon slot.
• Group and Input Group: A Group of text and an input draws one field frame around both. A trailing Kbd in an Input Group keeps the same inset as a leading icon.
• Docs: Examples use realistic widths, the Pagination examples page, the Button page shows what default-raised is for, and the Group example sizes its overflow trigger like the segments beside it.
• Registry: The 0.3.2 catalog pins this release. Earlier catalogs are unchanged.

0.3.1 — 5 October 2026

• Menus: Checkbox and radio items in Menu, Dropdown Menu, Context Menu and Drawer Menu show their indicator in the leading icon's slot, so their labels line up with the labels of items that start with an icon.
• Docs: The account menus in the Sidebar and Dashboard Shell examples use lucide icons throughout.
• Registry: The 0.3.1 catalog pins this release. Earlier catalogs are unchanged.

0.3.0 — 5 October 2026

• New component: Motion animates whatever appears, leaves or changes: MotionList and MotionItem let items enter, leave and reorder while their neighbors glide, MotionReveal opens and closes a block, MotionSwap fades one content through to the next while the height follows, and MotionNumber rolls each digit of a changing number. Timings come from the motion tokens; reduced motion is instant.
• Motion in the components: Stepper opens the current step and closes the last one, Timeline and Resource List let entries come and go (Resource List moves focus on when the focused row leaves), Field errors expand and collapse, Tag Group tags fade in and out and the group follows its height, Tabs panels fade through, and Pie Chart slices glide to new data. No animation code is needed in your application.
• Surface edges: Card and Card Frame take edge="strong" for a surface on its own color, such as a white page or a card inside a card; SiteplaneUIProvider takes surfaceEdge for a whole application or area, including its overlays. See Card and Providers.
• Stepper: StepperButtonItem shows the step's content below its header and keeps its marker on the connector; Button gains the step-trigger profile for it.
• Fixes: Pie Chart no longer shows the browser's own tooltip next to its own. Reduced motion is read without hydration mismatches.
• Docs: Menu, Context Menu, Dropdown Menu and Command examples give every item a leading icon.
• Registry: The 0.3.0 catalog pins this release. Earlier catalogs are unchanged.

0.2.1 — 4 October 2026

• Button: shape="pill" rounds a button fully at every size; heights, paddings, variants and states stay as they are. See Button.
• Fixes: On touch screens the enlarged touch target of an inline Button stays centered on its label and no longer widens the page.
• Docs: The File Type Icon example uses neutral file names.
• Registry: The 0.2.1 catalog pins this release. Earlier catalogs are unchanged.

0.2.0 — 2 October 2026

• New components: Pie Chart shows shares as a ring, with a brand palette, an empty share and a tooltip that follows the pointer. Navigation Menu opens site sections from a row of links with dropdown panels. File Type Icon shows a file’s type as a document icon with its extension.
• Defaults: Controls default to the lg size (36 px), with or without SiteplaneUIProvider; set size or the provider to keep a smaller size. The page background (bg-background) is the base surface, light gray in Light.
• Color and focus: The accent is oklch(0.55 0.227 274.2) (#5157F2) in both themes. The focus ring stays fully opaque at every pixel density. The five chart colors are blue, orange, teal, purple and gold.
• Buttons and badges: Button gains the profiles field-action (bare icon actions inside fields and code blocks: muted at rest, darker on hover, press and keyboard focus), avatar and navigation-link; the inline profile takes profileTone muted, destructive or accent. IconButton takes count; Badge has count and verified profiles.
• Cards and fields: Card has the variants header, message, inset, elevated and error. A header band with only a title is compact, and a divided footer has equal space above and below its actions. Multi-line fields keep their surface color, text in an InputGroup is 14 px, and Textarea takes minLines.
• Dates and color: A range Calendar shows two months with a month picker per month and optional shortcuts. Date Field, Time Field, Date Time Picker and Date Range Picker follow the control size scale. Color Swatch Picker takes indicator="ring" and image swatches; Color Picker has variant="swatch". A ghost Select trigger draws only its value and caret.
• Navigation and avatars: Sidebar and Sheet offer a fullscreen mobile variant (mobileVariant, variant="fullscreen"); SidebarProvider takes an md or lg mobile breakpoint and can turn off its keyboard shortcut. Sidebar rows keep one 8 px inset, and collapsed rows are 36 px squares. Avatar shows a status dot.
• Fixes: Dark-mode hover and pressed levels, the Popover background, the Select rim, the Skeleton shimmer and the Tooltip shadow now apply. The unchecked Switch track is visible on every surface, Progress moves linearly, and the copy check shows for 2 s.
• Registry: The 0.2.0 catalog pins this release. Earlier catalogs are unchanged.

0.1.5 — 26 September 2026

• Card and Table: A table inside CardFrameBleed lines up with the frame header and footer: its first and last columns take the frame's inset instead of the regular 8 px cell padding. The inset is the new --card-frame-inset custom property on CardFrame (default 1.5rem), which CardFrameHeader and CardFrameFooter now use as well; set it once on CardFrame to change all three. Tables outside a frame are unchanged.
• Registry: The 0.1.5 catalog pins this release. Earlier catalogs are unchanged.

0.1.4 — 25 September 2026

• TypeScript: Installed source and examples compile in applications that enable exactOptionalPropertyTypes. Components no longer pass undefined to React Aria props that don’t accept it, and optional props that are commonly passed on, such as Table sortDescriptor or the size and variant of Autocomplete and Combobox inputs, accept undefined. Component behavior is unchanged.
• Linting: The shared form-reset hook no longer writes a ref during render, so the React Compiler rules in eslint-plugin-react-hooks, as enabled by eslint-config-next, no longer report react-hooks/refs in installed source. Form reset behaves as before.
• Registry: The 0.1.4 catalog pins this release. Earlier catalogs are unchanged.

0.1.3 — 23 September 2026

• Examples: Every component page leads with one realistic example above Installation, followed by focused sections. The catalog has 323 examples: 320 on the 77 component pages and the three application examples.
• Removed: SelectableCard. For options presented as cards, use the card style of Radio Group or Checkbox Group. The 0.1.0 to 0.1.2 catalogs still contain it.
• Theme Toggles: checked means dark mode, and the icon shows the current mode: the sun in light mode, the moon in dark mode. The default accessible name is “Dark mode”. If you passed checked for light mode, invert it.
• Badge: default and destructive are filled; info and error stay tinted. Link badges show hover and focus styles.
• Forms: Date and time fields validate typed dates, connect to Field labels, descriptions and errors, and show the required message. Color Picker, Color Swatch Picker and Input with nativeInput or renderInput connect to Field; a required Color Swatch Picker blocks an empty submission. textSize works on inputs, textareas, input groups and date fields.
• Overlays and menus: Dialog panels scroll between header and footer without a fixed height. Submenu arrows sit at the end of the row. Context Menu trigger widths measure the trigger area.
• Navigation and layout: Sidebar works without the Cookie Store API and marks the active item with aria-current. Tables no longer force an 800 px minimum width, and size="sm" is compact. Stepper announces completed and blocked steps. Breadcrumb, Resource List and ScrollArea names and states are corrected.
• Color and contrast: Muted text meets 4.5:1 in dark mode. Theme classes on <html> override the default tokens. Timeline markers and Sidebar group labels meet contrast requirements.
• Smaller fixes: Slider labels no longer wrap, disabled tags are dimmed, Spinner defaults to 16 px, and the animated buttons default to “Log out” and “Learn more”.
• Deprecated: Footer variant on dialogs, sheets and drawers, and bottomStickOnMobile on dialogs. They will be removed in a future release.
• Registry: The 0.1.3 catalog pins this release. The base item no longer installs internal files, and item categories match the documentation. Earlier catalogs are unchanged.

0.1.2 — 22 September 2026

• Examples: Component pages show realistic application compositions. The catalog has 425 examples: 422 on the 78 component pages and the three application examples. Examples no longer print status messages or JSON, simulate saves or deletions, or add artificial delays.
• Confirm Dialog and Validated Form: Neither fixed recipe renders a status line anymore. Confirm Dialog closes on either decision without reporting a simulated deletion; Validated Form validates its field without an artificial delay or loading state. Review local edits before updating either recipe.
• Documentation: Moving between component pages no longer breaks the table of contents.
• Registry: The 0.1.2 catalog pins this release. The 0.1.0 and 0.1.1 catalogs are unchanged.

0.1.1 — 15 September 2026

• Sidebar and Dashboard Shell: Both pages include complete workspace examples for the push and inset layouts, with a workspace switcher, grouped and collapsible navigation, item actions, an account menu, icon collapse, a resize rail and the mobile sheet.
• Registry: The 0.1.1 catalog pins this release. Component source is unchanged from 0.1.0.

0.1.0 — 10 September 2026

The first stable release includes 78 components, the shared system source and 337 examples, including three installable application examples. A versioned registry and release manifest let applications pin the 0.1.0 source graph.

• ListBoxItem accepts textValue for typeahead when rich option content hides its text.
• The license download includes the copyright and license texts of the three fonts bundled with the documentation.
• Framework guides cover creating a Next.js or Vite project, preparing Tailwind before initialization, configuring the registry and rendering the first component. The theming guide covers a saved light/dark/system choice and theme propagation into dialogs.
• Every component page has installation instructions, an API reference and standalone examples. Guides cover forms, selection, overlays, tables and application layout, plus customization and agent use. Preview, copyable code, raw TSX, Markdown and LLM content use the same pages and example files.

See Help and known limitations for current boundaries.