Elegant, Modern, and Customizable TailwindCSS components for ✨ Lustre ✨
:sparkles: 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.
: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:
gleam add gleez
:rainbow: 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%;
}
}
: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 (reference)
- gleam-tour (code highlights)
- shadcn (concept)
- NextUI (inspiration)
- Catppuccin (colors)