# Event Detail

Full event detail view with organizer info, interactive map, policies, and ticket purchase. Fullwidth mode only.

> 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="event-detail" src="examples/event-detail-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/event-detail
    ```
  </TabsContent>

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

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

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

      <ComponentSource name="event-detail" title="components/ui/event-detail.tsx" />

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

## Usage [#usage]

```tsx
import {
  EventDetail,
  EventDetailActions,
  EventDetailAiMatch,
  EventDetailContent,
  EventDetailDescription,
  EventDetailFaq,
  EventDetailGallery,
  EventDetailGoodToKnow,
  EventDetailHeader,
  EventDetailLineup,
  EventDetailMap,
  EventDetailOrganizer,
  EventDetailPolicies,
  EventDetailRelated,
  EventDetailReport,
  EventDetailTickets,
} from "@/components/ui/event-detail";
```

```tsx
<EventDetail>
  <EventDetailGallery />
  <EventDetailContent>
    <EventDetailHeader />
    <EventDetailActions />
    <EventDetailAiMatch />
    <EventDetailDescription />
    <EventDetailLineup />
    <EventDetailGoodToKnow />
    <EventDetailMap />
    <EventDetailOrganizer />
    <EventDetailPolicies />
    <EventDetailFaq />
    <EventDetailReport />
    <EventDetailRelated />
    <EventDetailTickets />
  </EventDetailContent>
</EventDetail>
```

## Composition [#composition]

Use the following composition to build an `EventDetail`:

```text
EventDetail
├── EventDetailGallery
└── EventDetailContent
    ├── EventDetailHeader
    ├── EventDetailActions
    ├── EventDetailAiMatch
    ├── EventDetailDescription
    ├── EventDetailLineup
    ├── EventDetailGoodToKnow
    ├── EventDetailMap
    ├── EventDetailOrganizer
    ├── EventDetailPolicies
    ├── EventDetailFaq
    ├── EventDetailReport
    ├── EventDetailRelated
    └── EventDetailTickets
```

## OpenUI Integration [#openui-integration]

Install the OpenUI React packages.

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

Add `EventDetail` 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 {
  EventDetail,
  EventDetailActions,
  EventDetailAiMatch,
  EventDetailContent,
  EventDetailDescription,
  EventDetailFaq,
  EventDetailGallery,
  EventDetailGoodToKnow,
  EventDetailHeader,
  EventDetailLineup,
  EventDetailMap,
  EventDetailOrganizer,
  EventDetailPolicies,
  EventDetailRelated,
  EventDetailReport,
  EventDetailTickets,
} from "@/components/ui/event-detail";

const OpenUIEventDetail = defineComponent({
  name: "EventDetail",
  description:
    "Full event detail view with organizer info, interactive map, policies, and ticket purchase. Fullwidth mode only.",
  props: z.object({}),
  component: () => (
    <EventDetail>
      <EventDetailGallery />
      <EventDetailContent>
        <EventDetailHeader />
        <EventDetailActions />
        <EventDetailAiMatch />
        <EventDetailDescription />
        <EventDetailLineup />
        <EventDetailGoodToKnow />
        <EventDetailMap />
        <EventDetailOrganizer />
        <EventDetailPolicies />
        <EventDetailFaq />
        <EventDetailReport />
        <EventDetailRelated />
        <EventDetailTickets />
      </EventDetailContent>
    </EventDetail>
  ),
});

export const event_detailLibrary = createLibrary({
  root: "EventDetail",
  components: [OpenUIEventDetail],
});
```

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 `EventDetail` 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 {
  EventDetail,
  EventDetailActions,
  EventDetailAiMatch,
  EventDetailContent,
  EventDetailDescription,
  EventDetailFaq,
  EventDetailGallery,
  EventDetailGoodToKnow,
  EventDetailHeader,
  EventDetailLineup,
  EventDetailMap,
  EventDetailOrganizer,
  EventDetailPolicies,
  EventDetailRelated,
  EventDetailReport,
  EventDetailTickets,
} from "@/components/ui/event-detail";

export const catalog = defineCatalog(schema, {
  components: {
    EventDetail: {
      props: z.object({}),
      description:
        "Full event detail view with organizer info, interactive map, policies, and ticket purchase. Fullwidth mode only.",
    },
  },
});

export const { registry } = defineRegistry(catalog, {
  components: {
    EventDetail: () => (
      <EventDetail>
        <EventDetailGallery />
        <EventDetailContent>
          <EventDetailHeader />
          <EventDetailActions />
          <EventDetailAiMatch />
          <EventDetailDescription />
          <EventDetailLineup />
          <EventDetailGoodToKnow />
          <EventDetailMap />
          <EventDetailOrganizer />
          <EventDetailPolicies />
          <EventDetailFaq />
          <EventDetailReport />
          <EventDetailRelated />
          <EventDetailTickets />
        </EventDetailContent>
      </EventDetail>
    ),
  },
});
```

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.