Pieces(1076)

Compact, self-contained widgets that behave like assets. Drop them into any block, card, or page to add a small touch of polish without rewriting the surrounding UI.

1function render(items) {
2  items.forEach(draw);
3}
Matching bracket on line 3

Bracket Match

Three-line snippet with the matching opening and closing brackets highlighted in primary.

--primary:  #f43f5e;
--accent:  #8b5cf6;
--surface:  #0ea5e9;

Color Preview

CSS lines with inline color swatch squares next to each hex value.

col guide80
const message = `Hello`;
const longer = `Shipping the biggest onboarding upgrade yet`;
const wrapped = items.map((i) => i.name).join(', ') + '!'

Ruler Guide

Editor panel with a rose vertical column-limit ruler and numbered code lines behind it.

Switch branch…
  • feat/onboarding
  • main
  • feat/ai-suggest↑3
  • chore/cleanup

Branch Switcher

Branch picker popover with search, a list of branches, ahead counts, and an emerald check on the current one.

button.tsxSaved 3s ago

Save Indicator

Pill with filename and a state glyph: emerald check for saved, sky dot for dirty.

function greet(name: string)

Code Lens

Action row above a function signature showing references, implementations, and inline commands.

/\b\w+@\w+\.com\b/gi
12

Regex Input

Regex input with slashes, violet flags, and a tabular match-count pill on the right.

const greet = (name: string) =>Ayşe·3d ago·a1b2c3d
  `Merhaba, ${name}!`;Merve·today·9f0e4c2
 Ayşe·3d ago·a1b2c3d

Git Blame

Code lines with inline blame showing author, relative time, and short commit hash to the right.

Ship production-ready components in a weekend.
27 chars·3 words

Selection Counter

Text with a primary-tinted highlight and a floating dark pill showing character and word counts.

Dashboardrender()if (isReady)
    // hidden lines…
    const ready = useReady();
    if (!ready) return null;

Sticky Header

Scope breadcrumb pinned above a code snippet, showing the current class, method, and block.

greet()
greet(name: string, locale: Locale): string
Greet the user with a localized message.

Parameter Hints

Function call line with a caret plus a signature popover underneath. The current parameter underlines in primary.

3 cursors
const name = 'Ayşe';
const role = 'design';
const team = 'core';

Multi Cursor

Stacked code lines each with a primary-tinted blinking caret at the same column plus a header count.

for (let $1:i = 0; $1 < $2:arr.length; $1++) {}
Tab throughTab

Snippet Placeholders

Code template with dashed-outline tab stops. Active placeholder tints primary, others stay muted.

const total = items.reduce(sum, i) => sum + i.price);
Expected 2 arguments, but got 1.ts(2554)

Problem Marker

Code line with a rose wavy underline on the offending token above an alert card with message and source code.

return greet(name);
Ayşe

Collab Cursor

Code line with a teammate's blinking caret tinted by tone and a name tag floating above it.

Outline
  • Dashboard
  • constructor
  • state
  • render
  • computeStats

Outline Panel

Document outline with colored kind tiles for class, function, method, and prop. Depth-indented with an active row.

onboarding3/12
activation

Find & Replace

Two-row editor find bar with match counter, case/regex toggles, prev/next, replace, and replace-all.

Launch Checklist

Ship with confidence by running through the five-point review.

  • Verify preview URL
  • Run smoke suite
  • Tag the release
pnpm release

Markdown Preview

Rendered markdown mini card with a heading, lede paragraph, bullet list, and inline code chip.

format
  • Format DocumentEditor
  • Format SelectionEditor
  • Reveal in File ExplorerFile

Command Palette

Command palette card with a search bar, ranked results, hint captions, and kbd shortcut pills.

AI Suggestion
const greet = (name: string) => `Hello, ${name}!`;

Inline Suggestion

AI Suggestion caption above a code line with a solid prefix, italic muted ghost text, and a blinking caret.

const msg = greet("Beste");
function greet(name: string): string

Returns a localized greeting for the given name.

@/lib/greet.ts

Hover Popover

Wavy-underlined symbol above a type-hover card showing signature, one-line description, and source path.

index.tsx
button.tsx
card.tsx
theme.css

Editor Tab Bar

Row of filename tabs with active styling. Dirty tabs show a sky dot in place of the close button.

File Tree

Nested file explorer with folder chevrons, amber folder icons, and a highlighted active file.

button.tsx
export function Button({ label }) {
  return <button>{label}</button>;
  return <button className="btn">{label}</button>;
}

Diff View

Unified diff with tinted add and remove rows, line numbers, and +/− prefix column.

Markdown version