shadcn.io is an independent project built on shadcn/ui
Installation
Overview
An index card file features section for React with React Aria. A split with a hairline divider: on the start side a compact heading and three short points, sticky on wide screens; on the end side a wallet-style stack of five studio contact cards for a contacts tool. The cards overlap, so only each card's title strip shows (an avatar, the studio and who to ask for), and opening one slides it forward with a deeper shadow and reveals its email, phone, base and services while the cards beneath step down. It's built on Accordion, so it is a real single-open disclosure group, with Avatar, Badge and Guides, and your theme's tokens for every colour. For directories, team and contact lists and any set of records that earn a detail view.
FAQ
How do the cards overlap?
Each accordion item has a -mt-4 margin so it overlaps the previous card by one rem, and a shadow cast upward so the cards read as layers. The open card is lifted with z-10, a deeper shadow and a mb-4 margin, so the next card doesn't cover its foot. The open state is read with has-aria-expanded, which every target's trigger sets, so there is one set of classes for all of them.
How do I change the contacts?
Edit STUDIOS: each has a name, a contact and role, an email, a phone, a base and its services. The first studio is open on load; change the default value in the Accordion to open another, or to none.
React Aria's items take an id, and the group takes defaultExpandedKeys.
Is it accessible?
Each strip is a button in a heading (the studio's name), with aria-expanded and the details in its panel. Only one card is open at a time, and Tab, Enter and Space work on every target.
What happens with reduced motion?
The margin and shadow transitions are off. The panel's own height animation comes from the accordion: on Ark and Radix it respects the setting, while Base UI and React Aria still animate the height.
