basecoat-css

This package provides CSS, JavaScript helpers, and optional Nunjucks/Jinja templates for Basecoat.

Prerequisites

Your project must have Tailwind CSS installed and configured, as Basecoat relies on Tailwind utility classes and theming.

Install with any package manager:

npm install basecoat-css # or pnpm add / yarn add / bun add

Add it just after Tailwind in your stylesheet:

@import "tailwindcss";
@import "basecoat-css";

That's it, you can use any Basecoat class (btn, card, input, etc) in your markup.

To use a specific style, import its standalone bundle instead:

@import "tailwindcss";
@import "basecoat-css/sera";

Some interactive components need JavaScript. Import all component scripts, or cherry-pick only the entrypoints you use.

With a build tool (ESM):

import 'basecoat-css/all';

Or cherry-pick the components you need:

import 'basecoat-css/tabs';
import 'basecoat-css/popover';

Without a build tool, copy the files from node_modules:

npx copyfiles -u 1 "node_modules/basecoat-css/dist/js/**/*" public/js/basecoat

Then reference what you need, e.g.

<script src="/js/basecoat/tabs.min.js" defer></script>

Nunjucks and Jinja templates ship with the package. Copy the template folder for your engine into your app:

cp -R node_modules/basecoat-css/templates/nunjucks ./templates/basecoat
cp -R node_modules/basecoat-css/templates/jinja ./templates/basecoat

Templates are meant to be copied into your app and customized.

For more detailed information on components, their usage, and customization options, see the Basecoat documentation.