Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Carousel blocks

Pro

Social Feed Carousel Block for Ark UI

Twenty-four short posts shown one at a time with the next peeking, five dots in a sliding window, and a Go to post number field that jumps from post 3 to post 19 and stays in step with the track.

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 readers move through a stream one post at a time and still get anywhere fast, with this social feed carousel for React with Ark UI. Chitterbox, a micro-blog, has twenty-four short posts on a ruled track, one per view with the next cut off at the edge as the cue. Each post is a cell with an initials Avatar, the name and handle, a fixed time, two or three lines of text, and reply, boost and like counts. The foot band shows "Post 3 of 24", Previous and Next buttons, and only five dots at a time in a window that slides with the page. A second band holds a "Go to post" Number Input and a Go Button: type 19 and the track goes to post 19. The field and the track stay in step both ways, so moving the track changes the number, and a number out of range clamps to the first or last post. It's built from Carousel, Number Input, Avatar, Button and Guides, with CSS transitions only. The people and posts are made up for the example.

FAQ

How do I load my own posts?

Edit POSTS, kept newest first. Each has an id, a name, initials and handle, an ISO time in UTC, the text, and typed counts for replies, boosts and likes. The total, the pages, the dots and the range of the number field all derive from the list's length. Keep posts to about three lines, since the cell holds a fixed height for them and clamps the rest.

How does Go to post work?

Type a number from 1 to 24 and press Go or Enter, and the track moves to that post. A number out of range moves to the nearest end (typing 40 goes to post 24) and an empty field goes to the first. The field shows the current post as you move the track by buttons, dots, keys or a swipe, and what you type stays until the track moves. The track is the Carousel's controlled page, so the field and the track share one number.

How does it work with a keyboard?

Tab reaches Previous, Next, the dots and then the number field. With focus on the buttons or dots the arrow keys move the track (mirrored in a right-to-left layout), and Home and End jump to the first and last post. In the number field the arrow keys edit the number, so the track stays put until you press Enter or Go. Posts out of view are hidden from the tab order and from screen readers.

What is announced when it moves?

The status below the track is the block's one polite live region: it says "Post 19 of 24" after every move, however it was made. The track itself is silent.

What stays local in the demo?

All of it: the posts and counts are typed, the counts do not change, and nothing is fetched or posted. To wire it for real, load posts from your own API in pages as the reader nears the end and keep POSTS as the loaded part; the field's maximum is the loaded count.

How does it work in a right-to-left page?

The track runs right to left, the chevrons mirror, and the arrow keys follow the reading direction. The number field keeps its digits in order, and Arabic-Indic digits typed in it are read as numbers.

All 100 carousel blocks