Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Chat blocks

Pro

Movie Night Chat Block for Radix UI

A film-club thread of suggestion cards with drawn posters and up and down votes, a picker to add a film, and an end pane that ranks tonight's films by net votes.

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

Pick tonight's film in the thread, with this movie night chat for React with Radix UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Couchside, a movie-night group: Message rows from three friends and you, with suggestion cards between them. A card holds a drawn greyscale poster (three shapes, never a photo), the title, the year and runtime, a genre Badge, an up and a down vote and the three friends' votes as initials with a glyph. The composer is a Native Select that lists the films not yet in the thread and a Shine Button, the only colored control, that adds the card. The end pane, "Tonight's order", ranks the films by net votes, marks the leader and gives ties to the earlier suggestion; there is no pick button, the ranking is the result. The frame is ruled by Guides, and everything moves with CSS only. For a film club, a game-night group or any thread that settles on one choice.

FAQ

How is the order worked out?

Net votes are your vote plus the three friends' typed votes, once they have landed. The films sort by net votes and ties go to the film suggested first, which the pane says in a line. The ranking is worked out again at every vote, so there is nothing to press to decide.

How do I add a film?

Choose one from the picker, which lists only the films not yet in the thread, and press Add. Its card is posted as yours, a friend answers a second later with a line of chat and the three friends' votes land. When all eight are in, the picker is disabled and the status line says so.

How do I change the films?

Edit FILMS: a title, a year, a runtime, a genre, one of four drawn posters, the friends' typed votes and a line for a friend to say. Replace the poster drawing with an image if you have artwork, and keep the title beside it.

What stays in the page, and how do I make it real?

Everything. Votes and the thread are state and the friends' votes are typed. To wire it for real, send each vote from vote to your server and replace the typed votes with the ones it returns.

Is it usable with a keyboard and a screen reader?

Each vote is a button named for its film with a pressed state, the friends' votes are a list with a glyph and a hidden word, ranks are words and the picker is a native select with a label. The log is a focusable region announced as a log.

How does it look on a phone?

A toggle under the top bar switches between the chat and the order ("Order (4)"); only one shows at a time and the window keeps its height. From md up, the pane sits beside the thread.

All 200 chat blocks