Campus UI

Campus UI is the semantic interface system for Campus-native applications. The gallery below renders the current components in context; use the patterns directly from plain HTML, JavaScript, React, or any framework that can emit accessible HTML.

LIVE COMPONENTSRendered from the current Campus UI vocabulary.

These are the controls and compositions developers ship—not a list of component names.

Page structureapp-page · page-header · section-header · toolbar · card

WORKSPACE

Projects

Durable software owned by this account.

⌕

ACTIVE

Runtime overview

3

Applications currently reachable through Campus Compute.

Actions and menusbutton · icon-button · action-menu · action-popover

Actions⌄

CCalendarCampus application

Collections and datacollection · row-copy · avatar · metric · fact

Reachability

Global

Public route active

Revisions

12

3 installed

Uptime

99.98%

Last 30 days

Owner

roman

Campus identity

Runtime

Campus

Managed compute

Status and application statenotice · banner · status-pill · badge · steps · loading · empty

ReadyNeeds setupFailedInfoConnecting

Revision availableVersion 12 can be installed without interrupting the active workload.

ConnectedGateway capability verified.

1. 1PackageDescribe UI, workload, permissions, and tools.
2. 2InstallReview the exact authority requested.
3. 3RunConnect through the installation Gateway.

Starting workloadConnecting to your Node

＋No releases yetPublish a release to make this app installable.

Forms and selectionfield · choice-field · segmented-control · form-actions

Application nameShown in Launcher and Store.RuntimeCampus managed computeOwn NodeAllow background executionThe workload may run while its interface is closed.Stable channelReceive reviewed production releases.

Conversation and composerconversation · message · composer · microphone-icon · send-icon

I found three services with an unhealthy readiness signal.

Show me the one blocking deployment.

Tool access admitted for this request

Uses admitted tools only⌘ ↵ to send

Command surfacecommand-input · command-group · command-row

⌕⌘K

GO3

Protected state and confirmationsconnection-status · protected-state · assurance-list · sheet · confirmation-sheet

ConnectedGateway verified

• ✓ Scoped capability
• ✓ Exact installation
• ✓ Revocable

PK

PROTECTED

Private key material

Continue with a user gesture before reading browser-protected data.

CONFIRM ACTION

Start private workload?

This will use Campus Compute for this installation.

• ✓ App-scoped
• ✓ Cancel anytime

Start with the stylesheet

Every Campus interface loads the content-addressed stylesheet published by the Campus UI manifest. During local authoring, use the stable alias; the package build rewrites it to the immutable URL.

Plain HTML

<link rel="stylesheet" href="/assets/campus-app.css">

<main class="campus-page" data-campus-tint="intelligence">
  <!-- Campus UI components -->
</main>

JavaScript

const stylesheet = document.createElement('link')
stylesheet.rel = 'stylesheet'
stylesheet.href = '/assets/campus-app.css'
document.head.append(stylesheet)

document.documentElement.dataset.campusTint = 'intelligence'

React

export function CampusApp({ children }) {
  return (
    <main className="campus-page" data-campus-tint="intelligence">
      {children}
    </main>
  )
}

Buttons and status

Use semantic elements and Campus class names. The stylesheet owns touch sizing, tones, focus treatment, appearance, and responsive behavior.

Plain HTML

<button class="campus-button campus-button-primary">
  <span class="campus-button-label">Deploy</span>
</button>

<span class="campus-status-pill campus-status-success">Ready</span>

JavaScript

function campusButton(label, tone = 'primary') {
  const button = document.createElement('button')
  button.type = 'button'
  button.className = `campus-button campus-button-${tone}`
  button.innerHTML = '<span class="campus-button-label"></span>'
  button.firstElementChild.textContent = label
  return button
}

actions.append(campusButton('Deploy'), campusButton('Cancel', 'secondary'))

React

function Button({ tone = 'primary', busy = false, children, ...props }) {
  return (
    <button
      type="button"
      className={`campus-button campus-button-${tone}`}
      aria-busy={busy || undefined}
      disabled={busy || props.disabled}
      {...props}
    >
      <span className="campus-button-label">{busy ? 'Working…' : children}</span>
    </button>
  )
}

<Button tone="tint">New project</Button>

Collections and data

Rows stay keyboard-accessible because the action is a native link or button. Compose identity, copy, metadata, and state without rebuilding row spacing in every app.

Plain HTML

<section class="campus-collection" aria-label="Projects">
  <button class="campus-collection-row" aria-label="Open Research agent">
    <span class="campus-avatar" aria-hidden="true">AI</span>
    <span class="campus-row-copy">
      <span class="campus-row-eyebrow">INTELLIGENCE</span>
      <strong class="campus-row-title">Research agent</strong>
      <span class="campus-row-detail">Persistent tools and model access</span>
      <span class="campus-row-meta">Updated 2m ago</span>
    </span>
    <span class="campus-status-pill campus-status-success">Ready</span>
  </button>
</section>

JavaScript

function projectRow(project) {
  const row = document.createElement('button')
  row.type = 'button'
  row.className = 'campus-collection-row'
  row.setAttribute('aria-label', `Open ${project.name}`)
  row.innerHTML = `
    <span class="campus-avatar" aria-hidden="true"></span>
    <span class="campus-row-copy">
      <strong class="campus-row-title"></strong>
      <span class="campus-row-detail"></span>
    </span>`
  row.querySelector('.campus-avatar').textContent = project.initials
  row.querySelector('.campus-row-title').textContent = project.name
  row.querySelector('.campus-row-detail').textContent = project.detail
  return row
}

React

function ProjectRow({ project, onOpen }) {
  return (
    <button
      type="button"
      className="campus-collection-row"
      aria-label={`Open ${project.name}`}
      onClick={() => onOpen(project.id)}
    >
      <span className="campus-avatar" aria-hidden="true">{project.initials}</span>
      <span className="campus-row-copy">
        <strong className="campus-row-title">{project.name}</strong>
        <span className="campus-row-detail">{project.detail}</span>
      </span>
      <span className="campus-status-pill campus-status-success">Ready</span>
    </button>
  )
}

Forms and conversation

The same semantic markup works for settings, compose flows, and agent interfaces.

Plain HTML

<label class="campus-field">
  Application name
  <input name="name" autocomplete="off">
  <span class="campus-field-help">Shown in Launcher and Store.</span>
</label>

<form class="campus-composer" aria-label="Message composer">
  <div class="campus-composer-main">
    <input name="message" aria-label="Message" placeholder="Ask the agent…">
    <button class="campus-icon-button" aria-label="Send message">↑</button>
  </div>
</form>

JavaScript

composer.addEventListener('submit', async (event) => {
  event.preventDefault()
  const data = new FormData(composer)
  await campus.backend.json('/messages', {
    method: 'POST',
    body: { text: data.get('message') },
  })
})

React

function Composer({ onSend }) {
  const [message, setMessage] = useState('')

  function submit(event) {
    event.preventDefault()
    if (!message.trim()) return
    onSend(message.trim())
    setMessage('')
  }

  return (
    <form className="campus-composer" aria-label="Message composer" onSubmit={submit}>
      <div className="campus-composer-main">
        <input value={message} onChange={(event) => setMessage(event.target.value)} />
        <button className="campus-icon-button" aria-label="Send message">↑</button>
      </div>
    </form>
  )
}

Sheets and confirmations

Use a Campus sheet for explicit confirmation, protected state, and workload-start boundaries. Avoid native confirm() and prompt().

Plain HTML

<campus-modal-layer class="campus-sheet-layer" role="presentation">
  <section class="campus-sheet" role="dialog" aria-modal="true" aria-labelledby="confirm-title">
    <header class="campus-sheet-header">
      <div>
        <span class="campus-eyebrow">CONFIRM ACTION</span>
        <h2 id="confirm-title">Start private workload?</h2>
        <p>This will use Campus Compute for this installation.</p>
      </div>
      <button class="campus-icon-button" aria-label="Close">×</button>
    </header>
    <div class="campus-form-actions campus-form-actions-end">
      <button class="campus-button campus-button-secondary">Cancel</button>
      <button class="campus-button campus-button-primary">Start workload</button>
    </div>
  </section>
</campus-modal-layer>

JavaScript

const dialog = document.querySelector('[role="dialog"]')
const close = () => dialog.closest('campus-modal-layer').remove()

dialog.querySelector('[aria-label="Close"]').addEventListener('click', close)
dialog.addEventListener('keydown', (event) => {
  if (event.key === 'Escape') close()
})
dialog.querySelector('button').focus()

React

function ConfirmationSheet({ title, description, onCancel, onConfirm }) {
  return (
    <div className="campus-sheet-layer" role="presentation" onMouseDown={onCancel}>
      <section
        className="campus-sheet"
        role="dialog"
        aria-modal="true"
        aria-labelledby="confirm-title"
        onMouseDown={(event) => event.stopPropagation()}
      >
        <header className="campus-sheet-header">
          <div><h2 id="confirm-title">{title}</h2><p>{description}</p></div>
          <button className="campus-icon-button" aria-label="Close" onClick={onCancel}>×</button>
        </header>
        <div className="campus-form-actions campus-form-actions-end">
          <button className="campus-button campus-button-secondary" onClick={onCancel}>Cancel</button>
          <button className="campus-button campus-button-primary" onClick={onConfirm}>Confirm</button>
        </div>
      </section>
    </div>
  )
}

Current component surface

The gallery covers the visible output of the current library. The full exported surface is grouped below for quick reference.

Area	Components
Structure	group, app-page, page-header, section-header, toolbar, card
Collections and data	collection, collection-row, row-copy, avatar, metric-grid, metric, fact-list, fact
Actions and menus	button, icon-button, panel-close-button, form-actions, action-menu, action-menu-item, action-popover, action-popover-item
Sheets	sheet, sheet-header, confirmation-sheet, workload-action-sheet
State	assurance-list, connection-status, protected-state, steps, loading-state, notice, banner, status-pill, badge, state-dot, empty-state, state-view
Conversation and commands	conversation, message, composer, search-field, command-surface, command-input, command-group, command-row, segmented-control
Forms and icons	field, choice-field, microphone-icon, stop-icon, send-icon, panel-close-icon

Runtime contract

Campus UI emits accessible, semantic HTML and uses a shared content-addressed stylesheet. The stylesheet owns shell/content insets, safe areas, touch targets, light/dark appearance, mobile widths, desktop layouts, focus treatment, and common interaction states. App-local CSS should describe only composition and identity unique to that application.

Semantic tints are graphite for Campus/default, green for communication, orange for finance, blue for intelligence, cyan for files, and purple for OpenClaw-specific experiences.

For the source of truth, see frontend/src/campus/ui.cljs and the Campus UI design contract.