Get Started
What is Zen UI
Zen UI is a modern, lightweight React component library designed to help developers build beautiful and responsive user interfaces with minimal effort. Built with TypeScript and styled using Tailwind CSS, it offers a collection of carefully crafted components that follow best practices in design and accessibility.
Our philosophy centers around simplicity and zen-like clarity in design, ensuring that each component is intuitive to use while maintaining a clean, modern aesthetic. The library is built with performance in mind, ensuring smooth interactions and minimal bundle size.
Why use Zen UI
Zen UI stands out for its simplicity, performance, and developer experience. Here's why you should choose Zen UI:
- • Performance First: Optimized components with minimal bundle size
- • Customizable: Extensive theming support through Tailwind CSS
- • Accessibility: WCAG 2.1 compliant components out of the box
- • Responsive: Mobile-first design approach
- • Type Safety: Full TypeScript support with comprehensive types
- • Well Documented: Detailed documentation with live examples
Installation
Getting started with Zen UI is straightforward. Follow these steps:
1. Install the package
npm install @zen-ui/react2. Add Tailwind CSS configuration
npm install -D tailwindcss
npx tailwindcss init3. Import the styles
@import '@zen-ui/react/dist/styles.css';4. Start using components
import { ComponentName } from '@zen-ui/react';Tech Stack
Core Technologies
- • React 18+ for UI components
- • TypeScript for type safety
- • Tailwind CSS for styling
- • Vite for blazing-fast development
Development Tools
- • Storybook for component development
- • Jest & React Testing Library
- • ESLint & Prettier for code quality