@yousefkadah/vue-magic-ui

Vue Magic UI

74 free and open-source animated components for Vue 3 — built with TypeScript, Tailwind CSS v4 and motion-v. Copy them into your app with one command, or install the package from npm.

Documentation & live demos →

Using React? The same catalogue — same names, same props — is available as React Magic UI.

Why

• Own the code. Like shadcn-vue, components are copied into your project, so you can change anything.
• One command. shadcn-vue add drops in the source, installs npm dependencies and adds the keyframes to your CSS.
• Themed by default. Components use the shadcn colour tokens and work in light and dark mode.
• Accessible motion. Looping animations respect prefers-reduced-motion; split text stays readable by screen readers.
• Typed and documented. Every prop is typed and listed with its default on the docs site.

Install a component (recommended)

You need a Vue 3.5+ project with Tailwind CSS v4 and shadcn-vue initialised. Then:

npx shadcn-vue@latest add https://yousefkadah.github.io/vue-animation-libarary/r/marquee.json

<script setup lang="ts">
import { Marquee } from '@/components/ui/marquee'
</script>

<template>
  <Marquee pause-on-hover>
    <span>Vue</span>
    <span>Nuxt</span>
    <span>Vite</span>
  </Marquee>
</template>

Add the registry once to components.json and use short names:

{
  "registries": {
    "@magic": "https://yousefkadah.github.io/vue-animation-libarary/r/{name}.json"
  }
}

npx shadcn-vue@latest add @magic/border-beam @magic/number-ticker

Or install from npm

npm install @yousefkadah/vue-magic-ui

/* your Tailwind entry CSS */
@import "tailwindcss";
@import "@yousefkadah/vue-magic-ui/theme.css";
@source "../node_modules/@yousefkadah/vue-magic-ui/dist";

import { BorderBeam, Marquee, NumberTicker } from '@yousefkadah/vue-magic-ui'

Components

Components — Animated Circular Progress Bar · Animated List · Avatar Circles · Bento Grid · Code Comparison · Dock · Dotted Map · File Tree · Globe · Hero Video Dialog · Icon Cloud · Lens · Marquee · Orbiting Circles · Pointer · Progressive Blur · Scroll Progress · Smooth Cursor · Terminal

Special Effects — Animated Beam · Backlight · Border Beam · Confetti · Cool Mode · Glare Hover · Magic Card · Meteors · Neon Gradient Card · Particles · Pixel Image · Shine Border · Theme Toggler · Warp Background

Animations — Blur Fade

Text Animations — Animated Gradient Text · Animated Shiny Text · Aurora Text · Comic Text · Dia Text Reveal · Highlighter · Hyper Text · Kinetic Text · Line Shadow Text · Morphing Text · Number Ticker · Scroll Based Velocity · Sparkles Text · Spinning Text · Text 3D Flip · Text Animate · Text Reveal · Typing Animation · Video Text · Word Rotate

Buttons — Interactive Hover Button · Pulsating Button · Rainbow Button · Ripple Button · Shimmer Button · Shiny Button

Backgrounds — Animated Grid Pattern · Dot Pattern · Flickering Grid · Grid Pattern · Hexagon Pattern · Interactive Grid Pattern · Light Rays · Noise Texture · Retro Grid · Ripple · Striped Pattern

Device Mocks — Android · Safari · iPhone

Development

npm install
npm run dev        # docs site at http://localhost:5173
npm test           # mounts every example and fails on any error or Vue warning
npm run build      # registry JSON + docs site + npm package

Adding a component? Read CONTRIBUTING.md.

Credits

Component designs and APIs follow Magic UI by the Magic UI team (MIT), re-implemented for Vue. See THIRD_PARTY_NOTICES.md.

License

MIT © Yousef Kadah