Intergalactic – Design System

Box

Component responsible for spacings and sizes 📐

import { Box } from '@semcore/ui/flex-box';
<Box />;

type

BoxProps

StyledProps & {...}

Property	Description
inline `boolean`	Sets the `inline-block` property
boxSizing `boolean \| "border-box"`	CSS `box-sizing: border-box` property
flex `Property.Flex`	CSS `flex` property
m `number \| string`	CSS `margin` property
mt `number \| string`	CSS `margin-top` property
mr `number \| string`	CSS `margin-right` property
mb `number \| string`	CSS `margin-bottom` property
ml `number \| string`	CSS `margin-left` property
mx `number \| string`	CSS `margin-left` and `margin-right` property
my `number \| string`	CSS `margin-top` and `margin-bottom` property
p `number \| string`	CSS `padding` property
pt `number \| string`	CSS `padding-top` property
pr `number \| string`	CSS `padding-right` property
pb `number \| string`	CSS `padding-bottom` property
pl `number \| string`	CSS `padding-left` property
px `number \| string`	CSS `padding-left` and `padding-right` property
py `number \| string`	CSS `padding-top` and `padding-bottom` property
w `number \| string`	CSS `width` property. If its value is less than 1, is considered as a fraction of 100%. If its value is more than 1, is considered as value in px, if it is a string, is passed as is.
wMin `number \| string`	CSS `min-width` property. If its value is less than 1, is considered as a fraction of 100%. If its value is more than 1, is considered as value in px, if it is a string, is passed as is.
wMax `number \| string`	CSS `max-width` property. If its value is less than 1, is considered as a fraction of 100%. If its value is more than 1, is considered as value in px, if it is a string, is passed as is.
h `number \| string`	CSS `height` property. If its value is less than 1, is considered as a fraction of 100%. If its value is more than 1, is considered as value in px, if it is a string, is passed as is.
hMin `number \| string`	CSS `min-height` property. If its value is less than 1, is considered as a fraction of 100%. If its value is more than 1, is considered as value in px, if it is a string, is passed as is.
hMax `number \| string`	CSS `max-height` property. If its value is less than 1, is considered as a fraction of 100%. If its value is more than 1, is considered as value in px, if it is a string, is passed as is.
scaleIndent `number` = 4	Multiplier of all indents. For example, if you specify a margin-top equal to 3 (mt = {3}), it will be 12px (3 * 4 = 12).
css `React.CSSProperties` deprecated v4.0.0	Property for specifying css properties in js
position `Property.Position`	CSS `position` property
top `number \| string`	CSS `top` property
left `number \| string`	CSS `left` property
bottom `number \| string`	CSS `bottom` property
right `number \| string`	CSS `right` property
zIndex `number`
children `React.ReactNode`

Flex

The layout building component is a wrapper over CSS-flex. It inherits all properties from Box.

import { Flex } from '@semcore/ui/flex-box';
<Flex />;

type

FlexProps

BoxProps & {...}

Property	Description
inline `boolean`	It manages the `inline-flex` property
reverse `boolean`	Adds the `reverse` property to `flex-direction`
flexWrap `boolean`	It manages the `flex-wrap` property
direction `Property.FlexDirection`	It manages the `flex-direction` property
alignItems `Property.AlignItems`	It manages the `align-items` property
alignContent `Property.AlignContent`	It manages the `align-content` property
justifyContent `Property.JustifyContent`	CSS `justify-content` property
gap `Property.Gap`	CSS `gap` property
rowGap `Property.RowGap`	CSS `gap` property
columnGap `Property.ColumnGap`	CSS `gap` property
scaleIndent `number` = 4	Multiplier of all indents. For example, if you specify a margin-top equal to 3 (mt = {3}), it will be 12px (3 * 4 = 12).

Flex-box and spacing system

Box

Flex