We follow consistent concepts across all our components to streamline your development workflow. Learn a concept once, and you can apply it across all components.
All components in Reshaped support className and attributes properties.
className allows you to add additional styles to the components. While it can be unsafe to customize existing component styles, it simplifies adding granular mixins. This enables you to apply styles like position, opacity, transform, etc., to a component without extra wrappers. className accepts both a string and an array of values, so you don't need to concatenate the array yourself.
attributes is a common property for passing any React element attributes supported by the HTML element. This means you can access all possible attributes without the risk of overlapping with the component properties, including data- attributes.
Both className and attributes apply to the component's root element. In some cases, we allow applying the same props to other elements. For example, TextField supports an inputAttributes property.
Many of our components resolve unit tokens in runtime instead of providing only a limited number of options. For example, you can pass any number value to the Card padding property.
Number values in such component properties rely on the base unit token multiplier:
// Resolves to x4 unit token, which is 16px in the default theme <Card padding={4} />
All string values resolve to exact CSS values, which works as regular CSS syntax. You can use it to pass % sizes to a component, use formats like vw and vh, get access to CSS variables, and so on:
// Applies passed values in CSS directly <View width="100px" height="100vh" />
Component properties affecting the product layout support responsive syntax. An example of such a property can be Button size or View direction. However, Button color is not responsive. This means that instead of passing a single value for the property, you pass an object specifying the value for multiple viewports.
In Reshaped, we're using a mobile-first approach. Defining a property value for a specific viewport will apply the same value for all wider viewports:
// Regular padding value <Card padding={4} /> // Responsive padding value // x2 on s and m viewports and x4 on l and xl viewports <Card padding={{ s: 2, l: 4 }} />
In case you need to render a completely different component for a specific viewport, use our Hidden utility.
When you start working with Reshaped, take some time to learn about the available utility components. These utilities will likely become the most used components in your application and can drastically reduce the amount of custom styles you usually write.
First, we recommend focusing on the following utilities:
Learning what these utilities are capable of will get you up to speed quickly.
In Reshaped, we ensure we provide as much accessibility out-of-the-box as possible. However, we don't dictate how your product should work or the context in which components are used. Therefore, every component has an accessibility section in its documentation, offering tips and tricks to make your product more accessible. Most of the time, we suggest using specific HTML attributes through the attributes property.
All our styles have automatic RTL support. We leverage CSS logical properties to achieve this without any additional build process or increase in your CSS bundle size. If you're writing additional custom CSS for your product, you can use the same approach and avoid complicating your build process.
All components in Reshaped are isomorphic and support server-side rendering and React server components. You don't need to do anything additional to use our components, but there are two values we don't have access to during server-side rendering: the used color mode and content direction. If you're using server-side rendering (SSR), we ask you to provide their default values:
// RTL with light mode <html dir="rtl" data-rs-theme="reshaped" data-rs-color-mode="light" /> // LTR with dark mode <html data-rs-theme="reshaped" data-rs-color-mode="dark" />
One of our core principles is that most custom behavior and styling can be achieved through composition and theming. If you need to add something to a component or build custom components with their own styles, you can do that.
Our goal is to ensure you have the same developer experience building custom components as we do when building components for Reshaped. We rely on vanilla CSS, including its latest features supported in all major browsers. You get access to all design tokens and values like viewport breakpoints and styling utilities in all your product files.