Ninna UI Features & Component Guides
Deep dives into individual component categories and platform features. Accessibility, theming, TypeScript, Tailwind CSS v4, and more.
Component Guides
React Button Components
Accessible, customizable button components for React with Tailwind CSS v4. Variants, sizes, loading states, icons — all with Radix-powered accessibility.
React Modal Components
Accessible modal dialogs with focus trapping, scroll lock, and portal rendering. Built on Radix UI — no accessibility bugs to fix.
React Form Components
15+ accessible form components: inputs, selects, checkboxes, radio groups, sliders, textareas, file uploads. All typed, all Tailwind v4 styled.
React Table Components
Accessible data tables with sorting, filtering, and pagination. Semantic HTML table structure with Tailwind CSS v4 styling.
React Navigation Components
Tabs, accordions, breadcrumbs, pagination, and steppers — all with Radix-powered keyboard navigation and ARIA compliance.
React Overlay Components
Modals, drawers, popovers, tooltips, and dropdown menus — all with focus trapping, portal rendering, and Radix accessibility.
React Feedback Components
Alerts, toasts, progress bars, skeletons, and empty states — give users clear feedback with accessible, Tailwind-styled components.
React Layout Components
VStack, HStack, Flex, Grid, Container, and more — responsive layout primitives that map to Tailwind CSS v4 utilities.
React Card Components
Flexible card containers with header, body, footer, and media slots. Customize every internal with data-slot CSS targets.
React Avatar Components
Profile images with automatic fallback to initials, group stacking, and status indicators — all accessible.
Platform Features
Zero-Runtime Theming in React
Theme your entire app with CSS custom properties — no JavaScript provider, no hydration cost, no flash of wrong theme.
oklch Colors in React
Perceptually uniform colors that look consistent across hues. 5 built-in presets with oklch — no manual shade tuning.
data-slot CSS API
Customize any component internal with CSS — no source ownership, no !important, no forks. 98 data-slot targets across all components.
Accessible React Components
WCAG 2.1 AA compliant components with Radix-powered keyboard navigation, ARIA semantics, and automated axe audits.
Tailwind CSS v4 Components
Components built natively for Tailwind v4 — CSS-first config, no tailwind.config.ts, oklch colors, zero runtime.
React 19 Components
ForwardRef, useTransition, StrictMode, and concurrent rendering — Ninna UI components are built for React 19.
TypeScript React Components
Strict TypeScript with full generics, autocomplete, and zero any types. Every prop, every variant, every callback is typed.
Dark Mode in React
CSS-only dark mode — no JS provider, no flash, no FOUC. Toggle the .dark class and the entire app re-themes.
React Component Library
67 accessible components, 12 tree-shakeable packages, 1 CSS import. Zero-runtime theming with Tailwind CSS v4 and Radix UI.
Radix UI Components
Full Radix UI accessibility without managing Radix peer deps. We wrap Radix internally — the API never leaks.