Installation

Some components require Javascript code to work.

The documentation provides Alpine.js code snippets to cover that. Make sure to install Alpine.js if you decide to use them.

For simple components like Accordion or Slider, you will notice some inline Alpine.js code that you can just copy along with the rest of the HTML.

For more complex components (Dialog, Dropdown Menu, Popover, Select, Tabs and Toast), you have one of 2 options:

• Copy the Javascript snippet provided in the documentation page into your project.

• Download the script as a separate file and include it in your project (or let the CLI do it for you). If you use this approach, make sure to load the file before the Alpine.js core JS file and register the component on the alpine:init event. For example:

  <script src="/assets/js/dialog.js" defer></script>
  <script>
    document.addEventListener('alpine:init', () => {
      window.basecoat.registerDialog(Alpine);
    });
  </script>
  <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>

You are also welcome to write your own Javascript.

All of the components try and implement WAI-ARIA standards to make them accessible.

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:

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 %}

Make sure to include the Javascript code before Alpine.js core JS file:

<script src="/assets/js/select.js" defer></script>
<script>
  document.addEventListener('alpine:init', () => {
    window.basecoat.registerSelect(Alpine);
  });
</script>
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>

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";

You can override default styles using Tailwind:

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

You can also obviously extend and/or override the existing styles with your own Tailwind files:

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

You can also use use the theme variables to customize many aspects of the components (colors, fonts, sizes, etc).

If you want to make more drastic changes, I recommend copying the basecoat.css file into your project and making your changes there.