Getting Started

Installation

Set up Spectrum UI in a new or existing Next.js project. It only takes a few minutes.

Using Next.js 15 with React 19? Read the Next.js 15 and React 19 guide first.

1
Create a project
Start with a new Next.js project, or skip this step if you already have one.
pnpm create next-app@latest
2
Set up shadcn/ui
Run the init command. It installs the needed packages and prepares Tailwind CSS for you.
pnpm dlx shadcn@latest init
You can add the -d flag to skip the questions and use the default settings.
3
Configure components.json
The init command asks you a few questions. Your answers are saved in components.json.
components.json
Which style would you like to use?›New York
Which color would you like to use as base color?›Zinc
Do you want to use CSS variables for colors?›yes
4
Add components
That is it. You can now add any Spectrum UI component with one command. Here is an example for the Accordion.
Login to view commandCreate a free account to access the install command
The code lands in your project, so you can import it like any of your own components.
import { Accordion } from "@/components/ui/accordion";

Next steps