Installation

How to install and use Basecoat in your app.

Install using the CDN

Install all components

Add the following to the <head> of your HTML file:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0/dist/basecoat.cdn.min.css">
<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0/dist/js/all.min.js" defer></script>

The default CDN stylesheet is the Basecoat backward-compatible default. To use a specific style, load the matching standalone stylesheet instead:

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

While the JavaScript file for all components is small (around 3kB gzipped), you can cherry-pick the components you need as instructed in the component's page (Dropdown Menu, Popover, Select, Sidebar, Tabs and Toast). For example, to add the Dropdown Menu component, add the following to the <head> of your HTML file:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0/dist/basecoat.cdn.min.css">
<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0/dist/js/basecoat.min.js" defer></script> <!-- Only needed once to register and initialize components -->
<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0/dist/js/dropdown-menu.min.js" defer></script>

Install using NPM

Step 1: Add Tailwind CSS

Basecoat uses Tailwind CSS. You need to install it in your project.

Follow the Tailwind CSS installation instructions to get started.

Step 2: Add Basecoat

Add Basecoat to your Tailwind CSS file.

npm install basecoat-css

pnpm add basecoat-css

bun add basecoat-css

yarn add basecoat-css

Alternatively, you can directly copy the basecoat.css file into your project.

Step 3: Import Basecoat

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

The default import is the Basecoat backward-compatible default. To use a specific style, import the standalone style bundle instead:

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

Step 4: Add JavaScript files

Some components need some JavaScript (e.g. the Tabs component). There are two ways to get it into your project:

Using a build tool (Vite, Webpack…)

If your project is ESM-aware you can directly import the scripts. To include all components:

import 'basecoat-css/all';

Or cherry-pick specific components, for example:

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

Without a build tool

Copy the pre-built files from node_modules into your public directory:

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

Then reference the script you need as well as the basecoat.min.js file (used to register and initialize components):

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

See each component page for the minimal script required.

Step 5: Use components

You can now use any of the Basecoat classes in your project (e.g. btn, card, input, etc). Read the documentation about each component to get started (e.g. button, card, input, etc).

Some components (e.g. Select) require JavaScript code to work.

Components with JavaScript

A handful of components require JavaScript code to work, specifically Dropdown Menu, Popover, Select, Sidebar, Tabs and Toast

If a component requires JavaScript, the documentation page will provide instructions. There are 2 options to add the JavaScript code to your project:

CDN: you either add the code for all of the components to the <head> of your HTML file, or just the file for the component you want to use as instructed on the component's page.
Local file: you download the script as a separate file and include it in your project. Once again, you have the choice to include the file for all components at once (all.min.js or all.js).