Composing Custom Components

Chakra UI encourages building reusable components by composing its primitive building blocks. By extending primitives such as Box, custom components can encapsulate both layout and styling while remaining fully compatible with Chakra UI's design system.

Custom components help reduce repetition and enforce visual consistency across an application. Because they are built on Chakra UI primitives, they continue to support responsive props, theme tokens, and interaction styling out of the box.

This approach makes it easier to maintain and scale complex interfaces by centralizing shared UI patterns into reusable components.

Step 1: Create the Reusable Component

// src/components/Card.jsx
import { Box } from "@chakra-ui/react"

export function Card({ children, ...props }) {
  return (
    <Box
      bg="white"
      borderWidth="1px"
      borderRadius="xl"
      p="6"
      boxShadow="sm"
      {...props}
    >
      {children}
    </Box>
  )
}

Step 2: Use It in the Landing Page

Before (inline styles everywhere):

<Box bg="white" borderWidth="1px" borderRadius="xl" p="6">
  ...
</Box>

After (clean, reusable):

import { Card } from "@/components/Card"

<Card>
  <Stack gap="2">
    <Heading size="sm">Responsive Props</Heading>
    <Text color="gray.700" fontSize="sm">
      Adapt layouts and typography using breakpoint-based values.
    </Text>
  </Stack>
</Card>

import { SimpleGrid, Stack, Heading, Text } from "@chakra-ui/react"
import { Card } from "@/components/Card"

function Features() {
  const items = [
    {
      title: "Responsive Props",
      text: "Adapt layout and spacing across screen sizes.",
    },
    {
      title: "Pseudo Props",
      text: "Style hover, focus, and active states directly.",
    },
    {
      title: "Conditional Styling",
      text: "Reflect UI state without CSS files.",
    },
  ]

  return (
    <SimpleGrid columns={{ base: 1, md: 3 }} gap="6">
      {items.map((item) => (
        <Card key={item.title}>
          <Stack gap="2">
            <Heading size="sm">{item.title}</Heading>
            <Text color="gray.700" fontSize="sm">
              {item.text}
            </Text>
          </Stack>
        </Card>
      ))}
    </SimpleGrid>
  )
}