Manila Folder Tab Row Features Block for React

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.

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.

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.

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.

The open tab is styled by the data-active attribute and the tabs take a value.

The look is the same on every target.

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.