Blocks you can paste into anything.

The authenticated-product header: breadcrumb trail, a search field bound to the / hotkey, a notification bell with an unread count, and an avatar. The hotkey stands down while you are already typing somewhere else.

A destructive-action modal with the accessibility work done: focus moves in on open and returns to the trigger on close, Escape and backdrop-click dismiss, background scroll is locked, and Tab is trapped inside.

Two months side by side with a preset rail (today, last week, this year…), a live hover preview while picking the end date, event dots, and editable start and end fields. Nothing applies until Apply; Cancel reverts. Arrow keys move through the days.

A vertical icon rail that magnifies like the macOS Dock: the icon under the pointer grows to 1.5x, its neighbours grow less, and the rail pushes apart to make room instead of overlapping. Each icon carries a tooltip and an optional status dot. Motion is dropped under prefers-reduced-motion and on touch.

The full marketing footer: a brand blurb, three link columns, and a legal row split off below a rule. Collapses to two columns on tablet and one on phones, with the legal row stacking rather than wrapping raggedly.

One row: copyright on the left, a short link set on the right, stacking and centring on phones. What a small product or a docs site actually needs instead of a four-column wall.

A sign-in page split in two: email and password with a show/hide toggle, Google and Apple buttons, and a register link on the left; a rotating product showcase on the right that hides on small screens. Validation runs on submit, not on every keystroke.

An anchored dropdown that closes on outside click and Escape, and flips above the trigger when there is no room below. Arrow keys move through items, so it works without a mouse.

A sticky marketing header with a translucent blur, inline nav from the md breakpoint up, and a real disclosure menu below it. The mobile panel is toggled by a button that reports its own state, not a bare icon.

A toast carrying a real action and a countdown — the pattern that replaces a confirmation dialog for reversible deletes. The timer pauses on hover and focus, so it cannot expire while someone is reaching for Undo.

The four notification tones — success, error, warning, info — stacked as they would appear after several events. Position-agnostic by default so it previews inline; pass floating to pin it to the viewport corner.

iOS-style scroll wheels for month, day, year, hour, minute and AM/PM. Each column snaps to a row, tilts and fades away from the centre, and clamps the day when the month gets shorter. Scroll, drag, click a row, or use the arrow keys.

A closing conversion band: heading, one line of copy, and a primary and secondary action. Drops in at the bottom of a landing page above the footer.

Three side-by-side value propositions with no borders or cards — the lightest way to say what a product stands for. Collapses to a single column below the md breakpoint.

A faceted-filter side panel that replaces a row of toolbar dropdowns with one button. Selection is lifted to the caller and applied live, so the list updates as boxes are ticked; active choices stay visible as removable chips while the panel is closed.

A centered landing hero with a status pill, a gradient wash, and two calls to action. The wash is pointer-events-none, so it never intercepts a click on the buttons beneath it.

One plan, one price, a checklist of what it includes, and a single call to action. The honest shape for a product that has not split into tiers yet.

A two-column grid of bordered term-and-description cards, with a section header above it. Built on a real <dl>, so each term is announced together with its description.

A linked card with a name, tagline, metadata pills, and an arrow that nudges on hover. Every pill tone is a full literal class string, so Tailwind can actually see it.

Four headline numbers in a row, collapsing to two columns on mobile. Values use tabular-nums so the digits stay aligned when they change.