Convert UI components between frameworks. Compare them side-by-side.
Website · Converter · Guides · CLI on npm · Report Bug · Request Feature
FrontFamily is a free developer tool for converting UI component code between frontend frameworks and comparing how they render the same patterns side-by-side.
Paste MUI code, get the Chakra UI equivalent — or Ant Design, EUI, Mantine, Bootstrap, Tailwind, Quasar. 42 conversion paths, 219 verified component mappings. Diff view, live preview, shareable URLs.
Compare up to 3 frameworks rendering the same component simultaneously. Real DOM metrics, render timing, a11y scanning. 5 design system skins (Stripe, Linear, Vercel, Notion, Figma).
9 in-depth articles with interactive searchable component reference tables, TypeScript migration patterns, and real-world pitfall warnings.
$ npx @frontfamily/cli eject auth-form data-table -f react-mui
┌ FrontFamily Eject
│
◆ components/AuthFormPattern.tsx
◆ components/MuiLineage.tsx
│
└ 2 ejected
162 templates across 9 frameworks. Works offline, no accounts. Full docs →
| From ↓ / To → | MUI | Chakra | AntD | EUI | Mantine | Tailwind | Quasar |
|---|---|---|---|---|---|---|---|
| MUI | — | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| Chakra UI | ✓ | — | ✓ | ✓ | ✓ | ✓ | ✓ |
| Ant Design | ✓ | ✓ | — | ✓ | ✓ | ✓ | ✓ |
| Elastic EUI | ✓ | ✓ | ✓ | — | ✓ | ✓ | ✓ |
| Mantine | ✓ | ✓ | ✓ | ✓ | — | ✓ | ✓ |
| Bootstrap | ✓ | ✓ | ✓ | ✓ | ✓ | — | ✓ |
| Tailwind | ✓ | ✓ | ✓ | ✓ | ✓ | — | ✓ |
18 patterns × 9 frameworks. EUI templates use native @elastic/eui components.
| Guide | Interactive Search Table |
|---|---|
| MUI → Chakra UI | 28 components |
| MUI vs Ant Design | 26 components |
| Bootstrap → React | 22 components |
| Elastic EUI Migration | 45 components |
| Tailwind → Components | 21 components |
| Chakra → Mantine | 27 components |
| React → Vue (Quasar) | 24 components |
| Ant Design → MUI | 26 components |
| Best React Frameworks 2026 | Comparison |
This is the community hub for FrontFamily. Use it to:
| Action | How |
|---|---|
| Report a bug | Open a bug report |
| Request a feature | Open a feature request |
| Fix a component mapping | Submit a mapping correction |
| Suggest a migration guide | Suggest a guide topic |
See CONTRIBUTING.md for details.
| Resource | Link |
|---|---|
| Website | frontfamily.com |
| Converter | frontfamily.com/converter |
| Showroom | frontfamily.com/showroom |
| Catalog | frontfamily.com/catalog |
| Guides | frontfamily.com/guides |
| CLI Docs | frontfamily.com/docs |
| npm | @frontfamily/cli |
Apache 2.0 — see LICENSE for details.