For best experience, open in browser on a wider screen
Library Guide
Nexvyn/UI is a small set of components built around one idea: each one gets a single moment of motion, and everything else stays quiet. Layout, type and color do the structural work, so the one animated detail reads as intentional rather than busy. When a component needs more than that to feel finished, the design is usually wrong, not the animation.
Most components start from a pattern that already works well somewhere else. We rebuild it from scratch, strip what does not earn its place, and keep the API close to what you would expect from Radix or shadcn/ui. The goal is that nothing here surprises you on first read.
Color comes from a short list of CSS variables: a background, two surfaces, a foreground, two muted text tones, borders, and one accent. The accent is reserved for focus, selection and the signature motion, which keeps it meaningful. Light and dark themes redefine the same variables, so components never branch on the theme.
Spacing sits on a 4px grid and radii come from one base value. Because every component reads the same tokens, retuning a theme is a matter of editing a few variables in one stylesheet rather than hunting through component files.
Motion uses a handful of shared duration and easing tokens. Elements entering or leaving the screen ease out, elements already on screen ease in and out, and hover changes stay under 150ms. Only transform, opacity, clip-path and filter are animated, so the browser can keep the work off the main thread.
When the operating system asks for reduced motion, transitions are switched off in CSS and JavaScript-driven animation takes a static path. The component still communicates its state change; it just does it without movement.
Components render only when their own state changes, and heavier pieces such as canvas renderers load lazily. Every timer, listener and animation frame is released on unmount, which matters on pages like this one where many components are mounted at once.
Each component ships as a single file with its own dependencies declared, so installing one does not pull in the rest. Shared helpers such as the class merger and the sound module are copied once and reused.
Interactive parts use native elements where they exist and the matching ARIA roles where they do not. Composite widgets like tabs and menus use roving focus, so arrow keys move between items and Tab moves past the group. Overlays trap focus while open and return it to the trigger on close.
Touch targets are at least 44 pixels square, icon-only buttons carry an accessible label, and decorative icons are hidden from assistive technology. Focus rings show for keyboard users and stay out of the way for pointer clicks.
Every component is typed, forwards its ref, merges a className prop, and supports both controlled and uncontrolled state. Visual variants are enums rather than boolean flags, so autocomplete tells you what is available. User-facing strings are props with defaults, so you can localize them.
Installation goes through the shadcn registry: one command copies the source into your project, where it is yours to read and change. There is no runtime package to keep in sync.
Override the theme by redefining the color, radius and motion variables in your own stylesheet. Because components reference the variables rather than literal values, the change applies everywhere at once, in both light and dark mode.
For one-off adjustments, pass a className. Classes you pass are merged after the internal ones, so your utilities win without needing important flags or deeper selectors.