The AI code editor, rebuilt with your design tokens.

A showcase of the Cursor design language — a warm editorial canvas, a single brand voltage, hairline depth and the signature AI-timeline pastels. Built entirely on theme tokens, so it adapts to whatever preset you pick from the customizer.

Agent timeline

Watch the agent work

Five pastel stages mark every step the agent takes. This is Cursor's most recognizable visual — scoped to in-product timelines.

ThinkingPlanning the change across 3 files…

ReadingReading app/(app)/examples/cursor/page.tsx

Greppinggrep -rn "useActiveTheme" components/

EditingApplying diff to lib/themes.ts

DoneAll checks passed · 0 errors

In product

A familiar editor

themes.tspage.tsx

Explorer▸ app▸ components▸ lib fonts.ts themes.ts utils.ts

// Cursor theme — warm cream + a single orange voltage
export const theme = {
  name: "cursor",
  primary: "#f54e00", // Cursor Orange
  canvas: "#f7f7f4",
  ink: "#26251e",
}

Agent

Make the primary action use Cursor Orange.

ReadingEditingDone

Updated --primary and the ring token in themes.ts.

⌥ mainTypeScriptLn 4, Col 18UTF-8

Features

Built to make you fast

Tab, tab, tab

Cursor predicts your next edit across the whole file and lets you breeze through changes by pressing tab.

Knows your codebase

Answer questions and pull references from across your codebase — and the libraries you depend on.

Edit in natural language

Describe the change you want in plain English. Cursor writes the diff and you review it inline.

Pricing

Simple, scarce, orange

Hobby

FreeFor getting started

2-week Pro trial
Limited agent requests
Limited tab completions

Pro

Popular

$20Per month

Unlimited agent requests
Unlimited tab completions
Max-context windows
Background agents

Business

$40Per user / month

Everything in Pro
Org-wide privacy mode
Centralized billing
Admin dashboard & SSO

Install

$ npx getdesign@latest add cursor

EditorialHairline depthJetBrains Mono8px radius

Stay in the loop

Forms inherit the active radius and field shape. Cursor keeps the accent scarce — a single orange voltage.

Try the Cursor theme now

Open the customizer and pick the Cursor preset to apply this whole palette in one click.