Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Vertical Tab Accordion Preview Features Block for React Aria

A 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.

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 React with React Aria, for products with a lot to show that is easy to sort into categories. A compact header sits over one hairline band split into three panes. On the start side a vertical tab rail lists five categories of Orgdesk, an admin console for many workspaces (workspaces, people, access, billing and audit); in the middle an accordion lists that category's three features, one open at a time; on the end side a framed console screen draws the category as three rows, and the row of the open feature is outlined. Choosing another category swaps the accordion and the screen and opens its first feature. It's tabs, an accordion, a badge and the Guides line kit, with your theme's tokens for every colour and no button. For admin consoles, dashboards and any product that needs navigation, detail and a picture in view at once.

FAQ

How do I change the categories and features?

Edit GROUPS at the top of the file. Each category has a label, an icon, a footer line and three features; each feature has a title, a sentence, three bullets and a row, the line of the console screen it is. The screen is drawn from the same data, so a new feature needs no extra markup: its row appears in the screen and is outlined when the feature opens.

How does the screen know which row to outline?

The open feature is plain state shared by the accordion and the screen. Each row in the screen belongs to one feature, and the row whose feature is open gets the outline. Choosing another category resets the open feature to that category's first one, so a row is always outlined.

Why can't I close the open feature?

One feature is always open, because the screen always outlines one row. Opening another feature closes the first. Closing the open feature is ignored: the change handler keeps the previous one when it receives none.

How do I use it with the keyboard?

The rail is one tab stop. Use the up and down arrow keys to move between categories, and Tab to reach the accordion in the panel. The features are real accordion buttons: Enter or Space opens one. Tab moves between the features.

How does it fit on a phone?

The rail becomes a row of tabs that scrolls sideways, with the accordion under it. The console screen moves inside the open feature, under its bullets, and shows the same outlined row; the pane on the end side is hidden below the large breakpoint.

What moves, and what happens with reduced motion?

The header and the band fade up once when the page loads, the open feature's panel slides open, and the outline on a screen row eases in. With reduced motion the fade-up and the outline's easing are off.

All 170 features blocks