🎨 Saha UI

Ultra-Modern React Component Library

A beautiful, accessible, and type-safe React component library built with
TypeScript • Tailwind CSS v4 • OKLCH Colors • Glass Morphism
✅ Next.js 15/16 Ready • App Router • Server Components

---

✨ Features

• 🎨 98 Modern Components - Accordion, Affix, Alert, AppBar, AspectRatio, Autocomplete, Avatar, AvatarGroup, Backdrop, Badge, BottomNavigation, Breadcrumb, Button, ButtonGroup, Calendar, Card, Carousel, Chart (10 chart types), Checkbox, Chip, CodeEditor, Collapsible, ColorPicker, Combobox, Command, Container, ContextMenu, DataTable, DatePicker, Dialog, Drawer, Dropdown, Empty, Field, FileInput, FloatingActionButton, Form, Grid, HoverCard, IconButton, Image, Input, InputOTP, Item, Kbd, Label, Link, List, Masonry, Menubar, NativeSelect, NavigationMenu, Notification, NumberInput, Pagination, Paper, PlayButton, Popover, Progress, Radio, Rating, Resizable, Result, ScrollArea, Section, Segmented, Select, Separator, Skeleton (6 presets), Slider, Snackbar, Sonner, SpeedDial, Spinner, Stack, StatCard, Stepper, Steps, Switch, Tab, Table, Tag, TagInput, TextArea, TextEditor, ThemeProvider, ThemeToggle, Timeline, Toast, Toggle, ToggleGroup, Tooltip, Tour, Transfer, Tree, Typography, Upload, VideoPlayer
• ⚡ Next.js 15/16 Ready - Full App Router support with Server & Client Components
• 🌓 Dark Mode - Seamless theme switching with full dark mode support
• 🔮 Glass Morphism - Beautiful backdrop blur effects across components
• 🎯 Type-Safe - Full TypeScript support with comprehensive prop types
• ♿ Accessible - ARIA-compliant with keyboard navigation
• 🎭 CVA Variants - Type-safe variant management with class-variance-authority
• 🎨 OKLCH Colors - Perceptually uniform color system for accurate theming
• ⚡ Tree-Shakeable - Import only what you need, optimized bundle size
• 📦 Modular - Individual component imports for maximum flexibility
• 📱 Responsive - Mobile-first design with touch gesture support
• 🔧 Customizable - Easy to extend and customize with Tailwind CSS
• 📏 Flexible Sizing - All components support comprehensive size variants (xs, sm, md, lg, xl, 2xl, 3xl, 4xl)
• 🪝 39 Custom Hooks - Comprehensive hook library including useAccordion, useAnimation, useArray, useAspectRatio, useAsync, useAvatar, useChartColors, useChartData, useClickOutside, useClipboard, useColorMode, useControllableState, useCounter, useDataTable, useDebounce, useDisclosure, useDOM, useEventListener, useFetch, useFocusTrap, useForm, useHover, useIntersectionObserver, useInterval, useLocalStorage, useMediaQuery, useMergedRefs, usePagination, usePrevious, useReducedMotion, useScrollLock, useSearchFilter, useSessionStorage, useThrottle, useTimeout, useToggle, useUpdateEffect, useValidation, useWindowSize

---

📦 Installation

Initialize Saha UI (REQUIRED)

Run this command in your project root to install and setup all configuration and ready to use

# npm
npx saha-ui@latest init

# yarn
yarn dlx saha-ui@latest init

# pnpm
pnpm dlx saha-ui@latest init

This will automatically:

• ✅ Inject CSS variables and design tokens
• ✅ Configure Tailwind to scan Saha UI components in node_modules
• ✅ Install required dependencies
• ✅ Detect your Tailwind version (v3 or v4) and configure accordingly

Peer Dependencies

Saha UI requires React 18+ or React 19+:

# npm
npm install react@^18.0.0 react-dom@^18.0.0
# or
npm install react@^19.0.0 react-dom@^19.0.0

# yarn
yarn add react@^18.0.0 react-dom@^18.0.0
# or
yarn add react@^19.0.0 react-dom@^19.0.0

# pnpm
pnpm add react@^18.0.0 react-dom@^18.0.0
# or
pnpm add react@^19.0.0 react-dom@^19.0.0

Basic Usage

import { Button } from 'saha-ui';

function App() {
  return (
  <Button> Saha UI</Button>
  );
}

📦 Components Library

✨ 93 Beautiful Components • 39 Custom Hooks • 9 Categories

🏗️ Layout Container Grid Masonry Paper Section Stack 🧭 Navigation AppBar Breadcrumb BottomNav Link Menubar NavMenu Pagination Segmented Steps 📝 Forms Autocomplete DatePicker Checkbox Field CheckboxGroup Form ColorPicker Input Combobox InputOTP

🔘 Buttons Button IconButton ButtonGroup PlayButton FloatingAction SpeedDial Toggle ToggleGroup 📊 Data Display Accordion Label Avatar List AvatarGroup Rating Badge Separator Card Skeleton Chip StatCard CodeEditor Table DataTable Tabs Empty Tag Image Timeline Kbd Typography

💬 Feedback Alert Spinner Backdrop Toast Progress Tooltip Result Tour Snackbar 🎭 Overlay Command Drawer ContextMenu Dropdown Dialog HoverCard Popover 🎬 Media AspectRatio Carousel Calendar VideoPlayer 🛠️ Utility Affix Resizable Chart ScrollArea Collapsible Transfer DragDrop

🪝 Custom Hooks

useAccordion • useAnimation • useArray • useAsync • useAvatar • useClickOutside • useClipboard • useColorMode • useDebounce • useDisclosure • useFocusTrap • useForm • useHover • useLocalStorage • useMediaQuery • usePagination • useToggle • useValidation • +24 more

---

📖 Documentation

Comprehensive guides to help you build faster

📚 API Docs Complete component reference

⚡ Examples Interactive demos

♿ Accessibility A11y best practices

🚀 Performance Optimization tips

❓ 170+ FAQs Common questions

---

🎨 Pre-built Blocks & Templates

44+ Ready-to-use components to accelerate development

🦸 Hero Sections	✨ Feature Showcases	💰 Pricing Tables
🚀 Landing Pages	🛒 E-commerce	📧 Contact Forms
👥 Team Sections	💬 Testimonials	❓ FAQ Sections

🎨 Browse All Blocks →

---

🚀 Get Started

📚 Documentation Complete API reference and guides

⚡ Quick Start Install and setup in minutes

🎨 Live Examples Interactive component demos

---

🤝 Contributing

We welcome contributions from the community! Whether it's:

• 🐛 Bug reports - Help us identify issues
• 💡 Feature requests - Share your ideas
• 📝 Documentation - Improve our guides
• 🔧 Code contributions - Submit pull requests

Read our Contributing Guide →

---

📄 License

MIT License ©2025 Saha UI

Free to use for personal and commercial projects

---

_{Built with ❤️ by the Saha UI Team}

⭐ Star on GitHub • 🐦 Follow on Twitter • 💬 Join Discord