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

$3

``bash
npm install niva-ui
`

$3

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

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

2. Configure Tailwind to include Niva UI:

`js
// 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:

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

$3

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

function App() {
return (



Welcome to Niva UI

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

`js
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',
}
}
}
`

$3

Each component supports multiple variants and sizes:

`tsx
// Button variants
Primary
Secondary
Outline
Ghost
Link

// Button sizes
Small
Medium
Large
Extra Large
`

🛠 CLI Tools

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

`bash


Install CLI globally

`bash


Clone the repository

📄 License

MIT © Niva UI Team

🙏 Acknowledgments

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

---