Box Kite

v3.3.3

Getting Started

Introduction

Installation

Core

Components

Layout

Extensions

Resources

Theme

Box

The foundational component with CSS-as-props. Build anything with type-safe styling.

Import

JSX

import Box from '@cronocode/react-box';

Property Categories

Spacing

Sizing

Layout

Position

Typography

Visual

Border

Interaction

Misc

Spacing Properties

Interactive demos

Margin (m, mx, my, mt, mr, mb, ml, ms, me)

Controls space outside the element

m={0}

m={2}

m={4}

mx={4} my={1}

m={4} mx={2} mt={6}

Show code

Padding (p, px, py, pt, pr, pb, pl, ps, pe)

Controls space inside the element

p={1}

p={3}

p={5}

px={6} py={2}

p={4} px={6}

Show code

Gap (gap, rowGap, columnGap)

Controls space between flex/grid children

gap=1

gap=4

gap={4}

Show code