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 Bento Grid

  animated-bento-grid

  Feature showcase bento grid with entrance animations and configurable column spans. Each tile supports custom content, tags, and motion entrance delays.

  framer-motion, react2 files
  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 ↗

• Bento Grid Skeleton

  bento-grid-skeleton

  Bento grid with animated skeleton placeholder tiles — chat, dashboard, avatar, workflow, calendar, and code variants. Perfect for loading states.

  framer-motion, react2 files
  PromptCopy

• Signal Bento Grid

  bento-signal-grid

  Animated bento tiles with breathing gradients for product metrics.

  framer-motion1 file
  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

• 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

• Cinematic Card Deck

  cinematic-card-deck

  A scroll-linked 3D card stack with depth, ambient glow, progress dots, cursor parallax, and optional image-backed cards.

  framer-motion, react2 files
  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

• 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

• Depth Testimonials

  depth-testimonials

  Stacked testimonial planes with staggered motion reveals.

  framer-motion1 file
  PromptCopyDocs ↗

• 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

• Editorial Blog Rail

  editorial-blog-rail

  Featured article plus compact secondary headlines for content hubs.

  nexus-font1 file
  PromptCopyDocs ↗

• 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

• 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 ↗

• 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 ↗

• Aurora Hero Spotlight

  hero-aurora-spotlight

  Cursor-reactive spotlight layered over an aurora field for launch heroes.

  framer-motion1 file
  PromptCopyDocs ↗

• Interactive Globe Explorer

  interactive-globe-explorer

  Scrollable office/location explorer with a live React Globe, synchronized city list, clickable map pins, responsive details popover, and one-click address/email copy actions.

  react-globe.gl, three, lucide-react, react2 files
  PromptCopy

• 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 ↗

• 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

• Pulse Dashboard KPIs

  pulse-dashboard-kpis

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

  framer-motion1 file
  PromptCopyDocs ↗

• 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

• Scrolling Testimonials

  scrolling-testimonials

  Infinite vertical scroll testimonial wall with multi-column layout, independent column speeds, reverse direction support, gradient fade masks, and avatar initials fallback.

  react1 file
  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

• 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 ↗

• 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 ↗

• 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 ↗

• Interactive Terminal

  terminal

  macOS-style terminal window with typewriter commands, cursor blink, output sequencing, and optional sound.

  framer-motion, react4 files
  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

• 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 ↗

• Warp Speed Card

  warp-speed-card

  A focused warp-speed effect — hover a single phrase to reveal a dark space scene with streaking beams confined to the text's bounding box. The text itself stays static; the effect lives entirely behind it.

  framer-motion, react2 files
  PromptCopyDocs ↗

• 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

• Word Magnet

  word-magnet

  Cursor-reactive text where whole words gently repel from the pointer and spring back without splitting letters.

  framer-motion, react2 files
  PromptCopy

• Workbench Sidebar

  workbench-sidebar

  Dense sidebar navigation tuned for dashboards and tools.

  framer-motion1 file
  PromptCopyDocs ↗