What is the depth?
Components
The kit's components rendered live, and the system patterns they are built on.
On this page
12.4
DST810
12.4
DST810
HealthyUnderway
Anchor drag21:02
38 m outside the swing circle
Every specimen on these pages is drawn live. The components are imported from @bosunkit/components and
@bosunkit/instruments and rendered with the kit's own stylesheets, in the UI's typeface, so a change to a
component shows here on the next build. Use the theme switch in the sidebar to see each one in all four themes.
01Rendered from the sourceA specimen is the component itself, not a picture of it. What renders here is what the crew sees.
02Fixed inputsSpecimens render from fixed values, never from live data, so a page shows the same states every time it is opened.
03Built on patternsComponents follow the system patterns below: readouts, alarm rows, status pills and navigation rows.
Live components
Every kit component has its own page: live examples with their source, then every prop. The instruments have their own section.
Layout
App shellComponentThe frame of every screen: header, navigation, page, side panel and footer, laid out by its own width.
CardComponentA bordered surface that holds related content under a header, with an optional footer and a priority edge.
Alert card gridComponentAlert cards in two columns, or one on a narrow screen, with section dividers across both.
Description listComponentTerms and their values as a list, stacked, in aligned columns or along a row.
Header barComponentThe bar atop every screen: the logo, the page title, the alert zone and the status strip.
LogoComponentThe bosun anchor mark with the product name and its tagline, in three sizes.
Page headerComponentA page's label, title and subtitle, with an optional bar under them and an option to stay at the top.
Section dividerComponentA named rule between groups of alert cards, colored by urgency.
Section headingComponentThe small capitals heading over a group of rows, cards or settings, with an icon, a count and an action.
SkeletonComponentA shimmering placeholder where content is loading.
SplitterComponentThe handle on the edge between two panels that resizes one, by dragging or by the keyboard.
Wizard stepComponentOne step of a flow that asks the crew for something, with a title, its content and a footer.
Actions and selection
BadgeComponentA short status label with a colored dot, which becomes a button when it takes a click handler.
ButtonComponentThe action the crew takes, in four emphases and three sizes.
CollapsibleComponentA region that opens and closes from a button.
Context menuComponentThe menu of commands a right click or a long press opens on a row or an entry, where it was pressed.
Copy buttonComponentA button that puts a value on the clipboard and says it did, labeled or as an icon alone.
Create buttonComponentThe button that opens a grid of what can be created, such as a maintenance record, a log entry or a checklist.
Segmented radio groupComponentTwo to five options in one row, of which exactly one is chosen, the chosen one marked.
SelectComponentA list of choices that opens from a button.
SwitchComponentAn on/off control with a thumb that moves along a track.
Entry and forms
Radio cardsComponentA choice between a few options, each drawn as a card with a mark, a name and a line about it.
AutocompleteComponentA free-text input that suggests values as the crew type.
Crew pickerComponentA name field that offers the saved crew and fills the rest of a form from the chosen record.
Date of birth inputComponentDay, month and year segments, each typed or chosen from a grid.
Date pickerComponentA date typed or chosen from a month calendar that states its time zone.
Email inputComponentAn email address that offers the common mail domains after the @.
Entity listComponentA table of records with an Add button, and the dialog that creates or edits one through its form.
Form fieldComponentA label, an input and the input's error, stacked.
InputComponentA text input in the kit's style.
LabelComponentThe caption of a form control, which focuses the control when pressed.
One-time code inputComponentA visible numeric field for a code sent for one use, which a phone fills from the message it arrived in.
Outlined fieldComponentThe outlined box with the field's name on its top edge that the maritime inputs draw in.
Password inputComponentA password field that password managers recognize, with show and hide and a Caps Lock warning.
Phone inputComponentA country with its calling code and the national number, stored in E.164 form.
Schema formComponentA form built from a schema, with required, choice and place fields and fields that depend on others.
Setting chipsComponentA setting that holds a list of names or numbers, shown as removable chips with a field to add one.
Setting controlComponentThe rows of a settings page, a switch, a field and a select, each with the save state beside it.
Text areaComponentA multi-line text field whose height the crew drag a whole line at a time.
Maritime inputs
MMSI inputComponentA nine-digit MMSI in groups of three, naming the station it identifies.
Position inputComponentA position in degrees and decimal minutes with hemispheres, that reads pasted positions.
Navigation
Navigation listComponentGrouped links to the pages, with icons, counts and the current page marked, as a panel or a rail.
Navigation barComponentThe phone's navigation at the foot of the screen: three to five places, the current one marked.
TabsComponentA row of tabs, with the selected one underlined.
Overlays
Task dialogComponentA dialog with a title, a body and optional actions, shown over the page.
PopoverComponentA panel that opens from a control and stays open until it is closed, and InfoTip for an explanation.
ToastComponentA short message at the edge of the screen about what the crew just did, which leaves by itself or when dismissed.
TooltipComponentA short label that opens when its element is hovered or focused.
Alerts
Alert cardComponentThe alert as the crew meets it — its priority, what happened, and what to do about it.
Alert listComponentThe active alerts in a named list, by priority and then newest first, with an empty state.
Alert list rowComponentOne alert in an alert list, with its priority's icon and word, its state, its time and its acknowledge button.
Alert zoneComponentThe top bar's alert zone, with the unacknowledged count, the worst alert's title and age, and an ACK button.
Due chipComponentA small chip marking a record whose date has passed or is coming, with the priority's shape as well as its color.
Live data connection noticeComponentThe red notice shown when the browser has lost its live connection to Bosun.
NMEA offline noticeComponentThe red notice shown when Bosun receives no current instrument data from the NMEA network.
Pressure barComponentHow loaded the alert board is, with the active alerts by priority, the unacknowledged count and its wait.
Readings and status
AIS target rowComponentOne AIS target in a list, with its ship type, name, MMSI, CPA, TCPA, SOG, COG and the age of its last report.
Instrument pillComponentA compact reading with a status dot, its label, its value and unit, and an arrow for the way it is moving.
Instrument pill groupComponentInstrument pills in an even grid under a label, wrapping by the container's width.
Level tileComponentA tank or battery level at a glance, with the gauge bar beside its figure, name and one line of detail.
ReadingComponentA live value with its unit, trend, age and source, and the trust it carries.
Ship dataComponentThe vessel's own data in one panel: heading figures and position, the compass, and the wind and current.
Status stripComponentThe global status strip, with the stream's state, the vessel's activity, the sensors' integrity, risk, do not disturb, theme and brightness, and the UTC clock.
Telemetry stripComponentA row of labeled readings separated by bars, each colored by how it stands.
Weather barComponentOne line with the weather now, the air temperature, pressure and sea state, and the forecasts after.
Charts and displays
ChartComponentA nautical chart with the server's geometry underneath and a React layer drawn over it.
Chart symbolsComponentOwn vessel, AIS targets and the track, drawn in the chart's dynamic layer.
Data tableComponentRows of records in columns, sorted by a press on a column heading.
Dial frameComponentA square face for one dial with its label, value and source under it.
SparklineComponentA small line through recent values, with no axes, for a trend seen at a glance.
Trace waterfallComponentA trace's timed spans as bars on a shared time axis, nested under their parents.
Trend chartComponentA series drawn as a line over a time axis, with reference lines and a marker.
Analytical charts and diagrams
Choose by the question the reader needs to answer. Analytical charts share registry labels, formatters, inspection and source data; a nautical Chart uses a geographic scene and vessel symbols.
| Question | Component |
|---|---|
| How does a value change over time? | Line chart |
| How do amounts compare? | Bar chart |
| How do amounts compose over time? | Area chart |
| What are the parts of a whole? | Pie chart |
| What belongs to the plot's frame and explanation? | Chart panel, legend and tooltip |
| How is a system connected? | Mermaid |
Reports and documentation
Start a report with Report metadata, then choose Report blocks for facts, metrics, comparisons, processes and evidence. Use Report figure for authored artwork with a caption and source. The report types guide supplies complete structures and downloadable starters. These components share the kit's document roles and work inside the available page width.
Conversation
Chat bubbleComponentOne chat message, set apart by who wrote it.
Chat inputComponentA one-line message field with a send button, which sends on Enter.
Other
Audio controlComponentThe output with its level and mute, and the microphone with its gain and live level.
Chess boardComponentA chess position drawn from a FEN string, with move entry by tap or drag.
Language pickerComponentThe crew's choice of language for the screen, each language named in itself, as a menu or a list.
LLM statusComponentWhich language model answers, how each provider is doing, and the tokens, cost and budget behind it.
QR codeComponentA QR code drawn dark on a light panel in every theme, such as the code that joins the guest Wi-Fi network.
Startup modalComponentbosund's startup as a modal, with the boot steps, a progress bar and a status line.
Vessel profileComponentThe vessel's side-view silhouette, drawn as an SVG that scales to its box.
System patterns
Patterns define the anatomy that components share. They are drawn here with the system's tokens, its typefaces and the vendored OpenBridge icons.
SidebarPatternIcon rail and grouped panel. The active row is raised, counts carry their severity shape, and keys are shown.
Status pillPatternA compact status with an optional marker dot in the accent, or a severity color.
Alarm rowPatternSeverity shape, severity word, cause icon, cause and time, and ACK with its A key.
Readout stripPatternReadouts separated by hairlines: icon, label and source above a large, light, tabular value.
Drawing with the system
Do
12.4
DST810
Don't
12.4 m
Related
- Themes: switch themes to see every specimen in Night, Dusk, Day and Bright.
- Alarms and severity: the rules the alarm components follow.
- Data integrity: the rules the Reading component follows.