Installation | Basecoat

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@0.2.5/dist/basecoat.cdn.min.css">
<script src="https://cdn.jsdelivr.net/npm/basecoat-css@0.2.5/dist/js/all.min.js" defer></script>

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@0.2.5/dist/basecoat.cdn.min.css">
<script src="https://cdn.jsdelivr.net/npm/basecoat-css@0.2.5/dist/js/dropdown-menu.min.js" defer></script>

Install using NPM

Add Tailwind CSS

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

Follow the Tailwind CSS installation instructions to get started.
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.

Import basecoat in your CSS

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

(Optional) 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/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:
```
<script src="/js/basecoat/tabs.min.js" defer></script>
```
See each component page for the minimal script required.
That's it

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 (or let the CLI do it for you). Once again, you have the choice to include the fiel for all components at once (all.min.js or all.js).

Use the CLI

If you're using Nunjucks or Jinja, you can use the CLI to install the CSS and macros for any of the complex components(e.g. Dialog). It will copy the JS and .html.jinja or .njk macros into your code.

For example, to add the Dialog component, run one of the following commands:

npx basecoat-cli add dialog

pnpm dlx basecoat-cli add dialog

bunx basecoat-cli add dialog

yarn dlx basecoat-cli add dialog

You will be asked to confirm the template engine and destination directory for the JavaScript and macros.

Use Nunjucks or Jinja macros

For more complex components, you can use Nunjucks or Jinja macros to help you generate the HTML and JavaScript code.

To install them, either copy them directly from the GitHub repository or use the CLI to do the work for you.

For example, here's how you could use the select() macro to generate the HTML and JavaScript code for a Select component:

{% call select() %}
<div role="group" aria-labelledby="fruit-options-label">
  <span id="fruit-options-label" role="heading">Fruits</span>
  <div role="option" data-value="apple">Apple</div>
  <div role="option" data-value="banana">Banana</div>
  <div role="option" data-value="blueberry">Blueberry</div>
  <div role="option" data-value="pineapple">Grapes</div>
  <div role="option" data-value="pineapple">Pineapple</div>
</div>
{% endcall %}

Theming

You can import any shadcn/ui compatible theme (e.g. tweakcn). For example:

Go to ui.shadcn.com/themes and select a theme.
Click "Copy code" and save the theme variables in a file (e.g. theme.css).

Import the theme in your CSS file:

@import "tailwindcss";
@import "basecoat-css";
@import "./theme.css";

About shadcn/ui theming

Customization

You can override default styles using Tailwind:

<button class="btn font-normal ">Click me</button>

You can also extend or override the existing styles in your own Tailwind files:

@import "tailwindcss";
@import "basecoat-css";
@import "./custom.css";

More importantly, you can use the theme variables to customize many aspects of the components (colors, fonts, sizes, etc).

If you want to make more drastic changes, you can copy the basecoat.css file into your project and make your changes there.

Using a build tool (Vite, Webpack…)

Without a build tool