Purvex UI

React Component Generator for Tailwind CSS

Built by a high school developer, designed for modern web development

Website • Documentation • Components

About

Purvex UI is a component generator, not a traditional UI library. Copy components directly into your project, customize them however you want, and maintain full control without any external dependencies.

What makes Purvex UI different:

• Full control over component code
• Zero runtime overhead
• Built with Tailwind CSS v4
• One command setup
• Beautiful purple elegant theme out of the box

Quick Start

1. Create React Project

npx create-vite@latest my-app --template react
cd my-app
npm install

2. Setup Purvex UI

npx purvex-ui setup

This command automatically installs:

• Tailwind CSS v4
• clsx & tailwind-merge
• Path alias configuration
• Complete folder structure

3. Add Components

npx purvex-ui add button
npx purvex-ui add card
npx purvex-ui add avatar

4. Use in Your Code

import { Button } from "@/components/ui/button"

function App() {
  return <Button variant="primary-gradient">Hello Purvex UI!</Button>
}

Available Components

Button

Multiple variants including flat, gradient, light, and outline styles.

npx purvex-ui add button

Card

Flexible card component with header, content, and footer sections.

npx purvex-ui add card

Avatar

Profile pictures with multiple shape variants (circle, square, star, heart).

npx purvex-ui add avatar

More components coming soon: Input, Dialog, Alert, Dropdown, Navigation, Form Components

CLI Commands

| Command | Description | |---------|-------------| | npx purvex-ui setup | Complete project setup with Tailwind v4 | | npx purvex-ui add <name> | Add a component to your project | | npx purvex-ui list | List all available components | | npx purvex-ui init | Initialize folder structure only | | npx purvex-ui uninstall | Remove Purvex UI from project |

Customization

All components are in your project at src/components/ui/. Edit them directly:

// Extend with Tailwind classes
<Button className="bg-gradient-to-r from-green-400 to-blue-500 rounded-full shadow-lg">
  Custom Button
</Button>

// Or edit the source file directly
// src/components/ui/button.jsx

Documentation

Full documentation, examples, and guides available at:

purvex-ui.vercel.app

About the Creator

Purvex UI is created by Al Zaki Ibra Ramadani, a high school student passionate about web development and open source. This project represents a commitment to building tools that developers love to use.

Support This Project

If you find Purvex UI helpful, consider supporting its development:

☕ Buy me a coffee

Your support helps maintain and improve Purvex UI!

Contributing

Want to contribute or collaborate?

📧 Email: [email protected]
💬 WhatsApp: +62-85600697366
🐛 Issues: GitHub Issues

License

MIT License © 2025-2026 PurvexUI

Built with passion by a high school developer

Website • GitHub • Support