Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Sequential Milestone Checklist Features Block for Vue

A features section for a launch-readiness tool: five milestones in an accordion, each a grouped checklist of real checkboxes, with every milestone locked until the one before it is complete.

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 features section for Vue with Ark UI, built around gated milestones. A side header that stays in view as you scroll holds the headline, a progress ring of the requirements ticked so far and "2 of 5 milestones complete" in rolling digits. Beside it, behind a divider that meets the page's top rule with a plus mark, an accordion of five milestones on ruled rows opens one at a time; each opens to its requirements as real checkboxes in three groups (Legal, Security and Support), and ticking them updates the milestone's chip, the ring and the count. A milestone stays locked until the one before it is complete, so the order can't be skipped. It's built from Accordion, Checkbox, Circular Progress, Sliding Number, Badge and the Guides line kit, with your theme's tokens for every colour and no button. For launch plans, compliance checklists, onboarding programmes and any process with gates.

FAQ

How do I change the milestones and their requirements?

Edit the five milestone objects at the top of the file. Each has a name, a sentence and six requirements, each with a group (Legal, Security or Support), an id and a label. The counts, the percentage in the ring, "of 5 milestones complete" and each chip are all worked out from what is ticked, so they can't drift. START lists what is ticked when the page loads; clear it to start from nothing.

How does the locking work?

A milestone is open to work on while every milestone before it is complete. A locked row still sits in the list and can be reached from the keyboard, but it won't open, and its text says what it waits for ("Locked until Private beta is complete"). If you untick a box in an earlier milestone, every milestone after it locks again, and an open one gives way to the first milestone still to do. Ticking the last box of a milestone doesn't open the next one on its own; you choose when.

What does a screen reader hear?

Each row is a heading with its name, how many requirements are ticked (or what it waits for) and its state. Each checkbox is named by its requirement, and the three groups are fieldsets with legends. A polite status says when a milestone completes and which one unlocks, or when one stops being complete.

How does it work from the keyboard?

Tab moves through the rows and into the open milestone's checkboxes; Space ticks a box, and Enter or Space on a row opens it. The arrow keys, Home and End also move between rows on most versions; the Base UI and React Aria versions use Tab between rows instead.

How does it fit on a phone?

The header sits above the list, the state chip drops away (each row keeps its count or lock line), and the three groups stack in one column. Nothing scrolls the page sideways at 320 pixels.

What moves, and what happens with reduced motion?

The header and the list fade up once on load, the ring sweeps to its new value, the count rolls and a panel opens with a short height change. With reduced motion those are off and everything changes at once.

All 170 features blocks