or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

data-display-components.mddisclosure-components.mdfeedback-components.mdform-components.mdhooks.mdindex.mdlayout-components.mdnavigation-components.mdoverlay-components.mdspecialized-components.mdstyling-system.mdtheme-system.mdtypes.mdtypography-components.md
tile.json

tessl/npm-chakra-ui--react

Comprehensive React component library for building accessible, responsive user interfaces with 109+ pre-built components, design tokens, and type-safe styling system

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@chakra-ui/react@3.27.x

To install, run

npx @tessl/cli install tessl/npm-chakra-ui--react@3.27.0

index.mddocs/

Chakra UI React

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.

Package Information

  • Package Name: @chakra-ui/react
  • Package Type: npm
  • Version: 3.27.1
  • Language: TypeScript
  • License: MIT
  • Repository: https://github.com/chakra-ui/chakra-ui
  • Documentation: https://chakra-ui.com
  • Installation: npm install @chakra-ui/react @emotion/react

Core Imports

import { 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";

Basic Usage

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 />);

Architecture

Chakra UI v3 is built with several key architectural patterns:

Component Architecture

  • Ark UI Foundation: Components use Ark UI primitives for behavior and accessibility
  • Multi-part Components: Complex components use slot-based architecture (Dialog, Menu, Accordion, etc.)
  • Single-part Components: Simple components render single elements (Box, Button, Text, etc.)
  • RSC Compatible: All components marked "use client" for Next.js App Router compatibility

Styling System

  • Emotion Integration: CSS-in-JS powered by Emotion for runtime styling
  • Panda CSS Inspired: Styling API inspired by Panda CSS with type-safe props
  • Recipe System: CVA (Class Variance Authority) for variant-based component styling
  • Slot Recipes: SVA (Slot Variance Authority) for multi-part component styling
  • Token-based Design: Comprehensive design token system with semantic token layer

State Management

  • Context-based: Component state shared via React Context
  • Controlled/Uncontrolled: Support for both controlled and uncontrolled patterns
  • Ark UI Hooks: State management hooks from @ark-ui/react
  • Custom Hooks: Chakra-specific hooks for responsive values, media queries, etc.

Type Safety

  • Full TypeScript Support: Complete type definitions for all components and APIs
  • Generated Types: Types auto-generated from theme configuration
  • Recipe Type Inference: Automatic type inference for recipe variants
  • Conditional Types: Responsive and conditional value types

Capabilities

Layout Components

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

Layout Components

Typography Components

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

Typography Components

Form Components

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

Form Components

Data Display Components

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

Data Display Components

Feedback Components

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

Feedback Components

Overlay Components

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

Overlay Components

Disclosure Components

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

Disclosure Components

Navigation Components

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

Navigation Components

Specialized Components

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

Specialized Components

Hooks

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

Hooks

Styling System

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.)

Styling System

Theme System

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

Theme System

Core Types

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

Core Types

Package Exports

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";

Key Features

  • 110+ Components: Comprehensive component library covering all UI needs
  • Accessibility First: WCAG compliant with ARIA attributes built-in
  • TypeScript Support: Full type safety with generated types
  • Responsive Design: Responsive props with object syntax (Note: array syntax has TypeScript type safety limitations and object syntax is recommended)
  • Dark Mode: Built-in dark mode support with semantic tokens
  • Customizable: Highly customizable through theme configuration
  • Recipe System: Variant-based styling with CVA/SVA
  • RSC Compatible: Works with Next.js App Router and Server Components
  • Tree-shakeable: Import only what you need for optimal bundle size
  • RTL Support: Right-to-left language support built-in

Dependencies

  • @ark-ui/react ^5.24.1 - Behavior and accessibility primitives
  • @emotion/react >=11 - CSS-in-JS styling (peer dependency)
  • react >=18 - React framework (peer dependency)
  • react-dom >=18 - React DOM (peer dependency)