Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Horizontal Panel Concertina Features Block for Vue

A features section for a dashboard builder: six panels side by side in one rounded frame, five folded to a strip with a sideways label and one open to a headline, a sentence and a small drawing.

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 concertina features section for Vue with Ark UI. Six panels of Foldaway, a modular dashboard builder (tiles, layouts, sources, filters, alerts and sharing), sit side by side in one rounded frame. Five are folded to a narrow strip with an icon and a label turned on its side; the open one shows a headline, a sentence and a small drawing of the feature, and takes the free width with a smooth column transition while the others fold. Hairlines divide the strips and the frame has one outer radius. Below the medium breakpoint the same six panels stack as a vertical accordion. It's an accordion, an avatar and a badge, with your theme's tokens for every colour and no button.

FAQ

How do I change the panels?

Edit PANELS at the top of the file (an id, an icon, a label, a headline and a sentence), write the small drawing as a component beside it, and give the FoldPanel for that entry the drawing as its child. The COLUMNS list holds one grid-template class per open panel: with a different number of panels, add or remove entries to match.

Is it a horizontal accordion?

It's the single-open accordion of the catalog, laid out sideways with CSS from the medium breakpoint up, so it has the same markup, the same state and the same behaviour on every base and below that width it's an ordinary vertical accordion. Each panel's label is a button in a level-three heading, and the open one is marked as expanded. The accordion's own horizontal orientation is not used: it would also have to switch back on phones, which a layout class does without script.

How does it work from the keyboard?

Tab reaches each panel's strip, Enter and Space open it, and the Up and Down arrows, Home and End move between strips. One panel is always open, so opening another folds the first.

What moves, and what happens with reduced motion?

The header and the frame fade up once when the page loads, and the open panel widens with a grid-column transition. With reduced motion both are off and the panels switch instantly.

How does it fit on a phone?

Below the medium breakpoint the strips become ordinary accordion rows with the icon and the label side by side, and the open one grows downward to show its headline, sentence and drawing. Nothing scrolls sideways at 320 pixels.

Are the drawings real charts?

No, they are small greyscale drawings made from the page's tokens and hidden from assistive technology, so everything they show is also in the panel's sentence.

All 170 features blocks