Tools· Design & Creative

Basecoat

Open source Tailwind CSS and vanilla JavaScript library that brings the shadcn/ui design language to any web stack as plain CSS classes without a React dependency, from HTML through Astro to Shopify Liquid.

designingexecutableOpen Source

Open provider

Description

Basecoat implements the shadcn/ui design language in plain Tailwind CSS and optional vanilla JavaScript, without a dependency on React, Radix, or a framework runtime. Component CSS files provide layout, structure, accessibility selectors, and behavior hooks, while separate style packs, including Vega, Nova, Maia, Lyra, Mira, Luma, Sera, and Rhea, provide color, radius, shadow, typography, spacing, and state styles. Around 39 component styles cover building blocks such as buttons, forms, dialogs, dropdowns, tabs, and toasts, complemented by roughly ten vanilla JavaScript modules for the interactive components and optional Nunjucks and Jinja templates for server-side rendering.

An existing Tailwind CSS setup is required, and the Basecoat stylesheet must be loaded after the Tailwind base styles, because a full Tailwind build loaded afterward can reset borders, inputs, and other component defaults. The library does not ship icons, the documentation shows examples with inline Lucide SVGs, and a separate icon solution has to be wired in. Only some components need JavaScript; if the matching JS module is missing for an interactive block such as a dropdown or dialog, the look stays correct but the behavior is missing.

Compared with component libraries that provide shadcn/ui directly for a framework such as React, Basecoat deliberately avoids any framework binding: instead of finished components with props and slots, it delivers CSS classes and markup patterns that fit into practically any templating system, such as Shopify Liquid, plain HTML, or server-rendered Nunjucks and Jinja templates. Teams already working in React with the original shadcn/ui gain little from switching, while teams that need a consistent, modern interface look across multiple target stacks, where no real component library exists, find a fitting foundation here. Finished marketing or landing page sections are not part of the scope, only the individual building blocks of an interface look.

Strengths

Framework-independent

Plain Tailwind CSS classes and optional vanilla JavaScript work in any web stack, from plain HTML through Astro to Shopify Liquid, without React, Radix, or a framework runtime.

Separate structure and style layers

Component CSS files for layout and behavior are separated from style packs for color, radius, shadow, and typography, so the look can be swapped without touching the structure.

Broad component coverage

Around 39 component styles cover the common interface building blocks, from buttons and forms to dialogs, drawers, dropdowns, and toasts.

Multiple integration paths

A CDN link suits quick prototypes, the npm package fits existing Tailwind build pipelines, and optional Nunjucks and Jinja templates cover server-rendered projects.

MIT license with an active community

The project is MIT licensed and has over 4,000 GitHub stars, with ongoing active development.

Assessment

AI features

Class names instead of a framework API Interface building blocks come from fixed CSS classes and semantic HTML rather than a React-specific component API with props and slots, a format that can be read straight from the documentation, including when markup is generated by a coding assistant.
One target format for multiple stacks The same classes work in HTML, Astro templates, and Shopify Liquid, so a layout built for one stack can be carried over to another target stack without rewriting it.
Small, documented JavaScript lifecycle API The global functions window.basecoat.init, initAll, and refresh are kept small and individually documented, which makes it possible to add interactive behavior in a targeted way instead of wiring in a full framework runtime.

Suitable for

Shopify Liquid and plain HTML projects that need a shadcn-style look without a framework dependency
Astro projects or other templating environments where a single CSS class is enough instead of a full component with props and slots
Teams with multiple target stacks that want a consistent, modern interface look across every project
Less suitable for Less suitable for React projects that already use the original shadcn/ui with real components, and for projects that need finished marketing or landing page sections rather than individual UI building blocks

Limitations and notes

No icon set included The library does not ship icons, the documentation shows examples with inline Lucide SVGs, and a separate icon solution has to be wired in.
Stylesheet load order matters Basecoat must be loaded after any stylesheet that includes the Tailwind base styles, because a full Tailwind build loaded afterward can reset borders, inputs, and other component defaults.
Not a replacement for a component library Basecoat delivers CSS classes and markup patterns, not finished React or Astro components with props and slots, the structure still has to be built in the project itself.
A JavaScript module is needed per interactive block Only some components are solved purely in CSS, interactive blocks such as dropdown or dialog lose their behavior without the matching JS module.
Migration note from version 1.0 Basecoat 1.0 introduced new style packs and a leaner public API based on root classes, projects still relying on older class aliases can load a separate compatibility stylesheet for the default style.

Quick start

Install Tailwind CSS in the project, if not already present.
Install Basecoat via the npm package, or load it from the CDN for simple static pages.
Load the desired stylesheet, the default bundle or a named style pack such as Nova, after the Tailwind base styles.
Load the matching JavaScript module, or the all-in-one script, for interactive components.
Use component classes such as btn or card directly in the markup, optionally through Nunjucks or Jinja templates.

Tips

For Liquid or Astro projects, pull in individual component CSS files instead of the full bundle when only a few building blocks are needed.
Handle theming through CSS variables, mapping the project's own design tokens onto the Basecoat variables replaces many individual class edits.
If a navigation or framework library restores already initialized markup from a cache, call window.basecoat.initAll({ force: true }), which resets and reinitializes the components.
For projects still on Basecoat before version 1.0, load the compatibility stylesheet for class aliases instead of rewriting existing markup right away.

Access

Basecoat is available as an open source project under the MIT license at no cost, with the source code hosted publicly on GitHub. Getting started works either through a CDN link for simple static pages or through the basecoat-css npm package for projects with an existing Tailwind CSS build pipeline, full documentation with installation and customization guidance is available at basecoatui.com. The repository has over 4,000 GitHub stars with active development.