Center is a layout component that centers its child within itself.


  • Center: centers it's child given width and height
  • Square: centers it's child given size (width and height)
  • Circle: a Square with round border-radius


Put any child element inside it, give it any width or/and height, it'll ensure the child is centered.

This is the Center
Editable Example

With icons#

Center can be used to create frames around icons or numbers

Editable Example

Square and Circle#

To reduce boilerplace, we've export Square and Circle components that automatically centers it's children given the size.

Editable Example
Edit this page

Made byChakraandRock Content