Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Blog blocks

Pro

Accordion Step By Step Blog Block for Ark UI

A tutorial in five steps: a single-open accordion on a vertical rail, a Done button that ticks a step and opens the next, and a framed drawing of the open step.

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 tutorial block for React with Ark UI, written for Fretsaw Weekly, a woodworking blog: how to cut a through mortise and tenon by hand. A start-aligned header says how many steps are done and about how long the rest takes. Below it, a split behind a divider: at the start a single-open accordion of five steps hung on a vertical rail, each with a marker (a number, a tick once done, a haloed ring for the one you are on), its title and its time; the open step shows its text, what you need and the block's Shine Button, "Done, next step", which ticks the step, opens the next and moves focus to it. At the end a framed drawing of the open step. On a phone the drawing sits under the step's text. It's built from Accordion, ShineButton, Button and Guides. What you tick stays in this page.

FAQ

How do I change the steps?

Edit STEPS: each has an id, a title, the minutes it takes, its text and what you need. The header's "2 of 5 steps done, about 40 minutes to go", the markers and the "Step 3 of 5" caption derive from it. START_DONE and START_OPEN set what is ticked and open on first show. The drawing is chosen by the step's id, so a new step needs a drawing with the same id.

What do the buttons do?

"Done, next step" marks the step done, opens the next one and moves focus to its heading, because the button leaves with the panel it was in. On a step you have already done the button reads "Mark as not done" and takes the tick back. A polite status says what happened ("Step 3 done. Step 4, Pare to a snug fit, is open.").

How does the accordion work from the keyboard?

Enter and Space open a step, and one step is always open. The Up and Down arrows also move between the step headings, and Home and End jump to the first and last.

Is the text of closed steps in the page?

Yes. The Accordion takes lazyMount={false} and unmountOnExit={false}, so every step renders from the start and stays hidden until it opens.

Are the drawings pictures?

No. Each is a small SVG in the page's own greyscale: gauge lines, a chopped mortise, a sawn tenon, a pared fit, a clamp. They are hidden from assistive technology, because the step's text says the same thing, and they never mirror in a right-to-left page.

Does the block change height when I open a step?

On a wide screen no: the row is held at a fixed minimum height, so the drawing and the steps stay put. On a phone the page grows by the open step's text and drawing, as any accordion does.

All 100 blog blocks