component

Folder tabs

Running live. Go ahead and touch it.

A folder bar whose tabs swap front and back, with an action slot and an entrance that wipes up.

See it in the design system

How it behaves

  • Tabs are buttons with aria-pressed
  • The active label rises in on change
  • Instant under reduced motion

Find more that moves like this

Kind
component
Blueprint
atelier 1.0.5
Moves by
entrance, hover

You can see this at work in Pallet Ross.

Import

import { FolderTabs } from "@/components/shared/animation/folder-tabs";

Props

PropWhat it does
tabsTabs with id and label
activeId, onActiveChangeThe selected tab
labelAccessible name for the group
actionSlot at the right of the back row
introWipes up on arrival. Defaults to false
introDelayDefaults to 0
classNameIts font size scales the bar

Your agent builds it. You take the credit.

Folder tabs ships inside the Pallet Ross blueprint. These instructions tell your agent to take only this piece.

Version
1.0.5
Files
190
Dependencies
20
Assets
34

Paste this into Claude Code, Codex, Cursor, or whichever agent you trust today.

  • Building a blueprint runs its code, so use an isolated environment.
  • License: UNLICENSED.
  • Logo names and the spotlight profile name come from a design reference and are not real endorsements. Replace them before any public release.
  • The design and some images derive from a third-party reference. Confirm the rights to the design and images before any public release.
  • Buttons and navigation links have no destinations yet; they are presentational in the original too.
website

Pallet Ross

A creative network landing page where one set of cards travels through pinned scroll stages, from arc to cascade to grid.

component

Spotlight mosaic

A staggered mosaic that opens from its center around one large card; pick a tile and the two trade places.

website

Sixpay

A fintech homepage with detail panels in the navbar, a phone between tilted photos, rotating feature tabs, and a looping carousel of customer stories.

website

Artify AI

A dark AI image generator homepage with a floating navbar, a staircase of images that climbs and separates on scroll, and a drifting row of partner logos.