Nexus UI

Also in the Nexus UI registry

Copy a prompt for your agent, copy the install command, or open the docs that ship it.

• animated-tabs

  nexus-font, ui-sounds
  PromptCopy

• Avatar Group

  avatar-group

  Overlapping avatar stack with per-avatar entrance animations (flip, slide, scale, bounce), four hover styles, name tooltips, and automatic color-coded fallback initials when no image is supplied.

  framer-motion, react2 files
  PromptCopy

• Background Boxes

  background-boxes

  Animated isometric grid background with hover color effects and cross markers. Fully configurable skew, scale, box dimensions, and colors.

  framer-motion, react2 files
  PromptCopyDocs ↗

• Background Gradient

  background-gradient

  Animated gradient wrapper with soft glow and blur for cards, buttons, and hero sections.

  framer-motion, react3 files
  PromptCopyDocs ↗

• Blog Content Sections

  blog-content-sections

  Centered article, table-of-contents, editorial, featured post, and hover-card blog sections.

  framer-motion, react, lucide-react6 files
  PromptCopy

• capsule-toggles

  nexus-font, ui-sounds
  PromptCopy

• 3D Card Carousel

  card-carousel-3d

  Cylindrical 3D card carousel — cards arranged in a circle on the Z axis, rotating continuously or on scroll. Radius, perspective, item size, speed, and direction are all configurable.

  framer-motion, react2 files
  PromptCopy

• card-stack-rotator

  nexus-font, utils, ui-sounds
  PromptCopy

• catch-undo

  nexus-font
  PromptCopy

• code-block

  nexus-font, ui-sounds
  PromptCopy

• Command Palette

  command-palette

  Animated command palette with ⌘K shortcut, grouped navigation/actions/theme commands, backdrop blur overlay, and Framer Motion enter/exit transitions.

  framer-motion, lucide-react, cmdk, @radix-ui/react-dialog2 files
  PromptCopy

• Before / After Compare

  compare

  Drag a vertical handle to compare two images side-by-side. Supports mouse and touch, optional labels, custom start position, and any aspect ratio.

  lucide-react, react2 files
  PromptCopyDocs ↗

• Contact Page

  contact-page

  Contact block variants with forms, social links, imagery, and the included Nexus mark.

  react, framer-motion, lucide-react, topojson-client2 files
  PromptCopy

• copy-button

  nexus-font, utils, ui-sounds
  PromptCopy

• Cursor Text Reveal

  cursor-text-reveal

  An immersive cursor-following spotlight that reveals alternate text, gradients, or imagery beneath perfectly aligned headline layers.

  framer-motion, react2 files
  PromptCopy

• dart-rating

  nexus-font
  PromptCopy

• Depth Testimonials

  depth-testimonials

  Stacked testimonial planes with staggered motion reveals.

  framer-motion1 file
  PromptCopyDocs ↗

• domino-progress

  nexus-font
  PromptCopy

• Draggable Card Stack

  draggable-card-stack

  Shuffled deck of portrait cards on a dark surface. Drag or fling the top card to send it to the back; press ← to pull the bottom card to the front. Supports images and videos, hover overlay, auto-play, and fully configurable stack geometry.

  framer-motion, react2 files
  PromptCopy

• dust-snap

  nexus-font, ui-sounds
  PromptCopy

• Editorial Blog Rail

  editorial-blog-rail

  Featured article plus compact secondary headlines for content hubs.

  nexus-font1 file
  PromptCopyDocs ↗

• elastic-stepper

  nexus-font, ui-sounds
  PromptCopy

• Encrypted Text

  encrypted-text

  Characters shuffle through gibberish before locking into the final string — a futuristic cyber decoding reveal for hero headings, buttons, badges, and nav links.

  framer-motion, react2 files
  PromptCopyDocs ↗

• Expandable Cards

  expandable-cards

  Responsive card grid where clicking a card smoothly expands it into a full-detail overlay with image, description, and a CTA button.

  framer-motion, lucide-react, react2 files
  PromptCopyDocs ↗

• Feature Tools Card

  feature-tools-card

  A dark glass card with five magnetic icon slots, a rotating conic-gradient orbit ring, and 3-D tilt physics. Swap the default integration icons for any SVG or image.

  react2 files
  PromptCopy

• feedback-pill

  nexus-font, ui-sounds, typing-sound
  PromptCopy

• Float Glass Navbar

  float-glass-navbar

  Glass navigation rail with spring entrance and CTA emphasis.

  framer-motion1 file
  PromptCopyDocs ↗

• Nexus floating dock

  floating-dock

  Bottom-centered macOS-style dock with pointer-driven magnification, neighbor scaling, glass pill chrome, tooltips, and a touch-friendly expandable mobile menu.

  framer-motion, lucide-react, react, next7 files
  PromptCopyDocs ↗

• footer-blocks

  nexus-font
  PromptCopy

• Glass Login Stack

  glass-login-stack

  Minimal glass authentication panel with crisp focus states.

  framer-motion1 file
  PromptCopyDocs ↗

• Glow Button

  glow-button

  Framer-style glowing CTA button with expanding shadow, radial border sweep, glass edge, and animated arrow.

  framer-motion, lucide-react, react2 files
  PromptCopy

• Glowing Effect Cards

  glowing-effect-cards

  Cursor-reactive glowing border cards with a responsive 2-1-2 layout for refined SaaS sections and dashboards.

  framer-motion, lucide-react, react4 files
  PromptCopyDocs ↗

• Gooey Search Input

  gooey-input

  Expandable pill search with a detached icon bubble merged through an SVG goo filter and spring layout.

  framer-motion, lucide-react, react3 files
  PromptCopyDocs ↗

• Lattice Feature Grid

  lattice-feature-grid

  Four-up feature grid with scroll reveals and glass tiles.

  framer-motion1 file
  PromptCopyDocs ↗

• Link Preview

  link-preview

  Hover-triggered image tooltip that transforms inline text links into cinematic visual previews. Spring-animated entrance with blur, scale, mouse-tracking tilt, and a soft floating glide — perfect for blogs, portfolios, and product pages.

  framer-motion, react, react-dom, next1 file
  PromptCopy

• Mac Keyboard

  mac-keyboard

  Fully interactive Mac-style keyboard with Web Audio synthesised click sounds, Framer Motion keycap animations, and real-time physical keyboard highlighting.

  framer-motion, react6 files
  PromptCopyDocs ↗

• Meteor Effect

  meteors

  Animated diagonal meteor beams with glow heads and trailing streaks, designed as a reusable background layer for cards and hero sections.

  framer-motion, react2 files
  PromptCopyDocs ↗

• Milestone Timeline

  milestone-timeline

  Vertical roadmap timeline with glowing nodes.

  framer-motion1 file
  PromptCopyDocs ↗

• Motion FAQ Disclosure

  motion-faq-disclosure

  Lightweight FAQ with directional affordance and animated answers.

  framer-motion, react1 file
  PromptCopyDocs ↗

• Motion Layer Scroller

  motion-layer-scroller

  Scroll-driven parallax depth engine — each layer moves at an independent speed and axis as the user scrolls. Compose scenes with overlapping planes.

  framer-motion, react2 files
  PromptCopy

• Nebula Glass Card

  nebula-glass-card

  3D tilt card with spring physics and luminous edge lighting.

  framer-motion1 file
  PromptCopyDocs ↗

• Orbital Loader

  orbital-loader

  Dual counter-rotating rings with breathing inner glow.

  framer-motion1 file
  PromptCopyDocs ↗

• otp-input

  nexus-font, ui-sounds, typing-sound
  PromptCopy

• password-strength

  nexus-font, ui-sounds, typing-sound
  PromptCopy

• Phone Input

  phone-input

  A modern animated phone number input with country selector and validation.

  framer-motion, lucide-react, react2 files
  PromptCopyDocs ↗

• Pricing Section

  pricing-section

  Four interactive pricing layouts with radio selection, animated monthly and yearly billing transitions, and configurable feature lists.

  react, framer-motion, lucide-react3 files
  PromptCopy

• Profile Orbit

  profile-orbit

  An interactive profile carousel where five floating avatars orbit a central card. Clicking any avatar, the nav arrows, or the keyboard cycles through people with a smooth fade + spring animation.

  react1 file
  PromptCopy

• progress-button

  nexus-font, ui-sounds
  PromptCopy

• Pulse Dashboard KPIs

  pulse-dashboard-kpis

  KPI strip with micro-hover lifts and soft chart placeholders.

  framer-motion1 file
  PromptCopyDocs ↗

• pumpkin-reveal

  nexus-font, ui-sounds
  PromptCopy

• radio-cards

  nexus-font, ui-sounds
  PromptCopy

• Real-Time Cursors

  real-time-cursors

  Collaborative workspace preview with animated teammate cursors, code review cards, and simulated live presence trails.

  framer-motion, lucide-react, react10 files
  PromptCopy

• rotating-headline

  nexus-font
  PromptCopy

• Scroll Progress Bar

  scroll-progress-bar

  A minimal vertical progress rail that fills smoothly as a target section moves through the viewport or a scrollable container.

  framer-motion, react2 files
  PromptCopy

• Scroll Reveal Text

  scroll-reveal-text

  Scroll-linked text reveal where words, characters, or lines emerge from muted gray to bright white with optional blur dissolve and staggered cascade.

  framer-motion, react2 files
  PromptCopy

• shredder-delete

  nexus-font, ui-sounds
  PromptCopy

• signup-blocks

  nexus-font, typing-sound
  PromptCopy

• Spectra Frame

  spectra-frame

  Zero-dependency interactive image grid — photos start in black & white and burst into full color on hover with adaptive scale. Built-in responsive columns, scoped CSS injection, and picsum placeholder defaults.

  react1 file
  PromptCopy

• Split Contact Glass

  split-contact-glass

  Marketing narrative paired with a compact contact capture form.

  framer-motion1 file
  PromptCopyDocs ↗

• Split Signup Convert

  split-signup-convert

  Two-column signup with narrative panel and compact fields.

  framer-motion1 file
  PromptCopyDocs ↗

• RippleLine squiggly text

  squiggly-text

  Hero-grade headline with an animated wave underline, turbulence + Gaussian blur + displacement, optional glyph micro-warp, and reduced-motion fallbacks.

  framer-motion, react3 files
  PromptCopyDocs ↗

• stagger-menu

  nexus-font, ui-sounds
  PromptCopy

• Stateful message button

  stateful-button

  Animated async button with idle → loading → success transitions, built-in click guarding, and smooth icon/text motion.

  framer-motion, lucide-react, react3 files
  PromptCopyDocs ↗

• status-morph

  nexus-font, ui-sounds
  PromptCopy

• Step Flow

  step-flow

  A responsive four-step process section with a sliding highlight, animated image swaps, and hover or click step selection.

  framer-motion, react2 files
  PromptCopy

• SVG Noise Shader

  svg-noise-shader

  FeTurbulence-driven noise field for textured sci-fi surfaces.

  framer-motion1 file
  PromptCopyDocs ↗

• Text Generate Effect

  text-generate-effect

  Animated text reveal that fades words, characters, or lines into view with optional blur and upward motion.

  framer-motion, react3 files
  PromptCopyDocs ↗

• 3D Folder Card

  three-d-folder

  Interactive folder card that opens on hover, fans project cards upward, and includes a lightbox gallery for visual collections.

  framer-motion, lucide-react, react2 files
  PromptCopy

• toast-stack

  nexus-font, ui-sounds
  PromptCopy

• Toggle Pricing

  toggle-pricing-pro

  Annual/monthly toggle with spring knob and contextual savings callout.

  framer-motion, react1 file
  PromptCopyDocs ↗

• Tracing Spotlight Panel

  tracing-spotlight-panel

  Cursor-traced highlight for feature callouts and pricing tiers.

  framer-motion1 file
  PromptCopyDocs ↗

• venom-button

  nexus-font, utils
  PromptCopy

• web-sling-button

  nexus-font, utils, ui-sounds
  PromptCopy

• Wheel Selector

  wheel-selector

  An interactive radial navigation dial for services, features, or portfolio items with drag, wheel, and click input plus a responsive mobile arch.

  framer-motion, lucide-react, react2 files
  PromptCopy

• Workbench Sidebar

  workbench-sidebar

  Dense sidebar navigation tuned for dashboards and tools.

  framer-motion1 file
  PromptCopyDocs ↗