Introduction
Koori UI is a comprehensive glassmorphism React component library built on Radix UI primitives.
What is Koori UI?
Koori UI is a glassmorphism-first component library for React 19. It provides 27+ accessible components styled with frosted glass effects, powered by Radix UI primitives and Tailwind CSS v4.
Features
- 27+ components covering General, Layout, Navigation, Form, Data Display, and Feedback categories
- Radix UI powered — accessibility built in (keyboard navigation, ARIA, focus management)
- Glassmorphism design — three glass intensity levels:
.glass,.glass-subtle,.glass-elevated - Theme system — light/dark mode + 4 color presets (Slate, Zinc, Neutral, Violet)
- CSS custom properties — override
--koori-*tokens to match your brand - React 19 + TypeScript with full type declarations
- Dual CJS/ESM bundles — works with Next.js, Vite, Remix, and more
Component Categories
| Category | Components |
|---|---|
| General | Button, Badge, Typography |
| Layout | Panel, Card, Separator |
| Navigation | Tabs, Breadcrumb, Dropdown Menu |
| Form | Input, Textarea, Checkbox, Switch, Radio, Select, Slider |
| Data Display | Table, StatCard, Avatar, Chart |
| Feedback | Alert, Dialog, Popover, Tooltip, Toast, Progress, Skeleton |