shadcn.io is not affiliated with official shadcn/ui
Split Mockup Icon Checklist Features Block for Solid
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.
Installation
Overview
A reverse split features section for Solid with Ark 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's asChild receives its props: spread them onto your router's link.
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.