# Chakra Ui

> This is the full developer documentation for Chakra UI v3.

## Pages

- [Chakra Ui Documentation](chakra-ui-documentation.md)
- [Area Chart](area-chart.md): "use client"
- [Axis](axis.md): This guide will show you how to customize the x and y axis of the charts
- [Bar Chart](bar-chart.md): "use client"
- [Bar List](bar-list.md): "use client"
- [Bar Segment](bar-segment.md): "use client"
- [Cartesian Grid](cartesian-grid.md): This guide will show you how to customize the cartesian grid of the charts
- [Donut Chart](donut-chart.md): "use client"
- [Charts](charts.md): title="Chakra UI Charts Dashboard"
- [Legend](legend.md): The charts component is built on top of [Recharts](https://recharts.org), so you
- [Line Chart](line-chart.md): "use client"
- [Pie Chart](pie-chart.md): "use client"
- [Radar Chart](radar-chart.md): "use client"
- [Scatter Chart](scatter-chart.md): "use client"
- [Sparkline](sparkline.md): "use client"
- [Tooltip](tooltip.md): The charts component is built on top of [Recharts](https://recharts.org), so you
- [useChart](usechart.md): The`useChart`hook provides a set of utilities to manage and format data for
- [CLI](cli.md): The Chakra UI CLI can be used to generate typings for your custom theme tokens,
- [Watch for changes and rebuild](watch-for-changes-and-rebuild.md): chakra typegen src/theme.ts --watch
- [Generate strict types for props variant and size](generate-strict-types-for-props-variant-and-size.md): chakra typegen src/theme.ts --strict
- [Add a specific snippet](add-a-specific-snippet.md): chakra snippet add button
- [Specify a custom directory](specify-a-custom-directory.md): chakra snippet add dialog --outdir ./components/custom
- [Add all variants of a specific block](add-all-variants-of-a-specific-block.md): chakra blocks add hero
- [Add a specific variant of a block](add-a-specific-variant-of-a-block.md): chakra blocks add hero --variant "simple"
- [List blocks in a specific category](list-blocks-in-a-specific-category.md): chakra blocks list --category "marketing"
- [Preview blocks without downloading](preview-blocks-without-downloading.md): chakra blocks add --dry-run --category "marketing"
- [Specify output directory](specify-output-directory.md): chakra blocks add --outdir ./components/blocks
- [Copy the tokens and recipes to your project](copy-the-tokens-and-recipes-to-your-project.md): chakra eject --outdir src/theme
- [Contributing to Chakra UI](contributing-to-chakra-ui.md): Thanks for showing interest to contribute to Chakra UI 💖, you rock!
- [Figma](figma.md): The official
- [Installation](installation.md): Chakra UI works in your favorite framework. We've put together step-by-step
- [Migration to v3](migration-to-v3.md): :::warning
- [AbsoluteCenter](absolutecenter.md): import { AbsoluteCenter, Box } from "@chakra-ui/react"
- [Accordion](accordion.md): import { Accordion, Span } from "@chakra-ui/react"
- [Action Bar](action-bar.md): "use client"
- [Alert](alert.md): import { Alert } from "@chakra-ui/react"
- [Aspect Ratio](aspect-ratio.md): import { AspectRatio, Center } from "@chakra-ui/react"
- [Avatar](avatar.md): import { Avatar } from "@chakra-ui/react"
- [Badge](badge.md): import { Badge, Stack } from "@chakra-ui/react"
- [Bleed](bleed.md): import { Bleed, Box, Heading, Stack, Text } from "@chakra-ui/react"
- [Blockquote](blockquote.md): import { Blockquote } from "@chakra-ui/react"
- [Box](box.md): import { Box } from "@chakra-ui/react"
- [Breadcrumb](breadcrumb.md): import { Breadcrumb } from "@chakra-ui/react"
- [Button](button.md): import { Button } from "@chakra-ui/react"
- [Card](card.md): import { Avatar, Button, Card } from "@chakra-ui/react"
- [Carousel](carousel.md): import { Carousel, IconButton } from "@chakra-ui/react"
- [Center](center.md): import { Box, Center } from "@chakra-ui/react"
- [Checkbox Card](checkbox-card.md): import { CheckboxCard } from "@chakra-ui/react"
- [Checkbox](checkbox.md): import { Checkbox } from "@chakra-ui/react"
- [Checkmark](checkmark.md): import { Checkmark, Stack } from "@chakra-ui/react"
- [Client Only](client-only.md): import { ClientOnly, Skeleton } from "@chakra-ui/react"
- [Clipboard](clipboard.md): import { Clipboard, IconButton } from "@chakra-ui/react"
- [Close Button](close-button.md): import { CloseButton } from "@chakra-ui/react"
- [Code Block](code-block.md): "use client"
- [Create a Github instance using an access token](create-a-github-instance-using-an-access-token.md): g = Github("YOUR_ACCESS_TOKEN")
- [Get a repository](get-a-repository.md): repo = g.get_repo("octocat/Hello-World")
- [Get repository information](get-repository-information.md): print(f"Repository: {repo.name}")
- [List issues](list-issues.md): issues = repo.get_issues(state='open')
- [Code](code.md): import { Code } from "@chakra-ui/react"
- [Collapsible](collapsible.md): import { Box, Collapsible } from "@chakra-ui/react"
- [Color Picker](color-picker.md): "use client"
- [Color Swatch](color-swatch.md): import { ColorSwatch } from "@chakra-ui/react"
- [Combobox](combobox.md): "use client"
- [Container](container.md): import { Container } from "@chakra-ui/react"
- [DataList](datalist.md): import { DataList } from "@chakra-ui/react"
- [Dialog](dialog.md): import { Button, CloseButton, Dialog, Portal } from "@chakra-ui/react"
- [Download Trigger](download-trigger.md): import { Button, DownloadTrigger } from "@chakra-ui/react"
- [Drawer](drawer.md): import { Button, CloseButton, Drawer, Portal } from "@chakra-ui/react"
- [Editable](editable.md): import { Editable } from "@chakra-ui/react"
- [Em](em.md): import { Em, Text } from "@chakra-ui/react"
- [Empty State](empty-state.md): import { EmptyState, VStack } from "@chakra-ui/react"
- [Environment Provider](environment-provider.md): We use
- [Field](field.md): import { Field, Input } from "@chakra-ui/react"
- [Fieldset](fieldset.md): import {
- [File Upload](file-upload.md): import { Button, FileUpload } from "@chakra-ui/react"
- [Flex](flex.md): import { Flex } from "@chakra-ui/react"
- [Float](float.md): import { Box, Circle, Float } from "@chakra-ui/react"
- [For](for.md): import { For } from "@chakra-ui/react"
- [Format Byte](format-byte.md): import { FormatByte, Text } from "@chakra-ui/react"
- [Format Number](format-number.md): import { FormatNumber, Text } from "@chakra-ui/react"
- [Grid](grid.md): import { Grid } from "@chakra-ui/react"
- [Group](group.md): import { Group } from "@chakra-ui/react"
- [Heading](heading.md): import { Heading } from "@chakra-ui/react"
- [Highlight](highlight.md): import { Highlight } from "@chakra-ui/react"
- [Hover Card](hover-card.md): import {
- [Icon Button](icon-button.md): import { IconButton } from "@chakra-ui/react"
- [Icon](icon.md): import { Icon } from "@chakra-ui/react"
- [Image](image.md): import { Image } from "@chakra-ui/react"
- [Input](input.md): import { Input } from "@chakra-ui/react"
- [Kbd](kbd.md): import { Kbd } from "@chakra-ui/react"
- [Link Overlay](link-overlay.md): import { Heading, Link, LinkOverlay, Stack, Text } from "@chakra-ui/react"
- [Link](link.md): import { Link } from "@chakra-ui/react"
- [List](list.md): import { List } from "@chakra-ui/react"
- [Listbox](listbox.md): "use client"
- [Locale Provider](locale-provider.md): The`LocaleProvider`component sets the locale for your app, formatting dates,
- [Mark](mark.md): import { Mark, Text } from "@chakra-ui/react"
- [Marquee](marquee.md): "use client"
- [Menu](menu.md): import { Button, Menu, Portal } from "@chakra-ui/react"
- [Select (Native)](select-native.md): import { NativeSelect } from "@chakra-ui/react"
- [Number Input](number-input.md): import { NumberInput } from "@chakra-ui/react"
- [Overlay Manager](overlay-manager.md): The`createOverlay`function creates a new overlay component that can be
- [Pagination](pagination.md): "use client"
- [Password Input](password-input.md): import { PasswordInput } from "@/components/ui/password-input"
- [Pin Input](pin-input.md): import { PinInput } from "@chakra-ui/react"
- [Popover](popover.md): import { Button, Input, Popover, Portal, Text } from "@chakra-ui/react"
- [Portal](portal.md): The`Portal`uses the`ReactDOM.createPortal`API to render an element at the
- [Presence](presence.md): "use client"
- [Progress Circle](progress-circle.md): import { ProgressCircle } from "@chakra-ui/react"
- [Progress](progress.md): import { Progress } from "@chakra-ui/react"
- [Prose](prose.md): import { Prose } from "@/components/ui/prose"
- [QR Code](qr-code.md): import { QrCode } from "@chakra-ui/react"
- [Radio Card](radio-card.md): import { HStack, RadioCard } from "@chakra-ui/react"
- [Radio](radio.md): import { HStack, RadioGroup } from "@chakra-ui/react"
- [Radiomark](radiomark.md): import { Radiomark, Stack } from "@chakra-ui/react"
- [Rating](rating.md): import { RatingGroup } from "@chakra-ui/react"
- [Rich Text Editor](rich-text-editor.md): "use client"
- [Scroll Area](scroll-area.md): import { ScrollArea } from "@chakra-ui/react"
- [Segmented Control](segmented-control.md): import { SegmentGroup } from "@chakra-ui/react"
- [Select](select.md): "use client"
- [Separator](separator.md): import { Separator, Stack, Text } from "@chakra-ui/react"
- [Show](show.md): "use client"
- [SimpleGrid](simplegrid.md): import { SimpleGrid } from "@chakra-ui/react"
- [Skeleton](skeleton.md): import { HStack, Skeleton, SkeletonCircle, Stack } from "@chakra-ui/react"
- [Skip Nav](skip-nav.md): import { Box, SkipNavContent, SkipNavLink, Text } from "@chakra-ui/react"
- [Slider](slider.md): import { Slider } from "@chakra-ui/react"
- [Spinner](spinner.md): import { Spinner } from "@chakra-ui/react"
- [Splitter](splitter.md): import { Center, Splitter } from "@chakra-ui/react"
- [Stack](stack.md): import { Stack } from "@chakra-ui/react"
- [Stat](stat.md): import { Stat } from "@chakra-ui/react"
- [Status](status.md): import { HStack, Status } from "@chakra-ui/react"
- [Steps](steps.md): import { Button, ButtonGroup, Steps } from "@chakra-ui/react"
- [Switch](switch.md): import { Switch } from "@chakra-ui/react"
- [Table](table.md): import { Table } from "@chakra-ui/react"
- [Tabs](tabs.md): import { Tabs } from "@chakra-ui/react"
- [Tag](tag.md): import { HStack, Tag } from "@chakra-ui/react"
- [Tags Input](tags-input.md): "use client"
- [Text](text.md): import { Text } from "@chakra-ui/react"
- [Textarea](textarea.md): import { Textarea } from "@chakra-ui/react"
- [Theme](theme.md): import { Button, Stack, Theme } from "@chakra-ui/react"
- [Timeline](timeline.md): import { Text, Timeline } from "@chakra-ui/react"
- [Toast](toast.md): "use client"
- [Toggle Tip](toggle-tip.md): import { Button } from "@chakra-ui/react"
- [Tooltip](tooltip-2.md): import { Button } from "@chakra-ui/react"
- [TreeView](treeview.md): "use client"
- [Visually Hidden](visually-hidden.md): import { Button, VisuallyHidden } from "@chakra-ui/react"
- [Wrap](wrap.md): import { Badge, Wrap } from "@chakra-ui/react"
- [Animation Styles](animation-styles.md): Animation styles allow you to define reusable animation properties. The goal is
- [Cascade Layers](cascade-layers.md): Chakra UI relies on CSS cascade layers to provide a predictable, performant way
- [Chakra Factory](chakra-factory.md): Chakra factory serves as a way to create supercharged JSX component from any
- [Color opacity modifier](color-opacity-modifier.md): Every color related style property can use the
- [Conditional Styles](conditional-styles.md): Chakra allows you to write styles for pseudo states, media queries, and custom
- [CSS Variables](css-variables.md): CSS variables have become the defacto way to create shared values on the web.
- [Dark Mode](dark-mode.md): Chakra relies on the`next-themes`library to provide dark mode support. During
- [Focus Ring](focus-ring.md): The focus ring is used to identify the currently focused element on your page.
- [Layer Styles](layer-styles.md): Layer styles allow you to define visual properties. The common properties are:
- [Styling](styling.md): After installing Chakra UI, follow these guidelines to learn the key concepts:
- [Responsive Design](responsive-design.md): Chakra UI uses a mobile-first breakpoint system with min-width media queries:
- [Text Styles](text-styles.md): Text styles allows you to define textual css properties. The common properties
- [Virtual Color](virtual-color.md): Chakra allows you to create a virtual color or color placeholder in your
- [Animations](animations.md): Chakra UI supports the following keyframes out of the box.
- [Aspect Ratios](aspect-ratios.md): Chakra UI supports the following aspect ratios out of the box.
- [Breakpoints](breakpoints.md): Chakra UI supports the following breakpoints out of the box.
- [Colors](colors.md): Chakra UI supports these semantic tokens out of the box.
- [Cursors](cursors.md): Chakra UI uses the`cursor`token to define the cursor for interactive elements.
- [Layer Styles](layer-styles-2.md): Chakra UI provides these text styles out of the box.
- [Overview](overview.md): The Chakra UI theming system is built around the API of
- [Radii](radii.md): Chakra UI supports the following border radius tokens out of the box.
- [Recipes](recipes.md): Chakra provides a way to write CSS-in-JS with better performance, developer
- [Semantic Tokens](semantic-tokens.md): Semantic tokens are tokens that are designed to be used in a specific context. A
- [Shadows](shadows.md): Chakra UI supports these semantic tokens out of the box.
- [Sizes](sizes.md): Chakra UI supports the following size tokens out of the box.
- [Slot Recipes](slot-recipes.md): Slot Recipes come in handy when you need to apply style variations to multiple
- [Spacing](spacing.md): Chakra UI supports the following spacing tokens out of the box.
- [Text Styles](text-styles-2.md): Chakra UI provides these text styles out of the box.
- [Tokens](tokens.md): Design tokens are the platform-agnostic way to manage design decisions in your
- [Typography](typography.md): Here's the list of available fonts.
- [Z-Index](z-index.md): Chakra UI supports the following z-index tokens out of the box.
- [LLMs.txt Documentation](llmstxt-documentation.md): We support [LLMs.txt](https://llmstxt.org/) files for making the Chakra UI v3
- [MCP Server](mcp-server.md): marginTop="0"
- [AI Rules](ai-rules.md): Configure your AI coding assistants (like Cursor, GitHub Copilot, or Claude) by
- [Removed Packages](removed-packages.md): - Remove @emotion/styled and framer-motion dependencies
- [From @chakra-ui/react:](from-chakra-uireact.md): Alert, Avatar, Button, Card, Field, Table, Input, NativeSelect, Tabs, Textarea,
- [From components/ui (relative imports):](from-componentsui-relative-imports.md): Provider, Toaster, ColorModeProvider, Tooltip, PasswordInput
- [Chakra UI v3 Rules](chakra-ui-v3-rules.md): This project uses Chakra UI v3. Follow these rules:
- [Using Chakra UI in Iframe](using-chakra-ui-in-iframe.md): Iframes are useful for isolating styles and logic in a separate context. For
- [Using Chakra UI in Shadow DOM](using-chakra-ui-in-shadow-dom.md): When developing extensions for browsers or using Chakra as part of a large
- [Using Chakra UI in Next.js (App)](using-chakra-ui-in-nextjs-app.md): Use one of the following templates to get started quickly. The templates are
- [Using Chakra UI in Next.js (Pages)](using-chakra-ui-in-nextjs-pages.md): Use one of the following templates to get started quickly. The templates are
- [Using Chakra in Remix](using-chakra-in-remix.md): Use the remix template below to get started quickly.
- [Using Chakra UI in Storybook](using-chakra-ui-in-storybook.md): :::steps
- [Using Chakra in Vite](using-chakra-in-vite.md): Use the vite template below to get started quickly.
- [Animation](animation.md): We recommend using CSS animations to animate your Chakra UI components. This
- [Color Mode](color-mode.md): Chakra UI relies on [`next-themes`](https://github.com/pacocoursey/next-themes)
- [Composition](composition.md): Used to change the underlying HTML element that a React component renders. It
- [Components](components.md): Here's a list of all the components available in the library.
- [Server Components](server-components.md): React Server Components is a new feature in React that allows you to build
- [Testing](testing.md): When writing tests with Vitest or Jest, use the following practices to get the
- [Background](background.md): Use`bgAttachment`to control the attachment of a background image.
- [Border](border.md): Use the`rounded`or`borderRadius`props to apply border radius on all sides of
- [Display](display.md): // responsive
- [Divide](divide.md): Use the`divideX`prop to add a divider between elements horizontally.
- [Effects](effects.md): Use the`shadow`or`boxShadow`prop to apply a box shadow to an element.
- [Filters](filters.md): Use the`filter`prop to apply visual effects like blur or color shift to an
- [Flex and Grid](flex-and-grid.md): Use the`flexBasis`prop to set the initial main size of a flex item.
- [Interactivity](interactivity.md): Use the`accentColor`prop to set the accent color for browser generated
- [Layout](layout.md): Use the`aspectRatio`prop to set the desired aspect ratio of an element.
- [List](list-2.md): Use the`listStyleType`property to set the type of the list marker.
- [Sizing](sizing.md): Use the`width`or`w`property to set the width of an element.
- [Spacing](spacing-2.md): Use the`padding`prop to apply padding on all sides of an element
- [SVG](svg.md): Use the`fill`prop to set the fill color of an SVG element.
- [Tables](tables.md): Control the border-spacing property of a table. This property applies only when
- [Transforms](transforms.md): Use the`scale`prop to control the scale of an element.
- [Transitions](transitions.md): Use the`transition`prop to control the transition of an element.
- [Typography](typography-2.md): Use the`fontFamily`prop to set the font family of a text element.
- [Animations](animations-2.md): :::info
- [Breakpoints](breakpoints-2.md): :::info
- [Colors](colors-2.md): :::info
- [Conditions](conditions.md): :::info
- [CSS Variables](css-variables-2.md): :::info
- [Global CSS](global-css.md): :::info
- [Customization](customization.md): Chakra UI uses a system of configs to define the default styling system.
- [Recipes](recipes-2.md): :::info
- [Sizes](sizes-2.md): :::info
- [Spacing](spacing-3.md): :::info
- [Utilities](utilities.md): Here are the properties you need to define or customize a utility: