A stage for ideas, not a theme around them.

• as: "div" | "section" | "main" | "article" | "header" | "footer"
• size: "full" | "content" | "narrow" — default "content"
• class and standard HTML attributes

import { Container } from "@tedxeleusis/ui";

<Container as="main" size="narrow">...</Container>

• as: "div" | "section" | "main" | "article" — default "div"
• class and standard HTML attributes

import { ContentFrame } from "@tedxeleusis/ui";

<ContentFrame as="main" class="py-20">...</ContentFrame>

• as: "span" | "p" | "div" | "label" | "legend"
• muted: boolean — default false
• class and standard HTML attributes

import { MonoLabel } from "@tedxeleusis/ui";

<MonoLabel as="p" muted>Session · 10:30</MonoLabel>

• href: string — default "#main-content"
• label: string — default "Skip to content"
• class

import { SkipLink } from "@tedxeleusis/ui";

<SkipLink />

• items: SiteNavigationItem[] — required
• action: SiteNavigationItem
• id, homeHref, homeLabel, logoSrc: string
• presentation: "site" | "preview" — default "site"
• defaultMenuOpen: boolean
• mobileOpenEvent: string
• class
• Item options: label, href, active, analyticsEvent

import { SiteNavigation } from "@tedxeleusis/ui";

<SiteNavigation
  id="event-navigation"
  items={[{ label: "Speakers", href: "/speakers", active: true }]}
  action={{ label: "Tickets", href: "/tickets" }}
/>

• links: SiteFooterLink[] — required; each item has label and href
• organisation: string — default "TEDxEleusis"
• year: number — defaults to current year
• backToTopHref: string — default "#top"
• class

import { SiteFooter } from "@tedxeleusis/ui";

<SiteFooter links={[{ label: "About", href: "/about" }]} />

• title, description, actionLabel: string — required
• backgroundImage: URL string | Astro ImageMetadata
• backgroundAlt, eyebrow, href, headingId: string
• headingLevel: "h2" | "h3" | "h4"
• loading: "eager" | "lazy"
• Without href, the action renders as an aria-disabled status
• class

import { ActionCallout } from "@tedxeleusis/ui";

<ActionCallout
  eyebrow="Ticket release"
  title="Early-bird tickets"
  description="Registration opens soon."
  backgroundImage={campaignImage}
  actionLabel="Tickets coming soon"
/>

• message: string — required
• href, linkLabel: string
• dismissible: boolean — default false
• variant: "brand" | "neutral" | "dark"
• id: string — required when dismissible
• class
• Named slot: "action" for a custom CTA

import { AnnouncementBanner } from "@tedxeleusis/ui";

<AnnouncementBanner
  id="tickets-live"
  message="Tickets are available."
  href="/tickets"
  variant="brand"
  dismissible
/>

• href: string — renders an anchor when present
• type: "button" | "submit" | "reset"
• variant: "primary" | "secondary" | "ghost"
• size: "sm" | "md" | "lg"
• disabled: boolean
• class and standard button/anchor attributes

import { Button } from "@tedxeleusis/ui";

<Button href="/tickets" variant="primary" size="lg">
  Get tickets
</Button>

• title: string — required
• href, date, datetime, description, imageAlt, linkLabel: string
• image: URL string | Astro ImageMetadata
• variant: "standard" | "featured"
• headingLevel: "h2" | "h3" | "h4"
• loading: "eager" | "lazy"
• class

import { JournalCard } from "@tedxeleusis/ui";

<JournalCard
  title="A city shaped by memory"
  date="May 18, 2027"
  image={heroImage}
  variant="featured"
  href="/blog/a-city-shaped-by-memory"
/>

• name: string — required
• role, imageAlt, href, eyebrow, indexLabel: string
• image: URL string | Astro ImageMetadata
• variant: "stacked" | "split"
• imageTreatment: "monochrome" | "color"
• headingLevel: "h2" | "h3" | "h4"
• loading: "eager" | "lazy"
• class

import { PersonCard } from "@tedxeleusis/ui";

<PersonCard
  name="Alexandra Markou"
  role="Urban researcher"
  image={portrait}
  variant="split"
  imageTreatment="color"
/>

• sessions: SessionListItem[] — required
• variant: "directory" | "timeline"
• headingLevel: "h2" | "h3" | "h4"
• titleLabel, peopleLabel, emptyMessage: string
• showHeader: boolean
• class
• Item options: id, title, href, time, date, location, duration, meta, description, speakers[]
• Speaker options: name, role, photoUrl

import { SessionList } from "@tedxeleusis/ui";

<SessionList
  variant="timeline"
  sessions={[{
    time: "10:30",
    title: "Opening session",
    meta: "Main stage · 45 min"
  }]}
/>

• as: "div" | "fieldset"
• gap: "sm" | "md" | "lg"
• class and standard HTML attributes

import { FormStack } from "@tedxeleusis/ui";

<FormStack as="fieldset" gap="lg">...</FormStack>

• label, htmlFor: string — required
• description, error: string
• required: boolean
• class
• Default slot: the input control

import { FormField, Input } from "@tedxeleusis/ui";

<FormField label="Email" htmlFor="email" required>
  <Input id="email" name="email" type="email" />
</FormField>

• invalid: boolean
• class
• All native input attributes including type, name, value and autocomplete

import { Input } from "@tedxeleusis/ui";

<Input name="email" type="email" autocomplete="email" invalid={false} />

• invalid: boolean
• class
• All native textarea attributes and default-value slot

import { Textarea } from "@tedxeleusis/ui";

<Textarea name="message" rows="6" />

• invalid: boolean
• class
• All native checkbox attributes including name, value, checked and disabled

import { Checkbox } from "@tedxeleusis/ui";

<label><Checkbox name="updates" value="yes" /> Updates</label>

• invalid: boolean
• class
• All native select attributes
• Default slot: option and optgroup elements

import { NativeSelect } from "@tedxeleusis/ui";

<NativeSelect name="role">
  <option value="volunteer">Volunteer</option>
</NativeSelect>

• groups: DropdownGroup[] — required
• id, name, value, defaultValue, placeholder: string
• disabled, required, invalid: boolean
• className
• aria-label, aria-labelledby, aria-describedby
• onValueChange(value)
• Group options: label, options[]; item options: value, label, disabled

import { Dropdown } from "@tedxeleusis/ui";

<Dropdown
  client:load
  name="attendance"
  groups={[{ options: [{ value: "in-person", label: "In person" }] }]}
/>

• Exports: Select, SelectTrigger, SelectValue, SelectContent
• SelectGroup, SelectLabel, SelectItem, SelectSeparator
• SelectTrigger adds invalid: boolean
• Other options follow the matching Radix Select primitive props
• Use Dropdown for standard forms; use primitives only for custom composition

import {
  Select, SelectTrigger, SelectValue,
  SelectContent, SelectItem
} from "@tedxeleusis/ui";