Introduction
Beautiful animated components for Vue. Built with Tailwind CSS and motion-v.
180+ copy-paste components
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.
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 180+ 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.