nexora-ui

A professional TypeScript-based CLI tool that allows developers to easily install React + Tailwind UI components into their projects.

Installation

You can use nexora-ui without installation via npx:

npx nexora-ui add button

Or install globally:

npm install -g nexora-ui

Quick Start

Add a component to your React project:

npx nexora-ui add button

List available components:

npx nexora-ui list

Get help:

npx nexora-ui --help

Features

• 🚀 Zero Configuration - Works out of the box with any React + Tailwind project
• 📦 Component Library - Pre-built, accessible components ready to use
• 🎨 Tailwind CSS - Fully styled with Tailwind CSS classes
• 🛠️ TypeScript - Full TypeScript support with proper type definitions
• 🔧 Customizable - Easy to modify and extend components
• 📱 Responsive - Mobile-first responsive design
• ♿ Accessible - Built with accessibility in mind

Available Components

• Button - Versatile button component with multiple variants
• Card - Flexible card component with header, content, and footer
• Input - Form input component with validation states
• Glare Card - Card with glare effect

Usage

Adding Components

# Add a single component
npx nexora-ui add button

# Add multiple components
npx nexora-ui add button card input glare-card

# Force overwrite existing files
npx nexora-ui add button --force

# Custom output directory
npx nexora-ui add button --output src/components

Project Requirements

• React 18+ project
• Tailwind CSS configured
• TypeScript (recommended)

Generated File Structure

After running npx nexora-ui add button:

your-project/
├── components/
│   └── ui/
│       └── button.tsx    # Generated component
└── lib/                  # Auto-generated if needed
    └── utils.ts         # cn utility function

Component Examples

Button Component

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

export default function Example() {
  return (
    <div className="space-x-2">
      <Button variant="default">Default</Button>
      <Button variant="destructive">Destructive</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="link">Link</Button>
    </div>
  )
}

Card Component

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'

export default function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
      </CardHeader>
      <CardContent>
        <p>Card content goes here.</p>
      </CardContent>
    </Card>
  )
}

Input Component

import { Input } from '@/components/ui/input'

export default function Example() {
  return (
    <Input
      type="email"
      placeholder="Enter your email"
      className="max-w-sm"
    />
  )
}

Glare Card Component

import { GlareCard } from '@/components/ui/glare-card'

export default function Example() {
  return (
    <GlareCard>
      <h2>Glare Card Title</h2>
      <p>Glare card content goes here.</p>
    </GlareCard>
  )
}

Utility Function

nexora-ui includes a powerful cn utility for conditional class names:

import { cn } from '@/lib/utils'

// Combine classes conditionally
const buttonClasses = cn(
  'px-4 py-2 rounded-md',
  isActive && 'bg-blue-500',
  className
)

This utility combines clsx and tailwind-merge for optimal Tailwind CSS class handling.

Command Reference

| Command | Description | |---------|-------------| | add <component> | Add a component to your project | | list | List all available components | | --help | Show help information | | --version | Show version number |

Command Options

| Option | Short | Description | |--------|-------|-------------| | --output <path> | -o | Output directory (default: components/ui) | | --force | -f | Overwrite existing files without prompting |

Contributing

We welcome contributions! Please see our Contributing Guide for details.

Development Setup

1. Clone the repository:

   git clone https://github.com/Bhumi1729/nexora-ui.git
   cd nexora-ui

2. Install dependencies:

   npm install

3. Build the project:

   npm run build

4. Link for local testing:

   npm link

Adding New Components

1. Create your component in cli/components/
2. Follow existing patterns and TypeScript interfaces
3. Use the cn utility for conditional styling
4. Include proper accessibility attributes
5. Test in a real React project

License

This project is licensed under the ISC License - see the LICENSE file for details.

Support

• 🐛 Bug Reports: GitHub Issues
• 💡 Feature Requests: GitHub Issues
• 📖 Documentation: GitHub Repository

Acknowledgments

Inspired by shadcn/ui and built with modern React patterns.

Made with ❤️ by Bhumika Yadav