Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Studio Reel Awards Block for React

Award-winning projects as film frames in a snap-scroll reel: sprocket holes, a drawn greyscale poster, and the project, client, award and year in text.

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

A film reel for React with Base UI. A start-aligned header whose end holds Previous and Next buttons sits over a band with a top rule and + marks. In it, five frames scroll sideways and snap: each is a dark strip with a row of sprocket holes along its top and foot and a drawn greyscale poster between them (SVG shapes in foreground tones, never a photo). Under each frame, in text: the project, the client, the award, and the programme with its year. The band is a focusable scroll region and never moves by itself. The clients and programmes are made up for the example.

FAQ

How do I change the projects?

Edit PROJECTS: each has a title, a client, an award, a programme, a year and a poster kind. The count in the header comes from the list.

How do I use real stills?

Replace the body of Poster with an <img> that has object-cover and a real alt, in the same box. The sprocket strip and the caption stay.

How do I move through the reel?

Swipe or scroll the band, use the arrow keys when it has focus, or press Next and Previous: each steps one frame, and a button reads as disabled at the end of the reel. Under reduced motion the step is instant.

How are the sprocket holes drawn?

A radial-gradient dot row knocked out of the dark strip: two lines of CSS, no images. The strip follows the theme.

Does it work on a right-to-left page?

Yes. The reel starts from the end side, the buttons step in the reading direction and their arrows mirror.

Are these real projects?

No. The studio, its clients and the programmes are made up for the example.

  • Pro

    Carousel Awards

    Reveal and browse

    Eight awards for a hotel booking engine in the catalog Carousel, three plaques per view, each a drawn laurel with the programme, category and a jury line, with arrows, dots and a counter.

  • Pro

    Moment Gallery Awards

    Reveal and browse

    A large drawn stage scene with the event details in its caption and a filmstrip of five moments you choose by radio buttons, in greyscale SVG, never photos.

  • Pro

    Four Columns Awards

    Cards and grids

    Four tall award columns for a sports-analytics tool, each with a drawn mark, the award, programme, category and year, over a band of three figures counted from the list: awards, programmes and years running.

  • Pro

    Client Wins Awards

    Lists and tables

    A split for a supply-planning tool: the count of awards its customers won this year and three facts at the start and, at the end, a ruled ledger of seven wins with a monogram, the award, the programme and a reported result.

  • Pro

    Masonry Awards

    Cards and grids

    Ten text-only award plaques in three CSS columns of varied heights, each with a small drawn rosette, divided by column hairlines with + marks on the top rule.

  • Pro

    Raised Card Showcase Awards

    Cards and grids

    Three awards on one raised card for a storefront platform, each row a drawn mark, the award, its programme, a one-line reason and the year, with a centred header and a Shine Button to all awards.

All 137 awards blocks