Recastui is a UI toolkit that enables the development of accessible web applications and design systems using React(soon Solidjs, Svelte and others). It includes a collection of themeable UI components and primitives that can serve as a solid foundation for implementing design systems.

Key features


Recastui adheres to the WAI-ARIA Authoring Practices as much as possible. It takes care of accessibility implementation details such as ARIA attributes, focus management, and keyboard navigation.


Recastui provides fine-grained access to individual components’ parts, allowing you to wrap them and add your own event listeners, props, and more.


Component in Recastui are shipped with themed styles using TailwindCSS & variations powered by CVA , allowing you to completely customize the look and feel.

Automatic Dark Mode

No need to add prefix dark: to your classes in your code for dark mode. No conditional logic required. Recast uses Radix-color pallets along with the power of CSS custom properties to automatically create dark variants equivalent for the used color pallet. All components are built with dark mode in mind.


Recastui owes its existence to the previous work of other significant frontend community projects, including: