Oxyne UI

A beautiful and customizable UI component library CLI for React. Add stunning, accessible components to your project with a single command.

Features

• 🎨 Beautiful Components - Pre-built, customizable UI components
• ⚡ Quick Setup - Initialize in seconds with one command
• 🎯 Type-Safe - Full TypeScript support
• 🌈 Tailwind CSS - Built with Tailwind for easy customization
• ♿ Accessible - Components built with accessibility in mind
• 📦 Modular - Add only the components you need

Installation

No installation required! Use with pnpm dlx to always get the latest version:

pnpm dlx oxyne-ui@latest init

Or use with npx:

npx oxyne-ui@latest init

Quick Start

1. Initialize Oxyne UI in your project

pnpm dlx oxyne-ui@latest init

This creates an oxyne.json configuration file in your project root with your preferred settings.

2. Add components

pnpm dlx oxyne-ui@latest add mode-toggle

This will add the component to your project's components directory.

Commands

init

Initialize Oxyne UI in your project. This creates a configuration file (oxyne.json) with your project settings.

pnpm dlx oxyne-ui@latest init

The configuration includes:

• Project name (from package.json)
• Components directory path
• Tailwind CSS settings
• Path aliases
• Style preferences

add <component-name>

Add a specific component to your project.

pnpm dlx oxyne-ui@latest add button
pnpm dlx oxyne-ui@latest add card
pnpm dlx oxyne-ui@latest add dialog

Configuration

After running pnpm dlx oxyne-ui@latest init, you'll have an oxyne.json file:

{
  "$schema": "https://oxyne-ui.dev/schema.json",
  "projectName": "my-project",
  "version": "1.0.0",
  "componentsDir": "./src/components/ui",
  "style": "default",
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "./src/styles/globals.css",
    "baseColor": "slate",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

Configuration Options

| Option | Description | Default | |--------|-------------|---------| | projectName | Your project name | From package.json | | componentsDir | Where components are installed | ./src/components/ui | | style | Component style variant | default | | tailwind.config | Path to Tailwind config | tailwind.config.js | | tailwind.css | Path to global CSS | ./src/styles/globals.css | | tailwind.baseColor | Base color theme | slate | | tailwind.cssVariables | Use CSS variables | true | | aliases | Path aliases for imports | See example above |

Requirements

• Node.js 18.0.0 or higher
• React 18+
• Tailwind CSS 3+

Examples

Next.js Project

# Create a new Next.js project
npx create-next-app@latest my-app
cd my-app

# Initialize Oxyne UI
pnpm dlx oxyne-ui@latest init

# Add components
pnpm dlx oxyne-ui@latest add button
pnpm dlx oxyne-ui@latest add card

Vite Project

# Create a new Vite project
npm create vite@latest my-app -- --template react
cd my-app

# Initialize Oxyne UI
pnpm dlx oxyne-ui@latest init

# Add components
pnpm dlx oxyne-ui@latest add button

Available Components

More components coming soon! Currently in development:

• Button
• Card
• Dialog
• Mode Toggle (Dark/Light theme)
• Input
• Select
• And many more...

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT © Eduardo Silveira

Support

• 📧 Email: [email protected]
• 🐛 Report Issues
• 📖 Documentation

Acknowledgments

Inspired by modern component libraries and built for the developer community.

Made with ❤️ by Eduardo Silveira