v3.7: Accessibility audit, ActionBar improvements and more
Design system for making your product accessible
WCAG and WAI-ARIA compliant design system for teams who care about their product accessibility
npm install reshaped
Free
WCAG AA 4.5:1
Edit post
Add to favorites
Snooze notifications
Add to favorites, menu item, group
We were in the middle of transitioning from a mix of different software stacks to a more streamlined setup, so finding a tool that could keep our frontend looking sharp and performing well was high on the list.
Reshaped quickly stood out for its atomic component approach and has been a great fit.
What truly made us commit to Reshaped was the team behind it: they actively support the product, genuinely care about user feedback, and keep the door open for new ideas.
It's rare to find that kind of dedication, and it made the choice an easy one.
Our engineers and designers compared multiple options and settled on Reshaped because it has the best Figma library (a 100% match with its React counterpart), a wide range of well-designed components, doesn't use CSS-in-JS or other heavy dependencies, works perfectly with server-side rendering, and is easy to integrate with frameworks like Next.js and Vite.
We’ve never regretted the decision to use Reshaped. The library dramatically boosted our development speed, enabling us to release our MVP faster than planned.
| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
Follows WAI-ARIA
Reshaped components follow WAI-ARIA guidelines and the common requirements even for the most complicated web components.
Built-in aria attributes
All components automatically assign relevant aria attributes or provide TypeScript typings for the areas where attributes should be provided by the product.
Color contrast
Our colors system provides accessible color combinations for theming, as well as light and dark mode. You can easily generate a custom theme following the same principles.
Keyboard navigation
All interactive components support keyboard shortcuts and navigation, like focus trap management in modals and arrow-based navigation in calendars.
Screen reader support
We're carefully managing the implementation of our components to make sure screen reader users are never lost in your product.
Translations and RTL
All components rendering text can be integrated with your translation tools and support RTL languages, making your product accessible around the globe.
Accessibility tests
Every component is fully covered with automated accessibility tests preventing regressions. With the Pro license you can use the same setup for your own product components.
Accessibility utilities
Reshaped includes headless low-level utilities like TrapFocus, Flyout and others. Use them and make your own components accessible way faster.
Shortcut to an accessible product
Reshaped goes incredibly deep into solving complex accessibility challenges with simple APIs so you don't have to constantly spend additional time on the implementation. It just works.
I’ve been following Reshaped from day one and love how it’s grown over the years.
With Reshaped, it’s super easy to create nice-looking UIs without much effort,
while it handles RTL, theming, and dark mode for you. Hats off to the team for
building it!
Sean Brydon
Full-Stack Developer, Cal.com
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
Make your product accessible with Reshaped
Teams and individuals start using Reshaped components because they know the importance of building accessible products. With our domain expertise they trust us to help them skip weeks or months of manual work.
npm install reshaped
Free
Professionally crafted React & Figma components for building beautiful products or starting your own design system
Built with Reshaped in Amsterdam ❤️