@marketdataapp/ui

Shared component library for MarketData properties

Typography

font-sans

The quick brown fox jumps over the lazy dog.

font-mono

The quick brown fox jumps over the lazy dog.

font-quicksand

The quick brown fox jumps over the lazy dog.

Brand Colors

lightorange
#FFDFB9
darkorange
#E83155
lightblue
#0085f2
darkblue
#003286
bluebg
#001A6C

Semantic Colors

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

Note
bg border text darkbg darkborder darktext
Tip
Info
Warning
Danger

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.

Note

Some content with Markdown syntax. Check this api.

Tip

Some content with Markdown syntax. Check this api.

Info

Some content with Markdown syntax. Check this api.

Warning

Some content with Markdown syntax. Check this api.

Danger

Some content with Markdown syntax. Check this api.

Custom Titles

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

Pro Tip!

You can rate-limit your requests with the X-Api-Ratelimit-Reset header — no need to poll.

Did you know?

Our real-time data feeds use the same NMS-distributed sources as the major exchanges.

Heads up — rate limit changes

Free-tier requests are capped at 100/day starting in May.

Rich Content

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

Migrating from v3

Upgrading the SDK from v3 to v4 is mostly a drop-in replacement, but there are a few breaking changes you should know about.

The most common migration steps:

  1. Replace marketdata.client(key) with new MarketData({ apiKey: key }).
  2. Switch from positional arguments to keyword options on every endpoint.
  3. Update error handling — exceptions are now MarketDataError subclasses rather than plain Error.

For the full diff, see the migration guide.

Don’t commit your API key

If your API key ever ends up in a public repo, rotate it immediately:

  • Open your API Keys page.
  • Click Revoke on the leaked key.
  • Generate a new one and update your environment variables.

Leaked keys can be abused before our anomaly detection catches the spike — rotation is always faster than recovery.

Without an Icon

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

Note

An admonition heading without the leading icon — title text only.

Tip: A bare admonition with no heading at all — just the colored container around inline content. Useful for short asides where the visual treatment is enough context.

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>
.admonition .admonition-note .admonition-tip .admonition-info .admonition-warning .admonition-danger .admonition-heading .admonition-icon .admonition-content

Gradients & Shadows

bg-gradient-orange
bg-gradient-blue
shadow-line
shadow-darkline
shadow-diffuse

Buttons

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

.btn-orange-to-blue
.btn-blue-to-orange
.btn-outline-to-orange
.btn-outline-to-blue
.btn-orange-to-outline
.btn-blue-to-outline

Forms

Account Settings

your display name across MarketData

Please enter a valid email address.

contact support to regenerate

Form Classes

.form-container .form-heading .form-label .form-input .form-input-disabled .form-input-error .form-dropdown-input .form-helper-text .form-helper-text-error

Radio Group

Standalone

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

Select a data plan:

Inside a Form

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

Create Account

Select a data plan:

Simple Radio List

Standalone radio buttons without a container, for inline use.

Notification preference:

Inline Radio Buttons

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

Enable notifications?
Preferred contact method:

Disabled

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

.radio-group-container .radio-group-item .radio-button-input .radio-button-helper

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.

Notification Settings

Send me email about:
.checkbox-input

Badges

Standard Badges

Blue Gray Red Green Yellow Indigo Purple Pink

Pill Badges

Active Pending Expired
.badge .badge-{color} .badge-pill-{color}

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

1
2
3
4
5
6
7
8
9
10
11
12

Column Spans

col-span-12
col-span-6
col-span-6
col-span-4
col-span-4
col-span-4
col-span-3
col-span-6
col-span-3
2
2
2
2
2
2

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.

.grid-content-position
span-12 + mx-4 → xl:span-10 + mx-0 → 2xl:span-8 (position + margin only)

.grid-content-container
same centering + margin + card-surface (background, border, padding, shadow, rounded corners)

.grid-layout-12 .grid-content-container .grid-content-position .card-surface

Review Widget

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

initResenaWidget({ version: 'large' })

Resize below 1024px to see the compact view (text labels hide, only stars + logo remain).

initResenaWidget({ version: 'small' })
initResenaWidget() .resena-widget .resena-small