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.

Full-stack TypeScript · Spring cohort
Students12,480
Rating4.8
UpdatedLast week

Enrollment Stats

Course metadata strip summarizing student count, star rating, and last updated in a three-column grid.

2
Typography systems3 lessons · 34 min
01Choosing a type scale9:12
02Vertical rhythm in the wild14:30
03Pairing display with body11:05

Module Accordion

Collapsible course module header that reveals a timed lesson list underneath when expanded.

Refactoring a big list · lesson
12:48
Chapter 4 · PerformanceRefactoring a big list into virtualized rows

Video Lesson

Video lesson card with a play thumbnail, duration badge, watched bar, and a chapter eyebrow.

58%
React performance14 of 24 lessons completedOn track

Course Progress

Circular ring showing percent complete next to a course label and a lessons-done caption.

Composing tokens with Tailwind18 min
03

Lesson Row

Single lesson entry with a status glyph on the left, title, duration, and padded index on the right.

24 lessons
Design systems for shipping teams
Beste Sözen6h 42m
58%

Course Card

Course tile with a gradient thumbnail, instructor byline, duration, and an inline progress bar.

Build finished
2.4s·128 KB gzip

Build Output

Build-result banner with an emerald success state showing duration and bundle size, or a rose error state with count.

1function·greet(name)·{
2→return·`Hello,·${name}!`;
3}

Whitespace Markers

Code lines with muted middle-dots for spaces and → glyphs for tabs, revealing indentation.

Call stack
  • renderListlist.tsx:42
  • Dashboarddashboard.tsx:14
  • Appapp.tsx:8

Debugger Panel

Call stack list with function names, source file and line, and an amber current-frame highlight.

const name = user.prfile.name;Property 'prfile' does not exist on type 'User'.

Error Lens

Code line where the offending token gets a colored wavy underline and the diagnostic message renders inline beside it.

const users = load();
for (const user of users) {12×
  render(user);
}

Breakpoint Gutter

Gutter with rose breakpoint dots, an amber-highlighted current line, and a hit-count chip.

const value = user.prfile.name;
  • Rename to 'profile'Preferred
  • Add missing property 'prfile'
  • Disable rule for this line

Quick Fix

Code line with a lightbulb quick-fix tile and a dropdown of fix options. Preferred fix gets an amber tag.

The implmentation ships on Friday.
  • implementation
  • implements
  • implemented

Spell Check

Sentence with a rose wavy underline on a misspelling and a suggestions dropdown below.

12function renderChart(data) {
37}

Code Folding

Expanded open line, a collapsed region button with chevron and line count, and the closing line.

Keybindings
  • Command palette
    ⌘+K
  • Quick open
    ⌘+P
  • Toggle terminal
    ⌃+`
  • Format document
    ⌥+⇧+F

Keymap List

Panel listing editor actions with their kbd shortcut combinations on the right.

Go to line142
of 386

Goto Line

Compact jump-to-line input with a typed value, a blinking caret, and the total line count.

Theme

Theme Switcher

Settings card with a segmented light / dark / system toggle and icon plus label per option.

greetsayHello7 refs
  • greet.ts1
  • app.tsx4
  • welcome.tsx2

Rename Refactor

Preview card with the struck-through old name, the new name, and a list of affected files with ref counts.

:fi
  • :fire:
  • :finish_line:
  • :first_place:
  • :fish:

Emoji Picker

Inline :shortcode typing with an autocomplete dropdown showing emoji previews.

Zen Modemanifesto.md
Exit⌘+K+Z

Zen Mode

Minimal focus card with a focus icon, current filename, and an exit-shortcut reminder.

<<<<<<< CurrentHEAD
const greet = (name) =>  `Hi, ${name}!`;
=======
const greet = (name: string) =>  `Merhaba, ${name}!`;
>>>>>>> Incomingfeat/onboarding

Merge Conflict

Classic conflict block with emerald current section, sky incoming section, and <<< === >>> markers.

import { greet } from './greet';
 
const user = { name: 'Ayşe' };
const msg = greet(user.name);
console.log(msg);
 

Git Gutter

Code lines with colored gutter stripes showing added (emerald), modified (sky), and removed (rose) lines.

1const user = createUser(name: "Ayşe", role: "admin");
nameinlay parameter hints

Inlay Hints

Function call with muted parameter-name chips inlaid before each argument.

1// TODO migrate to server components
2// FIXME handles null state poorly
3// NOTE revisit once design lock lands

TODO Comment

Italic comment lines with colored TODO, FIXME, NOTE, or HACK tags.

Markdown version