horizontal

Drag the handle, or focus it and use the arrow keys.

Explorer
app
page.tsx
layout.tsx
lib
format.ts
package.json
README.md
format.ts
1export function total(lines: Line[]) {
2  return lines.reduce((sum, line) => {
3    return sum + line.price * line.qty;
4  }, 0);
5}
6
7export function label(n: number) {
8  return n === 1 ? "1 item" : `${n} items`;
9}

vertical

format.ts
1export function total(lines: Line[]) {
2  return lines.reduce((sum, line) => {
3    return sum + line.price * line.qty;
4  }, 0);
5}
6
7export function label(n: number) {
8  return n === 1 ? "1 item" : `${n} items`;
9}
Console
  • ready on http://localhost:3000
  • compiled /orders in 212ms
  • compiled /orders/[id] in 148ms
  • GET /orders 200 in 38ms
  • GET /orders/4102 200 in 21ms

handle types

handle: line
Left
Right
handle: bar
Left
Right
handle: grip
Left
Right

variants

variant: default
Left
Right
variant: cards
Left
Right
variant: filled
Left
Right

nested

A vertical group inside a horizontal one.

Explorer
app
page.tsx
layout.tsx
lib
format.ts
package.json
README.md
format.ts
1export function total(lines: Line[]) {
2  return lines.reduce((sum, line) => {
3    return sum + line.price * line.qty;
4  }, 0);
5}
6
7export function label(n: number) {
8  return n === 1 ? "1 item" : `${n} items`;
9}
Console
  • ready on http://localhost:3000
  • compiled /orders in 212ms
  • compiled /orders/[id] in 148ms
  • GET /orders 200 in 38ms
  • GET /orders/4102 200 in 21ms
Inspector
Size
1.2 KB
Lines
9
Language
TypeScript

collapsible

Drag the explorer below its minimum, or use the button. A tab on the edge reopens it.

Explorer
app
page.tsx
layout.tsx
lib
format.ts
package.json
README.md
format.ts
1export function total(lines: Line[]) {
2  return lines.reduce((sum, line) => {
3    return sum + line.price * line.qty;
4  }, 0);
5}
6
7export function label(n: number) {
8  return n === 1 ? "1 item" : `${n} items`;
9}

with indicator

A badge shows the sizes either side of the handle while you drag.

  • Bram OkaforQ3 numbers are inPulled the final figures from finance this morning.
  • Cleo MarshLaunch checklistTwo items left: the pricing page and the changelog.
  • Dara LindqvistCarrier reviewParcelway missed the window twice last week.
  • Eli VanceOnboarding copyRewrote the first three steps, take a look.
Select a thread

persisted sizes

Drag a handle, then reload the page.