@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>

Form Inputs

Text fields and their states, dropdowns, the search group, the copy group, radio buttons and checkboxes all live on their own page now — there are enough variants that they were crowding out the rest of the library here.

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

Clickable Badges

A badge that carries a link styles itself as one — there is no opt-in class. Hover the badges below, then press Tab through them: each rings in its own colour. The row underneath is the same markup on a <span>, which is unchanged.

Clickable Pills

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.