Rainbow’s design system provides a comprehensive set of layout components built on flexbox primitives. These components enable you to build complex layouts with consistent spacing and alignment.
Box
The foundational layout primitive. All other layout components are built on top of Box.
Props
background
BackgroundColor | 'accent'
Background color using design system tokens. Automatically sets color mode for nested elements.
Padding on all sides using spacing tokens (e.g., “12px”, “20px”)
Horizontal padding (left and right)
Vertical padding (top and bottom)
flexDirection
'row' | 'row-reverse' | 'column'
Flex direction for layout
alignItems
'flex-start' | 'flex-end' | 'center' | 'stretch'
Align children along the cross axis
justifyContent
'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around'
Align children along the main axis
Width (can use tokens like “1/2”, “1/3” or pixel values)
Height (can use tokens or pixel values)
Shadow using design system shadow tokens
Render as a different component (e.g., Animated.View)
Usage
import { Box } from '@/design-system';
function Example() {
return (
<Box
background="surfacePrimary"
padding="20px"
borderRadius={16}
shadow="12px"
>
{/* Content */}
</Box>
);
}
Polymorphic Component
Box supports polymorphic rendering with the as prop:
import Animated from 'react-native-reanimated';
<Box as={Animated.View} style={animatedStyles}>
{/* Animated content */}
</Box>
Stack
Arranges child nodes vertically with equal spacing between them.
Props
Space between children (e.g., “8px”, “12px”, “20px”)
alignHorizontal
'left' | 'center' | 'right' | 'stretch'
Horizontal alignment of children
Element to render between children
Width of the stack container
Usage
import { Stack, Text } from '@/design-system';
function Example() {
return (
<Stack space="12px" alignHorizontal="center">
<Text size="20pt" weight="bold" color="label">
Title
</Text>
<Text size="15pt" weight="regular" color="labelSecondary">
Description
</Text>
</Stack>
);
}
With Separator
import { Stack, Separator } from '@/design-system';
<Stack space="12px" separator={<Separator />}>
<Item />
<Item />
<Item />
</Stack>
Inline
Renders flowing content with equal spacing horizontally and vertically, wrapping to multiple lines if needed.
Props
Space between children in both directions
Horizontal space between children (overrides space)
Vertical space between children (overrides space)
alignHorizontal
'left' | 'center' | 'right' | 'justify'
Horizontal alignment
alignVertical
'top' | 'center' | 'bottom'
Vertical alignment
Whether to wrap items to multiple lines
Element to render between children (only when wrap=false)
Usage
import { Inline, Text } from '@/design-system';
function Tags() {
return (
<Inline space="8px" alignHorizontal="center">
<Tag label="DeFi" />
<Tag label="NFT" />
<Tag label="Gaming" />
</Inline>
);
}
Columns
Renders children in equal-width columns with consistent spacing.
Props
alignHorizontal
'left' | 'center' | 'right'
Horizontal alignment of columns
alignVertical
'top' | 'center' | 'bottom'
Vertical alignment within columns
Usage
import { Columns, Column, Text } from '@/design-system';
// Equal width columns
function EqualColumns() {
return (
<Columns space="12px">
<Text size="15pt" weight="semibold" color="label">Column 1</Text>
<Text size="15pt" weight="semibold" color="label">Column 2</Text>
</Columns>
);
}
// Custom width columns
function CustomColumns() {
return (
<Columns space="12px">
<Column width="1/3">
<Text size="15pt" weight="semibold" color="label">Sidebar</Text>
</Column>
<Column width="content">
<Text size="15pt" weight="semibold" color="label">Main</Text>
</Column>
</Columns>
);
}
Rows
Renders children in equal-height rows with consistent spacing.
Props
alignHorizontal
'left' | 'center' | 'right'
Horizontal alignment within rows
alignVertical
'top' | 'center' | 'bottom'
Vertical alignment of rows
Usage
import { Rows, Row, Text } from '@/design-system';
function Layout() {
return (
<Rows space="12px">
<Row height="content">
<Text size="20pt" weight="bold" color="label">Header</Text>
</Row>
<Row>
<Text size="15pt" weight="regular" color="label">Main content area</Text>
</Row>
<Row height="content">
<Text size="13pt" weight="medium" color="labelSecondary">Footer</Text>
</Row>
</Rows>
);
}
Inset
Renders a container with padding.
Props
Usage
import { Inset, Text } from '@/design-system';
function Example() {
return (
<Inset space="20px">
<Text size="15pt" weight="regular" color="label">
Padded content
</Text>
</Inset>
);
}
Cover
Renders an absolutely filled container relative to its parent.
Props
alignHorizontal
'left' | 'center' | 'right'
Horizontal alignment of children
alignVertical
'top' | 'center' | 'bottom'
Vertical alignment of children
pointerEvents
'auto' | 'none' | 'box-none' | 'box-only'
Touch event handling
Usage
import { Box, Cover, Text } from '@/design-system';
function Overlay() {
return (
<Box position="relative" height={200}>
<Cover alignHorizontal="center" alignVertical="center">
<Text size="17pt" weight="bold" color="label">
Centered Overlay
</Text>
</Cover>
</Box>
);
}
Spacing Tokens
The design system provides consistent spacing tokens:
type Space =
| "2px" | "3px" | "4px" | "6px" | "8px"
| "10px" | "12px" | "16px" | "20px" | "24px"
| "28px" | "32px" | "36px" | "44px" | "52px"
| "60px" | "72px" | "80px" | "104px"
| { custom: number };
Custom Spacing
For values not in the token system:
<Box padding={{ custom: 18 }}>
{/* Content */}
</Box>