Components Overview
room-ui provides 135+ production-ready React components organized into logical categories.
Form Components
Input controls for collecting user data.
| Component | Description |
|---|---|
| Button | Primary action trigger with variants |
| Input | Text input with prefix/suffix support |
| Select | Searchable dropdown selector |
| MultiSelect | Multiple selection dropdown |
| DatePicker | Calendar date selection |
| TimePicker | Time selection input |
| DateTimePicker | Combined date and time |
| Textarea | Multi-line text input |
| Checkbox | Boolean toggle |
| RadioGroup | Single selection from options |
| Switch | Toggle switch |
| Slider | Range value selection |
| FileUpload | Drag-and-drop file upload |
| SearchInput | Search-specific input |
| PasswordInput | Password with visibility toggle |
| NumberInput | Numeric input with controls |
| TimezoneSelector | Timezone selection |
Layout Components
Structure and organize your application.
| Component | Description |
|---|---|
| Stack | Vertical/horizontal flex layout |
| Grid | CSS Grid layout |
| Box | Generic container with utilities |
| Card | Content container with sections |
| Modal | Dialog overlay |
| Drawer | Side panel |
| Layout | App layout with sidebar |
| Page | Page container |
| Dashboard | Dashboard layout |
| TwoColumnContent | Sidebar + main layout |
Data Display
Present data and information.
| Component | Description |
|---|---|
| DataTable | Feature-rich data table |
| Badge | Status indicators |
| StatusBadge | Predefined status badges |
| Avatar | User avatars |
| Timeline | Event timeline |
| Calendar | Calendar display |
| StatCard | Statistics card |
| Progress | Progress bar |
| KanbanBoard | Kanban board |
Navigation
Help users move through your application.
| Component | Description |
|---|---|
| Sidebar | Navigation sidebar |
| Breadcrumbs | Path navigation |
| Tabs | Tab navigation |
| Pagination | Page navigation |
| Menu | Menu component |
| Dropdown | Action dropdown |
| CommandPalette | Command launcher |
| TreeView | Hierarchical navigation |
Feedback
Communicate with users.
| Component | Description |
|---|---|
| Toast | Notification messages |
| Alert | Alert banners |
| Tooltip | Hover information |
| EmptyState | Empty state display |
| Loading | Loading indicators |
| Skeleton | Loading placeholders |
| ConfirmDialog | Confirmation dialogs |
Advanced Components
Complex interactive components.
| Component | Description |
|---|---|
| Accordion | Collapsible panels |
| Transfer | Dual-list transfer |
| Carousel | Content carousel |
| Stepper | Step wizard |
| Autocomplete | Auto-suggest input |
| Combobox | Searchable select |
| DateRangePicker | Date range selection |
| RichTextEditor | WYSIWYG editor |
| InfiniteScroll | Infinite scroll loading |
Interactive Examples
Visit the Live Storybook to see all components in action with interactive examples.
Example Application
See a complete Deal Room Dashboard example showing how components work together in a real application.