Scalar UI by Scalar Design

Interfaces, ready to paste.

213 crafted components, visuals and landing sections. Open any design to inspect it live.

Browse library

Three ways to ship

From browser to codebase in seconds.

Scalar UI CLI

One command drops the source into your project and installs its dependencies.

$ npx scalar-ui login
$ npx scalar-ui add feature-tabs pricing-section
 
✓ components/scalar-ui/feature-tabs.tsx
✓ components/scalar-ui/pricing-section.tsx
✓ installed motion, lucide-react

shadcn registry

Already on shadcn? Add our authenticated registry and install by name.

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

MCP server

Give Claude Code or Cursor direct access. Ask for “a bar chart” and it fetches the real thing.

$ claude mcp add scalar-ui \
    -e SCALAR_TOKEN=slk_… \
    -- npx -y @scalardesign/mcp
 
› search_components “bar chart”
› get_component bar-chart-gradient