Material Design UI Kit

Home
Nav DrawerButtonsCardsMenusColorsTabsBottom SheetsTooltipsListsIcons
SettingsExample AppTheme

  • Nav Drawer
  • Buttons
  • Cards
  • Menus
  • Colors
  • Tabs
  • Bottom Sheets
  • Tooltips
  • Lists
  • Icons
  • Typography
  • About
Nav Drawer
The navigation drawer slides in from the left and contains the navigation destinations for your app.
Buttons
Buttons communicate the action that will occur when the user touches them.
Cards
A card is a sheet of material that serves as an entry point to more detailed information.
Menus
Menus display a list of choices on a transient sheet of material.
Colors
Color in material design is inspired by bold hues juxtaposed with muted environments, deep shadows, and bright highlights.
Tabs
Tabs make it easy to explore and switch between different views.
Bottom Sheets
Bottom sheets slide up from the bottom of the screen to reveal more content.
Tooltips
Tooltips are text labels that appear when the user hovers over, focuses on, or touches an element.
Lists
Lists are best suited to presenting a homogeneous data type or sets of data types, such as images and text.
Icons
Material icons use geometric shapes to visually represent core ideas, capabilities, or topics.
Typography
Roboto and Noto are the standard typefaces on Android and Chrome.
Card images from google material design guidelines