Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Carousel blocks

Pro

Movie Cards Carousel Block for Vue

Eight invented films as drawn posters in narrow cells; choosing one widens it to show the director, a short plot and an Add to watchlist toggle, with ratings as five stars and a word and a running watchlist count.

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 a film club browse posters and open one for the details, with this movie cards carousel for Vue with Ark UI. Cinemoor, a film-club app, lists eight films as narrow cells. Each poster is drawn from shapes in your theme's foreground weights, a pattern under a lettered title block, never a photograph, and carries the title, the year and runtime, and a rating as five stars (solid, half or hollow) and a word (Outstanding, Very good, Good, Mixed). Choosing a cell widens it to show the director, a two-line plot and an "Add to watchlist" Toggle while the others stay narrow, and the track brings it to the start and re-measures when the width has finished changing. A bookmark marks listed posters and the foot counts them. Previous, Next and the arrow keys choose the neighbouring film. On a phone the open cell takes most of the width and the next one peeks. The films, people and plots are made up.

FAQ

How do I use my own films?

Edit FILMS. Each has an id, a title, a year, a runtime in minutes, a rating in half-stars out of ten (9 is 4.5 stars), a director, a plot, two or three letters for the title block and a pattern (blocks, dots, grid, rings, stripes, steps, sun or waves). With real posters, swap the Poster drawing for an img with a 2:3 ratio.

How does the widening work?

The open cell's width is the state: basis-[min(22rem,82%)] against basis-[9.5rem], with a CSS transition that is off under reduced motion. The cell is aria-expanded, and the track re-measures when the transition ends so the snap points follow the new widths.

What does Add to watchlist do?

It toggles a local list. The poster gets a bookmark, the toggle's label changes to "On your watchlist", and the foot's status line counts the films listed. Nothing is saved.

How does it work with a keyboard?

Tab reaches each poster button, the open cell's toggle, Previous and Next. Enter or Space on a poster opens it. The arrow keys, Home and End choose the neighbouring film (mirrored in a right-to-left layout), and the track follows. The Carousel's page follows the open cell and re-measures after the width changes.

What stays local in the demo?

Everything: the films, ratings and the watchlist. To wire it for real, load films from your catalogue and save the watchlist to the member's account.

How does it look on a phone?

The open cell takes most of the width with the next poster peeking at the edge; the others stay narrow. The foot's sentence and the two buttons share a line.

All 100 carousel blocks