Getting Started

Foundations

ColorPaletteTypographyIconographyThemingBreakpoints

Core Components

AbsoluteBackgroundImageBadgeBannerBlockLinkBoxButtonCardCheckboxCloseButtonContainerDividerFlagFlexFormFieldGenericBannerHeadingHideHugIconIconButtonIconFieldImageInputInputGroupLabelLinkPlaceholderImageProgressBarRadioRatingBadgeRelativeSelectStampSwatchTextTextAreaToggleBadgeTooltipTruncate

Modal Components

ModalScrollLock

Popover

Popover

Slider

RangeSliderSlider

Utilities

borderscolorgetPaletteColorgetTextColorOngetLinkStylesOn

Resources

MotionLayoutContributingGitHub

BlockLink

The BlockLink component is an unstyled <a> element that can be used to wrap block-level content.

Extends: Link

Priceline.com
<BlockLink href='https://www.priceline.com'>
  <Box p={4} color='white' bg='blue'>
    Priceline.com
  </Box>
</BlockLink>
Banner
Box