The short version: Magic UI officially supports React only — React 18/19 with Next.js, Vite, Remix, or Astro through React islands. There is no official Vue, Svelte, Angular, React Native or plain-HTML version. For Vue and Nuxt there are community re-implementations (Inspira UI and Spark UI) that cover many of the same components; for Astro you can use the real React components inside islands; for Svelte, Angular and React Native you rebuild the effect with the Motion library or a framework-native animation tool. This guide gives the honest per-framework answer so you do not spend an afternoon looking for a package that does not exist.
Why Magic UI is React-only
Magic UI components are copy-paste React files (.tsx) that combine Tailwind CSS classes with the Motion animation library and shadcn/ui conventions (cn helper, CSS variables). Nothing is published as a framework-agnostic web component; the value is precisely that the code is plain React you own and edit. That design choice is also why ports to other frameworks are community projects: they re-implement each component’s animation logic in Vue or Svelte rather than wrapping the original.
Vue and Nuxt: use a community port
- Inspira UI (inspira-ui.com) — an open-source collection for Vue and Nuxt that re-implements components inspired by Aceternity UI and Magic UI: bento grids, marquees, globes, beams, text effects and more. It follows the same copy-paste model with a Nuxt module and Tailwind CSS.
- Spark UI (spark-ui.dev) — introduced on r/vuejs as “the unofficial port of Magic UI” for Vue.
Both are separate projects with their own maintainers, component lists and licenses; check the license of each component you paste, and expect names and props to differ from the React originals. Search intent like “magic ui vue” almost always ends at one of these two.
Astro: real Magic UI components in React islands
Astro can render the genuine React components:
npx astro add react tailwind- Initialise shadcn/ui in the Astro project (the shadcn CLI supports Astro), then
npx shadcn@latest add @magicui/marquee. - Import the component in an
.astrofile and hydrate it:<Marquee client:visible>…</Marquee>.
Use client:visible or client:idle for below-the-fold effects so the animation JavaScript loads only when needed — good for Core Web Vitals. This is the one non-React-app path where you get Magic UI itself rather than a port.
Svelte, SvelteKit, Angular: no port, rebuild the effect
There is no maintained Magic UI port for Svelte or Angular. The practical options:
- Motion (the same library Magic UI uses) ships vanilla JavaScript and Vue packages; its JS API works inside Svelte and Angular components, so a marquee, blur-fade or number ticker is a short rewrite of the React source.
- Framework-native tools — Svelte’s
transition:directives andsvelte/motionstores, Angular’s animations module — cover most text and entrance effects. - Read the React file for the exact keyframes and timing; the CSS is Tailwind and copies over unchanged.
React Native and Expo
Magic UI targets the DOM (Tailwind CSS classes, CSS animations, WebGL for the globe), so it does not run in React Native. Search results for “magic ui react native” lead to unrelated repositories that happen to share the name. For native apps look at Reanimated-based libraries; for a marketing site that promotes a mobile app, Magic UI’s iPhone and Android device mockups are the relevant pieces — they render on the web, not on the device.
Plain HTML/CSS, WordPress, Webflow
Not supported: components need a React build step. If your site is WordPress or Webflow, either embed a small React bundle for one section (usually not worth it) or recreate the effect with CSS keyframes. Magic UI’s official FAQ states plainly that it does not support WordPress.
Quick reference
| Framework | Status | Use instead / how |
|---|---|---|
| React, Next.js 15, Vite, Remix | Official | npx shadcn@latest add @magicui/<slug> |
| Astro | Works via React islands | Real components + client:visible |
| Vue / Nuxt | Community ports | Inspira UI, Spark UI |
| Svelte / SvelteKit | No port | Motion JS API or Svelte transitions, port the React file |
| Angular | No port | Motion JS API or Angular animations |
| React Native / Expo | Not applicable | Reanimated ecosystem; use device mockups on the web instead |
| WordPress / Webflow / plain HTML | Not supported | CSS keyframes or an embedded React bundle |
If you do work in React, the getting-started guide is the ten-minute path, and the install page lists requirements and all three install routes.