Advanced Components

Complex interactive components for sophisticated use cases.

Accordion

Collapsible panels with custom icons.

import { Accordion } from 'room-ui';

<Accordion
  items={[
    { id: '1', title: 'Section 1', content: <div>Content 1</div> },
    { id: '2', title: 'Section 2', content: <div>Content 2</div> },
    { id: '3', title: 'Section 3', content: <div>Content 3</div> },
  ]}
  allowMultiple
/>

View in Storybook →

Transfer

Dual-list item transfer with search.

import { Transfer } from 'room-ui';

<Transfer
  sourceItems={availableItems}
  targetItems={selectedItems}
  onChange={(source, target) => {
    setAvailableItems(source);
    setSelectedItems(target);
  }}
  sourceTitle="Available"
  targetTitle="Selected"
/>

View in Storybook →

Stepper

Multi-step wizard with validation.

import { Stepper } from 'room-ui';

<Stepper
  steps={[
    { id: 'info', label: 'Basic Info', content: <BasicInfoForm /> },
    { id: 'details', label: 'Details', content: <DetailsForm /> },
    { id: 'review', label: 'Review', content: <ReviewStep /> },
  ]}
  currentStep={currentStep}
  onStepChange={setCurrentStep}
/>

View in Storybook →

Autocomplete

Auto-suggest input with async support.

import { Autocomplete } from 'room-ui';

<Autocomplete
  label="Search users"
  options={users}
  onSearch={async (query) => {
    const results = await searchUsers(query);
    return results;
  }}
  getOptionLabel={(option) => option.name}
  onChange={setSelectedUser}
/>

View in Storybook →

Combobox

Searchable select with custom options.

import { Combobox } from 'room-ui';

<Combobox
  label="Select or create"
  options={options}
  creatable
  onCreate={(value) => createOption(value)}
/>

View in Storybook →

DateRangePicker

Date range selection with presets.

import { DateRangePicker } from 'room-ui';

<DateRangePicker
  value={dateRange}
  onChange={setDateRange}
  presets={[
    { label: 'Last 7 days', getValue: () => getLast7Days() },
    { label: 'Last 30 days', getValue: () => getLast30Days() },
    { label: 'This month', getValue: () => getThisMonth() },
  ]}
/>

View in Storybook →

Carousel

Image/content carousel with auto-play.

import { Carousel } from 'room-ui';

<Carousel
  items={images}
  autoPlay
  autoPlayInterval={5000}
  showDots
  showArrows
/>

View in Storybook →

InfiniteScroll

Infinite scroll loading for large lists.

import { InfiniteScroll } from 'room-ui';

<InfiniteScroll
  items={items}
  hasMore={hasMore}
  loadMore={loadMoreItems}
  loader={<Spinner />}
  renderItem={(item) => <ItemCard item={item} />}
/>

View in Storybook →

KanbanBoard

Drag-and-drop kanban board.

import { KanbanBoard } from 'room-ui';

<KanbanBoard
  columns={[
    { id: 'todo', title: 'To Do', items: todoItems },
    { id: 'inprogress', title: 'In Progress', items: inProgressItems },
    { id: 'done', title: 'Done', items: doneItems },
  ]}
  onDragEnd={handleDragEnd}
/>

View in Storybook →

RichTextEditor

WYSIWYG rich text editor.

import { RichTextEditor } from 'room-ui';

<RichTextEditor
  value={content}
  onChange={setContent}
  placeholder="Start writing..."
/>

View in Storybook →

MarkdownEditor

Markdown editing with preview.

import { MarkdownEditor } from 'room-ui';

<MarkdownEditor
  value={markdown}
  onChange={setMarkdown}
  preview
/>

View in Storybook →