UI Component Library

A modern React + TailwindCSS UI component library designed to help you build beautiful, accessible, and theme-friendly applications faster.

👉 Explore live stories: zop.dev/ui-components

---

✨ Features

• 📦 Ready-to-use components with full Storybook documentation
• 🎨 Theme-aware — works across multiple design systems
• 🛠 TailwindCSS utility classes only (no arbitrary values)
• ⚡ Fast development — drop in and ship UI quickly
• 🔄 Composable & flexible — designed for reuse across projects

---

📖 Storybook

Run Storybook locally:

npm install
npm run start

This launches Storybook at http://localhost:6006.

---

📝 Developer Guidelines

To ensure theme compatibility and design consistency, follow these rules:

1. No arbitrary values

   • ❌ bg-[#bada55] text-[22px]
   • ✅ bg-primary text-lg

2. Allowed color tokens only

   • primary, secondary, white, black, gray, red, yellow, green
   • Use semantic Tailwind classes like text-red-200 (error) or text-yellow-500 (warning).
   • Actual values may be overridden by project themes.

3. Font sizes

   • Only use Tailwind’s default typography scale (text-sm, text-lg, etc).