Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Segmented Accordion Mockup Features Block for Vue

A features section for a block editor: a segmented control picks a job, an accordion lists its four features, and the one editor screen beside it rings and spotlights the part of the page the open row names.

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 one screen that never changes. Blockbook, a block editor for team docs, is drawn once as a top bar, a page tree, a document and a comment rail, flush to the start rail and masked at its foot. A segmented control picks the job (Write, Organise or Review) and swaps the four rows of an accordion on the end side. Each row names a part of the page: opening it draws an outline ring on that part and dims the rest, so the picture answers the list without a single screen swap. It's a segment group, an accordion and the Guides line kit, with your theme's tokens for every colour and no button. For editors, dashboards and any product whose features are best shown as places on one screen.

FAQ

How do I change the jobs, the rows and the highlighted parts?

Edit JOBS at the top of the file: each job has a label and four rows, and each row has a title, a sentence, a place for the caption and a region. The region is one of the ids in RegionId, and the part of the screen drawn inside the matching Region gets the ring when that row is open. To add a part, add an id, wrap the new piece of the drawing in a Region with it, and point a row at it.

How does the highlight work, and does it move anything?

Every part of the screen is wrapped in a Region. The open row's region gets an outline ring; every other region is covered by a translucent scrim that fades in over it. Both are drawn with a ring and a pseudo-element, so no part changes size or position and nothing shifts when you open a row.

What happens to the open row when I change the job?

Each job remembers its own open row; a job you have not touched is open on its first row. The accordion always has one row open, because the screen always highlights something, so you cannot close it. The accordion is not collapsible, which keeps the last row open.

Is the screen available to screen readers and the keyboard?

The screen is a drawing, so it is hidden from assistive technology and has nothing to focus. What it shows is in the text: each row says what the feature does, and a caption under the accordion names the part that is highlighted ("Slash menu, under the last block"). The segmented control and the accordion are real controls with visible focus. The arrow keys move between the accordion rows.

What moves, and what happens with reduced motion?

The header and the band fade up once when the page loads, the open row's panel slides open, and the ring and the scrim fade in about a third of a second. With reduced motion the fade-up and those fades are off, and the highlight changes at once.

How does it fit on a phone?

The accordion comes first and the screen follows under a hairline. The screen reflows at its own width: the page tree becomes a strip above the document and the comment rail a strip below it, so every part you can highlight is still there. Below the large breakpoint the screen is not cropped by a mask.

All 170 features blocks