Chakra UI is a comprehensive React component library for building accessible, responsive user interfaces with speed and ease. It provides 110+ pre-built, composable components following WAI-ARIA guidelines, built on top of Emotion for styling and Ark UI for accessibility primitives.
npm install @chakra-ui/react @emotion/reactimport { Box, Flex, Grid, Stack, Button, Input, Text, Heading } from "@chakra-ui/react";
import { ChakraProvider, defaultSystem, useChakraContext } from "@chakra-ui/react";
import { chakra, createSystem, defaultConfig } from "@chakra-ui/react";
// css, cva, sva are accessed via system context
const { css, cva, sva } = defaultSystem;
// or via hook: const { css, cva, sva } = useChakraContext();CommonJS:
const { Box, Button, ChakraProvider } = require("@chakra-ui/react");Subpath imports:
import { defaultSystem } from "@chakra-ui/react/preset";
import { recipes, slotRecipes } from "@chakra-ui/react/theme";
import { createListCollection } from "@chakra-ui/react/collection";
import { useBreakpoint } from "@chakra-ui/react/hooks";import { ChakraProvider, defaultSystem, Box, Button, Stack, Heading } from "@chakra-ui/react";
import { createRoot } from "react-dom/client";
function App() {
return (
<ChakraProvider value={defaultSystem}>
<Box p="8" maxW="container.lg" mx="auto">
<Stack gap="6">
<Heading>Welcome to Chakra UI</Heading>
<Box p="4" borderWidth="1px" borderRadius="md">
<Text>Build accessible React apps with speed</Text>
</Box>
<Button colorPalette="blue" variant="solid" onClick={() => alert("Clicked!")}>
Click Me
</Button>
</Stack>
</Box>
</ChakraProvider>
);
}
createRoot(document.getElementById("root")).render(<App />);Chakra UI v3 is built with several key architectural patterns:
Components for structuring and organizing content with flexible layouts, spacing, and positioning.
import { Box, Flex, Grid, Stack, Container, Center } from "@chakra-ui/react";
// Fundamental box component
const Box: ChakraComponent<"div">;
// Flexbox container
const Flex: ChakraComponent<"div">;
// CSS Grid container
const Grid: ChakraComponent<"div">;
// Stacking components (VStack, HStack)
const Stack: ChakraComponent<"div">;
const VStack: ChakraComponent<"div">;
const HStack: ChakraComponent<"div">;
// Constrained container
const Container: ChakraComponent<"div">;
// Centered content
const Center: ChakraComponent<"div">;Key Components: Box, Flex, Grid, SimpleGrid, Stack (HStack, VStack), Container, Center, AbsoluteCenter, AspectRatio, Circle, Square, Wrap, Spacer, Float, Sticky, Bleed, Group
Components for displaying text content with consistent typography patterns and semantic HTML.
import { Text, Heading, Code, List, Blockquote } from "@chakra-ui/react";
// Paragraph text
const Text: ChakraComponent<"p">;
// Heading component (h1-h6)
const Heading: ChakraComponent<"h2">;
// Inline code
const Code: ChakraComponent<"code">;
// Lists
namespace List {
const Root: ChakraComponent<"ul">;
const Item: ChakraComponent<"li">;
const Indicator: ChakraComponent<"span">;
}
// Blockquote
namespace Blockquote {
const Root: ChakraComponent<"blockquote">;
const Content: ChakraComponent<"div">;
const Caption: ChakraComponent<"figcaption">;
const Icon: ChakraComponent<"svg">;
}Key Components: Text, Heading, Code, CodeBlock, Kbd, Mark, Highlight, Blockquote, List, Em, Strong, Quote, Span
Accessible form input controls with validation, labels, and comprehensive state management.
import { Input, Textarea, Checkbox, Radio, Select, Slider } from "@chakra-ui/react";
// Text input
const Input: ChakraComponent<"input">;
// Multi-line textarea
const Textarea: ChakraComponent<"textarea">;
// Checkbox
namespace Checkbox {
const Root: React.FC<CheckboxRootProps>;
const Control: ChakraComponent<"label">;
const Indicator: ChakraComponent<"div">;
const Label: ChakraComponent<"span">;
}
// Radio group
namespace RadioGroup {
const Root: React.FC<RadioGroupRootProps>;
const Item: React.FC<RadioGroupItemProps>;
const ItemControl: ChakraComponent<"label">;
const ItemText: ChakraComponent<"span">;
}
// Select dropdown
namespace Select {
const Root: React.FC<SelectRootProps>;
const Trigger: ChakraComponent<"button">;
const Content: ChakraComponent<"div">;
const Item: React.FC<SelectItemProps>;
}
// Range slider
namespace Slider {
const Root: React.FC<SliderRootProps>;
const Track: ChakraComponent<"div">;
const Thumb: React.FC<{ index: number }>;
}Key Components: Input, InputGroup, InputAddon, InputElement, Textarea, Checkbox, CheckboxCard, Switch, RadioGroup, RadioCard, Select, NativeSelect, Slider, NumberInput, PinInput, Editable, Field, Fieldset, FileUpload
Components for displaying data including badges, cards, tables, and stats.
import { Badge, Card, Table, Tag, Image, Stat } from "@chakra-ui/react";
// Badge indicator
const Badge: ChakraComponent<"span">;
// Card container
namespace Card {
const Root: ChakraComponent<"div">;
const Header: ChakraComponent<"div">;
const Body: ChakraComponent<"div">;
const Footer: ChakraComponent<"div">;
}
// Table
namespace Table {
const Root: ChakraComponent<"table">;
const Header: ChakraComponent<"thead">;
const Body: ChakraComponent<"tbody">;
const Row: ChakraComponent<"tr">;
const Cell: ChakraComponent<"td">;
const ColumnHeader: ChakraComponent<"th">;
}
// Tag component
namespace Tag {
const Root: ChakraComponent<"span">;
const Label: ChakraComponent<"span">;
const CloseTrigger: ChakraComponent<"button">;
}
// Image with lazy loading
const Image: ChakraComponent<"img">;
// Stat display
namespace Stat {
const Root: ChakraComponent<"div">;
const Label: ChakraComponent<"dt">;
const ValueText: ChakraComponent<"dd">;
const HelpText: ChakraComponent<"div">;
}Key Components: Badge, Card, Tag, Image, Table, DataList, Stat, Status, Timeline, EmptyState, QrCode
Components providing visual feedback including alerts, toasts, progress indicators, and loading states.
import { Alert, Toast, createToaster, Progress, Spinner, Skeleton } from "@chakra-ui/react";
// Alert message
namespace Alert {
const Root: ChakraComponent<"div">;
const Title: ChakraComponent<"h4">;
const Description: ChakraComponent<"p">;
const Indicator: ChakraComponent<"div">;
}
// Toast system
function createToaster(props?: CreateToasterProps): CreateToasterReturn;
const Toaster: React.FC<ToasterProps>;
namespace Toast {
const Root: ChakraComponent<"div">;
const Title: ChakraComponent<"div">;
const Description: ChakraComponent<"div">;
const CloseTrigger: ChakraComponent<"button">;
}
// Progress bar
namespace Progress {
const Root: React.FC<ProgressRootProps>;
const Track: ChakraComponent<"div">;
const Range: ChakraComponent<"div">;
const ValueText: ChakraComponent<"div">;
}
// Loading spinner
const Spinner: ChakraComponent<"div">;
// Content placeholder
const Skeleton: ChakraComponent<"div">;
const SkeletonCircle: ChakraComponent<"div">;
const SkeletonText: ChakraComponent<"div">;Key Components: Alert, Toast/Toaster, Progress, ProgressCircle, Spinner, Loader, Skeleton
Layered UI elements including modals, drawers, popovers, tooltips, and menus.
import { Dialog, Drawer, Popover, Tooltip, Menu, Portal } from "@chakra-ui/react";
// Modal dialog
namespace Dialog {
const Root: React.FC<DialogRootProps>;
const Trigger: ChakraComponent<"button">;
const Backdrop: ChakraComponent<"div">;
const Content: ChakraComponent<"div">;
const Header: ChakraComponent<"div">;
const Body: ChakraComponent<"div">;
const Footer: ChakraComponent<"div">;
const CloseTrigger: ChakraComponent<"button">;
}
// Drawer panel
namespace Drawer {
const Root: React.FC<DrawerRootProps>;
const Trigger: ChakraComponent<"button">;
const Backdrop: ChakraComponent<"div">;
const Content: ChakraComponent<"div">;
const Header: ChakraComponent<"div">;
const Body: ChakraComponent<"div">;
const Footer: ChakraComponent<"div">;
const CloseTrigger: ChakraComponent<"button">;
}
// Popover
namespace Popover {
const Root: React.FC<PopoverRootProps>;
const Trigger: ChakraComponent<"button">;
const Content: ChakraComponent<"div">;
const Header: ChakraComponent<"div">;
const Body: ChakraComponent<"div">;
const CloseTrigger: ChakraComponent<"button">;
}
// Tooltip
namespace Tooltip {
const Root: React.FC<TooltipRootProps>;
const Trigger: ChakraComponent<"button">;
const Content: ChakraComponent<"div">;
}
// Menu
namespace Menu {
const Root: React.FC<MenuRootProps>;
const Trigger: ChakraComponent<"button">;
const Content: ChakraComponent<"div">;
const Item: ChakraComponent<"div">;
const ItemText: ChakraComponent<"div">;
}Key Components: Dialog, Drawer, Popover, Tooltip, Menu, HoverCard, ActionBar, Portal
Expandable/collapsible content components for progressive disclosure.
import { Accordion, Tabs, Collapsible } from "@chakra-ui/react";
// Accordion
namespace Accordion {
const Root: React.FC<AccordionRootProps>;
const Item: React.FC<{ value: string; children: React.ReactNode }>;
const ItemTrigger: ChakraComponent<"button">;
const ItemContent: ChakraComponent<"div">;
const ItemIndicator: ChakraComponent<"div">;
}
// Tabs
namespace Tabs {
const Root: React.FC<TabsRootProps>;
const List: ChakraComponent<"div">;
const Trigger: ChakraComponent<"button", { value: string }>;
const Content: ChakraComponent<"div", { value: string }>;
const Indicator: ChakraComponent<"div">;
}
// Collapsible
namespace Collapsible {
const Root: React.FC<CollapsibleRootProps>;
const Trigger: ChakraComponent<"button">;
const Content: ChakraComponent<"div">;
}Key Components: Accordion, Tabs, Collapsible
Components for navigation including buttons, links, breadcrumbs, pagination, and step indicators.
import { Button, Link, Breadcrumb, Pagination, Steps } from "@chakra-ui/react";
// Button
const Button: ChakraComponent<"button">;
const IconButton: ChakraComponent<"button">;
const ButtonGroup: ChakraComponent<"div">;
const CloseButton: ChakraComponent<"button">;
// Link
const Link: ChakraComponent<"a">;
const LinkBox: ChakraComponent<"div">;
const LinkOverlay: ChakraComponent<"a">;
// Breadcrumb
namespace Breadcrumb {
const Root: ChakraComponent<"nav">;
const List: ChakraComponent<"ol">;
const Item: ChakraComponent<"li">;
const Link: ChakraComponent<"a">;
}
// Pagination
namespace Pagination {
const Root: React.FC<PaginationRootProps>;
const PrevTrigger: ChakraComponent<"button">;
const NextTrigger: ChakraComponent<"button">;
const Items: React.FC;
const Item: ChakraComponent<"button">;
}
// Steps
namespace Steps {
const Root: React.FC<StepsRootProps>;
const List: ChakraComponent<"div">;
const Item: React.FC<{ index: number; children: React.ReactNode }>;
const Trigger: ChakraComponent<"button">;
const Content: ChakraComponent<"div", { index: number }>;
}Key Components: Button, IconButton, ButtonGroup, CloseButton, Link, LinkBox, LinkOverlay, Breadcrumb, Pagination, Steps, SkipNav
Focused components for specific use cases including avatars, color pickers, ratings, and more.
import {
Avatar,
ColorPicker,
Combobox,
RatingGroup,
SegmentGroup,
ScrollArea,
TreeView,
Clipboard,
} from "@chakra-ui/react";
// Avatar
namespace Avatar {
const Root: React.FC<{ name?: string; src?: string }>;
const Image: ChakraComponent<"img">;
const Fallback: ChakraComponent<"div">;
const Group: ChakraComponent<"div">;
}
// Color picker
namespace ColorPicker {
const Root: React.FC<ColorPickerRootProps>;
const Trigger: ChakraComponent<"button">;
const Content: ChakraComponent<"div">;
const Area: ChakraComponent<"div">;
const ChannelSlider: React.FC<{ channel: string }>;
}
// Combobox
namespace Combobox {
const Root: React.FC<ComboboxRootProps>;
const Input: ChakraComponent<"input">;
const Content: ChakraComponent<"div">;
const Item: React.FC<{ value: string }>;
}
// Rating group
namespace RatingGroup {
const Root: React.FC<RatingGroupRootProps>;
const Control: ChakraComponent<"div">;
const Item: React.FC<{ index: number }>;
}Key Components: Avatar, ColorPicker, ColorSwatch, Combobox, Listbox, RatingGroup, SegmentGroup, ScrollArea, TreeView, Toggle, Clipboard, Icon, Checkmark, Radiomark, Format (Number/Byte), Separator, DownloadTrigger, FocusTrap, Presence, VisuallyHidden, For, Show, ClientOnly, Environment, Locale
React hooks for state management, responsive values, media queries, and component behavior.
import {
useBreakpoint,
useBreakpointValue,
useMediaQuery,
useDisclosure,
useControllableState,
useCallbackRef,
usePrevious,
} from "@chakra-ui/react";
// Responsive hooks
function useBreakpoint(options?: UseBreakpointOptions): string | undefined;
function useBreakpointValue<T>(options: UseBreakpointValueOptions<T>): T | undefined;
function useMediaQuery(query: string | string[], options?: UseMediaQueryOptions): boolean[];
// State management hooks
function useDisclosure(props?: UseDisclosureProps): UseDisclosureReturn;
function useControllableState<T>(props: UseControllableStateProps<T>): [T, (value: T) => void];
// Utility hooks
function useCallbackRef<T extends (...args: any[]) => any>(
callback: T | undefined,
deps?: React.DependencyList
): T;
function usePrevious<T>(value: T): T | undefined;Custom Hooks: useBreakpoint, useBreakpointValue, useMediaQuery, useDisclosure, useControllableState, useControllableProp, useCallbackRef, useLiveRef, usePrevious, useUpdateEffect, useSafeLayoutEffect, useForceUpdate, useConst, useElementRect, useListCollection, useOverlay
Component Hooks: useAccordion, useAvatar, useCheckbox, useClipboard, useCollapsible, useColorPicker, useCombobox, useDialog, useDrawer, useEditable, useFileUpload, useHighlight, useHoverCard, useListbox, useMenu, useNumberInput, usePagination, usePinInput, usePopover, useProgress, useQrCode, useRadioGroup, useRatingGroup, useScrollArea, useSegmentGroup, useSelect, useSlider, useSteps, useSwitch, useTabs, useToggle, useTooltip, useTreeView
Utilities for creating styled components, managing recipes, and working with design tokens.
import {
chakra,
ChakraProvider,
createSystem,
defaultSystem,
useChakraContext,
useRecipe,
useSlotRecipe,
useToken,
} from "@chakra-ui/react";
// Factory for creating styled components
const chakra: ChakraFactory;
// Provider component
const ChakraProvider: React.FC<ChakraProviderProps>;
function useChakraContext(): SystemContext;
// System creation
function createSystem(config: SystemConfig): SystemContext;
function isValidSystem(value: any): value is SystemContext;
// Styling functions (accessed via SystemContext)
// Available as: defaultSystem.css() or const { css } = useChakraContext()
interface SystemContext {
css(styles: SystemStyleObject): string;
cva(config: RecipeConfig): RecipeFn;
sva(config: SlotRecipeConfig): SlotRecipeFn;
// ...other context methods
}
// Recipe hooks
function useRecipe(options: UseRecipeOptions): RecipeFn | undefined;
function useSlotRecipe(options: UseSlotRecipeOptions): SlotRecipeFn | undefined;
// Token hook
function useToken<T = any>(path: string, fallback?: T): T;Key Exports: chakra factory, ChakraProvider, createSystem, defaultSystem, useChakraContext, useRecipe, useSlotRecipe, createRecipeContext, createSlotRecipeContext, useToken, mergeProps, mergeRefs, createContext, Collection utilities (createListCollection, createTreeCollection, etc.). Note: css, cva, sva are accessed via SystemContext (defaultSystem.css, etc.)
Default theme configuration with design tokens, semantic tokens, and component recipes.
import {
defaultSystem,
defaultConfig,
defaultThemeConfig,
tokens,
semanticTokens,
recipes,
slotRecipes,
breakpoints,
textStyles,
} from "@chakra-ui/react";
import { recipes, slotRecipes } from "@chakra-ui/react/theme";
// System and configuration
const defaultSystem: SystemContext;
const defaultConfig: SystemConfig;
const defaultThemeConfig: ThemingConfig;
// Theme exports
const tokens: Tokens;
const semanticTokens: SemanticTokens;
const recipes: Record<string, RecipeConfig>;
const slotRecipes: Record<string, SlotRecipeConfig>;
const breakpoints: Record<string, string>;
const textStyles: TextStyles;
const layerStyles: LayerStyles;
const animationStyles: AnimationStyles;
const globalCss: GlobalStyleObject;Key Exports: defaultSystem, defaultConfig, defaultBaseConfig, defaultConditions, defaultThemeConfig, tokens, semanticTokens, recipes, slotRecipes, breakpoints, keyframes, textStyles, layerStyles, animationStyles, globalCss, cssVarsPrefix, cssVarsRoot
TypeScript type definitions for components, styling, and system configuration.
import type {
ChakraComponent,
HTMLChakraProps,
SystemStyleObject,
ConditionalValue,
RecipeProps,
SlotRecipeProps,
RecipeFn,
SlotRecipeFn,
Token,
Tokens,
SystemConfig,
SystemContext,
} from "@chakra-ui/react";
// Component types
type ChakraComponent<T extends keyof JSX.IntrinsicElements, P = {}> =
React.ForwardRefExoticComponent<HTMLChakraProps<T> & P>;
type HTMLChakraProps<T extends keyof JSX.IntrinsicElements> =
JSX.IntrinsicElements[T] & JsxStyleProps & UnstyledProp;
// Style types
interface SystemStyleObject {
[property: string]: ConditionalValue<any> | SystemStyleObject;
}
type ConditionalValue<T> = T | T[] | Record<string, T>;
// Recipe types
interface RecipeFn<V = any> {
(props?: RecipeProps<V>): { className: string; css?: SystemStyleObject };
}
interface SlotRecipeFn<S extends string = string, V = any> {
(props?: SlotRecipeProps<V>): Record<S, { className: string; css?: SystemStyleObject }>;
}
// Token types
interface Token<T = any> {
value: T;
description?: string;
}
// System types
interface SystemContext {
getRecipe: (key: RecipeKey) => RecipeFn | undefined;
getSlotRecipe: (key: SlotRecipeKey) => SlotRecipeFn | undefined;
css: (styles: SystemStyleObject) => string;
cva: (config: RecipeConfig) => RecipeFn;
sva: (config: SlotRecipeConfig) => SlotRecipeFn;
token: (path: string, fallback?: any) => any;
}Key Types: ChakraComponent, HTMLChakraProps, JsxStyleProps, SystemStyleObject, ConditionalValue, RecipeProps, SlotRecipeProps, RecipeFn, SlotRecipeFn, Token, Tokens, SystemConfig, SystemContext, and many more
The package provides multiple entry points:
// Main entry
import { Box, Button } from "@chakra-ui/react";
// Preset (default system)
import { defaultSystem } from "@chakra-ui/react/preset";
// Base preset (no theme)
import { defaultBaseConfig } from "@chakra-ui/react/preset-base";
// Theme
import { recipes, slotRecipes } from "@chakra-ui/react/theme";
// Styled system
import { chakra, css } from "@chakra-ui/react/styled-system";
// Collection utilities
import { createListCollection } from "@chakra-ui/react/collection";
// Hooks
import { useBreakpoint } from "@chakra-ui/react/hooks";
// Anatomy definitions
import { accordionAnatomy } from "@chakra-ui/react/anatomy";
// Component subpaths
import { Button } from "@chakra-ui/react/button";
import { Dialog } from "@chakra-ui/react/dialog";