oks-uiEvery component, all working
45 components in 65 live pages, each shown as the real thing. Open one to try its props, copy the code and read how it behaves. Each chart type and each form field type has its own page.
New in oks-ui 1.5: DiffView, ColorPicker, CodeField, Sortable, DropZone, MediaLibrary. See everything that changed
Actions2
Feedback4
Navigation9
Tabs
Tabbed content navigation with a composable, roving-tabindex API.
Drawer
Slide-in panel from any edge of the viewport, built on the same overlay stack as Modal.
Dropdown
Menu dropdown with triggers, sections, submenus, and opt-in virtualization.
SteppedForm
Multi-step form flow with progress tracking, built on FormFieldSet.
Nav
Multi-level navigation tree with collapsible groups, active-route styling, an accordion mode, and a collapsed icon rail.
Breadcrumbs
Navigation trail with a chevron separator, collapse-to-ellipsis, and router-link polymorphism.
Pagination
Windowed page-number control for a list or table footer, with a "Showing X–Y of Z" summary.
SegmentedControl
Compact inline switch between a few mutually exclusive options, with an animated selection thumb.
CommandPalette
The Cmd+K overlay: a search box over a fuzzy-filtered, grouped list of actions and destinations, with full keyboard navigation and a useCommandPalette hotkey hook.
Data Display11
Badge
Notification badge with count, dot, and placement, plus a bump animation on change.
Avatar
User avatar with group support, status indicator, and image-load fallback.
Chip
Compact tag or pill element, closable and selectable.
Tooltip
Hover/focus tooltip with positioning logic and touch-aware delays.
Table
Config-driven data table with sorting, row selection, row expansion, a sticky header, and loading and empty states.
EmptyState
Centered placeholder for an empty or no-match list, with an icon, title, description, and actions.
Progress
Linear and circular progress indicators, determinate or indeterminate, with an optional value label.
- Updated
TreeView
Hierarchy you can open, select and check, with check marks that roll up and children that load on demand.
- New
DiffView
Compares two texts line by line, side by side or in one column, with changed words highlighted and long unchanged stretches folded.
- New
MediaLibrary
A grid of images and files to pick from, with search, type filters, one or many picks, load more and upload.
Accordion
Collapsible sections with single-open or multiple modes, three visual variants, and animated open/close.
Data Visualization10
Line Chart
Chart type="line" -- ChartLineOptions: curve style and stroke width.
Area Chart
Chart type="area" -- a line chart with the area under it filled automatically.
Bar Chart
Chart type="bar" -- ChartBarOptions: stacked series and corner radius.
Column Chart
Chart type="column" -- ChartColumnOptions: stacked series and corner radius.
Pie Chart
Chart type="pie" -- ChartPieStyleOptions: slice border. Single series, one value per slice.
Donut Chart
Chart type="donut" -- ChartPieStyleOptions: slice border and inner ratio.
Heatmap Chart
Chart type="heatmap" -- ChartHeatmapOptions: series as rows, categories as columns, one hue scaled by opacity across the value domain.
Sparkline Chart
Chart type="sparkline" -- a small trend with no axes, legend or frame, for a table cell or a stat card.
Combo Chart
Chart type="combo" -- columns, lines and areas on one set of categories, with an optional second value axis on the right.
Chart States
isLoading/error/empty -- real, separate props that each replace the chart entirely, shared across every chart type.
Layout & Display13
Divider
Horizontal or vertical rule, with an optional inline label.
Backdrop
Overlay backdrop for modals, drawers, and menus, with blur and stacking support.
PageTitle
Semantic page/section heading with an optional icon, subtitle, and tooltip.
Card
Bordered, rounded, elevated surface container, with header, body, and footer regions.
Stat
KPI block with a label, value, trend delta pill, optional icon and sparkline, plus a responsive StatGroup.
Timeline
Vertical activity feed with dot or icon markers on a connector rail.
- Updated
Calendar
Standalone month-grid view with single or range selection, min/max and per-day constraints, a renderDay slot for event markers, and full grid keyboard navigation.
SplitLayout
Resizable multi-pane frame for email 3-pane, master-detail, and split editors, with keyboard-resizable dividers and collapsible panes.
Message
Chat message-thread primitives: a screen-reader-live MessageList and left/right-aligned Message bubbles with author, avatar, timestamp, delivery status, and continuation grouping.
Board
Data-driven Kanban board with dependency-free pointer, touch, and keyboard drag-and-drop, column card limits, and live-region announcements.
Skeleton
Loading placeholder, as a shaped block or a wrapper that reveals its content once loaded.
- New
Sortable
Reorder a list, row or grid by pointer, touch or keyboard, with every step announced to screen readers.
- New
DropZone
Draggable items and drop areas that work with a pointer, a finger or the keyboard, and take files dropped from the computer.
Forms15
Rating
Star rating you can set or show: whole or half stars, your own icon, keyboard and touch, and a field in Form.
- New
ColorPicker
Colour picker with a saturation area, hue and opacity sliders, hex, rgb or hsl text, swatches and an eye dropper, plus a ColorField for forms.
- New
CodeField
Text field for code and settings with highlighting, line numbers, Tab to indent and a live JSON check, with no dependencies.
Text Field
FormFieldSet type="text" -- TextField, also covers number/url/search/color/email.
Textarea Field
FormFieldSet type="textarea" -- multi-line text with a length counter.
Select Field
FormFieldSet type="select" -- single/multi select with a custom popover or native mode.
Password Field
FormFieldSet type="password" -- reveal toggle and strong-password requirements.
OTP Field
FormFieldSet type="otp" -- segmented or single-input one-time code entry.
Phone Field
FormFieldSet type="phone" -- phone number with a country calling-code selector.
Range Field
FormFieldSet type="range" -- single or dual-thumb slider.
File Field
FormFieldSet type="file" -- inline or dropzone file upload with previews.
Switch Field
FormFieldSet type="switch" -- toggle with optional on/off state text.
Radio Group Field
FormFieldSet type="radio" -- single-select radio group.
Checkbox Group Field
FormFieldSet type="checkbox" -- multi-select checkbox group.
Date Picker Field
FormFieldSet type="datepicker" -- single date or range, with time and presets.
