Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Carousel blocks

Pro

Event Schedule Carousel Block for Ark UI

A conference programme matrix with three room labels pinned at the start and eight half-hour columns that slide, with a Day 1 and Day 2 switch.

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

Show a programme where the rooms stay put and the hours move, with this event schedule carousel for React with Ark UI. Sessionly, a conference tool, shows a morning in three rooms as a matrix: the room names are pinned at the start while eight half-hour columns slide beside them, and each cell holds a talk's title, its kind as a Badge and the speaker's initials. The label column and the cells take their row heights from the same two constants, so the rows line up. A Segment Group in the header switches between Day 1 and Day 2 and keeps the column you were on. Three columns show from the large breakpoint, two from medium, and a phone shows one with the next peeking and moves each room's name into its cell. The foot holds the times in view ("Day 1, 09:00 to 10:30"), a row of dots and Previous and Next Buttons. The talks and people are made up.

FAQ

How do I use my own programme?

Edit ROOMS, TIMES and the two day lists. Each cell is a line, title|initials|kind, one line per room with one cell for each half hour; use -- for no speaker. HEAD and ROW are the shared heights, so change them in one place.

What does the day switch do?

It swaps the talks in every column and leaves the track where it was, so you can compare the same hour on both days. The times in the status line follow.

How does it work with a keyboard?

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

What moves the track?

Previous and Next move one column. The track is the Carousel with a controlled page, and the block counts the pages itself.

What stays local in the demo?

All of it: the talks are typed example data and nothing is saved or booked. To wire it for real, load each day's sessions from your own API and build the cells from them; the matrix and the pinned labels do not change.

How does it look on a phone?

The pinned label column is hidden and each cell shows its room above the title, one column at a time with the next peeking at the edge.

All 100 carousel blocks