Introduction

What is Visor?

Visor is a two-layer design system distribution model:

1. Components → Registry (copy-and-own). Run npx visor add button and the source files are copied directly into your project. No lock-in, full control.

2. Tokens → npm package (@loworbitstudio/visor-core). The only npm-distributed piece. CSS custom properties that all components reference. Updates propagate automatically via npm update.

Why this model?

You can edit components without forking. The "own your components" philosophy means your design system works for you — not the other way around. Shared tokens keep design consistency effortless across every project.

Design System Architecture

Visor's token system follows a 3-tier architecture:

All components reference CSS custom properties, never hard-coded values. Themes are distributable CSS variable sets shipped via @loworbitstudio/visor-core.

Getting Started

One command. Runnable Next.js app. Borealis-native.

In an empty directory, run:

npx @loworbitstudio/visor init --template nextjs

That single command scaffolds a complete, runnable Next.js App Router project with:

• package.json plus @loworbitstudio/visor-core and @loworbitstudio/visor-theme-engine already installed
• app/layout.tsx wired with FOWT prevention and globals.css import
• app/globals.css generated from .visor.yaml via the Next.js adapter
• .lo/borealis.json stamp with the Visor version that initialized the project

Then start the dev server:

cd my-app && npm run dev

Add your first component:

npx visor add button

That's it. The component source lands in your project and you own it.

Heads up: --template nextjs only scaffolds into empty directories. For an existing app, use Manual Setup below.

Manual setup (non-Next.js or retrofit)

For non-Next.js projects, or to retrofit Visor into an existing app:

npx @loworbitstudio/visor init

Install the token package:

npm install @loworbitstudio/visor-core

Then import it in your app's root CSS:

@import '@loworbitstudio/visor-core';

Then add a component:

npx visor add button

Browse the Components section to see everything available.

Available themes

The token package ships light and dark themes. Creative reference themes used in the docs site (Space, ENTR, Veronica, etc.) are not distributed via the token package — copy the relevant CSS file into your project to use them. See Theming for details.