v2.0 — 7 frameworks · 219 verified mappings

Convert any component
between any framework

Stop rewriting the same UI twice. Paste your MUI Button, get a Chakra Button. Paste your Ant Form, get a Mantine Form. Same logic, different syntax — instantly.

ReactVueAngularSvelteTypeScript
MUI / React
<Button
  variant="contained"
  color="primary"
  size="medium"
  onClick={handleClick}
  disabled={isLoading}
  startIcon={<SaveIcon />}
>
  Save changes
</Button>
Chakra UI
<Button
  colorScheme="blue"
  size="md"
  onClick={handleClick}
  isDisabled={isLoading}
  leftIcon={<SaveIcon />}
>
  Save changes
</Button>
Mapping confidence:
97%·1 component
7Source FrameworksReact · Vue · Angular
42Conversion Paths7 source frameworks
219Verified Mappingshand-curated
30+Libraries Cataloguedspecs & comparison
Showroom

Compare frameworks side-by-side

Same pattern, same data — rendered in isolated sandboxes. Pick up to 3 frameworks and a design skin.

Open Showroom →
RV
NameStatusValue
Component A● Active$1,240
Component B● Warn$890
Component C● Error$320
Component D● Active$2,100
Data Table
Sort · paginate · row selection
RAS
Sign in
Continue
Auth Form
Validation · error states
RVA
2,847
Users
98.2%
Uptime
142ms
Latency
4.9
A11Y
Dashboard Stats
Metric cards · live data
More patterns:Card Feed·Modal Dialog·Nav Bar·Settings Panel·Notifications·File Upload·Date Picker·Sidebar Layout·Data Grid·Command Palette·Pricing Table·Stepper Wizard·Autocomplete·Kanban Board·Chat UI
Catalog

30 frameworks. One place.

Stars, bundle sizes, component counts, A11Y scores. Select up to 4 for a live comparison matrix.

Full Catalog →
MUI
Material UI
React
★ 93k
93kb
90+ comps
materialenterprise
HOT
shad
shadcn/ui
React
★ 71k
2kb
47+ comps
headlesstailwind
Vfy
Vuetify
Vue
★ 39k
105kb
80+ comps
materialvue
HOT
Man
Mantine
React
★ 26k
60kb
120+ comps
hooksmodern
View all 30 frameworks + compare matrix
Design System Skins
See how Stripe, Linear, or Vercel would build your component.

Apply real design tokens from 5 brands to any pattern in the Showroom.

Try in Showroom
CLI

Eject to your stack

Run one command to extract components from any framework into your project — with proper imports, prop names, and typings.

1
Install globally or use via npx
2
Run frontfamily eject in any project directory
3
Select pattern and target framework from the interactive menu
4
Get the component dropped into your ./components/
bash — ~/my-project
~/my-project ❯ npx frontfamily eject
✦ FrontFamily v2.0.1
? Select pattern Auth Form
? Select framework Vue 3 + Quasar
 
✓ QuasarAuthForm.vue → written
 
✨ Your component is ready at ./components/QuasarAuthForm.vue
Built by
Bassem Chagra

Full-stack engineer focused on developer tooling and cross-framework architecture.

What's real
✓ All conversion runs in your browser
✓ 219 mappings, hand-verified
✓ No accounts, no tracking
✓ Works offline (162 CLI templates)
✓ Apache 2.0 license
Why this exists

Every framework migration starts with the same tedious work: looking up prop equivalents, rewriting imports, translating component names. FrontFamily automates the mechanical part.