We're not chasing the quantity of the components in the library, nor we are focusing on building one-off variations of the components. Instead we're focusing on the quallity of the core components that are already familiar to you. You can find them used in most of the products around the web, and our goal is to make your experience using them as simple as possible. We take care of all the implementation requirements, such as accessibility, flexible component architecture and theming, so you can focus on building the product right away.
We don't make assumptions about how your product works and looks. Instead, we produce highly-composable atomic pieces of the UI that are easy to compose together based on your product needs. In addition, we handle all the layout edge cases for you automatically, so combining components becomes as easy as dropping them one into another.
<View width="300px"> <Card padding={0}> <MenuItem startSlot={<Avatar src="/img/landing/author.webp" size={8} />} endSlot={ <Badge size="small" color="critical" rounded> 27 </Badge> } > Open profile </MenuItem> <Divider /> <MenuItem>Manage account</MenuItem> <MenuItem>Add another account</MenuItem> <MenuItem>Sign out</MenuItem> <Divider /> <View padding={2} align="center" direction="row" gap={3}> <Button size="small" variant="ghost"> Privacy Policy </Button> <Button size="small" variant="ghost"> Terms of Service </Button> </View> </Card> </View>
Reshaped has a flexible yet easy-to-use theming approach. We provide you with semantic design tokens like colors or typography values that you can change based on your brand. Any theme you create will keep the interface working on all viewports and provide automatic dark mode support.
<View gap={3} direction="row"> <Button color="primary">Reshaped</Button> <Theme name="twitter"> <Button color="primary" rounded> Twitter </Button> </Theme> </View>
We never make decisions for a short-term benefit that would hurt the product afterwards.
We understand that our components can serve as a foundation for your own design system, so we always think long-term. There is a transparent release strategy with guidelines and scripts for easier migrations. Every time we add new functionality — we're making sure it's future-proof and can be scaled further if needed.
At the same time, we're huge believers in browser native technologies. So we're keeping as few runtime dependencies as possible to avoid getting your product on the libraries you don't need.
We believe that the future of design systems lies in between headless and styled component libraries. While headless libraries allow complete customization, all layout and styling challenges stay out of their scope. On the other hand, styled component libraries usually come with many opinions that might not work for your product.
We're balancing in the middle with various headless components and incredibly flexible styled components. We don't make product decisions for you but let you make faster decisions.