Material-UI

Material-UI Team

Open in Framer X

Material-UI

This is the official resource for Material-UI React components in Framer.

Supported components

The following components are currently supported:

  • App bar
  • Avatar
  • Badge
  • Bottom navigation
  • Button
  • Checkbox
  • Chip
  • Circular progress
  • Floating action button (Fab)
  • Icon (all 1100+ Material Icons in 5 themes, plus social icons)
  • Icon button (with optional badge)
  • Linear progress
  • List
  • List item
  • Media card
  • Paper
  • Radio
  • Radio group
  • Slider
  • Snackbar content
  • Switch
  • Tabs
  • Text field
  • Theme (to globally set primary, secondary and error colors)
  • Typography

Usage

Icons

Icons can be specified using either snake_case (as documented on material.io), or PascalCase, as used in the Material-UI documentation. Simply type the icon name in the appropriate property control.

The icon theme can be chosen from the related select field.

Children

Where a component (such as Avatar) accepts a variety of child types, these can be configured through Framer property controls. If multiple options are supplied, they take the following priority:

  • Local image
  • Image URL
  • Icon
  • Text

Resources

Opening Package in Framer X...

Don’t have Framer X yet?Start your Free Trial

By using our website, you agree to the use of cookies as described in our  Privacy Policy —
I Agree