Does Event Tickets work with Next.js?

Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.

Can I change the copy and colours?

Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.

Event Tickets

Ticket tiers with sold-out bars and quantity steppers, totalled into one checkout bar.

Type: Events section
Styles: Dark, Enterprise
Licence: Charcoal UI Pro

About Event Tickets

Event Tickets shows each pass with its perks, a bar of how much has sold and a quantity stepper, then totals everything with fees into a checkout bar at the bottom.

It is a full-width events section for React and Tailwind CSS 4, in a dark and enterprise style. Preview it at any width above, then install it with one command.

When to use Event Tickets

Conferences and festivals.
Concerts and tours.
Workshops and classes.
Film screenings and passes.

How it is built

Uses Stepper and Progress, flags tiers that are almost gone, and the fee rate is a prop.

It is composed from Button, Progress, Stepper, so installing it also installs those components, and you can restyle each one the same way you would on its own.

Goes well with Event Tickets

Event Tickets is part of 2 full templates, so you can see it in a finished page.

Signal template: Sell out a conference.
Reel template: Ten days, ninety films.
Event Schedule: A React event agenda with day tabs, track filters and bookmarks
Event Speakers: A big-type React speaker list with a duotone card for the focused speaker
Button: An animated React button with six variants, spring press feedback and a width-stable loading state
Progress: Animated React progress bars and rings on springs, with an indeterminate sweep
Stepper: An animated React number stepper whose digits roll in the direction you press

Install Event Tickets

npx shadcn@latest add @charcoal/event-tickets

Event Tickets is part of Charcoal UI Pro: one seat covers all 107 sections, 100 templates and 300 Pro components, for unlimited projects. The command installs the section into components/sections along with every component it uses.

Frequently asked questions

Does Event Tickets work with Next.js?: Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.
Can I change the copy and colours?: Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.

Built from

Button: Six variants with spring press feedback. The loading state swaps the label for a spinner without changing width.
Progress: Linear and circular progress on a spring, with an optional indeterminate sweep.
Stepper: Number stepper whose digits roll in the direction you press. Hold a button to repeat.

Event Tickets as Markdown