Why Basecoat?
Basecoat brings the magic of shadcn/ui to any traditional web stack: no React required.
Tailwind won. But building UIs with utility classes alone kinda sucks. Most Tailwind libraries like Flowbite, Preline, or even Tailwind UI ask you to copy walls of unreadable classes into your HTML. It works, but it's messy and hard to maintain.
shadcn/ui avoids that by wrapping everything in React components. It also gives you a killer design system, theme support, a CLI, and a growing ecosystem.
But maybe you're not using React. Maybe your app is built with plain HTML. Or Flask. Or Rails. Or Laravel. Or Django. Or whatever.
That's where Basecoat comes in. It gives you modern, accessible components with the simplicity of plain HTML and Tailwind. Basecoat is:
- Lightweight: no runtime JS, just CSS and tiny Alpine.js scripts for the more interactive components.
- Easy to use: add classes like
btnorinputand you're done. - Framework-agnostic: works with any backend or frontend stack.
- Accessible: components follow accessibility best practices.
- Dark mode ready: respects your Tailwind config.
- Extendable: tweak styles with Tailwind or CSS variables.
- Themable: fully compatible with shadcn/ui themes.
- Readable: no class soup, just clean markup.
- Free and open source: MIT licensed.
How it works
Add a single CSS file to your Tailwind setup. Use components by dropping in simple classes like btn, form, or card.
Some components (like modals or dropdowns) use a tiny bit of Alpine.js. You can skip it if you don't need interactivity.
There's also a CLI to help you scaffold components and get set up fast.
Check out the installation guide to get started.
How can I help?
Basecoat is 100% open source and free.