- Notifications
You must be signed in to change notification settings - Fork3
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 ✨
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Uh oh!
There was an error while loading.Please reload this page.
Contributors3
Uh oh!
There was an error while loading.Please reload this page.