Bun is a fast JavaScript
runtime, bundler & package manager

Bun is a fast, incredibly capable all-in-one toolkit for JavaScript and TypeScript apps — runtime, bundler, test runner and package manager in a single binary.

Linux & macOS Windows
curl -fsSL https://bun.sh/install | bash
Install time in milliseconds · one binary, no dependencies

Four tools, one toolkit

Bundling 10,000 React components

Bundler Express Test Runner Package Manager
bun0.18s
esbuild0.41s
Rspack0.74s
Vite1.02s
webpack1.28s
Build time in milliseconds · lower is better

JavaScript Runtime

Runs TypeScript and JSX out of the box, with Node compatibility built in.

Package Manager

Installs dependencies dramatically faster than npm, yarn or pnpm.

Test Runner

A Jest-compatible runner with snapshots, mocks and coverage.

Bundler

Bundles for the browser and the server from the same binary.

bun — install
$ bun install
bun install v1.3.14

 + react@19.0.0
 + react-dom@19.0.0
 + typescript@5.7.2 (dev)

 412 packages installed [89.00ms]

Keycap bevels, tab-topped panels

Primary · 44px · 8px · 18/500 — with the keycap bevel
Pill 48px / 9999px · brand outline 50px / 8px · neutral outline 61px / 5px with a 2px border
Platform tabs · 42px · 6px 6px 0 0 — active pink, inactive with a 2px border
Linux & macOS Windows
Tool tabs · 59px · 7px 7px 0 0 — active keeps the panel fill, only the label turns pink
Bundler Express Test Runner
Benchmark bar tints — 10-20% alpha fills, never UI status colours
green .20 red .20 yellow .20 blue .10 pink .20 white .06
Install line in field position — default and focus (composed, not measured)
curl -fsSL https://bun.sh/install | bashCopy
curl -fsSL https://bun.sh/install | bashCopy

The tab-topped panel is the structural signature — switchers have only their top corners rounded and sit flush on the panel beneath, and the active tool tab keeps the panel fill while switching only its label to pink. Buttons carry a keycap bevel: rgb(40,45,85) 0 -2px 0 inset, rgb(81,87,125) 0 0 1px 1px inset. Transition timings resolved only to generic values and are not captured. No form fields are exposed anywhere on this surface — the copyable install line is the only field-shaped control — so input fills, heights, placeholder colours and focus rings could not be measured. The pair above is therefore composed rather than measured, and borrows only captured tokens: the shell takes the panel fill #282a36, the primary button’s 44px height, 8px radius and rgba(255,255,255,.16) border, and the 0 1px 2px rgba(0,0,0,.05) subtle shadow; the text is the install line in JetBrains Mono 16px at the caption grey #9ca3af. Since focus was never captured, the focus state is derived — it steps the surface ladder one rung to #3b3f4b and makes the page’s own keycap bevel visible so its rgb(81,87,125) 0 0 1px 1px inset ring stands in for a focus ring, lifts the text to #fbcfe8, and sets the caret in brand pink #f472b6. Treat both states as a placeholder for a real capture, not as measured values.

system-ui, pushed to 800

Hero h1 · system-ui · 53.33/53.33 · 800 · normalBun is a fast runtime
Section h2 · system-ui · 48/48 · 800 · #fbcfe8Four tools, one toolkit
Sub-headline h2 · system-ui · 24/33 · 500 · #d1d5dbBundling 10,000 React components
Card h3 · system-ui · 24/32 · 700 · #ffffffJavaScript Runtime
Lead paragraph · system-ui · 20.8/31.2 · 400A fast, incredibly capable all-in-one toolkit.
Emphasis paragraph · system-ui · 18.67/28 · 600 · #e5e7ebBun is joining Anthropic
Install line · system-ui · 20/28 · 600 · #ffffffInstall Bun v1.3.14
Caption · system-ui · 16/24 · 400 · #9ca3afBuild time in milliseconds
Code · JetBrains Mono · 13/20 · 400bun install

One pink, a full gray ramp

Brand
pink#f472b6
pink-tint#fbcfe8
blue#00a6e1
orange#f89b4b
orange-light#d4d3d2
link-hover#a03939
dark-borderrgba(200,200,25,.2)
Gray ramp (950 → 50)
black#0b0a08
gray-950#0d0e11
gray-900#14151a
gray-800#282a36
dark-gray#282a35
gray-700#3b3f4b
gray-600#4f5666
gray-500#6b7280
gray-400#9ca3af
gray-300#d1d5db
gray-200#e5e7eb
gray-100#f3f4f6
gray-50#f9fafb
Published purple ramp — did not appear in captured chrome
purple-50#f3e8f9
purple-100#e1d0f2
purple-200#cfc8ec
purple-300#bdb1e5
purple-400#ab99de
purple-500#9982d8
purple-600#876ad1
purple-700#7553cb
purple-800#633bc4
purple-900#5122bd
Benchmark tints — bar fills only
bench-green#23c35f
bench-red#f04646
bench-blue#3b80f5
bench-yellow#ebb40a
bench-pink#eb469b
bench-whitergba(255,255,255,.06)

Bevel, hairline, ladder

3px
4px
5px
6px
8px button
30px
40px
9999px pill
6px 6px 0 0 tab
7px 7px 0 0 tab
keycap — rgb(40,45,85) 0 -2px 0 inset + rgb(81,87,125) 0 0 1px 1px inset
panel — 0 10px 15px -3px .1 / 0 4px 6px -2px .05
subtle — 0 1px 2px 0 rgba(0,0,0,.05)
hairline — rgb(80,80,80) -1px -1px 0 0
slate −26.5deg
pink wash .03
panel scrim
framework orange
framework magenta

Depth is bevel and hairline over the #0d0e11 → #282a36 → #3b3f4b ladder. The orange and magenta gradients belong to third-party framework cards, not to Bun’s own chrome. No WebGL, canvas, backdrop-filter or grain. Motion values were not captured. Breakpoints are published at 600px and 900px.