The background kit is used for adding a background to a page or to any container. Instead of adding a custom class to give something a background, you can now wrap the elements in the background kit and use the background_color prop to assign its color. The colors that you can choose from for the background_color prop are: gradient, dark, light, white, status colors, product colors, and category colors.





Background Kit Image

We cannot seek achievement for ourselves and forget about progress and prosperity for our community... Our ambitions must be broad enough to include the aspirations and needs of others, for their sakes and for our own. -Cesar Chavez


Status colors can be passed into the background kit. success, warning, error, info, neutral, and primary


Category colors can be passed into the background kit. Values category_1 to category_21 are accepted. List of all category and status colors can be viewed here.

UI Samples using Background Kit

Get the full picture. See how this kit is used in our samples.

Available Props

  • classname
  • dark
  • margin
  • margin_bottom
  • margin_left
  • margin_right
  • margin_top
  • margin_x
  • margin_y
  • max_width
  • padding
  • padding_bottom
  • padding_left
  • padding_right
  • padding_top
  • padding_x
  • padding_y
  • z_index
  • number_spacing
  • id
  • data
  • aria
  • children
  • background_color
  • image_url
  • tag