{"id":20466704,"url":"https://github.com/mahcodes/gleez","last_synced_at":"2025-06-11T08:09:56.855Z","repository":{"id":238155523,"uuid":"789863279","full_name":"MAHcodes/gleez","owner":"MAHcodes","description":"Elegant, Modern, and Customizable TailwindCSS components for ✨ Lustre ✨","archived":false,"fork":false,"pushed_at":"2025-06-04T16:50:59.000Z","size":656,"stargazers_count":46,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-04T22:22:57.363Z","etag":null,"topics":["gleam","lustre","shadcn","tailwindcss"],"latest_commit_sha":null,"homepage":"https://gleez.netlify.app","language":"Gleam","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MAHcodes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-04-21T18:53:38.000Z","updated_at":"2025-06-04T16:51:02.000Z","dependencies_parsed_at":null,"dependency_job_id":"67bdf9f2-ff1b-430a-9af5-952ba87137f9","html_url":"https://github.com/MAHcodes/gleez","commit_stats":null,"previous_names":["mahcodes/gleez"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MAHcodes%2Fgleez","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MAHcodes%2Fgleez/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MAHcodes%2Fgleez/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MAHcodes%2Fgleez/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MAHcodes","download_url":"https://codeload.github.com/MAHcodes/gleez/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MAHcodes%2Fgleez/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259123871,"owners_count":22808876,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gleam","lustre","shadcn","tailwindcss"],"created_at":"2024-11-15T13:25:12.857Z","updated_at":"2025-06-11T08:09:56.808Z","avatar_url":"https://github.com/MAHcodes.png","language":"Gleam","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch3 align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/MAHcodes/gleez/master/app/public/imgs/Gleez.svg\" width=\"700\" alt=\"Gleez Logo\"/\u003e\n  \u003cbr/\u003e\u003cbr/\u003e\n  Elegant, Modern, and Customizable TailwindCSS components for ✨ \u003ca href=\"https://github.com/lustre-labs/lustre\"\u003eLustre\u003c/a\u003e ✨\n\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/MAHcodes/gleez/blob/master/app/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/static/v1.svg?style=for-the-badge\u0026label=License\u0026message=MIT\u0026logoColor=d9e0ee\u0026colorA=363a4f\u0026colorB=b7bdf8\"/\u003e\u003c/a\u003e\n\t\u003ca href=\"https://github.com/MAHcodes/gleez/stargazers\"\u003e\u003cimg src=\"https://img.shields.io/github/stars/MAHcodes/gleez?colorA=363a4f\u0026colorB=b7bdf8\u0026style=for-the-badge\"\u003e\u003c/a\u003e\n\t\u003ca href=\"https://github.com/MAHcodes/gleez/issues\"\u003e\u003cimg src=\"https://img.shields.io/github/issues/MAHcodes/gleez?colorA=363a4f\u0026colorB=f5a97f\u0026style=for-the-badge\"\u003e\u003c/a\u003e\n\t\u003ca href=\"https://github.com/MAHcodes/gleez/contributors\"\u003e\u003cimg src=\"https://img.shields.io/github/contributors/MAHcodes/gleez?colorA=363a4f\u0026colorB=a6da95\u0026style=for-the-badge\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## :sparkles: Introduction\n\nSimilar to [shadcn](https://ui.shadcn.com/docs)\n\n\u003e This is NOT a component library. It's a collection of re-usable components that you can copy and paste into your apps.\n\nThis 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.\n\n## :rocket: Installation\n\nAs mentioned earlier, this is **NOT** a component library. Instead, it's a collection of reusable components that you can integrate into your apps.\n\nYou can either copy and paste the components directly, or install them using `gleez` cli.\n\nTo install the gleez cli:\n\n```sh\ngleam add gleez --dev\n```\n\n## :rainbow: Colors\n\nGleez `Colors` are basically [TailwindCSS Custom Colors](https://tailwindcss.com/docs/customizing-colors#using-custom-colors)\n\nGleez requires 7 custom TailwindCSS colors:\n\n- `Neutral`\n- `Primary`\n- `Secondary`\n- `Success`\n- `Info`\n- `Warning`\n- `Danger`\n\nEach component variant requires a `Color` type, which is defined within the component itself:\n\n```gleam\npub type Colors {\n  Neutral\n  Primary\n  Secondary\n  Success\n  Info\n  Warning\n  Danger\n}\n```\n\nYou can extend the colors for each component and import them from the component.\n\nTo manually configure the colors:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    extend: {\n      colors: {\n        neutral: {\n          DEFAULT: \"hsl(var(--neutral) / \u003calpha-value\u003e)\",\n          foreground: \"hsl(var(--neutral-foreground) / \u003calpha-value\u003e)\",\n        },\n        primary: {\n          DEFAULT: \"hsl(var(--primary) / \u003calpha-value\u003e)\",\n          foreground: \"hsl(var(--primary-foreground) / \u003calpha-value\u003e)\",\n        },\n        secondary: {\n          DEFAULT: \"hsl(var(--secondary) / \u003calpha-value\u003e)\",\n          foreground: \"hsl(var(--secondary-foreground) / \u003calpha-value\u003e)\",\n        },\n        info: {\n          DEFAULT: \"hsl(var(--info) / \u003calpha-value\u003e)\",\n          foreground: \"hsl(var(--info-foreground) / \u003calpha-value\u003e)\",\n        },\n        success: {\n          DEFAULT: \"hsl(var(--success) / \u003calpha-value\u003e)\",\n          foreground: \"hsl(var(--success-foreground) / \u003calpha-value\u003e)\",\n        },\n        warning: {\n          DEFAULT: \"hsl(var(--warning) / \u003calpha-value\u003e)\",\n          foreground: \"hsl(var(--warning-foreground) / \u003calpha-value\u003e)\",\n        },\n        danger: {\n          DEFAULT: \"hsl(var(--danger) / \u003calpha-value\u003e)\",\n          foreground: \"hsl(var(--danger-foreground) / \u003calpha-value\u003e)\",\n        },\n      },\n    },\n  },\n};\n```\n\nDefine CSS variables for light and dark theme:\n\n```css\n/* global.css */\n@layer base {\n  :root,\n  .light {\n    --neutral: 240 10% 40%;\n    --neutral-foreground: 220 23% 95%;\n\n    --primary: 331 82% 64%;\n    --primary-foreground: 220 23% 95%;\n\n    --secondary: 30 81% 63%;\n    --secondary-foreground: 220 23% 95%;\n\n    --success: 109 58% 40%;\n    --success-foreground: 220 23% 95%;\n\n    --info: 220 91% 54%;\n    --info-foreground: 220 23% 95%;\n\n    --warning: 35 77% 49%;\n    --warning-foreground: 220 23% 95%;\n\n    --danger: 347 87% 44%;\n    --danger-foreground: 220 23% 95%;\n  }\n\n  .dark {\n    --neutral: 240 10% 60%;\n    --neutral-foreground: 240 21% 15%;\n\n    --primary: 331 82% 64%;\n    --primary-foreground: 240 21% 15%;\n\n    --secondary: 30 81% 63%;\n    --secondary-foreground: 240 21% 15%;\n\n    --success: 115 54% 76%;\n    --success-foreground: 240 21% 15%;\n\n    --info: 217 92% 76%;\n    --info-foreground: 240 21% 15%;\n\n    --warning: 41 86% 83%;\n    --warning-foreground: 240 21% 15%;\n\n    --danger: 343 81% 75%;\n    --danger-foreground: 240 21% 15%;\n  }\n}\n```\n\n## :question: FAQ\n\n\u003cdetails\u003e\n    \u003csummary\u003eWhat is the origin of the name \"Gleez\"?\u003c/summary\u003e\n    \u003cstrong\u003eGleez\u003c/strong\u003e is a mashup of\u003cstrong\u003e Gleam \u003c/strong\u003e and\u003cstrong\u003e Deez\u003c/strong\u003e, which raises the question,\u003cstrong\u003e \"What is Deez?\"\u003c/strong\u003e\n\u003c/details\u003e\n\n## :pray: Acknowledgments\n\n- [lustre-ui](https://github.com/lustre-labs/ui) (reference)\n- [gleam-tour](https://github.com/gleam-lang/language-tour) (code highlights)\n- [shadcn](https://github.com/shadcn-ui/ui) (concept)\n- [NextUI](https://github.com/nextui-org/nextui) (inspiration)\n- [Catppuccin](https://github.com/catppuccin/catppuccin) (colors)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmahcodes%2Fgleez","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmahcodes%2Fgleez","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmahcodes%2Fgleez/lists"}