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

Event Detail

PreviousNext

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

Sunglasses at Night: Underground Techno
1 / 3
Going Fast
Nightlife

Sunglasses at Night: Underground Techno

Midnight Lovers·4.5 (1,067)
The White Rabbit · Houston, TX (The Woodlands)
$15 - $30
AlexSam
+ 2 friends · 537 going
High energyLate nightUnderground

Why this matches your vibe

Raw, unfiltered techno in an authentic warehouse setting.

About

Experience the raw energy of underground techno. Industrial beats, immersive visuals, and a crowd that lives for the music.

Lineup

Amelie LensI Hate ModelsFJAAK

Good to know

Highlights

2 hours
In person

Refund Policy

No refunds. Tickets are transferable.

Location

The White Rabbit

8827 Nasher Ave

Houston TX

How do you want to get there?

Organized by

Midnight Lovers

Midnight Lovers

Followers
1,200Events
154Hosting
8 yrs
Great track record Very responsive

Policies & Info

21+ID checksSecurity on site

FAQs

What is the refund policy: No refunds. Tickets are transferable.

When do doors open: Open 2 hours before event.

Is there parking: Limited, leave early to avoid long queues.

Related to this event

Houston EventsTexas NightlifeTechno Parties

Installation

$ pnpm dlx shadcn@latest add @mcpcn/event-detail

Usage

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

Composition

Use the following composition to build an EventDetail:

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

OpenUI Integration

Install the OpenUI React packages.

pnpm add @openuidev/react-lang zod

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

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 in the OpenUI documentation.

json-render Integration

Install the json-render React packages.

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

Add EventDetail 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 {
  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 for the provider and streaming setup.

API Reference

See the Base UI documentation for more information.