Skip to main content
View is a versatile layout component that provides a comprehensive set of flexbox properties and styling options. It serves as the foundation for building complex layouts with support for responsive design.

​
Import

import { View } from 'reshaped';

​
Basic Usage

<View gap={4} direction="column">
  <View padding={4} backgroundColor="neutral-faded">
    Item 1
  </View>
  <View padding={4} backgroundColor="neutral-faded">
    Item 2
  </View>
</View>

​
Layout Properties

​
Direction and Alignment

<View direction="row" align="center" justify="space-between" gap={4}>
  <View padding={4} backgroundColor="neutral-faded">Left</View>
  <View padding={4} backgroundColor="neutral-faded">Right</View>
</View>

​
Responsive Layout

<View 
  direction={{ s: "column", m: "row" }}
  gap={{ s: 2, m: 4 }}
>
  <View.Item columns={{ s: 12, m: 6 }}>
    <View padding={4} backgroundColor="neutral-faded">Column 1</View>
  </View.Item>
  <View.Item columns={{ s: 12, m: 6 }}>
    <View padding={4} backgroundColor="neutral-faded">Column 2</View>
  </View.Item>
</View>

​
View.Item Component

View.Item provides additional layout control for individual children within a View. 
<View direction="row" gap={4}>
  <View.Item columns={3}>
    <View padding={4} backgroundColor="neutral-faded">Sidebar</View>
  </View.Item>
  <View.Item columns={9} grow>
    <View padding={4} backgroundColor="neutral-faded">Main Content</View>
  </View.Item>
</View>

​
Gap Control

<View direction="row" gap={4}>
  <View padding={4} backgroundColor="neutral-faded">Item 1</View>
  <View padding={4} backgroundColor="neutral-faded">Item 2</View>
  <View.Item gapBefore={10}>
    <View padding={4} backgroundColor="neutral-faded">Item 3 with larger gap</View>
  </View.Item>
</View>

​
Auto Margin

<View direction="row" gap={4}>
  <View padding={4} backgroundColor="neutral-faded">Left</View>
  <View.Item gapBefore="auto">
    <View padding={4} backgroundColor="neutral-faded">Pushed to right</View>
  </View.Item>
</View>

​
Props

​
View Props

​
children
React.ReactNode
Node for inserting the content
​
as
keyof React.JSX.IntrinsicElements
Render as a different element
​
direction
Responsive<'row' | 'column' | 'row-reverse' | 'column-reverse'>
Flex direction for the content
​
gap
Responsive<number>
Gap between children, base unit token number multiplier
​
wrap
Responsive<boolean>
Flex wrap for the content
​
align
Responsive<'start' | 'center' | 'end' | 'stretch' | 'baseline'>
Flex align-items for the content
​
justify
Responsive<'start' | 'center' | 'end' | 'space-between' | 'space-around'>
Flex justify-content for the content
​
divided
boolean
Render a divider between each child
​
height
Responsive<string | number>
Height style, literal string value or a base unit token number multiplier
​
width
Responsive<string | number>
Width style, literal string value or a base unit token number multiplier
​
aspectRatio
Responsive<number>
Aspect ratio style, represented as width / height
​
maxHeight
Responsive<string | number>
Maximum height style, literal string value or a base unit token number multiplier
​
maxWidth
Responsive<string | number>
Maximum width style, literal string value or a base unit token number multiplier
​
minHeight
Responsive<string | number>
Minimum height style, literal string value or a base unit token number multiplier
​
minWidth
Responsive<string | number>
Minimum width style, literal string value or a base unit token number multiplier
​
padding
Responsive<number>
Padding style for all sides, base unit token number multiplier
​
paddingTop
Responsive<number>
Padding top, base unit token number multiplier
​
paddingBottom
Responsive<number>
Padding bottom, base unit token number multiplier
​
paddingStart
Responsive<number>
Padding inline start, base unit token number multiplier
​
paddingEnd
Responsive<number>
Padding inline end, base unit token number multiplier
​
paddingInline
Responsive<number>
Padding inline, base unit token number multiplier
​
paddingBlock
Responsive<number>
Padding block, base unit token number multiplier
​
bleed
Responsive<number>
Apply negative margin and remove side borders, base unit token number multiplier
​
textAlign
Responsive<'start' | 'center' | 'end'>
Text align for the content
​
backgroundColor
'neutral' | 'neutral-faded' | 'critical' | 'critical-faded' | 'positive' | 'warning' | 'warning-faded' | 'positive-faded' | 'primary' | 'primary-faded' | 'elevation-base' | 'elevation-raised' | 'elevation-overlay' | 'page' | 'page-faded' | 'disabled' | 'disabled-faded' | 'brand' | 'white' | 'black'
Background color, based on the color tokens
​
borderColor
Responsive<'neutral' | 'neutral-faded' | 'primary' | 'primary-faded' | 'critical' | 'critical-faded' | 'warning' | 'warning-faded' | 'positive' | 'positive-faded' | 'transparent'>
Border color, based on the color tokens
​
border
Responsive<boolean>
Add border to all sides
​
borderTop
Responsive<boolean>
Add border to the top side
​
borderBottom
Responsive<boolean>
Add border to the bottom side
​
borderStart
Responsive<boolean>
Add border to the inline start side
​
borderEnd
Responsive<boolean>
Add border to the inline end side
​
borderInline
Responsive<boolean>
Add border to the inline direction
​
borderBlock
Responsive<boolean>
Add border to the block direction
​
borderRadius
Responsive<'small' | 'medium' | 'large' | 'circular'>
Border radius, based on the radius tokens
​
position
Responsive<'relative' | 'absolute' | 'fixed' | 'sticky'>
Position style
​
inset
Responsive<number | 'auto'>
Inset style, base unit token number multiplier when used as a number
​
insetStart
Responsive<number | 'auto'>
Inset start, base unit token number multiplier when used as a number
​
insetEnd
Responsive<number | 'auto'>
Inset end, base unit token number multiplier when used as a number
​
insetTop
Responsive<number | 'auto'>
Inset top, base unit token number multiplier when used as a number
​
insetBottom
Responsive<number | 'auto'>
Inset bottom, base unit token number multiplier when used as a number
​
zIndex
number
z-index style
​
shadow
'raised' | 'overlay'
Shadow style, based on the shadow tokens
​
overflow
'hidden' | 'auto'
Overflow style
​
animated
boolean
Add transition for the properties
​
grow
Responsive<boolean>
Apply flex-grow (can also be used on View when using it as a View.Item)
​
shrink
boolean
Apply flex-shrink
​
className
string
Additional classname for the root element
​
attributes
React.HTMLAttributes
Additional attributes for the root element

​
View.Item Props

​
children
React.ReactNode
Node for inserting the item content
​
as
keyof React.JSX.IntrinsicElements
Render as a different element
​
columns
Responsive<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto'>
Number of columns the item should span in the parent, View uses 12 columns
​
order
Responsive<number>
Flex order of the item inside the parent
​
grow
Responsive<boolean>
Apply flex-grow, using it on View.Item applies additional styles on the parent View
​
shrink
boolean
Apply flex-shrink
​
gapBefore
Responsive<number> | 'auto'
Individual gap before the item, overrides the parent View gap. Use ‘auto’ for auto margin
​
className
string
Additional classname for the root element
​
attributes
React.HTMLAttributes
Additional attributes for the root element
View automatically becomes a flexbox container when using layout properties like direction, align, justify, or gap.
The columns prop uses a 12-column grid system. For example, columns={6} spans half the width.
Responsive props accept an object with viewport keys: { s: value, m: value, l: value }

Build docs developers (and LLMs) love

Get started for freeTalk to us