What's Changed

• fix(rate): prevent name prop from overriding internal component styling by @simonguo in #4455
• docs: update component thumbnails with new visual design by @simonguo in #4457
• docs(storybook): update v6 component stories by @simonguo in #4458
• fix(CheckTree): allow parent nodes to be selected when all children are disabled by @simonguo in #4446
• fix(Form): call onChange when reset() is invoked on controlled form by @simonguo in #4444
• fix(Breadcrumb): forward props correctly when using as prop in BreadcrumbItem by @simonguo in #4450
• fix(Checkbox): set indeterminate property for screen reader support by @simonguo in #4448
• chore(docs): integrate next-sitemap for sitemap.xml by @simonguo in #4464
• feat(DateInput): support AM/PM toggle with 'a' and 'p' keys by @simonguo in #4443
• feat(build): export SCSS source files to npm package by @simonguo in #4445
• feat(Tree): add Home and End keyboard support for accessibility by @simonguo in #4449

Full Changelog: v6.0.1...v6.1.0

What's Changed

• docs(guide): upgrading from v5 to v6 by @simonguo in #4436
• docs(llms): add simple and full versions of LLMs.txt by @simonguo in #4451
• fix(Panel): change PanelHeader default element from Heading to div for better semantics by @simonguo in #4453
• fix(picker): separate pickerType from name prop to fix data-picker attribute by @simonguo in #4452
• fix(panel): handle fragment header children safely by @simonguo in #4454

Full Changelog: v6.0.0...v6.0.1

React Suite (rsuite) v6 is now available. This release focuses on modernizing the foundation: the styling system has been rebuilt, new layout primitives were added, and responsiveness plus the overall developer workflow received targeted improvements. The goal is to keep the library stable while making it easier to adapt to contemporary UI requirements.

1. Style System Overhaul: CSS Variables by Default

The most fundamental change in v6 is the migration from Less to SCSS with CSS variables as the primary theming interface. Updating theme values is now as simple as overriding variables at runtime—no rebuilds or tooling tweaks required.

Consult the CSS Variables guide for the full variable list, and try the Palette tool to fine-tune brand colors visually.

Additional Style Improvements

• Logical properties: margin-inline-start etc. replace physical properties for native RTL support.
• rem units: font sizes, spacing, and component dimensions now use rem to cooperate with responsive typography and accessibility scaling.

2. AI-Ready Documentation and Tooling

v6 includes first-class support for AI-assisted workflows, making it easier for tools like Cursor or Windsurf to reason about RSuite APIs.

LLMs.txt

Following the llms.txt standard, the docs site now exposes /llms.txt, a machine-readable index optimized for large language models. AI tools can retrieve up-to-date component APIs, usage notes, and examples, reducing hallucinations.

MCP Server

The official Model Context Protocol (MCP) server lets AI agents read RSuite knowledge directly:

• Real-time retrieval of component docs and props.
• Context-aware suggestions that adapt to the code you are writing.
• Lower error rates thanks to grounding answers in first-party docs.

3. Atomic Layout Building Blocks: Box & Center

v6 introduces foundational layout primitives so you can compose complex UIs without leaving JSX.

Box

Box exposes spacing, color, and layout props directly on the component, removing the need for ad-hoc CSS classes.

import { Box, Button } from 'rsuite';

function App() {
  return (
    <Box p={20} m={10} bg="gray-100" borderRadius={8} display="flex" justifyContent="space-between">
      <h2>Welcome to v6</h2>
      <Button appearance="primary">Get Started</Button>
    </Box>
  );
}

Center

Center solves vertical + horizontal centering with a single component:

import { Center } from 'rsuite';

<Center height={200} className="bg-blue-50">
  <div>Perfectly Centered Content</div>
</Center>;

4. End-to-End Responsive Enhancements

Core components were revisited to ensure consistent behavior across screen sizes.

• Grid redesign: Row/Col now support object-based breakpoints for clearer responsive rules.

  <Row align="center" justify="space-between">
    <Col span={{ xs: 24, md: 12, lg: 8 }}>...</Col>
    <Col span={{ xs: 24, md: 12, lg: 8 }}>...</Col>
  </Row>

• Navbar & Sidenav: Navbar.Content replaces the deprecated pullRight, enabling predictable layouts on mobile.

  <Navbar>
    <Navbar.Brand>BRAND</Navbar.Brand>
    <Navbar.Content>
      <Nav>...</Nav>
    </Navbar.Content>
    <Navbar.Content>
      <Avatar />
    </Navbar.Content>
  </Navbar>

• Picker family: automatically switches to touch-friendly interactions on small screens.

5. New Components and Hooks

Beyond layout primitives, v6 introduces practical components and hooks to cover more real-world scenarios.

Components

• SegmentedControl: modern segmented switch for view or filter toggles.
• PasswordInput: built-in show/hide toggle for password fields.
• PinInput: OTP/PIN entry with auto focus and intelligent paste handling.
• Textarea: dedicated multiline input with consistent styling.
• Kbd: display keyboard shortcuts in docs or product UIs.
• Link: unified link styling with accessibility-friendly defaults.
• Menu & MegaMenu: flexible navigation for large information architectures.
• Form.Stack: replaces layout props on Form, offering predictable spacing and alignment.

<Form>
  <Form.Stack layout="horizontal" spacing={20}>
    <Form.Group>
      <Form.Label>Username</Form.Label>
      <Form.Control name="username" />
    </Form.Group>
    {/* ... */}
  </Form.Stack>
</Form>

Hooks

• useDialog: manage modal dialogs via function calls instead of manual state wiring.

  const dialog = useDialog();
  
  const handleClick = async () => {
    const result = await dialog.confirm({
      title: 'Confirm action',
      children: 'Are you sure you want to proceed?'
    });
    if (result) {
      console.log('Confirmed');
    }
  };

• useFormControl: create custom form controls with built-in validation state handling.

6. Developer Experience Improvements

• Vitest adoption: the test suite moved from Karma/Mocha to Vitest for faster feedback loops.
• TypeScript fidelity: refined component exports and new Schema type re-exports for better IntelliSense.
• Bundle size discipline: size-limit checks improve tree-shaking.
• Tooling ecosystem: Bun installation steps are documented to match modern toolchains.
• Runtime diagnostics: useToaster warns when used outside CustomProvider, helping catch misconfiguration quickly.

7. Additional Enhancements

• Badge: new size, outline, placement, and shape options.

  <Badge content="New" size="lg" outline />
  <Badge content={99} shape="square" placement="bottomEnd" />

• Breadcrumb: refreshed defaults for better visual balance.

• DatePicker: toolbar layout tweaks for clearer interactions.

• Progress: indeterminate animation plus segmented progress support.

• TreePicker: onlyLeafSelectable enforces leaf-only selection when needed.

• Button: toggle state support.

• InputGroup: improved visuals for inside buttons.

• Dependency updates: Date-fns 4.x, Prettier 3.x, and other core packages are aligned with current ecosystems.

Get Started

React Suite v6 is available on npm:

npm install rsuite@latest

Refer to the migration guide for detailed upgrade instructions.

If you find the release useful, leave a star on GitHub or share your experience in Discussions.

React Suite Team

What's Changed

• fix(Table): improve header alignment and expand/collapse animations by @simonguo in #4360

Full Changelog: v5.83.2...v5.83.3

What's Changed

• feat(Stat/StatTrend): add 'equal' trend indicator by @paul-prism in #4351
• build(deps): bump rsuite-table from 5.19.1 to 5.19.2 by @simonguo in #4354
• fix: Progress.Circle properties do not include width (#4352) by @paul-prism in #4353

New Contributors

• @paul-prism made their first contribution in #4351

Full Changelog: v5.83.1...v5.83.2

What's Changed

• fix: allow TimePicker and TimeRangePicker locale prop to override global locale by @simonguo in #4333

Full Changelog: v5.83.0...v5.83.1

What's Changed

• feat: add Gujarati [gu_IN] locale by @shatishdesai202 in #4309
• feat(DateRangePicker): add calendarKey prop to renderTitle function by @simonguo in #4318

New Contributors

• @shatishdesai202 made their first contribution in #4309

Full Changelog: v5.82.0...v5.83.0

What's Changed

• Add Ukrainian (uk-UA) localization for DateRangePicker and other components by @mayzer100500 in #4288
• feat: [feature/th_TH-locale] add Thai [th_TH] locale by @tnitsiri in #4299

New Contributors

• @mayzer100500 made their first contribution in #4288
• @tnitsiri made their first contribution in #4299

Full Changelog: v5.81.0...v5.82.0

What's Changed

• fix: correct locale code for Spanish (Spain) by @simonguo in #4293
• feat(CheckTreePicker): support onCascadeChange prop by @myNameIsDu in #4287
• fix(toaster): fix issue where delayed closing affects state by @simonguo in #4294

Full Changelog: v5.80.3...v5.81.0

What's Changed

• fix(InlineEdit): reset input value to original on cancel instead of preserving edited value by @nandobutzke in #4283

Full Changelog: v5.80.2...v5.80.3