Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsEnterpriseBlogShowcase
Sponsor

Layer Styles

Learn how to use layer styles to define visual properties.

Overview

Layer styles allows you to define visual properties. The common properties are:

  • Color or text color
  • Background color
  • Border width and border color
  • Box shadow
  • Opacity

Defining layer styles

Layer styles are defined using the defineLayerStyles function.

layer-styles.ts

import { defineLayerStyles } from "@chakra-ui/react"

const layerStyles = defineLayerStyles({
  container: {
    description: "container styles",
    value: {
      bg: "gray.50",
      border: "2px solid",
      borderColor: "gray.500",
    },
  },
})

Built-in layer styles

Chakra UI provides a set of built-in layer styles.

layerStyle: fill.*

fill.muted
fill.subtle
fill.surface
fill.solid

layerStyle: outline.*

outline.subtle
outline.solid

layerStyle: indicator.*

indicator.top
indicator.bottom
indicator.start
indicator.end

Updating the theme

To use the layer styles, update the theme object with the layerStyles property.

theme.ts

import { createSystem, defineConfig } from "@chakra-ui/react"
import { layerStyles } from "./layer-styles"

const config = defineConfig({
  theme: {
    layerStyles,
  },
})

export default createSystem(defaultConfig, config)

After updating the theme, run this command to generate the typings.

npx @chakra-ui/cli typegen

Using layer styles

Now you can use layerStyle property in your components.

<Box layerStyle="container">This is inside a container style</Box>

Previous

Text Styles

Next

Animation Styles