@marketdataapp/ui

Typography

Brand Colors

Semantic Colors

Token triplets (background / border / text) for each admonition type, with dedicated dark variants. See the Admonitions section below for the rendered component.

Admonitions

Docusaurus-style callout boxes. Five built-in types, each with its own icon (sourced from Docusaurus). Supports custom titles, multiple paragraphs, links, inline code, lists, and more.

Default Types

Each type uses its semantic color tokens for background, left border, and text — and ships with the matching SVG icon.

Custom Titles

Replace the default label with anything — including markdown formatting. Mirrors the Docusaurus :::tip[Custom Title] syntax.

Rich Content

Multiple paragraphs, ordered/unordered lists, inline code, and links all flow naturally inside .admonition-content.

Without an Icon

Omit .admonition-icon for a text-only heading. Drop the heading entirely if you only need the colored container.

Markup Pattern

<div class="admonition admonition-tip">
  <div class="admonition-heading">
    <span class="admonition-icon"></span>
    <span>Pro Tip!</span>
  </div>
  <div class="admonition-content">
    <p>Some <strong>content</strong> with <a href="...">a link</a>.</p>
  </div>
</div>

Gradients & Shadows

Buttons

Hover to see gradient transitions. All buttons include disabled states.

<!-- HTMX: zero JS, .htmx-request is added automatically -->
<button class="btn-orange-to-blue" hx-post="/save">
  <span data-btn-default>Save changes</span>
  <span data-btn-loading>
    <span class="spinner w-4 h-4"></span>
    Saving…
  </span>
</button>

<!-- Manual / framework-agnostic via aria-busy -->
button.setAttribute('aria-busy', 'true');   // start
button.removeAttribute('aria-busy');        // done

Spinner

Indeterminate loading indicator. The SVG track + arc live entirely in CSS via mask-image, so consumer markup is just one empty wrapper with role="status" and an sr-only label. Default size is w-8 h-8; override with any Tailwind width/height utility. The arc follows currentColor — set it with any text-* utility. The track defaults to neutral-tertiary; override via the --spinner-track custom property.

Progress Bar

Thin horizontal bar for determinate progress. Two utilities: a .progress-bar track and a .progress-bar-fill child whose width is driven by an inline style="width: N%" (or a CSS custom property). Default height is h-2; override with h-1.5 or h-2.5 on the track for Flowbite small/large sizes. The fill ships in the brand orange gradient by default; modifier classes swap it for the brand blue gradient (-blue) or solid Flowbite semantic colors (-info, -success, -danger) that auto-swap for dark mode. Width changes animate over 400ms so updates from PHP/JS feel smooth.

Markup Pattern

<div class="progress-bar" role="progressbar"
     aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar-fill" style="width: 45%"></div>
</div>

Forms

Cross-container label state sync

When a <label for="X"> sits in a different parent from #X (e.g. a two-column form grid where labels and inputs live in separate cells), CSS alone can't gray the label when the input is disabled or color it red when the input is aria-invalid="true" — there's no selector that compares a label's for against another element's id. Importing @marketdataapp/ui/label-state-sync and calling initLabelStateSync() reflects each control's state onto its label via disabled and error attributes, which the CSS picks up. Re-syncs automatically as inputs flip or DOM mutates.

The checkbox rows use .form-checkbox-label — a companion-label utility for checkboxes/radios whose input lives in a sibling parent. Unlike .form-label it drops the mb-2 and font-medium stacked-field affordances, and bakes in its own &[disabled] rule so consumer overrides at higher selector specificity can't strip the disabled styling.

data-state-for override for broken for markup

When a <label for="X"> points at an id that doesn't exist — or points at a wrapper around the real controls — add data-state-for="<id> [<id> …]" to the label. The override replaces for as the source for state mirroring (the native for keeps its click-to-focus role even if the id is wrong). Multiple ids combine with ANY semantics: if any listed target is disabled / invalid / focused, the label gets the matching attribute. Common case: amember's swap-input pattern where a <select> and fallback <input> share a single label and toggle visibility with display: none.

Copy Input

Readonly input with an overlaid copy-to-clipboard button. Click the button to copy the input's value; success state resets after 2 seconds. Multiple instances on a page operate independently. Pass data-copy-value on the button to copy a value other than the visible text.

Icon-only variant

Tighter footprint — just the icon, with a tooltip on hover. Pair .copy-input-compact with .copy-input-icon-button.

Radio Group

Standalone

Radio group on the page background. Uses default contrast tiers.

Inside a Form

When nested inside .form-container, backgrounds automatically shift one tier deeper for proper contrast.

Simple Radio List

Standalone radio buttons without a container, for inline use.

Inline Radio Buttons

Horizontal radio buttons for compact yes/no or short-option questions.

Disabled

Add the disabled attribute — the border lightens, the label dims, and cursor-not-allowed is applied automatically.

Checkboxes

Default

The standard Flowbite checkbox using brand-soft focus ring with full dark-mode support.

Disabled

Add the disabled attribute — the border lightens, the sibling label dims, and cursor-not-allowed is applied automatically.

Inside a Form

Checkboxes work the same inside a .form-container.

Status Indicators

A coloured dot for system / user / item status. Sized in em so it scales with the parent font-size — drop one into a heading, a paragraph, or a .badge-pill and it adopts the right size. Add .indicator-pulse for an animated halo. The colour carries the meaning, so always pair with an aria-label.

For reliable vertical alignment with its label, wrap the dot and its text in inline-flex items-center gap-2. The bare-inline fallback (vertical-align: middle) aligns to x-height rather than cap-line and drifts noticeably at larger font sizes.

Colours

Pulse

Use the pulse halo when the status is actively changing or warrants extra attention. The halo is a pseudo-element, so screen readers ignore it.

Sizes via inheritance

The dot inherits its size from the parent's font-size. .indicator-sm and .indicator-lg nudge it relative to that baseline.

Inside a pill

Composes cleanly with .badge-pill.

Badges

Standard Badges

Pill Badges

Links

Drop-in utility for decorating outbound links. Add .external-link to any <a> and a trailing icon is added via ::after. No companion classes, no inline SVG, no sizing or color props.

Default

The icon inherits its size and color from the parent.

See the Market Data API reference for the full list of endpoints.

Sizes via inheritance

The icon is sized in em, so a link in an <h2> gets a larger arrow and a link in <small> gets a smaller one — no class changes needed at the call site.

Colors via inheritance

The icon is masked with currentColor, so it tracks the link's color through :hover, dark mode, and any context override automatically. Hover the links below to see the icon recolor.

Markup Pattern

<a class="external-link" href="https://..." target="_blank" rel="noopener">
  exchange entitlements
</a>

Back & Next Links

Same system as .external-link, but with directional arrows. .next-link adds an arrow-right via ::after; .back-link adds an arrow-left via ::before. Icons inherit size and color the same way.

<a class="back-link" href="/previous">Previous page</a>
<a class="next-link" href="/next">Next page</a>

Grid Layout

A 12-column grid system. .grid-layout-12 sets up the grid, then child elements use column spans to control width. .grid-content-position and .grid-content-container handle all spacing automatically — they add horizontal margin on small screens to keep content off the viewport edges, then remove it at larger breakpoints where the grid columns provide the centering. Consumers don't need to add their own margin or padding.

The 12-Column Grid

Column Spans

Content Containers

These preset classes center content and progressively narrow it at wider breakpoints. Both include built-in horizontal margin on small screens (mx-4 / md:mx-6) so content never touches the viewport edge. At xl+ the margin is removed because the grid columns handle the inset.

Navbar Overflow

Priority-based auto-hide for navbar items. Uses ResizeObserver to monitor container width and hides items in priority order (lowest first) when space runs out. Drag the resize handle to see it in action.

Review Widget

Review platform rating widget. Renders build-time review data with clickable links to the review profile page.