Mandala UI Column Component


stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
Minified + gzip package size for @mandala-ui/column in KB


Mandala UI Column Component

Mandala is a React component library that utilizes a declarative CSS library for styling.


Check the MonoRepo README for installation.


A Column is used for separating content from other content. Defaults to 100% width for you to layout how you prefer.


if using the whole library:

import { Column } from 'mandala';

if only using this component:

import Column from '@mandala-ui/column';


  • backgroundColor - background color string
  • borderColor - border color string
  • borderRadius - number clamped between 1 and 4
  • children - Content inside the column
  • padding - number clamped between 1 and 4, padding around all
propName propType defaultValue isRequired
backgroundColor string white -
borderColor string white -
borderRadius number 0 -
children node null -
padding number 0 -
radius number 0 -


  • Border Width


If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.