Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Customer Quote Feature Split Block for Radix UI

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.

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 split for React with Radix UI. On the start side, a headline, one sentence, three feature ticks and a link to a customer story; behind a split divider, a framed greyscale drawing of a contract open for review, with two clauses highlighted in the page and a comment for each in the margin. From lg a quote card, a card in card with the customer's words, avatar, name and role, straddles the frame's foot and end corner; below lg it sits under the drawing instead. It's built from Avatar, Badge and Guides, with CSS for the entrance and your theme's tokens for every colour. For products that sell on a customer's result, where the quote should land on the product itself.

FAQ

How do I change the quote?

Edit the words, the name and the role in the figure at the bottom of the file, and the initials in AvatarFallback. The quote is a figure with a blockquote and a figcaption, so assistive technology reads it as a quote with its attribution. To show a photo, put an AvatarImage before the fallback.

How does the overlap work?

From lg the quote card is positioned against the drawing's wrapper and hangs below and past its end corner; the cell has extra bottom padding so nothing is cut. Below lg it's an ordinary block under the drawing, with a small gap, so it never covers the drawing on a narrow screen.

Is the drawing real?

It is decoration, built from tokens: a window bar, four clauses of which two are highlighted, and a margin of two comments. It's hidden from assistive technology, and the three ticks beside it say what the product does. The margin is hidden below sm, where the page takes the whole width.

Does it follow my theme?

Yes. The quote card and the drawing use card, muted and foreground tokens with no dark scope, so they are light on a light page and dark on a dark one.

What moves, and what happens with reduced motion?

The two columns fade up once when the page loads. With reduced motion the transition is off and the section appears at once; the link's arrow moves a little on hover only when motion is allowed.

How does it fit on a phone?

The text comes first, then the drawing at a shorter height, then the quote card under it with no overlap. The ticks wrap onto as many lines as they need, and nothing scrolls sideways at 320 pixels.

All 170 features blocks