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

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 Base UI. 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 the link it's given with render, with nativeButton={false}.

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.

  • Pro

    Dark Inset Icon Grid Features

    Card grids

    A card-in-card grid of six capabilities for a team knowledge base, each with an icon tile, a sentence and a row showing which of three plans include it.

  • Pro

    Alternating Mockup Rows Features

    Alternating rows

    Three alternating bands for a support back office, each pairing a sentence with a browser window that holds a different admin screen: a filtered ticket table, a settings form with toggles and a weekly chart with its legend.

  • 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

    Split Layout Code Diff Hero

    Code and terminal

    A showcase hero for a code review tool: a centred headline, a Shine Button, a second action and three ticks over a wide pull request window in a hairline frame, with a diff whose changes play out line by line.

  • Pro

    Card Inset Metric Row CTA

    Figures and stats

    A start-aligned card-in-card CTA for an API platform: a headline, one sentence and two calls to action, with three platform figures in a closing band across the foot of the panel.

  • Pro

    Image Background Overlay Cards Features

    Split with mockup

    A feature section for a roadmap planner that lays a frosted headline chip and three raised feature tiles over a wide greyscale roadmap drawing, with no photo: the product is the background.

All 170 features blocks