---
id: container
scope: theming
---

The `Container` component is a single part component. All of the styling is
applied directly to the `div` element.

> To learn more about styling single part components, visit the
> [Component Style](/docs/styled-system/component-style#styling-single-part-components)
> page.

## Theming properties

The properties that affect the theming of the `Container` component are:

- `variant`: The visual variant of the component. Variants for this component
  are not implemented in the default theme.
- `colorScheme`: The color scheme of the component. Color schemes for this
  component are not implemented in the default theme.
- `size`: The size of the component. Sizes for this component are not
  implemented in the default theme.

## Theming utilities

- `defineStyle`: a function used to create style objects.
- `defineStyleConfig`: a function used to define the style configuration for a
  single part component.

```jsx live=false
import { defineStyle, defineStyleConfig } from '@chakra-ui/react'
```

## Customizing the default theme

```jsx live=false
import { defineStyle, defineStyleConfig } from '@chakra-ui/react'

// define the base component styles
const baseStyle = {
  borderRadius: 'xl', // add a border radius
  fontWeight: 'medium', // change the font weight
}

// export the component theme
export const containerTheme = defineStyleConfig({ baseStyle })
```

After customizing the default theme, we can import it in our theme file and add
it in the `components` property.

```jsx live=false
import { extendTheme } from '@chakra-ui/react'
import { containerTheme } from './components/Container'

const theme = extendTheme({
  components: {
    Container: containerTheme,
  },
})

export default theme
```

> This is a crucial step to make sure that any changes that we make to the
> container theme are applied.

## Adding a custom size

Let's assume we want to create a small, medium, and large size. For
demonstration, we will use a couple of different methods to define the max
width. Here's how we can do that:

```jsx live=false
import { defineStyle, defineStyleConfig } from '@chakra-ui/react'

// define custom sizes
const sizes = {
  sm: defineStyle({
    maxW: '45ch',
    p: '4',
  }),
  md: defineStyle({
    maxW: 'container.sm',
    p: '6',
    fontSize: 'lg',
  }),
  lg: defineStyle({
    maxW: '75ch',
    p: '8',
    fontSize: 'xl',
  }),
}

// export the component theme
export const containerTheme = defineStyleConfig({ sizes })
```

Every time you're adding anything new to the theme, you need to run the CLI
command to get proper autocomplete in your IDE. You can learn more about the CLI
tool [here](/docs/styled-system/cli).

## Adding a custom variant

Let's assume we want to include a couple of variants: one that can use a color
scheme and a bold one that is black and white. Here's how we can do that:

```jsx live=false
import { defineStyle, defineStyleConfig } from '@chakra-ui/react'

// define styles for custom variant
const colorfulVariant = defineStyle((props) => {
  const { colorScheme: c } = props // add color scheme as a prop
  return {
    _light: {
      bg: `${c}.200`,
      color: `${c}.800`,
    },
    _dark: {
      bg: `${c}.700`,
      color: `${c}.200`,
    },
  }
})

const boldVariant = defineStyle((props) => {
  return {
    borderRadius: 'none',
    border: '2px solid',
    fontFamily: 'mono',
    _light: {
      bg: 'white',
      color: `black`,
    },
    _dark: {
      bg: 'black',
      color: 'white',
    },
  }
})

// define custom variants
const variants = {
  colorful: colorfulVariant,
  bold: boldVariant,
}

// export the component theme
export const containerTheme = defineStyleConfig({ variants })
```

## Using a custom color scheme

Let's assume we want to use our own custom color scale based on our brand.
First, we need to define the color scale in the main theme file:

```jsx live=false

import { extendTheme } from '@chakra-ui/react';
import { containerTheme } from './components/Container';

const theme = extendTheme({
  // add a custom color scheme
  colors: {
    brand: {
      50: '#dafff3',
      ...
      500: '#13e4b1',
      ...
      900: '#001b0e',
    },
  },

});

export default theme;

```

Then, we can use the custom color scale as the color scheme for the container:

```jsx live=false
<Container colorScheme='brand'>...</Container>
```

## Changing the default properties

Let's assume we want to add a default size, variant, and color scheme of every
container in our app. Here's how we can do that:

```jsx live=false
import { defineStyle, defineStyleConfig } from '@chakra-ui/react'

// define which sizes, variants, and color schemes are applied by default
const defaultProps = {
  size: 'md',
  variant: 'colorful',
  colorScheme: 'brand',
}

// export the component theme
export const containerTheme = defineStyleConfig({ defaultProps })
```

## Showcase

import {
  App,
  Index,
  Theme,
  Container,
  ColorModeSwitcher,
} from 'configs/sandpack-contents/component-theming/container'

<SandpackEmbed
  files={{
    '/theme/components/Container.tsx': Container,
    '/theme/index.tsx': Theme,
    '/App.tsx': App,
    '/index.tsx': {
      code: Index,
      hidden: true,
    },
    '/ColorModeSwitcher.tsx': {
      code: ColorModeSwitcher,
      hidden: true,
    },
  }}
  dependencies={{
    'react-icons': '^4.4.0',
  }}
/>