Component Showcase
Visual showcase and examples of all UI components.
Modal Component
Basic Usage
import Modal from '@/components/Modal';
<Modal isOpen={isOpen} onClose={() => setIsOpen(false)} title="Title">
Content here
</Modal>
Sizes
- Small:
size="sm"- Max width: 448px - Medium:
size="md"- Max width: 512px (default) - Large:
size="lg"- Max width: 768px - Extra Large:
size="xl"- Max width: 1024px - Full:
size="full"- Full width with margins
Features
- ✅ Focus trapping
- ✅ Escape key to close
- ✅ Overlay click to close
- ✅ Portal rendering
- ✅ Accessible (ARIA)
Tooltip Component
Basic Usage
import Tooltip from '@/components/Tooltip';
<Tooltip content="Tooltip text" position="top">
<button>Hover me</button>
</Tooltip>
Positions
- Top:
position="top" - Bottom:
position="bottom" - Left:
position="left" - Right:
position="right"
Features
- ✅ Auto-positioning
- ✅ Viewport-aware
- ✅ Hover and focus triggers
- ✅ Configurable delay
Dropdown Component
Basic Usage
import Dropdown from '@/components/Dropdown';
<Dropdown
trigger={<button>Menu</button>}
items={[
{ id: '1', label: 'Item 1', onClick: () => {} },
{ id: '2', label: 'Item 2', onClick: () => {} },
]}
/>
Features
- ✅ Keyboard navigation
- ✅ Focus trapping
- ✅ Multiple positions
- ✅ Icon support
- ✅ Dividers
Accordion Component
Basic Usage
import Accordion from '@/components/UI/Accordion';
<Accordion
items={[
{ id: '1', title: 'Title 1', content: <p>Content 1</p> },
{ id: '2', title: 'Title 2', content: <p>Content 2</p> },
]}
allowMultiple={false}
/>
Features
- ✅ Single or multiple open
- ✅ Smooth animations
- ✅ Accessible (ARIA)
- ✅ Default open items
Tabs Component
Basic Usage
import Tabs from '@/components/UI/Tabs';
<Tabs
tabs={[
{ id: '1', label: 'Tab 1', content: <p>Content 1</p> },
{ id: '2', label: 'Tab 2', content: <p>Content 2</p> },
]}
/>
Features
- ✅ Keyboard navigation
- ✅ Accessible (ARIA)
- ✅ Disabled tabs
- ✅ Change callbacks
File Upload Component
Basic Usage
import FileUpload from '@/components/FileUpload';
<FileUpload
accept="image/*"
maxSize={10 * 1024 * 1024}
onUpload={async (files) => {
// Handle upload
}}
/>
Features
- ✅ Drag and drop
- ✅ File validation
- ✅ Upload progress
- ✅ Size restrictions
- ✅ Type restrictions
Multi-Step Form Component
Basic Usage
import MultiStepForm from '@/components/MultiStepForm';
<MultiStepForm
steps={[
{ id: '1', title: 'Step 1', component: <Step1 /> },
{ id: '2', title: 'Step 2', component: <Step2 /> },
]}
initialValues={{}}
onSubmit={async (values) => {
// Handle submission
}}
/>
Features
- ✅ Progress indicator
- ✅ Step validation
- ✅ Navigation between steps
- ✅ Custom step components
Loading States
Spinner
<LoadingState type="spinner" size="md" message="Loading..." />
Dots
<LoadingState type="dots" />
Bars
<LoadingState type="bars" />
Pulse
<LoadingState type="pulse" />
Skeleton
<SkeletonCard />
<SkeletonList count={5} />
<SkeletonGrid count={6} />
Error Components
Error Boundary
import { ErrorBoundaryAdvanced } from '@/components/ErrorBoundaryAdvanced';
<ErrorBoundaryAdvanced>
<App />
</ErrorBoundaryAdvanced>
Error Recovery
import ErrorRecovery from '@/components/ErrorRecovery';
<ErrorRecovery error={error} onRecover={handleRecover} />
Component Combinations
Modal with Form
<Modal isOpen={isOpen} onClose={handleClose} title="Edit">
<form onSubmit={handleSubmit}>
{/* Form fields */}
</form>
</Modal>
Dropdown with Icons
<Dropdown
trigger={<button>Actions</button>}
items={[
{
id: 'edit',
label: 'Edit',
icon: <EditIcon />,
onClick: handleEdit,
},
{
id: 'delete',
label: 'Delete',
icon: <DeleteIcon />,
onClick: handleDelete,
},
]}
/>
Styling
Custom Styling
<Modal
isOpen={isOpen}
onClose={handleClose}
className="custom-modal"
>
Content
</Modal>
Theme Customization
:root {
--color-primary: #6366f1;
--color-secondary: #8b5cf6;
/* Customize colors */
}