shadcn.io is not affiliated with official shadcn/ui
Horizontal Panel Concertina Features Block for React
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.
Installation
Overview
A concertina features section for React with Base 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 primitives' orientation settings only change which arrow keys they listen to, so the layout comes from classes alone.
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.
Related
- Pro
Hover Accordion Mockup Split Features
Tabs and accordionsA features section for an operations console: an accordion of four features whose open row swaps the console screen drawn in a framed figure beside it, by pointer, focus or tap.
- Pro
Accordion FAQ Features
Tabs and accordionsA features section for an API gateway told as six capability questions in an accordion beside a sticky side header, each answer a sentence and a small drawing of the capability at work.
- Pro
Vertical Tab Accordion Preview Features
Tabs and accordionsA features section for an admin console in three panes: a vertical tab rail of five categories, an accordion of that category's features, and a console screen on the end side that outlines the row of the open feature.
- Pro
Segmented Accordion Mockup Features
Tabs and accordionsA 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.
- Pro
Pill Tab Expand Preview Features
Tabs and accordionsA features section for an email-automation product: a pill segment control swaps three accordion steps (draft, send, measure), and each open step shows its own small drawing beside its text.
- Pro
Animated Reveal Features
Tabs and accordionsA features section for a dashboard builder with a framed drawing of its editor at the start and four steps as vertical tabs at the end: each step adds a layer to the drawing and keeps the ones before it.