🍩 Glaze Oat

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

It follows Semantic HTML, is very small (~8KB CSS and JS) and themable.

For a full list of components, take a look at https://hexdocs.pm/glaze_oat or https://oat.ink/components/

Latest supported version is Oat v0.4.1. This library will be updated for future versions when they get released.

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

Getting Started

Step 1: Installation

gleam add glaze_oat@2

Step 2: Register <style> and <script> tags

glaze_oat.register(glaze_oat.version)

Step 3: Register your theme

import glaze/oat/theme

let my_theme = theme.default_theme()
theme.style_tag(my_theme)

For a full overview of all available theme variables, take a look at https://github.com/knadh/oat/blob/master/src/css/01-theme.css.

Example

In a real project this might look like this:

import glaze/oat
import glaze/oat/theme

pub fn layout() {
  html.html([
    html.head([
      // ...
      
      oat.register(oat.version),
      theme.style_tag(theme.default_theme),
    ]),
    html.body([
      // ...
    ])
  ])
}

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

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

FAQs

Tailwind?

Oat does not use or need Tailwind. However it does not clash with it in anyway, so you can use it along this library with no problems!

Client vs Server?

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

The only exception is the toast component. In the browser, it uses FFI to call the ot.toast function directly, but on Erlang, it generates a javascript string, that you can embed into your html directly (f.e. via onclick or in a <script> tag).

Development

There is a dev module that constructs a demo with all available elements and writes it to the GitHub Pages artifact at docs/glaze_oat/index.html.

gleam dev
open ../docs/glaze_oat/index.html