nxui (Vue)

Overview

nxui is an open-source collection of 230+ beautifully animated, copy-paste components built specifically for the Vue 3 and Nuxt 4 ecosystem. Created by Vinayak Kulkarni, nxui brings the beloved shadcn component ownership workflow to Vue developers. Powered by Tailwind CSS v4, motion-v (the official Vue port of Framer Motion), and VueUse, nxui delivers a rich repertoire of interactive text reveals, animated backgrounds, tactile buttons, and layout primitives ready to drop into any modern Vue application with zero vendor lock-in.

Key Features

• Tailored for Vue 3 & Nuxt 4: Built from the ground up with <script setup>, Composition API, and strict TypeScript definitions for seamless integration across Vite and Nuxt 4 SSR/SSG projects.
• motion-v Spring Physics: Hardware-accelerated transitions and interactive gestures powered by the Vue ecosystem's premier motion framework.
• 238+ Production Components: Spans kinetic typography (HyperText, Text Reveal), interactive glow cards, terminal loaders, hero backgrounds, and accessible inputs.
• shadcn-vue Registry Compatible: Distribute and install components with a single CLI command—own the source code without external runtime dependencies.

Installation & Quick Start

# Install individual components via shadcn-vue CLI
npx shadcn-vue@latest add "https://nxui.geoql.in/r/hyper-text.json"

<script setup lang="ts">
import HyperText from '@/components/ui/hyper-text/HyperText.vue';
</script>

<template>
  <div class="flex flex-col items-center justify-center min-h-[300px] p-8 bg-background">
    <HyperText
      text="NXUI FOR VUE 3"
      class="text-4xl font-bold tracking-tight text-foreground font-mono"
      :duration="800"
    />
    <p class="mt-3 text-sm text-muted-foreground">
      Powered by Tailwind CSS v4 and motion-v.
    </p>
  </div>
</template>

Why Choose nxui?

1. Closing the Vue Animation Gap: Bring cutting-edge, Aceternity-style visual craft to Vue 3 and Nuxt applications without rewriting React components from scratch.
2. True Code Independence: Copy clean Single File Components (SFC) directly into your repository with complete control over Tailwind styling, themes, and logic.