https://github.com/mahcodes/gleez

Elegant, Modern, and Customizable TailwindCSS components for ✨ Lustre ✨
https://github.com/mahcodes/gleez

gleam lustre shadcn tailwindcss

Last synced: about 4 hours ago
JSON representation

Elegant, Modern, and Customizable TailwindCSS components for ✨ Lustre ✨

• Host: GitHub
• URL: https://github.com/mahcodes/gleez
• Owner: MAHcodes
• License: mit
• Created: 2024-04-21T18:53:38.000Z (7 months ago)
• Default Branch: master
• Last Pushed: 2024-10-18T12:11:41.000Z (28 days ago)
• Last Synced: 2024-11-06T14:52:29.038Z (9 days ago)
• Topics: gleam, lustre, shadcn, tailwindcss
• Language: Gleam
• Homepage: https://gleez.netlify.app
• Size: 635 KB
• Stars: 31
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  

  



  Elegant, Modern, and Customizable TailwindCSS components for ✨ Lustre ✨





  

	

	

	



## :sparkles: Introduction

Similar to [shadcn](https://ui.shadcn.com/docs)

> This is NOT a component library. It's a collection of re-usable components that you can copy and paste into your apps.

This website showcases a real-world application built with Lustre and Gleez. you can check the source code on GitHub, as it's open source under the MIT License.

## :rocket: Installation

As mentioned earlier, this is **NOT** a component library. Instead, it's a collection of reusable components that you can integrate into your apps.

You can either copy and paste the components directly, or install them using `gleez` cli.

To install the gleez cli:

```sh

gleam add gleez --dev

```

## :rainbow: Colors

Gleez `Colors` are basically [TailwindCSS Custom Colors](https://tailwindcss.com/docs/customizing-colors#using-custom-colors)

Gleez requires 7 custom TailwindCSS colors:

- `Neutral`

- `Primary`

- `Secondary`

- `Success`

- `Info`

- `Warning`

- `Danger`

Each component variant requires a `Color` type, which is defined within the component itself:

```gleam

pub type Colors {

  Neutral

  Primary

  Secondary

  Success

  Info

  Warning

  Danger

}

```

You can extend the colors for each component and import them from the component.

To manually configure the colors:

```js

// tailwind.config.js

module.exports = {

  theme: {

    extend: {

      colors: {

        neutral: {

          DEFAULT: "hsl(var(--neutral) / )",

          foreground: "hsl(var(--neutral-foreground) / )",

        },

        primary: {

          DEFAULT: "hsl(var(--primary) / )",

          foreground: "hsl(var(--primary-foreground) / )",

        },

        secondary: {

          DEFAULT: "hsl(var(--secondary) / )",

          foreground: "hsl(var(--secondary-foreground) / )",

        },

        info: {

          DEFAULT: "hsl(var(--info) / )",

          foreground: "hsl(var(--info-foreground) / )",

        },

        success: {

          DEFAULT: "hsl(var(--success) / )",

          foreground: "hsl(var(--success-foreground) / )",

        },

        warning: {

          DEFAULT: "hsl(var(--warning) / )",

          foreground: "hsl(var(--warning-foreground) / )",

        },

        danger: {

          DEFAULT: "hsl(var(--danger) / )",

          foreground: "hsl(var(--danger-foreground) / )",

        },

      },

    },

  },

};

```

Define CSS variables for light and dark theme:

```css

/* global.css */

@layer base {

  :root,

  .light {

    --neutral: 240 10% 40%;

    --neutral-foreground: 220 23% 95%;

    --primary: 331 82% 64%;

    --primary-foreground: 220 23% 95%;

    --secondary: 30 81% 63%;

    --secondary-foreground: 220 23% 95%;

    --success: 109 58% 40%;

    --success-foreground: 220 23% 95%;

    --info: 220 91% 54%;

    --info-foreground: 220 23% 95%;

    --warning: 35 77% 49%;

    --warning-foreground: 220 23% 95%;

    --danger: 347 87% 44%;

    --danger-foreground: 220 23% 95%;

  }

  .dark {

    --neutral: 240 10% 60%;

    --neutral-foreground: 240 21% 15%;

    --primary: 331 82% 64%;

    --primary-foreground: 240 21% 15%;

    --secondary: 30 81% 63%;

    --secondary-foreground: 240 21% 15%;

    --success: 115 54% 76%;

    --success-foreground: 240 21% 15%;

    --info: 217 92% 76%;

    --info-foreground: 240 21% 15%;

    --warning: 41 86% 83%;

    --warning-foreground: 240 21% 15%;

    --danger: 343 81% 75%;

    --danger-foreground: 240 21% 15%;

  }

}

```

## :question: FAQ

    What is the origin of the name "Gleez"?

    Gleez is a mashup of Gleam  and Deez, which raises the question, "What is Deez?"

## :pray: Acknowledgments

- [lustre-ui](https://github.com/lustre-labs/ui) (reference)

- [gleam-tour](https://github.com/gleam-lang/language-tour) (code highlights)

- [shadcn](https://github.com/shadcn-ui/ui) (concept)

- [NextUI](https://github.com/nextui-org/nextui) (inspiration)

- [Catppuccin](https://github.com/catppuccin/catppuccin) (colors)