---
title: View
description: 'View is the core component that renders everything in the library. It is the principle component in the entire library.'
type: layout
slug: /components/view/
keywords: ['view', 'base', 'div', 'box', 'core', 'element', 'ui']
---

# View

`View` is a core component that renders everything in the library. It is the principle component in the entire library.

**Everything** is a `View`, and a `View` is **everything**.

## Table of contents

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

-   [Usage](#usage)
-   [Props](#props)
-   [Styling](#styling)
    -   [Presets](#presets)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

<!-- Automatically Generated. DO NOT EDIT THIS FILE. -->
<!-- Instead, edit packages/website/src/docs/components/core/view.mdx -->

<!-- props -->

<!-- Automatically Generated -->

## Usage

```jsx live
import { Text, View } from '@wp-g2/components';

function Example() {
	return (
		<View>
			<Text>Into The Unknown</Text>
		</View>
	);
}
```

## Props

##### \_\_\_css

**Type**: `InterpolatedCSS`

Render custom CSS using the style system. The `cx` prop combines custom styling with the `css` prop.
Typically used "internally" to establish based styles for a `View`.

##### as

**Type**: `string`,`E`

Render the component as another React Component or HTML Element.

##### css

**Type**: `InterpolatedCSS`

Render custom CSS using the style system.

##### cx

**Type**: `any`

Combines classNames as well as CSS style rules created with the `css` function.

<!-- /Automatically Generated -->
<!-- /props -->

## Styling

### Presets

The Style system provides a bunch of style presets, which come from `@wp-g2/styles`. These presets are namespaced under `ui`.

Presets can style a `View` by passing an `Array` of them into the `css` prop.

```jsx live
import { Text, View } from '@wp-g2/components';
import { ui } from '@wp-g2/styles';

function Example() {
	return (
		<View
			css={[
				ui.padding(5),
				ui.background.blue,
				ui.hover(ui.background.red, ui.scale(1.02)),
				ui.active(ui.background.yellow, ui.scale(0.8)),
				ui.animation.bounce,
			]}
		>
			<Text>Into The Unknown</Text>
		</View>
	);
}
```