Components
Every component below is a live instance, rendered on the server in Rust; the theme preset paints them.
39 components, 34 with a live web example.
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
−361,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.
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.
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 soonOverdue
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 trackCard
A titled section with an optional description and one action, around a body the caller writes.
- ALGHL
Avatar
A person's initials in a circle, taken from the first and last words of their name.
Bar chart
A chart of values in bands, one per x label, with the series' bars side by side, tooltips and a legend.
Breadcrumb
The path from the top of the app to this page, as links up with the current page last.
Advanced settings
Retries, timeouts and the model.
Collapsible
A section that opens and shuts under a one-line summary, the browser's details element.
Command palette
The ⌘K dialog that filters every screen as you type and goes to the lit one with Enter.
cargo add ocean-ui-webCopy button
A small ghost button that copies the text of one element and says Copied for a moment.
- +12−8
Delta
A signed change against a base, coloured good or bad by which direction is better.
Dialog
The browser's modal dialog, named by its title and closed by Esc, its close button or a click outside.
Email58Chat27Phone15 Donut
A ring that shows how one series splits into parts, with its total in the middle and a legend.
No tickets yet.
Empty
What a place shows before it has anything in it, one sentence and an optional next step.
Icon
One of 38 Lucide stroke drawings as SVG; decoration beside words, never in place of them.
- ⌘K⇧⌘P⌥↩
Keyboard shortcut
A key chord drawn as one key cap, the way a Mac menu shows it, such as ⇧⌘K.
AgentsPeople Line chart
A chart of one or more series as 2 px lines over x labels, with axes, tooltips and a legend.
Ticket Subject Owner Status Age (h) T-4127 Refund for a double charge Triage agent Needs a person 2 T-4126 Cannot sign in on mobile Maya Chen Working 5 T-4125 Invoice address change Billing agent Done 9 T-4124 Export stuck at 90 percent Triage agent Working 14 T-4123 API key rotation Sam Ortiz Waiting 26 T-4122 Webhook retries Triage agent Failed 31 On a page with Ocean Realtime, LiveTable draws these rows first and the live island updates them from the hub as rows change; here they are static.
Live table
A table of Ocean Base rows that updates in place as they change, through Ocean Realtime's hub.
Release notes
The grid now sorts from the address, so a link keeps its view.
- Sort and page in the URL
- Columns chooser
Markdown
Markdown text drawn as HTML, parsed exactly as Ocean pager parses it, with raw HTML shown as text.
Menu
A button that opens a short list of links in a popover, one menu item per link.
Page head
The screen's title, an optional line under it and its actions, above the body.
Everyone in Acme with the viewer role.
Popover
A button and the small panel it opens over the page, closed by Esc or a click outside.
- Import42%
Progress
A labelled bar that fills from value over max, with the whole percentage written beside the label.
Segmented
A row of options with exactly one on; on the web a GET form sends it back, so it works without script.
Sidebar
The shell's left navigation, one row per screen with the current one lit and the version in its foot.
Skeleton
Ghost lines in the shape of content that is still loading; loading is a ghost, never a spinner.
Spark
A small line with its area and no axes, a trend at a glance, also drawn inside a KPI tile.
- RunningWaitingFailed
Status
An 8 px dot in a tone and the word it stands for, for the state of a service, a run or a row.
Tabs
Tabs that switch between views of one page, the current one marked; on the web each is a ?tab= link.
Top bar
The bar above every screen with the breadcrumb, an optional status and the search pill that opens ⌘K.
Canvas
A GPU surface inside any screen, showing a document at a zoom and pan drawn by your own wgpu painter.
Code view
Read-only code in the mono face, highlighted, beside a gutter of line numbers, with one line lit.
Motion
Springs, tweens, reveals and count-ups keyed by an Id, timed by the motion tokens, still when idle.
Toast
A short notice in the bottom-right corner that slides in, stays five seconds and fades away.
Tooltip
Words beside a control, shown while the pointer is over it or it has keyboard focus.