The Future of Web Dev
The Future of Web Dev
Nexvyn UI: 30+ Animated UI Components for shadcn/ui & React
Use Nexvyn UI to add spring-animated React components, Tailwind styling, local source files, and shadcn registry installs to Next.js.
Nexvyn UI is a React and shadcn/ui component registry that adds spring-animated controls, navigation patterns, form elements, visual effects, and interface illustrations to your projects.
It’s good for dashboards, settings pages, documentation layouts, chat UI, media tools, and product demos that need visible state changes or tactile feedback.
Key Features
- Installs individual components through a registry namespace or direct JSON URL.
- Writes editable source into the
components,lib, andhookspaths defined bycomponents.json. - Uses spring transitions, motion values, and animated layout changes across many interactive items.
- Pairs animated controls with simpler primitives such as Badge, Input, Switch, and Table.
- Declares external packages and shared helper files separately for each registry item.
Available Components
| Category | Components |
|---|---|
| Illustrations | Rocket Launch, Phone Mockup, Laptop Mockup |
| Navigation and page orientation | Bounce Sidebar, Scroll Indicator, Table of Contents, Icon Bar, Mobile Drawer, Morph Nav, Nav Menu, Tabs Subtle, Breadcrumbs |
| Inputs and selection | Blossom Picker, Fader, Ratio Slider, Combobox, Checkbox, Input, Password Input, Radio Group, Select, Switch |
| Menus and actions | Gooey Dropdown, Clipboard Field, Context Menu, Input Copy, Input Message, Dropdown Menu |
| Animated visual elements | Bars Theme, Fluid Orb, Glow Orb |
| Data and status | Badge, Table |
How To Use It
Initialize shadcn/ui
Run the shadcn initializer in an existing Next.js or React project that does not yet have components.json.
npx shadcn@latest initAdd the Nexvyn Registry
npx shadcn@latest registry add @nexvynThe namespace resolves component names through this components.json entry:
{
"registries": {
"@nexvyn": "https://ui.nexvyn.dev/r/{name}.json"
}
}Install a Component
Install Bounce Sidebar through the namespace:
npx shadcn@latest add @nexvyn/bounce-sidebarA direct registry URL works when you do not want to save the namespace:
npx shadcn@latest add https://ui.nexvyn.dev/r/bounce-sidebar.jsonBasic Usage
import { BounceSidebar } from "@/components/ui/bounce-sidebar"
const sections = ["Overview", "Activity", "Members", "Billing"]
export default function ProjectSettingsPage() {
return (
<aside className="w-56 rounded-xl border p-4">
<BounceSidebar items={sections} dotColor="#f97316" />
</aside>
)
}Alternatives and Related Resources
- Animated UI Components and Blocks for React and Next.js: beUI
- 30+ Animated UI Components for Next.js and shadcn: Joly UI
- Animated UI Components with Tailwind and Framer Motion: Berlix UI
- shadcn/ui and Base UI Component Library for Next.js: UIAble
FAQs
Q: Is Nexvyn UI installed as an npm component package?
A: No. The repository package is private, and components are distributed through shadcn registry items that copy source files into your project.
Q: Why does a Nexvyn UI component look unstyled after installation?
A: Check the Tailwind CSS version, global theme variables, and aliases in components.json. Some installed files reference Nexvyn-specific variables such as --color-bg.
Q: Do all Nexvyn UI components require Motion?
A: No. Each registry item declares its own packages. Several interactive components use motion, while Badge, Clipboard Field, Input, Switch, Table, and the device mockups list no Motion dependency.
Q: The component installed but doesn’t animate. What’s missing?
A: Add "use client" to the parent component file and verify the motion package exists in node_modules. Re-run bun install if it was added manually.
