CTA Ticket
RSVP block where visitors tear a ticket along its perforation to claim a seat.
- Type: CTA section
- Styles: Dark, Colorful
- Licence: Charcoal UI Pro
About CTA Ticket
CTA Ticket asks visitors to claim a seat by tearing a ticket stub. When they do, a confirmation appears with their code. It is a small moment of play that makes an RSVP feel like an event already.
It is a full-width cta section for React and Tailwind CSS 4, in a dark and colorful style. Preview it at any width above, then install it with one command.
When to use CTA Ticket
- Launch events and meetups.
- Conference early-bird offers.
- Fan club presales.
- Webinars and live streams.
How it is built
Built on Ticket Card, with the tear handled by its own drag gesture. Event, venue, date, seat and code are props.
It is composed from Ticket Card, so installing it also installs those components, and you can restyle each one the same way you would on its own.
Goes well with CTA Ticket
CTA Ticket is part of 3 full templates, so you can see it in a finished page.
- Halden template: A band site: album, tour, merch.
- Launch Night template: One evening, one RSVP.
- Gather template: Monthly meetups, sorted.
- CTA Ember: A React closing CTA band with rising embers and a shimmering button
- CTA Landscape: A React CTA card with a moonlit photo, metal headline and liquid-metal button
- CTA Newsletter: A React newsletter CTA that validates inline and confirms with a drawn check
- CTA Download: A React app download CTA with store buttons and a QR code for desktop
- Ticket Card: A React ticket card with a notched edge, barcode and tear-off stub
Install CTA Ticket
npx shadcn@latest add @charcoal/cta-ticketCTA Ticket 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 CTA Ticket 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
- Ticket Card: A ticket with a perforated stub: notched edges, a barcode drawn from the code text, and a stub that tears off along the perforation when clicked.