# Ticket Tier Select

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

> For the complete documentation index, see [llms.txt](/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](/.well-known/agent-skills/site-skill.md).



<ComponentPreview name="ticket-tier-select" src="examples/ticket-tier-select-demo.tsx" />

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @mcpcn/ticket-tier-select
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps className="mb-0 pt-2">
      <Step>
        Install the component dependencies:
      </Step>

      ```bash
      npm install lucide-react
      ```

      <Step>
        Copy and paste the component into your project.
      </Step>

      <ComponentSource name="ticket-tier-select" title="components/ui/ticket-tier-select.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

## Usage [#usage]

```tsx
import {
  TicketOrderSummary,
  TicketTierCheckout,
  TicketTierContent,
  TicketTierHeader,
  TicketTierOptions,
  TicketTierSelect,
} from "@/components/ui/ticket-tier-select";
```

```tsx
<TicketTierSelect>
  <TicketTierContent>
    <div className="flex-1">
      <TicketTierHeader />
      <TicketTierOptions />
      <div className="mt-6">
        <TicketTierCheckout />
      </div>
    </div>
    <TicketOrderSummary />
  </TicketTierContent>
</TicketTierSelect>
```

## Composition [#composition]

Use the following composition to build an `TicketTierSelect`:

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

## OpenUI Integration [#openui-integration]

Install the OpenUI React packages.

```bash
pnpm add @openuidev/react-lang zod
```

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

```tsx showLineNumbers
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](https://www.openui.com/docs/openui-lang/defining-components) in the OpenUI documentation.

## json-render Integration [#json-render-integration]

Install the json-render React packages.

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

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

```tsx
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](https://json-render.dev/docs/quick-start) for the provider and streaming setup.

## API Reference [#api-reference]

See the [Base UI](https://base-ui.com/react/overview/quick-start) documentation for more information.