Pieces942

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.

313–336 of 942

40const users = load();
41for (const user of users) {12×
42  render(user);
43}

Breakpoint Gutter

editor41

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

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

Error Lens

editor42

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

Call stack

renderListlist.tsx:42
Dashboarddashboard.tsx:14
Appapp.tsx:8

Debugger Panel

editor43

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

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

Whitespace Markers

editor44

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

Build finished

2.4s·128 KB gzip

Build Output

editor45

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

Feature177 Content#feature177

Heading

No tutorials needed.

Description

If you can order food online, you can build a website with Beste.

Content Panel

editor46

Side-panel content editor with a header chip row, locale and history pills, and stacked rich-text fields for heading and description.

Your page looks empty

Start by adding your first block.

Empty Page

editor47

Centered editor placeholder with a soft icon tile, headline, hint line, and a recolorable call-to-action pill.

Website URLs

https://beste.co

Domain verified

Unpublished Changes

You have changes that are not yet published

Publish Panel

editor48

Compact deploy card pairing a live URL row, domain verification badge, unpublished-change hint, and a recolorable publish button.

24 lessons

Design systems for shipping teams

Beste Sözen6h 42m

58%

Course Card

education1

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

Composing tokens with Tailwind18 min

Lesson Row

education2

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

58%

React performance14 of 24 lessons completedOn track

Course Progress

education3

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

12:48

Chapter 4 · PerformanceRefactoring a big list into virtualized rows

Video Lesson

education4

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

Typography systems3 lessons · 34 min

01Choosing a type scale9:12

02Vertical rhythm in the wild14:30

03Pairing display with body11:05

Module Accordion

education5

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

Full-stack TypeScript · Spring cohort

Students12,480

Rating4.8

UpdatedLast week

Enrollment Stats

education6

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

Your learning path

Foundations

Patterns & hooks

Performance tuning

Shipping at scale

Curriculum Outline

education7

Vertical learning path with done, current, and locked steps connected by a colored rail.

Continue learningMemoizing expensive renders7 min left · Chapter 4

Continue Learning

education8

Resume-the-lesson banner with a play tile, eyebrow label, title, time remaining, and a Resume button.

14-day streakShow up tomorrow to keep it alive.

Learning Streak

education9

Streak card with a flame badge, seven-day dot grid, and an encouraging caption underneath.

TypeScript4,320 / 5,000 XP

Lv 7

680 XP to Lv 8

Skill Level

education10

Skill card with a violet level badge, XP numerator over denominator, and a gradient progress track.

Question 3 / 10

Which hook schedules an effect after the DOM is painted?

Quiz Question

education11

Multiple-choice card with a progress bar in the header, stem text, and four lettered option rows.

You passed

8/ 10

80% · Passing mark 7/10Finished in 12:42

Quiz Result

education12

Quiz outcome card with a trophy tile, pass or fail tint, score fraction, percent, and elapsed time.

Certificate of completionBeste Sözenhas completed the courseAdvanced React Performance

Issued Apr 23, 2026Beste Academy

BSTE-CRT-4K91-ZN12

Certificate

education13

Amber-trimmed completion certificate with an award medallion, italic recipient line, and credential ID.

Graded

Essay · The ethics of automation92 / 100Compelling thesis, strong citations. Tighten the conclusion.

Grade Card

education14

Graded assignment card with a color-tinted letter tile, score fraction, and a clipped feedback excerpt.

CS 401 · Advanced React

Submitted

Project 2 · State management patterns

Due Apr 30, 23:593 files

Assignment Card

education15

Course assignment card with a violet file tile, status pill, due date, and attachment count footer.

Noor AhmedStudent · Cohort 12

Resolved

In lesson 6, the dependency array skips the `setCount` setter. Isn't it a stale closure risk?

4 replies12

Discussion Thread

education16

Student Q&A card with an avatar header, resolved pill, clipped question body, and reply and like counts.