Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Carousel blocks

Pro

Restaurant Menu Carousel Block for Svelte

Eight harbour-restaurant dishes in three sections on a two-up track, with a section rail that jumps and follows, a native select on phones, prices from integer cents and dietary marks.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Let diners jump to a section of a menu without losing their place, with this restaurant menu carousel for Svelte with Ark UI. Saltbox Kitchen, a harbour restaurant, lists eight dishes in Starters, Mains and Desserts on a two-up ruled track. Each cell shows dietary marks as a glyph and a word (Vegan, No gluten, Spicy), the name, a price in tabular figures, two lines of description and a "Popular" dot in foreground weight. A rail at the start lists the sections with their counts and marks the one in view; choosing a section scrolls the track to it, and the rail follows when you drag. On a phone the rail becomes a Native Select above the track. The foot holds the counter, a dot for each step and Previous and Next Buttons. The bands are ruled by Guides. The restaurant and its dishes are made up for the example.

FAQ

How do I add my own dishes?

Edit DISHES, grouped by section. Each has an id, a section, a name, a note, a price in whole cents cents, a diet list (vegan, gluten, spicy) and a popular flag. Prices are integer cents through one helper, so "$9.50" is 950. Add a section by adding its name to SECTIONS.

How does the rail follow the track?

The current section is the section of the first whole dish, or of the last one on the final page. A jump to a section that cannot reach the start of the track keeps that section current until the track moves again. The jump sets the Carousel's controlled page.

How are dietary marks shown?

Each mark is a small glyph and a word, never a colour on its own. A dish with no marks keeps an empty line, so every card has the same height.

How does it work with a keyboard?

Tab reaches the controls and Previous and Next. With focus inside the track's panel, the arrow keys move the track (mirrored in a right-to-left layout) and Home and End jump to the first and last page. Previous and Next stay in the tab order at the ends and are marked as unavailable instead of disabled, so focus never disappears. Cells that are out of view are hidden from the tab order and from screen readers.

What stays local in the demo?

Everything. The dishes and prices are typed example data and nothing is ordered. To wire it for real, load the menu from your point-of-sale system into DISHES and keep the section helpers as they are.

How does it look on a phone?

The rail is replaced by a native select above the track, which does the same jump and follows the track. One dish shows with the next peeking at the edge.

All 100 carousel blocks