Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Large Headline Side Checklist Features Block for Radix UI

A feature section for an onboarding tool with a large headline on the start side and a card-in-card setup checklist beside it, whose real checkboxes drive a progress meter and a spoken count.

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 large-headline feature section for React with Radix UI. A display headline, one sentence and a link to templates fill the start column; behind a split divider, a raised checklist card in a muted shell holds six steps, each with a real checkbox and a one-line hint. Ticking a box updates a progress meter and the count above the list ("3 of 6 done"), and a ticked step is struck through. The section has no button of its own, so nothing competes with the list. It's built from Checkbox, Progress, Field, Badge and Guides, with CSS for the entrance and your theme's tokens for every colour. For onboarding, setup guides and any product whose proof is a short list somebody can finish.

FAQ

How do I change the steps?

Edit STEPS at the top of the file: each has an id, a title and a hint. START lists the ids that are ticked on load, and the meter and the count are derived from the number ticked, so they always agree with the list.

Where is the progress kept?

In one piece of state that holds the ids of the ticked steps. Nothing is saved: reloading the page returns to START. To keep progress, store that list wherever your app keeps user data and pass it in as the initial value.

How does it work with a keyboard and a screen reader?

Each row is a labelled checkbox: its name is the step's title and its description is the hint, and clicking the row toggles it. The count under the meter is a polite status, so a tick is announced as "4 of 6 done". The meter is named "Onboarding progress".

Does the card follow my theme?

Yes. The card is a raised panel in a muted shell with + marks on its corners, with no dark scope, so it is light on a light page and dark on a dark one. A ticked box and the meter's fill use the foreground colour, so the section has no primary surface.

What moves, and what happens with reduced motion?

The section fades up once when the page loads, and the meter's fill eases to its new width when you tick a box. With reduced motion the entrance is off; the fill still changes, without a transition.

How does it fit on a phone?

The headline comes first, a hairline rule separates it from the card, and the card follows at the full width. The headline steps down from text-6xl to text-4xl, and the checklist stays one row per step with nothing sideways at 320 pixels.

All 170 features blocks