shadcn.io is not affiliated with official shadcn/ui
Code Snippets Carousel Block for Radix UI
Four saved snippets (client.ts, server.ts, schema.sql and deploy.sh) behind file tabs, each a dark code pane with a language word, a note and a Copy button that puts the real code on the clipboard.
Installation
Overview
Keep related files together with this code snippets carousel for React with Radix UI. Snipcrest, a snippet library, shows four files a user saved together under one row of file tabs: client.ts, server.ts, schema.sql and deploy.sh. Each tab opens its slide, a panel with a language word, a one-line note, a Copy Button and a code pane of fixed height that scrolls inside itself, with line numbers and a few colours drawn from your theme. The pane is dark on purpose, in a light theme too, because code reads best that way; the rest of the panel follows the theme. A press or an arrow key on a tab moves the track, and a swipe or the Previous and Next Buttons move the tab. On a phone the tab row scrolls sideways. The ruled bands come from Guides. It's built from Carousel, Badge, Copy Button, Button and Guides, with CSS transitions only. The snippets and the product are made up.
FAQ
How do I use my own snippets?
Edit SNIPPETS. Each has an id, a file name for the tab, a language word, a note and lines, an array of strings with one string per line of code. The tabs, the slides, the line numbers, the colours and the Copy text are all made from that array, so nothing is typed twice. Keep the notes about the same length so the slides line up.
How does it work with a keyboard?
Tab reaches the tabs, then Previous and Next. Only the open tab is a tab stop; the Left and Right arrow keys (mirrored in a right-to-left layout) move to the next or previous tab and open it, and Home and End jump to the first and last. Previous and Next stay in the tab order at the ends and are marked as unavailable instead of disabled, so focus never disappears. Slides that are out of view are hidden from the tab order and from screen readers.
What does Copy do?
It puts the file's lines, joined with line breaks, on the clipboard and the foot line says "Copied server.ts". Clipboard access needs a page served over HTTPS; if the browser refuses, the button shows a cross and nothing is changed.
What is announced when it moves?
The foot line is the block's one polite live region: after each move a screen reader hears it, for example "File 2 of 4: server.ts". The track itself is silent, so the same slide is not read twice.
What stays local in the demo?
The four snippets are typed example code for a made-up product, and nothing is fetched, saved or run. To wire it for real, load a user's snippets from your own API into SNIPPETS and keep the rest as it is; add the language to the keyword list if you colour more than these four.