Ocean UI · components and blocks

Build with Ocean UI

Our components are typed Rust rendered on the server, and our blocks are YAML an agent can write.

Component demos

Scroll sideways or use the arrow keys to move through the component demos.

Button
A labelled action in four emphases and three sizes; on the web an address makes it a link that looks the same.
Open tickets
−36
1,284
Against last week
KPI
A tile with a label and one headline figure, and when they help a delta, a badge, a caption and a spark.
Ticket Status Age (h)
T-4127 Needs a person 2
T-4126 Working 5
T-4125 Done 9
T-4124 Working 14
T-4123 Waiting 26
T-4122 Failed 31
Grid
A server-rendered data table whose sort, search, filters, columns, selection and page live in the address.
Area chart
A chart of values over x labels, the first series filled under its line, with axes, tooltips and a legend.
Agent name
People see this name in the queue.
Field
A labelled form control with an optional hint, posted under the field's id without any script.
LiveTrialDue soonOverdueRunningWaitingFailed
Badge
A short label in a pill, coloured by its tone, for a state or a count beside a title.
Sync scheduled
Rows refresh every five minutes.
Alert
A banner with a title and one sentence, toned for what it says; only a bad one interrupts.
Acme renewal
Due in 12 days
On track
Card
A titled section with an optional description and one action, around a body the caller writes.
39 components, 34 with a live web example, every one with its props, the Rust to copy and the Mac's face
Browse components

Blocks

Select rows to act on them

Ticket	Subject	Agent	Status	Opened	Actions
48213	VPN drops every 20 minutes	Network	Closed by agent	2026-10-31 09:12	Open
48214	Reset MFA on new phone	Identity	Waiting for requester	2026-10-31 09:07	Open
48215	Expense tool shows last quarter	Apps	Needs a person	2026-10-31 08:58	Open

data · App UI

Rows a person searches, filters, sorts, selects and acts on, such as every open ticket and who is working on it.

Closed per hour today
ClosedHanded off
chart
data · App UI
Draws a source's rows as an area, line, bar, donut or spark chart, such as tickets closed per hour or where the money goes.
Name
How people will see it in the queue
Starts when
Monthly model budget ($)
Test first on
form
input · App UI
Fields a person fills in to add a row to a table or change one, such as a new agent's rules or a ticket's status.
New starter laptop for R. Patel
Procurement agent
Send back
approval
action · App UI
One card per row waiting for a decision, with Approve and Reject, such as an order an agent may not place on its own.
1. Opened by M. Okafor from the portal
  Device, office and last 10 VPN events attached
  2026-10-31 09:12 · portal
2. Network agent read the ticket and the VPN logs
  Matched a known pattern
  2026-10-31 09:12 · Network agent
3. Requester confirmed the fix
  2026-10-31 09:20 · M. Okafor
timeline
data · App UI
What happened, in time order, such as everything an agent did on a ticket, with who did it and how it went.