Glaze Basecoat

This package is part of a larger monorepository with other UI library bindings: https://github.com/daniellionel01/glaze

This is a collection of Lustre components mapped from Basecoat UI.

Basecoat UI is a Tailwind CSS-based component library inspired by shadcn/ui that works with any web stack.

For a full list of components, take a look at either:

Latest supported version is Basecoat v0.3.11.

GitHub Pages Demo: https://daniellionel01.github.io/glaze/glaze_basecoat/

Example projects:

Getting Started

gleam add glaze_basecoat

There are various ways of loading the CSS and JavaScript for the Basecoat components into your website.

Your approach will depend on wether you use the Lustre dev tools, other build tools (Bun / Vite), or want to load everything via a CDN.

Lustre SPA / Dev Tools

If you are using the Lustre dev tools and are using the built-in tailwind support, you can setup Basecoat in two ways:

You can install the basecoat-css package:

npm/pnpm/bun add basecoat-css

And import it in your application css file:

/* src/app.css */
@import "tailwindcss";
@import "basecoat-css";

If you install the package, you can create an additional css file to configure your theme: https://basecoatui.com/installation/#install-theming

Or create a src/basecoat.css file and put the contents of the basecoat.css and import it in your main css file.

curl -L https://cdn.jsdelivr.net/npm/[email protected]/dist/basecoat.css \
  -o src/basecoat.css

/* src/app.css */
@import "tailwindcss";
@import "./basecoat.css";

/* optional */
@import "./theme.css";

As for the JavaScript, you can link that in the [tools.lustre.html] in your gleam.toml:

[tools.lustre.html]
scripts = [{ src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/all.min.js" }]

After that you can freely use any Basecoat components:

// src/app.gleam

import glaze/basecoat/button
import glaze/basecoat/card
import lustre
import lustre/attribute
import lustre/element/html

pub fn main() {
  let app = lustre.element(view())
  let assert Ok(_) = lustre.start(app, "#app", Nil)

  Nil
}

pub fn view() {
  html.div([attribute.class("p-10")], [
    card.card([], [
      card.header([], [
        card.title([], [html.text("Welcome")]),
        card.description([], [html.text("Hello!")]),
      ]),
      card.content([], [
        button.button([], [html.text("Get Started")]),
      ]),
    ]),
  ])
}

Note on `[tools.lustre.html]`

Putting the basecoat.css file in the [tools.lustre.html] as a stylesheet will not work with the Tailwind CLI because it bundles everything in app.css.

Installation via CDN

If you are generating the HTML on the server or provide the layout for your SPA there (f.e. a wisp proxy for your Lustre SPA), you can always fall back to CDN imports for Tailwind or the Basecoat CSS and JavaScript.

import glaze/basecoat
import glaze/basecoat/button
import glaze/basecoat/card
import glaze/basecoat/theme
import lustre/attribute.{attribute}
import lustre/element/html

pub fn page() {
  html.html([], [
    html.head([], [
      html.title([], "Basecoat x Gleam"),
      html.meta([
        attribute.name("viewport"),
        attribute.content("width=device-width, initial-scale=1"),
      ]),

      // optional: if you are not using any build tool for working with tailwind
      html.script([attribute.src("https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4")], ""),

      basecoat.register(basecoat.version),
      theme.style_tag(theme.default_theme()),
      
      // optional: init built-in theme switcher
      theme_switcher.init_script()
    ]),
    html.body([], [
      html.div([attribute.class("p-10")], [
        card.card([], [
          card.header([], [
            card.title([], [html.text("Welcome")]),
            card.description([], [html.text("Hello!")]),
          ]),
          card.content([], [
            button.button([], [html.text("Get Started")]),
          ]),
        ]),
      ]),
    ]),
  ])
}

You can find the full documentation here: https://hexdocs.pm/glaze_basecoat.

Take a look at the dev module for a kitchen sink of all components and how you might use them!

Theming

Basecoat uses shadcn/ui compatible CSS variables:

import glaze/basecoat/theme

let custom_theme =
  theme.default_theme()
  |> theme.set(theme.Primary, "oklch(0.205 0 0)")
  |> theme.set(theme.Radius, "0.5rem")

You can find curated themes at ui.shadcn.com/themes.

You can also use tools like https://tweakcn.com/editor/theme!

If you are not using the built-in theme module to configure your theme, you can find more documentation on it here: https://basecoatui.com/installation/#install-theming.

FAQs

What about Icons?

Not strictly necessary, but Basecoat recommends using Lucide icons.

Lucide docs: https://lucide.dev/guide/packages/lucide

Client vs Server?

This library constructs HTML elements the same way on a client or on a server, so it is compatible in both environments.