Documentation

Install anything, anywhere.

Every Scalar UI component is plain source code you own. Browse and preview freely; App UI is free to install, and everything else unlocks with a free account through the channel that fits your workflow.

Introduction

Components live in components/scalar-ui/ and import a tiny cn() helper from @/lib/utils. Animations use motion and icons use lucide-react. There is no Scalar UI runtime package — once installed, the code is yours.

Requirements

• React 18 or 19 with TypeScript
• Tailwind CSS v4
• A path alias for @/ (Next.js, Vite and Remix templates ship one)
• For members-only designs, a personal API token for CLI, shadcn and MCP — create one on your account page. Free App UI components need none (see App UI installation).

CLI

Free App UI components install without an account. For everything else, authenticate once; the token is stored in ~/.scalar-ui/config.json with owner-only permissions.

npx scalar-ui login --token slk_your_token --url https://scalarui.com

Add one or more components. Dependencies are installed with your project’s package manager.

npx scalar-ui add shimmer-button pricing-section

# options
npx scalar-ui add aurora-background --dir src/components/ui --no-install --overwrite

Discover what’s available:

npx scalar-ui list
npx scalar-ui search pricing
npx scalar-ui whoami

Per-project defaults can live in scalar-ui.json:

{
  "dir": "src/components/scalar-ui",
  "utils": "src/lib/utils.ts"
}

shadcn registry

Scalar UI serves an authenticated shadcn registry. Add it to your components.json:

{
  "registries": {
    "@scalar-ui": {
      "url": "https://scalarui.com/r/{name}.json",
      "headers": {
        "Authorization": "Bearer ${SCALAR_TOKEN}"
      }
    }
  }
}

export SCALAR_TOKEN=slk_your_token
npx shadcn@latest add @scalar-ui/feature-tabs

Free App UI components need no registry entry or token; install them straight from their URL:

npx shadcn@latest add https://scalarui.com/r/accordion.json

MCP server

The @scalardesign/mcp server lets AI editors search the library and fetch real source. It exposes four tools: search_components, get_component, list_categories and get_prompt.

Claude Code

claude mcp add scalar-ui \
  -e SCALAR_TOKEN=slk_your_token \
  -e SCALAR_URL=https://scalarui.com \
  -- npx -y @scalardesign/mcp

Cursor, Windsurf & others

{
  "mcpServers": {
    "scalar-ui": {
      "command": "npx",
      "args": [
        "-y",
        "@scalardesign/mcp"
      ],
      "env": {
        "SCALAR_TOKEN": "slk_your_token",
        "SCALAR_URL": "https://scalarui.com"
      }
    }
  }
}

Then just ask — “Add Scalar UI’s pricing section to the landing page and match our brand colours.”

Manual install

Install the shared dependencies and add the helper:

npm install motion lucide-react clsx tailwind-merge

// lib/utils.ts
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

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

Then copy a component’s source from its Code tab.

HTTP API

All endpoints accept Authorization: Bearer <token> or a browser session.