or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

data-display-components.mddisclosure-components.mdfeedback-components.mdform-components.mdhooks.mdindex.mdlayout-components.mdnavigation-components.mdoverlay-components.mdspecialized-components.mdstyling-system.mdtheme-system.mdtypes.mdtypography-components.md
tile.json

layout-components.mddocs/

Layout Components

Layout components provide the building blocks for structuring and organizing content in Chakra UI applications. These components handle spacing, positioning, and responsive layout patterns.

Capabilities

Box Component

The most fundamental building block component that renders a div by default and accepts all Chakra style props.

import { Box } from "@chakra-ui/react";

interface BoxProps extends HTMLChakraProps<"div"> {}

const Box: ChakraComponent<"div">;

Usage:

<Box p="4" bg="blue.500" color="white">
  Content
</Box>

Flex Component

Flexbox container component with display: flex applied by default.

import { Flex } from "@chakra-ui/react";

interface FlexProps extends HTMLChakraProps<"div"> {}

const Flex: ChakraComponent<"div">;

Usage:

<Flex align="center" justify="space-between" gap="4">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
</Flex>

Grid Component

CSS Grid layout container with optional GridItem children for precise grid control.

import { Grid, GridItem } from "@chakra-ui/react";

interface GridProps extends HTMLChakraProps<"div"> {}

const Grid: ChakraComponent<"div">;

interface GridItemProps extends HTMLChakraProps<"div"> {
  colSpan?: ConditionalValue<number>;
  rowSpan?: ConditionalValue<number>;
  colStart?: ConditionalValue<number>;
  colEnd?: ConditionalValue<number>;
  rowStart?: ConditionalValue<number>;
  rowEnd?: ConditionalValue<number>;
}

const GridItem: ChakraComponent<"div", GridItemProps>;

Usage:

<Grid templateColumns="repeat(3, 1fr)" gap="6">
  <GridItem colSpan={2}>Wider item</GridItem>
  <GridItem>Regular item</GridItem>
</Grid>

SimpleGrid Component

Responsive grid with equal-width columns that automatically adjusts based on minChildWidth or columns prop.

import { SimpleGrid } from "@chakra-ui/react";

interface SimpleGridProps extends HTMLChakraProps<"div"> {
  columns?: ConditionalValue<number>;
  minChildWidth?: ConditionalValue<string | number>;
  spacingX?: ConditionalValue<string | number>;
  spacingY?: ConditionalValue<string | number>;
}

const SimpleGrid: ChakraComponent<"div", SimpleGridProps>;

Usage:

<SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} gap="6">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</SimpleGrid>

Stack Components

Stacks elements vertically or horizontally with consistent spacing.

import { Stack, HStack, VStack, StackSeparator } from "@chakra-ui/react";

interface StackProps extends HTMLChakraProps<"div"> {
  direction?: ConditionalValue<"row" | "column">;
  wrap?: ConditionalValue<"wrap" | "nowrap" | "wrap-reverse">;
  align?: ConditionalValue<string>;
  justify?: ConditionalValue<string>;
  separator?: React.ReactElement;
}

const Stack: ChakraComponent<"div", StackProps>;
const HStack: ChakraComponent<"div", StackProps>;
const VStack: ChakraComponent<"div", StackProps>;

interface StackSeparatorProps extends HTMLChakraProps<"div"> {}

const StackSeparator: ChakraComponent<"div", StackSeparatorProps>;

Usage:

<VStack gap="4" separator={<StackSeparator />}>
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</VStack>

Container Component

Constrains content width with responsive max-width values and horizontal padding.

import { Container, ContainerPropsProvider } from "@chakra-ui/react";

interface ContainerProps extends HTMLChakraProps<"div"> {
  centerContent?: boolean;
}

const Container: ChakraComponent<"div", ContainerProps>;
const ContainerPropsProvider: React.FC<{ value: ContainerProps; children: React.ReactNode }>;

Usage:

<Container maxW="container.lg" centerContent>
  <Box>Centered, constrained content</Box>
</Container>

Center Component

Centers children using flexbox alignment.

import { Center } from "@chakra-ui/react";

interface CenterProps extends HTMLChakraProps<"div"> {
  inline?: boolean;
}

const Center: ChakraComponent<"div", CenterProps>;

Usage:

<Center h="200px" bg="gray.100">
  <Box>Centered content</Box>
</Center>

AbsoluteCenter Component

Centers element absolutely within a relative parent.

import { AbsoluteCenter } from "@chakra-ui/react";

interface AbsoluteCenterProps extends HTMLChakraProps<"div"> {
  axis?: "horizontal" | "vertical" | "both";
}

const AbsoluteCenter: ChakraComponent<"div", AbsoluteCenterProps>;

Usage:

<Box position="relative" h="200px">
  <AbsoluteCenter>Absolutely centered</AbsoluteCenter>
</Box>

Circle and Square Components

Circular and square containers with centered content.

import { Circle, Square } from "@chakra-ui/react";

interface CircleProps extends HTMLChakraProps<"div"> {
  size?: ConditionalValue<string | number>;
}

const Circle: ChakraComponent<"div", CircleProps>;

interface SquareProps extends HTMLChakraProps<"div"> {
  size?: ConditionalValue<string | number>;
}

const Square: ChakraComponent<"div", SquareProps>;

Usage:

<Circle size="40px" bg="blue.500" color="white">
  Icon
</Circle>

AspectRatio Component

Maintains aspect ratio for embedded content like videos or images.

import { AspectRatio } from "@chakra-ui/react";

interface AspectRatioProps extends HTMLChakraProps<"div"> {
  ratio?: number;
}

const AspectRatio: ChakraComponent<"div", AspectRatioProps>;

Usage:

<AspectRatio ratio={16 / 9}>
  <iframe src="..." />
</AspectRatio>

Wrap Component

Wraps children with spacing, similar to flexbox with wrap enabled.

import { Wrap, WrapItem } from "@chakra-ui/react";

interface WrapProps extends HTMLChakraProps<"div"> {
  align?: ConditionalValue<string>;
  justify?: ConditionalValue<string>;
}

const Wrap: ChakraComponent<"div", WrapProps>;

interface WrapItemProps extends HTMLChakraProps<"div"> {}

const WrapItem: ChakraComponent<"div", WrapItemProps>;

Usage:

<Wrap gap="4">
  <WrapItem><Box>Item 1</Box></WrapItem>
  <WrapItem><Box>Item 2</Box></WrapItem>
  <WrapItem><Box>Item 3</Box></WrapItem>
</Wrap>

Spacer Component

Flexible space component that fills available space in flex/grid layouts.

import { Spacer } from "@chakra-ui/react";

interface SpacerProps extends HTMLChakraProps<"div"> {}

const Spacer: ChakraComponent<"div", SpacerProps>;

Usage:

<Flex>
  <Box>Left</Box>
  <Spacer />
  <Box>Right</Box>
</Flex>

Float Component

Floating positioned element relative to its container.

import { Float } from "@chakra-ui/react";

interface FloatProps extends HTMLChakraProps<"div"> {
  placement?: ConditionalValue<
    | "top-start"
    | "top"
    | "top-end"
    | "bottom-start"
    | "bottom"
    | "bottom-end"
    | "middle-start"
    | "middle-center"
    | "middle-end"
  >;
  offset?: ConditionalValue<string | number>;
  offsetX?: ConditionalValue<string | number>;
  offsetY?: ConditionalValue<string | number>;
}

const Float: ChakraComponent<"div", FloatProps>;

Usage:

<Box position="relative">
  <Image src="..." />
  <Float placement="top-end" offset="4">
    <Badge>New</Badge>
  </Float>
</Box>

Sticky Component

Sticky positioned element that sticks to viewport during scrolling.

import { Sticky } from "@chakra-ui/react";

interface StickyProps extends HTMLChakraProps<"div"> {
  top?: ConditionalValue<string | number>;
  bottom?: ConditionalValue<string | number>;
}

const Sticky: ChakraComponent<"div", StickyProps>;

Usage:

<Sticky top="0" zIndex="sticky">
  <Box bg="white" shadow="sm">Sticky header</Box>
</Sticky>

Bleed Component

Extends content beyond its container margins, useful for full-width sections within constrained containers.

import { Bleed } from "@chakra-ui/react";

interface BleedProps extends HTMLChakraProps<"div"> {
  inline?: ConditionalValue<string | number>;
  block?: ConditionalValue<string | number>;
}

const Bleed: ChakraComponent<"div", BleedProps>;

Usage:

<Container>
  <Bleed inline="4">
    <Box bg="blue.500">Full-width content</Box>
  </Bleed>
</Container>

Group Component

Groups related elements for styling purposes, particularly for group-hover and group-focus states.

import { Group } from "@chakra-ui/react";

interface GroupProps extends HTMLChakraProps<"div"> {}

const Group: ChakraComponent<"div", GroupProps>;

Usage:

<Group>
  <Box>Hover over this group</Box>
  <Box _groupHover={{ color: "blue.500" }}>This changes on group hover</Box>
</Group>

Types

import type {
  HTMLChakraProps,
  ChakraComponent,
  ConditionalValue,
} from "@chakra-ui/react";

// HTMLChakraProps extends HTML element props with Chakra style props
type HTMLChakraProps<T extends keyof JSX.IntrinsicElements> =
  JSX.IntrinsicElements[T] & SystemStyleObject;

// ChakraComponent is a styled component with Chakra capabilities
type ChakraComponent<T extends keyof JSX.IntrinsicElements, P = {}> =
  React.ForwardRefExoticComponent<HTMLChakraProps<T> & P>;

// ConditionalValue allows responsive values
type ConditionalValue<T> = T | T[] | Record<string, T>;