RecastUI is an open-source React component library and design system for building accessible, themeable, white-label websites and apps with Tailwind CSS. It provides over 40 pre-built components that come with automatic dark mode, WAI-ARIA compliance, and a theming system designed for multi-tenant product customization.
What is RecastUI?
RecastUI is a component library built on React and Tailwind CSS, created by the seed-blocks organization. It takes design tokens and component props as input and outputs accessible, customizable UI components. The library currently supports React, with Solid and Svelte versions planned for the future. RecastUI is distributed under the MIT license and is available as a GitHub repository.
Key Features
- 40+ Components — A ready-to-use set of more than 40 well-designed React components, covering common interface patterns.
- Automatic Dark Mode — No
dark:Tailwind classes or conditional logic needed; RecastUI uses Radix Color palettes to generate dark variants automatically. - Composable — Components are built as reusable building blocks that can be combined to create complex interfaces.
- Accessible — Follows WAI-ARIA standards to help reach the largest audience with less effort.
- Themeable — Built with theming in mind using CVA (Class Variance Authority), making it suitable for white-label products.
- TypeScript — All components are fully typed for an improved developer experience.
Who Should Use RecastUI?
- Product developers who need to ship white-label SaaS applications with customizable branding and theming.
- React developers who want a component library that works with Tailwind CSS and handles dark mode automatically.
- Open-source contributors interested in helping shape a v1.0 release — the project explicitly welcomes early adopters, with a public roadmap and project boards.
What Can You Do with RecastUI?
- Build white-label dashboards and SaaS interfaces: Use the theming system to let each customer change colors and branding without touching component code.
- Create accessible marketing sites: Leverage the WAI-ARIA-compliant components to meet accessibility requirements from the start.
- Prototype web apps quickly: Start with 40+ ready-made components instead of writing UI code from scratch.
How Does RecastUI Work?
RecastUI uses CVA to define component variants and Radix Color palettes for automatic dark mode. Developers import components, apply theme tokens, and the library handles the rest. The project is still under heavy development, and the README warns that it is not ready for production until v1.0.
Pros and Cons
- Pros: Open-source MIT license, automatic dark mode, theming built-in, TypeScript support, accessible components.
- Cons: Not yet production-ready — the maintainers explicitly warn against using it in production. Only React is supported currently; Solid and Svelte versions are still in the roadmap.
Pricing
RecastUI is free and open source under the MIT license. No paid tiers are mentioned.
Alternatives
- Mantine — a popular React component library.
- Theme-UI — a theme-based styling library for React.
FAQ
Is RecastUI free?
Yes, RecastUI is licensed under the MIT license, so it is free to use, modify, and distribute.
Is RecastUI production-ready?
No. As of the current version, the README contains a warning that the project is in heavy development and not ready for production use until v1.0.
What frameworks does RecastUI support?
RecastUI currently supports React. The roadmap lists Solid and Svelte as future targets.
How does automatic dark mode work?
RecastUI uses Radix Color palettes to automatically create dark variants for the color palette you choose. This means you don't have to write separate dark-mode classes or conditional logic.
Does RecastUI support theming?
Yes, theming is a core feature. All components are built with theming in mind using CVA, allowing you to customize the design system for white-label projects.
