The component library inside the binary.

<button class="btn">Publish event</button>
<button class="btn btn-secondary">Save draft</button>
<button class="btn btn-outline">Cancel</button>
<button class="btn btn-ghost">Skip</button>
<button class="btn btn-danger">Delete</button>
<a class="btn btn-link" href="/events">All events</a>
<button class="btn btn-sm"><icon name="plus" />Invite</button>
<button
  class="btn btn-outline btn-icon"
  aria-label="Search"
  data-tip
><icon name="search" /></button>

<ui-field label="Title" hint="Shown on the event's page and in the reminder.">
  <input class="input" name="title" value="Portfolio night">
</ui-field>
<ui-field label="Places" error={errors?.places}>
  <input class="input" name="places" value="0" inputmode="numeric">
</ui-field>
<ui-field label="Who can come">
  <ui-select>
    <select class="input" name="audience">
      <option>Anyone</option>
      <option>Members of the group</option>
    </select>
  </ui-select>
</ui-field>
<ui-field label="Venue">
  <input class="input" name="venue" placeholder="Name and address">
</ui-field>

<label class="flex items-center gap-2">
  <input type="checkbox" class="checkbox" name="remind" checked>Remind me the day before
</label>
<label
  class="flex items-center gap-2"
><input type="radio" class="radio" name="seen_by" value="anyone" checked>Anyone</label>
<label
  class="flex items-center gap-2"
><input type="radio" class="radio" name="seen_by" value="members">Members</label>
<label class="flex items-center gap-2">
  <input type="checkbox" role="switch" class="switch" name="waitlist" checked>Waitlist when full
</label>

<ui-field label="Organizer">
  <ui-combobox name="organizer_id" options={people} value="1" />
</ui-field>
<ui-field label="Speakers">
  <ui-combobox name="speaker_ids[]" options={people} value={speakers} multiple={true} />
</ui-field>

<ui-field label="Starts on">
  <ui-datepicker name="starts_on" value="2026-10-22" />
</ui-field>
<ui-field label="Festival">
  <ui-datepicker
    range={true}
    name="first_day"
    value="2026-10-22"
    endName="last_day"
    end="2026-10-25"
  />
</ui-field>
<div class="sm:col-span-2 max-w-xs">
  <ui-field label="Doors open">
    <ui-datepicker time={true} name="opens_at" value="2026-10-22T18:30:00Z" step={15} />
  </ui-field>
</div>

<ui-field label="Opens at">
  <ui-timepicker name="opens_at" value="18:30" step={15} />
</ui-field>
<ui-field label="Closes at">
  <ui-timepicker name="closes_at" value="22:00" ampm={true} />
</ui-field>

<ui-field label="Cover image" hint="A picture, up to 10 MB.">
  <ui-upload name="cover" accept="image/*" />
</ui-field>

<ui-field label="About the event">
  <ui-markdown name="about" value={about} label="About the event" />
</ui-field>

<div class="flex flex-col gap-2" data-rows="tickets">
  <div class="flex items-center gap-2" data-row @each={tickets as ticket, i}>
    <input type="hidden" name="tickets[{i}][id]" value={ticket.id}>
    <input class="input" name="tickets[{i}][name]" value={ticket.name}>
    <ui-row-tools label="Remove ticket" />
  </div>
  <template>
    <div class="flex items-center gap-2" data-row>
      <input class="input" name="tickets[new][name]" placeholder="Ticket name">
      <ui-row-tools label="Remove ticket" />
    </div>
  </template>
  <button
    type="button"
    class="btn btn-outline btn-sm self-start"
    data-add
  ><icon name="plus" />Add a ticket</button>
</div>

<button class="btn" commandfor="invite" command="show-modal">Invite a person</button>
<ui-dialog id="invite" title="Invite a person" text="They get a link by mail.">
  <form method="POST" class="flex flex-col gap-4">
    <ui-field label="Email"><input class="input" name="email" type="email"></ui-field>
    <footer><button class="btn">Send invitation</button></footer>
  </form>
</ui-dialog>

<button
  class="btn btn-outline"
  commandfor="details"
  command="show-modal"
>Open as a drawer</button>
<ui-dialog id="details" title="Portfolio night" text="Thursday 22 October, 18:30" side={true}>
  <p class="text-sm text-muted">34 of 40 places are taken.</p>
</ui-dialog>

<button
  class="btn btn-danger"
  commandfor="cancel-event"
  command="show-modal"
>Cancel event</button>
<ui-confirm
  id="cancel-event"
  title="Cancel this event?"
  text="34 people get an email."
  label="Cancel event"
  cancel="Keep it"
  danger={true}
>
  <input type="hidden" name="id" value="7">
</ui-confirm>

<button
  class="btn btn-outline"
  popovertarget="actions"
>Actions<icon name="chevron-down" /></button>
<div id="actions" class="popup menu" popover focusgroup="menu">
  <p>Portfolio night</p>
  <a href="/events/7">Open</a>
  <a href="/events/7/message">Message attendees</a>
  <hr>
  <button type="button" class="menu-danger">Cancel event</button>
</div>

<button class="btn btn-outline" popovertarget="filters">Filters</button>
<div id="filters" class="popup popover text-sm" popover>
  <label
    class="flex items-center gap-2"
  ><input type="checkbox" class="checkbox" checked>This month</label>
  <label
    class="flex items-center gap-2 mt-3"
  ><input type="checkbox" class="checkbox">Has places left</label>
</div>

<toast-buttons />
<ui-copy text="https://commons.example/e/portfolio-night" label="Copy link" />
<button
  class="btn btn-ghost btn-icon"
  aria-label="Pin to the top"
  data-tip
><icon name="pin" /></button>
<span class="badge badge-success" data-tip="Paid on 14 October">Paid</span>

<script>
  import { toast } from './toast.js'

  function saved() { toast('Event saved') }
  function failed() { toast('Could not reach the server', { kind: 'danger' }) }
  function archived() { toast('Event archived', { action: 'Undo', run: restored }) }
  function restored() { toast('Event restored', { kind: 'success' }) }
</script>

<div class="flex flex-wrap gap-2">
  <button class="btn btn-outline" type="button" @click={saved}>Save</button>
  <button class="btn btn-outline" type="button" @click={failed}>Fail</button>
  <button class="btn btn-outline" type="button" @click={archived}>Archive</button>
</div>

<div class="tabbed">
  <div class="tabs">
    <label><input type="radio" name="tab" value="going" checked>Going</label>
    <label><input type="radio" name="tab" value="waitlist">Waitlist</label>
    <label><input type="radio" name="tab" value="cancelled">Cancelled</label>
  </div>
  <div class="pt-4 text-sm">34 people are going. Reminders go out the day before.</div>
  <div
    class="pt-4 text-sm"
  >6 people are waiting. The first gets a place when someone cancels.</div>
  <div class="pt-4 text-sm">2 people cancelled.</div>
</div>

<div class="overflow-x-auto">
  <table class="table">
    <thead>
      <tr><th>Event</th><th>Host</th><th>Starts</th><th>Places</th></tr>
    </thead>
    <tbody>
      <tr @each={page.rows as event}>
        <td class="font-medium">{event.title}</td>
        <td>
          <span
            class="flex items-center gap-2"
          ><span class="avatar avatar-sm">{event.host.slice(0, 1)}</span>{event.host}</span>
        </td>
        <td>{event.starts_on.formatDate('d MMM')}</td>
        <td>
          <span class="badge badge-danger" @if={event.taken >= event.places}>Full</span>
          <span class="badge badge-success" @else>{event.places - event.taken} left</span>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<ui-pager page={page} />

<div
  class="alert alert-success"
  role="status"
><icon name="circle-check" />Reminders sent to 34 people.</div>
<div
  class="alert alert-danger"
  role="alert"
><icon name="octagon-x" />The cover image is larger than 10 MB.</div>
<progress class="progress" value="34" max="40"></progress>
<div class="flex items-center gap-3">
  <div class="skeleton size-8 rounded-full"></div>
  <div class="skeleton h-4 w-48"></div>
  <icon name="loader-circle" class="spinner" label="Loading" />
  <kbd class="kbd">⌘ K</kbd>
</div>

<div class="empty empty-outline">
  <icon name="file" />
  <h3>No events yet</h3>
  <p>An event shows here once a group posts one.</p>
  <div><a class="btn" href="/events/new">New event</a></div>
</div>
<div class="card p-5">
  <div class="accordion">
    <details name="faq" open>
      <summary>What does it cost?</summary>
      <p>Nothing. Groups pay for their own venue.</p>
    </details>
    <details name="faq">
      <summary>Can I bring a guest?</summary>
      <p>Each sign-up holds one place.</p>
    </details>
  </div>
</div>