Reel: Film festival template
Ten days, ninety films.
For festivals and cinemas: a cinematic hero, programme accordion, a screening schedule by day, pass tiers with sell-out bars, press and a box-office footer.
About the Reel template
Reel is for festivals and cinemas. A cinematic trailer hero, a programme accordion by strand, a screening schedule by day, passes with sell-out bars, press quotes and a box-office footer.
Ten days, ninety films. It is a complete film festival landing page for React and Tailwind CSS 4, assembled from 7 Charcoal UI sections.
Who Reel is for
- Film festivals.
- Independent cinemas.
- Documentary and shorts showcases.
- Arts festivals.
What is inside
7 sections, top to bottom:
- Navbar Floating: A glass pill that hides on scroll down, with a gliding hover highlight and a mobile sheet.
- Hero Film: Cinematic hero with slow Ken Burns stills, film grain, a play control and chapter markers.
- Gallery Accordion: Destinations as an image accordion: hover a slim panel and it opens wide with its details.
- Event Schedule: Conference agenda with day tabs, track filters and bookmarks that build your own schedule.
- Event Tickets: Ticket tiers with sold-out bars and quantity steppers, totalled into one checkout bar.
- Press Quotes: As-seen-in strip where outlet wordmarks act as tabs for a large rotating serif quote.
- Footer Contact: Studio footer with a giant email link, address, hours, live local time and a huge faded wordmark.
How it is built
Strands, screenings and passes are props. Every section is a separate Charcoal UI section, so you can reorder, remove or restyle any of them, and the accent colour is one CSS variable on the page wrapper.
Install Reel
npx shadcn@latest add @charcoal/reelTemplates are part of Charcoal UI Pro. One seat covers all 100 templates, 107 sections and 300 Pro components. The command installs the page and every section and component it uses, so it runs the moment it lands.
Frequently asked questions
- Can I use Reel for a client site?
- Yes. A Pro seat covers unlimited personal and commercial projects, client work included.
- Is Reel a Next.js template?
- It is a React 19 page that works in Next.js (App Router or Pages Router), Vite, Remix and Astro. Drop it into a route and it renders.
Sections in this template
- Navbar Floating: A glass pill that hides on scroll down, with a gliding hover highlight and a mobile sheet.
- Hero Film: Cinematic hero with slow Ken Burns stills, film grain, a play control and chapter markers.
- Gallery Accordion: Destinations as an image accordion: hover a slim panel and it opens wide with its details.
- Event Schedule: Conference agenda with day tabs, track filters and bookmarks that build your own schedule.
- Event Tickets: Ticket tiers with sold-out bars and quantity steppers, totalled into one checkout bar.
- Press Quotes: As-seen-in strip where outlet wordmarks act as tabs for a large rotating serif quote.
- Footer Contact: Studio footer with a giant email link, address, hours, live local time and a huge faded wordmark.