shadcn-ui-blocks

A work index that groups project tiles under discipline category headings, each with a scope description and an archive link, so visitors navigate directly to the work type they need.

A client-rendered gallery with category chips that filter image tiles via useState and a live count showing how many images are visible.

The standard category page, a filter rail with result counts beside a rated product grid.

Working sort pills reorder the grid live, bestselling, price, and newest.

Six feature cards, each headed by a distinct mini graphic such as a sparkline, ring, or gauge.

Grouping control with dimension chips for Status, Assignee, and Priority that previews the resulting group headers with per-group counts and mini progress bars.

A six week group program pairing a curriculum list with a cohort card showing start date, schedule, seats left, price, and a reserve action.

Feature usage grouped bar chart comparing this billing period against the previous across six categories with a shared legend.

Four dimensions compared as paired horizontal bars for Acme and a typical alternative.

Updates clustered by month or release so related entries sit together. Good for products with frequent shipping where context across versions matters.

Several collapsible panels stacked together so readers open one section at a time. Good for settings pages where related options sit in separate groups.

An endpoint latency table with a two tier header spanning grouped metric columns for production and staging, split by vertical rules down the body.

A FAQ block that organizes questions into three topic groups (Process, Pricing, Working together) each rendered as a collapsible accordion.

Global search panel in its open state with a query input, results grouped into Projects, People, and Documents, and a keyboard hint footer.

Issues table with shaded status subheader rows showing group name and count above each set of member rows.

Three labeled columns of tool tiles covering Design, Development, and Collaboration, each tile showing a two-letter mark and the tool name.

One person starts it, others chip in by link, with three honest rules stated before it goes wrong.

Buttons that scale up smoothly on hover to feel responsive. Add a touch of motion feedback to cards, pricing tiers, and primary form actions.

A case study card led by a twelve month line chart with milestone markers and a story row below.

Areas of responsibility as rows and career levels as columns, with filled, faded, and empty dots marking what was owned or contributed at each stage.

A vertical timeline of dated milestones behind the published numbers, each row stamped with its title, a short note, and the MRR at the time.

A split stats section pairing a heading, narrative paragraph, and three hairline stat rows with a large decorative area chart panel.

A vertical timeline pairing dates with the numbers you hit at each stage. Use it to chart company momentum on an about page or investor deck.

The ten year promise in a primary band with honored, declined, and median repair time.

Five answers drawing the defect versus wear line in examples, lifetime answered honestly.

Every owned product with its guarantee clock, expired ones kept for the bench.

A two column split with three numbered transfer promises beside a serial registration card that reveals the transferred record on submit.

Statutory rights, the Acme guarantee, and the repair program in one table showing they stack not replace.

Ruled rows pairing each safety rule with an icon, explanation, and switch, above a blocked topics list and an audit logging note.

A guest access panel listing external collaborators with avatar and email, the projects they can reach, an expiry date, and convert or remove actions.

A guest access panel with an allow guests switch, a permitted email domain list, default permission options, and an active guest count row.

The fork without a thumb on the scale, guest first, account earning its column with perks.

Two column lookup with a headline, three hints on where the order number lives, and a card form for order number and email.

Six evergreen guides as cards, each promising a decision rather than content.

A guided finder replacing the search box with three toggle chip questions, surfacing the best matching product once all three answers are in.

A troubleshooting wizard with a progress bar, an answered steps summary, the current question as selectable option rows, and step actions.

A dark hackathon card with a dates chip, title, and prize stat.

A checked list of six deliverables the client receives at project close alongside a ruled notes strip and a card naming what the handoff does not include.

A responsibility split process section running three rollout phases as rows under two lanes, contrasting the customer tasks against the heavier vendor tasks.

The buckle, zips, and rivets each specified and each carrying its failure rate from the bench log.

Indented document heading tree with landmark chips, level tags, and issue badges for skipped levels, empty headings, and a duplicate H1.

One oversized statement, one line with a number, two buttons. Typography carries the fold.

One oversized centerpiece figure above a heading and a context paragraph, closed by a ruled row of three small supporting figures.

An oversized research finding with a sourced leadline and one evidence link.

Heading with a download button, three headshot crops in a grid with resolution and use captions, and a required photo credit panel.

Centered pill tabs switch between competitors, each pane pairing a verdict and three checked differences with a two by two grid of outcome stat tiles.

CSS grid calendar heatmap shading daily activity by foreground opacity across a six month window.

Feature usage matrix with weekday columns, value shaded cells, per row totals, and an intensity legend beneath the table.