shadcn-ui-blocks

Three sizes with relatively scaled images and packed lists instead of liters.

The four sizing answers as one band, each sentence ending its question.

Buttons with a skewed, slanted shape for a sense of dynamic energy. Suits sports, fitness, and bold marketing pages that want forward momentum.

Twelve skills across three discipline columns each with a div bar and a word level from Foundational to Fluent rather than a percentage.

Four category cards in a two-column grid organizing specific skills by project phase from Discovery through Delivery for a senior product designer.

A two-column block with the technology stack organised into labelled chip categories on the left and a ruled list of representative projects on the right.

A ruled skills table grouping six disciplines with a proficiency level label and chip tags so a hiring manager can scan breadth in one pass.

A grid of skill badges grouped by area with optional proficiency levels. Summarizes the tools and languages you know across a portfolio about page.

A heading and lede above a ruled list where each row pairs a skill with the project that proved it, its outcome, and the year.

A three-column grouped skills block with Design, Research, and Front-end category headings and bordered chip pills for a product designer or creative generalist.

A heading and lede above a bordered table pairing skill rows with three engagement columns, one filled dot per row marking lead, build, or refer.

A resume skills section presenting four skill categories as chip rows in a two-column grid, each with a short proficiency note and no bar charts or percentage scores.

A heading and lede above a dotted vertical timeline where each entry marks the year a skill arrived, its status word, and a note.

The five questions that filled half of June's inbox as an accordion with ask counts, beside the case for writing anyway.

Slack integration config panel showing the connected workspace, a channel selector, per-event notification toggles, a test-message affordance, and a disconnect section.

SLA targets beside trailing actuals and automatic remedies, published inline.

A support SLA panel with a plan header, a severity by plan matrix of first response targets with your plan highlighted, and coverage notes.

A breadcrumb that divides its links with a forward slash. Mirrors a file path style for code tools, documentation, and folder browsing screens.

SLA card showing the uptime target, actual this period, error budget bar, and the last published breach record.

Buttons with a color or label that slides in on hover. Reveal a second state to guide users toward the next step in a clear and simple flow.

A minimal centered footer stacking a brand mark, one row of five links, social icon buttons, and a muted copyright line under a hairline border.

A slim glass navbar with a wordmark, four muted links, and one pill shaped CTA. Links collapse into a mobile sheet menu.

A card panel joining average active seats per plan across two quarters with slope lines between paired axes, the biggest mover drawn in full ink.

A testimonial with a small rounded avatar set beside a concise quote and name. A friendly, lightweight option for sidebars or quieter page spots.

Three texts we send, the never list sworn, median 4 texts a year.

Static open snooze popover beside a message row with four preset return times and a pick-a-date option.

Static blueprint of an open snooze menu with four preset options and resolved wall-clock times per option.

A trust forward footer closing with social icons and compliance chips for SOC 2, GDPR, and ISO.

Buttons branded for Google, GitHub, Apple, and more providers. Drop them into sign in and sign up screens for fast one click authentication.

A grid of six social post style cards with avatars, handles, and casual praise.

A grid of six destination cards covering email, LinkedIn, GitHub, X, Instagram, and a calendar booking link, each with a description of what lives there.

A compact row of platform icons that link out to every profile you maintain. Drop it in a footer or sidebar so visitors can follow you anywhere fast.

Six short posts drawn as cards with avatars, handles, and timestamps, displayed unedited.

A centered subscribe form topped with subscriber counts or avatars as social proof. Use it when trust nudges visitors to join your mailing list.

A hero pairing a headline and CTA with logos, ratings, and user counts. Leads with credibility to reassure visitors at the top of a landing page.

Featured customer quotes paired with ratings and verified buyer badges. Builds confidence near the buy button to encourage shoppers to checkout.

A centered horizontal strip of social links pairing a brand icon with a display handle for each platform, sized for embedding at the foot of any section.

A centred footer showing the name at heading scale, a one-line tagline, a row of social icon links, and a copyright line with no other navigation.

A centered header above a three figure stat strip and a ledger of recently sold seconds naming each piece, its flaw, band, and rail days.

Solid filled icons that shift colour or lift on hover. Adds tactile feedback to a feature grid so the section feels responsive as visitors browse.

Solid primary panel holding a heading and a six tile icon feature grid.

A two column layout pairing answer speed stats and an ask button with a static solved thread, its accepted answer highlighted over a reply.

A two column split pairing a lyric excerpt card with the written story of a song, closed by a ruled credits list and a listen link.

Projects table with sort affordance icons on every column header, one column actively sorted descending, and a shift-click secondary sort hint in the footnote.

Working sort and density controls wired to a demo table that responds.

Static open-state sort popover with four sort options, an active checkmark, and a Desc/Asc direction toggle rendered inline without a Radix portal.

A quarantine pane listing held messages with a monogram, sender, subject, a detection reason badge, an auto delete countdown, and per row actions.

Two spares at the cart with an honest counter on who actually needs them and a skip.