We follow the same concepts across all our components to bring consistency to your development workflow. If you learn a concept once, you won't have to learn it again once you start using another component.
All components in Reshaped support className and attributes properties.
className is a way to mix additional styles to the components. It might be unsafe when you're using it trying to customize existing component styles, but it can also make your life easier when you need to add granular mixins. That might allow applying styles like position, opacity, transform, etc., to a component without adding additional wrappers. className accepts both a string and an array of values; you won'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.
Note that 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 work with any passed value in the runtime instead of providing a limited number of options. For example, you can pass any number value to the Card padding property. Since we want to ensure components still use tokens, we separate the syntax for them.
All the number values in the 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 property can be a Button size or View direction. However, Button color is not responsive. It 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, so defining a property value for a specific value 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, you can use our Hidden utility.
When you start working with Reshaped, take some time to learn available utility components. These utilities will likely become the most used components in your application and can drastically reduce the number of custom styles you usually have to write.
First of all, we recommend paying attention to the following utilities:
Learning what these utilities are capable of should get you up to speed extremely fast.
In Reshaped, we make sure we provide as much accessibility out-of-the-box as possible. However, we don't have opinions on how your product should work or the context of where components are used. Because of that, every component has an accessibility section in its documentation, suggesting common 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're leveraging CSS logical properties to achieve this without any additional building process or increasing your CSS bundle size. If you're writing additional custom CSS for your product, you can use the same approach and avoid making your product build process more complicated.
All components in Reshaped are isomorphic and support server-side rendering. You don't have to do anything additional on your side to use our components, but there are two values we don't have access to during the server-side rendering: used color mode and content direction. That's why if you're using SSR, we ask you to provide default values for them:
// RTL with light mode <body dir="rtl" data-rs-theme="reshaped" data-rs-color-mode="light" /> // LTR with dark mode <body 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 totally do that.
Our goal here is to make sure that you have the same developer experience in building custom components as we have when building components for Reshaped. We're relying on vanilla CSS, including its latest features supported in all major browsers. You get access to all design tokens and values like viewport breakpoints or styling utilities in all of your product files.