Niva UI

✨ Features

• 🎨 Beautiful & Minimalistic - Clean, modern design perfect for SaaS applications
• ⚡ Tailwind Native - Built with Tailwind CSS for maximum customization
• 🔧 Fully Customizable - Theme everything via configuration
• 📱 Responsive by Default - Mobile-first responsive design
• ♿ Accessible - WAI-ARIA compliant with keyboard navigation
• 🌙 Dark Mode Ready - Built-in dark mode support
• 📦 Tree Shakeable - Import only what you need
• 🔤 TypeScript First - Full type safety out of the box

🚀 Quick Start

Installation

npm install niva-ui

Setup

1. Install Tailwind CSS (if you haven't already):

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

2. Configure Tailwind to include Niva UI:

// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/niva-ui/**/*.{js,ts,jsx,tsx}", // Add this line
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. Import Niva UI styles in your CSS:

/* globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Basic Usage

import { Button, Card } from 'niva-ui'

function App() {
  return (
    <Card className="p-6">
      <h1 className="text-2xl font-bold mb-4">Welcome to Niva UI</h1>
      <Button variant="primary" size="lg">
        Get Started
      </Button>
    </Card>
  )
}

📚 Components

Core Components

• Button - Primary actions with multiple variants
• Card - Content containers with slots
• Badge - Status indicators and labels
• Avatar - User profile images and initials
• Input - Form inputs with validation states

Layout Components

• Container - Responsive page containers
• Stack - Vertical and horizontal layouts
• Grid - Responsive grid system
• Flex - Flexible layouts

SaaS-Specific Components

• Dashboard Layout - Pre-built dashboard structure
• Metric Cards - KPI and statistics display
• User Profile - User information components
• Pricing Cards - Subscription plan displays
• Settings Panels - Configuration interfaces

🎨 Customization

Theme Configuration

Create a niva.config.js file to customize your theme:

export default {
  theme: {
    colors: {
      primary: '#6366f1',
      secondary: '#14b8a6',
      accent: '#f59e0b',
    },
    borderRadius: {
      sm: '0.375rem',
      md: '0.5rem',
      lg: '0.75rem',
    },
    spacing: {
      xs: '0.5rem',
      sm: '1rem',
      md: '1.5rem',
      lg: '2rem',
    }
  },
  components: {
    Button: {
      defaultVariant: 'primary',
      defaultSize: 'md',
    },
    Card: {
      defaultVariant: 'elevated',
    }
  }
}

Component Variants

Each component supports multiple variants and sizes:

// Button variants
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>

// Button sizes
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>
<Button size="xl">Extra Large</Button>

🛠 CLI Tools

Niva UI comes with powerful CLI tools to speed up development:

# Install CLI globally
npm install -g @niva-ui/cli

# Create new components
npx niva create button
npx niva create card --variant elevated

# Generate theme
npx niva theme modern-dark

# Launch playground
npx niva playground

# Export to Figma
npx niva export-figma

📖 Documentation

• Getting Started - Setup and basic usage
• Components - Complete component reference
• Theming - Customization guide
• Examples - Real-world examples
• CLI Reference - Command-line tools

🎮 Playground

Try Niva UI components in our interactive playground:

• Online Playground - Browser-based editor
• CodeSandbox Template - Ready-to-use template
• Figma Kit - Design system for Figma

🤝 Contributing

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

Development Setup

# Clone the repository
git clone https://github.com/sh20raj/niva-ui.git
cd niva-ui

# Install dependencies
npm install

# Start development server
npm run dev

# Run tests
npm test

# Build library
npm run build

📄 License

MIT © Niva UI Team

🙏 Acknowledgments

• Inspired by Shadcn/ui
• Built with Tailwind CSS
• Powered by Radix UI