Using Basic Components

Chakra UI provides a collection of ready-to-use components that help you build user interfaces quickly and consistently in your React applications. Some of the most commonly used components include Button, Input, and Stack. These components are designed to be flexible, accessible, and easy to customize using style props.

The Button component lets you add clickable buttons with built-in accessibility and styling. You can easily change its color, size, and variant with simple props. For example, to create a primary button, you can use:

<Button colorScheme="blue" size="md">
  Click Me
</Button>

The Input component provides a styled input field for user data entry. It supports various types, sizes, and visual states. Here is how you might use it:

<Input placeholder="Enter your name" size="lg" />

The Stack component is a powerful layout tool that arranges its children in a vertical or horizontal direction with consistent spacing. This makes it easy to build organized layouts without writing custom CSS. For example, to stack a button and input with spacing:

<Stack spacing={4} direction="column">
  <Input placeholder="Email address" />
  <Button colorScheme="teal">Sign Up</Button>
</Stack>

Chakra UI components support style props, which are special properties you can add directly to components to control their appearance. Style props let you set values for spacing, color, typography, borders, and more without leaving your JSX. For instance, you can adjust the margin, padding, background color, or border radius like this:

<Button
  colorScheme="pink"
  size="lg"
  m={2}
  px={6}
  borderRadius="full"
>
  Custom Button
</Button>

Using style props, you can quickly tailor the look and feel of each component to fit your design requirements, all while keeping your code clean and readable.