Developer guide

Next.js UI library for App Router interfaces

A Next.js UI library should work with the App Router’s server-first rendering model while isolating browser interactions in explicit client components. This guide shows how Spectrum UI’s editable React source fits route layouts, navigation, loading states, forms, overlays, and content pages.

Spectrum UI is not a replacement for Next.js routing, data fetching, caching, or image configuration. It supplies interface source that you place within those framework boundaries and connect to application data.

Browse 5 componentsView code example

What Next.js UI Library means

Next.js App Router pages are Server Components by default. A practical UI library therefore avoids forcing an entire route into the client bundle just because one nested control needs state, gestures, or a browser API.

Spectrum UI component pages expose whether an implementation carries a use client directive and which packages it imports. Keep server-rendered content above that boundary, pass serializable props into interactive leaves, and use Next.js primitives where the route needs framework-aware links or images.

When to use these patterns

01

You are building with the App Router

Use server-rendered route shells and place interactive Spectrum UI source only where a client boundary is required.

02

You need framework-aware navigation

Compose local UI primitives with Next.js Link, route layouts, loading states, and metadata instead of hiding routing inside the component.

03

You want inspectable dependencies

Review each component page before installation to see its source paths, client behavior, and declared packages.

Next.js UI Library to explore

Open a component page to inspect its live example, editable source, installation command, dependencies, API details, accessibility notes, and related components.

MediaImage PreviewAn image preview component with zoom, lightbox, and gallery support.AuthLogin CardA login form card for authentication pages and SaaS apps.CardCardA set of pre-designed cards for login, signup, pricing, and dashboards.ActionButtonA set of pre-designed buttons including gradient, outline, loading, and icon styles.OverlayAnimated DrawerA drawer panel that slides in smoothly for menus, settings, and sidebars.

Keep a settings route server-rendered

This App Router page composes local card and button primitives without introducing a page-level client boundary.

pnpm dlx shadcn@latest add card button
import Link from 'next/link';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';

export default function SettingsPage() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Workspace settings</CardTitle>
      </CardHeader>
      <CardContent>
        <Button asChild>
          <Link href="/settings/profile">Edit profile</Link>
        </Button>
      </CardContent>
    </Card>
  );
}

Linked guides

Guide

Next.js Server Components guide

Separate server-rendered data and content from interactive client leaves.

Guide

React 19 Server Actions guide

Connect forms to server-side mutations without moving the whole page client-side.

Guide

Spectrum UI installation

Initialize the project and add components through the registry.

React Component LibraryTailwind Component LibraryAI UI Components

Next.js UI Library questions

Yes. The Spectrum UI documentation site uses the App Router, and component source can be placed inside App Router pages and layouts with the documented client boundaries preserved.