✨ 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

🎨 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