Introduction

What is Nexus UI?

Nexus UI is a component library and marketplace that ships polished, animated UI primitives you own completely. Instead of wrapping a third-party package, you copy the source directly into your project and adapt it however you need. Every piece is built on the same production-proven stack: Next.js App Router, TypeScript, Tailwind CSS v4, Framer Motion, and shadcn/ui design tokens.

The library is organized into three layers: a component catalog of 50+ animated primitives, a block catalog of multi-variant page sections, and a template marketplace of full landing-page compositions.

Tech stack

• —Next.js 15 App Router — File-based routing, server components, and edge-ready deployment
• —TypeScript — Strict mode throughout — every component and hook is fully typed
• —Tailwind CSS v4 — CSS-first config, PostCSS plugin, and OKLCH design tokens
• —Framer Motion — Spring physics, scroll-linked animations, and AnimatePresence transitions
• —shadcn/ui — Radix-powered primitives — button, dialog, tabs, and more
• —Supabase (optional) — Auth, user profiles, and bookmarks for gated content
• —Stripe / LemonSqueezy (optional) — Premium template checkout and webhook handling

Component catalog

50+ animated components spanning backgrounds, cards, text effects, inputs, navigation, media, and data display — all with live previews and copy-ready React source on each detail page.

Browse the full catalog → /components

Block catalog

Blocks are multi-variant page sections — each block ships several layout options you can drop into any landing page without wiring up animation from scratch.

• —Text Animations — Typewriter, blur-fade-in, flipping words, and AI generate-typewriter headings
• —Brand Logo Animation — Blur-flip grid, marquee, spotlight, swap, and single-row logo clouds
• —Interactive Background Card — Interactive dots, layered waves, particle noise, and aurora wavy lines
• —Why Choose Us Bento Grid — Mentorship, ATS scoring, upload flow, progress tracking, interview cards
• —FAQ Folder Card — Questions & answers, searchable FAQ, and chat-style animated FAQ
• —Sidebar — Simple hover sidebar, collapsible icon-only sidebar, and grouped sidebar
• —Contact Page — Global signal, centered intake, gradient proof, and image story layouts
• —Blog Content Sections — Centered article, sticky TOC, editorial story, and featured posts index

Browse blocks → /blocks

Template marketplace

Full-page templates are complete landing page compositions built from Nexus UI components. Each template includes a live preview, source download, and a “Your Brand” customizer for instant colour and copy changes.

Browse templates → /templates

How components are delivered

Nexus UI uses the shadcn registry model. You never install an npm package for UI components — you copy the source code into your own project and own it fully. Two ways to get a component:

• 1.Copy from the detail page — open any component page, switch to the Code tab, and paste the React source into your project.
• 2.Install via the @nexus-labs registry — add the hosted registry to your components.json and pull any component by slug:

  npx shadcn@latest add @nexus-labs/terminal
  npx shadcn@latest add @nexus-labs/gooey-input

See the CLI guide for full registry setup instructions.

Get started

Follow the setup guides in order to get a working environment that matches the Nexus UI stack.

1. 1.Nexus-UI setup — create a Next.js app, add Tailwind, cn(), shadcn/ui, and your first component
2. 2.Install Next.js — create a fresh App Router project as your target app
3. 3.Install Tailwind CSS — add Tailwind v4 with PostCSS and shared design tokens
4. 4.Add utilities — install clsx, tailwind-merge, and wire the cn() helper
5. 5.CLI — initialize shadcn/ui and pull components via the @nexus-labs registry