The design system
you plan to build
Professionally crafted design system in React & Figma for
building products of any scale and complexity
over the lazy dog
Everything you expect
from a 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>
Built for your scale
Instantly get up to speed with the features you could find in the most advanced design systems in the industry.
No dependency lock-in
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.
Automatic dark mode
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.
Responsive styles
Stop fighting with media queries. Adjust your styles based on the viewport size without writing custom styles with out responsive syntax.
Completely accessible
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.
TypeScript support
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.
Detailed documentation
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.
Create your own themes
With our theming CLI you can easily create new themes, add more design tokens and export the data to other design token tools.
TailwindCSS integration
Single-line configuration to access all Reshaped design tokens in Tailwind classnames.
Design equals code
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.
Building your
own design system?
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.
Start building instantly
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.
Make it completely yours
Start from a development and design environment with familiar tools and technologies. Then customise or remove features you want to be different.
Complete test suite
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.
- Renders children composition
- Triggers onOpen and onClose handlers
- Traps focus inside the modal
- Returns focus to the trigger on modal close
- Applies aria attributes to the trigger
- Switches to mobile view based on the viewport
- Closes on Esc keypress
- Closes when clicking outside
- Chains modals nested in each other
- Announces title and subtitle correctly
- Locks the page scroll when opened
- Keep page interactive when rendered without an overlay
- Applies custom size passed to the component
- Applies custom padding passed to the component
- Works correctly in controlled mode
- Integrated with useToggle hook
- Supports rendering with render props function
- Renders children composition
- Triggers onOpen and onClose handlers
- Traps focus inside the modal
- Returns focus to the trigger on modal close
- Applies aria attributes to the trigger
- Switches to mobile view based on the viewport
- Closes on Esc keypress
- Closes when clicking outside
- Chains modals nested in each other
- Announces title and subtitle correctly
- Locks the page scroll when opened
- Keep page interactive when rendered without an overlay
- Applies custom size passed to the component
- Applies custom padding passed to the component
- Works correctly in controlled mode
- Integrated with useToggle hook
- Supports rendering with render props function
Pricing
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.
- Lifetime accessFuture updates and components
- Unlimited projectsDesign license is reserved for one person and unlimited projects
- Figma libraryComponents aligned with code, light & dark mode libraries
- DocumentationThoroughly documentated library and processes
- Theming engineAbility to create custom themes
- All assets from the design licenseGet access to the libraries, theming and documentation
- Unlimited seats and projectsAttach and manage additional accounts for your license
- Full access to the source codeSkip your first year of development for your own design system
- Full test suiteGet full control over the component development environment
- Extendable theming engineAbility to create custom themes and extend the engine
Best deal for teams
- OnboardingGuidance on how to introduce Reshaped to your development and design process
- Design system auditReview and recommendations for your own design system implementation
- Tailored supportPriority support for the new feature requests based on your product requirements
- Need even more?Reach out to us and let's discuss how we can help
Built with Reshaped in Amsterdam ❤️