{"id":24066020,"url":"https://github.com/asfak00/zenui-library","last_synced_at":"2025-05-16T11:05:47.525Z","repository":{"id":246423887,"uuid":"738940781","full_name":"Asfak00/zenui-library","owner":"Asfak00","description":"Elevate your project with free UI components, customizable icons, and a color palette. No dependencies required 🤫","archived":false,"fork":false,"pushed_at":"2025-05-13T17:32:11.000Z","size":23710,"stargazers_count":304,"open_issues_count":3,"forks_count":44,"subscribers_count":6,"default_branch":"production","last_synced_at":"2025-05-13T18:40:30.454Z","etag":null,"topics":["advance-components","component","component-library","design-tools","dsa","dsa-resources","free-components","free-templates","front-end-development","react-component-library","react-components","resources","tailwindui","ui","zenui","zenui-components","zenui-icons","zenui-library","zenui-templates"],"latest_commit_sha":null,"homepage":"https://zenui.net","language":"JavaScript","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/Asfak00.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","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-01-04T12:00:35.000Z","updated_at":"2025-05-10T06:58:45.000Z","dependencies_parsed_at":"2024-07-13T15:26:02.468Z","dependency_job_id":"516d3a9c-7e1b-455c-b2d0-7bb092a19a03","html_url":"https://github.com/Asfak00/zenui-library","commit_stats":null,"previous_names":["asfak00/zenui-library"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Asfak00%2Fzenui-library","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Asfak00%2Fzenui-library/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Asfak00%2Fzenui-library/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Asfak00%2Fzenui-library/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Asfak00","download_url":"https://codeload.github.com/Asfak00/zenui-library/tar.gz/refs/heads/production","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254518383,"owners_count":22084374,"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":["advance-components","component","component-library","design-tools","dsa","dsa-resources","free-components","free-templates","front-end-development","react-component-library","react-components","resources","tailwindui","ui","zenui","zenui-components","zenui-icons","zenui-library","zenui-templates"],"created_at":"2025-01-09T11:18:50.072Z","updated_at":"2025-05-16T11:05:42.517Z","avatar_url":"https://github.com/Asfak00.png","language":"JavaScript","funding_links":["https://www.buymeacoffee.com/zenuilibrary"],"categories":[],"sub_categories":[],"readme":"\u003cbr /\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/Asfak00/zenui-library\"\u003e\n    \u003cimg src=\"https://i.ibb.co.com/0BZfPq6/darklogo.png\" alt=\"ZenUI Library\" width=\"150\" /\u003e\n  \u003c/a\u003e\n\n\u003ch1 align=\"center\"\u003e\nZenUI Library\n\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://github.com/Asfak00/zenui-library\" target=\"__blank\"\u003e\u003cimg alt=\"release date\" src=\"https://img.shields.io/github/release-date/asfak00/zenui-library\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/Asfak00/zenui-library\" target=\"__blank\"\u003e\u003cimg alt=\"commits\" src=\"https://img.shields.io/github/commit-activity/w/asfak00/zenui-library\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/Asfak00/zenui-library\" target=\"__blank\"\u003e\u003cimg alt=\"Contributors\" src=\"https://img.shields.io/github/contributors/asfak00/zenui-library\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/Asfak00/zenui-library\" target=\"__blank\"\u003e\u003cimg alt=\"stars\" src=\"https://img.shields.io/github/stars/asfak00/zenui-library\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\nOpen-Source UI Component Library\u003cbr\u003e\nElevate your projects with ZenUI, a free, lightweight, customizable UI component library built with React and Tailwind CSS. ZenUI provides various components, icons, website templates, and color palette options to accelerate development.\n\n![cover](https://i.ibb.co.com/CWtdR19/post.png)\n\n## Features\n\n- Customizable 500+ Icons\n- 600+ Components\n- color Opacity Palette\n- E-Commerce kits\n- 100+ Programming Resources\n- Extract Color From Uploaded Image (Color Picker)\n- Website Templates\n- Website Blocks\n- Copy the Code And Use It On Your Project\n\n\u003cbr/\u003e\n\n## Be A Sponsor\n\n\u003cp\u003e\u003ca href=\"https://www.buymeacoffee.com/zenuilibrary\"\u003e \u003cimg align=\"left\" src=\"https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png\" height=\"50\" width=\"210\" alt=\"asfak00\" /\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n\n## Installation\n\nClone the repository:\n```bash\ngit clone https://github.com/Asfak00/zenui-library.git\n```\n\nGo to the project directory:\n```bash\ncd zenui-library\n```\n\nInstall the all dependencies:\n```bash\nnpm install\n```\n\nRun the project:\n```bash\nnpm run dev\n```\n\n\u003cbr/\u003e\n\n## Documentation\n\nZenUI is a plug-and-play component library using by **Tailwind CSS** styling. Just **copy** the code and **paste** it into your project, no installation or configuration needed!\n\n### Getting Started\n\nZenUI components are designed for quick and easy use. To get started, simply:\n\n1. Find the component you want in the [ZenUI library](https://zenui.net).\n2. Copy the code snippet.\n3. Paste it into your project, anywhere HTML is supported.\n\n### Using ZenUI Components\n\n#### Copy and Paste Usage\n\nEach component in ZenUI is built with Tailwind CSS classes. For example:\n\n```html\n\u003cbutton class=\"px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600\"\u003e\n  Click Me\n\u003c/button\u003e\n```\n\nThis button is ready to go. No props or extra configuration required.\n\n### Customizing Components\n\nSince ZenUI components use Tailwind CSS, you can easily customize them by modifying or adding classes. Here’s how:\n\n### Changing Colors and Sizes\n\nTo adjust colors, sizes, or other styling attributes, modify the Tailwind classes:\n\n```html\n\u003c!-- Original Button --\u003e\n\u003cbutton class=\"px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600\"\u003e\n  Click Me\n\u003c/button\u003e\n\n\u003c!-- Customized Button --\u003e\n\u003cbutton class=\"px-6 py-3 bg-green-500 text-white rounded-lg hover:bg-green-600\"\u003e\n  Customized Button\n\u003c/button\u003e\n```\n\n#### Changes:\n- `bg-green-500` changes the background color.\n- `px-6 py-3` adjusts padding for larger button size.\n- `rounded-lg` increases the border radius for a more rounded button.\n\n### Adding or Modifying Classes\n\nFeel free to add any Tailwind CSS class to further style components, for example, adding shadow effects or animations.\n\n```html\n\u003cdiv class=\"p-4 bg-white shadow-lg rounded-lg hover:shadow-xl transition-shadow\"\u003e\n  \u003ch2 class=\"text-lg font-semibold\"\u003eZenUI Card\u003c/h2\u003e\n  \u003cp class=\"text-gray-700\"\u003eThis is a customizable card component.\u003c/p\u003e\n\u003c/div\u003e\n```\n\n#### Changes:\n- `shadow-lg` adds a shadow for depth.\n- `hover:shadow-xl` increases the shadow on hover.\n- `transition-shadow` adds smooth transitions for better UX.\n\n### Best Practices\n\n1. **Start with Defaults**: Use ZenUI components as provided before customizing, so you know how they behave.\n2. **Use Tailwind’s Utility-First Approach**: Tailwind CSS is optimized for utility classes, so apply additional classes as needed instead of rewriting CSS.\n3. **Document Customizations**: Keep notes on any modifications to standard ZenUI components for easy maintenance.\n\u003cbr/\u003e\n\n## Sell Your Template Through ZenUI Library\n\nWe're excited to offer the opportunity for creators to sell their templates on the ZenUI Library! Contribute and earn by sharing your React, Next.js, or Tailwind CSS templates with our community.\n\nFor more details on how to submit and sell your templates, including guidelines, submission steps, and earnings information, please read the [TEMPLATE_SUBMISSION_GUIDE.md](https://github.com/Asfak00/zenui-library/blob/production/TEMPLATE_SUBMISSION_GUIDE.md) file.\n\nEarn 80% commission on each sale, and help empower other developers with your creative solutions! 🚀\n\n## Contribution\n\nWe welcome contributions from the community! Please refer to the [CONTRIBUTING.md](https://github.com/Asfak00/zenui-library/blob/production/CONTRIBUTING.md) file for more details on how to contribute.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](https://github.com/Asfak00/zenui-library/blob/production/LICENSE.md) file for details.\n\n\n## Connect With ZenUI\n\n\u003cp align=\"left\"\u003e\n\u003ca href=\"https://x.com/zenuilibrary\" target=\"blank\"\u003e\u003cimg align=\"center\" src=\"https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/twitter.svg\" alt=\"zenuilibrary\" height=\"30\" width=\"40\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://www.linkedin.com/company/zenui/\" target=\"blank\"\u003e\u003cimg align=\"center\" src=\"https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/linked-in-alt.svg\" alt=\"zenui\" height=\"30\" width=\"40\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://web.facebook.com/zenuilibrary\" target=\"blank\"\u003e\u003cimg align=\"center\" src=\"https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/facebook.svg\" alt=\"zenuilibrary\" height=\"30\" width=\"40\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://discord.gg/qbwytm4WUG\" target=\"blank\"\u003e\u003cimg align=\"center\" src=\"https://static.vecteezy.com/system/resources/previews/023/986/612/non_2x/discord-logo-discord-logo-transparent-discord-icon-transparent-free-free-png.png\" alt=\"zenui\" height=\"45\" width=\"45\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasfak00%2Fzenui-library","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fasfak00%2Fzenui-library","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasfak00%2Fzenui-library/lists"}