Installation

Using React (Vite) instead? Read the React installation guide.

Set up a Next.js project so you can install Algorize UI components with the shadcn CLI.

Framework

Next.js App Router

React

18 or 19

Styling

Tailwind CSS v4

Language

TypeScript or JS

Create a project

Skip this if you already have a Next.js app with Tailwind CSS v4.

--tailwind installs Tailwind and writes globals.css for you. Adding Algorize UI to an app without Tailwind? Set it up first.

Add components

Step 1: Initialize shadcn

Run once per project. It creates components.json and lib/utils.ts (the cn helper every component imports).

npx shadcn@latest init --base radix --preset nova

Algorize UI builds on Radix primitives. If you run init without flags, choose Radix UI when asked. Any preset works — it only sets the starting theme.

Step 2: Register the registry

Run once per project. It lets you install components by name:

npx shadcn@latest registry add @algorize-ui=https://algorize-ui.vercel.app/r/{name}.json

This adds the following to components.json, which you can also write by hand:

Step 3: Pick a theme

Open the Themes page, choose a preset, press Copy Code, and paste it into globals.css below @import "tailwindcss";. Components pick up the colours, radius and fonts from these variables.

Step 4: Add a component

Every component page has its own command:

npx shadcn@latest add @algorize-ui/hero

The CLI writes the source into your project and installs the component's npm packages and any other components it depends on.

Where files land

Components import through the @/ alias, which create-next-app configures for you — keep it in tsconfig.json.

Set up Tailwind CSS

Only needed if your project does not have Tailwind CSS v4 yet.

1. Install the packages

2. Create postcss.config.mjs

3. Import Tailwind in app/globals.css

Keep it the first line. An @import below other rules is silently ignored, and your root layout must import globals.css — otherwise every component renders unstyled.

Upgrading from Tailwind v3? Run npx @tailwindcss/upgrade. Components use v4-only syntax.

Troubleshooting

Components render unstyled

Check that @import "tailwindcss"; is the first line of globals.css, that your root layout imports that file, and that tailwind.css in components.json points at it.

Unknown registry "@algorize-ui"

Run Step 2, or switch the command to URL, which needs no setup.

Cannot find module `@/lib/utils`

Run Step 1, and make sure tsconfig.json has a paths entry for @/*.

Next steps

Quick Start — put a component on screen
All components — browse the library

For anything beyond Algorize UI, see the Next.js, Tailwind CSS and shadcn CLI docs.