room-uiDark Professional Aesthetic

Quick Start ​

npm install room-ui

yarn add room-ui

pnpm add room-ui

Peer Dependencies ​

npm install react react-dom lucide-react tailwindcss

Basic Usage ​

import 'room-ui/styles';
import { Button, Card, CardHeader, CardTitle, CardContent } from 'room-ui';

function App() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Welcome to room-ui</CardTitle>
      </CardHeader>
      <CardContent>
        <p>A beautiful component library with dark professional aesthetic</p>
        <Button variant="primary">Get Started</Button>
      </CardContent>
    </Card>
  );
}

Component Categories ​

Form Components (20+) ​

Button, Input, Select, MultiSelect, DatePicker, TimePicker, DateTimePicker, Textarea, Checkbox, RadioGroup, Switch, Rating, PasswordInput, NumberInput, Slider, ColorPicker, FileUpload, SearchInput, TimezoneSelector

Layout Components (15+) ​

Stack, Grid, Box, Text, Card, Modal, Drawer, Page, PageLayout, Layout, AppLayout, Dashboard, TwoColumnContent, Separator, Spacer

Data Display (15+) ​

DataTable, Table, Badge, StatusBadge, Avatar, Timeline, KanbanBoard, Calendar, CurrencyDisplay, DateDisplay, StatCard, StatsCardGrid, Progress, CardView

Navigation (12+) ​

Breadcrumbs, Pagination, Sidebar, Tabs, StepIndicator, Menu, Dropdown, CommandPalette, TreeView, ContextMenu, ExpandableToolbar, FilterStatusBanner

Feedback Components (12+) ​

Toast, Alert, AlertDialog, Modal, Drawer, Tooltip, HoverCard, Popover, EmptyState, Loading, Skeleton, LoadingOverlay, ConfirmDialog, NotificationBar

Advanced Components (20+) ​

Accordion, Transfer, Carousel, Stepper, ButtonGroup, Autocomplete, Combobox, DateRangePicker, FormWizard, RichTextEditor, MarkdownEditor, InfiniteScroll, DropZone, ErrorBoundary, AdminModal, QueryTransparency

Why room-ui? ​

Production Ready ​

Published on npm, documented in Storybook with 600+ examples, comprehensive TypeScript support, optimized bundle size.

Developer Experience ​

TypeScript first, tree-shakeable exports, virtual scrolling for large datasets, optimized bundle size, fast build times.

Design System ​

Dark slate/cyan palette, professional appearance, minimalist design philosophy optimized for data-intensive applications.

Accessibility ​

WCAG AA compliant, ARIA attributes throughout, full keyboard navigation, screen reader support.

Related Projects ​

• @papernote/ui - Light-themed sibling library with paper notebook aesthetic

Resources ​

• Live Storybook - Interactive component playground
• npm Package - Published package
• GitHub - Source code and issues
• Design System - Colors, typography, and patterns

License ​

MIT License - Copyright (c) 2025 kwhittenberger