UI Components
System design for common UI components - File Upload, Lists, Editors, and more
UI Components
This section covers system design for individual UI components—focused problems that typically take 20-30 minutes in interviews.
When to Use This Section
Use these guides when the interview question is about:
- Building a specific component (Modal, Dropdown, List)
- Optimizing a single UI element
- Component-level architecture decisions
Component Types
1. File Upload Component
Upload files with progress, validation, and chunking.
2. Virtualized List Component
Render thousands of items efficiently with windowing.
3. Rich Text Editor
WYSIWYG editor with formatting, collaboration, and undo/redo.
4. Autocomplete/Search Component
Search with suggestions, debouncing, and caching.
5. Modal/Dialog Component
Accessible modal with focus trap, keyboard shortcuts, and animations.
6. Data Table Component
Sortable, filterable table with pagination and virtualization.
7. Dropdown Menu Component
Accessible dropdown with keyboard navigation and viewport-aware positioning.
8. Image Carousel Component
Image carousel with navigation, lazy loading, gestures, and smooth transitions.
9. Poll Widget Component
Poll widget with voting, real-time results, and optimistic UI.
10. Date/Time Picker Component
Date and time picker with calendar, range selection, and timezone handling.
11. Toast/Notification Component
Toast notifications with auto-dismiss, stacking, and actions.
12. Tabs Component
Tabs component with keyboard navigation, lazy loading, and URL sync.
13. Accordion Component
Accordion with expand/collapse, keyboard navigation, and animations.
14. Tooltip Component
Tooltip with positioning, delay, and accessibility.
15. Pagination Component
Pagination with page navigation, ellipsis, and keyboard support.
16. Breadcrumbs Component
Breadcrumbs navigation with hierarchy and accessibility.
17. Stepper/Progress Component
Multi-step progress indicator with navigation and validation.
7. Dropdown Menu Component
Accessible dropdown with keyboard navigation and viewport-aware positioning.
8. Image Carousel Component
Image carousel with navigation, lazy loading, gestures, and smooth transitions.
9. Poll Widget Component
Poll widget with voting, real-time results, and optimistic UI.
How to Approach Component Design
- Requirements (R) - 2-3 min: File size limits, accessibility, browser support
- Architecture (A) - 3-5 min: Rendering strategy, state management
- Data Model (D) - 3-5 min: Data structure, caching, persistence
- Interface (I) - 5-10 min: Accessibility, keyboard nav, animations
- Optimizations (O) - 10-15 min: Performance, bundle size, visual optimizations
Common Patterns
Most components need:
- Accessibility: Keyboard navigation, ARIA, screen readers
- Performance: Virtualization for lists, lazy loading, memoization
- State Management: Local state vs global, persistence
- Error Handling: Validation, error states, retry mechanisms
For complete application systems, see Complete Systems.