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

✨ Introduction

Similar to shadcn

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.

🚀 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:

gleam add gleez --dev

🌈 Colors

Gleez Colors are basically TailwindCSS 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:

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:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        neutral: {
          DEFAULT: "hsl(var(--neutral) / <alpha-value>)",
          foreground: "hsl(var(--neutral-foreground) / <alpha-value>)",
        },
        primary: {
          DEFAULT: "hsl(var(--primary) / <alpha-value>)",
          foreground: "hsl(var(--primary-foreground) / <alpha-value>)",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary) / <alpha-value>)",
          foreground: "hsl(var(--secondary-foreground) / <alpha-value>)",
        },
        info: {
          DEFAULT: "hsl(var(--info) / <alpha-value>)",
          foreground: "hsl(var(--info-foreground) / <alpha-value>)",
        },
        success: {
          DEFAULT: "hsl(var(--success) / <alpha-value>)",
          foreground: "hsl(var(--success-foreground) / <alpha-value>)",
        },
        warning: {
          DEFAULT: "hsl(var(--warning) / <alpha-value>)",
          foreground: "hsl(var(--warning-foreground) / <alpha-value>)",
        },
        danger: {
          DEFAULT: "hsl(var(--danger) / <alpha-value>)",
          foreground: "hsl(var(--danger-foreground) / <alpha-value>)",
        },
      },
    },
  },
};

Define CSS variables for light and dark theme:

/* 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%;
  }
}

❓ FAQ

What is the origin of the name "Gleez"?

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

🙏 Acknowledgments

• lustre-ui (reference)
• gleam-tour (code highlights)
• shadcn (concept)
• NextUI (inspiration)
• Catppuccin (colors)