Professionally crafted React & Figma components for building beautiful products or starting your own design system
Reshaped gives you a head start by solving common
design system challenges for both design and development
<Card padding={0}> <View padding={2} gap={3} direction="row" align="center"> <Image width={12} height={12} borderRadius="medium" src="/img/examples/avatar-food.webp" /> <View.Item grow> <Text variant="body-3" weight="bold">Food</Text> <Text variant="caption-1" weight="medium">247 results</Text> </View.Item> <Button rounded variant="ghost" icon={IconHeart} /> </View> <View backgroundColor="neutral-faded" paddingInline={2} paddingBlock={1}> <Text variant="caption-2">Sponsored</Text> </View> </Card>
Instantly get up to speed with the features you could find in the most advanced design systems in the industry.
Reshaped is using React as the only runtime dependency. It doesn’t require you to install any css-in-js library to start using it.
You don’t have to design or write your styles twice anymore. Reshaped semantic tokens automatically apply themes and color modes even for the custom components you build.
Stop fighting with media queries. Adjust your styles based on the viewport size without writing custom styles with out responsive syntax.
All components are WCAG and WAI-ARIA compliant. From color contrast to screen reader navigation – your product will be much easier to use for everyone.
Our codebase is written in TypeScript and all component properties are fully typed. When using Reshaped, you automatically get code autocompletion and error validation right in your editor.
Learn the best practices of each tiny bit of the system with our documentation. We packed it with many contextual tips, interactive playgrounds, and component examples.
With our theming CLI you can easily create new themes, add more design tokens and export the data to other design token tools.
Single-line configuration to access all Reshaped design tokens in Tailwind classnames.
We ship code and design libraries together. Everything in Figma library is available in code with the same properties and is built using the latest features, like Figma Variables.
Before even starting to build components – teams spend weeks setting up the project for it. Reshaped Pro helps you skip it, providing you with the complete repository setup and components source code.
We provide everything you need to maintain a design system repository: linting, testing, release scripts, git hooks, you name it. You can start working with the components immediately instead of spending time on setting up the project again.
Start from a development and design environment with familiar tools and technologies. Then customise or remove features you want to be different.
Get access to the whole components and utilities test suite. Be sure that changing the components still keeps the system working and you can add even more tests for the new features you plan to add.
Whether you’re looking for a library for a small side project or building your own design system for a large product - we’ve covered it all.