View

The base layout primitive. Renders as <div>. All styled-system prop groups are supported: space, layout, color, typography, flexbox, border, and position.

Flex, Grid, and Paper all extend View.

Examples

Default

View content

<View>View content</View>

With Spacing And Background

Padded container with background

<View
  bg="secondary"
  p={3}
  borderRadius="md"
>
  Padded container with background
</View>

Positioned

Absolute child

const args: Partial<ViewProps> = {
  bg: 'secondary',
  height: '150px',
  borderRadius: 'sm',
  position: 'relative',
  children: 'View content',
}

<View {...args}>
  <View position="absolute" top="20px" left="20px" p={2} bg="primary" borderRadius="sm">
    Absolute child
  </View>
</View>

View API reference