Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Manila Folder Tab Row Features Block for React Aria

A features section for a document vault drawn as five connected folder tabs: the open tab is filled like the panel under it, which holds a title, a sentence, the tags it is filed under and a stair of document chips.

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, built like a filing cabinet. Five tabs sit on one hairline that runs from rail to rail, with + marks where it meets the page's side lines; the open tab is filled with the same tint as the panel below it and covers the line, so the two read as one folder. The panel is a band between the rails: a folder number, the title, a sentence and the tags it is filed under at the start, and at the end a stair of document chips, each a little further in, fading out at the foot. It's built from Tabs, Badge and Guides with your theme's tokens for every colour, and it has no button. For document, records and compliance products, or any set of features that belong in named drawers.

FAQ

How do I change the folders?

Edit FOLDERS at the top of the file. Each folder has an icon, a label for its tab, a title, a sentence, up to three tags and four documents (a name, a note and a status). The tabs, the panels and the folder count ("Folder 2 of 5") all read from that list, so adding a sixth folder needs no other change.

How does the open tab join the panel?

The row of tabs rests on a single hairline drawn by the Guides component. Closed tabs stop one pixel above it and have their own border; the open tab reaches down over it and is filled with a solid tint that is exactly the panel's, so the line disappears under it. Because the tint is a mix of your theme's muted and background colours, it works in light and dark and in every preset.

Does the block jump when I change tab?

No. Every folder's panel is also drawn, invisible and inert, in the same cell as the open one, so the cell is as tall as the tallest folder and the content below never moves.

How does it work from the keyboard?

Tab moves into the row of tabs, the arrow keys move between them and open each as you go, and Home and End jump to the first and last. Tab again moves to the open panel. The row has the name "Folders", and each panel is named by its tab.

What changes between targets?

Each tab and panel takes an id, the open tab is styled by data-selected, and the starting tab is defaultSelectedKey.

The look is the same on every target.

How does it fit on a phone?

The row of tabs scrolls sideways inside the page, so a half-visible tab shows there is more, and the hairline stays under it. The panel stacks: the words first, then the stair of documents with its last card hidden. Nothing else scrolls sideways at 320 pixels.

All 170 features blocks