Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Dark Inset Split Mockup Features Block for React Aria

A card-in-card features section for a document editor: three ticked capabilities beside a framed drawing of the editor with comment threads running off the foot.

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 features section for React with React Aria. A compact header holds the Shine Button and an outline button, above a card in card: a muted shell with + marks on its corners wraps a raised panel that follows your theme, split in two by a hairline. At the start, three ticked capabilities with a sentence each; at the end, a framed drawing of a document editor in greyscale (a toolbar, a draft with one sentence highlighted and the comment threads attached to it) that runs off the foot under a mask. It's built from Avatar, Badge, Button, Guides and Shine Button. For editors, review tools and any product best shown as a document with comments.

FAQ

How do I change the capabilities?

Edit TICKS: each has a title and a sentence. They render as a list with an h3 each. The drawing is separate: EditorDrawing shows the toolbar, the draft and THREADS, the comment threads, whose names, initials and line widths you can change.

Where do the buttons go?

Both are links (href="#") in the header row: Start a draft is a Shine Button and Browse templates an outline button. Each button renders a link when it has an href.

Is the drawing read by screen readers?

No. The editor drawing is decoration, hidden from assistive technology and not focusable. The three capabilities beside it carry the content.

Does the panel follow my theme?

Yes, there is no dark scope. The framed drawing uses your card and muted tokens, so it works in every preset, light and dark.

What moves, and what happens with reduced motion?

The block fades up once when the page loads, with a CSS transition. With reduced motion the transition is off and the section simply appears.

How does it fit a phone?

The panel stacks: the capabilities first, then the drawing under a hairline at a shorter height, still masked at its foot. The header's buttons wrap under the text.

All 170 features blocks