🍩 Glaze Oat

This is a collection of components mapped 1:1 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.

Getting Started

Step 1: Installation

gleam add glaze_oat@1

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

glaze_oat.register(glaze_oat.version)

Step 3: Register your theme

let my_theme = glaze_oat.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.

In a real project this might look like this:

import glaze_oat
import glaze_oat/theme

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

You can find the full documentatio 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 a .html file, that you can simply open in your browser and inspect.

gleam dev
open oat.html