shadcn.io is not affiliated with official shadcn/ui
Indexed Sidebar Detail View Features Block for React
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 Base UI, 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. Base UI tabs open on focus here as well, so the arrow keys behave the same as on the other libraries.
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.
Related
- Pro
Category Rail Detail Panel Features
Tabs and accordionsA features section for a knowledge base as a working tree: a rail of three categories and six features beside a detail panel with the selected feature's sentence, three ticks and a small drawing.
- Pro
Vertical Tab Accordion Preview Features
Tabs and accordionsA features section for an admin console in three panes: a vertical tab rail of five categories, an accordion of that category's features, and a console screen on the end side that outlines the row of the open feature.
- Pro
Manila Folder Tab Row Features
Tabs and accordionsA 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.
- Pro
Tab Swap Split Showcase Features
Tabs and accordionsA features section for a release tool: a line tab switch (Plan, Ship, Review) that swaps one split band, with a drawing flush to the start rail and the copy on the end side.
- Pro
Role Tabs Testimonials
Logos and facesVertical tabs of four personas in a closing band: a list of roles at the start, a divider, and the open role's quote and three things it looks for, with a Shine Button in the header.
- Pro
Accordion FAQ Features
Tabs and accordionsA features section for an API gateway told as six capability questions in an accordion beside a sticky side header, each answer a sentence and a small drawing of the capability at work.