Documentation

ZenUI Library is designed to be easy to use with no installation process required. Unlike many libraries that need to be installed via npm or similar package managers, ZenUI components can be directly copied and pasted into your existing project. This means there is no need to install ZenUI itself.

However, for ZenUI components to work correctly, your project needs to be set up with specific tools and frameworks like Tailwind CSS, React, or Next.js. These are the fundamental technologies that power the ZenUI components, as they are built using Tailwind CSS for styling and compatible with popular frameworks like React.

Why Doesn’t ZenUI Require Installation?

ZenUI is a library of pre-built components and blocks that can be directly inserted into your project’s code. It doesn’t function as a JavaScript package that needs installation. Instead, you can copy the component’s HTML and Tailwind CSS classes from ZenUI and immediately use them in your application, making it incredibly flexible and easy to integrate.

Some ZenUI components may include icons. To ensure these components display correctly, you will need to install the react-icons package if you're using React. This package provides a wide range of icons that can be easily integrated into your components. You can install it via npm npm install react-icons

Project Requirements:

While ZenUI doesn’t have its own installation, you’ll need to ensure that your project is already configured with the necessary tools, depending on the type of project you're working on. Below are the common setups you’ll need for ZenUI components:

Tailwind CSS Project: If you're building a project with plain HTML or any framework, ensure that you have Tailwind CSS installed for styling. ZenUI components are styled using Tailwind CSS, so having it set up is essential.
React Project with Tailwind CSS: If you're using React, Tailwind CSS should be installed and configured in your React project. ZenUI components can be used directly in your JSX files once Tailwind is set up.
Next.js with Tailwind CSS: ZenUI components can also be used in a Next.js project, but again, Tailwind CSS needs to be configured first.

Basic Project Setup:

Since ZenUI doesn’t need any installation, we can help by providing guidance on how to set up a basic project environment that will allow you to use ZenUI components.

Tailwind CSS Project: Tailwind CSS is the main styling framework used by ZenUI components. You’ll need to add Tailwind to your project by following these steps:
Tailwind CSS Installation Guide
React Project with Tailwind CSS: If you're using React and want to integrate ZenUI, make sure your project has Tailwind CSS installed:
React + Tailwind CSS Setup Guide
Next.js with Tailwind CSS: If you're building a Next.js project, you can easily integrate Tailwind CSS by following the guide below:
Next.js + Tailwind CSS Setup Guide

By following the setup guides for Tailwind CSS, React, or Next.js, you'll be ready to use ZenUI components right away! If you need help setting up your project, refer to the links provided above for detailed instructions.

We use cookies to improve your experience, personalize content, and analyze traffic. By clicking "Accept" you agree to our cookie use. For details, see our Privacy Policy.