Animated Vue components you copy, paste and own.
Beautiful animated components for Vue. Built with Tailwind CSS and motion-v. 364+ components, MIT, free.
All components
364 live demos. Pick one to see its docs, props and source.
Text Animations 47
Components 139
Dashboard 8
Charts 8
Visual Effects 14
Buttons 9
Animations 35
Backgrounds 65
Paper Shaders 30
About nxui
nxui is a collection of beautifully crafted animated Vue components that you can copy and paste into your applications. Built with Tailwind CSS and motion-v.
The registry ships 364 components across 10 categories: text animations, components, dashboard widgets, charts, visual effects, buttons, animations, backgrounds, Paper shaders and hero backgrounds. Each one installs with a single shadcn-vue command as source you own, supports dark mode, and adds only the npm packages that component needs.
Features
- Animated components — Text animations, backgrounds, visual effects, hero backgrounds, buttons, animations, and more
- Vue 3 Composition API — Built with
<script setup>and TypeScript - Tailwind CSS v4 — Styled with utility classes, fully customizable
- motion-v — Smooth animations powered by the Vue port of Framer Motion
- VueUse — Leverages VueUse composables throughout
- Dark Mode — Every component supports dark mode out of the box
- Copy & Paste — Install via CLI or copy the source directly
Installation
Install components using the shadcn-vue CLI:
npx shadcn-vue@latest add "https://nxui.geoql.in/r/hyper-text.json"
Or browse the component docs and copy the source code directly.
Tech Stack
Frequently asked questions
Is nxui free?
Yes. nxui is open source and free forever under the MIT license. You can use every component in personal and commercial projects at no cost.
How do I install an nxui component?
Run the shadcn-vue CLI with the component URL, e.g. `npx shadcn-vue@latest add "https://nxui.geoql.in/r/hyper-text.json"`. The source is copied into your project — you own the code, with no runtime dependency on nxui.
What is nxui built with?
nxui is built with Vue 3 (Composition API and `<script setup>`), Nuxt 4, Tailwind CSS v4, and motion-v (the Vue port of Framer Motion). It ships 364+ animated, copy-paste components.
Does nxui work with Nuxt?
Yes. nxui components are standard Vue 3 single-file components and work in any Vue 3 or Nuxt 4 project. Every component supports dark mode out of the box.
Can I copy the source instead of using the CLI?
Yes. Every component has a live demo and its full source on the docs site, so you can copy and paste the code directly without the CLI.