Overview

Initial setup and configuration for the MUI to shadcn/ui migration project.

Parent Issue: #18993
Estimated Duration: 1-2 days
Priority: High (Foundation)

Tasks

shadcn/ui Setup

• Install shadcn/ui CLI and dependencies
• Configure components.json with project-specific settings
• Set up component generation and customization
• Verify Radix UI primitive compatibility

Tailwind CSS Configuration

• Update tailwind.config.js with design tokens
• Configure CSS variables for theming
• Set up custom utility classes
• Ensure compatibility with existing Tailwind usage

Development Tools

• Update Vite configuration for new dependencies
• Configure TypeScript paths for component imports
• Set up ESLint rules for new patterns
• Update Biome configuration if needed

Storybook Integration

• Configure Storybook for shadcn/ui components
• Set up Tailwind CSS in Storybook
• Create component documentation templates
• Test component rendering in isolation

Utility Functions

• Enhance cn() utility for class merging
• Create component variant utilities
• Set up theme token access helpers
• Add TypeScript types for new patterns

Acceptance Criteria

• shadcn/ui CLI successfully generates components
• Tailwind CSS compiles without errors
• Development server starts with new configuration
• Storybook renders with updated styling
• All existing functionality remains intact
• Build process completes successfully

Files to Modify

• package.json - Add new dependencies
• components.json - shadcn/ui configuration
• tailwind.config.js - Design tokens and utilities
• vite.config.mts - Build configuration
• .storybook/main.ts - Storybook configuration
• src/utils/cn.ts - Utility functions

Dependencies

{
  "@radix-ui/react-*": "latest",
  "class-variance-authority": "^0.7.1",
  "clsx": "^2.1.1",
  "tailwind-merge": "^2.0.0",
  "lucide-react": "^0.474.0"
}

Testing

• Verify component generation works
• Test Tailwind class compilation
• Ensure no regressions in existing features
• Validate Storybook functionality

Documentation

• Update development setup instructions
• Document new component patterns
• Create migration guidelines for team
• Update contributing guidelines