Layer Styles

Learn how to define and reuse layer styles for shared design patterns

Overview

Layer styles allow you to define reusable combinations of visual properties like background colors, padding, borders, and shadows, and apply them to components using the layerStyle prop.

Key Takeaways

Instead of manually repeating styles across multiple components, you can define layer styles once in your theme and reuse them everywhere, ensuring design consistency and faster development.

Identify repetitive style patterns

Styles like bg, borderRadius, boxShadow, border and borderColor are repeated on different components.

<Box bg="white" p={6} borderRadius="lg" boxShadow="md" border="1px solid" borderColor="gray.200">
  <Text>Card content</Text>
</Box>

<Box bg="white" p={6} borderRadius="lg" boxShadow="md" border="1px solid" borderColor="gray.200">
  <Text>Another card</Text>
</Box>

Define reusable layer styles using `defineLayerStyles`

export const layerStyles = defineLayerStyles({
  card: {
    description: 'Base card style with semantic tokens',
    value: {
      background: 'gray.50',
      padding: 6,
      borderRadius: 'lg',
      boxShadow: 'md',
      border: '1px solid',
      borderColor: 'gray.200',
    },
  },
  cardElevated: {
    description: 'Elevated card for important content',
    value: {
      background: 'white',
      padding: 8,
      borderRadius: 'xl',
      boxShadow: 'xl',
      border: '1px solid',
      borderColor: 'gray.100',
    },
  },
})

Integrate them into your theme with full TypeScript support

import { layerStyles } from './layer-styles'

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

Apply them to any Chakra component using the `layerStyle` prop

<Box layerStyle="card">
  <Text>Card content</Text>
</Box>

<Box layerStyle="cardElevated">
  <Text>Another card</Text>
</Box>

Locked Video