React Suite v6: A Steady Step Toward Modernization

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