Ticketlayer Elements
Elements are web components (custom HTML tags prefixed tl-) that list events,
take a customer through ticket selection, cart and checkout, and show the
tickets they bought. They work in plain HTML, in Webflow or any site builder
that lets you add a script tag, and in React through the generated wrappers in
@ticketlayer/elements-react.
Every element binds to the Live client the page publishes on
window.Ticketlayer. Elements take no API key of their own: create the client
once (the CDN loader does this from its data-* attributes, or call
createLiveClient() from @ticketlayer/live) and the elements find it.
Get them onto the page
CDN, no build step. One script tag loads the Live SDK, the Elements bundle and the hosted checkout modal. The tags below then just work.
<script src="https://cdn.ticketlayer.com/v1/ticketlayer.js"
data-publishable-key="tlpk_..."
data-api-url="https://live.staging.t9r.dev"
data-checkout-base="https://hbo.staging.t9r.dev"></script>
<tl-event-list columns="3"></tl-event-list>
See the HTML quickstart for the attributes each environment needs today.
npm, for React and bundlers.
npm install @ticketlayer/live @ticketlayer/elements @ticketlayer/elements-react
import { createLiveClient } from '@ticketlayer/live';
import { defineCustomElements, TlEventList } from '@ticketlayer/elements-react';
defineCustomElements(); // once, after hydration
await createLiveClient({ baseUrl: 'https://live.staging.t9r.dev', publishableKey: 'tlpk_...' });
<TlEventList columns={3} onTlEventClick={(e) => console.log(e.detail.eventId)} />
@ticketlayer/live, @ticketlayer/elements and @ticketlayer/elements-react
are built in their repositories but are not on the public npm registry yet;
they publish once their release workflows run. Until then use the CDN build,
which staging serves at cdn.staging.t9r.dev. See the
Vite quickstart for the workaround in the meantime.
Elements
Discovery
List and present events.
| Element | React | What it does |
|---|---|---|
<tl-event-card> | TlEventCard | |
<tl-event-list> | TlEventList | |
<tl-occurrence-selector> | TlOccurrenceSelector | A smart occurrence selector component that fetches and displays event occurrences from the Ticketlayer API. |
Purchase
Choose a date, pick tickets, open the buy flow.
| Element | React | What it does |
|---|---|---|
<tl-buy-modal> | - | |
<tl-buy-tickets-button> | TlBuyTicketsButton | |
<tl-buy-tickets-wrapper> | TlBuyTicketsWrapper | |
<tl-promo-code> | TlPromoCode | tl-promo-code - an input plus Apply button that redeems a presale or promo code for the current cart (POST /sales/presale-codes/redeem through the SDK). |
<tl-seat-map> | TlSeatMap | |
<tl-ticket-selector> | TlTicketSelector |
Cart
Show and edit what the customer is about to buy.
| Element | React | What it does |
|---|---|---|
<tl-cart> | TlCart | |
<tl-cart-badge> | TlCartBadge | |
<tl-cart-drawer> | TlCartDrawer |
Checkout
Hand off to the hosted checkout and confirm the order.
| Element | React | What it does |
|---|---|---|
<tl-checkout-wrapper> | TlCheckoutWrapper | |
<tl-order-confirmation> | TlOrderConfirmation | tl-order-confirmation - the "thank you" page block: order reference, customer email, event and date, ticket lines, totals, then the tickets themselves (tl-order-tickets, each with a Download PDF link) |
Tickets
Render issued tickets with QR codes and PDF downloads.
| Element | React | What it does |
|---|---|---|
<tl-order-tickets> | TlOrderTickets | tl-order-tickets - renders all the tickets for an order as scannable QR cards with PDF download. |
<tl-ticket> | TlTicket | tl-ticket - a single event ticket: a scannable QR (the redemption token), ticket name / seat / holder, and a PDF download. |
Account
Sign in with a magic link and show past orders.
| Element | React | What it does |
|---|---|---|
<tl-login> | TlLogin | tl-login - magic-link sign-in. |
<tl-my-orders> | TlMyOrders | tl-my-orders - the signed-in customer's orders (GET /sales/my-orders through the SDK): event, date, ticket count, total and status per row. |
Events
Every element emits CustomEvents whose names start with tl and whose
payload is on event.detail. In HTML:
<tl-event-list></tl-event-list>
<script>
document.querySelector('tl-event-list').addEventListener('tlEventClick', (e) => {
location.href = '/events/' + e.detail.eventId;
});
</script>
In React each event is a prop named onTl...:
<TlEventList onTlEventClick={(e) => ...} />.
Theming
Elements read CSS custom properties prefixed --tl-. The Live SDK injects the
values of the channel's theme (configured in Backstage) when
applyTheme is on, which it is by default; set any token yourself on
:root or on a wrapper to override. The defaults below come from the
Elements global stylesheet and apply when nothing else sets the token.
General
| Token | Default |
|---|---|
--tl-font-family | system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif |
--tl-font-family-mono | ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace |
Colours
| Token | Default |
|---|---|
--tl-primary | #6366f1 |
--tl-primary-foreground | #ffffff |
--tl-secondary | #f3f4f6 |
--tl-secondary-foreground | #111827 |
--tl-background | #ffffff |
--tl-foreground | #111827 |
--tl-muted | #f9fafb |
--tl-muted-foreground | #6b7280 |
--tl-border | #e5e7eb |
--tl-success | #10b981 |
--tl-success-foreground | #ffffff |
--tl-warning | #f59e0b |
--tl-warning-foreground | #ffffff |
--tl-error | #ef4444 |
--tl-error-foreground | #ffffff |
Shape
| Token | Default |
|---|---|
--tl-radius-sm | 0.25rem |
--tl-radius-md | 0.5rem |
--tl-radius-lg | 0.75rem |
Spacing
| Token | Default |
|---|---|
--tl-spacing-1 | 0.25rem |
--tl-spacing-2 | 0.5rem |
--tl-spacing-3 | 0.75rem |
--tl-spacing-4 | 1rem |
--tl-spacing-6 | 1.5rem |
--tl-spacing-8 | 2rem |
:root {
--tl-primary: #0f766e;
--tl-primary-foreground: #ffffff;
--tl-radius-md: 0.25rem;
--tl-font-family: 'Inter', system-ui, sans-serif;
}
Elements render in shadow DOM, so ordinary CSS selectors from the page do not reach inside them; the tokens are the styling contract.