Release 1.0.0 🎉 · hunvreus/basecoat · GitHub

//releases/show" data-turbo-transient="true" />

Skip to content

Search or jump to...

Search code, repositories, users, issues, pull requests...

-->

Search

Clear

Search syntax tips

Provide feedback

--><br>We read every piece of feedback, and take your input very seriously.

Include my email address so I can be contacted

Cancel

Submit feedback

Saved searches

Use saved searches to filter your results more quickly

-->

Name

Query

To see all available qualifiers, see our documentation.

Cancel

Create saved search

Sign in

//releases/show;ref_cta:Sign up;ref_loc:header logged out"}"<br>Sign up

Appearance settings

Resetting focus

You signed in with another tab or window. Reload to refresh your session.<br>You signed out in another tab or window. Reload to refresh your session.<br>You switched accounts on another tab or window. Reload to refresh your session.

Dismiss alert

{{ message }}

hunvreus

basecoat

Public

Uh oh!

There was an error while loading. Please reload this page.

Notifications<br>You must be signed in to change notification settings

Fork<br>126

Star<br>4k

1.0.0 🎉

Compare

Choose a tag to compare

Sorry, something went wrong.

Filter

Loading

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

No results found

View all tags

hunvreus

released this

28 Jun 02:49

&middot;

8 commits

to main<br>since this release

1.0.0

a9e1fe7

Basecoat 1.0.0 is the first stable release of Basecoat as a Tailwind CSS, vanilla HTML, CSS, and JavaScript implementation of shadcn/ui's visual language for non-React stacks.

This is a large release. It reshapes the package, public component APIs, style system, JavaScript lifecycle, docs, and template story around a stable 1.0 foundation.

What is Basecoat?

Basecoat brings the shadcn/ui look and component conventions to plain HTML, Tailwind CSS, and small vanilla JavaScript.

It is not a React, Radix, Base UI, cn-*, or data-slot DOM port. The goal is to map shadcn/ui concepts onto simpler semantic markup that works well in server-rendered apps, template engines, HTMX-style apps, and other non-React stacks.

Highlights

One package

Basecoat now ships as a single npm package:

npm install basecoat-css

The old CLI workspace has been removed. Templates now ship directly inside basecoat-css, so package assets, CSS, JS, and template macros all share one version.

Template paths:

node_modules/basecoat-css/templates/nunjucks

node_modules/basecoat-css/templates/jinja

If you previously used basecoat-cli, install basecoat-css instead and copy the template files from the package.

Smaller public APIs

Basecoat 1.0 moves toward canonical root classes, semantic HTML, and documented data-* attributes.

Examples:

Button<br>Badge<br>...<br>...">button class="btn" data-variant="outline">Buttonbutton><br>span class="badge" data-variant="secondary">Badgespan><br>div class="card" data-size="sm">...div><br>div class="alert" data-variant="destructive">...div>

Several pre-1.0 composed class APIs were replaced by this smaller, more regular API.

If you need legacy aliases during migration, load the optional compatibility stylesheet after Basecoat:

@import "tailwindcss";<br>@import "basecoat-css";<br>@import "basecoat-css/compat";

Standalone style packs

Style packs are now standalone bundles. Do not load the default/Vega bundle and then override it with another style.

Available style packs:

Vega

Nova

Maia

Lyra

Mira

Luma

Sera

Rhea

Examples:

@import "tailwindcss";<br>@import "basecoat-css";

@import "tailwindcss";<br>@import "basecoat-css/maia";

Base and component-only imports are also available for custom styling:

@import "basecoat-css/base";<br>@import "basecoat-css/components";

CDN builds

Basecoat includes standalone CDN-ready CSS bundles:

">link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0/dist/basecoat.cdn.min.css" />

Named style bundles are available too:

">link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0/dist/basecoat-maia.cdn.min.css" />

Expanded component coverage

Basecoat 1.0 adds, stabilizes, or substantially reworks many components and docs pages, including:

Accordion

Avatar

Badge

Breadcrumb

Button

Button Group

Card

Chart beta

Checkbox

Combobox

Command

Dialog

Drawer beta

Dropdown Menu

Empty

Field

Input

Input Group

Item

Kbd

Label

Native Select

Pagination

Popover

Progress

Radio Group

Scroll Area

Select

Sidebar

Skeleton

Slider

Spinner

Switch

Table

Tabs

Textarea

Theme Switcher

Toast

Tooltip

Many components were realigned with current shadcn/ui visual styles across all style packs.

JavaScript lifecycle cleanup

Basecoat JavaScript now initializes only uninitialized components by default:

window.basecoat.initAll()<br>window.basecoat.init("select")

Removed component roots clean up their listeners and runtime state through internal destroy hooks.

Several dynamic components now expose refresh() methods...