2.4.0

Full web changelog · Documentation

npm install reshaped

Table component

<View width="280px" maxWidth="100%">
  <Table border>
    <Table.Row highlighted>
      <Table.Heading>Product</Table.Heading>
      <Table.Heading align="end" width="auto">
        Price
      </Table.Heading>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Coffee</Table.Cell>
      <Table.Cell align="end">$4</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Sandwich</Table.Cell>
      <Table.Cell align="end">$6.50</Table.Cell>
    </Table.Row>
  </Table>
</View>

We're adding a new Table component that provides common compound components for rendering individual table elements and gives you a lot of flexibility through composition.
This approach allows teams to build both, simple table with text content and rich tables with interactive content that are integrated with libraries like TanStack Table.

Theme previews

With the recent theming improvements, we're adding a new website page for previewing theme values on a real component examples.
This is a first step towards making it easier to create new themes.
In the upcoming releases, we're planning to expand its functionality with user interface for the runtime theme editing and theme values auto-generation.

Other improvements

• Documentation: Updated website performance
• Documentation: Added examples of working with theming settings based on user preferences and local storage before the React hydration

Button

• Fixed margin value for the Button.Aligner used with ghost buttons

Card

• Added selection transition

Checkbox

• Added transition for the indeterminate state

Tabs

• Added auto-scrolling when selecting items if Tabs.List is scrollable

View

• Added space-between value for the justify property

2.3.1

Full web changelog · Documentation

npm install reshaped

Focus trapping:
Fixed navigation edge cases for the hover trigger type causing the trap to be triggered without any focusable elements inside the flyout

2.3.0

Full web changelog · Documentation

npm install reshaped

Runtime theming

We have added a new way to work with themes without building them using our CLI ahead of time.
With the new runtime theming feature, you can create new themes directly in the browser and insert them as a style tag, or create themes dynamically in Node.js and return css file contents.

Button group component

We're adding a new compound component for Button – Button.Group, which lets you wrap any number of buttons to colocate multiple actions together.
It leverages the composition approach, which means you can combine items with other components like DropdownMenu.

Other improvements

• Figma: Updated component style relations to improve the experience of switching color modes.
  Original issue is reported to the Figma team but let us know if you see any styles left that might be not respecting the mode without refreshing the page so we can patch those individual components.

Actionable

• Fixed cases when onClick was triggered multiple times on Enter key press

Autocomplete

• Added correct positioning support inside scrollable areas
• Added trapFocus support for the dynamically rendered content

Checkbox

• Removed default browser tap highlight on mobile devices

DropdownMenu

• Added correct positioning support inside scrollable areas
• Added trapFocus support for the dynamically rendered content

Popover

• Added correct positioning support inside scrollable areas
• Added trapFocus support for the dynamically rendered content

Radio

• Removed default browser tap highlight on mobile devices

Select

• Fixed the color of the chevron icon when using the disabled state

Switch

• Removed default browser tap highlight on mobile devices

Tabs

• Added support for wrapping Tabs.Item with framework router link components and other custom wrappers
• Added href support for Tabs.Item
• Added attributes support for Tabs.Item

Toast

• Fixed an edge case when toast.hide is called immediately after toast was triggered