shadcn-ui-blocks

The annual impact report as an eight line ledger, including the weakest number.

An impact report card with a title and three stat columns.

Three outcome figures from real client work, each with an attribution note naming the project type and the measurement method so the result does not overstate.

A case study closing section with a four-cell tabular figure strip and a reflection paragraph that names the specific scheduling or process mistake the designer would change.

What migrates from each source tool by data type, with honest partial cells worth reading.

Onboarding import step with CSV dropzone, tool and API source tiles, a dry-run preview promise, and a skip link.

Split section pairing dry run copy and three assurances with a static importer report of counts, review statuses, and estimated run time.

Data portability panel with an export card listing every included data type and an import dropzone with a dry-run promise before any write.

A panel for a running data import with a three step pipeline, a live progress bar, meta rows for timing, and notify or cancel actions.

Post-import report dialog showing created, skipped, and failed row counts with named skip reasons and a download link for the skipped rows.

Watchlist of projects gone quiet showing owner avatar, last event summary, a days idle count, and a nudge action per row.

Feature announcement card with a badge, title, body, illustration slot, primary CTA, and a permanent dismiss action.

The full inbox grouped under Today and Earlier, read rows muted.

Three-pane email inbox composing a folder sidebar, thread list, and message reader with reply controls.

A two column newsletter signup pairing a pitch and labeled email form with a drawn inbox mockup listing five recent issues by subject and date.

Three pane mail shell with a labeled folder sidebar, an unread message list, and a reading pane with triage actions and a reply footer.

Mail navigation sidebar with a Compose button, standard folders with unread counts, and a labeled section of color-coded labels with message counts.

A centered signup block that offers a clear incentive above the email field. Use it to reward visitors who join your list with a discount or guide.

Slim dismissible incident alert bar with the incident start time, a status page link, and a subscribe affordance.

Dated incidents with severity chips, precise impact lines, and postmortem links.

A two column incident retro pairing the story, root cause, and follow up changes with a static minute by minute timeline panel.

A dark incident card with a postmortem chip, timeline rows, and duration.

A heading and lede over four numbered step cards, each pairing a title and description with a time commitment printed in a footer row.

A left aligned header above five numbered phases in a horizontal stepper, each with a time chip and short note, plus a last incident line.

Incident detail card with a resolved header, a four-phase chronological update rail, and a postmortem link at the foot.

An incident update form with a header, a status phase radio group, a message field, component checkboxes, notification switches, and post actions.

A split section pairing a communication promise and three bullet commitments with a live incident feed of phase chips, timestamps, and update text.

Tri state tag filter where each tag cycles from neutral to required to excluded, a summary line, and a demo alert list that responds.

Incoming webhook setup panel with a generated endpoint URL, masked signing secret, accepted event types, and a JSON payload sample.

Audit method card with firm, testers, scope, and totals beside four WCAG principle rows of found and fixed counts, over a retest strip.

A ruled panel of four third party test results, each row naming the issuer, method, verbatim result and date with a report link, plus a fee disclosure.

A numbered list of works with medium and year on the left beside a large preview of the highlighted row with its caption and counter.

A six-tile sector grid showing project counts and example client types per industry to demonstrate breadth without a logo grid.

Median and top decile open rates by industry as grouped shadcn bars with counting rules.

Industry tabs where each panel shows one story card with metrics and a customer quote.

Heading and intro above a two column ruled grid of four cards, each pairing a type badge with an influence title and a lesson.

Highlighted text excerpt with an attached margin thread showing two comments, a reply composer, emoji reactions, and resolve and delete controls.

A slim banner strip: bold prompt and one line support on the left, a single ghost pill action on the right.

A slim call to action that sits within page content, pairing one line of copy with a button. Place it between sections to nudge readers without interrupting.

Profile card where each row shows its saved value with an Edit action that swaps a single row into an input with Save and Cancel.

Projects table with one row in edit mode showing Input and Select cells with save and cancel affordances.

A FAQ block that shows all questions and answers as always-open ruled rows in a two-column grid with no accordion.

A slim bordered subscribe band with a one-line pitch and inline email input designed for mid-page placement between content sections.

A compact callout that slots into running text to point readers at a related file. Use it to surface a download right where it stays relevant.

A single ruled band of four tabular figures with short labels, the slimmest way to surface career numbers without a card grid.

A slim pill shaped strip of four value and label pairs, the lightest proof beat between sections.

Text editor surface showing an AI ghost-text completion with Tab to accept and Esc to dismiss keyboard hints and an authorship notice.

Form showing all three live validation states side by side: a valid field with a checkmark, a checking field with a spinner, and an error field with a corrective message.