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 Card

PreviousNext

Display event information with multiple layouts. Supports events with images, signals, vibe tags, and display-formatted date/time. Entire card is clickable.

Installation

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

Usage

import { EventCard, EventCardContent } from "@/components/ui/event-card";
<EventCard>
  <EventCardContent />
</EventCard>

Composition

Use the following composition to build an EventCard:

EventCard
├── EventCardContent
├── EventCardFooter
├── EventCardImage
├── EventCardMeta
├── EventCardSignal
└── EventCardTags

Examples

Compact

"use client";

import { EventCard, EventCardContent } from "@/components/ui/event-card";

export function EventCardCompactDemo() {
  return (
    <EventCard appearance={{ variant: "compact" }}>
      <EventCardContent />
    </EventCard>
  );
}

Horizontal

"use client";

import { EventCard, EventCardContent } from "@/components/ui/event-card";

export function EventCardHorizontalDemo() {
  return (
    <EventCard appearance={{ variant: "horizontal" }}>
      <EventCardContent />
    </EventCard>
  );
}

Covered

"use client";

import { EventCard, EventCardContent } from "@/components/ui/event-card";

export function EventCardCoveredDemo() {
  return (
    <EventCard appearance={{ variant: "covered" }}>
      <EventCardContent />
    </EventCard>
  );
}

OpenUI Integration

Install the OpenUI React packages.

pnpm add @openuidev/react-lang zod

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

import { createLibrary, defineComponent } from "@openuidev/react-lang";
import { z } from "zod/v4";
 
import { EventCard, EventCardContent } from "@/components/ui/event-card";
 
const OpenUIEventCard = defineComponent({
  name: "EventCard",
  description:
    "Display event information with multiple layouts. Supports events with images, signals, vibe tags, and display-formatted date/time. Entire card is clickable.",
  props: z.object({}),
  component: () => (
    <EventCard>
      <EventCardContent />
    </EventCard>
  ),
});
 
export const event_cardLibrary = createLibrary({
  root: "EventCard",
  components: [OpenUIEventCard],
});

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 EventCard 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 { EventCard, EventCardContent } from "@/components/ui/event-card";
 
export const catalog = defineCatalog(schema, {
  components: {
    EventCard: {
      props: z.object({}),
      description:
        "Display event information with multiple layouts. Supports events with images, signals, vibe tags, and display-formatted date/time. Entire card is clickable.",
    },
  },
});
 
export const { registry } = defineRegistry(catalog, {
  components: {
    EventCard: () => (
      <EventCard>
        <EventCardContent />
      </EventCard>
    ),
  },
});

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.