Getting Started

Set up Visor in your project — from zero to first component in under five minutes.

Prerequisites

Node.js 18+ — required by the Visor CLI
npm — the CLI runs via npx, no global install needed

Quick Start (Next.js — one command)

In an empty directory, run:

npx @loworbitstudio/visor init --template nextjs

That single command scaffolds a complete, runnable Next.js App Router project pre-wired with Visor — no second setup step:

What you get	Why it matters
Full `package.json` with `next`, `react`, TypeScript	Run `npm run dev` immediately
`@loworbitstudio/visor-core` + `@loworbitstudio/visor-theme-engine` installed	Tokens and FOWT helpers are already there
`.visor.yaml`	Your theme — edit colors, typography, radius, shadows
`app/globals.css`	Generated from `.visor.yaml` by the Next.js adapter
`app/layout.tsx` with FOWT script + globals.css imported	No flash of wrong theme on hard reload
`.lo/borealis.json`	Stamp recording the Visor version that initialized the project

Then start the dev server:

cd my-app && npm run dev

Heads up: visor init --template nextjs only scaffolds into empty directories — it refuses if package.json already exists. To retrofit an existing app, use the Manual Setup section below.

Customize Your Theme

Edit .visor.yaml with your brand values, then regenerate the CSS:

npx @loworbitstudio/visor theme apply .visor.yaml --adapter nextjs

The generated globals.css contains all CSS custom properties your components need. Every time you change .visor.yaml, re-run theme apply to update.

Add Components

Install components individually or in bulk:

# Single component
npx visor add button

# Multiple components
npx visor add button card input dialog

# Entire category
npx visor add --category form

Components are copied into your project (copy-and-own). You have full edit rights — no lock-in, no runtime dependency.

Add Blocks

Blocks are pre-composed layouts built from Visor components:

npx visor add --block login-form
npx visor add --block admin-dashboard

Dark Mode

Visor's token system includes light and dark mode out of the box. Add the dark class to your root element:

<html className="dark">

Or use a theme provider to toggle dynamically. All components respond to the class automatically — no extra configuration.

Preview Before Installing

Use --dry-run to see what a command would do without writing files:

npx visor add button --dry-run

Manual Setup (non-Next.js)

If you are not using Next.js:

Install the token package:

npm install @loworbitstudio/visor-core

Import tokens in your global CSS:

@import "@loworbitstudio/visor-core";

Initialize the CLI config:

npx @loworbitstudio/visor init

Add components as usual:

npx visor add button

Next Steps

Migration Guide — Retrofit an existing project to Visor
Themes — Learn about the 3-tier token architecture
CLI Reference — Full list of CLI commands
Components — Browse the full component catalog

Getting Started

On this page