NCLUI - Next Component Library

A CLI for adding beautiful, accessible components and managing design system themes for your Next.js project.

Installation

npx nclui@latest init

Usage

Initialize your project

npx nclui@latest init

Add components

# Add a single component
npx nclui@latest add button

# Add multiple components
npx nclui@latest add button card input

# Add all components
npx nclui@latest add --all

Update components

# Update all installed components
npx nclui@latest update

# Update specific components
npx nclui@latest update button card

# Check for updates without applying
npx nclui@latest update --check

Manage theme

# Initialize theme with a preset
npx nclui@latest theme

# Choose a specific preset
npx nclui@latest theme --preset colorful

# Customize theme colors
npx nclui@latest theme colors

# Customize other theme aspects
npx nclui@latest theme radius
npx nclui@latest theme spacing
npx nclui@latest theme typography
npx nclui@latest theme shadows
npx nclui@latest theme transitions

Other commands

# List all available components
npx nclui@latest list

# Show differences between local and registry
npx nclui@latest diff

# Remove components
npx nclui@latest remove button card

Available Commands

| Command | Description | |---------|-------------| | nclui init | Initialize NCL in your project | | nclui add [components...] | Add components to your project | | nclui list | List all available components | | nclui update [components...] | Update installed components | | nclui diff [components...] | Show differences between local and registry versions | | nclui remove <components...> | Remove installed components | | nclui theme [category] | Initialize or customize theme variables | | nclui --help | Show help | | nclui --version | Show version |

Theme System

NCLUI includes a comprehensive theme system with:

• 3 presets: Default, Minimal, Colorful
• Interactive customization: Modify colors, spacing, typography, and more
• CSS variables: Easy to customize and maintain
• Dark mode support: Built-in light/dark mode

Theme Categories

• Colors: Brand colors, backgrounds, borders, etc.
• Radius: Border radius sizes
• Spacing: Page padding and container widths
• Typography: Font sizes, weights, and line heights
• Shadows: Box shadow elevations
• Transitions: Animation speeds

See THEME.md for detailed theme documentation.

Documentation

Visit ncl-docs.vercel.app for full documentation.

License

MIT