Template Selection Onboarding Block for React

Edit GROUPS: each group has a title and exactly four templates, each with an id, a title, a one-line blurb, the pages it makes, a drawing kind (lanes, table, doc, calendar, checklist or timeline) and a variant (0 or 1) that picks one of that recipe's two shapes. Keep four per group so every tab is the same height; the blurb is held to two lines so no card is taller than another.

Each is a few spans sized in container units (cqw) inside a box with a fixed 4:3 shape, so the same drawing is crisp in a 170 px card and in the 450 px preview, follows the theme, and costs no file. They are aria-hidden; the card's name and line carry the meaning. To use your own screenshots, replace Sketch with an image and keep its box.

It opens the real dialog: it traps focus, closes with Escape, the Close button or a click outside, and puts focus back on the Preview button you pressed. In the dialog “Choose this template” picks it and closes; the line under the gallery then says what is chosen once the dialog has gone (a modal hides the page from screen readers while it is open). If the template is already chosen the button says “Chosen” and only closes.

Use this template stays in the tab order and looks quiet until a card is chosen. Pressing it says “Choose a template first.” under the gallery and puts focus on the first card of the open tab. The line is always reserved, so nothing moves. The choice is kept when you change tab, so the template you chose in Planning is still chosen when you look at Writing.

Everything: choosing, previewing and Use this template change state in the tab, no page is created and Skip for now only says it was skipped. In your app create the pages where submit says so, from the chosen template id, and send the visitor into the first of them.

The tabs follow the usual tab pattern. Inside a tab the four cards are one radio group: Tab reaches the group, the arrow keys move between cards and select the one they reach, and Space selects. Each Preview button is its own tab stop after its card.