# Table of Contents

- [Installation | Chakra UI](#installation-chakra-ui)
- [Charts | Chakra UI](#charts-chakra-ui)
- [Styling | Chakra UI](#styling-chakra-ui)
- [Components | Chakra UI](#components-chakra-ui)
- [Migration to v3 | Chakra UI](#migration-to-v3-chakra-ui)
- [Overview | Chakra UI](#overview-chakra-ui)
- [CLI | Chakra UI](#cli-chakra-ui)
- [Contributing to Chakra UI | Chakra UI](#contributing-to-chakra-ui-chakra-ui)
- [Using Chakra UI in Next.js (App) | Chakra UI](#using-chakra-ui-in-next-js-app-chakra-ui)
- [LLMs.txt Documentation | Chakra UI](#llms-txt-documentation-chakra-ui)
- [Using Chakra in Remix | Chakra UI](#using-chakra-in-remix-chakra-ui)
- [Using Chakra UI in Storybook | Chakra UI](#using-chakra-ui-in-storybook-chakra-ui)
- [Using Chakra UI in Next.js (Pages) | Chakra UI](#using-chakra-ui-in-next-js-pages-chakra-ui)
- [Using Chakra UI in Shadow DOM | Chakra UI](#using-chakra-ui-in-shadow-dom-chakra-ui)
- [Using Chakra in Vite | Chakra UI](#using-chakra-in-vite-chakra-ui)
- [useChart | Chakra UI](#usechart-chakra-ui)
- [Using Chakra UI in Iframe | Chakra UI](#using-chakra-ui-in-iframe-chakra-ui)
- [Chakra Factory | Chakra UI](#chakra-factory-chakra-ui)
- [Axis | Chakra UI](#axis-chakra-ui)
- [Responsive Design | Chakra UI](#responsive-design-chakra-ui)
- [CSS Variables | Chakra UI](#css-variables-chakra-ui)
- [Composition | Chakra UI](#composition-chakra-ui)
- [Animation | Chakra UI](#animation-chakra-ui)
- [Cartesian Grid | Chakra UI](#cartesian-grid-chakra-ui)
- [Dark Mode | Chakra UI](#dark-mode-chakra-ui)
- [Color opacity modifier | Chakra UI](#color-opacity-modifier-chakra-ui)
- [Area Chart | Chakra UI](#area-chart-chakra-ui)
- [Conditional Styles | Chakra UI](#conditional-styles-chakra-ui)

---

# Installation | Chakra UI

Build faster with Premium Chakra UI Components 💎

[Learn more](https://pro.chakra-ui.com?utm_source=chakra-ui.com)



Installation
============

How to install and set up Chakra UI in your project

[Framework Guide](#framework-guide)

------------------------------------

Chakra UI works in your favorite framework. We've put together step-by-step guides for these frameworks

[Next.js\
\
Easily add Chakra UI with Next.js app](/docs/get-started/frameworks/next-app)
[Vite\
\
Use Chakra UI in with Vite](/docs/get-started/frameworks/vite)
[Stackblitz\
\
Try Chakra UI in Stackblitz sandbox](https://stackblitz.com/edit/chakra-ui-v3)

The minimum node version required is Node.20.x

[Installation](#installation)

------------------------------

To manually set up Chakra UI in your project, follow the steps below.

1

### [Install `@chakra-ui/react`](#install-chakra-uireact)

    npm i @chakra-ui/react @emotion/react

2

### [Add snippets](#add-snippets)

Snippets are pre-built components that you can use to build your UI faster. Using the `@chakra-ui/cli` you can add snippets to your project.

    npx @chakra-ui/cli snippet add

3

### [Setup provider](#setup-provider)

Wrap your application with the `Provider` component generated in the `components/ui/provider` component at the root of your application.

This provider composes the following:

*   `ChakraProvider` from `@chakra-ui/react` for the styling system
*   `ThemeProvider` from `next-themes` for color mode

    import { Provider } from "@/components/ui/provider"
    
    function App({ Component, pageProps }) {
      return (
        <Provider>
          <Component {...pageProps} />
        </Provider>
      )
    }

4

### [Update tsconfig](#update-tsconfig)

If you're using TypeScript, you need to update the `compilerOptions` in the tsconfig file to include the following options:

    {
      "compilerOptions": {
        "module": "ESNext",
        "moduleResolution": "Bundler",
        "skipLibCheck": true,
        "paths": {
          "@/*": ["./src/*"]
        }
      }
    }

If you're using JavaScript, create a `jsconfig.json` file and add the above code to the file.

5

### [Enjoy!](#enjoy)

With the power of the snippets and the primitive components from Chakra UI, you can build your UI faster.

    import { Button, HStack } from "@chakra-ui/react"
    
    const Demo = () => {
      return (
        <HStack>
          <Button>Click me</Button>
          <Button>Click me</Button>
        </HStack>
      )
    }

[Learn](#learn)

----------------

Watch our official courses and dive into dozens of videos that will teach you everything you need to know about Chakra UI, from basics to advanced concepts.

[Contribute](#contribute)

--------------------------

Whether you're a beginner or advanced Chakra UI user, joining our community is the best way to connect with like-minded people who build great products with the library.

[Next\
\
Migration](/docs/get-started/migration)

---

# Charts | Chakra UI

Build faster with Premium Chakra UI Components 💎

[Learn more](https://pro.chakra-ui.com?utm_source=chakra-ui.com)



Charts
======

Creating beautiful charts with recharts and Chakra UI

Charts are designed to look great out of the box, seamlessly integrating with other Chakra UI's theming system. The charts are built on top of [recharts](https://recharts.org)

[Installation](#installation)

------------------------------

Run the following command to install the charts and its peer dependencies.

    npm i @chakra-ui/charts recharts

[Usage](#usage)

----------------

1

### [Import the charts component](#import-the-charts-component)

In most cases, you need to import the `Chart` and `useChart` hook from the `@chakra-ui/charts` package, then combine them with the components `recharts`

    import { Chart, useChart } from "@chakra-ui/charts"
    import { Bar, BarChart, XAxis, YAxis } from "recharts"

2

### [Define chart data](#define-chart-data)

Pass the chart data to the `useChart` hook to create a chart instance.

Learn more about the [`useChart`](/docs/charts/use-chart)
 hook.

    const chart = useChart({
      data: [\
        { month: "January", value: 100 },\
        { month: "February", value: 200 },\
      ],
    })

3

### [Render the chart](#render-the-chart)

Depending on the chart type you need from the `recharts` library, wrap the chart component within the `Chart.Root` component.

    <Chart.Root chart={chart}>
      <BarChart data={chart.data}>
        {chart.series.map((item) => (
          <Bar
            key={item.name}
            dataKey={chart.key(item.name)}
            fill={chart.color(item.color)}
          />
        ))}
      </BarChart>
    </Chart.Root>

[Customization](#customization)

--------------------------------

The charts component is built on top of [Recharts](https://recharts.org)
, so you can use all the customization options that Recharts provides.

### [Colors](#colors)

The `useChart` hook provides a `color` function that you can use to query semantic colors for the chart component from `recharts`.

    <CartesianGrid stroke={chart.color("border.muted")} />

### [Formatters](#formatters)

The `useChart` hook provides a `formatDate` and `formatNumber` function that you can use to format the date and number respectively. This is useful for formatting the x, y axis labels and tooltips.

    // format the x-axis labels
    <XAxis tickFormatter={chart.formatDate({ month: "short", day: "2-digit" })} />
    
    // format the y-axis labels
    <YAxis tickFormatter={chart.formatNumber({ maximumFractionDigits: 1 })} />

[Previous\
\
Visually Hidden](/docs/components/visually-hidden)
[Next\
\
useChart](/docs/charts/use-chart)

---

# Styling | Chakra UI

Build faster with Premium Chakra UI Components 💎

[Learn more](https://pro.chakra-ui.com?utm_source=chakra-ui.com)



Styling
=======

All components are designed to be styled using props.

[Concepts](#concepts)

----------------------

After installing Chakra UI, follow these guidelines to learn the key concepts:

*   [Chakra Factory](/docs/styling/chakra-factory)
    
*   [Responsive Design](/docs/styling/responsive-design)
    
*   [CSS Variables](/docs/styling/css-variables)
    
*   [Dark Mode](/docs/styling/dark-mode)
    
*   [Color Opacity Modifier](/docs/styling/color-opacity-modifier)
    
*   [Conditional Styles](/docs/styling/conditional-styles)
    
*   [Virtual Color](/docs/styling/virtual-color)
    

[Compositions](#compositions)

------------------------------

After understanding the concepts, learn how to use these compositions to avoid repeating styles:

*   [Text Styles](/docs/styling/text-styles)
    
*   [Layer Styles](/docs/styling/layer-styles)
    
*   [Animation Styles](/docs/styling/animation-styles)
    
*   [Focus Ring](/docs/styling/focus-ring)
    

[Style Props](#style-props)

----------------------------

Style props are the most fundamental way to style your components in Chakra UI. They are basically css styles as props. [Learn more about style props](/docs/styling/style-props/background)

[Previous\
\
Sparkline](/docs/charts/sparkline)
[Next\
\
Chakra Factory](/docs/styling/chakra-factory)

---

# Components | Chakra UI

Build faster with Premium Chakra UI Components 💎

[Learn more](https://pro.chakra-ui.com?utm_source=chakra-ui.com)



Components
==========

Accessible, modern and easy to style UI components.

Here's a list of all the components available in the library.

[Accordion\
\
Used to show and hide sections of related content on a page](/docs/components/accordion)
[Action Bar\
\
Used to display a bottom action bar with a set of actions](/docs/components/action-bar)
[Alert\
\
Used to communicate a state that affects a system, feature or page.](/docs/components/alert)
[Aspect Ratio\
\
Used to embed responsive videos and maps, etc](/docs/components/aspect-ratio)
[Avatar\
\
Used to represent user profile picture or initials](/docs/components/avatar)
[Badge\
\
Used to highlight an item's status for quick recognition.](/docs/components/badge)
[Bleed\
\
Used to break an element from the boundaries of its container](/docs/components/bleed)
[Blockquote\
\
Used to quote text content from an external source](/docs/components/blockquote)
[Box\
\
The most abstract styling component in Chakra UI on top of which all other Chakra UI components are built.](/docs/components/box)
[Breadcrumb\
\
Used to display a page's location within a site's hierarchical structure](/docs/components/breadcrumb)
[Button\
\
Used to trigger an action or event](/docs/components/button)
[Card\
\
Used to display content related to a single subject.](/docs/components/card)
[Center\
\
Used to center its child within itself.](/docs/components/center)
[Checkbox Card\
\
Used to select or deselect options displayed within cards.](/docs/components/checkbox-card)
[Checkbox\
\
Used in forms when a user needs to select multiple values from several options](/docs/components/checkbox)
[Client Only\
\
Used to render content only on the client side.](/docs/components/client-only)
[Clipboard\
\
Used to copy text to the clipboard](/docs/components/clipboard)
[Close Button\
\
Used to trigger close functionality](/docs/components/close-button)
[Code\
\
Used to display inline code](/docs/components/code)
[Collapsible\
\
Used to expand and collapse additional content.](/docs/components/collapsible)
[Color Picker\
\
Used to select colors from a color area or a set of defined swatches](/docs/components/color-picker)
[Color Swatch\
\
Used to preview a color](/docs/components/color-swatch)
[Container\
\
Used to constrain a content's width to the current breakpoint, while keeping it fluid.](/docs/components/container)
[DataList\
\
Used to display a list of similar data items.](/docs/components/data-list)
[Dialog\
\
Used to display a dialog prompt](/docs/components/dialog)
[Drawer\
\
Used to render a content that slides in from the side of the screen.](/docs/components/drawer)
[Editable\
\
Used for inline renaming of some text.](/docs/components/editable)
[Em\
\
Used to mark text for emphasis.](/docs/components/em)
[Empty State\
\
Used to indicate when a resource is empty or unavailable.](/docs/components/empty-state)
[Environment Provider\
\
Used to render components in iframes, Shadow DOM, or Electron.](/docs/components/environment-provider)
[Field\
\
Used to add labels, help text, and error messages to form fields.](/docs/components/field)
[Fieldset\
\
A set of form controls optionally grouped under a common name.](/docs/components/fieldset)
[File Upload\
\
Used to select and upload files from their device.](/docs/components/file-upload)
[Flex\
\
Used to manage flex layouts](/docs/components/flex)
[Float\
\
Used to anchor an element to the edge of a container.](/docs/components/float)
[For\
\
Used to loop over an array and render a component for each item.](/docs/components/for)
[Format Byte\
\
Used to format bytes to a human-readable format](/docs/components/format-byte)
[Format Number\
\
Used to format numbers to a specific locale and options](/docs/components/format-number)
[Grid\
\
Used to manage grid layouts](/docs/components/grid)
[Group\
\
Used to group and attach elements together](/docs/components/group)
[Heading\
\
Used to render semantic HTML heading elements.](/docs/components/heading)
[Highlight\
\
Used to highlight substrings of a text.](/docs/components/highlight)
[Hover Card\
\
Used to display content when hovering over an element](/docs/components/hover-card)
[Icon Button\
\
Used to render an icon within a button](/docs/components/icon-button)
[Icon\
\
Used to display an svg icon](/docs/components/icon)
[Image\
\
Used to display images](/docs/components/image)
[Input\
\
Used to get user input in a text field.](/docs/components/input)
[Kbd\
\
Used to show key combinations for an action](/docs/components/kbd)
[Link Overlay\
\
Used to stretch a link over a container.](/docs/components/link-overlay)
[Link\
\
Used to provide accessible navigation](/docs/components/link)
[List\
\
Used to display a list of items](/docs/components/list)
[Locale Provider\
\
Used for globally setting the locale](/docs/components/locale-provider)
[Mark\
\
Used to mark text for emphasis.](/docs/components/mark)
[Menu\
\
Used to create an accessible dropdown menu](/docs/components/menu)
[Select (Native)\
\
Used to pick a value from predefined options.](/docs/components/native-select)
[Number Input\
\
Used to enter a number, and increment or decrement the value using stepper buttons.](/docs/components/number-input)
[Pagination\
\
Used to navigate through a series of pages.](/docs/components/pagination)
[Password Input\
\
Used to collect passwords.](/docs/components/password-input)
[Pin Input\
\
Used to capture a pin code or otp from the user](/docs/components/pin-input)
[Popover\
\
Used to show detailed information inside a pop-up](/docs/components/popover)
[Portal\
\
Used to render an element outside the DOM hierarchy.](/docs/components/portal)
[Presence\
\
Used to animate the entry and exit of an element while controlled the render behavior](/docs/components/presence)
[Progress Circle\
\
Used to display a task's progress in a circular form.](/docs/components/progress-circle)
[Progress\
\
Used to display the progress status for a task.](/docs/components/progress)
[Prose\
\
Used to style remote HTML content](/docs/components/prose)
[QR Code\
\
A component that generates a QR code based on the provided data.](/docs/components/qr-code)
[Radio Card\
\
Used to select an option from list](/docs/components/radio-card)
[Radio\
\
Used to select one option from several options](/docs/components/radio)
[Rating\
\
Used to show reviews and ratings in a visual format.](/docs/components/rating)
[Segmented Control\
\
Used to pick one choice from a linear set of options](/docs/components/segmented-control)
[Select\
\
Used to pick a value from predefined options.](/docs/components/select)
[Separator\
\
Used to visually separate content](/docs/components/separator)
[Show\
\
Used to conditional render part of the view based on a condition.](/docs/components/show)
[SimpleGrid\
\
SimpleGrid provides a friendly interface to create responsive grid layouts with ease.](/docs/components/simple-grid)
[Skeleton\
\
Used to render a placeholder while the content is loading.](/docs/components/skeleton)
[Slider\
\
Used to allow users to make selections from a range of values.](/docs/components/slider)
[Spinner\
\
Used to provide a visual cue that an action is processing](/docs/components/spinner)
[Stack\
\
Used to layout its children in a vertical or horizontal stack.](/docs/components/stack)
[Stat\
\
Used to display a statistic with a title and value.](/docs/components/stat)
[Status\
\
Used to indicate the status of a process or state](/docs/components/status)
[Steps\
\
Used to indicate progress through a multi-step process](/docs/components/steps)
[Switch\
\
Used to capture a binary state](/docs/components/switch)
[Table\
\
Used to display data in a tabular format.](/docs/components/table)
[Tabs\
\
Used to display content in a tabbed interface](/docs/components/tabs)
[Tag\
\
Used for categorizing or labeling content](/docs/components/tag)
[Text\
\
Used to render text and paragraphs within an interface.](/docs/components/text)
[Textarea\
\
Used to enter multiple lines of text.](/docs/components/textarea)
[Theme\
\
Used to force a part of the tree to light or dark mode.](/docs/components/theme)
[Timeline\
\
Used to display a list of events in chronological order](/docs/components/timeline)
[Toast\
\
Used to display a temporary message to the user](/docs/components/toast)
[Toggle Tip\
\
Looks like a tooltip, but works like a popover.](/docs/components/toggle-tip)
[Tooltip\
\
Used to display additional information when a user hovers over an element.](/docs/components/tooltip)
[Visually Hidden\
\
Used to hide content visually but keep it accessible to screen readers.](/docs/components/visually-hidden)
[Wrap\
\
Used to add space between elements and wraps automatically if there isn't enough space.](/docs/components/wrap)

[Previous\
\
Iframe](/docs/get-started/environments/iframe)
[Next\
\
Composition](/docs/components/concepts/composition)

---

# Migration to v3 | Chakra UI

Build faster with Premium Chakra UI Components 💎

[Learn more](https://pro.chakra-ui.com?utm_source=chakra-ui.com)



Migration to v3
===============

How to migrate to Chakra UI v3.x from v2.x

[![Migration Guide](/_next/image?url=%2Fimage.png&w=3840&q=75)\
\
Watch the migration livestream (1)](https://www.youtube.com/live/eU0n9egYGzU?si=ejMOxn1pgUH_6Ox-)
[![Migration Guide](/_next/image?url=%2Fimage.png&w=3840&q=75)\
\
Watch the migration livestream (2)](https://www.youtube.com/live/Ia9CZS3it4g?si=QfWnChbkHy_qwXJm)

warning

We recommend using the [LLMs.txt](/docs/get-started/llms)
 files to make the Chakra UI v3 documentation available to large language models.

[Steps](#steps)

----------------

The minimum node version required is Node.20.x

1

### [Update Packages](#update-packages)

Remove the unused packages: `@emotion/styled` and `framer-motion`. These packages are no longer required in Chakra UI.

    npm uninstall @emotion/styled framer-motion

Install updated versions of the packages: `@chakra-ui/react` and `@emotion/react`.

    npm install @chakra-ui/react@latest @emotion/react@latest

Next, install component snippets using the CLI snippets. Snippets provide pre-built compositions of Chakra components to save you time and put you in charge.

    npx @chakra-ui/cli snippet add

2

### [Refactor Custom Theme](#refactor-custom-theme)

Move your custom theme to a dedicated `theme.js` or `theme.ts` file. Use `createSystem` and `defaultConfig` to configure your theme.

**Before**

    import { extendTheme } from "@chakra-ui/react"
    
    export const theme = extendTheme({
      fonts: {
        heading: `'Figtree', sans-serif`,
        body: `'Figtree', sans-serif`,
      },
    })

**After**

    import { createSystem, defaultConfig } from "@chakra-ui/react"
    
    export const system = createSystem(defaultConfig, {
      theme: {
        tokens: {
          fonts: {
            heading: { value: `'Figtree', sans-serif` },
            body: { value: `'Figtree', sans-serif` },
          },
        },
      },
    })

All token values need to be wrapped in an object with a **value** key. Learn more about tokens [here](/docs/theming/tokens)
.

3

### [Update ChakraProvider](#update-chakraprovider)

Update the ChakraProvider import from `@chakra-ui/react` to the one from the snippets. Next, rename the `theme` prop to `value` to match the new system-based theming approach.

**Before**

    import { ChakraProvider } from "@chakra-ui/react"
    
    export const App = ({ Component }) => (
      <ChakraProvider theme={theme}>
        <Component />
      </ChakraProvider>
    )

**After**

    import { Provider } from "@/components/ui/provider"
    import { defaultSystem } from "@chakra-ui/react"
    
    export const App = ({ Component }) => (
      <Provider>
        <Component />
      </Provider>
    )

    import { ColorModeProvider } from "@/components/ui/color-mode"
    import { ChakraProvider, defaultSystem } from "@chakra-ui/react"
    
    export function Provider(props) {
      return (
        <ChakraProvider value={defaultSystem}>
          <ColorModeProvider {...props} />
        </ChakraProvider>
      )
    }

If you have a custom theme, replace `defaultSystem` with the custom `system`

The Provider component compose the `ChakraProvider` from Chakra and `ThemeProvider` from `next-themes`

[Improvements](#improvements)

------------------------------

*   **Performance:** Improved reconciliation performance by `4x` and re-render performance by `1.6x`
    
*   **Namespaced imports:** Import components using the dot notation for more concise imports
    
        import { Accordion } from "@chakra-ui/react"
        
        const Demo = () => {
          return (
            <Accordion.Root>
              <Accordion.Item>
                <Accordion.ItemTrigger />
                <Accordion.ItemContent />
              </Accordion.Item>
            </Accordion.Root>
          )
        }
    
*   **TypeScript:** Improved IntelliSense and type inference for style props and tokens.
    
*   **Polymorphism:** Loosened the `as` prop typings in favor of using the `asChild` prop. This pattern was inspired by Radix Primitives and Ark UI.
    

[Removed Features](#removed-features)

--------------------------------------

### [Color Mode](#color-mode)

*   `ColorModeProvider` and `useColorMode` have been removed in favor of `next-themes`
*   `LightMode`, `DarkMode` and `ColorModeScript` components have been removed. You now have to use `className="light"` or `className="dark"` to force themes.
*   `useColorModeValue` has been removed in favor of `useTheme` from `next-themes`

note

We provide snippets for color mode via the CLI to help you set up color mode quickly using `next-themes`

### [Hooks](#hooks)

We removed the hooks package in favor of using dedicated, robust libraries like `react-use` and `usehooks-ts`

The only hooks we ship now are `useBreakpointValue`, `useCallbackRef`, `useDisclosure`, `useControllableState` and `useMediaQuery`.

### [Style Config](#style-config)

We removed the `styleConfig` and `multiStyleConfig` concept in favor of recipes and slot recipes. This pattern was inspired by Panda CSS.

### [Next.js package](#nextjs-package)

We've removed the `@chakra-ui/next-js` package in favor of using the `asChild` prop for better flexibility.

To style the Next.js image component, use the `asChild` prop on the `Box` component.

    <Box asChild>
      <NextImage />
    </Box>

To style the Next.js link component, use the `asChild` prop on the

    <Link isExternal asChild>
      <NextLink />
    </Link>

### [Theme Tools](#theme-tools)

We've removed this package in favor using CSS color mix.

**Before**

We used JS to resolve the colors and then apply the transparency

    defineStyle({
      bg: transparentize("blue.200", 0.16)(theme),
      // -> rgba(0, 0, 255, 0.16)
    })

**After**

We now use CSS color-mix

    defineStyle({
      bg: "blue.200/16",
      // -> color-mix(in srgb, var(--chakra-colors-200), transparent 16%)
    })

### [forwardRef](#forwardref)

Due to the simplification of the `as` prop, we no longer provide a custom `forwardRef`. Prefer to use `forwardRef` from React directly.

Before:

    import { Button as ChakraButton, forwardRef } from "@chakra-ui/react"
    
    const Button = forwardRef<ButtonProps, "button">(function Button(props, ref) {
      return <ChakraButton ref={ref} {...props} />
    })

After:

    import { Button as ChakraButton } from "@chakra-ui/react"
    import { forwardRef } from "react"
    
    const Button = forwardRef<HTMLButtonElement, ButtonProps>(
      function Button(props, ref) {
        return <ChakraButton ref={ref} {...props} />
      },
    )

### [Icons](#icons)

Removed `@chakra-ui/icons` package. Prefer to use `lucide-react` or `react-icons` instead.

### [Storybook Addon](#storybook-addon)

We're removed the storybook addon in favor of using `@storybook/addon-themes` and `withThemeByClassName` helper.

    import { ChakraProvider, defaultSystem } from "@chakra-ui/react"
    import { withThemeByClassName } from "@storybook/addon-themes"
    import type { Preview, ReactRenderer } from "@storybook/react"
    
    const preview: Preview = {
      decorators: [\
        withThemeByClassName<ReactRenderer>({\
          defaultTheme: "light",\
          themes: {\
            light: "",\
            dark: "dark",\
          },\
        }),\
        (Story) => (\
          <ChakraProvider value={defaultSystem}>\
            <Story />\
          </ChakraProvider>\
        ),\
      ],
    }
    
    export default preview

### [Removed Components](#removed-components)

*   **StackItem**: You don't need this anymore. Use `Box` instead.
*   **FocusLock**: We no longer ship a focus lock component. Install and use `react-focus-lock` directly.
*   **FormControl**: Replace with the `Field` component
*   **FormErrorMessage**: Replace with the `Field.ErrorText` component Before:

    <FormControl>
      <Input />
      <FormErrorMessage>This field is required</FormErrorMessage>
    </FormControl>

After:

    <Field.Root>
      <Input />
      <Field.ErrorText>This field is required</Field.ErrorText>
    </Field.Root>

*   **AlertDialog**
    
    *   Replace with the `Dialog` component and set `role=alertdialog`
    *   Set `leastDestructiveRef` prop to the `initialFocusEl` to the `Dialog.Root` component
*   **Collapse**: Replace with the `Collapsible` component.
    

Before:

    <Collapse in={isOpen} animateOpacity>
      Some content
    </Collapse>

After:

    <Collapsible.Root open={isOpen}>
      <Collapsible.Content>Some content</Collapsible.Content>
    </Collapsible.Root>

[Prop Changes](#prop-changes)

------------------------------

### [Boolean Props](#boolean-props)

Changed naming convention for boolean properties from `is<X>` to `<x>`

*   `isOpen` -> `open`
*   `defaultIsOpen` -> `defaultOpen`
*   `isDisabled` -> `disabled`
*   `isInvalid` -> `invalid`
*   `isRequired` -> `required`

### [ColorScheme Prop](#colorscheme-prop)

The `colorScheme` prop has been changed to `colorPalette`

**Before**

*   You could only use `colorScheme` in a component's theme
*   `colorScheme` clashes with the native `colorScheme` prop in HTML elements

    <Button colorScheme="blue">Click me</Button>

**After**

*   You can now use `colorPalette` anywhere

    <Button colorPalette="blue">Click me</Button>

Usage in any component, you can do something like:

    <Box colorPalette="red">
      <Box bg="colorPalette.400">Some box</Box>
      <Text color="colorPalette.600">Some text</Text>
    </Box>

If you are using custom colors, you must define two things to make `colorPalette` work:

*   **tokens**: For the 50-950 color palette
*   **semanticTokens**: For the `solid`, `contrast`, `fg`, `muted`, `subtle`, `emphasized`, and `focusRing` color keys

theme.ts

    import { createSystem, defaultConfig } from "@chakra-ui/react"
    
    export const system = createSystem(defaultConfig, {
      theme: {
        tokens: {
          colors: {
            brand: {
              50: { value: "#e6f2ff" },
              100: { value: "#e6f2ff" },
              200: { value: "#bfdeff" },
              300: { value: "#99caff" },
              // ...
              950: { value: "#001a33" },
            },
          },
        },
        semanticTokens: {
          colors: {
            brand: {
              solid: { value: "{colors.brand.500}" },
              contrast: { value: "{colors.brand.100}" },
              fg: { value: "{colors.brand.700}" },
              muted: { value: "{colors.brand.100}" },
              subtle: { value: "{colors.brand.200}" },
              emphasized: { value: "{colors.brand.300}" },
              focusRing: { value: "{colors.brand.500}" },
            },
          },
        },
      },
    })

Read more about it [here](/guides/theming-custom-colors)
.

### [Gradient Props](#gradient-props)

Gradient style prop simplified to `gradient` and `gradientFrom` and `gradientTo` props. This reduces the runtime performance cost of parsing the gradient string, and allows for better type inference.

**Before**

    <Box bgGradient="linear(to-r, red.200, pink.500)" />

**After**

    <Box bgGradient="to-r" gradientFrom="red.200" gradientTo="pink.500" />

### [Color Palette](#color-palette)

*   Default color palette is now `gray` for all components but you can configure this in your theme.
    
*   Default theme color palette size has been increased to 11 shades to allow more color variations.
    
    **Before**
    
        const colors = {
          // ...
          gray: {
            50: "#F7FAFC",
            100: "#EDF2F7",
            200: "#E2E8F0",
            300: "#CBD5E0",
            400: "#A0AEC0",
            500: "#718096",
            600: "#4A5568",
            700: "#2D3748",
            800: "#1A202C",
            900: "#171923",
          },
        }
    
    **After**
    
        const colors = {
          // ...
          gray: {
            50: { value: "#fafafa" },
            100: { value: "#f4f4f5" },
            200: { value: "#e4e4e7" },
            300: { value: "#d4d4d8" },
            400: { value: "#a1a1aa" },
            500: { value: "#71717a" },
            600: { value: "#52525b" },
            700: { value: "#3f3f46" },
            800: { value: "#27272a" },
            900: { value: "#18181b" },
            950: { value: "#09090b" },
          },
        }
    

### [Style Props](#style-props)

Changed the naming convention for some style props

*   `noOfLines` -> `lineClamp`
*   `truncated` -> `truncate`
*   `_activeLink` -> `_currentPage`
*   `_activeStep` -> `_currentStep`
*   `_mediaDark` -> `_osDark`
*   `_mediaLight` -> `_osLight`

We removed the `apply` prop in favor of `textStyle` or `layerStyles`

### [Nested Styles](#nested-styles)

We have changed the way you write nested styles in Chakra UI components.

**Before**

Write nested styles using the `sx` or `__css` prop, and you sometimes don't get auto-completion for nested styles.

    <Box
      sx={{
        svg: { color: "red.500" },
      }}
    />

**After**

Write nested styles using the `css` prop. All nested selectors **require** the use of the ampersand `&` prefix

    <Box
      css={{
        "& svg": { color: "red.500" },
      }}
    />

This was done for two reasons:

*   **Faster style processing:** Before we had to check if a style key is a style prop or a selector which is quite expensive overall.
*   **Better typings:** This makes it easier to type nested style props are strongly typed

[Component Changes](#component-changes)

----------------------------------------

### [ChakraProvider](#chakraprovider)

*   Removed `theme` prop in favor of passing the `system` prop instead. Import the `defaultSystem` module instead of `theme`
    
*   Removed `resetCss` prop in favor of passing `preflight: false` to the `createSystem` function
    

Before

    <ChakraProvider resetCss={false}>
      <Component />
    </ChakraProvider>

After

    const system = createSystem(defaultConfig, { preflight: false })
    
    <Provider value={system}>
      <Component />
    </Provider>

*   Removed support for configuring toast options. Pass it to the `createToaster` function in `components/ui/toaster.tsx` file instead.

*   Renamed to `Dialog`
*   Remove `isCentered` prop in favor of using the `placement=center` prop
*   Removed `isOpen` and `onClose` props in favor of using the `open` and `onOpenChange` props

### [Avatar](#avatar)

*   Remove `max` prop in favor of userland control
*   Remove excess label part
*   Move image related props to `Avatar.Image` component
*   Move fallback icon to `Avatar.Fallback` component
*   Move `name` prop to `Avatar.Fallback` component

### [Portal](#portal)

*   Remove `appendToParentPortal` prop in favor of using the `containerRef`
*   Remove `PortalManager` component

### [Stack](#stack)

*   Changed `spacing` to `gap`
*   Removed `StackItem` in favor of using the `Box` component directly

### [Collapse](#collapse)

*   Rename `Collapse` to `Collapsible` namespace
*   Rename `in` to `open`
*   `animateOpacity` has been removed, use keyframes animations `expand-height` and `collapse-height` instead

Before

    <Collapse in={isOpen} animateOpacity>
      Some content
    </Collapse>

After

    <Collapsible.Root open={isOpen}>
      <Collapsible.Content>Some content</Collapsible.Content>
    </Collapsible.Root>

### [Image](#image)

*   Now renders a native `img` without any fallback
*   Remove `fallbackSrc` due to the SSR issues it causes
*   Remove `useImage` hook
*   Remove `Img` in favor of using the `Image` component directly

### [PinInput](#pininput)

*   Changed `value`, `defaultValue` to use `string[]` instead of `string`
*   `onChange` prop is now called `onValueChange`
*   Add new `PinInput.Control` and `PinInput.Label` component parts
*   `PinInput.Root` now renders a `div` element by default. Consider combining with `Stack` or `Group` for better layout control

### [NumberInput](#numberinput)

*   Rename `NumberInputStepper` to `NumberInput.Control`
*   Rename `NumberInputStepperIncrement` to `NumberInput.IncrementTrigger`
*   Rename `NumberInputStepperDecrement` to `NumberInput.DecrementTrigger`
*   `onChange` prop is now called `onValueChange`
*   Remove `focusBorderColor` and `errorBorderColor`, consider setting the `--focus-color` and `--error-color` css variables instead

Before

    <NumberInput>
      <NumberInputField />
      <NumberInputStepper>
        <NumberIncrementStepper />
        <NumberDecrementStepper />
      </NumberInputStepper>
    </NumberInput>

After

    <NumberInput.Root>
      <NumberInput.Input />
      <NumberInput.Control>
        <NumberInput.IncrementTrigger />
        <NumberInput.DecrementTrigger />
      </NumberInput.Control>
    </NumberInput.Root>

### [Divider](#divider)

*   Rename to `Separator`
*   Switch to `div` element for better layout control
*   Simplify component to rely on `borderTopWidth` and `borderInlineStartWidth`
*   To change the thickness reliably, set the `--divider-border-width` css variable

### [Input, Select, Textarea](#input-select-textarea)

*   Removed `invalid` prop in favor of wrapping the component in a `Field` component. This allows for adding a label, error text and asterisk easily.

Before

    <Input invalid />

After

    <Field.Root invalid>
      <Field.Label>Email</Field.Label>
      <Input />
      <Field.ErrorText>This field is required</Field.ErrorText>
    </Field.Root>

### [Link](#link)

*   Removed `isExternal` prop in favor of explicitly setting the `target` and `rel` props

Before

    <Link isExternal>Click me</Link>

After

    <Link target="_blank" rel="noopener noreferrer">
      Click me
    </Link>

### [IconButton](#iconbutton)

*   Removed `icon` prop in favor of rendering the `children` prop directly
*   Removed `isRounded` in favor of using the `borderRadius=full` prop

### [Spinner](#spinner)

*   Change the `thickness` prop to `borderWidth`
*   Change the `speed` prop to `animationDuration`

Before

    <Spinner thickness="2px" speed="0.5s" />

After

    <Spinner borderWidth="2px" animationDuration="0.5s" />

[Previous\
\
Installation](/docs/get-started/installation)
[Next\
\
CLI](/docs/get-started/cli)

---

# Overview | Chakra UI

Build faster with Premium Chakra UI Components 💎

[Learn more](https://pro.chakra-ui.com?utm_source=chakra-ui.com)



Overview
========

A guide for configuring the Chakra UI theming system.

[Architecture](#architecture)

------------------------------

The Chakra UI theming system is built around the API of [Panda CSS](https://panda-css.com/)
.

Here's a quick overview of how the system is structured to provide a performant and extensible styling system:

*   Define the styling system configuration using the `defineConfig` function
*   Create the styling engine using the `createSystem` function
*   Pass the styling engine to the `ChakraProvider` component

    import {
      ChakraProvider,
      createSystem,
      defaultConfig,
      defineConfig,
    } from "@chakra-ui/react"
    
    const config = defineConfig({
      theme: {
        tokens: {
          colors: {},
        },
      },
    })
    
    const system = createSystem(defaultConfig, config)
    
    export default function App() {
      return (
        <ChakraProvider value={system}>
          <Box>Hello World</Box>
        </ChakraProvider>
      )
    }

[Config](#config)

------------------

The Chakra UI system is configured using the `defineConfig` function. This function accepts a configuration object that allows you to customize the styling system's behavior.

After a config is defined, it is passed to the `createSystem` function to create the styling engine.

### [cssVarsRoot](#cssvarsroot)

`cssVarsRoot` is the root element where the token CSS variables will be applied.

theme.ts

    const config = defineConfig({
      cssVarsRoot: ":where(:root, :host)",
    })
    
    export default createSystem(defaultConfig, config)

### [cssVarsPrefix](#cssvarsprefix)

`cssVarsPrefix` is the prefix used for the token CSS variables.

theme.ts

    const config = defineConfig({
      cssVarsPrefix: "ck",
    })
    
    export default createSystem(defaultConfig, config)

### [globalCss](#globalcss)

`globalCss` is used to apply global styles to the system.

theme.ts

    const config = defineConfig({
      globalCss: {
        "html, body": {
          margin: 0,
          padding: 0,
        },
      },
    })
    
    export default createSystem(defaultConfig, config)

### [theme](#theme)

Use the `theme` config property to define the system theme. This property accepts the following properties:

*   `breakpoints`: for defining breakpoints
*   `keyframes`: for defining css keyframes animations
*   `tokens`: for defining tokens
*   `semanticTokens`: for defining semantic tokens
*   `textStyles`: for defining typography styles
*   `layerStyles`: for defining layer styles
*   `animationStyles`: for defining animation styles
*   `recipes`: for defining component recipes
*   `slotRecipes`: for defining component slot recipes

theme.ts

    const config = defineConfig({
      theme: {
        breakpoints: {
          sm: "320px",
          md: "768px",
          lg: "960px",
          xl: "1200px",
        },
        tokens: {
          colors: {
            red: "#EE0F0F",
          },
        },
        semanticTokens: {
          colors: {
            danger: { value: "{colors.red}" },
          },
        },
        keyframes: {
          spin: {
            from: { transform: "rotate(0deg)" },
            to: { transform: "rotate(360deg)" },
          },
        },
      },
    })
    
    export default createSystem(defaultConfig, config)

### [conditions](#conditions)

Use the `conditions` config property to define custom selectors and media query conditions for use in the system.

theme.ts

    const config = defineConfig({
      conditions: {
        cqSm: "@container(min-width: 320px)",
        child: "& > *",
      },
    })
    
    export default createSystem(defaultConfig, config)

Sample usage:

    <Box mt="40px" _cqSm={{ mt: "0px" }}>
      <Text>Hello World</Text>
    </Box>

### [strictTokens](#stricttokens)

Use the `strictTokens` config property to enforce the usage of only design tokens. This will throw a TS error if you try to use a token that is not defined in the theme.

theme.ts

    const config = defineConfig({
      strictTokens: true,
    })
    
    export default createSystem(defaultConfig, config)

    // ❌ This will throw a TS error
    <Box color="#4f343e">Hello World</Box>
    
    // ✅ This will work
    <Box color="red.400">Hello World</Box>

[TypeScript](#typescript)

--------------------------

When you configure the system properties (like `colors`, `space`, `fonts`, etc.), the CLI can be used to generate type definitions for them.

    npx @chakra-ui/cli typegen ./theme.ts

This will update the internal types in the `@chakra-ui/react` package, and make sure they are in sync with the theme. Providing a type-safe API and delightful experience for developers.

[System](#system)

------------------

After a config is defined, it is passed to the `createSystem` function to create the styling engine. The returned `system` is framework-agnostic JavaScript styling engine that can be used to style components.

    const system = createSystem(defaultConfig, config)

The system includes the following properties:

### [token](#token)

The token function is used to get a raw token value, or css variable.

    const system = createSystem(defaultConfig, config)
    
    // raw token
    system.token("colors.red.200")
    // => "#EE0F0F"
    
    // token with fallback
    system.token("colors.pink.240", "#000")
    // => "#000"

Use the `token.var` function to get the css variable:

    // css variable
    system.token.var("colors.red.200")
    // => "var(--chakra-colors-red-200)"
    
    // token with fallback
    system.token.var("colors.pink.240", "colors.red.200")
    // => "var(--chakra-colors-red-200)"

It's important to note that `semanticTokens` always return a css variable, regardless of whether you use `token` or `token.var`. This is because semantic tokens change based on the theme.

    // semantic token
    system.token("colors.danger")
    // => "var(--chakra-colors-danger)"
    
    system.token.var("colors.danger")
    // => "var(--chakra-colors-danger)"

### [tokens](#tokens)

    const system = createSystem(defaultConfig, config)
    
    system.tokens.getVar("colors.red.200")
    // => "var(--chakra-colors-red-200)"
    
    system.tokens.expandReferenceInValue("3px solid {colors.red.200}")
    // => "3px solid var(--chakra-colors-red-200)"
    
    system.tokens.cssVarMap
    // => Map { "colors": Map { "red.200": "var(--chakra-colors-red-200)" } }
    
    system.tokens.flatMap
    // => Map { "colors.red.200": "var(--chakra-colors-red-200)" }

### [css](#css)

The `css` function is used to convert chakra style objects to CSS style object that can be passed to `emotion` or `styled-components` or any other styling library.

    const system = createSystem(defaultConfig, config)
    
    system.css({
      color: "red.200",
      bg: "blue.200",
    })
    
    // => { color: "var(--chakra-colors-red-200)", background: "var(--chakra-colors-blue-200)" }

### [cva](#cva)

The `cva` function is used to create component recipes. It returns a function that, when called with a set of props, returns a style object.

    const system = createSystem(defaultConfig, config)
    
    const button = system.cva({
      base: {
        color: "white",
        bg: "blue.500",
      },
      variants: {
        outline: {
          color: "blue.500",
          bg: "transparent",
          border: "1px solid",
        },
      },
    })
    
    button({ variant: "outline" })
    // => { color: "blue.500", bg: "transparent", border: "1px solid" }

### [sva](#sva)

The `sva` function is used to create component slot recipes. It returns a function that, when called with a set of props, returns a style object for each slot.

    const system = createSystem(defaultConfig, config)
    
    const alert = system.sva({
      slots: ["title", "description", "icon"],
      base: {
        title: { color: "white" },
        description: { color: "white" },
        icon: { color: "white" },
      },
      variants: {
        status: {
          info: {
            title: { color: "blue.500" },
            description: { color: "blue.500" },
            icon: { color: "blue.500" },
          },
        },
      },
    })
    
    alert({ status: "info" })
    // => { title: { color: "blue.500" }, description: { color: "blue.500" }, icon: { color: "blue.500" } }

### [isValidProperty](#isvalidproperty)

The `isValidProperty` function is used to check if a property is valid.

    const system = createSystem(defaultConfig, config)
    
    system.isValidProperty("color")
    // => true
    
    system.isValidProperty("background")
    // => true
    
    system.isValidProperty("invalid")
    // => false

### [splitCssProps](#splitcssprops)

The `splitCssProps` function is used to split the props into css props and non-css props.

    const system = createSystem(defaultConfig, config)
    
    system.splitCssProps({
      color: "red.200",
      bg: "blue.200",
      "aria-label": "Hello World",
    })
    // => [{ color: "red.200", bg: "blue.200" }, { "aria-label": "Hello World" }]

### [breakpoints](#breakpoints)

The `breakpoints` property is used to query breakpoints.

    const system = createSystem(defaultConfig, config)
    
    system.breakpoints.up("sm")
    // => "@media (min-width: 320px)"
    
    system.breakpoints.down("sm")
    // => "@media (max-width: 319px)"
    
    system.breakpoints.only("md")
    // => "@media (min-width: 320px) and (max-width: 768px)"
    
    system.breakpoints.keys()
    // => ["sm", "md", "lg", "xl"]

[Tokens](#tokens-1)

--------------------

To learn more about tokens, please refer to the [tokens](/docs/theming/tokens)
 section.

[Recipes](#recipes)

--------------------

To learn more about recipes, please refer to the [recipes](/docs/theming/recipes)
 section.

[Previous\
\
Typography](/docs/styling/style-props/typography)
[Next\
\
Tokens](/docs/theming/tokens)

---

# CLI | Chakra UI

Build faster with Premium Chakra UI Components 💎

[Learn more](https://pro.chakra-ui.com?utm_source=chakra-ui.com)



CLI
===

Learn more to use the Chakra CLI command to generate snippets and typings

The Chakra UI CLI can be used to generate typings for your custom theme tokens, like colors, semantic tokens, recipe variants, etc.

[Installation](#installation)

------------------------------

In order to use the CLI, you need to install it as a dev dependency in your project:

npmpnpmbun

    npm i -D @chakra-ui/cli

    pnpm add -D @chakra-ui/cli

    bun add -d @chakra-ui/cli

warning

To use the CLI tool, please ensure that the version of Node.js is `>= 20.6.0`.

[Usage](#usage)

----------------

Use the Chakra CLI to run any of the commands listed below with your preferred package manager.

    Usage: npx chakra [options] [command]
    
    The official CLI for Chakra UI projects
    
    Options:
      -V, --version               output the version number
      -h, --help                  display help for command
    
    Commands:
      typegen [options] <source>  Generate theme and recipe typings
      snippet                     Add snippets to your project for better DX
      eject [options]             Take control over the default theme tokens and recipes
      help [command]              display help for command

[`chakra typegen`](#chakra-typegen)

------------------------------------

Generates theme and recipe typings for your custom theme. This helps to provide autocompletion and type safety in your project.

    # Generate typings
    chakra typegen src/theme.ts
    
    # Watch for changes and rebuild
    chakra typegen src/theme.ts --watch
    
    # Generate strict types for props variant and size
    chakra typegen src/theme.ts --strict

[`chakra snippet`](#chakra-snippet)

------------------------------------

Generates useful component compositions that boost your development speed.

    # Add all snippets
    chakra snippet add --all
    
    # Add a specific snippet
    chakra snippet add button
    
    # List all available snippets
    chakra snippet list
    
    # Specify a custom directory
    chakra snippet add dialog --outdir ./components/custom

[`chakra eject`](#chakra-eject)

--------------------------------

Generated the file(s) that contain the default theme tokens and recipes so you can have full control over them.

    # Copy the tokens and recipes to your project
    chakra eject --outdir src/theme

[FAQ](#faq)

------------

### [Autocomplete for custom tokens not working?](#autocomplete-for-custom-tokens-not-working)

After generating the typings, you need to "Restart TS Server" for the autocomplete to show up.

Alternatively, you can install the `@chakra-ui/cli` package locally as a dev dependency and run the `chakra typegen` command to generate the typings.

[Previous\
\
Migration](/docs/get-started/migration)
[Next\
\
LLMs.txt](/docs/get-started/llms)

---

# Contributing to Chakra UI | Chakra UI

Build faster with Premium Chakra UI Components 💎

[Learn more](https://pro.chakra-ui.com?utm_source=chakra-ui.com)



Contributing to Chakra UI
=========================

The guide to contributing to Chakra UI v3.0

Thanks for showing interest to contribute to Chakra UI 💖, you rock!

[Overview](#overview)

----------------------

Here are a few ways you can help improve Chakra UI

*   **Improve the documentation**: Add new demos, fix typos, or add missing information.
*   **Add new demos**: Add new component demos to the website and storybook. Open a PR to `apps/compositions/src/examples`
*   **Fix bugs**: Report bugs, fix bugs, or add missing features.
*   **Contribute to the code**: Propose new features by opening a Github Discussion, or find existing bugs to work on.
*   **Improve the code**: Improve the code, fix bugs, or add missing features.

info

We welcome all contributions, no matter how big or small.

[Architecture](#architecture)

------------------------------

Chakra v3.x is a composition of two projects in the Chakra ecosystem, Ark UI and Zag.js. The goal is to maintain as little code as possible in Chakra UI, and delegate the heavy lifting to these projects.

[Zag.js\
\
Component logic modelled as a state machine](https://github.com/chakra-ui/zag)
[Ark UI\
\
State machine from Zag.js converted to headless UI components](https://github.com/chakra-ui/ark)

### [Filing Issues](#filing-issues)

The mindset for filing issues on Chakra v3.x works like this:

*   If the issue is a logic or accessibility bug, then it's most likely a bug in Zag.js. Consider opening an issue in the Zag.js repository.
    
*   If it's a styling issue, then you can fix it directly in the Chakra UI repo.
    

### [Feature Requests](#feature-requests)

The mindset for filing feature requests on Chakra v3.x works like this:

*   If the feature is a new component without logic, then it can go in Chakra UI or Ark UI. Start a discussion on the [Chakra UI repository](https://github.com/chakra-ui/chakra-ui)
    
*   If the feature is a new component with logic, it belongs in Zag.js. Start a discussion on the [Zag.js repository](https://github.com/chakra-ui/zag)
    .
    

[Local Setup](#local-setup)

----------------------------

*   Clone the repository

    git clone https://github.com/chakra-ui/chakra-ui.git

*   Install dependencies with pnpm

    pnpm install

*   Build local version of all packages

    pnpm build:fast

*   Start storybook

    pnpm storybook

*   Start documentation website

    pnpm www dev

*   Run tests

    pnpm test

[Recommended Extensions](#recommended-extensions)

--------------------------------------------------

We recommend using the following extensions in your editor:

*   [ESLint](https://eslint.org/)
    
*   [Prettier](https://prettier.io/)
    
*   [EditorConfig](https://editorconfig.org/)
    
*   [MDX](https://mdxjs.com/)
    

[Previous\
\
LLMs.txt](/docs/get-started/llms)
[Next\
\
Showcase](/showcase)

---

# Using Chakra UI in Next.js (App) | Chakra UI

Build faster with Premium Chakra UI Components 💎

[Learn more](https://pro.chakra-ui.com?utm_source=chakra-ui.com)



Using Chakra UI in Next.js (App)
================================

A guide for installing Chakra UI with Next.js app directory

[Templates](#templates)

------------------------

Use one of the following templates to get started quickly. The templates are configured correctly to use Chakra UI.

[Next.js app template](https://github.com/chakra-ui/chakra-ui/tree/main/sandbox/next-app)
[Next.js pages template](https://github.com/chakra-ui/chakra-ui/tree/main/sandbox/next-pages)

[Installation](#installation)

------------------------------

The minimum node version required is Node.20.x

1

### [Install dependencies](#install-dependencies)

    npm i @chakra-ui/react @emotion/react

2

### [Add snippets](#add-snippets)

Snippets are pre-built components that you can use to build your UI faster. Using the `@chakra-ui/cli` you can add snippets to your project.

    npx @chakra-ui/cli snippet add

3

### [Update tsconfig](#update-tsconfig)

If you're using TypeScript, you need to update the `compilerOptions` in the tsconfig file to include the following options:

    {
      "compilerOptions": {
        "target": "ESNext",
        "module": "ESNext",
        "moduleResolution": "Bundler",
        "skipLibCheck": true,
        "paths": {
          "@/*": ["./src/*"]
        }
      }
    }

If you're using JavaScript, create a `jsconfig.json` file and add the above code to the file.

4

### [Setup provider](#setup-provider)

Wrap your application with the `Provider` component generated in the `components/ui/provider` component at the root of your application.

This provider composes the following:

*   `ChakraProvider` from `@chakra-ui/react` for the styling system
*   `ThemeProvider` from `next-themes` for color mode

app/layout.tsx

    import { Provider } from "@/components/ui/provider"
    
    export default function RootLayout(props: { children: React.ReactNode }) {
      const { children } = props
      return (
        <html suppressHydrationWarning>
          <body>
            <Provider>{children}</Provider>
          </body>
        </html>
      )
    }

Adding the `suppressHydrationWarning` prop to the `html` element is required to prevent the warning about the `next-themes` library.

5

### [Optimize Bundle](#optimize-bundle)

We recommend using the `experimental.optimizePackageImports` feature in Next.js to optimize your bundle size by loading only the modules that you are actually using.

next.config.mjs

    export default {
      experimental: {
        optimizePackageImports: ["@chakra-ui/react"],
      },
    }

This also helps to resolve warnings like:

    [webpack.cache.PackFileCacheStrategy] Serializing big strings (xxxkiB)

6

### [Hydration errors](#hydration-errors)

If you see an error like this: **Hydration failed because the initial server rendered HTML did not match the client**, and the error looks similar to:

    +<div className="chakra-xxx">
    -<style data-emotion="css-global xxx" data-s="">

This is caused by how Next.js hydrates Emotion CSS in `--turbo` mode. Please remove the `--turbo` flag from your `dev` script in your `package.json` file.

    - "dev": "next dev --turbo"
    + "dev": "next dev"

When this is fixed by the `Next.js` team, we'll update this guide.

7

### [Enjoy!](#enjoy)

With the power of the snippets and the primitive components from Chakra UI, you can build your UI faster.

    import { Button, HStack } from "@chakra-ui/react"
    
    const Demo = () => {
      return (
        <HStack>
          <Button>Click me</Button>
          <Button>Click me</Button>
        </HStack>
      )
    }

[Previous\
\
Showcase](/showcase)
[Next\
\
Next.js (Pages)](/docs/get-started/frameworks/next-pages)

---

# LLMs.txt Documentation | Chakra UI

Build faster with Premium Chakra UI Components 💎

[Learn more](https://pro.chakra-ui.com?utm_source=chakra-ui.com)



LLMs.txt Documentation
======================

How to get tools like Cursor, Windstatic, GitHub Copilot, ChatGPT, and Claude to understand Chakra v3.

We support [LLMs.txt](https://llmstxt.org/)
 files for making the Chakra UI v3 documentation available to large language models.

[Directory Overview](#directory-overview)

------------------------------------------

The following files are available.

*   [/llms.txt](https://chakra-ui.com/llms.txt)
    : The main LLMs.txt file
*   [/llms-full.txt](https://chakra-ui.com/llms-full.txt)
    : The complete documentation for Chakra UI v3

* * *

Separate docs are available if you have a limited context window.

*   [/llms-components.txt](https://chakra-ui.com/llms-components.txt)
    : Only component documentation
*   [/llms-styling.txt](https://chakra-ui.com/llms-styling.txt)
    : Only styling documentation
*   [/llms-theming.txt](https://chakra-ui.com/llms-theming.txt)
    : Only theming documentation

* * *

We also have a special `llms-v3-migration.txt` file that contains documentation for migrating to Chakra UI v3.

*   [/llms-v3-migration.txt](https://chakra-ui.com/llms-v3-migration.txt)
    : Documentation for migrating to Chakra UI v3

[Usage](#usage)

----------------

### [Cursor](#cursor)

Use `@Docs` feature in Cursor to include the LLMs.txt files in your project.

[Read more](https://docs.cursor.com/context/@-symbols/@-docs)

### [Windstatic](#windstatic)

Reference the LLMs.txt files using `@` or in your `.windsurfrules` files.

[Read more](https://docs.codeium.com/windsurf/memories#memories-and-rules)

[Previous\
\
CLI](/docs/get-started/cli)
[Next\
\
Contributing](/docs/get-started/contributing)

---

# Using Chakra in Remix | Chakra UI

Build faster with Premium Chakra UI Components 💎

[Learn more](https://pro.chakra-ui.com?utm_source=chakra-ui.com)



Using Chakra in Remix
=====================

A guide for installing Chakra UI with Remix projects

[Templates](#templates)

------------------------

Use the remix template below to get started quickly.

[Remix template](https://github.com/chakra-ui/chakra-ui/tree/main/sandbox/remix-ts)

[Installation](#installation)

------------------------------

1

### [Install dependencies](#install-dependencies)

    npm i @chakra-ui/react @emotion/react

2

### [Add snippets](#add-snippets)

Snippets are pre-built components that you can use to build your UI faster. Using the `@chakra-ui/cli` you can add snippets to your project.

    npx @chakra-ui/cli snippet add

3

### [Setup emotion cache](#setup-emotion-cache)

Using snippets from the Remix sandbox, you can add the emotion cache to your application.

[Emotion cache snippet](https://github.com/chakra-ui/chakra-ui/blob/main/sandbox/remix-ts/app/emotion)

4

### [Update tsconfig](#update-tsconfig)

If you're using TypeScript, you need to update the `compilerOptions` in the tsconfig file to include the following options:

tsconfig.json

    {
      "compilerOptions": {
        "target": "ESNext",
        "module": "ESNext",
        "moduleResolution": "Bundler",
        "skipLibCheck": true
      }
    }

If you're using JavaScript, create a `jsconfig.json` file and add the above code to the file.

5

### [Setup provider](#setup-provider)

Wrap your application with the `Provider` component at the root of your application.

This provider composes the following:

*   `ChakraProvider` from `@chakra-ui/react` for the styling system
*   `ThemeProvider` from `next-themes` for color mode

app/root.tsx

    import React from "react"
    import ReactDOM from "react-dom/client"
    import App from "./App"
    import { Provider } from "@/components/ui/provider"
    
    export default function App() {
      return (
        <Provider>
          <Outlet />
        </Provider>
      )
    }

6

### [Enjoy!](#enjoy)

When the power of the snippets and the primitive components from Chakra UI, you can build your UI faster.

    import { Button, HStack } from "@chakra-ui/react"
    
    const Demo = () => {
      return (
        <HStack>
          <Button>Click me</Button>
          <Button>Click me</Button>
        </HStack>
      )
    }

[Known issues](#known-issues)

------------------------------

You may encounter the following issues when using Chakra UI with Remix:

    Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

This is a known issue related to extension installed in your browser. We recommend testing your application in incognito mode to see if the issue persists.

We welcome contributions to fix this issue.

[Previous\
\
Next.js (Pages)](/docs/get-started/frameworks/next-pages)
[Next\
\
Storybook](/docs/get-started/frameworks/storybook)

---

# Using Chakra UI in Storybook | Chakra UI

Build faster with Premium Chakra UI Components 💎

[Learn more](https://pro.chakra-ui.com?utm_source=chakra-ui.com)



Using Chakra UI in Storybook
============================

A guide for using Chakra UI with Storybook

[Installation](#installation)

------------------------------

1

### [Install dependencies](#install-dependencies)

Install the required dependencies for Chakra UI and Storybook.

    npm i @storybook/addon-themes @chakra-ui/react @emotion/react

2

### [Setup Preview](#setup-preview)

Edit the `.storybook/preview.tsx` file to include the Chakra UI provider.

    import { ChakraProvider, defaultSystem } from "@chakra-ui/react"
    import type { Preview } from "@storybook/react"
    
    const preview: Preview = {
      // ...
      decorators: [\
        (Story) => (\
          <ChakraProvider value={defaultSystem}>\
            <Story />\
          </ChakraProvider>\
        ),\
      ],
    }
    
    export default preview

3

### [Setup dark mode toggle](#setup-dark-mode-toggle)

Use the `withThemeByClassName` decorator from `@storybook/addon-themes` to add a color mode toggle to the Storybook toolbar.

    import { withThemeByClassName } from "@storybook/addon-themes"
    import type { Preview, ReactRenderer } from "@storybook/react"
    
    const preview: Preview = {
      decorators: [\
        // ...\
        withThemeByClassName({\
          defaultTheme: "light",\
          themes: { light: "", dark: "dark" },\
        }),\
      ],
    }
    
    export default preview

4

### [Start the Storybook server](#start-the-storybook-server)

    npm run storybook

5

### [Enjoy!](#enjoy)

Use Chakra UI components in your stories.

    import { Button } from "@chakra-ui/react"
    
    export const SampleStory = {
      render() {
        return <Button>Click me</Button>
      },
    }

[Previous\
\
Remix](/docs/get-started/frameworks/remix)
[Next\
\
Vite](/docs/get-started/frameworks/vite)

---

# Using Chakra UI in Next.js (Pages) | Chakra UI

Build faster with Premium Chakra UI Components 💎

[Learn more](https://pro.chakra-ui.com?utm_source=chakra-ui.com)



Using Chakra UI in Next.js (Pages)
==================================

A guide for installing Chakra UI with Next.js pages directory

[Templates](#templates)

------------------------

Use one of the following templates to get started quickly. The templates are configured correctly to use Chakra UI.

[Next.js app template](https://github.com/chakra-ui/chakra-ui/tree/main/sandbox/next-app)
[Next.js pages template](https://github.com/chakra-ui/chakra-ui/tree/main/sandbox/next-pages)

[Installation](#installation)

------------------------------

The minimum node version required is Node.20.x

1

### [Install dependencies](#install-dependencies)

    npm i @chakra-ui/react @emotion/react

2

### [Add snippets](#add-snippets)

Snippets are pre-built components that you can use to build your UI faster. Using the `@chakra-ui/cli` you can add snippets to your project.

    npx @chakra-ui/cli snippet add

3

### [Update tsconfig](#update-tsconfig)

If you're using TypeScript, you need to update the `compilerOptions` in the tsconfig file to include the following options:

    {
      "compilerOptions": {
        "target": "ESNext",
        "module": "ESNext",
        "moduleResolution": "Bundler",
        "skipLibCheck": true,
        "paths": {
          "@/*": ["./src/*"]
        }
      }
    }

If you're using JavaScript, create a `jsconfig.json` file and add the above code to the file.

4

### [Setup provider](#setup-provider)

Wrap your application with the `Provider` component at the root of your application.

This provider composes the following:

*   `ChakraProvider` from `@chakra-ui/react` for the styling system
*   `ThemeProvider` from `next-themes` for color mode

pages/\_app.tsx

    import { Provider } from "@/components/ui/provider"
    
    export default function App({ Component, pageProps }: AppProps) {
      return (
        <Provider>
          <Component {...pageProps} />
        </Provider>
      )
    }

In the `pages/_document.tsx` file, add the `suppressHydrationWarning` prop to the `html` element.

pages/\_document.tsx

    import { Head, Html, Main, NextScript } from "next/document"
    
    export default function Document() {
      return (
        <Html suppressHydrationWarning>
          <Head />
          <body>
            <Main />
            <NextScript />
          </body>
        </Html>
      )
    }

5

### [Optimize Bundle](#optimize-bundle)

We recommend using the `experimental.optimizePackageImports` feature in Next.js to optimize your bundle size by loading only the modules that you are actually using.

next.config.mjs

    export default {
      experimental: {
        optimizePackageImports: ["@chakra-ui/react"],
      },
    }

This also helps to resolve warnings like:

    [webpack.cache.PackFileCacheStrategy] Serializing big strings (xxxkiB)

6

### [Hydration errors](#hydration-errors)

If you see an error like this: **Hydration failed because the initial server rendered HTML did not match the client**, and the error looks similar to:

    +<div className="chakra-xxx">
    -<style data-emotion="css-global xxx" data-s="">

This is caused by how Next.js hydrates Emotion CSS in `--turbo` mode. Please remove the `--turbo` flag from your `dev` script in your `package.json` file.

    - "dev": "next dev --turbo"
    + "dev": "next dev"

When this is fixed by the `Next.js` team, we'll update this guide.

7

### [Enjoy!](#enjoy)

With the power of the snippets and the primitive components from Chakra UI, you can build your UI faster.

    import { Button, HStack } from "@chakra-ui/react"
    
    const Demo = () => {
      return (
        <HStack>
          <Button>Click me</Button>
          <Button>Click me</Button>
        </HStack>
      )
    }

[Previous\
\
Next.js (App)](/docs/get-started/frameworks/next-app)
[Next\
\
Remix](/docs/get-started/frameworks/remix)

---

# Using Chakra UI in Shadow DOM | Chakra UI

Build faster with Premium Chakra UI Components 💎

[Learn more](https://pro.chakra-ui.com?utm_source=chakra-ui.com)



Using Chakra UI in Shadow DOM
=============================

A guide for installing Chakra UI with Shadow DOM

When developing extensions for browsers or using Chakra as part of a large project, leveraging the Shadow DOM is useful for style and logic encapsulation.

[Template](#template)

----------------------

Use the following template to get started quickly

[Shadow DOM template](https://github.com/chakra-ui/chakra-ui/tree/main/sandbox/shadow-dom)

[Installation](#installation)

------------------------------

The minimum node version required is Node.20.x

1

### [Install dependencies](#install-dependencies)

    npm i @chakra-ui/react @emotion/react @emotion/cache react-shadow

The additional packages used are:

*   `react-shadow` used to create a Shadow DOM easily
*   `@emotion/cache` used to create a custom insertion point for styles

2

### [Add snippets](#add-snippets)

Snippets are pre-built components that you can use to build your UI faster. Using the `@chakra-ui/cli` you can add snippets to your project.

    npx @chakra-ui/cli snippet add

3

### [Update tsconfig](#update-tsconfig)

If you're using TypeScript, you need to update the `compilerOptions` in the tsconfig file to include the following options:

    {
      "compilerOptions": {
        "module": "ESNext",
        "moduleResolution": "Bundler",
        "skipLibCheck": true,
        "paths": {
          "@/*": ["./src/*"]
        }
      }
    }

4

### [Configure style engine](#configure-style-engine)

Create a `system.ts` file in the root of your project and configure the style engine.

components/ui/system.ts

    import { createSystem, defaultConfig, defineConfig } from "@chakra-ui/react"
    
    const varRoot = ":host"
    
    const config = defineConfig({
      cssVarsRoot: varRoot,
      conditions: {
        light: `${varRoot} &, .light &`,
      },
      preflight: { scope: varRoot },
      globalCss: {
        [varRoot]: defaultConfig.globalCss?.html ?? {},
      },
    })
    
    export const system = createSystem(defaultConfig, config)

**Good to know**: The main purpose of the `system.ts` file is to configure the style engine to target the Shadow DOM.

5

### [Setup provider](#setup-provider)

Update the generated `components/ui/provider` component with the `Provider` component.

This provider composes the following:

*   `ChakraProvider` from `@chakra-ui/react` for the styling system
*   `EnvironmentProvider` from `react-shadow` to ensure Chakra components query the DOM correctly
*   `CacheProvider` from `@emotion/react` to provide the custom insertion point
*   `ThemeProvider` from `next-themes` for color mode

components/ui/provider.tsx

    "use client"
    
    import { ChakraProvider, EnvironmentProvider } from "@chakra-ui/react"
    import createCache from "@emotion/cache"
    import { CacheProvider } from "@emotion/react"
    import { ThemeProvider, type ThemeProviderProps } from "next-themes"
    import { useEffect, useState } from "react"
    import root from "react-shadow/emotion"
    import { system } from "./system"
    
    export function Provider(props: ThemeProviderProps) {
      const [shadow, setShadow] = useState<HTMLElement | null>(null)
      const [cache, setCache] = useState<ReturnType<typeof createCache> | null>(
        null,
      )
    
      useEffect(() => {
        if (!shadow?.shadowRoot || cache) return
        const emotionCache = createCache({
          key: "root",
          container: shadow.shadowRoot,
        })
        setCache(emotionCache)
      }, [shadow, cache])
    
      return (
        <root.div ref={setShadow}>
          {shadow && cache && (
            <EnvironmentProvider value={() => shadow.shadowRoot ?? document}>
              <CacheProvider value={cache}>
                <ChakraProvider value={system}>
                  <ThemeProvider {...props} />
                </ChakraProvider>
              </CacheProvider>
            </EnvironmentProvider>
          )}
        </root.div>
      )
    }

6

### [Use the provider](#use-the-provider)

Wrap your application with the `Provider` component generated in the `components/ui/provider` component at the root of your application.

src/main.tsx

    import { Provider } from "@/components/ui/provider"
    import { StrictMode } from "react"
    import { createRoot } from "react-dom/client"
    import App from "./App.tsx"
    
    createRoot(document.getElementById("root")!).render(
      <StrictMode>
        <Provider>
          <App />
        </Provider>
      </StrictMode>,
    )

7

### [Enjoy!](#enjoy)

With the power of the snippets and the primitive components from Chakra UI, you can build your UI faster.

    import { Button, HStack } from "@chakra-ui/react"
    
    export default function App() {
      return (
        <HStack>
          <Button>Click me</Button>
          <Button>Click me</Button>
        </HStack>
      )
    }

[Previous\
\
Vite](/docs/get-started/frameworks/vite)
[Next\
\
Iframe](/docs/get-started/environments/iframe)

---

# Using Chakra in Vite | Chakra UI

Build faster with Premium Chakra UI Components 💎

[Learn more](https://pro.chakra-ui.com?utm_source=chakra-ui.com)



Using Chakra in Vite
====================

A guide for installing Chakra UI with Vite.js projects

[Templates](#templates)

------------------------

Use the vite template below to get started quickly.

[Vite template](https://github.com/chakra-ui/chakra-ui/tree/main/sandbox/vite-ts)

[Installation](#installation)

------------------------------

The minimum node version required is Node.20.x

1

### [Install dependencies](#install-dependencies)

    npm i @chakra-ui/react @emotion/react

2

### [Add snippets](#add-snippets)

Snippets are pre-built components that you can use to build your UI faster. Using the `@chakra-ui/cli` you can add snippets to your project.

    npx @chakra-ui/cli snippet add

3

### [Update tsconfig](#update-tsconfig)

If you're using TypeScript, in the `tsconfig.app.json` file, make sure the `compilerOptions` includes the following:

tsconfig.app.json

    {
      "compilerOptions": {
        "target": "ESNext",
        "module": "ESNext",
        "moduleResolution": "Bundler",
        "skipLibCheck": true,
        "paths": {
          "@/*": ["./src/*"]
        }
      }
    }

If you're using JavaScript, create a `jsconfig.json` file and add the above code to the file.

4

### [Setup provider](#setup-provider)

Wrap your application with the `Provider` component at the root of your application.

This provider composes the following:

*   `ChakraProvider` from `@chakra-ui/react` for the styling system
*   `ThemeProvider` from `next-themes` for color mode

src/main.tsx

    import { Provider } from "@/components/ui/provider"
    import React from "react"
    import ReactDOM from "react-dom/client"
    import App from "./App"
    
    ReactDOM.createRoot(document.getElementById("root")!).render(
      <React.StrictMode>
        <Provider>
          <App />
        </Provider>
      </React.StrictMode>,
    )

5

### [Setup Vite Config Paths](#setup-vite-config-paths)

In your project, set up a vite config path to automatically sync `tsconfig` with vite using the command:

    npm i -D vite-tsconfig-paths

Update the `vite.config.ts` file:

    import react from "@vitejs/plugin-react"
    import { defineConfig } from "vite"
    import tsconfigPaths from "vite-tsconfig-paths"
    
    // https://vitejs.dev/config/
    export default defineConfig({
      plugins: [react(), tsconfigPaths()],
    })

6

### [Enjoy!](#enjoy)

With the power of the snippets and the primitive components from Chakra UI, you can build your UI faster.

    import { Button, HStack } from "@chakra-ui/react"
    
    const Demo = () => {
      return (
        <HStack>
          <Button>Click me</Button>
          <Button>Click me</Button>
        </HStack>
      )
    }

[Previous\
\
Storybook](/docs/get-started/frameworks/storybook)
[Next\
\
Shadow DOM](/docs/get-started/environments/shadow-dom)

---

# useChart | Chakra UI

Build faster with Premium Chakra UI Components 💎

[Learn more](https://pro.chakra-ui.com?utm_source=chakra-ui.com)



useChart
========

Provides utilities to manage and format data for charts

The `useChart` hook provides a set of utilities to manage and format data for charts efficiently. It offers various helpers for:

*   aggregating the series data to compute values such as totals, minimums, maximums, and percentages
*   formatting **numbers and dates**
*   querying **color, size, and spacing** tokens

[Usage](#usage)

----------------

    import { useChart } from "@chakra-ui/charts"

    const chart = useChart({
      data: [\
        { date: "2024-01-01", revenue: 1000 },\
        { date: "2024-01-02", revenue: 2000 },\
        { date: "2024-01-03", revenue: 3000 },\
      ],
      series: [{ name: "revenue", color: "blue.500" }],
    })

[Series](#series)

------------------

### [`getKey`](#getkey)

Returns the key for a given series item. It's an identity function but provides a **typesafe** way to access the series data.

    const key = chart.getKey("revenue")

[Aggregation](#aggregation)

----------------------------

### [`getTotal`](#gettotal)

Computes the **total sum** of a given series across all entries.

    console.log(chart.getTotal("revenue")) // 6000

### [`getMin`](#getmin)

Finds the **minimum value** for a given key in the dataset.

    console.log(chart.getMin("revenue")) // 1000

### [`getMax`](#getmax)

Finds the **maximum value** for a given key in the dataset.

    console.log(chart.getMax("revenue")) // 3000

### [`getValuePercent`](#getvaluepercent)

Calculates **the percentage** of a value relative to the dataset or a given domain.

    const percentage = chart.getValuePercent("revenue", 5000)
    console.log(percentage) // 0.5

[Formatting](#formatting)

--------------------------

### [`formatNumber`](#formatnumber)

Formats numbers using the current locale from `EnvironmentProvider` and `Intl.NumberFormatOptions` provided.

    const format = chart.formatNumber({ style: "currency", currency: "USD" })
    console.log(format(1000)) // "$1,000.00"

### [`formatDate`](#formatdate)

Formats a date string based on **locale settings**.

    const formatDate = chart.formatDate({ year: "numeric", month: "short" })
    console.log(formatDate("2024-03-28")) // "Mar 2024"

[Design Tokens](#design-tokens)

--------------------------------

### [`color`](#color)

Retrieves a **Chakra UI color token**.

    const barColor = chart.color("blue.500") // var(--chakra-colors-blue-500)

### [`size`](#size)

Retrieves a **Chakra UI size token**.

    const chartSize = chart.size("4") // var(--chakra-sizes-4)

### [`spacing`](#spacing)

Retrieves a **Chakra UI spacing token**.

    const barColor = chart.color("blue.500") // var(--chakra-colors-blue-500)
    const chartPadding = chart.spacing("4") // var(--chakra-spacing-4)

[Sorting](#sorting)

--------------------

Automatically sorts the chart data based on a specified key and direction.

    const chart = useChart({
      data: [\
        { date: "2024-01-01", revenue: 1000 },\
        { date: "2024-01-02", revenue: 2000 },\
        { date: "2024-01-03", revenue: 3000 },\
      ],
      sort: { by: "date", direction: "asc" },
      series: [{ name: "revenue", color: "blue.500" }],
    })

[Highlighting](#highlighting)

------------------------------

When interacting with the chart legends, the series can be highlighted based on `click` or `hover` events. The `highlightedSeries` state is used to track which series is currently highlighted.

This is mostly useful when you have multiple series in the chart.

### [`highlightedSeries`](#highlightedseries)

Tracks which series is currently highlighted.

### [`setHighlightedSeries`](#sethighlightedseries)

Sets the highlighted series.

    chart.setHighlightedSeries("revenue")

### [`isHighlightedSeries`](#ishighlightedseries)

Checks if a series is highlighted.

    const isActive = chart.isHighlightedSeries("revenue")

[API Table](#api-table)

------------------------

| Helper | Purpose |
| --- | --- |
| `getSeries(item)` | Finds details of a series item |
| `getSeriesOpacity(name, fallback)` | Controls series opacity |
| `getTotal(key)` | Computes total sum of a key |
| `getMin(key)` | Gets minimum value for a key |
| `getMax(key)` | Gets maximum value for a key |
| `getValuePercent(key, value, domain)` | Calculates percentage of a value |
| `formatNumber(options)` | Formats numbers based on locale |
| `formatDate(options)` | Formats dates based on locale |
| `color(key)` | Retrieves Chakra UI color token |
| `size(key)` | Retrieves Chakra UI size token |
| `spacing(key)` | Retrieves Chakra UI spacing token |
| `data` | The resolved chart data |
| `highlightedSeries` | Tracks highlighted series |
| `setHighlightedSeries(name)` | Sets highlighted series |
| `isHighlightedSeries(name)` | Checks if a series is highlighted |

[Previous\
\
Installation](/docs/charts/installation)
[Next\
\
Axis (X and Y)](/docs/charts/axes)

---

# Using Chakra UI in Iframe | Chakra UI

Build faster with Premium Chakra UI Components 💎

[Learn more](https://pro.chakra-ui.com?utm_source=chakra-ui.com)



Using Chakra UI in Iframe
=========================

A guide for installing and using Chakra UI in an Iframe

Iframes are useful for isolating styles and logic in a separate context. For example, you might want to showcase a Chakra component in dedicated sandbox.

[Template](#template)

----------------------

Use the following template to get started quickly

[Iframe template](https://github.com/chakra-ui/chakra-ui/tree/main/sandbox/iframe)

[Installation](#installation)

------------------------------

The minimum node version required is Node.20.x

1

### [Install dependencies](#install-dependencies)

    npm i @chakra-ui/react @emotion/react @emotion/cache react-frame-component

The additional packages used are:

*   `react-frame-component` used to create an iframe easily
*   `@emotion/cache` used to create a custom insertion point for styles

2

### [Add snippets](#add-snippets)

Snippets are pre-built components that you can use to build your UI faster. Using the `@chakra-ui/cli` you can add snippets to your project.

    npx @chakra-ui/cli snippet add

3

### [Update tsconfig](#update-tsconfig)

If you're using TypeScript, you need to update the `compilerOptions` in the tsconfig file to include the following options:

    {
      "compilerOptions": {
        "module": "ESNext",
        "moduleResolution": "Bundler",
        "skipLibCheck": true,
        "paths": {
          "@/*": ["./src/*"]
        }
      }
    }

4

### [Setup Iframe](#setup-iframe)

Create a `components/ui/iframe-provider.tsx` file to setup the iframe using the `react-frame-component` package.

components/ui/iframe-provider.tsx

    import {
      ChakraProvider,
      EnvironmentProvider,
      defaultSystem,
    } from "@chakra-ui/react"
    import createCache from "@emotion/cache"
    import { CacheProvider } from "@emotion/react"
    import Iframe, { FrameContextConsumer } from "react-frame-component"
    
    function memoize<T extends object, R>(func: (arg: T) => R): (arg: T) => R {
      const cache = new WeakMap<T, R>()
      return (arg: T) => {
        if (cache.has(arg)) return cache.get(arg)!
        const ret = func(arg)
        cache.set(arg, ret)
        return ret
      }
    }
    
    const createCacheFn = memoize((container: HTMLElement) =>
      createCache({ container, key: "frame" }),
    )
    
    export const IframeProvider = (props: React.PropsWithChildren) => {
      const { children } = props
      return (
        <Iframe>
          <FrameContextConsumer>
            {(frame) => {
              const head = frame.document?.head
              if (!head) return null
              return (
                <CacheProvider value={createCacheFn(head)}>
                  <EnvironmentProvider value={() => head.ownerDocument}>
                    <ChakraProvider value={defaultSystem}>
                      {children}
                    </ChakraProvider>
                  </EnvironmentProvider>
                </CacheProvider>
              )
            }}
          </FrameContextConsumer>
        </Iframe>
      )
    }

5

### [Setup provider](#setup-provider)

Wrap your application with the `Provider` component generated in the `components/ui/provider` component at the root of your application.

This provider composes the following:

*   `ChakraProvider` from `@chakra-ui/react` for the styling system
*   `ThemeProvider` from `next-themes` for color mode

    import { Provider } from "@/components/ui/provider"
    import React from "react"
    import ReactDOM from "react-dom/client"
    import App from "./App"
    
    ReactDOM.createRoot(document.getElementById("root")!).render(
      <React.StrictMode>
        <Provider>
          <App />
        </Provider>
      </React.StrictMode>,
    )

6

### [Use the IframeProvider](#use-the-iframeprovider)

At any component in your application, wrap it with the `IframeProvider` component to render it inside the iframe.

src/App.tsx

    import { Button, Container, Heading, Stack } from "@chakra-ui/react"
    import { IframeProvider } from "./components/ui/iframe-provider"
    
    function App() {
      return (
        <Container py="8">
          <Heading mb="5">Outside Iframe</Heading>
    
          <IframeProvider>
            <Stack p="6" align="flex-start" border="1px solid red">
              <Heading>Inside Iframe</Heading>
              <Button>Click me</Button>
            </Stack>
          </IframeProvider>
        </Container>
      )
    }
    
    export default App

[Customization](#customization)

--------------------------------

If you created a custom theme using the `createSystem` function, ensure it's passed to the `IframeProvider` and `Provider` components to ensure it's used inside the iframe.

For example, let's say you created a custom theme:

    export const system = createSystem(defaultConfig, {
      theme: { colors: {} },
    })

Then, pass it to the `IframeProvider` and `Provider` components:

    <ChakraProvider value={system}>{/* ... */}</ChakraProvider>

[Previous\
\
Shadow DOM](/docs/get-started/environments/shadow-dom)
[Next\
\
Overview](/docs/components/concepts/overview)

---

# Chakra Factory | Chakra UI

Build faster with Premium Chakra UI Components 💎

[Learn more](https://pro.chakra-ui.com?utm_source=chakra-ui.com)



Chakra Factory
==============

Use the chakra factory to create supercharged components

[Overview](#overview)

----------------------

Chakra factory serves as a way to create supercharged JSX component from any HTML element to enable them receive JSX style props.

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

The chakra factory can be used in two ways: as a JSX element or as a factory function.

[JSX Element](#jsx-element)

----------------------------

Style props are CSS properties that you can pass as props to your components. With the JSX factory, you can use `chakra.<element>` syntax to create JSX elements that support style props.

    import { chakra } from "@chakra-ui/react"
    
    const Button = ({ children }) => (
      <chakra.button bg="blue.500" color="white" py="2" px="4" rounded="md">
        {children}
      </chakra.button>
    )

[Factory function](#factory-function)

--------------------------------------

Use the `chakra` function to convert native elements or custom components. The key requirement is that the component **must** accept `className` as props.

    const Link = chakra("a")
    
    function Example() {
      return <Link bg="red.200" href="https://chakra-ui.com" />
    }

Another example with a custom component.

    import * as RadixScrollArea from "@radix-ui/react-scroll-area"
    
    const ScrollArea = chakra(RadixScrollArea.Root)
    
    function Example() {
      return (
        <ScrollArea>
          <RadixScrollArea.Viewport>
            <div>Hello</div>
          </RadixScrollArea.Viewport>
        </ScrollArea>
      )
    }

### [Attaching styles](#attaching-styles)

Use the `chakra` function to attach styles or recipes to components.

    const Link = chakra("a", {
      base: {
        bg: "papayawhip",
        color: "red.500",
      },
    })
    
    // usage: <Link href="https://chakra-ui.com" />

### [Attaching recipes](#attaching-recipes)

Here's an example of attaching a recipe to the component.

    const Card = chakra("div", {
      base: {
        shadow: "lg",
        rounded: "lg",
        bg: "white",
      },
      variants: {
        variant: {
          outline: {
            border: "1px solid",
            borderColor: "red.500",
          },
          solid: {
            bg: "red.500",
            color: "white",
          },
        },
      },
    })
    
    // usage: <Card variant="outline" />

### [Forwarding props](#forwarding-props)

By default, the `chakra` factory only filters chakra related style props from getting to the DOM. For more fine-grained control of how props are forwarded, pass the `shouldForwardProp` option.

Here's an example that forwards all props that doesn't start with `$`

    function shouldForwardProp(prop: string) {
      return !prop.startsWith("$")
    }
    
    const Component = chakra("div", {}, { shouldForwardProp })

To create custom forward props logic, combine the [@emotion/is-prop-valid](https://github.com/emotion-js/emotion/tree/master/packages/is-prop-valid)
 package and the `isValidProperty` from Chakra UI.

    import { chakra, defaultSystem } from "@chakra-ui/react"
    import shouldForwardProp from "@emotion/is-prop-valid"
    
    const { isValidProperty } = defaultSystem
    
    function shouldForwardProp(prop: string, variantKeys: string[]) {
      const chakraSfp = !variantKeys?.includes(prop) && !isValidProperty(prop)
      return shouldForwardProp(prop) || chakraSfp
    }
    
    const Component = chakra("div", {}, { shouldForwardProp })

[Default Props](#default-props)

--------------------------------

Use the `defaultProps` option to pass default props to the component.

    const Button = chakra(
      "button",
      {
        base: {
          bg: "blue.500",
          color: "white",
        },
      },
      { defaultProps: { type: "button" } },
    )

[Polymorphism](#polymorphism)

------------------------------

Every component created with the chakra factory can accept the `as` and `asChild` props to change the underlying DOM element.

    <Button as="a" href="https://chakra-ui.com">
      Chakra UI
    </Button>

or

    <Button asChild>
      <a href="https://chakra-ui.com">Chakra UI</a>
    </Button>

Learn more about composition in Chakra UI [here](/docs/components/concepts/composition)

[Previous\
\
Overview](/docs/styling/overview)
[Next\
\
Responsive Design](/docs/styling/responsive-design)

---

# Axis | Chakra UI

Build faster with Premium Chakra UI Components 💎

[Learn more](https://pro.chakra-ui.com?utm_source=chakra-ui.com)



Axis
====

How to customize the axis of the charts component

This guide will show you how to customize the x and y axis of the charts component.

note

The charts component is built on top of [Recharts](https://recharts.org)
. For advanced usage, refer to their documentation.

[X-Axis](#x-axis)

------------------

### [Custom Tick Formatting](#custom-tick-formatting)

To format the labels on the X-axis (e.g., abbreviate months from `January` to `Jan` based on locale):

    <XAxis dataKey="date" tickFormatter={chart.formatDate({ month: "short" })} />

### [Rotate X-Axis Labels](#rotate-x-axis-labels)

If labels overlap, rotate them for better readability:

    <XAxis dataKey="name" angle={-45} textAnchor="end" />

### [Adjust X-Axis Padding](#adjust-x-axis-padding)

Control the spacing between the first and last tick labels:

    <XAxis dataKey="name" padding={{ left: 20, right: 20 }} />

### [Hide X-Axis](#hide-x-axis)

If you need to remove the X-axis completely:

    <XAxis hide />

### [Custom X-Axis Labels](#custom-x-axis-labels)

Render custom labels using a function:

    <XAxis dataKey="name" tick={{ fontSize: 12, fill: "blue" }} />

[Y-Axis](#y-axis)

------------------

### [Set Domain](#set-domain)

Define the minimum and maximum values manually:

    <YAxis domain={[0, "dataMax + 100"]} />

### [Format Labels](#format-labels)

For example, converting values to percentages:

    <YAxis tickFormatter={(value) => `${value}%`} />

### [Adjust Width](#adjust-width)

Control the space allocated to Y-axis labels:

    <YAxis width={50} />

### [Hide Y-Axis](#hide-y-axis)

To remove the Y-axis from the chart:

    <YAxis hide />

### [Custom Grid Lines](#custom-grid-lines)

Enable or remove grid lines tied to the Y-axis:

    <YAxis tickLine={false} axisLine={false} />

[Additional Customizations](#additional-customizations)

--------------------------------------------------------

### [Multiple X or Y Axes](#multiple-x-or-y-axes)

Overlay multiple axes in a single chart:

    <YAxis yAxisId="left" orientation="left" stroke="#8884d8" />
    <YAxis yAxisId="right" orientation="right" stroke="#82ca9d" />

### [Reference Lines](#reference-lines)

Highlight a specific value with a reference line:

    <ReferenceLine y={1000} stroke="red" label="Threshold" />

### [Axis Ticks and Lines](#axis-ticks-and-lines)

Remove the tick and axis lines by setting them to false.

    <XAxis tickLine={false} axisLine={false} />
    <YAxis tickLine={false} axisLine={false} />

[Previous\
\
useChart](/docs/charts/use-chart)
[Next\
\
Cartesian Grid](/docs/charts/cartesian-grid)

---

# Responsive Design | Chakra UI

Build faster with Premium Chakra UI Components 💎

[Learn more](https://pro.chakra-ui.com?utm_source=chakra-ui.com)



Responsive Design
=================

Learn how to create responsive designs using Chakra UI's built-in responsive style props

[Overview](#overview)

----------------------

Responsive design is a fundamental aspect of modern web development, allowing websites and applications to adapt seamlessly to different screen sizes and devices.

info

Chakra uses a mobile-first breakpoint system and leverages min-width media queries `@media(min-width)` when you write responsive styles.

Chakra provides five breakpoints by default:

    const breakpoints = {
      base: "0em", // 0px
      sm: "30em", // ~480px
      md: "48em", // ~768px
      lg: "62em", // ~992px
      xl: "80em", // ~1280px
      "2xl": "96em", // ~1536px
    }

[Object syntax](#object-syntax)

--------------------------------

Here's an example of how to change the font weight of a text on large screens

    <Text fontWeight="medium" lg={{ fontWeight: "bold" }}>
      Text
    </Text>

or use the prop based modifier

    <Text fontWeight={{ base: "medium", lg: "bold" }}>Text</Text>

[Array syntax](#array-syntax)

------------------------------

Chakra also accepts arrays as values for responsive styles. Pass the corresponding value for each breakpoint in the array. Using our previous code as an example:

    <Text fontWeight={["medium", undefined, undefined, "bold"]}>Text</Text>

Notice the use of `undefined` for the breakpoints to skip the `md` and `lg` breakpoints.

[Breakpoint targeting](#breakpoint-targeting)

----------------------------------------------

### [Breakpoint range](#breakpoint-range)

Chakra provides a way to target a range of breakpoints using the `To` notation. To apply styles between the `md` and `xl` breakpoints, use the `mdToXl` property:

    <Text fontWeight={{ mdToXl: "bold" }}>Text</Text>

This text will only be bold from `md` to `xl` breakpoints.

### [Only breakpoint](#only-breakpoint)

To target a single breakpoint, use the `Only` notation. Here's an example of how to apply styles only in the `lg` breakpoint, using the `lgOnly` property:

    <Text fontWeight={{ lgOnly: "bold" }}>Text</Text>

[Hiding elements at breakpoint](#hiding-elements-at-breakpoint)

----------------------------------------------------------------

Chakra provides the `hideFrom` and `hideBelow` utilities to hide elements at specific breakpoints.

To hide an element from the `md` breakpoint, use the `hideFrom` utility:

    <Stack hideFrom="md">
      <Text>This text will be hidden from the `md` breakpoint</Text>
    </Stack>

To hide an element below the `md` breakpoint, use the `hideBelow` utility:

    <Stack hideBelow="md">
      <Text>This text will be hidden below the `md` breakpoint</Text>
    </Stack>

[Customizing Breakpoints](#customizing-breakpoints)

----------------------------------------------------

To learn how to customize breakpoints, please refer to the [customizing breakpoints](/docs/theming/customization/breakpoints)
 section.

[FAQs](#faqs)

--------------

### [Why are breakpoints converted to `rem`?](#why-are-breakpoints-converted-to-rem)

The conversion to `rem` is intentional and beneficial for accessibility reasons:

*   User Changed Their Browser's Font Setting
*   User Zooms In
*   Font size Changed in HTML

Learn more here: [https://zellwk.com/blog/media-query-units/](https://zellwk.com/blog/media-query-units/)

[Previous\
\
Chakra Factory](/docs/styling/chakra-factory)
[Next\
\
CSS Variables](/docs/styling/css-variables)

---

# CSS Variables | Chakra UI

Build faster with Premium Chakra UI Components 💎

[Learn more](https://pro.chakra-ui.com?utm_source=chakra-ui.com)



CSS Variables
=============

Using token-aware CSS variables in Chakra UI

[Overview](#overview)

----------------------

CSS variables have become the defacto way to create shared values on the web. It's very useful to avoid prop interpolations, classname regeneration, and reduce runtime evaluation of token values.

[Examples](#examples)

----------------------

### [Basic](#basic)

Use the `css` prop to create css variables

    <Box css={{ "--font-size": "18px" }}>
      <h3 style={{ fontSize: "calc(var(--font-size) * 2)" }}>Hello</h3>
      <p style={{ fontSize: "var(--font-size)" }}>Hello</p>
    </Box>

### [Access tokens](#access-tokens)

Use the full token path to access tokens

    <Box css={{ "--color": "colors.red.500" }}>
      <p style={{ color: "var(--color)" }}>Hello</p>
    </Box>

Here's an example of how to access size tokens

    <Box css={{ "--size": "sizes.10" }}>
      <p style={{ width: "var(--size)", height: "var(--size)" }}>Hello</p>
    </Box>

### [Responsive Styles](#responsive-styles)

Use the responsive syntax to make css variables responsive

    <Box css={{ "--font-size": { base: "18px", lg: "24px" } }}>
      <h3 style={{ fontSize: "calc(var(--font-size) * 2)" }}>Hello</h3>
      <p style={{ fontSize: "var(--font-size)" }}>Hello</p>
    </Box>

### [Color Opacity Modifier](#color-opacity-modifier)

When accessing color tokens, you can use the opacity modifier to access the color with an opacity. The requirement is to use the `{}` syntax.

    <Box css={{ "--color": "{colors.red.500/40}" }}>
      <p style={{ color: "var(--color)" }}>Hello</p>
    </Box>

### [Virtual Color](#virtual-color)

Variables can point to a virtual color via the `colors.colorPalette.*` value. This is useful for creating theme components.

    <Box colorPalette="blue" css={{ "--color": "colors.colorPalette.400" }}>
      <p style={{ color: "var(--color)" }}>Hello</p>
    </Box>

[Previous\
\
Responsive Design](/docs/styling/responsive-design)
[Next\
\
Dark Mode](/docs/styling/dark-mode)

---

# Composition | Chakra UI

Build faster with Premium Chakra UI Components 💎

[Learn more](https://pro.chakra-ui.com?utm_source=chakra-ui.com)



Composition
===========

Learn how to compose components in Chakra UI.

[The `as` Prop](#the-as-prop)

------------------------------

Used to change the underlying HTML element that a React component renders. It provides a straightforward way to change the underlying element while retaining the component's functionality.

    <Heading as="h3">Hello, world!</Heading>

warning

**TypeScript:** The caveat with the `as` prop is that the types of the component passed to the `as` prop must be compatible with the component's props. We do not infer the underlying component's props from the `as` prop.

[The `asChild` Prop](#the-aschild-prop)

----------------------------------------

Used to compose a component's functionality onto its child element. This approach, inspired by [Radix UI](https://www.radix-ui.com/primitives/docs/utilities/slot)
, offers maximum flexibility.

    <Popover.Root>
      <Popover.Trigger asChild>
        <Button>Open</Button>
      </Popover.Trigger>
    </Popover.Root>

In this example, the `asChild` prop allows the `Button` to be used as the trigger for the popover.

[Best Practices](#best-practices)

----------------------------------

To avoid common pitfalls when using the `as` and `asChild` props, there are a few best practices to consider:

*   **Forward Refs:** Ensure that the underlying component forwards the ref passed to it properly.
*   **Spread Props:** Ensure that the underlying component spreads the props passed to it.

    const MyComponent = React.forwardRef((props, ref) => {
      return <Box ref={ref} {...props} />
    })
    
    // with `as` prop
    <MyComponent as="button" />
    
    // with `asChild` prop
    <Button asChild>
      <MyComponent> Click me </MyComponent>
    </Button>

[Previous\
\
Overview](/docs/components/concepts/overview)
[Next\
\
Animation](/docs/components/concepts/animation)

---

# Animation | Chakra UI

Build faster with Premium Chakra UI Components 💎

[Learn more](https://pro.chakra-ui.com?utm_source=chakra-ui.com)



Animation
=========

Using CSS animations to animate Chakra UI components

We recommend using CSS animations to animate your Chakra UI components. This approach is performant, straightforward and provides a lot of flexibility.

You can animate both the mounting and unmounting phases of your components with better control.

[Enter animation](#enter-animation)

------------------------------------

When a disclosure component (popover, dialog) is open, the `data-state` attribute is set to `open`. This maps to `data-state=open` and can be styled with `_open` pseudo prop.

    <Box
      data-state="open"
      _open={{
        animation: "fade-in 300ms ease-out",
      }}
    >
      This is open
    </Box>

Here's an example that uses keyframes to create a fade-in animation:

    @keyframes fade-in {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

[Exit animation](#exit-animation)

----------------------------------

When a disclosure component (popover, dialog) is closed, the `data-state` attribute is set to `closed`. This maps to `data-state=closed` and can be styled with `_closed` pseudo prop.

    <Box
      data-state="closed"
      _closed={{
        animation: "fadeOut 300ms ease-in",
      }}
    >
      This is closed
    </Box>

Here's an example that uses keyframes to create a fade-out animation:

    @keyframes fadeOut {
      from {
        opacity: 1;
      }
      to {
        opacity: 0;
      }
    }

[Composing animations](#composing-animations)

----------------------------------------------

Use the `animationName` prop to compose multiple animations together. This makes it easy to create complex animations with multiple keyframes.

    <Box
      data-state="open"
      _open={{
        animationName: "fade-in, scale-in",
        animationDuration: "300ms",
      }}
      _closed={{
        animationName: "fade-out, scale-out",
        animationDuration: "120ms",
      }}
    >
      This is a composed animation
    </Box>

[Previous\
\
Composition](/docs/components/concepts/composition)
[Next\
\
Color Mode](/docs/components/concepts/color-mode)

---

# Cartesian Grid | Chakra UI

Build faster with Premium Chakra UI Components 💎

[Learn more](https://pro.chakra-ui.com?utm_source=chakra-ui.com)



Cartesian Grid
==============

How to customize the cartesian grid of the charts component

This guide will show you how to customize the cartesian grid of the charts component.

note

The charts component is built on top of [Recharts](https://recharts.org)
. For advanced usage, refer to their documentation.

[Usage](#usage)

----------------

    import { CartesianGrid } from "recharts"

    <CartesianGrid />

This will render a default grid with light gray lines on both the X and Y axes.

[Customize Stroke](#customize-stroke)

--------------------------------------

Modify the appearance of the grid lines using `stroke`, `strokeDasharray`, and `opacity`

    <CartesianGrid stroke="#ccc" strokeDasharray="3 3" opacity={0.5} />

| Property | Description |
| --- | --- |
| `stroke` | Changes the grid line color (e.g., `#ddd`, `red`, etc.). |
| `strokeDasharray` | Defines the dash pattern (e.g., `5 5` for dashed lines). |
| `opacity` | Controls grid line transparency (0 to 1). |

[Show/Hide Grid Lines](#showhide-grid-lines)

---------------------------------------------

To control whether horizontal or vertical lines are displayed:

    <CartesianGrid vertical={false} horizontal={true} />

*   `vertical={false}` → Hides vertical grid lines
*   `horizontal={false}` → Hides horizontal grid lines
*   `horizontal={true}` and `vertical={true}` → Shows both (default behavior)

[Remove Grid Lines](#remove-grid-lines)

----------------------------------------

To remove the grid completely, simply omit the `CartesianGrid` component or explicitly hide both horizontal and vertical lines:

    <CartesianGrid horizontal={false} vertical={false} />

[Previous\
\
Axis (X and Y)](/docs/charts/axes)
[Next\
\
Area Chart](/docs/charts/area-chart)

---

# Dark Mode | Chakra UI

Build faster with Premium Chakra UI Components 💎

[Learn more](https://pro.chakra-ui.com?utm_source=chakra-ui.com)



Dark Mode
=========

Learn how to use dark mode in Chakra UI applications

Chakra relies on the `next-themes` library to provide dark mode support. During the installation process, the snippets required to get started are added to your project via the CLI.

[Setup](#setup)

----------------

If you haven't already, you can add the `next-themes` library to your project via the CLI.

    npx @chakra-ui/cli snippet add color-mode

The generated snippets consists of the following:

*   `ColorModeProvider`: composes the `next-themes` provider component
*   `useColorMode`: provides the current color mode and a function to toggle the color mode
*   `useColorModeValue`: returns the correct value based on the current color mode
*   `ColorModeButton`: can be used to toggle the color mode

[Usage](#usage)

----------------

Wrap your app with the `ColorModeProvider` and use the `useColorMode` hook to access and toggle the color mode.

    import { ColorModeProvider } from "@/components/ui/color-mode"
    import { ChakraProvider, defaultSystem } from "@chakra-ui/react"
    
    export default function Layout({ children }: { children: React.ReactNode }) {
      return (
        <ChakraProvider value={defaultSystem}>
          <ColorModeProvider>{children}</ColorModeProvider>
        </ChakraProvider>
      )
    }

### [Adding the dark mode toggle](#adding-the-dark-mode-toggle)

Use the `ColorModeButton` component to toggle the color mode.

    import { ColorModeButton } from "@/components/ui/color-mode"
    
    export default function Page({ children }: { children: React.ReactNode }) {
      return (
        <>
          <ColorModeButton />
          {children}
        </>
      )
    }

### [Styling dark mode](#styling-dark-mode)

Use the `_dark` condition to style components for dark mode.

    <Box bg={{ base: "white", _dark: "black" }}>
      <Text>Hello</Text>
    </Box>

or

    <Box bg="white" _dark={{ bg: "black" }}>
      <Text>Hello</Text>
    </Box>

[Using semantic tokens](#using-semantic-tokens)

------------------------------------------------

To reduce the amount of code you need to write, use semantic tokens to style components for dark mode. This ensures the light and dark mode styles are applied automatically and consistently.

Chakra provides a set of semantic tokens that you can use to style components for dark mode. Learn more about [semantic tokens](/docs/theming/semantic-tokens)
.

    <Box bg="bg.subtle">
      <Text>Hello</Text>
    </Box>

[Forcing dark mode](#forcing-dark-mode)

----------------------------------------

### [Element specific dark mode](#element-specific-dark-mode)

To force dark mode, set the `dark` className on any parent element, or the root element of your application.

    <Box bg="black" className="dark">
      <Box bg="bg.subtle">
        <Text>Hello</Text>
      </Box>
    </Box>

The same applied to forcing light mode, use the `light` className.

    <Box bg="white" className="light">
      <Box bg="bg.subtle">
        <Text>Hello</Text>
      </Box>
    </Box>

### [Page specific dark mode](#page-specific-dark-mode)

Use the `ColorModeProvider` component to set the dark mode for a page.

    <ColorModeProvider forcedTheme="dark">
      <Box bg="black" className="dark">
        <Box bg="bg.subtle">
          <Text>Hello</Text>
        </Box>
      </Box>
    </ColorModeProvider>

Follow this `next-themes` guide to learn more about [forcing color mode](https://github.com/pacocoursey/next-themes#force-page-to-a-theme)
.

[Previous\
\
CSS Variables](/docs/styling/css-variables)
[Next\
\
Color Opacity Modifier](/docs/styling/color-opacity-modifier)

---

# Color opacity modifier | Chakra UI

Build faster with Premium Chakra UI Components 💎

[Learn more](https://pro.chakra-ui.com?utm_source=chakra-ui.com)



Color opacity modifier
======================

How to dynamically set the opacity of a raw color or color token

Every color related style property can use the [`color-mix`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix)
 shortcut to apply opacity to a color.

[Syntax](#syntax)

------------------

The general syntax is `{color}/{opacity}`. For example: `bg="red.300/40"`.

[Usage](#usage)

----------------

    <Text bg="red.300/40" color="white">
      Hello World
    </Text>

This will generate something like this:

    .css-sxdf {
      --mix-background: color-mix(in srgb, var(--colors-red-300) 40%, transparent);
      background: var(--mix-background, var(--colors-red-300));
      color: var(--colors-white);
    }

### [CSS Variables](#css-variables)

This feature can be used in css variables as well. This is useful for creating one-off color token in a component.

The token reference syntax `{}` is required for this to work.

    <Box css={{ "--bg": "{colors.red.400/40}" }}>
      <Text>Hello World</Text>
      <Box bg="var(--bg)" />
    </Box>

[Previous\
\
Dark Mode](/docs/styling/dark-mode)
[Next\
\
Conditional Styles](/docs/styling/conditional-styles)

---

# Area Chart | Chakra UI

Build faster with Premium Chakra UI Components 💎

[Learn more](https://pro.chakra-ui.com?utm_source=chakra-ui.com)



Area Chart
==========

Used to display quantitative data by filling the area between the line and axis, showing trends and patterns over time

[Storybook](https://storybook.chakra-ui.com/?path=/story/charts-area-chart--basic)
[Recharts](https://recharts.org/en-US/api/AreaChart)

PreviewCode

    "use client"
    
    import { Chart, useChart } from "@chakra-ui/charts"
    import {
      Area,
      AreaChart,
      CartesianGrid,
      Legend,
      Tooltip,
      XAxis,
    } from "recharts"
    
    const Demo = () => {
      const chart = useChart({
        data: [\
          { windows: 186, mac: 80, linux: 120, month: "January" },\
          { windows: 165, mac: 95, linux: 110, month: "February" },\
          { windows: 190, mac: 87, linux: 125, month: "March" },\
          { windows: 195, mac: 88, linux: 130, month: "May" },\
          { windows: 182, mac: 98, linux: 122, month: "June" },\
          { windows: 175, mac: 90, linux: 115, month: "August" },\
          { windows: 180, mac: 86, linux: 124, month: "October" },\
          { windows: 185, mac: 91, linux: 126, month: "November" },\
        ],
        series: [\
          { name: "windows", color: "teal.solid" },\
          { name: "mac", color: "purple.solid" },\
          { name: "linux", color: "blue.solid" },\
        ],
      })
    
      return (
        <Chart.Root maxH="sm" chart={chart}>
          <AreaChart data={chart.data}>
            <CartesianGrid stroke={chart.color("border.muted")} vertical={false} />
            <XAxis
              axisLine={false}
              tickLine={false}
              dataKey={chart.key("month")}
              tickFormatter={(value) => value.slice(0, 3)}
            />
            <Tooltip
              cursor={false}
              animationDuration={100}
              content={<Chart.Tooltip />}
            />
            <Legend content={<Chart.Legend />} />
            {chart.series.map((item) => (
              <Area
                key={item.name}
                isAnimationActive={false}
                dataKey={chart.key(item.name)}
                fill={chart.color(item.color)}
                fillOpacity={0.2}
                stroke={chart.color(item.color)}
                stackId="a"
              />
            ))}
          </AreaChart>
        </Chart.Root>
      )
    }
    

[Usage](#usage)

----------------

    import { Chart, useChart } from "@chakra-ui/charts"
    import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts"

    <Chart.Root>
      <AreaChart>
        <CartesianGrid />
        <XAxis />
        <YAxis />
      </AreaChart>
    </Chart.Root>

[Examples](#examples)

----------------------

### [Value Axis](#value-axis)

Use the `YAxis` component from `recharts` to display the y-axis.

PreviewCode

    "use client"
    
    import { Chart, useChart } from "@chakra-ui/charts"
    import { Area, AreaChart, Tooltip, XAxis, YAxis } from "recharts"
    
    const Demo = () => {
      const chart = useChart({
        data: [\
          { windows: 186, mac: 80, linux: 120, month: "January" },\
          { windows: 165, mac: 95, linux: 110, month: "February" },\
          { windows: 190, mac: 87, linux: 125, month: "March" },\
          { windows: 195, mac: 88, linux: 130, month: "May" },\
          { windows: 182, mac: 98, linux: 122, month: "June" },\
          { windows: 175, mac: 90, linux: 115, month: "August" },\
          { windows: 180, mac: 86, linux: 124, month: "October" },\
          { windows: 185, mac: 91, linux: 126, month: "November" },\
        ],
        series: [\
          { name: "windows", color: "teal.solid" },\
          { name: "mac", color: "purple.solid" },\
          { name: "linux", color: "orange.solid" },\
        ],
      })
    
      return (
        <Chart.Root maxH="sm" chart={chart}>
          <AreaChart
            accessibilityLayer
            data={chart.data}
            margin={{ bottom: 24, left: 24 }}
          >
            <XAxis
              dataKey={chart.key("month")}
              tickMargin={8}
              tickFormatter={(value) => value.slice(0, 3)}
              stroke={chart.color("border")}
            />
            <YAxis stroke={chart.color("border")} />
            <Tooltip
              cursor={false}
              animationDuration={100}
              content={<Chart.Tooltip />}
            />
            {chart.series.map((item) => (
              <Area
                type="natural"
                key={item.name}
                isAnimationActive={false}
                dataKey={chart.key(item.name)}
                fill={chart.color(item.color)}
                fillOpacity={0.2}
                stroke={chart.color(item.color)}
                stackId="a"
              />
            ))}
          </AreaChart>
        </Chart.Root>
      )
    }
    

### [Dashed Area](#dashed-area)

Set the `strokeDasharray` prop to the `series` you want to display as a dashed line.

PreviewCode

    "use client"
    
    import { Chart, useChart } from "@chakra-ui/charts"
    import {
      Area,
      AreaChart,
      CartesianGrid,
      Legend,
      Tooltip,
      XAxis,
    } from "recharts"
    
    const Demo = () => {
      const chart = useChart({
        data: [\
          { windows: 186, mac: 80, linux: 120, month: "January" },\
          { windows: 165, mac: 95, linux: 110, month: "February" },\
          { windows: 190, mac: 87, linux: 125, month: "March" },\
          { windows: 195, mac: 88, linux: 130, month: "May" },\
          { windows: 182, mac: 98, linux: 122, month: "June" },\
          { windows: 175, mac: 90, linux: 115, month: "August" },\
          { windows: 180, mac: 86, linux: 124, month: "October" },\
          { windows: 185, mac: 91, linux: 126, month: "November" },\
        ],
        series: [\
          { name: "windows", color: "teal.solid", strokeDasharray: "5 3" },\
          { name: "mac", color: "orange.solid" },\
          { name: "linux", color: "blue.solid" },\
        ],
      })
    
      return (
        <Chart.Root maxH="sm" chart={chart}>
          <AreaChart data={chart.data}>
            <CartesianGrid stroke={chart.color("border.muted")} vertical={false} />
            <XAxis
              axisLine={false}
              tickLine={false}
              dataKey={chart.key("month")}
              tickFormatter={(value) => value.slice(0, 3)}
            />
            <Tooltip
              cursor={false}
              animationDuration={100}
              content={<Chart.Tooltip />}
            />
            <Legend content={<Chart.Legend />} />
            {chart.series.map((item) => (
              <Area
                key={item.name}
                isAnimationActive={false}
                dataKey={chart.key(item.name)}
                fill={chart.color(item.color)}
                fillOpacity={0.2}
                stroke={chart.color(item.color)}
                strokeWidth={2}
                strokeDasharray={item.strokeDasharray}
                stackId="a"
              />
            ))}
          </AreaChart>
        </Chart.Root>
      )
    }
    

### [Gradient Area](#gradient-area)

Use the `Chart.Gradient` component to create a gradient fill for the area.

**Note:** The `id` of the gradient must be unique and referenced in the `fill` prop of the `Area` component.

PreviewCode

    "use client"
    
    import { Chart, useChart } from "@chakra-ui/charts"
    import {
      Area,
      AreaChart,
      CartesianGrid,
      Legend,
      Tooltip,
      XAxis,
      YAxis,
    } from "recharts"
    
    const Demo = () => {
      const chart = useChart({
        data: [\
          { windows: 186, mac: 80, linux: 120, month: "January" },\
          { windows: 165, mac: 95, linux: 110, month: "February" },\
          { windows: 190, mac: 87, linux: 125, month: "March" },\
          { windows: 195, mac: 88, linux: 130, month: "May" },\
          { windows: 182, mac: 98, linux: 122, month: "June" },\
          { windows: 175, mac: 90, linux: 115, month: "August" },\
          { windows: 180, mac: 86, linux: 124, month: "October" },\
          { windows: 185, mac: 91, linux: 126, month: "November" },\
        ],
        series: [\
          { name: "windows", color: "teal.solid" },\
          { name: "mac", color: "purple.solid" },\
          { name: "linux", color: "blue.solid" },\
        ],
      })
    
      return (
        <Chart.Root maxH="sm" chart={chart}>
          <AreaChart data={chart.data}>
            <CartesianGrid
              stroke={chart.color("border")}
              vertical={false}
              strokeDasharray="3 3"
            />
            <XAxis
              dataKey={chart.key("month")}
              tickLine={false}
              axisLine={false}
              tickMargin={8}
              tickFormatter={(value) => value.slice(0, 3)}
            />
            <YAxis tickLine={false} axisLine={false} />
            <Tooltip
              cursor={false}
              animationDuration={100}
              content={<Chart.Tooltip />}
            />
            <Legend content={<Chart.Legend />} />
    
            {chart.series.map((item) => (
              <defs key={item.name}>
                <Chart.Gradient
                  id={`${item.name}-gradient`}
                  stops={[\
                    { offset: "0%", color: item.color, opacity: 0.3 },\
                    { offset: "100%", color: item.color, opacity: 0.05 },\
                  ]}
                />
              </defs>
            ))}
    
            {chart.series.map((item) => (
              <Area
                key={item.name}
                type="natural"
                isAnimationActive={false}
                dataKey={chart.key(item.name)}
                fill={`url(#${item.name}-gradient)`}
                stroke={chart.color(item.color)}
                strokeWidth={2}
                stackId="a"
              />
            ))}
          </AreaChart>
        </Chart.Root>
      )
    }
    

### [Fill With Value](#fill-with-value)

Use the `Chart.Gradient` component to create a gradient fill that changes from one color to another based on the value.

    <defs>
      <Chart.Gradient
        id="uv-gradient"
        stops={[\
          { offse: "0%", color: "teal.solid", opacity: 1 },\
          { offset: "100%", color: "red.solid", opacity: 1 },\
        ]}
      />
    </defs>

When the value is positive, it uses the first color, and when negative, it uses the second color.

PreviewCode

    "use client"
    
    import { Chart, useChart } from "@chakra-ui/charts"
    import { Area, AreaChart, CartesianGrid, Tooltip, XAxis, YAxis } from "recharts"
    
    const data = [\
      { name: "Product A", uv: 4000, pv: 2400, amt: 2400 },\
      { name: "Product B", uv: 3000, pv: 1398, amt: 2210 },\
      { name: "Product C", uv: -1000, pv: 9800, amt: 2290 },\
      { name: "Product D", uv: 500, pv: 3908, amt: 2000 },\
      { name: "Product E", uv: -2000, pv: 4800, amt: 2181 },\
      { name: "Product F", uv: -250, pv: 3800, amt: 2500 },\
      { name: "Product G", uv: 3490, pv: 4300, amt: 2100 },\
    ]
    
    const gradientOffset = () => {
      const max = Math.max(...data.map((i) => i.uv))
      const min = Math.min(...data.map((i) => i.uv))
      if (max <= 0) return 0
      if (min >= 0) return 1
      return max / (max - min)
    }
    
    const offset = gradientOffset()
    
    const Demo = () => {
      const chart = useChart({
        data,
        series: [\
          { name: "uv", color: "teal.solid" },\
          { name: "pv", color: "purple.solid" },\
        ],
      })
    
      return (
        <Chart.Root maxH="sm" chart={chart}>
          <AreaChart data={chart.data}>
            <CartesianGrid strokeDasharray="3 3" stroke={chart.color("border")} />
            <XAxis
              axisLine={false}
              tickLine={false}
              dataKey={chart.key("name")}
              tickFormatter={(value) => value.replace("Product ", "")}
            />
            <YAxis
              axisLine={false}
              tickLine={false}
              tickFormatter={chart.formatNumber({
                style: "currency",
                currency: "USD",
                currencyDisplay: "narrowSymbol",
                notation: "compact",
              })}
            />
            <Tooltip
              cursor={false}
              animationDuration={100}
              content={<Chart.Tooltip />}
            />
            <defs>
              <Chart.Gradient
                id="uv-gradient"
                stops={[\
                  { offset, color: "teal.solid", opacity: 1 },\
                  { offset, color: "red.solid", opacity: 1 },\
                ]}
              />
            </defs>
            <Area
              type="monotone"
              isAnimationActive={false}
              dataKey={chart.key("uv")}
              fill="url(#uv-gradient)"
              fillOpacity={0.2}
              stroke={chart.color("gray.solid")}
            />
          </AreaChart>
        </Chart.Root>
      )
    }
    

### [Percent](#percent)

To render the area chart as a percentage, with value normalized to 100%:

*   Set the `stackId` prop on the `Area` component to the same value
*   Set the `stackOffset` prop to `expand` on the `AreaChart` component
*   Format the y-axis via the `tickFormatter` prop to percentage format

PreviewCode

    "use client"
    
    import { Chart, useChart } from "@chakra-ui/charts"
    import {
      Area,
      AreaChart,
      CartesianGrid,
      Legend,
      Tooltip,
      XAxis,
      YAxis,
    } from "recharts"
    
    const Demo = () => {
      const chart = useChart({
        data: [\
          { windows: 186, mac: 80, linux: 120, month: "January" },\
          { windows: 165, mac: 95, linux: 110, month: "February" },\
          { windows: 190, mac: 87, linux: 125, month: "March" },\
          { windows: 195, mac: 88, linux: 130, month: "May" },\
          { windows: 182, mac: 98, linux: 122, month: "June" },\
          { windows: 175, mac: 90, linux: 115, month: "August" },\
          { windows: 180, mac: 86, linux: 124, month: "October" },\
          { windows: 185, mac: 91, linux: 126, month: "November" },\
        ],
        series: [\
          { name: "windows", color: "teal.solid" },\
          { name: "mac", color: "purple.solid" },\
          { name: "linux", color: "blue.solid" },\
        ],
      })
    
      return (
        <Chart.Root maxH="sm" chart={chart}>
          <AreaChart accessibilityLayer stackOffset="expand" data={chart.data}>
            <CartesianGrid stroke={chart.color("border")} vertical={false} />
            <XAxis
              dataKey={chart.key("month")}
              tickLine={false}
              axisLine={false}
              tickMargin={8}
              tickFormatter={(value) => value.slice(0, 3)}
            />
            <YAxis
              tickLine={false}
              axisLine={false}
              tickFormatter={chart.formatNumber({ style: "percent" })}
            />
            <Tooltip
              cursor={false}
              animationDuration={100}
              content={<Chart.Tooltip />}
            />
            <Legend content={<Chart.Legend />} />
            {chart.series.map((item) => (
              <Area
                key={item.name}
                isAnimationActive={false}
                dataKey={chart.key(item.name)}
                fill={chart.color(item.color)}
                fillOpacity={0.2}
                stroke={chart.color(item.color)}
                stackId="a"
              />
            ))}
          </AreaChart>
        </Chart.Root>
      )
    }
    

### [Dots](#dots)

Set the `dot` prop on the `Area` component to display dots that map to each data point.

    <Area dot={{ fill: "red", fillOpacity: 1 }} activeDot={false} />

PreviewCode

    "use client"
    
    import { Chart, useChart } from "@chakra-ui/charts"
    import {
      Area,
      AreaChart,
      CartesianGrid,
      Legend,
      Tooltip,
      XAxis,
      YAxis,
    } from "recharts"
    
    const Demo = () => {
      const chart = useChart({
        data: [\
          { windows: 186, mac: 80, linux: 120, month: "January" },\
          { windows: 165, mac: 95, linux: 110, month: "February" },\
          { windows: 190, mac: 87, linux: 125, month: "March" },\
          { windows: 195, mac: 88, linux: 130, month: "May" },\
          { windows: 182, mac: 98, linux: 122, month: "June" },\
          { windows: 175, mac: 90, linux: 349, month: "August" },\
          { windows: 180, mac: 86, linux: 400, month: "October" },\
          { windows: 185, mac: 91, linux: 126, month: "November" },\
        ],
        series: [\
          { name: "windows", color: "teal.solid" },\
          { name: "mac", color: "purple.solid" },\
          { name: "linux", color: "blue.solid" },\
        ],
      })
    
      return (
        <Chart.Root maxH="sm" chart={chart}>
          <AreaChart data={chart.data} margin={{ right: 20 }}>
            <CartesianGrid stroke={chart.color("border.muted")} vertical={false} />
            <YAxis stroke={chart.color("border")} axisLine={false} />
            <XAxis
              axisLine={false}
              tick={false}
              dataKey={chart.key("month")}
              tickFormatter={(value) => value.slice(0, 3)}
            />
            <Tooltip
              cursor={false}
              animationDuration={100}
              content={<Chart.Tooltip />}
            />
            <Legend content={<Chart.Legend />} />
    
            {chart.series.map((item) => (
              <Area
                key={item.name}
                isAnimationActive={false}
                dataKey={chart.key(item.name)}
                fill={chart.color(item.color)}
                fillOpacity={0.2}
                stroke={chart.color(item.color)}
                stackId="a"
              />
            ))}
    
            {chart.series.map((item) => (
              <Area
                isAnimationActive={false}
                stackId="b"
                legendType="none"
                tooltipType="none"
                key={item.name}
                dataKey={chart.key(item.name)}
                dot={{ fill: chart.color(item.color), fillOpacity: 1 }}
                activeDot={false}
                fill="none"
                stroke="none"
              />
            ))}
          </AreaChart>
        </Chart.Root>
      )
    }
    

### [Connect Nulls](#connect-nulls)

Pass the `connectNulls` prop to the `Area` component to connect data points even when there are `null` values in between. This is useful when you want to show a continuous line despite missing data points.

PreviewCode

<Area connectNulls={false} />
-----------------------------

<Area connectNulls={true} />
----------------------------

    "use client"
    
    import { Chart, useChart } from "@chakra-ui/charts"
    import { Box, For, Heading, SimpleGrid } from "@chakra-ui/react"
    import { Area, AreaChart, CartesianGrid, Tooltip, XAxis } from "recharts"
    
    const Demo = () => {
      const chart = useChart({
        data: [\
          { sales: 186, month: "January" },\
          { sales: null, month: "February" },\
          { sales: 190, month: "March" },\
          { sales: 195, month: "May" },\
          { sales: null, month: "June" },\
          { sales: 175, month: "August" },\
          { sales: 180, month: "October" },\
          { sales: 185, month: "November" },\
          { sales: 300, month: "December" },\
        ],
        series: [{ name: "sales", color: "teal.solid" }],
      })
    
      return (
        <SimpleGrid gap="10" minChildWidth="400px">
          <For each={["false", "true"]}>
            {(connectNulls) => (
              <Box key={connectNulls.toString()}>
                <Heading size="md" mb="4">
                  {`<Area connectNulls={${connectNulls.toString()}} />`}
                </Heading>
                <Chart.Root maxH="sm" chart={chart}>
                  <AreaChart data={chart.data}>
                    <CartesianGrid
                      stroke={chart.color("border.muted")}
                      vertical={false}
                    />
                    <XAxis
                      axisLine={false}
                      tickLine={false}
                      dataKey={chart.key("month")}
                      tickFormatter={(value) => value.slice(0, 3)}
                    />
                    <Tooltip
                      cursor={false}
                      animationDuration={100}
                      content={<Chart.Tooltip />}
                    />
                    {chart.series.map((item) => (
                      <Area
                        key={item.name}
                        isAnimationActive={false}
                        dataKey={chart.key(item.name)}
                        fill={chart.color(item.color)}
                        fillOpacity={0.2}
                        connectNulls={connectNulls === "true"}
                        stroke={chart.color(item.color)}
                        stackId="a"
                      />
                    ))}
                  </AreaChart>
                </Chart.Root>
              </Box>
            )}
          </For>
        </SimpleGrid>
      )
    }
    

### [Reference Line](#reference-line)

Use the `ReferenceLine` component from `recharts` to add a reference line to your chart. A reference line is useful when you want to highlight a specific value in the chart.

PreviewCode

    "use client"
    
    import { Chart, useChart } from "@chakra-ui/charts"
    import {
      Area,
      AreaChart,
      CartesianGrid,
      Legend,
      ReferenceLine,
      Tooltip,
      XAxis,
      YAxis,
    } from "recharts"
    
    const Demo = () => {
      const chart = useChart({
        data: [\
          { windows: 186, mac: 80, linux: 120, month: "January" },\
          { windows: 165, mac: 95, linux: 110, month: "February" },\
          { windows: 190, mac: 87, linux: 125, month: "March" },\
          { windows: 195, mac: 88, linux: 130, month: "May" },\
          { windows: 182, mac: 98, linux: 122, month: "June" },\
          { windows: 175, mac: 90, linux: 115, month: "August" },\
          { windows: 180, mac: 86, linux: 124, month: "October" },\
          { windows: 185, mac: 91, linux: 126, month: "November" },\
        ],
        series: [\
          { name: "windows", color: "teal.solid" },\
          { name: "mac", color: "purple.solid" },\
          { name: "linux", color: "blue.solid" },\
        ],
      })
    
      return (
        <Chart.Root maxH="sm" chart={chart}>
          <AreaChart data={chart.data}>
            <CartesianGrid stroke={chart.color("border.muted")} vertical={false} />
            <YAxis stroke={chart.color("border")} />
            <XAxis
              axisLine={false}
              tickLine={false}
              dataKey={chart.key("month")}
              tickFormatter={(value) => value.slice(0, 3)}
            />
            <Tooltip
              cursor={false}
              animationDuration={100}
              content={<Chart.Tooltip />}
            />
            <Legend content={<Chart.Legend />} />
            <ReferenceLine
              x="August"
              label={{
                value: "Black Friday",
                position: "insideTopRight",
                style: { fill: chart.color("red.fg"), fontWeight: "500" },
              }}
              stroke={chart.color("red.solid")}
            />
            {chart.series.map((item) => (
              <Area
                key={item.name}
                isAnimationActive={false}
                dataKey={chart.key(item.name)}
                fill={chart.color(item.color)}
                fillOpacity={0.2}
                stroke={chart.color(item.color)}
                stackId="a"
              />
            ))}
          </AreaChart>
        </Chart.Root>
      )
    }
    

### [Reference Area](#reference-area)

Use the `ReferenceArea` component from `recharts` to add a reference area to your chart. A reference area is useful when you want to highlight a specific range in the chart.

PreviewCode

    "use client"
    
    import { Chart, useChart } from "@chakra-ui/charts"
    import {
      Area,
      AreaChart,
      CartesianGrid,
      Legend,
      ReferenceArea,
      ReferenceLine,
      Tooltip,
      XAxis,
      YAxis,
    } from "recharts"
    
    const Demo = () => {
      const chart = useChart({
        data: [\
          { windows: 186, mac: 80, linux: 120, month: "January" },\
          { windows: 165, mac: 95, linux: 110, month: "February" },\
          { windows: 190, mac: 87, linux: 125, month: "March" },\
          { windows: 195, mac: 88, linux: 130, month: "May" },\
          { windows: 182, mac: 98, linux: 122, month: "June" },\
          { windows: 175, mac: 90, linux: 115, month: "August" },\
          { windows: 180, mac: 86, linux: 124, month: "October" },\
          { windows: 185, mac: 91, linux: 126, month: "November" },\
        ],
        series: [\
          { name: "windows", color: "teal.solid" },\
          { name: "mac", color: "purple.solid" },\
          { name: "linux", color: "blue.solid" },\
        ],
      })
    
      return (
        <Chart.Root maxH="sm" chart={chart}>
          <AreaChart data={chart.data}>
            <CartesianGrid stroke={chart.color("border.muted")} vertical={false} />
            <YAxis stroke={chart.color("border")} />
            <XAxis
              axisLine={false}
              tickLine={false}
              dataKey={chart.key("month")}
              tickFormatter={(value) => value.slice(0, 3)}
              ticks={["February", "June"]}
            />
            <Tooltip
              cursor={false}
              animationDuration={100}
              content={<Chart.Tooltip />}
            />
            <Legend content={<Chart.Legend />} />
            <ReferenceLine x="February" stroke={chart.color("red.solid")} />
            <ReferenceLine x="June" stroke={chart.color("red.solid")} />
            <ReferenceArea
              x1="February"
              x2="June"
              fill={chart.color("red.solid")}
              label={{
                position: "insideTop",
                value: "Feb - June '24",
                style: { fill: chart.color("red.fg") },
              }}
              fillOpacity={0.2}
            />
            {chart.series.map((item) => (
              <Area
                key={item.name}
                isAnimationActive={false}
                dataKey={chart.key(item.name)}
                fill={chart.color(item.color)}
                fillOpacity={0.2}
                stroke={chart.color(item.color)}
                stackId="a"
              />
            ))}
          </AreaChart>
        </Chart.Root>
      )
    }
    

### [Area Types](#area-types)

Recharts provides flexible support for various kinds of area charts.

Below are the different types of area charts you can create:

<Area type="linear" />

<Area type="bump" />

<Area type="basis" />

<Area type="step" />

<Area type="stepBefore" />

<Area type="stepAfter" />

<Area type="natural" />

<Area type="monotone" />

[Previous\
\
Cartesian Grid](/docs/charts/cartesian-grid)
[Next\
\
Bar Chart](/docs/charts/bar-chart)

---

# Conditional Styles | Chakra UI

Build faster with Premium Chakra UI Components 💎

[Learn more](https://pro.chakra-ui.com?utm_source=chakra-ui.com)



Conditional Styles
==================

Learn how to use conditional and responsive styles in Chakra.

[Overview](#overview)

----------------------

Chakra allows you to write styles for pseudo states, media queries, and custom data attributes with the conditional style props.

note

See the list of [built-in conditions](#reference)
 below.

[Usage](#usage)

----------------

For example, here's how to change the background color of a button when it's hovered:

    <Box bg="red.500" _hover={{ bg: "red.700" }}>
      Hover me
    </Box>

### [Nested condition](#nested-condition)

Conditional values can be nested to create complex selector rules.

Here's how to change the background color of an element when in focus on hover:

    <Box bg={{ base: "red.500", _hover: { _focus: "red.700" } }}>
      Hover & Focus me
    </Box>

### [At Rules](#at-rules)

This also works with the supported at-rules (`@media`, `@layer`, `@container`, `@supports`, and `@page`):

    <Box
      css={{
        "@container (min-width: 10px)": {
          color: "green.300",
        },
      }}
    >
      Hello
    </Box>

[Pseudo Classes](#pseudo-classes)

----------------------------------

### [Hover, Active, Focus, and Disabled](#hover-active-focus-and-disabled)

Here's an example of how to style the hover, active, focus, and disabled states of an element

    <chakra.button
      _hover={{ bg: "red.700" }}
      _active={{ bg: "red.900" }}
      _focus={{ bg: "red.800" }}
      _disabled={{ opacity: "0.5" }}
    >
      Hover me > Hover me
    </chakra.button>

### [First, Last, Odd, Even](#first-last-odd-even)

Here's an example of how to style the first, last, odd, and even elements in a list

    <Box as="ul">
      {items.map((item) => (
        <Box
          as="li"
          key={item}
          _first={{ color: "red.500" }}
          _last={{ color: "red.800" }}
        >
          {item}
        </Box>
      ))}
    </Box>

You can also style even and odd elements using the `_even` and `_odd` modifier

    <table>
      <tbody>
        {items.map((item) => (
          <chakra.tr key={item} _even={{ bg: "gray.100" }} _odd={{ bg: "white" }}>
            <td>{item}</td>
          </chakra.tr>
        ))}
      </tbody>
    </table>

[Pseudo Elements](#pseudo-elements)

------------------------------------

### [Before and After](#before-and-after)

To style the `::before` and `::after` pseudo elements of an element, use the `_before` and `_after` modifiers

    <Box _before={{ content: '"👋"' }} _after={{ content: '"🥂"' }}>
      Hello
    </Box>

### [Placeholder](#placeholder)

To style the placeholder text of any input or textarea, use the `_placeholder` modifier:

    <chakra.input
      placeholder="Enter your name"
      _placeholder={{ color: "gray.500" }}
    />

### [File Inputs](#file-inputs)

To style the file input button, use the `_file` modifier:

    <chakra.input
      type="file"
      _file={{ bg: "gray.500", px: "4", py: "2", marginEnd: "3" }}
    />

[Media Queries](#media-queries)

--------------------------------

### [Reduced Motion](#reduced-motion)

Use the `_motionReduce` and `_motionSafe` modifiers to style an element based on the user's motion preference:

    <Box _motionSafe={{ transition: "all 0.3s" }}>Hello</Box>

### [Color Scheme](#color-scheme)

The `prefers-color-scheme` media feature is used to detect if the user has requested the system to use a light or dark color theme.

Use the `_osLight` and `_osDark` modifiers to style an element based on the user's color scheme preference:

    <chakra.div bg={{ base: "white", _osDark: "black" }}>Hello</chakra.div>

### [Color Contrast](#color-contrast)

The `prefers-contrast` media feature is used to detect if the user has requested the system use a high or low contrast theme.

Use the `_highContrast` and `_lessContrast` modifiers to style an element based on the user's color contrast preference:

    <Box bg={{ base: "white", _highContrast: "black" }}>Hello</Box>

### [Orientation](#orientation)

The `orientation` media feature is used to detect if the user has a device in portrait or landscape mode.

Use the `_portrait` and `_landscape` modifiers to style an element based on the user's device orientation:

    <Box pb="4" _portrait={{ pb: "8" }}>
      Hello
    </Box>

[Selectors](#selectors)

------------------------

### [Arbitrary selectors](#arbitrary-selectors)

For arbitrary, use the `css` prop to write styles for one-off selectors:

    <Box css={{ "&[data-state=closed]": { color: "red.300" } }} />

Here's another example that targets the child elements of a parent element:

    <Box
      css={{
        "& > *": { margin: "2" },
      }}
    />

### [Group Selectors](#group-selectors)

To style an element based on its parent element's state or attribute, add the `group` class to the parent element, and use any of the `_group*` modifiers on the child element.

    <div className="group">
      <Text _groupHover={{ bg: "red.500" }}>Hover me</Text>
    </div>

This modifier works for every pseudo class modifiers like `_groupHover`, `_groupActive`, `_groupFocus`, and `_groupDisabled`, etc.

### [Sibling Selectors](#sibling-selectors)

To style an element based on its sibling element's state or attribute, add the `peer` class to the sibling element, and use any of the `_peer*` modifiers on the target element.

    <div>
      <p className="peer">Hover me</p>
      <Box _peerHover={{ bg: "red.500" }}>I'll change by bg</Box>
    </div>

**Note:** This only works for when the element marked with `peer` is a previous siblings, that is, it comes before the element you want to start.

[Data Attribute](#data-attribute)

----------------------------------

### [LTR and RTL](#ltr-and-rtl)

To style an element based on the direction of the text, use the `_ltr` and `_rtl` modifiers

    <div dir="ltr">
      <Box _ltr={{ ml: "3" }} _rtl={{ mr: "3" }}>
        Hello
      </Box>
    </div>

### [State](#state)

To style an element based on its `data-{state}` attribute, use the corresponding `_{state}` modifier

    <Box data-loading _loading={{ bg: "gray.500" }}>
      Hello
    </Box>

This works for common states like `data-active`, `data-disabled`, `data-focus`, `data-hover`, `data-invalid`, `data-required`, and `data-valid`.

    <Box data-active _active={{ bg: "gray.500" }}>
      Hello
    </Box>

### [Orientation](#orientation-1)

To style an element based on its `data-orientation` attribute, use the `_horizontal` and `_vertical` modifiers

    <Box
      data-orientation="horizontal"
      _horizontal={{ bg: "red.500" }}
      _vertical={{ bg: "blue.500" }}
    >
      Hello
    </Box>

[ARIA Attribute](#aria-attribute)

----------------------------------

To style an element based on its `aria-{state}=true` attribute, use the corresponding `_{state}` prop

    <Box aria-expanded="true" _expanded={{ bg: "gray.500" }}>
      Hello
    </Box>

[Reference](#reference)

------------------------

Here's a list of all the condition props you can use in Chakra:

| Condition name | Selector |
| --- | --- |
| `_hover` | `@media (hover: hover)&:is(:hover, [data-hover]):not(:disabled, [data-disabled])` |
| `_active` | `&:is(:active, [data-active]):not(:disabled, [data-disabled], [data-state=open])` |
| `_focus` | `&:is(:focus, [data-focus])` |
| `_focusWithin` | `&:is(:focus-within, [data-focus-within])` |
| `_focusVisible` | `&:is(:focus-visible, [data-focus-visible])` |
| `_disabled` | `&:is(:disabled, [disabled], [data-disabled], [aria-disabled=true])` |
| `_visited` | `&:visited` |
| `_target` | `&:target` |
| `_readOnly` | `&:is([data-readonly], [aria-readonly=true], [readonly])` |
| `_readWrite` | `&:read-write` |
| `_empty` | `&:is(:empty, [data-empty])` |
| `_checked` | `&:is(:checked, [data-checked], [aria-checked=true], [data-state=checked])` |
| `_enabled` | `&:enabled` |
| `_expanded` | `&:is([aria-expanded=true], [data-expanded], [data-state=expanded])` |
| `_highlighted` | `&[data-highlighted]` |
| `_complete` | `&[data-complete]` |
| `_incomplete` | `&[data-incomplete]` |
| `_dragging` | `&[data-dragging]` |
| `_before` | `&::before` |
| `_after` | `&::after` |
| `_firstLetter` | `&::first-letter` |
| `_firstLine` | `&::first-line` |
| `_marker` | `&::marker` |
| `_selection` | `&::selection` |
| `_file` | `&::file-selector-button` |
| `_backdrop` | `&::backdrop` |
| `_first` | `&:first-of-type` |
| `_last` | `&:last-of-type` |
| `_notFirst` | `&:not(:first-of-type)` |
| `_notLast` | `&:not(:last-of-type)` |
| `_only` | `&:only-child` |
| `_even` | `&:nth-of-type(even)` |
| `_odd` | `&:nth-of-type(odd)` |
| `_peerFocus` | `.peer:is(:focus, [data-focus]) ~ &` |
| `_peerHover` | `.peer:is(:hover, [data-hover]):not(:disabled, [data-disabled]) ~ &` |
| `_peerActive` | `.peer:is(:active, [data-active]):not(:disabled, [data-disabled]) ~ &` |
| `_peerFocusWithin` | `.peer:focus-within ~ &` |
| `_peerFocusVisible` | `.peer:is(:focus-visible, [data-focus-visible]) ~ &` |
| `_peerDisabled` | `.peer:is(:disabled, [disabled], [data-disabled]) ~ &` |
| `_peerChecked` | `.peer:is(:checked, [data-checked], [aria-checked=true], [data-state=checked]) ~ &` |
| `_peerInvalid` | `.peer:is(:invalid, [data-invalid], [aria-invalid=true]) ~ &` |
| `_peerExpanded` | `.peer:is([aria-expanded=true], [data-expanded], [data-state=expanded]) ~ &` |
| `_peerPlaceholderShown` | `.peer:placeholder-shown ~ &` |
| `_groupFocus` | `.group:is(:focus, [data-focus]) &` |
| `_groupHover` | `.group:is(:hover, [data-hover]):not(:disabled, [data-disabled]) &` |
| `_groupActive` | `.group:is(:active, [data-active]):not(:disabled, [data-disabled]) &` |
| `_groupFocusWithin` | `.group:focus-within &` |
| `_groupFocusVisible` | `.group:is(:focus-visible, [data-focus-visible]) &` |
| `_groupDisabled` | `.group:is(:disabled, [disabled], [data-disabled]) &` |
| `_groupChecked` | `.group:is(:checked, [data-checked], [aria-checked=true], [data-state=checked]) &` |
| `_groupExpanded` | `.group:is([aria-expanded=true], [data-expanded], [data-state=expanded]) &` |
| `_groupInvalid` | `.group:invalid &` |
| `_indeterminate` | `&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state=indeterminate])` |
| `_required` | `&:is([data-required], [aria-required=true])` |
| `_valid` | `&:is([data-valid], [data-state=valid])` |
| `_invalid` | `&:is([data-invalid], [aria-invalid=true], [data-state=invalid])` |
| `_autofill` | `&:autofill` |
| `_inRange` | `&:is(:in-range, [data-in-range])` |
| `_outOfRange` | `&:is(:out-of-range, [data-outside-range])` |
| `_placeholder` | `&::placeholder, &[data-placeholder]` |
| `_placeholderShown` | `&:is(:placeholder-shown, [data-placeholder-shown])` |
| `_pressed` | `&:is([aria-pressed=true], [data-pressed])` |
| `_selected` | `&:is([aria-selected=true], [data-selected])` |
| `_grabbed` | `&:is([aria-grabbed=true], [data-grabbed])` |
| `_underValue` | `&[data-state=under-value]` |
| `_overValue` | `&[data-state=over-value]` |
| `_atValue` | `&[data-state=at-value]` |
| `_default` | `&:default` |
| `_optional` | `&:optional` |
| `_open` | `&:is([open], [data-open], [data-state=open])` |
| `_closed` | `&:is([closed], [data-closed], [data-state=closed])` |
| `_fullscreen` | `&is(:fullscreen, [data-fullscreen])` |
| `_loading` | `&:is([data-loading], [aria-busy=true])` |
| `_hidden` | `&:is([hidden], [data-hidden])` |
| `_current` | `&[data-current]` |
| `_currentPage` | `&[aria-current=page]` |
| `_currentStep` | `&[aria-current=step]` |
| `_today` | `&[data-today]` |
| `_unavailable` | `&[data-unavailable]` |
| `_rangeStart` | `&[data-range-start]` |
| `_rangeEnd` | `&[data-range-end]` |
| `_now` | `&[data-now]` |
| `_topmost` | `&[data-topmost]` |
| `_motionReduce` | `@media (prefers-reduced-motion: reduce)` |
| `_motionSafe` | `@media (prefers-reduced-motion: no-preference)` |
| `_print` | `@media print` |
| `_landscape` | `@media (orientation: landscape)` |
| `_portrait` | `@media (orientation: portrait)` |
| `_dark` | `.dark &, .dark .chakra-theme:not(.light) &` |
| `_light` | `:root &, .light &` |
| `_osDark` | `@media (prefers-color-scheme: dark)` |
| `_osLight` | `@media (prefers-color-scheme: light)` |
| `_highContrast` | `@media (forced-colors: active)` |
| `_lessContrast` | `@media (prefers-contrast: less)` |
| `_moreContrast` | `@media (prefers-contrast: more)` |
| `_ltr` | `[dir=ltr] &` |
| `_rtl` | `[dir=rtl] &` |
| `_scrollbar` | `&::-webkit-scrollbar` |
| `_scrollbarThumb` | `&::-webkit-scrollbar-thumb` |
| `_scrollbarTrack` | `&::-webkit-scrollbar-track` |
| `_horizontal` | `&[data-orientation=horizontal]` |
| `_vertical` | `&[data-orientation=vertical]` |
| `_icon` | `& :where(svg)` |
| `_starting` | `@starting-style` |

[Customization](#customization)

--------------------------------

Chakra lets you create your own conditions, so you're not limited to the ones in the default preset. Learn more about customizing conditions [here](/docs/theming/customization/conditions)
.

[Previous\
\
Color Opacity Modifier](/docs/styling/color-opacity-modifier)
[Next\
\
Virtual Color](/docs/styling/virtual-color)

---