Skip to content
Barua UI v0.2
Components

Content

The read layer — cards, lists, tables, trees and everything else that presents information rather than collecting it. Content components share one surface language: hairline separators, quiet fills, and a single accent that marks selection everywhere.

Card

A bordered surface with optional .b-card__header, .b-card__body and .b-card__footer regions. Title and subtitle classes keep the type ramp consistent across products.

Safari itinerary
Serengeti & Ngorongoro · 5 days
Depart Arusha at dawn, overnight in Seronera, then descend into the crater on day four. Amina Hassan is confirmed as your guide.

Variants

.b-card--glass blurs whatever sits behind it — reserve it for cards floating over imagery or color. The header’s trailing slot takes a button or a status .b-badge.

Zanzibar weekender
Live
Glass card over the canvas

.b-card--neutral is the one card that does not assume the page behind it. Its material is a neutral veil, so it lightens a dark backdrop and darkens a light one by the same step — the same card over a photograph, a wallpaper or artwork. Put it inside a wallpaper scope and the ink follows the backdrop too, as both strips below do.

Over something bright
One step darker than the wall.
Over something dark
One step lighter than the wall.
Elevated
Shadow, no border
Interactive
Lifts on hover
Accent
Top accent rule
Compact
Widget density

Media card

Stone Town, off season
Travel notes from Zanzibar · 6 min read

Story card (App Store style)

The iOS "Today" pattern: full-bleed art with an __eyebrow + __title stack laid over a bottom scrim. Use .b-card--media-overlay with a __media layer and a __overlay text block.

App of the day
Barua Mail
Inbox zero, made of glass.

Icon card

A feature card led by an .b-icon-tile. Add .b-card--icon so the body stacks and aligns the tile.

Smart inbox
Rules sort mail before you see it.
Delivered
Read receipts without the creep.

Grouped list card (iOS Settings)

The inset-grouped list from iOS Settings: .b-card--flush removes body padding so a .b-list--plain sits edge to edge, each row led by a small solid .b-icon-tile--sm in a system color.

  • Wi-Fi Ghala ›
  • Bluetooth On ›
  • Screen Time ›
  • General ›

Cards that end level

Three cards in a grid are already the same height; their bodies are not, so the button at the end of each one lands wherever the copy above it happened to stop. .b-card--fill hands the height down to .b-card__body, and a .b-spacer before the last row pins it to the floor. A pricing table is the case this exists for.

Duka

A shop or an office with staff, where more than one person answers the same address every morning.

Get started

Kampuni

A company that wants its own everything.

Get started

Icon tile colors

Solid .b-icon-tile--sm tiles come in the system palette: --solid (accent), --green, --orange, --red, --purple, --teal, --indigo and --gray.

App card

Artwork, name, developer and a tinted pill action — the App Store row, composed from __art, list anatomy and a .b-btn--tinted .b-btn--pill.

Barua Mail
Neurotech · Productivity

List & List Item

iOS-style grouped list. Each .b-list-item slots a leading icon, a content column with title and subtitle, trailing detail text and an optional chevron. Add .b-list-item--interactive for hover feedback and .is-selected for the accent wash.

Inset dividers

.b-list--inset-divider starts each hairline at the text edge instead of the container edge — the Settings-app look.

Accessibility. Keep lists real lists — a <ul> of <li> — so screen readers announce position and count. When a row navigates or triggers an action, wrap the row content in an <a> or <button> rather than putting a click handler on the <li>; the chevron is decorative and stays aria-hidden.

Rows that do something

A row that navigates is an <a>; a row that acts is a <button>. .b-list-item resets the browser's button chrome itself — the face, the border, the centred text — so a list of actions does not render as a column of grey slabs. Nothing to state at the call site.

.b-list-item--top is for rows taller than one line: it lifts the leading mark and the trailing stack up beside the first line instead of centring them against three. A mail row is the case it was drawn for.

The second row is a real <button>. It is indistinguishable from the anchor above it, which is the point.

List Header & Footer

iOS grouped-list captions: an uppercase .b-list__header above the group and a quiet explanatory .b-list__footer beneath — the Settings-app pattern for telling people what a group does.

Notifications
  • New mail
  • Mentions
Delivered quietly between 22:00 and 07:00.

Description List

Label–value pairs on a two-column grid. Use for read-only detail panes; switch to .b-dl--stacked in narrow columns.

Full name
Amina Hassan
Route
Dar es Salaam → Zanzibar
Vessel
MV Kilimanjaro IV, deck 2
Booking reference
ZNZ-88214

Stacked

Warehouse
Ubungo, Dar es Salaam
Manager on duty
Juma Ally
Cut-off for same-day dispatch
14:30 EAT

GroupBox

SwiftUI's GroupBox for the web: a quiet, labeled enclosure for related content — softer than a card, and it nests (a nested box flips back to surface so depth stays readable).

Hydration
Today 1.2 L of 2 L

Labeled Content

SwiftUI's LabeledContent: the standard label-left, value-right row for settings and detail screens. Rows separate with hairlines automatically; the label takes an optional small second line.

Plan Barua Business
StorageMail and Drive combined 8.2 GB of 15 GB
Two-factor

Table

Wrap every .b-table in a .b-table-wrap so it scrolls horizontally instead of breaking the page. Sortable columns put a .b-table__sort button inside the header cell; .is-asc / .is-desc flip the arrow. Numeric columns take .b-table__num for right-aligned tabular figures.

Seats Fare (TZS)
Dar es Salaam → Zanzibar Today 15:45 64 35,000
Nairobi → Mombasa Today 20:35 118 58,500
Arusha → Moshi Tomorrow 07:10 42 12,000
Dodoma → Dar es Salaam Tomorrow 09:00 51 41,000

Striped & compact

Manifest Destination Parcels
MAN-1182Kampala240
MAN-1181Kigali96
MAN-1180Mwanza311
MAN-1179Tanga57
Accessibility. Give every header cell scope="col" (or scope="row" for row headers) so cells announce with their headers. Sortable headers keep the <button> inside the <th> and mirror the state with aria-sort on the header cell — the arrow glyph alone is not announced.

Data Grid

Add .b-datagrid to the table wrap for a scrolling body with a sticky header — height comes from the --b-datagrid-h custom property. Row actions in a .b-row-actions span stay hidden until the row is hovered.

Invoice Customer City Amount (TZS) Actions
BR-2610Amina HassanDar es Salaam240,000
BR-2609Baraka MwangiNairobi96,500
BR-2608Neema JosephZanzibar57,000
BR-2607Juma AllyMombasa183,200
BR-2606Khadija OmarArusha44,000
BR-2605Eric OtienoKampala128,750
BR-2604Fatma SaidDodoma72,300
BR-2603David KimaniKigali210,000
BR-2602Zawadi OkelloMoshi39,900
BR-2601Grace WanjiruTanga65,400
Accessibility. Hover-revealed row actions are still real buttons in the tab order — keyboard users reach them even while they are visually hidden. For anything destructive, also expose the same actions through a persistent overflow menu so they are discoverable without a pointer.

Tree

Nested <details> elements with the .b-tree-item class — branches expand natively, no JavaScript. Leaves are plain .b-tree-item__row divs indented to align with branch labels.

Timeline

A vertical sequence of events. Mark finished steps .is-complete (filled accent dot) and the current one .is-active (accent ring); untouched steps stay gray.

  1. Mon 24 Aug · 08:12
    Order placed
    Amina Hassan paid TZS 240,000 via mobile money.
  2. Mon 24 Aug · 16:40
    Packed in Dar es Salaam
    Two parcels sealed at the Ubungo depot.
  3. Wed 26 Aug · 06:55
    In transit to Nairobi
    Cleared Namanga border, ETA tonight.
  4. Pending
    Delivered
    Signature required on arrival.

Feed

Avatar-plus-bubble rows for comments and activity streams. The bubble is a bordered surface; .b-feed__meta carries the byline.

AH
Customs cleared the container this morning — paperwork is in the shared folder.
Amina Hassan · 2 h ago · Dar es Salaam
BM
Asante! I’ll schedule the Nairobi leg for tomorrow at dawn.
Baraka Mwangi · 1 h ago · Nairobi
NJ
Flag anything fragile — the Zanzibar ferry crossing is rough this week.
Neema Joseph · 20 min ago · Zanzibar

Accordion & Disclosure

A .b-accordion stacks details.b-disclosure panels with hairlines between them — native open/close semantics and keyboard support for free. Use a lone .b-disclosure--plain for an inline “show more”.

How long does delivery to Zanzibar take?
Parcels leave Dar es Salaam on the 15:45 ferry daily. Most deliveries land in Stone Town the same evening; the east-coast villages add one day.
Which cities do you cover?
Dar es Salaam, Nairobi, Mombasa, Arusha, Dodoma, Kampala and Kigali — with partner depots in Moshi and Tanga.
Can I change the delivery address?
Yes, until the parcel is marked out for delivery. Edits after dispatch reroute on the next leg.

Plain disclosure

Show advanced options
Insurance, customs pre-clearance and cold-chain handling are configured per shipment.

Badge

Small status labels. --dot prefixes a colored point, --count is the red numeric pill, and --solid fills with the accent for maximum emphasis.

Default Accent Delivered Held at customs Failed Solid Online Offline 12

Tag & Chip

Tags are quiet, outlined metadata — never click targets. Chips are interactive: real buttons that toggle with .is-selected (or aria-pressed) and can carry a .b-chip__remove affordance.

fragile express cold-chain v0.1
Zanzibar
Use chips for input the person controls — filters, recipients, selected cities — and give each one real button semantics so state is announced.
Don’t make tags clickable or dress badges up as actions. If it triggers behavior it’s a chip or a button; tags and badges only describe.

Avatar & Avatar Group

Initials on the accent-soft fill are the built-in fallback — no broken-image state, ever. Sizes run --xs to --xl; --square suits workspaces and files, --online adds the presence dot.

AH BM NJ JA KO DK FS

Group

AH BM NJ +4

Icon

.b-icon is a sized slot for any inline SVG — it inherits currentColor, so icons re-tint with their context. .b-icon-tile wraps one in the rounded accent square used across settings lists and feature grids.

Image

.b-img rounds and crops; --framed adds a soft elevation shadow. .b-figure pairs an image with a quiet caption. Gradients stand in for photography below.

Forodhani Gardens at dusk, Zanzibar.

Code Block

Always dark, regardless of theme. The header slot names the file and hosts a .b-code__copy button — point data-b-copy at the id of the <code> element and Barua handles the clipboard.

install.sh 
npm install barua-ui
# or just link the stylesheet
<link rel="stylesheet" href="css/barua.css">

Quote

Accent-washed pull quote with an inline-start rule. Keep the <cite> inside the blockquote for attribution.

Barua turned a two-day paperwork run into an afternoon. We clear a full container out of Dar es Salaam before lunch now.

Khadija Omar — Operations lead, Mombasa

Statistic

Big tabular-numeral values with a label and an optional delta. .is-up renders green, .is-down red — pick metrics where the direction matches the sentiment.

Deliveries this month
4,807
↑ 12.4% vs July
On-time rate
96.2%
↑ 1.1 pts
Revenue (TZS)
86.4M
↓ 3.2% vs July

Empty State

Centered icon, headline, one supportive sentence, one action. Never leave a blank pane — tell people what belongs here and how to start.

No shipments yet

When you book a pickup or send a parcel, it appears here with live tracking from depot to doorstep.

Rich Media & Text

Video and audio players live on the Media page. For rendered markdown and rich text, Barua’s base typography does the work — headings, paragraphs, inline code, quotes and lists inherit the ramp, so a .b-card__body is all a prose container needs.

Shipping to Zanzibar

Parcels bound for the islands route through the ZNZ depot and cross on the afternoon ferry from Dar es Salaam.

Book before 13:00 EAT to make the same-day crossing.
  • Stone Town — same evening
  • Nungwi and the east coast — next morning
  • Pemba — every Tuesday and Friday
↵ openesc close