saha-ui
v1.22.12TypeScript
Ultra-modern React component library built with TypeScript, Tailwind CSS v4, and OKLCH colors
reactreact-componentscomponent-libraryui-componentsdesign-systemtailwindtailwindcsstailwind-csstypescriptoklch
0/weekUpdated 3 weeks agoMITUnpacked: 3.0 MB
Published by Saha UI Team
npm install saha-ui🎨 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
$3
Run this command in your project root to install and setup all configuration and ready to use
``bashnpm
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
- ✅ Install required dependencies
- ✅ Detect your Tailwind version (v3 or v4) and configure accordingly$3
Saha UI requires React 18+ or React 19+:
bash
npm
npm install react@^18.0.0 react-dom@^18.0.0
or
npm install react@^19.0.0 react-dom@^19.0.0yarn
yarn add react@^18.0.0 react-dom@^18.0.0
or
yarn add react@^19.0.0 react-dom@^19.0.0pnpm
pnpm add react@^18.0.0 react-dom@^18.0.0
or
pnpm add react@^19.0.0 react-dom@^19.0.0
`$3
tsx
import { Button } from 'saha-ui';function App() {
return (
);
}
`📦 Components Library
$3
$3
`
Container Grid
Masonry Paper
Section Stack
$3
AppBar Breadcrumb
BottomNav Link
Menubar NavMenu
Pagination Segmented
Steps
$3
Autocomplete DatePicker
Checkbox Field
CheckboxGroup Form
ColorPicker Input
Combobox InputOTP
$3
`
Button IconButton
ButtonGroup PlayButton
FloatingAction SpeedDial
Toggle ToggleGroup
$3
Accordion Label
Avatar List
AvatarGroup Rating
Badge Separator
Card Skeleton
Chip StatCard
CodeEditor Table
DataTable Tabs
Empty Tag
Image Timeline
Kbd Typography
$3
`
Alert Spinner
Backdrop Toast
Progress Tooltip
Result Tour
Snackbar
$3
Command Drawer
ContextMenu Dropdown
Dialog HoverCard
Popover
$3
AspectRatio Carousel
Calendar VideoPlayer
$3
Affix Resizable
Chart ScrollArea
Collapsible Transfer
DragDrop
$3
useAccordion • useAnimation • useArray • useAsync • useAvatar • useClickOutside • useClipboard • useColorMode • useDebounce • useDisclosure • useFocusTrap • useForm • useHover • useLocalStorage • useMediaQuery • usePagination • useToggle • useValidation` • +24 more
---
📖 Documentation
$3
📚API Docs
Complete component reference
⚡Examples
Interactive demos
♿Accessibility
A11y best practices
🚀Performance
Optimization tips
❓170+ FAQs
Common questions
---
🎨 Pre-built Blocks & Templates
$3
🦸 Hero Sections
✨ Feature Showcases
💰 Pricing Tables
🚀 Landing Pages
🛒 E-commerce
📧 Contact Forms
👥 Team Sections
💬 Testimonials
❓ FAQ Sections
---
🚀 Get Started
$3
Complete API reference and guides
$3
Install and setup in minutes
$3
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
---
📄 License
MIT License ©2025 Saha UI
Free to use for personal and commercial projects
---
Built with ❤️ by the Saha UI Team