Documentation

Asgard

Getting started

Theming

Guides

Layout

Docking

Inputs & forms

Button

Switch

Checkbox

Radio

Select

Slider

TextBox

Upload

ImageCropper

Pickers

Color picker

Calendar

Time picker

DateTime input

Data display

Card

Accordion

Typography

Progress

DataTable

TreeView

SyntaxColor

MarkdownRenderer

Terminal

Layout & docking

Grid

Splitter

SDiv

Dock

Theme switcher

Media query

Feedback & overlays

Alert

Toast

Tooltip

Popups

Drawer

FloatingPanel

FloatingWindow

Navigation & chrome

Breadcrumb

Stepper

Toolbar

Ribbon

ContextMenu

FeatureTour

Documentation

Asgard

Getting started

Theming

Guides

Layout

Docking

Inputs & forms

Button

Switch

Checkbox

Radio

Select

Slider

TextBox

Upload

ImageCropper

Pickers

Color picker

Calendar

Time picker

DateTime input

Data display

Card

Accordion

Typography

Progress

DataTable

TreeView

SyntaxColor

MarkdownRenderer

Terminal

Layout & docking

Grid

Splitter

SDiv

Dock

Theme switcher

Media query

Feedback & overlays

Alert

Toast

Tooltip

Popups

Drawer

FloatingPanel

FloatingWindow

Navigation & chrome

Breadcrumb

Stepper

Toolbar

Ribbon

ContextMenu

FeatureTour

Layout & docking

React to the viewport breakpoint.

MediaQueryProvider tracks the viewport and exposes the active breakpoint (xs, sm, md, lg, xl) through useMediaQuery(), so components can adapt their layout responsively without writing media queries by hand.

Resize the window and watch the active breakpoint update below.

Loading preview…
When to use it
  • Responsive layout switches
  • Conditional rendering by breakpoint
  • Adaptive component density
Presets