Event Code of Conduct

Installation

pnpm dlx shadcn@latest add @cleverui/event-code-of-conduct

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx

import { EventCodeOfConduct } from '@/components/blocks/event-code-of-conduct'

Exampletsx

import { EventCodeOfConduct } from '@/components/blocks/event-code-of-conduct'

export default function EventCodeOfConductDemo() {
  return (
    <div className="mx-auto w-full">
      <EventCodeOfConduct
        eyebrow="HOUSE RULES · ALL THREE DAYS"
        heading="Code of conduct"
        pledge="Everyone here is safe, welcome, and heard, no exceptions, no fine print."
        expectationsLabel="The short version"
        expectations={[
          'Respect the room',
          'No recording without consent',
          'Ask before you photograph',
          'Challenge ideas, not people',
          'If someone says stop, stop',
        ]}
        accessLabel="Accessibility"
        access={[
          {
            label: 'Live captions',
            detail: 'On both stages, all sessions, open to every seat.',
          },
          {
            label: 'Quiet room',
            detail: 'Level 2, staffed all day, low light, no networking.',
          },
          {
            label: 'Mobility',
            detail: 'Step-free routes marked on every floor plan and app map.',
          },
          {
            label: 'Assistance dogs',
            detail: 'Welcome in all public spaces, including the main hall.',
          },
        ]}
        reportLabel="Report a problem"
        report={{
          note: 'Something wrong? Tell us immediately, day or night. We respond within the hour while the event is open.',
          email: 'conduct@northstage.events',
          phone: '+61 2 5550 0142',
          atEvent: 'At the venue: any crew member in a red lanyard',
        }}
        policyHref="#full-policy"
        policyLabel="Read the full policy"
      />
    </div>
  )
}

API reference

EventCodeOfConduct accepts the following props.

Prop	Type	Default	Description
`eyebrow`	`string`	–	mono kicker, preformatted, never derived from Date
`heading`	`string`	`'Code of conduct'`	–
`pledge`*	`string`	–	one confident sentence set at display scale
`expectations`	`string[]`	–	short imperative lines, the policy's short version
`expectationsLabel`	`string`	`'The short version'`	–
`access`*	`AccessProvision[]`	–	accessibility provisions as term-detail pairs
`accessLabel`	`string`	`'Accessibility'`	–
`report`	`ReportChannels`	–	–
`reportLabel`	`string`	`'Report a problem'`	–
`policyHref`	`string`	–	quiet full-policy text link when provided
`policyLabel`	`string`	`'Read the full policy'`	–

…plus everything from React.HTMLAttributes<HTMLElement>: className, event handlers, aria attributes and the rest pass straight through.

Referenced types

Typestsx

export interface AccessProvision {
  label: string
  detail?: string
}

export interface ReportChannels {
  note: string
  email?: string
  phone?: string
  /** plain line, e.g. 'At the venue: any crew member in a red lanyard' */
  atEvent?: string
}

Related components

Agenda Day Picker

Day pills over a single-track agenda, pick a day, read its sessions down a mono time rail. One room, one running order, real tablist semantics.

Event CFP Block

A call-for-proposals block, poster heading, mono deadline rail, talk formats with durations, and one submit CTA. React and Tailwind CFP section for conference sites.

Event Countdown Hero

The event's own countdown hero, oversized date numerals, a mono venue line, poster-scale rolling countdown digits, and one ticket CTA. Doors open in exactly this long.

Event Lineup Board

A poster-type lineup board, acts in oversized weight-contrast rows, stage and time in mono, day tabs with real tablist semantics. The bill is the artwork.

Event Past Editions

Past editions as a typographic reel, years set huge, cities in mono, one headline moment and attendance per row. A React and Tailwind pedigree block for event sites.

Event Schedule Tracks

A multi-track agenda, mono time rail against parallel track columns that collapse into one accessible chronological list on mobile. Conference wayfinding, poster confidence.

Frequently asked questions

How do I install the Event Code of Conduct component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/event-code-of-conduct`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Event Code of Conduct require?

Event Code of Conduct uses motion and lucide-react on top of React and Tailwind CSS. You don't need to install them manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Event Code of Conduct to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Preview & code