Chakra UI: Layout, Overlays & Feedback Components

Layout: Stack, Flex & Grid

import { HStack, VStack, Grid, GridItem } from '@chakra-ui/react';

// One-dimensional flexbox layout -- most common layout pattern
<HStack spacing={4}>
  <Button>A</Button>
  <Button>B</Button>
</HStack>

<VStack spacing={2} align="stretch">
  <Text>First</Text>
  <Text>Second</Text>
</VStack>

// Two-dimensional CSS Grid -- rows AND columns simultaneously
<Grid templateColumns="repeat(3, 1fr)" gap={4}>
  <GridItem colSpan={2}>Main</GridItem>
  <GridItem>Sidebar</GridItem>
</Grid>

Overlays: useDisclosure + Modal

import { useDisclosure, Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalCloseButton, Button } from '@chakra-ui/react';

function DeleteConfirmation() {
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <>
      <Button onClick={onOpen} colorScheme="red">Delete</Button>
      <Modal isOpen={isOpen} onClose={onClose}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>Confirm delete</ModalHeader>
          <ModalCloseButton />
          <ModalBody>Are you sure?</ModalBody>
        </ModalContent>
      </Modal>
    </>
  );
}
// Accessibility (focus trapping, ARIA roles, keyboard nav) is
// handled by default -- no need to reimplement per component.

Transient Feedback: useToast

import { useToast } from '@chakra-ui/react';

function SaveButton() {
  const toast = useToast();

  const handleSave = async () => {
    await saveData();
    toast({
      title: 'Saved successfully',
      status: 'success',
      duration: 3000,
      isClosable: true,
    });
  };

  return <Button onClick={handleSave}>Save</Button>;
}

Why the Consistent Style-Prop API Matters

• Nearly every component accepts the same core style props (p, m, bg, color, fontSize) -- learning it once transfers everywhere.

• Powered by Emotion (v2) / Panda CSS (v3) under the hood -- style props resolve against the active theme's design tokens.

• Trade-off vs. Tailwind + headless primitives: Chakra's pre-styled components speed up typical development; utility-CSS + headless gives more granular control at the cost of assembling more visual design yourself.