Cross-Framework Migration & Parity Report
Complete cross-framework comparison covering 52 UX4G components, 1,815 atomic utility classes, 1:1 Bootstrap 5.3 and Tailwind CSS equivalents, parity matrices, and gap analysis.
Component Mapping65 of 65 components
Side-by-side component availability across UX4G 3.0, Bootstrap 5.3, and Material Design 3.
| # | Component Name | UX4G | Bootstrap 5.3 | Material 3 | Notes |
|---|---|---|---|---|---|
| 1 | Accessibility Bar | Accessibility Bar | UX4G only (gov accessibility) | ||
| 2 | Accordion | Accordion | Accordion | No M3 equivalent | |
| 3 | Alert | Alert | Alerts | Snackbar | M3 Snackbar is closest |
| 4 | Avatar | Avatar | UX4G only | ||
| 5 | Badge | Badge | Badge | Badge | All three have it |
| 6 | Bottom App Bar | Bottom App Bar | M3 only | ||
| 7 | Bottom Sheet | Bottom Sheet | M3 only | ||
| 8 | Breadcrumb | Breadcrumb | Breadcrumb | No M3 equivalent | |
| 9 | Button | Buttons | Buttons | Button (FAB, Icon, Common, Extended FAB, Segmented) | All three |
| 10 | Button Group | Button Group | Segmented Button | ||
| 11 | Card | Card | Card | Card | All three |
| 12 | Carousel | Carousel | Carousel | Carousel | All three |
| 13 | Checkbox | Checkbox | Checks & Radios | Checkbox | All three |
| 14 | Chips / Tags | Chips + Chip Group + Tags | Chips (Assist, Filter, Input, Suggestion) | No BS equivalent | |
| 15 | Close Button | Close Button | BS only | ||
| 16 | Collapse | Collapse | BS only (UX4G uses Accordion) | ||
| 17 | Combobox | Combobox | Menu (Exposed Dropdown) | ||
| 18 | Date Picker | Date Picker | Date Picker | No BS native | |
| 19 | Dialog / Modal | Modal | Modal | Dialog | All three |
| 20 | Divider | Divider | <hr> / Vertical Rule | Divider | |
| 21 | Draft Status | Draft Status | UX4G only (gov-specific) | ||
| 22 | Drawer | Drawer | Offcanvas | Navigation Drawer | Different names |
| 23 | Dropdown | Dropdown | Dropdowns | Menu | |
| 24 | Empty State | Empty State | UX4G only | ||
| 25 | FAB (Floating Action Button) | FAB + Extended FAB | M3 only | ||
| 26 | Feedback | Feedback | UX4G only (ratings/NPS) | ||
| 27 | File Upload | File Upload | Form Control (file input) | ||
| 28 | Footer | Footer | UX4G only (page component) | ||
| 29 | Form Field | Form Field | Form Control + Input Group | Text Field | |
| 30 | Icon Button | Icon Button | M3 only (UX4G uses Button variants) | ||
| 31 | Image | Image | Images (content) | ||
| 32 | Input | Input | Form Control | Text Field | All three |
| 33 | Input - Aadhaar | Input Aadhaar | UX4G only (India-specific) | ||
| 34 | Input - OTP | Input-OTP | UX4G only | ||
| 35 | Input - PAN Card | Input Pan-Card | UX4G only (India-specific) | ||
| 36 | Journey Timeline | Journey Timeline | UX4G only | ||
| 37 | Link | Link | UX4G component (BS uses utility) | ||
| 38 | List | List | List Group | List | All three |
| 39 | Mega Menu | Mega Menu | UX4G only | ||
| 40 | Menu | Menu | M3 only (UX4G uses Dropdown) | ||
| 41 | Navbar / Navigation Bar | Navbar | Navbar | Top App Bar + Navigation Bar | |
| 42 | Navigation Drawer | Drawer | Offcanvas | Navigation Drawer | |
| 43 | Navigation Rail | Navigation Rail | M3 only | ||
| 44 | Navs & Tabs | Tab | Navs & Tabs | Tabs | All three |
| 45 | Pagination | Pagination | Pagination | No M3 equivalent | |
| 46 | Placeholders | Placeholders | BS only (skeleton loading) | ||
| 47 | Popover | Popover | Popovers | No M3 equivalent | |
| 48 | Progress Indicator | Progress Indicator | Progress | Progress Indicator (Linear, Circular) | All three |
| 49 | Progress - SLA Indicator | Progress SLA Indicator | UX4G only (gov-specific) | ||
| 50 | Radio Button | Radio | Checks & Radios | Radio Button | All three |
| 51 | Result List | Result List | UX4G only | ||
| 52 | Scrollspy | Scrollspy | BS only | ||
| 53 | Search | Search | Search (Search Bar, Search View) | ||
| 54 | Select | Select | BS form component | ||
| 55 | Slider / Range | Slider | Range | Slider | All three |
| 56 | Snackbar / Toast | Toasts | Snackbar | UX4G uses Alert | |
| 57 | Spinner | Spinner | Spinners | Progress Indicator (Circular) | |
| 58 | Status Pipeline | Status Pipeline | UX4G only | ||
| 59 | Stepper | Stepper | UX4G only (M3 deprecated) | ||
| 60 | Switch / Toggle | Toggle | Checks (switch) | Switch | All three |
| 61 | Table | Table | Tables (content) | No M3 Table | |
| 62 | Textarea | Textarea | Form Control (textarea) | Text Field (multi-line) | |
| 63 | Time Picker | Time Slot | Time Picker | UX4G: slot-based | |
| 64 | Tooltip | Tooltip | Tooltips | Tooltip (Plain, Rich) | All three |
| 65 | Top App Bar | Top App Bar | M3 only (UX4G uses Navbar) |