- Notifications
You must be signed in to change notification settings - Fork2
Elegant, Modern, and Customizable TailwindCSS components for ✨ Lustre ✨
License
MAHcodes/gleez
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Elegant, Modern, and Customizable TailwindCSS components for ✨Lustre ✨
Similar toshadcn
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 isNOT 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 usinggleez cli.
To install the gleez cli:
gleam add gleez --dev
GleezColors are basicallyTailwindCSS Custom Colors
Gleez requires 7 custom TailwindCSS colors:
NeutralPrimarySecondarySuccessInfoWarningDanger
Each component variant requires aColor type, which is defined within the component itself:
pubtypeColors{NeutralPrimarySecondarySuccessInfoWarningDanger}
You can extend the colors for each component and import them from the component.
To manually configure the colors:
// tailwind.config.jsmodule.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:24010%40%;--neutral-foreground:22023%95%;--primary:33182%64%;--primary-foreground:22023%95%;--secondary:3081%63%;--secondary-foreground:22023%95%;--success:10958%40%;--success-foreground:22023%95%;--info:22091%54%;--info-foreground:22023%95%;--warning:3577%49%;--warning-foreground:22023%95%;--danger:34787%44%;--danger-foreground:22023%95%; } .dark {--neutral:24010%60%;--neutral-foreground:24021%15%;--primary:33182%64%;--primary-foreground:24021%15%;--secondary:3081%63%;--secondary-foreground:24021%15%;--success:11554%76%;--success-foreground:24021%15%;--info:21792%76%;--info-foreground:24021%15%;--warning:4186%83%;--warning-foreground:24021%15%;--danger:34381%75%;--danger-foreground:24021%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)
About
Elegant, Modern, and Customizable TailwindCSS components for ✨ Lustre ✨