Changelog
Latest updates and features. See what changed in each release.
Patch changes
- b06e35b
Allow unprefixed Dialog max-width classes to override the default viewport cap at desktop breakpoints.
Minor changes
- 7401701
Sidebar: mobile rewrite, smooth collapse transitions, and new props
New features:
mobileBreakpointprop on Provider — configurable viewport width for mobile detectioncontentClassNameprop on Sidebar root — pass-through class for the inner content container- Controlled mobile state —
openprop now controls the mobile sidebar too, not just desktop
Fixes:
- Replaced Base UI Dialog mobile sidebar with a plain
<nav>+ backdrop for simpler, more predictable transitions - Collapsible sections now animate closed smoothly when the sidebar collapses instead of snapping shut
- Removed
hiddenclass fromSidebar.MenuSubso sub-menus participate in collapse animations - Removed
inertValueReact-version helper —SidebarSlidingViewnow setsinertimperatively for React 18 compatibility - Restored
inerton closedSidebarCollapsibleContentwhile removing itsdata-openattribute
Styling:
bg-kumo-tint→bg-(--sidebar-active-bg)CSS variable for active/hover/focus backgrounds- Icon opacity
0.5→0.4; chevron gains hover opacity transition - Header gains
shrink-0and animated padding on collapse - Content scroll area gains animated
gaptransition andtabIndex={-1}on viewport - Sliding views container gains
max-w-(--sidebar-width)to prevent overflow - Mobile sidebar uses
--sidebar-animation-durationCSS variable for slide transition
Patch changes
- f957dbc
Add React 18 and React 19 compatibility checks for Kumo tests.
- ac46184
Fix
Chart(andSankeyChart) rendering in dark mode. The chart canvas now stays transparent so the surroundingbg-kumo-*surface shows through symmetrically in both modes, and ECharts' built-in"dark"theme is applied whenisDarkModeis true so the tooltip card, axes, splitLines, and legend text are themed correctly. - e25a3d6
fix(sidebar): add text truncation with ellipsis to Sidebar.MenuButton content
Previously,
Sidebar.MenuButtonusedoverflow-hiddenwhich clipped long text without showing an ellipsis. Now usestruncateto matchSidebar.MenuSubButton's behavior. - d3feec0
Fix segmented
Tabsscroll fade, scroll-into-view, and ring styling:- Rewrite CSS scroll-fade masking to use
@property-animated custom properties, fixing proportional fade rendering across browsers. - Scroll the selected tab into view on click so it stays visible in overflowing tab lists.
- Move
ring ring-kumo-hairline/70from the inner list to the root container so the segmented variant ring wraps the entire component correctly.
- Rewrite CSS scroll-fade masking to use
- f831482
Fix Flow connector rendering in Firefox by emitting valid SVG path data without array commas and setting visible overflow on the SVG element attribute.
- 4a8b992
Restore React 18-compatible Sidebar inert attribute handling while keeping the full React compatibility CI suite.
Patch changes
- 2daa237
Fix Combobox and Autocomplete rendering in React 18 by using the explicit context provider API.
Minor changes
- b93d881
Update Banner to use borderless tinted styling by default and add a secondary variant.
- a9a1526
Re-export
useFilterfromComboboxandAutocompletenamespaces. Use it to write customfilterprops that preserve Base UI's default case- and accent-insensitive matching viaIntl.Collator. - 3db8294
Sidebar: comprehensive modernization
Breaking changes:
- Removed
Sidebar.Input— build custom search triggers inline - Removed
Sidebar.MenuAction— unused in practice - Removed
Sidebar.GroupContentand group-level collapsible props (collapsible,defaultOpen,open,onOpenChange) fromSidebar.Group— useSidebar.Collapsibleat the item level instead - Replaced Base UI Collapsible dependency with custom CSS grid-rows implementation
SidebarStatetype is now"expanded" | "collapsed" | "peeking"(was"expanded" | "collapsed")
New features:
containedprop on Provider — absolute positioning for embedded/demo sidebarspeekableprop on Provider — hover/focus collapsed sidebar to temporarily expandanimationDurationprop on Provider — configurable animation timingSidebar.SlidingViews+Sidebar.SlidingView— animated horizontal transitions between navigation surfaces- Animated
SidebarPanelIconreplacing PhosphorSidebarSimpleIcon - Enhanced
Sidebar.Triggerwitharia-expandedand dynamicaria-label - Keyboard-accessible resize handle (arrow keys, Home, End)
- Custom
Sidebar.Collapsiblewith keyboard auto-expand on focus
Token/styling fixes:
border-kumo-hairline→border-kumo-linethroughout- Hardcoded
duration-250→--sidebar-animation-durationCSS custom property bg-kumo-base→bg-(--sidebar-bg)for theme overridability- Focus styles:
ring-2/ring-kumo-brand→outline-none/text-kumo-strong/bg-kumo-tint - Icon opacity-50, updated spacing (header h-58px, footer h-12, menu gap-y-px)
isolateon sidebar root with low z-index (z-1, z-2) instead of z-20/z-50- Mobile sidebar now has correct
data-state/data-side/data-variant/data-collapsibleattributes
- Removed
- 18f5e42
TimeseriesChart: React tooltip with Base UI positioning
Replaces ECharts' HTML-string tooltip with a React component positioned by Base UI's Tooltip primitive:
- Tooltip rendered as a React component with correct theme tokens — no more inline styles or
getComputedStylehacks - Positioning handled by Base UI Tooltip (Floating UI), with automatic collision avoidance and viewport flipping
- New
tooltipFollowCursorprop:"both"(default, free-following) or"x"(axis-locked, Recharts-style) - New
tooltipModeprop:"all"(default) or"single"(nearest series to cursor) - New
tooltipMaxItemsprop: caps rows in"all"mode with+N morefooter (default10) - Date formatted with
Intl.DateTimeFormat(locale-aware) instead of ISO string - Values sorted descending; fallback formatter avoids scientific notation
- Tooltip rendered as a React component with correct theme tokens — no more inline styles or
Patch changes
- ab273fe
Banner: replace
dark:Tailwind variants with newkumo-banner-infoandkumo-banner-warningsemantic tokens so dark-mode opacity is baked into the design system. No visual change. - 351fac9
fix(styles): show pointer cursor on clickable Kumo elements by default
Adds a global
cursor: pointerrule scoped to elements rendered by Kumo components, identified by the newdata-kumo-componentanddata-kumo-partattributes. Interactive component roots and parts now opt into the rule by setting these attributes, which gives the library a stable scoping primitive that doesn't couple to Tailwind class names.Components updated to set
data-kumo-component/data-kumo-part: Button, LinkButton, Link, Checkbox, Radio, Switch, Select (trigger, option), DropdownMenu (item, link-item, checkbox-item, radio-item, submenu-trigger), Combobox (trigger, item, clear, chip-remove), Autocomplete (item), Dialog (trigger, close), Popover (trigger), Tabs (tab), Collapsible (trigger, default-trigger), Breadcrumbs (link), TableOfContents (item, group-link), Sidebar (menu-button, menu-sub-button, trigger, rail), MenuBar (option), Toast (close), SensitiveInput (toggle-visibility, copy, masked-container). - 3db8294
fix(sidebar): collapsed state styling, transitions, and sliding views
- 6d5d9f0
Add
flex items-centertoComboboxBase.IconinTriggerInputfor consistency withTriggerValueandSelect - 5081d35
Fix
Selectplaceholder not showing whenrenderValueis provided and the value is empty. - 9d4a2ff
Update semantic color tokens to better represent status icons and indicators:
- Adjust status token values in the theme generator and refresh generated theme output
- Update toast and badge status background treatments
- Update docs to reflect new tint token usage
- 1585bfe
Adjust toast visual styling for improved readability and emphasis: increase background tint intensity for success/warning/info variants, refine description text contrast, and update close-button icon contrast.
- 6e9b524
Fixed vertical alignment of checkbox and radio indicators with multi-line labels.
When label text wrapped to multiple lines, the indicators were vertically centered against the entire text block. They now align to the top, sitting next to the first line of text.
- 729caa3
echarts is now an optional peer dependency. If you don't use Chart components (Chart, TimeseriesChart, SankeyChart), it will no longer be installed automatically. If you do use them, run npm install echarts (as documented).
Minor changes
- b68caba
Added
Badgedot styling as a new variant for indicators that need a subtle visual cue. Updated badge docs and demo examples to reflect the new badge variant and dot-style behavior.
Patch changes
- a210c9c
Update Base UI to 1.5.0.
- 64a4bda
Fix InputGroup focus ring thickness and color: container mode uses 1.5px ring (wraps entire group including buttons), hybrid container zone and individual mode use 1px ring (thin to avoid colliding with adjacent buttons), and all modes use
ring-kumo-focus/50(50% opacity) to match the standalone Input component. - 0003bf5
Fix error state red border on Combobox, Select, Autocomplete, and SensitiveInput to match Input behavior
- 4f2b47c
Add inline label layout and fix auto-assigned node colors in tooltips
- 0e79214
Fix Tooltip popup overflowing viewport when content is wider than available space. The popup now constrains its width to
var(--available-width), a CSS variable provided by Base UI's Positioner that reflects the space between the trigger and the viewport edge.
Patch changes
- 94d0c22
Fix language alias normalization in ShikiProvider
- Add
normalizeLanguage()function that maps common language aliases (js, ts, sh, yml, py, md, gql) to their canonical SupportedLanguage names - Normalize language aliases in
ShikiProviderwhen preloading grammars, so passing['js', 'ts']works the same as['javascript', 'typescript'] - Normalize language aliases in
highlight()hook at runtime, so code fences usingjsortshighlight correctly without warnings - Export
normalizeLanguagefrom@cloudflare/kumo/codefor consumers who need to normalize aliases themselves - Intentionally omit
mdxalias since MDX has a distinct grammar that would lose JSX highlighting if mapped tomarkdown
- Add
Patch changes
- 57bbe62
fix(banner): remove variant selection background for legibility
Selected text inside
Bannernow uses the browser default selection color instead of a same-hue variant-tinted background. The previousselection:bg-kumo-{info,warning,danger}utilities produced low contrast between the selection background and the variant text color (most notably in light mode for theerrorandalertvariants), making selected text hard to read. - 3d80fe7
Add
leftandrightprops to SankeyChart for controlling series layout padding - 194aea8
Fix tooltip popup exit transitions by animating the Tailwind
scaleproperty alongside opacity.
Minor changes
- 228a9c4
Add
passwordManagerIgnoreto Input for suppressing password manager overlays on non-credential fields. - da502ce
Add scroll fade to segmented tabs. When tabs overflow, gradient masks appear on the edges based on scroll position via scroll-driven animations (Chrome 115+, degrades gracefully). Scrollbar is hidden; the fade is the scroll affordance.
- 59b6590
Add
size="sm"variant to Tabs component (h-6.5 / 26px, matching Input sm) - 798c2da
Forward
toastManagerprop on<Toasty>so code outside the React tree (timers, query-cache listeners, module-load callbacks) can dispatch toasts via a manager created bycreateKumoToastManager(). Also surfacecreateKumoToastManageron the top-level package export (previously only available via the deep@cloudflare/kumo/components/toastpath).
Patch changes
- bccc684
Add transparent background to SankeyChart component
- 974277f
Expose
optionUpdateBehaviorprop onTimeseriesChartto control how ECharts applies option updates - 8d43b8b
Add
hideLabelprop to Field so components can skip the native<label>while keeping description/error wiring. Use it in Select with Base UI'sSelect.Labelto fix hover/focus coupling between the label text and trigger. - 93d04bd
fix(input): render error and description props without requiring a label
- 862389a
fix(radio): prevent radio button distortion with long labels by adding
shrink-0to the default appearance radio indicator - 1bfbc0e
Fix overflowing segmented Tabs drag-to-scroll interactions so mouse and touch drags reliably scroll while normal tab clicks still activate tabs.
Minor changes
- 8a33813
Create Sankey Chart component
Patch changes
- a21cc3a
Fix CommandPalette List bottom ring being clipped by Footer background. Add scroll padding to prevent items from clipping behind rounded corners.
- 0414c54
Deprecate
toprop on Link in favor ofhref. Thetoprop is a routing-framework concept that doesn't belong on a presentational component. Usehreffor all link destinations and configure aLinkProviderwrapper to bridge to your router.tocontinues to work but emits a dev-mode deprecation warning. - 8b12a4c
Allow
LayerCard.PrimaryandLayerCard.Secondaryto accept all standard HTML div attributes, includingdata-testidfor testing. - 7d8ec27
Set
cursor-defaulton Tooltip triggers so disclosure buttons don't appear clickable. Overridable viaclassName.