Repository files navigation

Open-Source UI Component Library
Elevate 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.

Components

• 700+ Components
• 20+ pre-built templates
• Website Blocks
• E-commerce kits

Animations

• 100+ Animated Components

Tools

• Customizable 500+ Icons
• color Opacity Palette
• Extract Color From Uploaded Image (Color Picker)
• HTML Semantic tagmaster
• Keyboard shortcut key's ready function generator (shortKey)
• Tailwind config generator (for v3)

Resources

• 118+ Programming Resources
• 32+ React reusable custom hooks

Clone the repository:

git clone https://github.com/Asfak00/zenui-library.git

Go to the project directory:

cd zenui-library

Install the all dependencies:

npm install

Run the project:

npm run dev

ZenUI is a plug-and-play component library using byTailwind CSS styling. Justcopy the code andpaste itinto your project, no installation or configuration needed!

ZenUI components are designed for quick and easy use. To get started, simply:

1. Find the component you want in theZenUI library.
2. Copy the code snippet.
3. Paste it into your project, anywhere HTML is supported.

Each component in ZenUI is built with Tailwind CSS classes. For example:

<buttonclass="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">    Click Me</button>

This button is ready to go. No props or extra configuration required.

Since ZenUI components use Tailwind CSS, you can easily customize them by modifying or adding classes. Here’s how:

To adjust colors, sizes, or other styling attributes, modify the Tailwind classes:

<!-- Original Button --><buttonclass="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">    Click Me</button><!-- Customized Button --><buttonclass="px-6 py-3 bg-green-500 text-white rounded-lg hover:bg-green-600">    Customized Button</button>

• bg-green-500 changes the background color.
• px-6 py-3 adjusts padding for larger button size.
• rounded-lg increases the border radius for a more rounded button.

Feel free to add any Tailwind CSS class to further style components, for example, adding shadow effects or animations.

<divclass="p-4 bg-white shadow-lg rounded-lg hover:shadow-xl transition-shadow"><h2class="text-lg font-semibold">ZenUI Card</h2><pclass="text-gray-700">This is a customizable card component.</p></div>

• shadow-lg adds a shadow for depth.
• hover:shadow-xl increases the shadow on hover.
• transition-shadow adds smooth transitions for better UX.

1. Start with Defaults: Use ZenUI components as provided before customizing, so you know how they behave.
2. Use Tailwind’s Utility-First Approach: Tailwind CSS is optimized for utility classes, so apply additional classesas needed instead of rewriting CSS.
3. Document Customizations: Keep notes on any modifications to standard ZenUI components for easy maintenance.
   

We're excited to offer the opportunity for creators to sell their templates on the ZenUI Library! Contribute and earn bysharing your React, Next.js, or Tailwind CSS templates with our community.

For more details on how to submit and sell your templates, including guidelines, submission steps, and earningsinformation, please readtheTEMPLATE_SUBMISSION_GUIDE.mdfile.

Earn 80% commission on each sale, and help empower other developers with your creative solutions! 🚀

We welcome contributions from the community! Please refer totheCONTRIBUTING.md file for more details onhow to contribute.

This project is licensed under the MIT License - seetheLICENSE file for details.