Upgrading

Fix the two type errors first

The earth tone is gone

earth is removed from ComponentTone, from every tone map and from the tokens, so every tone="earth" is a type error. sun is the closest replacement, or forest if you relied on it reading cool rather than warm. --fuji-earth no longer exists either.

// Before
<Badge tone="earth">Draft</Badge>

// After
<Badge tone="sun">Draft</Badge>

Glass is a material, not a theme

theme accepts light or dark, and glass moves to its own material setting (solid or glass), so either theme works in either material. Replace theme="glass" with theme="dark" material="glass". Glass takes its tint from the theme: light glass has white surfaces and dark text, dark glass the reverse.

// Before
<FujiProvider theme="glass">
  <App />
</FujiProvider>

// After
<FujiProvider theme="dark" material="glass">
  <App />
</FujiProvider>

A visitor's saved {"theme":"glass"}preference is read as dark + glass, so nothing changes for them. To tint one region differently, nest a provider with that region's theme and material="glass" declared again, because a nested provider does not inherit the settings you leave out. See Theming.

Glass no longer paints a background

Glass used to paint its own fixed background and a gradient atmosphere. It now sits on the active theme's background, so an app that relied on the gradient shows a flat page instead. Add the shipped fuji-glass-atmosphere class to bring the gradient back, or put your own backdrop, such as a photo or a brand gradient, behind the glass. The class does nothing under solid, so it is safe to leave on.

<FujiProvider theme="dark" material="glass">
  <div className="fuji-glass-atmosphere min-h-screen">
    <App />
  </div>
</FujiProvider>

Renamed props

tone is for decorative color and variant for semantic status. Four components used those words for something else. The exported types follow: LinkColor is now LinkTone, and TypographyVariant is now TypographyScale.

<Skeleton shape="circle" />
<Typography scale="heading">Title</Typography>
<Link tone="blue" hoverTone="default" href="/docs">Docs</Link>
<Container width="md">…</Container>

Changed defaults

Carousel no longer autoplays. Self-starting motion that runs for more than five seconds is a WCAG 2.2.2 requirement for the page that ships it, so autoplay is now something you ask for.

<Carousel autoplay>…</Carousel>

Markup changes that can affect tests

None of these needs a code change, but they change the DOM, so snapshot tests and role queries may need updating.

• Sidebar renders nav instead of aside, labelled "Sidebar".
• Navbar and BottomNavigationare labelled "Main" by default.
• Dialog's close button comes after its content in the DOM, so initial focus lands on your content. It stays in the same place on screen.
• Sortable DataTable headers carry aria-sort, and the sort button's name gains the state ("Name, sorted ascending"), so match those names by prefix.
• Dropzoneis named "Upload files" instead of by its description; change it with label.
• A chart is one tab stop. Arrow keys move between points and series, and Escape leaves.
• ChatBubble keeps the sender in the accessibility tree when grouped.
• Calendar days are named with the full date, and today carries aria-current="date".
• Timelineitems start with their status ("Error: Deployment failed"); change or remove it with statusLabel.
• BottomNavigation is position: sticky by default instead of fixed, so it stays inside its own scroll container. Pass position="fixed" for the old behavior.

New components and props

• InfiniteScroll: loads the next page when the end of a list scrolls into view, including around DataTable.
• FloatingActionBar: a speed dial that fans labelled actions out from a circular trigger.
• Keyboard: an on-screen keyboard with full, tkl, compact, numpad and phone layouts.
• Card: effect="lift" or effect="tilt" for its hover treatment. interactive still works but is deprecated.
• Charts: headline, stats, icon and actions on every chart, highlight and average on bar charts, curve, strokeWidth and area on line charts, and animation between data sets.
• Carousel: effect="coverflow".
• Tabs: Tabs.List variant="pill".
• BottomNavigation: variant="floating", a centre action, onItemSelect and position.
• Toast: toasts stack and fan out on hover, and Toaster takes position.
• Drawer: Drawer.Content variant="sheet" for a detached card on any side.
• CommandMenu: works uncontrolled, with defaultOpen.
• Button and IconButton: play a press ripple by default. Pass ripple={false} to turn it off on a control.
• CircularProgress: size accepts a pixel diameter, plus thickness.
• Notification: avatar, badge, media and layout="inline".
• Timeline: groups for a history layout, and statusLabel on items.
• Stepper: StepperStep takes disabled.
• Dropzone: takes label.
• buildAppearanceBootstrapScript: applies a saved appearance before the first paint, so persist no longer flashes the defaults.
• --fuji-radius-item is a fourth radius tier for rows and chips inside a control (6px cornered, 10px soft), and --fuji-text-2xs (11px) sits below xs.
• registry.json describes the package for tools, and the MCP server serves it to coding agents.

Visual changes

The token layer was rebuilt, so components look different without any API change: surfaces are defined by shadow rather than a border, radius and elevation differ more visibly, glass layers blur and translucency over the active theme, and motion is shared across components. If you copied Fuji's colors, shadows or radii into your own CSS, check them against @fujiui/react/tokens.css.