Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Calendar blocks

Pro

Movie Releases Calendar Block for React

Twelve fictional film releases grouped by their opening Friday, with genre shapes and words, a genre filter, bookmark toggles and an All or Watchlist switch that counts your saved titles.

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

Keep track of what is opening and what you want to see with this movie release calendar for React with Base UI. Twelve fictional films are grouped under the four Fridays they open, 16, 23 and 30 October and 6 November 2026, each heading saying how many days away it is from Wednesday 14 October. A title shows a drawn lettered tile where a poster would be, its genre as a shape and a word, and its runtime. A Toggle Group filters by genre, several at once, and a bookmark Toggle on every row adds the film to your watchlist. A Segment Group switches between All releases and Watchlist and counts what you have saved. The list sits in a fixed-height region, so filtering never moves the frame, and an Empty state covers a combination that matches nothing. The bands are ruled by Guides. For cinema listings, streaming guides and release trackers.

FAQ

How do I list my own films?

Edit FILMS: each has a title, a genre id from GENRES, a runtime in minutes and an opens date. Put the Fridays in FRIDAYS; the group headings, the "in N days" words and the lettered tiles are worked out from them. Titles here are invented, so replace them freely.

Why are genres shapes and not colors?

A color alone can't be told apart by everyone, so each genre has its own shape or pattern and a word beside it. The same marks are on the filter buttons and on the rows.

Where are the posters?

There are none: a drawn tile with the title's first letters stands in for each, so the block carries no photos. To use real artwork, swap the tile in FilmRow for an image with a text alternative.

What happens when I remove a film in the Watchlist view?

It stays in the list until you change the view or a genre, so you can undo the mistake with the same button and keyboard focus stays where it was. The status line says it was removed.

How do the filters combine?

The genre filter and the All or Watchlist switch both apply: a film must match one of the chosen genres, or any genre when none is chosen, and must be saved if you are on the watchlist. The count at the top reads "N of 12 titles".

What stays local, and how do I wire it up?

Everything. The watchlist lives in the page and resets on reload, and nothing is booked or sent. To make it real, store the ids from save against the signed-in user and start START_WATCH from there.

All 100 calendar blocks