This guide uses logic2b@next, the npm beta channel. next can move: record npx logic2b@next --version when reporting a problem. --registry-version selects registry content, independently of the CLI package version.

Requirements

• React 18+ (React 19 recommended)
• Tailwind CSS v4

Compatibility

Version 1.0.0 has not been released. npm latest still points to the older CLI 0.4.0 and MCP 0.2.0; use next for the current beta packages and registry. Versions below are the ones this documentation was verified against.

1. Install the base dependencies

pnpm add clsx tailwind-merge class-variance-authority radix-ui lucide-react

2. Add the cn() helper

Create src/lib/utils.ts:

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Or install it from the registry:

npx logic2b@next add utils

3. Add the theme tokens

Copy the CSS variables from the Theming page into your global CSS file. Components reference tokens like bg-primary and text-muted-foreground; without them nothing will look right.

4. Add components

npx logic2b@next add button

Or copy the source from any component page — every page has a Code tab with the full source.

For a complete marketing surface, install the composed landing block once:

npx logic2b@next add landing-page-01

The registry resolves its canonical navbar, animated hero, animated feature grid, CTA and footer transitively. Those child items stay independently installable and updateable.

Versioned installs and safe updates

Initialize a project with the CLI to pin the registry release used by the project:

npx logic2b@next init
npx logic2b@next add button card
npx logic2b@next status

init writes an exact logic2b.version to components.json. Every install is also recorded in .logic2b/manifest.json with the resolved registry version, the SHA-256 integrity of each item and its installed files. This makes the inputs reproducible even if a channel later advances.

Presets from /create also carry the icon implementation. Choose Lucide, Tabler, Phosphor or Hugeicons in the studio; init --preset <id> stores that choice as iconLibrary in components.json, and later add/update operations rewrite source imports, npm dependencies and merge snapshots as one unit. Existing preset links created before this option default to Lucide.

Use an exact version, a semver range or a published channel explicitly:

npx logic2b@next add button --registry-version 1.0.0-rc.7
npx logic2b@next status --registry-version next
npx logic2b@next update --registry-version "^1.0.0"

logic2b update only considers items tracked in the install manifest unless you name items explicitly. It performs a three-way merge against the snapshot captured when each file was installed: untouched files advance automatically, local-only edits stay intact, compatible changes merge, and overlapping edits are marked as conflicts for review. Inspect an item’s machine-readable history at /r/changelog/<name>.json before advancing a range.

The source candidate also preserves unresolved conflicts across repeated updates. Tagged markers are tracked in .logic2b/update-conflicts.json; update exits 1 while a conflict or a differing file without its base still needs review. Resolve the source, retaining intended local and upstream changes, then update again. Removing the record is not conflict resolution. Independent edits on adjacent lines can merge without a conflict. These changes describe the current checkout; npm publication remains a separate step.

Using an AI assistant

Every install block on this site has an Agent tab (and the theme studio a Prompt view) with a ready-to-paste prompt for Claude Code, Cursor or Copilot. The prompt bundles the commands above, a no-CLI fallback and a verification checklist, so the assistant can do the whole setup in one go. You can also start from /create: pick a theme, press Get Code and copy the prompt for a new or existing project.

An assistant connected to the logic2b MCP can start from an empty directory without a shell scaffolder. Ask it to use scaffold_plan with a framework (next, vite or astro) and starter (marketing, dashboard or auth). The tool returns the complete project as file writes, including the theme and an optional preset from /create. Pass version as an exact semver, range or channel when the plan must be reproducible; the response includes the resolved version and integrity for every item. For an item-only plan, pass iconLibrary directly to install_plan; complete scaffolds read the same choice from the optional /create preset.

Path aliases

Components import from @/lib/utils and @/components/ui/*. Configure the @ alias in your tsconfig.json and bundler to point at src/.

Agent rules in the source candidate

The current checkout adds managed AGENTS.md and DESIGN.md during init (including templates), add and update. Pass --no-agent-rules to skip them. Existing project instructions outside markers are preserved. Run logic2b rules --format agents,claude,cursor,copilot from the application directory to generate editor formats explicitly. Check --help in an installed CLI first; source availability is not npm publication. See agent integration for merge semantics, host limits and the packaged skill.