v0.1.0
StorybookRatesSpot UX Library
A comprehensive design system and component library built for the RatesSpot booking platform ecosystem.
Buttons & Actions
Interactive elements for user actions
Typography
Headings, body text, and code blocks
Heading Example
Body text with Inter font for readability.
Small text for secondary information.
inline code// Code block
const example = "Hello World";Cards & Layouts
Containers and content organization
Outlined card variant
Filled card variant
Branding
Logos and brand elements
Loading States
Skeleton loaders and progress indicators
Form Elements
Input fields, selects, and form controls
Dialogs & Modals
Accessible modal dialogs with focus management
Navigation & Layout
Tabs, dropdowns, and organizing content
Overview content here
Data Display
Tables and structured information
| Name | Status |
|---|---|
| John Doe | Active |
| Jane Smith | Pending |
Interactive Elements
Accordions and collapsible content
Advanced Components
Popovers, alerts, and progress indicators
Popover Examples
Alert Examples
Success!
Warning
Progress Examples
User Interface
Avatars and user-focused components
Avatar Examples
Step Progress
Details
Payment
Confirmation
Form Controls
Advanced form inputs and controls
Interactive Features
Notifications, tooltips, and user feedback
Composite Components
Complex components built from simpler ones
Data Table
Property Name | Location | Price | Status |
|---|---|---|---|
| Hotel California | Los Angeles | $299 | Available |
| Sunset Resort | Miami | $199 | Booked |
| Mountain Lodge | Aspen | $399 | Available |
Search Box
Date Picker
File Upload
Drag and drop files here, or click to browse
Accepted types: image/*,.pdf • Max size: 5 MB • Max files: 10
Modals
Stepper
Built for Scale
Design Consistency
Unified design language across all RatesSpot applications
Developer Experience
TypeScript support, documentation, and easy integration
Accessibility First
WCAG compliant components with keyboard navigation