shadcn-ui-blocks

Numbered steps that walk through how you work, from first contact to final delivery. Use it on an about or services page to set expectations.

A numbered three step outline of the reply, intro call, and written proposal sits beside a name plus email plus message form.

A two-column services block that maps each service to its engagement phase so clients see the flow before they reach out.

Two engagement timelines side by side, a typical studio process against mine, with five numbered steps, timing labels, and an honest closing note.

A heading and intro above a two column comparison table, contrasting the usual studio approach with how I work across five ruled aspect rows.

A five-question process FAQ covering revision rounds, how to give feedback, handoff deliverables, source file ownership, and how design disagreements are handled.

A section that lists the principles guiding how you tackle each project. Use it to state the beliefs behind your method alongside short explanations.

A two-column block with four services on the left and four numbered process phases on the right showing both the offer and the method.

A hero with a first person intro, lede, and two actions above a numbered three step strip showing how an engagement runs end to end.

A process section laying the rollout out as a five row table with stage, description, owner badge, timeline, and deliverable columns.

A numbered sequence of project steps each with a large step number, title, duration, paragraph, and a Placeholder showing the artefact.

Four stage cards each split into a process description on the left and the named artifact it produces on the right, from the brief to the spec.

Seven procurement artifacts with availability and turnaround, the vendor packet in rows.

A two column bundle offer: included product tiles with struck prices beside a pricing column showing the combined value, bundle price, and saving.

Care rituals as accordion answers beside a sticky image, prevention as content.

A hero with a swipeable product carousel beside a headline and CTA. Showcases a range of items or plans at the top of an ecommerce landing page.

A three-tile category index for a creator shop showing a Placeholder, category name, and product count per format.

A comparison table for three packs, with prices as column headers, feature rows mixing counts, text, and check marks, and a buy button row.

A hero with a product customizer form for options like size and color. Lets shoppers configure their choice and preview it before checkout.

A split single-product view with a Placeholder image, price, plain-language description, an itemised includes list, and a buy action.

A centered header over three stat cards for standing product giveaway programs, each with a big count, terms, and eligibility link.

A split store hero pairing a three step finder promise and CTAs with a live first question panel of radio options and a progress bar.

A glossary filter field, an A to Z index strip, and letter sections listing terms with definitions, area tags, and cross links.

A six-card shop grid listing products with a Placeholder thumbnail, name, from-price, and a format chip for each item.

A complete Modern SaaS landing page that runs from hero through features, proof, and plans into a closing call to action and footer.

A dark launch card pairing your announcement with an app window mockup.

A dense shop list inside one bordered panel, each row with a thumbnail, product name, one line description, format chip, price, and a view action.

A product card with an image panel, name, price, and star rating.

Product detail with sustainability panel, photo review wall, care kit attach, and shipping protection.

A recall card naming the valve fault, affected batch codes as mono pills, the unaffected batches, and return label actions.

Serial plus email attaches the guarantee to the product itself, with three things registration unlocks.

Delivered items waiting on a review beside published ones with stars, edit and delete in your hands, no coupons for praise.

A split header over an app window mockup: a triage inbox where incoming feedback is auto-routed into labeled, assigned issues. Shows the product in action.

Inline product-tour step blueprint with a highlighted target, coach-mark card, step 2 of 5 badge, and progress dots.

The demo video chaptered, jump straight to the rain test or the pockets.

A ruled list of skills with an honest level word per row and a one-sentence note that qualifies what the level includes and what it does not.

Profile setup progress card with a 70% bar, three remaining steps with quick-action buttons, and completed steps struck through.

Profile header band with avatar, name, role, bio, fact chips, and Message and Edit profile actions.

A centered profile card with an avatar, name, role, and link chips.

Profile panel with avatar upload, name and email inputs, a read-only timezone row, and a save bar.

Six pre application questions in an accordion beside the heading, with a direct email card promising a one day human reply.

Two side by side rule cards listing allowed and prohibited promotion tactics with reasons, closed by a plain enforcement note.

Labeled bars that fill to a percentage to track adoption or completion. Use it on a status page or report to show how far each goal has come.

Onboarding as a segmented meter frozen mid journey with honest time labels per step.

A breadcrumb with a fill that tracks how far a user has moved. Shows completion across multi step forms, checkout, and guided account onboarding.

A card pairing a progress bar with a label and value reading. Use it to show task completion, goals, or usage limits inside a dashboard or account view.

Stat card with a centered inline SVG progress ring showing a single percentage, a used of total sub-line, and a plan limit footer row.

A hero with a step progress tracker next to a headline and CTA. Use it to show a setup flow or journey at the top of an onboarding landing page.