Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Testimonial Embedded Split Features Block for React

A feature split that opens with a customer quote at display size, then three feature rows beside a framed drawing that sets a laptop's stack against production's, each layer marked as matching or not.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A feature section for React with Base UI whose header is a customer's words. A band at the top sets one quote at display size with the speaker's avatar, name and role under it. Under a shared hairline, a split divider separates three feature rows (each with a check, a title and a sentence) from a framed greyscale drawing: your laptop and production side by side, five layers of the stack, each with a mark for whether the two values match, and a count of how many do. Below lg the order is quote, features, drawing. It's built from Avatar, Badge, Guides and lucide icons, with CSS for the entrance and your theme's tokens for every colour. For developer tools where one engineer's sentence says it better than a headline would.

FAQ

Where is the section's heading?

The section's h2 is in the markup for assistive technology and is visually hidden, because the quote is the header sighted readers see. Edit its text in the first band, and the quote and the speaker in the figure beside it.

How are the matches counted?

The drawing reads its numbers from LAYERS at the top of the file: a layer matches when its two values are equal, and both the count and the flagged badge are worked out from that list. Change a value and the mark, the count and the badge follow.

Is the drawing accessible?

It is decoration and is hidden from assistive technology, so the three feature rows beside it carry the same facts, including that a setting which differs is flagged before the push. The feature rows are a list with an h3 each.

Does it follow my theme?

Yes. The quote, the rows and the drawing use foreground, muted and card tokens with no dark scope. A matching layer is a foreground chip and a differing one an outlined chip, so no colour carries the meaning on its own.

How does it fit on a phone?

The quote comes first, then the feature rows, then the drawing under its own rule. The two columns of the drawing keep their widths at 320 pixels, and long values are cut with an ellipsis rather than overflowing.

  • Pro

    Quote Reinforced Split Panel Features

    Proof and comparisons

    A feature split for a preview-environment tool: a headline and four ticks on one side, and on the other a framed drawing of the open previews with comment pins and the customer's quote in a cell of its own.

  • Pro

    Quote Driven Feature Cards

    Proof and comparisons

    Three feature cards for a design-handoff tool, each with a small drawing of the feature, a customer quote about it, the speaker's initials, name and role, and a result badge.

  • Pro

    Customer Quote Feature Split

    Proof and comparisons

    A split feature section for a contract-review tool: three feature ticks and a story link beside a framed drawing of a contract under review, with a customer quote card that overlaps the frame's corner.

  • Pro

    Bento Grid Testimonials

    Quote grids

    A quote-only bento drawn with hairlines: one large lead story beside four shorter quotes, in cells that share their lines, on the page's drafting lines.

  • Pro

    Split Mockup Icon Checklist Features

    Split with mockup

    A reverse split features section for a planning canvas: a square canvas in a card in card with linked cards and two named cursors, beside four icon rows and two buttons.

  • Pro

    Before After Visual Features

    Proof and comparisons

    Three measured outcomes as ruled rows, each with its own Before and After control that swaps both the figure and the bar: page weight, load time and weekly support tickets.

All 170 features blocks