TypeScript icon, indicating that this package has built-in type declarations

1.1.4 • Public • Published


A React component for rapid box modeling

Built with TypeScript and styled-components


Box is simply an HTML div element. What makes it unique are it's available props which are semantically defined to enable rapid layouts using common box-model attributes such as padding, margin, position, and so on.

Example: 12-column grid

  gtc="repeat(12, minmax(0, 1fr))"

Installation via NPM

npm install @quanda/react-box


Basic Flexbox example

import { Box } from '@quanda/react-box';

const BoxDemo = () => {
  return (

export default BoxDemo;

Available Props

Note that many of the props are defined twice in order to allow for both shorthand and verbose usage. For example, the CSS property display can be set using either the d or display prop.

Full props list (with types)

  className?: string;
  children: JSX.Element[] | JSX.Element;
  d?: string;
  display?: string;
  h?: string;
  height?: string;
  minh?: string;
  minHeight?: string;
  maxh?: string;
  maxHeight?: string;
  w?: string;
  width?: string;
  minw?: string;
  minWidth?: string;
  maxw?: string;
  maxWidth?: string;
  pos?: string;
  position?: string;
  top?: string;
  bottom?: string;
  left?: string;
  right?: string;
  zi?: string;
  zIndex?: string;
  textAlign?: string;
  m?: string;
  margin?: string;
  mt?: string;
  marginTop?: string;
  mr?: string;
  marginRight?: string;
  mb?: string;
  marginBottom?: string;
  ml?: string;
  marginLeft?: string;
  p?: string;
  padding?: string;
  pt?: string;
  paddingTop?: string;
  pr?: string;
  paddingRight?: string;
  pb?: string;
  paddingBottom?: string;
  pl?: string;
  paddingLeft?: string;
  border?: string;
  borderRadius?: string;
  borderWidth?: string;
  flex?: boolean | string;
  row?: boolean;
  col?: boolean;
  fb?: string;
  flexBasis?: string;
  fw?: string;
  flexWrap?: string;
  fg?: string;
  flexGrow?: string;
  fs?: string;
  flexShrink?: string;
  ai?: string;
  alignItems?: string;
  ac?: string;
  alignContent?: string;
  als?: string;
  alignSelf?: string;
  ji?: string;
  justifyItems?: string;
  jc?: string;
  justifyContent?: string;
  js?: string;
  justifySelf?: string;
  gtc?: string;
  gridTemplateColumns?: string;
  gtr?: string;
  gridTemplateRows?: string;
  gar?: string;
  gridAutoRows?: string;
  gac?: string;
  gridAutoColumns?: string;
  gcs?: string;
  gridColumnStart?: string;
  gce?: string;
  gridColumnEnd?: string;
  gcg?: string;
  gridColumnGap?: string;
  grs?: string;
  gridRowStart?: string;
  gre?: string;
  gridRowEnd?: string;
  grg?: string;
  gridRowGap?: string;
  gg?: string;
  gridGap?: string;
  ga?: string;
  gridArea?: string;
  gc?: string;
  gridColumn?: string;
  gr?: string;
  gridRow?: string;
  scroll?: boolean;
  scrollY?: boolean;
  scrollX?: boolean;

Package Sidebar


Weekly Downloads






Unpacked Size

22.8 kB

Total Files


Last publish


  • quanda