For the complete documentation index, see llms.txt. Markdown variants are available by appending .md to any URL or sending an Accept: text/markdown header. An agent skill is available at /.well-known/agent-skills/site-skill.md.
30
Sponsor

Ticket Tier Select

PreviousNext

Ticket tier selection with quantity controls and order summary. Shows price breakdown with fees.

General Admission

0
$50.00incl. $5.00 Fee

VIP

0
$165.00incl. $15.00 Fee

Includes backstage access

Installation

$ pnpm dlx shadcn@latest add @mcpcn/ticket-tier-select

Usage

import {
  TicketOrderSummary,
  TicketTierCheckout,
  TicketTierContent,
  TicketTierHeader,
  TicketTierOptions,
  TicketTierSelect,
} from "@/components/ui/ticket-tier-select";
<TicketTierSelect>
  <TicketTierContent>
    <div className="flex-1">
      <TicketTierHeader />
      <TicketTierOptions />
      <div className="mt-6">
        <TicketTierCheckout />
      </div>
    </div>
    <TicketOrderSummary />
  </TicketTierContent>
</TicketTierSelect>

Composition

Use the following composition to build an TicketTierSelect:

TicketTierSelect
└── TicketTierContent
    ├── TicketTierHeader
    ├── TicketTierOptions
    │   └── TicketTierItem
    ├── TicketTierCheckout
    └── TicketOrderSummary

OpenUI Integration

Install the OpenUI React packages.

pnpm add @openuidev/react-lang zod

Add TicketTierSelect to a component library and map it to the installed component.

import { createLibrary, defineComponent } from "@openuidev/react-lang";
import { z } from "zod/v4";
 
import {
  TicketOrderSummary,
  TicketTierCheckout,
  TicketTierContent,
  TicketTierHeader,
  TicketTierOptions,
  TicketTierSelect,
} from "@/components/ui/ticket-tier-select";
 
const OpenUITicketTierSelect = defineComponent({
  name: "TicketTierSelect",
  description:
    "Ticket tier selection with quantity controls and order summary. Shows price breakdown with fees.",
  props: z.object({}),
  component: () => (
    <TicketTierSelect>
      <TicketTierContent>
        <div className="flex-1">
          <TicketTierHeader />
          <TicketTierOptions />
          <div className="mt-6">
            <TicketTierCheckout />
          </div>
        </div>
        <TicketOrderSummary />
      </TicketTierContent>
    </TicketTierSelect>
  ),
});
 
export const ticket_tier_selectLibrary = createLibrary({
  root: "TicketTierSelect",
  components: [OpenUITicketTierSelect],
});

For richer generated compositions, define the child primitives separately and connect them with .ref fields. See Defining Components in the OpenUI documentation.

json-render Integration

Install the json-render React packages.

pnpm add @json-render/core @json-render/react zod

Add TicketTierSelect to a component catalog and map it to the installed component.

import { defineCatalog } from "@json-render/core";
import { defineRegistry } from "@json-render/react";
import { schema } from "@json-render/react/schema";
import { z } from "zod";
 
import {
  TicketOrderSummary,
  TicketTierCheckout,
  TicketTierContent,
  TicketTierHeader,
  TicketTierOptions,
  TicketTierSelect,
} from "@/components/ui/ticket-tier-select";
 
export const catalog = defineCatalog(schema, {
  components: {
    TicketTierSelect: {
      props: z.object({}),
      description:
        "Ticket tier selection with quantity controls and order summary. Shows price breakdown with fees.",
    },
  },
});
 
export const { registry } = defineRegistry(catalog, {
  components: {
    TicketTierSelect: () => (
      <TicketTierSelect>
        <TicketTierContent>
          <div className="flex-1">
            <TicketTierHeader />
            <TicketTierOptions />
            <div className="mt-6">
              <TicketTierCheckout />
            </div>
          </div>
          <TicketOrderSummary />
        </TicketTierContent>
      </TicketTierSelect>
    ),
  },
});

Use catalog.prompt() to constrain model output, then render the generated spec with the json-render React Renderer. See the json-render Quick Start for the provider and streaming setup.

API Reference

See the Base UI documentation for more information.