Release 3.0.0

Introduction

Almost every component has been rewritten. This release improves the developer experience and introduces a more consistent API across components. You may also notice that v3 is slightly more compact than v2, with improved usability on mobile devices.

New component

• Toggle Group
• Area chart
• Bar chart
• Line chart
• Pie chart
• Tracker
• Bar list

What's change

• Upgraded to the latest versions of React Aria Components and Tailwind CSS.
• Removed legacy size values (square-petite, extra-small, small, medium, large) from the size prop in Button and Toggle. Now using xs, sm, md, lg, and sq-[xs, sm, md, lg].
• Removed legacy size values (small, medium, large, extra-large from the size prop in Avatar. Now using xs, sm, md, lg, xl.
• Removed the shape prop from Button, Badge, Tag, and Toggle. Use the isCircle prop instead.
• Removed focusRing and focusStyles from primitive.ts—they are no longer used.
• classNames remove for both Sheet and Modal components. Now, you can use the className prop to customize the styles on the Modal.Content and Sheet.Content components.
• We make default gap=0 and columns=1 for Choicebox component.
• Add Loader to FileTrigger when the pending state is true.
• We no longer use Compound Pattern in Tabs component. Instead, we use a more straightforward approach with Tabs, TabList, Tab, and TabPanel components.
• We also remove motion from Tabs component, so you can use any animation library you prefer or leave it unanimated.
• The Chart component has been completely rewritten to use the latest version of Recharts (v3).

Toggle Group

The ToggleGroup component has been introduced to provide a more intuitive way for users to switch between multiple options, supporting both single and multi-selection modes.

Button

The Button component has undergone significant changes, including the removal of the shape prop and the introduction of the isCircle prop. The size values have also been updated to be more concise.

// Before
<Button size="small" shape="circle">Press me</Button>

// After
<Button size="sm" isCircle>Press me</Button>

// ---

// Before
<Button size="square-petite">Press me</Button>

// After
<Button size="sq-sm">Press me</Button>

Toggle

The Toggle component has been updated to use the new size values and the isCircle prop. The shape prop has been removed.

// Before
<Toggle size="small" shape="circle">Toggle me</Toggle>

// After
<Toggle size="sm" isCircle>Toggle me</Toggle>

// ---

// Before
<Toggle size="square-petite" shape="circle">Toggle me</Toggle>

// After
<Toggle size="sq-sm" isCircle>Toggle me</Toggle>

CheckBox and Radio

We’ve improved the user experience on Checkbox, CheckboxGroup, and RadioGroup by allowing direct use of Label and Description components inside them. This gives you more flexibility to customize content. If you prefer using the label and description props, they’re still fully supported.

<CheckboxGroup>
  <Label>User Permissions</Label>
  <Description>Select the permissions you want to grant to the user.</Description>
  <Checkbox value="read">
    <Label>Read</Label>
    <Description>Can view content but cannot make changes.</Description>
  </Checkbox>
  <Checkbox value="write">
    <Label>Write</Label>
    <Description>Can create and modify existing content.</Description>
  </Checkbox>
</CheckboxGroup>

<RadioGroup name="billing">
  <Label>Billing Cycle</Label>
  <Description>Select how often you'd like to be billed</Description>

  <Radio value="monthly">
    <Label>Monthly</Label>
    <Description>Billed every month</Description>
  </Radio>
  <Radio value="quarterly">
    <Label>Quarterly</Label>
    <Description>Billed every 3 months</Description>
  </Radio>
  <Radio value="yearly">
    <Label>Yearly</Label>
    <Description>Billed once per year with a discount</Description>
  </Radio>
</RadioGroup>

Component "controls/checkbox-group/switch-description-demo" not found in the registry.

Switch

The Switch component now supports descriptions. You can use the label and description props, or use the Label and Description components directly—both approaches work.

<Switch
  label="Enable Notifications"
  description="Receive updates and alerts via email"
/>

<Switch>
  <Label>Enable Notifications</Label>
  <Description>Receive updates and alerts via email</Description>
</Switch>

Charts

We've completely rewritten the charts to use recharts v3. We're also introducing dedicated components for common chart types: AreaChart, BarChart, LineChart, and PieChart.

Area Chart

Bar Chart

Line Chart

Pie Chart

Primitive

We also now changes the composeTailwindRenderProps to accept ClassNameValue, so you might want to update it manually if you already have one.

"use client"

import { composeRenderProps } from "react-aria-components"
import { type ClassNameValue, twMerge } from "tailwind-merge"

function composeTailwindRenderProps<T>(
  className: string | ((v: T) => string) | undefined,
  tailwind: ClassNameValue,
): string | ((v: T) => string) {
  return composeRenderProps(className, (className) => twMerge(tailwind, className))
}

export { composeTailwindRenderProps }