Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Quote Reinforced Split Panel Features Block for React

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.

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 split feature section for React with Base UI. On the start side, a headline, one sentence, four ticks and a hint about preview links. Behind a split divider the end side is two cells that share one hairline: a framed greyscale drawing of the open previews, with a miniature page carrying two numbered comment pins and a list of branches with their comment counts, and under it the customer's quote with an avatar, a name, a role and a result badge. The quote never covers the drawing. Below lg the order is text, drawing, quote. It's built from Avatar, Badge and Guides, with CSS for the entrance and your theme's tokens for every colour. For developer tools that want proof next to the product, on its own line.

FAQ

How do I change the quote?

Edit the words, the name and the role in the figure at the bottom of the file, the initials in AvatarFallback and the text of the badge. The quote is a figure with a blockquote and a figcaption, so assistive technology reads it with its attribution.

How do the two cells share a line?

The drawing's cell and the quote's cell are stacked in the end column. The quote's cell draws its top rule with Guides, with a + mark where it meets the divider and the rail, so there is one line between them and nothing is doubled.

Is the drawing real?

It is decoration built from tokens, hidden from assistive technology; the four ticks beside it say what the product does. Edit PREVIEWS at the top of the file to change the branches, their comment counts and which one is open.

Does it follow my theme?

Yes. Everything uses card, muted and foreground tokens with no dark scope. The comment pins are foreground chips; the primary colour is not used.

How does it fit on a phone?

The text comes first, then the drawing at a shorter height, then the quote. The badge wraps under the name when there is no room. Nothing scrolls sideways at 320 pixels.

  • 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

    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

    Testimonial Embedded Split Features

    Proof and comparisons

    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.

  • Pro

    Split Quote Panel Hero

    Testimonials

    A reverse split hero that opens with a customer quote: a tinted panel on the start side in three ruled bands (quote, author, two results), and the headline and a Shine Button at the end.

  • 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