Dev Design Library

Nexvyn UI components

Animated UI components with spring physics and fluid interactions, built on shadcn/ui and Radix primitives.

Components
73
Framework
React
Stack
React, TypeScript, Tailwind
License
CC-BY-NC-4.0+Commons-Clause+MIT
GitHub stars
231
Source
https://github.com/Nexvyn/Nexvyn-ui
Website
https://ui.nexvyn.dev
Install
npx shadcn@latest add @nexvyn/{name}

All Nexvyn UI components

  • Accordion: A vertically stacked set of interactive headings that each reveal a section of content, with a grid-rows unfold animation and full…
  • Action Button: An async-aware button with an idle → pending → success/error state machine, promise tracking, abort support, and live screen-reader…
  • Adaptive Actions: A responsive action toolbar that measures its available inline size and moves overflowed items into an accessible dropdown menu, with…
  • AI Input: AI composer textarea with auto-grow, send/stop button morph, attachment slots, and Enter-to-send.
  • Badge: A compact status label with solid, muted, and dot variants for tagging content inline.
  • Banner: Banner primitives: a full-width dismissible strip, a link and a tag, shared by every banner block.
  • Banner Cookie: A cookie consent card with accept and decline actions that lifts in once and lifts away on a choice.
  • Banner Filled: A filled announcement banner on the inverted foreground surface.
  • Banner Notice: Info and error status banners with icons and the right live-region roles.
  • Banner Outline: A quiet outline announcement banner with a hairline bottom border.
  • Banner Subscribe: An email signup banner with inline validation that crossfades into a confirmation on success.
  • Banner Tagged: An outline banner led by a small tag, with an arrow link.
  • Bars Theme: A traveling-wave bars visualization with 5 vertical bars sharing a sine-wave frequency, evenly phase-shifted left to right so the wave…
  • Bounce Sidebar: A sidebar navigation with a bouncing dot indicator that smoothly animates between items using spring physics.
  • Breadcrumbs: A horizontal trail of links that auto-collapses into an ellipsis button when the trail exceeds maxItems.
  • Checkbox: A checkbox with drawn check animation, indeterminate state, and hidden native input for forms.
  • Clipboard Field: A one-click install/copy field that morphs between the command and a success label using CSS grid fr tracks. JS only copies and toggles…
  • Color Picker: A blossom-style color picker with concentric petal layers, circular color bar, and arc slider for lightness control.
  • Context Menu: A right-click menu with proximity highlight and keyboard navigation.
  • CTA: Call to action primitives: Cta section, CtaAction links and the sliding CtaActionIcon.
  • CTA Centered: A centered call to action with eyebrow, heading, supporting text and two actions.
  • CTA Split: A two column call to action with a phone showing your app screen.
  • Dia Text: Diagonal clip-path reveal for bold display typography. Text sweeps into view with an angled edge as the component enters the viewport.
  • Dropdown Menu: A popover action menu with a proximity-driven morphing highlight. The muted hover highlight springs between items as the pointer moves…
  • Fader: A mixing-console-style parameter fader where the control IS the display, with continuous and detent value grammars, elastic overdrag, and…
  • FAQ: FAQ primitives: FaqSection, FaqHeader, FaqSupport and FaqTextLink.
  • FAQ Accordion: A two column FAQ accordion with a contact line.
  • FAQ Grouped: A two column FAQ grouped by topic, one hairline list per group.
  • FAQ Icons: An open FAQ grid with topic icons under hairline rules.
  • FAQ Numbered: An open FAQ grid with plain numbered markers under hairline rules.
  • Fluid Orb: A WebGL fluid orb in muted/neutral design tokens with sphere normals, fBm noise, and audio-reactive pulse.
  • Footer: Footer primitives: FooterLink, FooterColumn, FooterSocialLinks and FooterBrand.
  • Footer Centered: A centered footer stack with links, icon links and copyright.
  • Footer Columns: A sitemap footer with link columns, icon links and a legal bar.
  • Footer Language: A footer with icon links, a native language select, cookie link and four link columns.
  • Footer Newsletter: A footer with a release notes signup, four link columns and a bottom bar.
  • Footer Signature: A one row footer with a handwritten signature that draws itself once.
  • Footer Simple: A one row footer with wordmark, copyright and a row of links.
  • Footer Wordmark: A footer that ends on an edge to edge wordmark below the link columns.
  • Glow Orb: A WebGL fbm-noise glow orb with state-driven colors, volume-responsive scale and glow, idle and connecting pulse animations, and a…
  • Gooey Dropdown: A dropdown menu with a gooey SVG filter effect that morphs a trigger pill into the panel using spring physics and CSS shape interpolation.
  • Icon Bar: A horizontal toolbar of icon buttons with bloom-open label reveal on hover/selection, accent dot indicator, and roving tabindex.
  • Input Copy: A copy-to-clipboard field that shows a monospace value with an icon or button trigger, animating a checkmark on copy.
  • Laptop Mockup: A laptop device-frame illustration for showcasing app screens.
  • Login: LoginForm: labelled email and password fields, a password toggle, provider buttons and error state.
  • Login Email first: A centered sign in page that leads with the email form, providers side by side below.
  • Login Testimonial: The split sign in page with a customer quote over the photo.
  • Login Social first: A centered sign in page that leads with Google and Apple buttons.
  • Login Split: A two column sign in page with a full height photo panel.
  • Morph Nav: A floating action button that morphs through states with SVG path-morphing trigger icon.
  • Nav Menu: A vertical navigation list with two-layer proximity highlight (active route + hover), weight-shift labels, and status dots for new/updated…
  • Navigation Compass: A draggable compass dial that doubles as a nav menu: scroll rotates it with physical lag, and links entering the active zone scale up and…
  • Password Input: A password input with an animated eye toggle that follows your cursor and blinks periodically.
  • Phone Mockup: A device-frame illustration with side buttons, dynamic island, and a cropped/scrolled variant for showcasing app screens.
  • Radio Group: A radio group with roving tabindex and a dot morph selection indicator.
  • Ratio Slider: A split ratio slider with two color bars, a draggable divider, and responsive labels that collapse when space is tight.
  • Rocket Launch: A hand-drawn rocket illustration that ignites its engines and lifts off the pad on demand, with a reset back to rest.
  • Scroll Indicator: A vertical scroll progress indicator with tick marks, section labels, and a floating position readout.
  • Select: A form select with a two-layer proximity highlight (selected accent tint + muted hover), drawn check animation, and a trigger label morph…
  • Sidebar: Sidebar primitives: nav lists with aria-current links, icon buttons, the page area that follows the panel, and a mobile sheet with a focus…
  • Sidebar Collapsible: A sidebar that folds down to its icons, with recent pages and the account at the bottom.
  • Sidebar Rail: A full width header over an icon rail that opens over the page on hover and can be kept open.
  • Sidebar Workspace: A sectioned workspace sidebar with a workspace select, page groups and pinned settings that slides away.
  • Social Proof: NameAvatar: an abstract avatar generated from a name, token colored and SSR safe.
  • Social Proof Logo grid: The tools a product is built with, as a quiet hairline logo grid under a short heading.
  • Social Proof Logo hover: The logo grid where the logos step back on hover or focus and a link fades in over them.
  • Social Proof Logo marquee: The tools a product is built with, drifting in a slow seamless marquee with soft edges.
  • Social Proof Logo reveal: The logo grid with a staggered rise and fade that plays once when it first scrolls into view.
  • Social Proof Testimonial grid: Testimonial cards in two or three columns, with a Show more toggle on mobile.
  • Social Proof Testimonial marquee: Two rows of testimonial cards drifting in opposite directions, pausable.
  • Switch: A toggle switch with thumb travel animation and hidden checkbox for forms.
  • Table of Contents: A fixed bottom-left floating block that tracks scroll position, shows the active section, and expands into a navigable section list.
  • Tabs Subtle: A pill-style tab list where the selected indicator springs between tabs, built on the WAI-ARIA tabs pattern with full roving-focus…

Browse by category