Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Split Mockup Icon Checklist Features Block for React

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.

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 reverse split features section for React with Base UI. At the start, a square planning canvas in a card in card: a muted shell around a raised panel, with a dot grid, five plan cards joined by lines (one selected), two cursors with names (one filled, one outlined) and a small tool dock. At the end, a compact header, four icon rows and a Shine Button with an outline button. There is no divider, because the framed canvas is the structure; the copy is first in the DOM, so it also comes first on a phone. It's built from Frame, Guides, Shine Button and Button. For whiteboards, planning and collaboration tools.

FAQ

How do I change the four rows?

Edit FEATURES at the top of the file: each has a Lucide icon, a title and a sentence, rendered as a list with an h3 each.

How do I change the canvas?

Edit CARDS (position and size in percent of the canvas) and LINKS (the lines between them, in a 100 by 100 space). The lines stretch with the canvas and keep a hairline stroke. The two cursors and the tool dock are written out in PlanCanvas.

Where do the buttons go?

Both are links (href="#") under the rows: Open a canvas is a Shine Button and Watch a tour an outline button. Each button renders the link it's given with render, with nativeButton={false}.

Is the canvas read by screen readers?

No. The canvas is decoration, hidden from assistive technology and not focusable. The four rows carry the content.

Does the card in card follow my theme?

Yes. There is no dark scope: the shell, the panel, the cards and both cursors use your theme's tokens, so it works in every preset, light and dark.

How does it fit a phone?

The copy comes first and the canvas follows at full width, still square. The cards keep their place because their size is a share of the canvas.

  • Pro

    Split Screenshot With Stats Features

    Split with mockup

    A split features section for an audit-log service: four ticked rows and two buttons beside a framed audit log with a strip of three figures docked inside its foot.

  • Pro

    Split Aspect Ratio List Features

    Split with mockup

    A split features section for a client-reporting tool: a headline, four icon rows and two buttons beside a tall 3:4 report page that sits against the rail and fades out at the foot.

  • Pro

    Dark Inset Split Mockup Features

    Split with mockup

    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.

  • Pro

    Split Dark Mockup List Features

    Split with mockup

    A split features section for a profiler: four icon rows and two buttons beside a flat profiler window that fills its half edge to edge, with a dense flame graph, one hot frame and a self-time list.

  • Pro

    Split Markdown Editor Hero

    Product windows

    A reverse split hero: a two-pane markdown editor in a hairline frame with + marks on its corners, then a divider, the headline, three checks and a Shine Button.

  • 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