shadcn.io is not affiliated with official shadcn/ui
Component Library Carousel Block for Radix UI
Twelve documented components on a hairline track, two at a time, each drawn as a miniature with a props table, a typed snippet with Copy and a status word, plus an Overview that shows all twelve as tiles at the same height.
Installation
Overview
Browse a design system one part at a time, or all at once, with this component library carousel for React with Radix UI. Modulane, a component documentation tool, lists twelve parts (Button, Badge, Input, Switch, Checkbox, Slider, Tabs, Avatar, Progress, Tooltip, Dialog and a deprecated Legacy select). Each hairline cell is a miniature drawn in your theme's foreground weights, the part's name, a status as a glyph and a word (Stable, Beta, Deprecated), its variants and bundle size, a three-row props table, a typed usage snippet with a Copy Button and a View docs button. A Segment Group in the toolbar band switches the band between the track and an Overview of all twelve compact tiles; both views share one grid cell, so the panel never changes height, and choosing a tile returns to the track on that component. Two cells show from the medium breakpoint, one with the next peeking on a phone. It's built from Carousel, Segment Group, Copy Button, Button and Guides. The components, sizes and dates are made up.
FAQ
How do I list my own components?
Edit PARTS. Each has an id, a name, a status, a tenths bundle size (24 is 2.4 kB), a variants line, three props rows, a snippet string and a look: lines of tone x y width height radius in a 120 by 56 box (tone s strong, m mid, f faint, b background, l outline). The counts in the toolbar and the bundle total in Overview are worked out from the list, so nothing is typed twice.
How does Overview keep the same height?
The track and the tile grid sit in one grid cell. The one you are not looking at is invisible, inert and aria-hidden, so it still takes up its space and is not reachable. Choosing a tile switches back to the track, brings that component into view and puts focus on its name.
What does Copy do?
It puts the snippet on the clipboard with the Copy Button and the counter's second line says which snippet was copied, in the block's one polite status region. View docs does nothing but say so, because the docs live on your own site.
How does it work with a keyboard?
Tab reaches the view switch, each visible Copy and View docs button, Previous, the dots and Next. With focus in the track, the arrow keys move it by one page (mirrored in a right-to-left layout) and Home and End jump to the first and last page. Previous and Next are marked unavailable at the ends instead of disabled. Cells out of view are hidden from the tab order and from screen readers.
The step is Embla's slidesToScroll; the track re-measures when it changes.
What stays local in the demo?
Everything. The list is typed example data, Copy only touches the clipboard and nothing is fetched. To wire it for real, generate PARTS from your docs build (the props from your type definitions, the sizes from your bundle report) and open the real docs page from View docs.