element.version === currentVersion)) { versionNodes.unshift({ version: currentVersion, url: "#" }); } document.querySelector("#project-version").innerHTML = versionNodes.reduce( (acc, element) => { const status = currentVersion === element.version ? "selected disabled" : ""; return ` ${acc} `; }, `
lustre_ui · v0.6.0

lustre_ui - v0.6.0

Lustre UI

A thoughtfully designed UI library for Lustre.

Available on Hex

Lustre | Discord

Built with ❤︎ by Hayleigh Thompson

Features

  • A set of thoughtfully designed and accessible components that account written with idiomatic Gleam and CSS in mind.

  • A collection of layouting primitives that make it easy to build complex UIs without knowledge of flexbox or grid.

  • Utility classes that make it easy to style your own components without writing CSS.

  • A customisable theme system to tweak colours, spacing, and typography to fit your brand.

Philosophy

Many of Lustre’s users are backend or fullstack developers with less interest or experience in frontend development. Lustre UI is primarily designed with those folks in mind, and has two main goals:

  • Make it easy to build good-looking, accessible UIs without needing to know much about CSS or design.

  • Encourage well-structured semantic HTML and avoid div soup.

To achieve this, Lustre UI is opinionated on many aspects of the visual design. For folks that don’t want to worry about design, this is a feature not a bug, but for users looking for a flexible “headless” UI library you may have to look elsewhere.

Installation

Note: Lustre UI is currently still an alpha release while we work on the core library and experiment with different components. Expect the API to change from time to time and documentation to be sparse!

Lustre UI is published on Hex. To use it in your project with Gleam:

gleam add lustre_ui

Ensure the required CSS is rendered in your apps by either serving the stylesheet found in the priv/static directory of this package or rendering the styles inline using the functions found in lustre/ui/util/styes.

Lustre UI is configured to work out of the box with no additional themeing or setup required, so you can just drop the stylesheet in and go!

Support

Lustre is mostly built by just me, Hayleigh, around two jobs. If you’d like to support my work, you can sponsor me on GitHub.

Contributions are also very welcome! If you’ve spotted a bug, or would like to suggest a feature, please open an issue or a pull request.

✨ Search Document