Elegant, Modern, and Customizable TailwindCSS components for ✨ Lustre ✨
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.
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 gleezGleez Colors are basically TailwindCSS Custom Colors
Gleez requires 7 custom TailwindCSS colors:
NeutralPrimarySecondarySuccessInfoWarningDanger
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%;
}
}What is the origin of the name "Gleez"?
Gleez is a mashup of Gleam and Deez, which raises the question, "What is Deez?"- lustre-ui (reference)
- gleam-tour (code highlights)
- shadcn (concept)
- NextUI (inspiration)
- Catppuccin (colors)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent