https://github.com/lustre-labs/lustre_ui

A collection of components and design tokens for building Lustre apps.
https://github.com/lustre-labs/lustre_ui

Last synced: 3 months ago
JSON representation

A collection of components and design tokens for building Lustre apps.

• Host: GitHub
• URL: https://github.com/lustre-labs/lustre_ui
• Owner: lustre-labs
• License: mit
• Created: 2023-09-25T07:01:16.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-04-20T15:35:40.000Z (7 months ago)
• Last Synced: 2024-04-22T11:30:57.873Z (7 months ago)
• Language: Gleam
• Size: 438 KB
• Stars: 24
• Watchers: 3
• Forks: 4
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• awesome-gleam - lustre_ui - [📚](https://hexdocs.pm/lustre_ui/) - A collection of components and design tokens for building Lustre apps. (Packages / Frontend)

README

        
Lustre UI




  A thoughtfully designed UI library for Lustre.








  

  

  





  


    

      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](https://hex.pm/packages/lustre_ui). To use it in

your project with Gleam:

```sh

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/styles`](https://hexdocs.pm/lustre_ui/lustre/ui/util/styles.html).

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](https://github.com/hayleigh-dot-dev),

around two jobs. If you'd like to support my work, you can [sponsor me on GitHub](https://github.com/sponsors/hayleigh-dot-dev).

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.