Next.js

Step-by-Step configuration for Next.js

Requirement

Before installing Spiral, make sure your project meets the supported Next.js and React requirements.

Prerequisites

Before you start, make sure your project is using:

React: Version 19 or higher.
TypeScript: Optional, but recommended for a better development experience.
Node.js: Version 15 or higher.

If you're not sure, that's okay — the setup command in the next step will warn you if something's missing.

Install Spiral

Open your terminal and run this command

Terminal

npxspiral-ui

This downloads Spiral UI and starts a short setup wizard. You'll see a few questions appear one at a time — just use your arrow keys to pick an answer and press Enter.

Answer the questions

Spiral setup questions

Select your brand color

Blue

Purple

Orange

Custom

Where should we add the token import?

src/app/globals.css

Add the ThemeProvider to your root layout automatically?

Yes

Fonts and icons

Don't worry about fonts and icons in Spiral, We use Inter display & Inter for fonts, Mingcute icon pack and the setup commands adds them for you. there's nothing for you to do here.

That's all!

Use your first component — open any page in your project and add this:

/app/any_page.tsx

import{ Button }from"spiral-ui"

<Button>Get started</Button>