Repolode
Submit
hunvreus

hunvreus/basecoat

A vanilla HTML/CSS/JavaScript implementation of shadcn/ui-style components built on Tailwind CSS, usable without React.

View on GitHubWebsite
Stars
4,424
Forks
147
Open issues
6
Last commit
15 days ago

What is it?

Basecoat is a component library that reproduces the shadcn/ui design system using Tailwind CSS, plain HTML, CSS and JavaScript. It does not depend on React, Radix or any framework runtime, so the components can be dropped into any web stack, whether that is a static site, a server-rendered template or a JavaScript app.

The library is HTML-first: components are semantic markup styled with Tailwind, and a small amount of vanilla JavaScript adds behavior where needed. It ships several standalone style packs (Vega, Nova, Maia, Lyra, Mira, Luma, Sera and Rhea), and is compatible with shadcn/ui themes. Dark mode is supported.

Basecoat can be consumed through npm, a CDN, or project templates including Nunjucks and Jinja. Its JavaScript exposes init, initAll and refresh functions for re-initializing components after frameworks or navigation libraries restore cached DOM.

Key features

  • 01Semantic HTML-first components styled with Tailwind CSS v4.
  • 02Vanilla JavaScript behavior with no React or Radix dependency.
  • 03Eight standalone style packs plus a styleless base bundle.
  • 04Compatible with shadcn/ui themes and includes dark mode.
  • 05Available via npm, CDN, or Nunjucks and Jinja templates.

Use cases

  • Adding shadcn-style UI to a server-rendered app without adopting React.
  • Building a static marketing or documentation site with polished components.
  • Creating a custom design by layering a styleless base with your own style file.
  • Using consistent UI components in Django, Flask or other Jinja-based projects.

Quick start

  1. 1

    Install the package from npm

    npm install basecoat-css
  2. 2

    Import Tailwind and Basecoat in your main CSS file

Things to know

  • Styling depends on Tailwind CSS, so you need a Tailwind setup in your project.

Topics

#tailwind#component-library#css#vanilla-javascript#html#design-system#dark-mode#shadcn-ui#alpine#components

FAQ

What is basecoat?
A vanilla HTML/CSS/JavaScript implementation of shadcn/ui-style components built on Tailwind CSS, usable without React. Basecoat is a component library that reproduces the shadcn/ui design system using Tailwind CSS, plain HTML, CSS and JavaScript. It does not depend on React, Radix or any framework runtime, so the components can be dropped into any web stack, whether that is a static site, a server-rendered template or a JavaScript app.
Is basecoat free to use? What license does it have?
basecoat is open source under the MIT license. Check the license terms before using it in commercial products.
Is basecoat still maintained?
Actively maintained. The last commit to basecoat was on Oct 23, 2026.
What can I use basecoat for?
Adding shadcn-style UI to a server-rendered app without adopting React. Building a static marketing or documentation site with polished components. Creating a custom design by layering a styleless base with your own style file. Using consistent UI components in Django, Flask or other Jinja-based projects.
How do I install basecoat?
Install the package from npm: npm install basecoat-css Import Tailwind and Basecoat in your main CSS file
Where can I get basecoat?
The source code and installation instructions are on GitHub: https://github.com/hunvreus/basecoat

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects