Overview

This epic tracks the migration of the Coder frontend from Material-UI (MUI) to shadcn/ui components and from Emotion CSS-in-JS to Tailwind CSS utility classes.

Current State Analysis

• 1,077 total TypeScript/React files
• 220 files using MUI components (20% of codebase)
• 189 files using Emotion CSS (18% of codebase)
• 546 MUI imports across 61 unique components
• 1,275 Emotion CSS usages
• 673 existing Tailwind classes (partial migration started)
• 154 cn() utility usages
• 20 files already using Radix UI components

Migration Goals

1. Consistency: Standardize on shadcn/ui component library
2. Performance: Reduce bundle size by eliminating Emotion runtime
3. Developer Experience: Improve styling with Tailwind utilities
4. Maintainability: Simplify component architecture
5. Accessibility: Leverage Radix UI's accessibility features

Estimated Timeline: 5.5-8 weeks (28-41 days)

Migration Tasks

Each task will be implemented as a separate pull request to minimize review burden and enable incremental migration:

Phase 1: Foundation

• #TBD Setup: Configure shadcn/ui & Tailwind (1-2 days)

Phase 2: Core Components

• #TBD Core Components: Button, TextField, Tooltip migration (3-4 days)
• #TBD Tables: Table component migration (2-3 days)
• #TBD Forms: Form component migration (2-3 days)
• #TBD Navigation: Menu, Dialog migration (2-3 days)
• #TBD Data Display: List, Card, Progress migration (1-2 days)
• #TBD Icons: MUI to Lucide icon migration (1-2 days)

Phase 3: Styling System

• #TBD Theme System: Theme migration (5-7 days)
• #TBD Emotion CSS: CSS-in-JS to Tailwind migration (8-10 days)

Phase 4: Quality Assurance

• #TBD Testing & QA: Test updates and validation (3-5 days)

Success Criteria

• All MUI components replaced with shadcn/ui equivalents
• All Emotion CSS converted to Tailwind classes
• No regression in functionality or accessibility
• Bundle size reduction achieved
• All tests passing
• Storybook stories updated
• Documentation updated

Migration Strategy

1. Incremental: Migrate components in logical groups
2. Backward Compatible: Maintain existing APIs during transition
3. Tested: Each PR includes comprehensive testing
4. Documented: Update component documentation and examples
5. Reviewed: Small PRs for thorough code review

Dependencies

• shadcn/ui component library
• Tailwind CSS v3+
• Radix UI primitives
• Lucide React icons
• class-variance-authority for component variants

Risks & Mitigation

• Visual Regressions: Comprehensive visual testing
• Performance Impact: Bundle analysis and optimization
• Breaking Changes: Careful API compatibility
• Team Coordination: Clear communication and documentation

This migration will modernize our frontend stack and improve developer experience while maintaining all existing functionality.