Release 2.4.0 · formaat-design/reshaped

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