shadcn-ui-blocks

Two adults, one address, separate logins and wishlists, shared history by consent, one membership.

A shared household wishlist with an avatar stack above a two column card grid where each item carries its adder avatar, reason, and duplicate flag.

A card that lifts, scales, or shades when the pointer moves over it. Use it for clickable tiles in a gallery, menu, or dashboard to signal they react.

A six-tile work grid with a permanently revealed overlay strip naming the project and role on each thumbnail, plus static kind and year captions below.

A card that hides extra text or actions until hover uncovers them. Use it for portfolio tiles or features where the cover stays clean until needed.

A project card rendered in its revealed state as a blueprint, showing the name, role, and arrow in an overlay strip with an outcome caption and year below the image.

A badge that grows slightly when the pointer rests on it. Use it for interactive tags or filters where a touch of feedback invites a quick click.

Four numbered cards each naming a stage title, what happens, and the concrete artifact the client receives at the close of that stage.

The four attribution mechanics written out, including the two partner collision case.

The complaints route in three plain steps, plus the quarterly ledger of every complaint received and what each one changed.

One repair taught in four numbered steps with the bail out point marked.

A business model section splitting a labeled revenue mix with hairline percentage bars beside a ruled list of three funding facts.

The three gates every AI draft passes, model, checks, human, with no autopilot setting.

A badge that pairs a small icon with a label for instant meaning. Use it to tag categories, statuses, or actions where text alone reads slowly.

A centered header over a hairline divided three by two grid of six benefits, each with an icon tile, one line title, and two line copy.

A breadcrumb pairing each link with a leading icon. Helps users scan the path at a glance across sections like home, docs, billing, and settings.

A card led by a single icon above a short title and blurb. Use it for feature grids, service lists, or steps where a glyph anchors each point made.

A collapsible row with a chevron icon that rotates as the panel opens and closes. Use it in menus where a clear visual cue tells readers it expands.

A carousel rotating through icon features one slide at a time. Highlights a long list of capabilities without crowding the page or overwhelming readers.

Centered heading over a three column grid of six icon led feature blurbs.

A compact list pairing small icons with guarantee statements like free shipping and easy returns. Fits neatly in a sidebar or below the buy section.

A list of services where each row pairs an icon with a title and one line of supporting text. Communicates your capabilities at a quick glance.

Six features as inline icons, bold names, and single sentences, no cards.

Compact alerts that pair a status icon with a short message and no title. Use for quick inline feedback where space is tight and tone is clear.

Pagination built from chevron icons for previous and next, with no page numbers. Keeps mobile toolbars and image viewers clean when only direction matters.

A centered strip of brand-icon links for GitHub, LinkedIn, X, and Instagram with accessible labels and hover transitions.

A services grid of four cards each with a lucide icon, a service name, and one sentence naming what is included and what is not.

The icon only rail with aria labels, maximum width left for dense tool content.

A grid of stat cards pairing an icon with a bold number and label. Surfaces growth figures and key results to build trust on a marketing page.

A row of icons that reveal a short tooltip on hover. Packs many features into a small space while keeping extra detail one cursor away.

Tabs that pair a small icon with each label so options read at a glance. Good for navigation menus and toolbars where space is tight and clarity matters.

Category tabs marked with icons that filter the features shown below. Helps visitors jump straight to the feature set that matches their needs.

Two rows of gradient icon tiles above a centered heading, one line promise, and a ghost pill CTA.

A vertical timeline with an icon at each step. Walks visitors through a process or product journey in clear order, one milestone after another.

A gradient lead headline over two equal isometric cards: a backlog sorted into stacked lanes and cubes converging on one focused point.

A split hero with a product image on one side and a signup form on the other. Balances visual proof with a clear path to start using the product.

A promo with copy on one side and a product image alongside it. Pairs your offer with a visual so shoppers see exactly what is on sale right now.

A hero with a rotating image carousel next to a headline and CTA. Shows several product shots or screens at the top of a landing page in turn.

Static crop tool blueprint with a Placeholder canvas, rule of thirds grid, corner handles, aspect ratio chips, and apply and cancel actions.

A product image dotted with clickable hotspots that reveal each feature in place. Perfect for showing exactly where a capability lives on the item.

An FAQ section with a supporting illustration beside the question list. Adds visual context and warmth to a help area while answers stay easy to read.

A project card showing two or three Placeholder images layered at offsets to suggest depth, with the project name and role below.

A hero placing a product image alongside short customer reviews and a CTA. Pairs your pitch with proof to win trust on a landing page right away.

A call to action that sets an image beside a headline, body copy, and button. Use it to show a product shot while inviting the visitor to act.

An edge to edge gallery with large visuals and smooth motion. Use it to surround visitors in your photos or brand imagery on a campaign page.

A full bleed product page with edge to edge imagery, floating details, and a sticky buy bar. Best for premium goods that sell on visual impact.

Oversized counters that animate upward as the section scrolls into view. Use it to make reach, users, or revenue feel bold and immediate to readers.

An outcome figures block showing four measured results from real client work, each with a context line, methodology note, and client attribution.