Pieces/Shapes(79)

Shapes pieces from Beste UI, drop-in widgets built with shadcn/ui and Tailwind CSS.

Feature Grid

Three columns, each with an icon tile, a heading line, and two body lines.

Hero Section

Two heading bars, supporting body lines, and a primary plus outlined CTA pair.

Audio Waveform

Twelve thin vertical bars centered like an equalizer, with played bars in foreground.

Breadcrumb

Three crumb segments separated by chevrons, the last one in foreground tone.

Modal Dialog

Card on a dimmed backdrop with a title, two text lines, and confirm-cancel buttons.

Pagination Dots

Five carousel dots with the active one stretched into a pill.

Tab Bar

Three tab labels above a divider, with a foreground indicator under the active one.

Date Picker

Mini month grid with a weekday strip and one day cell selected.

Search Bar

Pill-shaped input with a magnifier icon and a placeholder line.

Heatmap Grid

Seven-by-five activity grid shading from muted to deep emerald.

Step Indicator

Four nodes connected by lines, two complete, the third active, the last pending.

Browser Window

Mini browser frame with traffic-light dots and two content lines.

Lightning Bolt

A jagged amber bolt traced from a single zigzag polygon.

Notification Card

Avatar circle, two stacked content lines, and a rose unread dot.

Distribution Bar

Three-segment stacked bar with a dotted legend underneath.

Stat Card

Compact KPI tile with label, value, trend dot, and a sparkline trail.

Plus Cross

Two intersecting rounded bars forming a solid plus mark.

Wave Line

A smooth sine wave drawn as three connected arches.

Tree Diagram

A filled parent node branches into two outlined children.

Avatar Stack

Three overlapping circles separated by card-colored rings.

Tag Pills

Three rounded tag pills in amber, emerald, and outline tones.

Toggle Pair

Two stacked switches, the upper one on, the lower one off.

Donut Ring

Muted ring with a foreground arc covering roughly a quarter turn.

Bar Chart

Five vertical bars with one taller emerald bar marking the peak.

Markdown version