@radix-ui/themes/src/components/index.css

[](https://radix-ui.com/themes)

@import './reset.css';
@import './animations.css';
@import './layout.css';

/* Import Skeleton before other components so that its default border-radius doesn’t have a higher specificity */
@import './skeleton.css';

/* Import Text before other components as it’s commonly extended */
@import './text.css';

@import './alert-dialog.css';
@import './avatar.css';
@import './badge.css';
@import './blockquote.css';
@import './button.css';
@import './callout.css';
@import './card.css';
@import './checkbox-cards.css';
@import './checkbox-group.css';
@import './checkbox.css';
@import './code.css';
@import './context-menu.css';
@import './data-list.css';
@import './dialog.css';
@import './dropdown-menu.css';
@import './em.css';
@import './heading.css';
@import './hover-card.css';
@import './icon-button.css';
@import './inset.css';
@import './kbd.css';
@import './link.css';
@import './popover.css';
@import './progress.css';
@import './quote.css';
@import './radio-cards.css';
@import './radio-group.css';
@import './radio.css';
@import './scroll-area.css';
@import './segmented-control.css';
@import './select.css';
@import './separator.css';
@import './slider.css';
@import './spinner.css';
@import './strong.css';
@import './switch.css';
@import './tab-nav.css';
@import './table.css';
@import './tabs.css';
@import './text-area.css';
@import './text-field.css';
@import './theme-panel.css';
@import './tooltip.css';

.radix-themes:where([data-is-root-theme='true']) {
  /* Create a new stacking context on the root `Theme` so layered components work out of the box */
  position: relative;
  z-index: 0;

  /* Make sure root `Theme` background covers the viewport */
  min-height: 100vh;
  @supports (min-height: 100dvh) {
    min-height: 100dvh;
  }
}