# nxui
**Repository Path**: mengfly/nxui
## Basic Information
- **Project Name**: nxui
- **Description**: nxui 是一套使用 Vue 3 和 Tailwind CSS 构建的精美交互式 UI 组件
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: main
- **Homepage**: https://www.oschina.net/p/nxui
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 1
- **Created**: 2026-06-27
- **Last Updated**: 2026-06-27
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
---
180+ animated components. Dark mode. Copy, paste, ship.
## Introduction
nxui is a collection of beautifully designed, interactive UI components built with Vue 3 and Tailwind CSS. Just run the CLI command, add the component to your project, and start building.
### Why nxui?
- **Copy & Paste** — Not a dependency. You own the code.
- **Interactive** — Cursor-following effects, 3D transforms, and smooth animations.
- **Customizable** — Built with Tailwind CSS. Easy to modify.
- **Dark Mode** — All components support light and dark modes.
- **TypeScript** — Fully typed for the best developer experience.
## Quick Start
The fastest way to add components is using the shadcn-vue CLI:
```bash
npx shadcn-vue@latest add https://nxui.geoql.in/r/spotlight-card.json
```
## Components (169)
### Text Animations (28)
| Component | Description |
| ----------------------------------------------------------------------------------------- | ---------------------------------------- |
| [ASCII Text](https://nxui.geoql.in/docs/text-animations/ascii-text) | ASCII art text with wave distortion |
| [Blur Text](https://nxui.geoql.in/docs/text-animations/blur-text) | Blur-to-focus text reveal |
| [Circular Text](https://nxui.geoql.in/docs/text-animations/circular-text) | Characters around a circle |
| [Count Up](https://nxui.geoql.in/docs/text-animations/count-up) | Animated number counter |
| [Curved Loop](https://nxui.geoql.in/docs/text-animations/curved-loop) | Text on curved SVG path |
| [Decrypted Text](https://nxui.geoql.in/docs/text-animations/decrypted-text) | Decryption scramble effect |
| [Editorial Orbs](https://nxui.geoql.in/docs/text-animations/editorial-orbs) | Bouncing glowing orbs with text wrapping |
| [Falling Text](https://nxui.geoql.in/docs/text-animations/falling-text) | Physics-based falling text |
| [Fuzzy Text](https://nxui.geoql.in/docs/text-animations/fuzzy-text) | Fuzzy blur text hover |
| [Glitch Text](https://nxui.geoql.in/docs/text-animations/glitch-text) | Digital glitch distortion |
| [Gradient Text](https://nxui.geoql.in/docs/text-animations/gradient-text) | Flowing gradient across text |
| [Hyper Text](https://nxui.geoql.in/docs/text-animations/hyper-text) | Scrambling text reveal |
| [Logo Loop](https://nxui.geoql.in/docs/text-animations/logo-loop) | Infinite scrolling logo marquee |
| [Rotating Text](https://nxui.geoql.in/docs/text-animations/rotating-text) | Cycling word rotation |
| [Scrambled Text](https://nxui.geoql.in/docs/text-animations/scrambled-text) | Random character scramble |
| [Scroll Based Velocity](https://nxui.geoql.in/docs/text-animations/scroll-based-velocity) | Scroll-speed text |
| [Scroll Float](https://nxui.geoql.in/docs/text-animations/scroll-float) | Scroll-triggered float effect |
| [Scroll Reveal](https://nxui.geoql.in/docs/text-animations/scroll-reveal) | Progressive scroll reveal |
| [Shiny Text](https://nxui.geoql.in/docs/text-animations/shiny-text) | Shimmering text highlight |
| [Shuffle](https://nxui.geoql.in/docs/text-animations/shuffle) | Text shuffle animation |
| [Split Text](https://nxui.geoql.in/docs/text-animations/split-text) | Staggered character entrance |
| [Text Animate](https://nxui.geoql.in/docs/text-animations/text-animate) | Character-by-character animation |
| [Text Cursor](https://nxui.geoql.in/docs/text-animations/text-cursor) | Blinking cursor effect |
| [Text Pressure](https://nxui.geoql.in/docs/text-animations/text-pressure) | Cursor-reactive text weight |
| [Text String](https://nxui.geoql.in/docs/text-animations/text-string) | Verlet physics rope text simulation |
| [Text Type](https://nxui.geoql.in/docs/text-animations/text-type) | Typewriter text effect |
| [True Focus](https://nxui.geoql.in/docs/text-animations/true-focus) | Focus highlight effect |
| [Variable Proximity](https://nxui.geoql.in/docs/text-animations/variable-proximity) | Cursor-distance font variation |
### Animations (22)
| Component | Description |
| -------------------------------------------------------------------------- | ----------------------------------- |
| [Animated Content](https://nxui.geoql.in/docs/animations/animated-content) | Scroll-triggered content reveal |
| [Blob Cursor](https://nxui.geoql.in/docs/animations/blob-cursor) | Gooey blob cursor trail |
| [Click Spark](https://nxui.geoql.in/docs/animations/click-spark) | Click-triggered spark burst |
| [Crosshair](https://nxui.geoql.in/docs/animations/crosshair) | Smooth crosshair cursor |
| [Cubes](https://nxui.geoql.in/docs/animations/cubes) | Interactive 3D CSS cube grid |
| [Electric Border](https://nxui.geoql.in/docs/animations/electric-border) | Animated electric border glow |
| [Fade Content](https://nxui.geoql.in/docs/animations/fade-content) | Scroll-triggered fade-in |
| [Ghost Cursor](https://nxui.geoql.in/docs/animations/ghost-cursor) | Ghostly cursor trail with bloom |
| [Glare Hover](https://nxui.geoql.in/docs/animations/glare-hover) | Glare sweep on hover |
| [Gradual Blur](https://nxui.geoql.in/docs/animations/gradual-blur) | Layered blur gradient overlay |
| [Image Trail](https://nxui.geoql.in/docs/animations/image-trail) | Mouse-following image trail |
| [Magic Rings](https://nxui.geoql.in/docs/animations/magic-rings) | Concentric animated glow rings |
| [Magnet](https://nxui.geoql.in/docs/animations/magnet) | Magnetic cursor pull effect |
| [Meta Balls](https://nxui.geoql.in/docs/animations/meta-balls) | WebGL metaball shader |
| [Noise](https://nxui.geoql.in/docs/animations/noise) | Animated canvas noise grain overlay |
| [Pixel Trail](https://nxui.geoql.in/docs/animations/pixel-trail) | Blobby pixel cursor trail |
| [Pixel Transition](https://nxui.geoql.in/docs/animations/pixel-transition) | Pixelated grid transition |
| [Ribbons](https://nxui.geoql.in/docs/animations/ribbons) | Interactive OGL ribbon lines |
| [Shape Blur](https://nxui.geoql.in/docs/animations/shape-blur) | SDF shape with blur distortion |
| [Splash Cursor](https://nxui.geoql.in/docs/animations/splash-cursor) | WebGL fluid simulation cursor |
| [Star Border](https://nxui.geoql.in/docs/animations/star-border) | Animated glowing border beams |
| [Target Cursor](https://nxui.geoql.in/docs/animations/target-cursor) | Snapping crosshair cursor |
### Components (55)
| Component | Description |
| -------------------------------------------------------------------------------- | ---------------------------------------- |
| [Animated List](https://nxui.geoql.in/docs/components/animated-list) | Scroll-triggered list animation |
| [Auth Modal](https://nxui.geoql.in/docs/components/auth-modal) | Authentication dialog |
| [Border Glow](https://nxui.geoql.in/docs/components/border-glow) | Cursor-tracking directional glow card |
| [Bounce Cards](https://nxui.geoql.in/docs/components/bounce-cards) | Staggered card fan animation |
| [Bubble Menu](https://nxui.geoql.in/docs/components/bubble-menu) | Full-screen pill navigation |
| [Card Nav](https://nxui.geoql.in/docs/components/card-nav) | Expandable card navbar |
| [Card Swap](https://nxui.geoql.in/docs/components/card-swap) | Stacked card carousel |
| [Carousel](https://nxui.geoql.in/docs/components/carousel) | Draggable 3D card carousel |
| [Chroma Grid](https://nxui.geoql.in/docs/components/chroma-grid) | Mouse-tracking spotlight grid |
| [Circular Gallery](https://nxui.geoql.in/docs/components/circular-gallery) | OGL curved image gallery |
| [Collection Surfer](https://nxui.geoql.in/docs/components/collection-surfer) | Image collection browser |
| [Command Menu](https://nxui.geoql.in/docs/components/command-menu) | Command palette (Cmd+K) |
| [Counter](https://nxui.geoql.in/docs/components/counter) | Spring-physics digit counter |
| [Decay Card](https://nxui.geoql.in/docs/components/decay-card) | SVG displacement warp card |
| [Dome Gallery](https://nxui.geoql.in/docs/components/dome-gallery) | 3D dome-shaped image gallery |
| [Elastic Slider](https://nxui.geoql.in/docs/components/elastic-slider) | Draggable elastic bounce slider |
| [Eye Tracking](https://nxui.geoql.in/docs/components/eye-tracking) | Realistic eyes that follow the cursor |
| [Flight Status Card](https://nxui.geoql.in/docs/components/flight-status-card) | Animated flight info card |
| [Flowing Menu](https://nxui.geoql.in/docs/components/flowing-menu) | Hover-activated marquee menu |
| [Fluid Glass](https://nxui.geoql.in/docs/components/fluid-glass) | Glass refraction shader effect |
| [Flying Posters](https://nxui.geoql.in/docs/components/flying-posters) | OGL scroll poster gallery |
| [Folder](https://nxui.geoql.in/docs/components/folder) | CSS 3D folder animation |
| [GitHub Calendar](https://nxui.geoql.in/docs/components/github-calendar) | GitHub-style contribution graph |
| [Glass Icons](https://nxui.geoql.in/docs/components/glass-icons) | Glassmorphism icon buttons |
| [Glass Surface](https://nxui.geoql.in/docs/components/glass-surface) | Frosted glass surface effect |
| [Gooey Nav](https://nxui.geoql.in/docs/components/gooey-nav) | Particle-burst SVG navigation |
| [Infinite Menu](https://nxui.geoql.in/docs/components/infinite-menu) | WebGL sphere menu |
| [Lanyard](https://nxui.geoql.in/docs/components/lanyard) | 3D lanyard with rope physics |
| [Layered Stack](https://nxui.geoql.in/docs/components/layered-stack) | Layered cards that fan on hover |
| [Mac Keyboard](https://nxui.geoql.in/docs/components/mac-keyboard) | Interactive Mac keyboard with key sounds |
| [Magic Bento](https://nxui.geoql.in/docs/components/magic-bento) | Animated bento grid layout |
| [Magnetic Dock](https://nxui.geoql.in/docs/components/magnetic-dock) | macOS-style magnetic dock |
| [Masonry](https://nxui.geoql.in/docs/components/masonry) | Responsive masonry image grid |
| [Model Viewer](https://nxui.geoql.in/docs/components/model-viewer) | 3D model viewer with controls |
| [Music Player](https://nxui.geoql.in/docs/components/music-player) | Vinyl music player with swinging tonearm |
| [Node Diagram](https://nxui.geoql.in/docs/components/node-diagram) | Animated node connections |
| [Orbit Images](https://nxui.geoql.in/docs/components/orbit-images) | Circular orbiting images |
| [Pill Nav](https://nxui.geoql.in/docs/components/pill-nav) | Pill-shaped sliding navigation |
| [Pixel Card](https://nxui.geoql.in/docs/components/pixel-card) | Canvas pixel shimmer card |
| [Profile Card](https://nxui.geoql.in/docs/components/profile-card) | Animated profile card |
| [Reflective Card](https://nxui.geoql.in/docs/components/reflective-card) | Metallic reflection card |
| [Scroll Choreography](https://nxui.geoql.in/docs/components/scroll-choreography) | Scroll-driven image choreography |
| [Scroll Split Card](https://nxui.geoql.in/docs/components/scroll-split-card) | 3-panel scroll-driven card flip |
| [Scroll Stack](https://nxui.geoql.in/docs/components/scroll-stack) | Scroll-driven stacked cards |
| [Scrub Input](https://nxui.geoql.in/docs/components/scrub-input) | Inline slider pill input |
| [Showcase Card](https://nxui.geoql.in/docs/components/showcase-card) | 3D tilt showcase card |
| [Split Flap Display](https://nxui.geoql.in/docs/components/split-flap-display) | Airport-style split flap display |
| [Spotlight Card](https://nxui.geoql.in/docs/components/spotlight-card) | Cursor-tracking spotlight |
| [Stack](https://nxui.geoql.in/docs/components/stack) | Draggable card stack |
| [Staggered Menu](https://nxui.geoql.in/docs/components/staggered-menu) | Full-screen staggered menu |
| [Stepper](https://nxui.geoql.in/docs/components/stepper) | Multi-step wizard |
| [Sticker Peel](https://nxui.geoql.in/docs/components/sticker-peel) | Interactive sticker peel effect |
| [Sticky Scroll Cards](https://nxui.geoql.in/docs/components/sticky-scroll-cards) | Sticky scroll image card stack |
| [Testimonial Marquee](https://nxui.geoql.in/docs/components/testimonial-marquee) | Scrolling testimonials |
| [Tilted Card](https://nxui.geoql.in/docs/components/tilted-card) | 3D cursor-following tilt card |
### Backgrounds (46)
| Component | Description |
| ------------------------------------------------------------------------- | ------------------------------------- |
| [Antigravity](https://nxui.geoql.in/docs/backgrounds/antigravity) | Magnetic particle attraction field |
| [Aurora](https://nxui.geoql.in/docs/backgrounds/aurora) | WebGL aurora borealis effect |
| [Balatro](https://nxui.geoql.in/docs/backgrounds/balatro) | Psychedelic spinning paint |
| [Ballpit](https://nxui.geoql.in/docs/backgrounds/ballpit) | 3D physics ball pit |
| [Beams](https://nxui.geoql.in/docs/backgrounds/beams) | 3D light beam planes |
| [Color Bends](https://nxui.geoql.in/docs/backgrounds/color-bends) | Complex warp shader |
| [Dark Veil](https://nxui.geoql.in/docs/backgrounds/dark-veil) | CPPN neural network shader |
| [Dither](https://nxui.geoql.in/docs/backgrounds/dither) | Bayer-matrix dithered wave shader |
| [Dot Field](https://nxui.geoql.in/docs/backgrounds/dot-field) | Cursor-bulge dot grid with glow |
| [Dot Grid](https://nxui.geoql.in/docs/backgrounds/dot-grid) | Interactive canvas dot grid |
| [Evil Eye](https://nxui.geoql.in/docs/backgrounds/evil-eye) | Animated evil eye with cursor pupil |
| [Faulty Terminal](https://nxui.geoql.in/docs/backgrounds/faulty-terminal) | Glitchy terminal effect |
| [Floating Lines](https://nxui.geoql.in/docs/backgrounds/floating-lines) | Glowing wave lines |
| [Galaxy](https://nxui.geoql.in/docs/backgrounds/galaxy) | Starfield galaxy with parallax |
| [Gradient Blinds](https://nxui.geoql.in/docs/backgrounds/gradient-blinds) | Animated gradient blinds |
| [Grainient](https://nxui.geoql.in/docs/backgrounds/grainient) | Gradient with noise grain |
| [Grid Distortion](https://nxui.geoql.in/docs/backgrounds/grid-distortion) | Mouse-reactive grid warp |
| [Grid Motion](https://nxui.geoql.in/docs/backgrounds/grid-motion) | Cursor-following rotated grid |
| [Grid Scan](https://nxui.geoql.in/docs/backgrounds/grid-scan) | Scanning grid with bloom |
| [Hyperspeed](https://nxui.geoql.in/docs/backgrounds/hyperspeed) | Highway light simulation |
| [Iridescence](https://nxui.geoql.in/docs/backgrounds/iridescence) | Iridescent color waves |
| [Laser Flow](https://nxui.geoql.in/docs/backgrounds/laser-flow) | Volumetric laser beams |
| [Letter Glitch](https://nxui.geoql.in/docs/backgrounds/letter-glitch) | Glitching character grid |
| [Light Pillar](https://nxui.geoql.in/docs/backgrounds/light-pillar) | Vertical light pillar effect |
| [Light Rays](https://nxui.geoql.in/docs/backgrounds/light-rays) | Animated light rays |
| [Lightning](https://nxui.geoql.in/docs/backgrounds/lightning) | WebGL lightning bolt effect |
| [Line Waves](https://nxui.geoql.in/docs/backgrounds/line-waves) | Warping animated line wave background |
| [Liquid Chrome](https://nxui.geoql.in/docs/backgrounds/liquid-chrome) | Liquid chrome ripple effect |
| [Liquid Ether](https://nxui.geoql.in/docs/backgrounds/liquid-ether) | Ethereal liquid shader |
| [Metallic Paint](https://nxui.geoql.in/docs/backgrounds/metallic-paint) | WebGL metallic paint ripples |
| [Orb](https://nxui.geoql.in/docs/backgrounds/orb) | Glowing orb with noise |
| [Particles](https://nxui.geoql.in/docs/backgrounds/particles) | Particle system with connections |
| [Pixel Blast](https://nxui.geoql.in/docs/backgrounds/pixel-blast) | Pixel explosion effect |
| [Pixel Snow](https://nxui.geoql.in/docs/backgrounds/pixel-snow) | 3D voxel pixelated snowfall |
| [Plasma](https://nxui.geoql.in/docs/backgrounds/plasma) | WebGL2 plasma raymarch shader |
| [Plasma Wave](https://nxui.geoql.in/docs/backgrounds/plasma-wave) | Raymarched dual-wave OGL plasma |
| [Prism](https://nxui.geoql.in/docs/backgrounds/prism) | Prismatic light refraction background |
| [Prismatic Burst](https://nxui.geoql.in/docs/backgrounds/prismatic-burst) | Prismatic light burst |
| [Radar](https://nxui.geoql.in/docs/backgrounds/radar) | Animated radar sweep background |
| [Ripple Grid](https://nxui.geoql.in/docs/backgrounds/ripple-grid) | Animated sine-wave grid |
| [Shape Grid](https://nxui.geoql.in/docs/backgrounds/shape-grid) | Animated grid of geometric shapes |
| [Silk](https://nxui.geoql.in/docs/backgrounds/silk) | Silky fabric shader |
| [Soft Aurora](https://nxui.geoql.in/docs/backgrounds/soft-aurora) | Soft aurora borealis shader |
| [Squares](https://nxui.geoql.in/docs/backgrounds/squares) | Animated directional squares |
| [Threads](https://nxui.geoql.in/docs/backgrounds/threads) | Perlin noise thread lines |
| [Waves](https://nxui.geoql.in/docs/backgrounds/waves) | Perlin noise wave lines |
### Hero Backgrounds (4)
| Component | Description |
| ---------------------------------------------------------------------------------- | -------------------------- |
| [Animated Gradient](https://nxui.geoql.in/docs/hero-backgrounds/animated-gradient) | Animated WebGL gradient |
| [Dither Prism Hero](https://nxui.geoql.in/docs/hero-backgrounds/dither-prism-hero) | Dithered prism effect |
| [Hero Geometric](https://nxui.geoql.in/docs/hero-backgrounds/hero-geometric) | Geometric shapes animation |
| [WebGL Liquid](https://nxui.geoql.in/docs/hero-backgrounds/webgl-liquid) | WebGL liquid simulation |
### Visual Effects (11)
| Component | Description |
| -------------------------------------------------------------------------------------- | ------------------------------------ |
| [Border Beam](https://nxui.geoql.in/docs/visual-effects/border-beam) | Animated border light |
| [Closing Plasma](https://nxui.geoql.in/docs/visual-effects/closing-plasma) | Plasma curtain effect |
| [Dither Gradient](https://nxui.geoql.in/docs/visual-effects/dither-gradient) | Dithered gradient background |
| [Image Ripple Effect](https://nxui.geoql.in/docs/visual-effects/image-ripple-effect) | WebGL cursor ripple image distortion |
| [Infinite Image Field](https://nxui.geoql.in/docs/visual-effects/infinite-image-field) | Infinite cursor-driven image canvas |
| [Liquid Blob](https://nxui.geoql.in/docs/visual-effects/liquid-blob) | Morphing liquid blob |
| [Magnet Lines](https://nxui.geoql.in/docs/visual-effects/magnet-lines) | Cursor-reactive line field |
| [Matrix Rain](https://nxui.geoql.in/docs/visual-effects/matrix-rain) | Matrix-style code rain |
| [Noise Texture](https://nxui.geoql.in/docs/visual-effects/noise-texture) | Animated noise overlay |
| [Particle Galaxy](https://nxui.geoql.in/docs/visual-effects/particle-galaxy) | 3D particle system |
| [Pixel Canvas](https://nxui.geoql.in/docs/visual-effects/pixel-canvas) | Interactive pixel grid |
### Buttons (3)
| Component | Description |
| --------------------------------------------------------------------------------------- | ----------------------- |
| [Interactive Hover Button](https://nxui.geoql.in/docs/buttons/interactive-hover-button) | Hover-reactive button |
| [Pulsating Button](https://nxui.geoql.in/docs/buttons/pulsating-button) | Pulsing glow animation |
| [Shimmer Button](https://nxui.geoql.in/docs/buttons/shimmer-button) | Animated shimmer effect |
## Tech Stack
- **Framework**: [Nuxt 4](https://nuxt.com)
- **Styling**: [Tailwind CSS 4](https://tailwindcss.com)
- **Components**: [Vue 3](https://vuejs.org)
- **Animation**: [motion-v](https://github.com/motiondivision/motion-vue)
- **Package Manager**: [pnpm](https://pnpm.io)
## Development
### Prerequisites
- [Node.js 24+](https://nodejs.org)
- [pnpm 11.3+](https://pnpm.io) (recommended: install via `corepack enable`)
### Setup
```bash
# Clone the repository
git clone https://github.com/vinayakkulkarni/nxui.git
cd nxui
# Install dependencies
pnpm install
# Start development server
pnpm run dev
```
### Available Scripts
| Command | Description |
| ------------------------- | ------------------------------------ |
| `pnpm run dev` | Start development server |
| `pnpm run build` | Build for production |
| `pnpm run lint` | Run oxlint |
| `pnpm run lint:fix` | Fix lint issues automatically |
| `pnpm run format` | Format with oxfmt |
| `pnpm run format:check` | Verify formatting |
| `pnpm run build:registry` | Build registry JSONs → `public/r/` |
| `pnpm run update:deps` | Interactively update all deps (taze) |
## Contributing
We welcome contributions! Whether it's:
- Reporting a bug
- Submitting a fix
- Proposing new features
- Creating new components
### How to Contribute
1. Fork the repository
2. Create your feature branch (`git checkout -b feat/new-component`)
3. Commit your changes (`git commit -Sam 'feat: add component'`)
4. Push to the branch (`git push origin feat/new-component`)
5. Open a [Pull Request](https://github.com/vinayakkulkarni/nxui/compare)
### Component Guidelines
When creating new components:
- Use TypeScript with proper type definitions
- Support both light and dark modes
- Include comprehensive props with sensible defaults
- Add smooth transitions and animations
- Write clear documentation with examples
- Follow existing code style and patterns
## License
MIT License — feel free to use these components in personal and commercial projects.
See [LICENSE](./LICENSE) for more information.
## Acknowledgments
nxui is a Vue port of [Componentry](https://componentry.fun) by [Harsh Jadhav](https://github.com/harshjdhv). The original component designs and interactions come from that project.
- [Componentry](https://componentry.fun) ([GitHub](https://github.com/harshjdhv/componentry)) — Original React component library that nxui ports to Vue
- [React Bits](https://reactbits.dev) ([GitHub](https://github.com/DavidHDev/react-bits)) — Animated React component collection and ecosystem inspiration
- [shadcn-vue](https://www.shadcn-vue.com/) — Vue port of shadcn/ui
- [motion-v](https://github.com/motiondivision/motion-vue) — Vue animation library
- [VueUse](https://vueuse.org/) — Collection of Vue composition utilities
---
Made with care by Vinayak Kulkarni
