shadcn.io is not affiliated with official shadcn/ui
Use Case Onboarding Block for Radix UI
A use-case question as a grid of six tiles on shared hairlines, each a native radio with a small drawing of its board, and one sentence under the grid that says which board opens first.
Installation
Overview
Match the first screen to what people came to do, with this use-case question for React with Radix UI. It is a step of Sparkwick, a digital whiteboard, as a whole screen: the page's rails and one band, a step header (“Step 3 of 6” and a hairline), and a framed panel holding six tiles on shared hairlines, two across on a phone and three from the small breakpoint: Brainstorm, Plan a project, Teach a class, Run a workshop, Review a design and Keep notes. Each tile is a native radio with a small greyscale drawing of its board (sticky notes, task bars, a chalkboard, a timer, a pinned frame, lines of text), a name and a line; the picked tile is boxed and its drawing darkens. One sentence under the grid says which board Sparkwick opens (“We will open a workshop board with a timer and voting”), and every pick rewrites it. Continue is the one Shine Button, with a ghost Skip for now beside it. Nothing is saved.
FAQ
How do I change the tiles?
Edit USES: each has an id, a title, a hint for the line under the name and opens, the phrase the sentence completes (“We will open {opens}.”). Each id has a drawing in Drawing, a few greyscale boxes in a 64 by 40 pixel space; add one there for a new tile and keep six tiles so the grid has no gap.
Why native radios and not a Radio Group?
A tile is a whole box with a drawing in it, which a plain label around a hidden radio input does best: the browser gives it a single tab stop, arrow keys that move and pick, and a name and state for screen readers, and the same markup works on every target. The picked tile's box and darker drawing come from the radio's checked state in CSS.
What does the sentence under the grid do?
It is the page's one polite status: it asks you to pick before there is a pick, names the board after it, and says “Saved in this demo” after Continue. It is held at two lines on wide screens and three on a phone, so the buttons below never move.
What happens if I press Continue without a tile?
Continue stays in the tab order and looks quiet until a tile is picked; pressing it says “Pick a use to continue.” in a line under the grid that is always reserved, and puts focus on the grid so the arrow keys work at once.
What stays local in the demo, and how do I wire it?
Everything: Continue says it saved in this demo and nothing leaves the page. In your app send the picked id to your server where submit says so and open the board its response names. The mapping from a tile to a board belongs to your product; the typed opens lines are only the preview.