ZenUI Library Vue

Open-Source UI Component Library
Elevate your projects with ZenUI, a free, lightweight, customizable UI component library built with Vue3 and Tailwind CSS.

Your Support = More UI Magic 😍

Installation

Clone the repository:

git clone https://github.com/zenui-labs/zenui-library-vue.git

Go to the project directory:

cd zenui-library

Install the all dependencies:

npm install

Run the project:

npm run dev

Documentation

ZenUI 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!

Getting Started

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

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

Using ZenUI Components

Copy and Paste Usage

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

<button class="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.

Customizing Components

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

Changing Colors and Sizes

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

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

<!-- Customized Button -->
<button class="px-6 py-3 bg-green-500 text-white rounded-lg hover:bg-green-600">
    Customized Button
</button>

Changes:

• 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.

Adding or Modifying Classes

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

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

Changes:

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

Best Practices

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 classes as needed instead of rewriting CSS.
3. Document Customizations: Keep notes on any modifications to standard ZenUI components for easy maintenance.
   

Contribution

We welcome contributions from the community! Please refer to the CONTRIBUTING.md file for more details on how to contribute.

License

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

Connect With ZenUI