app

hub

Overview
Foundations
Building Blocks
Interaction Patterns
MUI Advanced
Expert Libraries
Engineering
Integrations
v0.0.0

Dashboard

UI Component Showcase

Buttons
Sizes
Variants & Colors
With Icons
Icon Buttons
Sizes
Variants
Toggle Buttons
Sizes
Exclusive selection
Chips
Sizes
Small
Medium
Colors & Variants
Default
Primary
Secondary
Success
Warning
Error
Outlined
Primary
Error
With Icon
Deletable
Icon + Delete
Form Inputs
TextField sizes
TextField variants

Helper text example

Required field

Select sizes
Checkbox & Switch
Tabs
Default
Scrollable
Full width
Cards
Card TitleSubheader text

Card content with default density settings applied.

Outlined CardVariant: outlined

This card uses the outlined variant.

Tag A
Tag B
Table
PairBidAskSpreadStatus
EUR/USD1.08421.08450.3
Active
GBP/USD1.26511.26540.3
Active
USD/JPY149.82149.853.0
Wide
AUD/USD0.65320.65350.3
Active
USD/CHF0.88120.88160.4
Normal
List
  • Dashboard

    Overview page

  • Settings

    App configuration

  • Notifications

    3 unread

Accordions

Accordions group related content and can be expanded independently.

Accordions group related content and can be expanded independently.

Accordions group related content and can be expanded independently.

Alerts & Feedback
Severities (filled)
Variants
Progress
Avatars & Badges
Sizes
XS
S
M
L
XL
Colors
P
S
G
E
W
Badges
A
4
B
99
C
D
0
Typography

h1 Heading

h2 Heading

h3 Heading

h4 Heading

h5 Heading
h6 Heading
Subtitle 1
Subtitle 2

Body 1 - Regular body text used for content.

Body 2 - Secondary body text, slightly smaller.

Caption text for labels and metadata.