v3.3: ContextMenu utility, improved docs and more
Core components for your Figma design system
Component library for designigning beautiful products or starting your own design system with the latest Figma features support
Button
Button
Button
Button
Button
Button
Button
Button
Button
Color / Foreground / Neutral
Color / Background / Neutral
Color / Background / Disabled
Color / Background / Primary
Show icon
Color
Variant
Reshaped is the gold standard of "just enough design system", where they have
figured out the minimal viable token architecture and an infinitely flexible base
component kit. I constantly look to them for inspiration.
Luis Ouriach
Designer Advocate, Figma
I love how Reshaped focuses on the “system” aspect of design systems, offering an
excellent set of core components with the latest Figma features. It’s a great
starting point for building products or creating your own design system.
Jordan Hughes
Product Designer, Creator of Untitled UI
Figma variables
All components and design utilities are styled using Figma variables, seamlessly integrating with variable modes.
Figma properties
The library implementation is based on Figma properties and variants, making it easy to maintain and hand off your design using Figma's dev mode.
Semantic theming
Our design tokens are role-based and not tied to specific components, allowing you to build your own components with automatic theming and dark mode support.
Accessibility
All components are WCAG and WAI-ARIA compliant. Everything from color contrast to screen reader navigation is optimized, making your product more accessible for everyone.
Synchronised with code
All components and their properties are perfectly synced with the Reshaped React library, with simultaneous releases for both libraries.
Flexible composition
While Reshaped components include styles, they are optimized for composition, allowing you to build custom components tailored to your product.
Theme generation sync
CSS themes generated with our command-line interface can be automatically imported into the Figma variables setup.
Latest Figma features
We make major releases right after the Figma Config each year, ensuring you are among the first to access the newly released Figma features.
Perfect starting point
Reshaped is ideal for starting your own design system, saving you countless hours on theming and setting up component variants.
Reshaped's superpower is its theming architecture because it has a fine balance of
flexibility and constraints. It is easy for the consumers to tweak the theme based on
their brand and product and yet it is logical enough to understand from the outside
and provides automatic dark mode support.
Kamlesh Chandnani
Principal Frontend Engineer, Razorpay
Reshaped provided us with the tools to build both our product and website remarkably
quickly. As a small team with short deadlines, Reshaped allowed us to focus on
delivering the experience instead of grinding away on components. The documentation is
in a class of its own and enabled our team to ship at lightning speed. I'd recommend
Reshaped to any team looking to move fast with a high-quality frontend.
Mike Carbone
Founder, CEO of Hermae
Start shipping with Reshaped
Teams and individual engineers start using Reshaped for its flexibility and focus on core components. They stay for the exceptional developer experience and outstanding support.
Built with Reshaped in Amsterdam ❤️