shadcn.io is not affiliated with official shadcn/ui
Indexed Sidebar Detail View Features Block for React Aria
A features section for a parts catalog in vertical tabs lettered A to F: each family opens a spec sheet of four specs beside a small bar chart of the price at each quantity break.
Installation
Overview
A features section for React with React Aria, shaped like a catalog index. A list at the start holds six part families, each with a letter tile (A to F), its name and how many parts it holds; the open family's spec sheet is at the end. The sheet is one card of shared hairlines: a data list of four specs beside a bar chart of the unit price at each quantity break, with the saving at the foot. A divider that meets the page's top rule with a plus mark separates the list from the sheet, and every sheet is sized by an unseen copy, so switching families never moves the page. It's built from Tabs, Data List, Badge and the Guides line kit, with your theme's tokens for every colour and no button. For catalogs, spec-heavy products and any feature set that reads like a reference.
FAQ
How do I change the families and their specs?
Edit FAMILIES at the top of the file. Each family has a letter, a name, a part count, a stock label, a summary, four specs (a label and a value each) and four price breaks (a quantity and a unit price in dollars). The chart's bar heights, its caption and the saving at the foot are all worked out from the breaks, so they can't drift from the numbers.
Is the chart accessible?
The chart is one image with a label built from the data ("Unit price of ceramic capacitors by quantity: $0.18 at 1, ..."), and its bars are drawn with CSS, not a chart library. The prices and quantities are also printed on the chart itself, and the left-to-right order stays the same in a right-to-left layout.
How does it work from the keyboard?
Tab enters the list on the open family, the Up and Down arrows move between families and open each as they go, and Tab again moves into the sheet. Home and End jump to the first and last family.
Does the page jump when I switch family?
No. Each sheet is also drawn once, unseen, in the same grid cell as the open one, so the cell is as tall as the tallest sheet. Those copies are hidden from assistive technology and can't be focused.
What moves, and what happens with reduced motion?
The header and the list fade up once on load, and each sheet fades up as it opens. With reduced motion all of it is off and the sheet simply changes.
How does it fit on a phone?
The list becomes a row of six lettered tiles that scrolls sideways if the screen is narrower than the row, above the sheet. The names stay in the markup for screen readers, and the sheet's heading names the open family. The specs and the chart stack, and nothing scrolls the page sideways at 320 pixels.