@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

Note — bg / border / text with dark mode variants
Tip — bg / border / text with dark mode variants
Info — bg / border / text with dark mode variants
Warning — bg / border / text with dark mode variants
Danger — bg / border / text with dark mode variants

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-hover-orange
.btn-hover-blue

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 Buttons

Select a data plan:

100 requests/day, delayed data

10,000 requests/day, real-time data

Unlimited requests, real-time data, options chains

.radio-button-input .radio-button-helper

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. Resize your browser to see breakpoint behavior.

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 narrow it at wider breakpoints:

.grid-content-position
span-12 → xl:span-10 → 2xl:span-8 (no styling, just position)

.grid-content-container
same centering + background, shadow, padding, rounded corners

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

User Profile

Framework-agnostic avatar component with optional dropdown. Fetches the current user from the MarketData API (requires *.marketdata.app cookie — this demo must be hosted on a .marketdata.app subdomain for credentials to be sent).

initUserProfile({ dropdown: false })

Logged in: avatar links to dashboard. Logged out: sign-in button.

initUserProfile({ dropdown: true })

Click avatar to toggle dropdown menu with user info and links.

SVG Placeholder Fallback

Shown when the Gravatar image fails to load (no Gravatar for the user's email).

Flowbite avatar/placeholder-icon pattern
initUserProfile() fetchUser() getGravatarUrl()