Install Web

Warlock’s feature installer can add the page layer by itself or resolve the styling layers above it. Run one command: choose the highest layer your app needs.

Goal	Command	What is included
React SSR pages	warlock add web	Web
Utility-first styling	warlock add tailwind	Web + Tailwind CSS v4
shadcn/ui components	warlock add shadcn	Web + Tailwind + shadcn prerequisites

Install the Web layer

warlock add web

The command installs @warlock.js/web, React 19, and the development tooling the connector loads when needed. It also:

• registers the Web connector in warlock.config.ts;
• creates the application-wide page root at src/web/;
• creates root.tsx, the document shell shared by every page;
• creates a UI-only index page with index.setup.ts for policy and registration.

src/web/ is the only page root. A tree such as src/app/blog/web/ is not scanned; organize every page, layout, and page middleware beneath the one project-level src/web/ directory.

The generated starting tree

src/web/
├── index.page.tsx
├── index.setup.ts
├── root.tsx
└── root.setup.ts

The generated index.setup.ts owns page configuration and universal register() setup. root.setup.ts owns root configuration. The UI files contain components; Warlock composes each pair and projects browser-safe registration to the client.

Requirements

• @warlock.js/core
• React and React DOM ^19.0.0 — as of 5.13 the peer range is pinned to React 19 (was "*"), matching what this package is actually built and tested against
• Vite ^8.0.0 and @vitejs/plugin-react ^6.0.0, loaded lazily as development peers (Vite 7 is not supported since 5.36)

You normally do not install those packages one by one; warlock add web records the compatible dependencies and uses the package manager detected for the project. Pass --package-manager npm, yarn, pnpm, or bun when detection is not what you want.

warlock add web --package-manager pnpm

Use --no-install only when a scaffolder will run one package-manager install after several features have been recorded.

Add styling now or later

Both styling features may be added to an existing Web app:

warlock add tailwind
warlock add shadcn

shadcn requires tailwind, and tailwind requires web, so warlock add shadcn is also a valid one-command setup for a new project.

Configure Tailwind and add your first shadcn component →

Next step

Create your first page →