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

styling-system.mddocs/

Styling System

The Chakra UI styling system provides utilities for creating styled components, managing recipes, and working with design tokens.

Capabilities

chakra Factory

Factory function for creating styled components with Chakra style props.

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

interface ChakraFactory {
  <T extends keyof JSX.IntrinsicElements>(
    element: T,
    options?: JsxFactoryOptions<T>
  ): ChakraComponent<T>;

  // Pre-defined element factories
  div: ChakraComponent<"div">;
  span: ChakraComponent<"span">;
  button: ChakraComponent<"button">;
  a: ChakraComponent<"a">;
  p: ChakraComponent<"p">;
  img: ChakraComponent<"img">;
  input: ChakraComponent<"input">;
  svg: ChakraComponent<"svg">;
  // ... all HTML elements
}

const chakra: ChakraFactory;

interface JsxFactoryOptions<T extends keyof JSX.IntrinsicElements> {
  forwardProps?: string[];
  defaultProps?: Partial<HTMLChakraProps<T>> & Record<`data-${string}`, string | number | undefined | null | boolean>;
  forwardAsChild?: boolean;
  shouldForwardProp?: (prop: string, variantKeys: string[]) => boolean;
}

Usage:

// Using pre-defined factories
const Box = chakra.div;
const Button = chakra.button;

// Creating custom styled components
const CustomButton = chakra("button", {
  defaultProps: {
    bg: "blue.500",
    color: "white",
  },
});

// With recipe (CVA)
const StyledButton = chakra("button", buttonRecipe);

ChakraProvider

Root provider component for the Chakra UI system.

import { ChakraProvider, useChakraContext } from "@chakra-ui/react";

interface ChakraProviderProps {
  value: SystemContext;  // Required
  children: React.ReactNode;
}

const ChakraProvider: React.FC<ChakraProviderProps>;

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;
  breakpoints: Record<string, string>;
  conditions: Record<string, string>;
  config: SystemConfig;
}

function useChakraContext(): SystemContext;

Usage:

import { ChakraProvider, defaultSystem } from "@chakra-ui/react";

<ChakraProvider value={defaultSystem}>
  <App />
</ChakraProvider>;

createSystem

Creates a custom Chakra system instance.

import { createSystem, isValidSystem } from "@chakra-ui/react";

interface SystemConfig {
  preflight?: boolean;
  cssVarsPrefix?: string;
  cssVarsRoot?: string;
  theme?: {
    tokens?: Tokens;
    semanticTokens?: SemanticTokens;
    breakpoints?: Record<string, string>;
    keyframes?: Record<string, CssKeyframes>;
    recipes?: Record<string, RecipeConfig>;
    slotRecipes?: Record<string, SlotRecipeConfig>;
    textStyles?: TextStyles;
    layerStyles?: LayerStyles;
    animationStyles?: AnimationStyles;
    globalCss?: GlobalStyleObject;
  };
  conditions?: Record<string, string>;
  utilities?: Record<string, UtilityConfig>;
}

function createSystem(config: SystemConfig): SystemContext;
function isValidSystem(value: any): value is SystemContext;

Usage:

const customSystem = createSystem({
  theme: {
    tokens: {
      colors: {
        brand: { value: "#0066CC" },
      },
    },
  },
});

Recipe System

useRecipe

Hook for using component recipes (CVA - Class Variance Authority).

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

type RecipeKey = "button" | "input" | "badge" | /* all recipe keys */;

interface UseRecipeOptions {
  key: RecipeKey;
}

interface RecipeFn<V = any> {
  (props?: RecipeProps<V>): {
    className: string;
    css?: SystemStyleObject;
  };
  variantMap: Record<string, string[]>;
  variantKeys: string[];
}

function useRecipe(options: UseRecipeOptions): RecipeFn | undefined;

Usage:

const buttonRecipe = useRecipe({ key: "button" });
const styles = buttonRecipe({ variant: "solid", size: "md" });

useSlotRecipe

Hook for using multi-part component recipes (SVA - Slot Variance Authority).

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

type SlotRecipeKey = "accordion" | "dialog" | "menu" | /* all slot recipe keys */;

interface UseSlotRecipeOptions {
  key: SlotRecipeKey;
}

interface SlotRecipeFn<S extends string = string, V = any> {
  (props?: SlotRecipeProps<V>): Record<S, {
    className: string;
    css?: SystemStyleObject;
  }>;
  slots: S[];
  variantMap: Record<string, string[]>;
  variantKeys: string[];
}

function useSlotRecipe(options: UseSlotRecipeOptions): SlotRecipeFn | undefined;

Usage:

const dialogRecipe = useSlotRecipe({ key: "dialog" });
const styles = dialogRecipe({ size: "md" });
// Returns: { root: {...}, backdrop: {...}, content: {...}, ... }

createRecipeContext

Creates a recipe context for sharing variant props across component tree.

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

interface RecipeContextReturn<P> {
  PropsProvider: React.FC<{ value: P; children: React.ReactNode }>;
  useRecipeProps: () => P;
  withProvider: <C extends React.ComponentType<any>>(
    Component: C,
    options?: WithProviderOptions
  ) => C;
  withContext: <C extends React.ComponentType<any>>(
    Component: C,
    options?: WithContextOptions
  ) => C;
}

function createRecipeContext<P extends RecipeProps>(options: {
  key: RecipeKey;
}): RecipeContextReturn<P>;

Usage:

const { PropsProvider, useRecipeProps } = createRecipeContext({
  key: "button",
});

// In parent
<PropsProvider value={{ variant: "solid", colorPalette: "blue" }}>
  <ChildComponent />
</PropsProvider>;

// In child
const props = useRecipeProps();

createSlotRecipeContext

Creates a slot recipe context for multi-part components.

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

interface WithProviderOptions {
  forwardAsChild?: boolean;
  forwardProps?: string[];
}

interface WithContextOptions extends WithProviderOptions {
  omitProps?: string[];
}

interface WithRootProviderOptions extends WithProviderOptions {
  Provider: React.ComponentType<any>;
}

interface SlotRecipeContextReturn<P> {
  PropsProvider: React.FC<{ value: P; children: React.ReactNode }>;
  useSlotRecipeProps: () => P;
  useSlotRecipeStyles: () => Record<string, any>;
  withProvider: <C extends React.ComponentType<any>>(
    Component: C,
    slot: string,
    options?: WithProviderOptions
  ) => C;
  withContext: <C extends React.ComponentType<any>>(
    Component: C,
    slot: string,
    options?: WithContextOptions
  ) => C;
  withRootProvider: <C extends React.ComponentType<any>>(
    Component: C,
    options?: WithRootProviderOptions
  ) => C;
}

function createSlotRecipeContext<P extends SlotRecipeProps>(options: {
  key: SlotRecipeKey;
}): SlotRecipeContextReturn<P>;

PropsProvider Pattern

Many Chakra UI components export a PropsProvider component that allows sharing component props (like variant, size, colorPalette) across a component tree. This pattern is implemented via createRecipeContext and createSlotRecipeContext.

Available PropsProviders

Single-Part Component PropsProviders:

import {
  BadgePropsProvider,
  ButtonPropsProvider,
  CodePropsProvider,
  ColorSwatchPropsProvider,
  ContainerPropsProvider,
  HeadingPropsProvider,
  IconPropsProvider,
  InputPropsProvider,
  KbdPropsProvider,
  LinkPropsProvider,
  MarkPropsProvider,
  SeparatorPropsProvider,
  SkeletonPropsProvider,
  SpinnerPropsProvider,
  TextPropsProvider,
  TextareaPropsProvider,
} from "@chakra-ui/react";

Multi-Part Component PropsProviders:

import {
  AccordionPropsProvider,
  ActionBarPropsProvider,
  AlertPropsProvider,
  AvatarPropsProvider,
  BlockquotePropsProvider,
  BreadcrumbPropsProvider,
  CardPropsProvider,
  CheckboxPropsProvider,
  CheckboxCardPropsProvider,
  ClipboardPropsProvider,
  CollapsiblePropsProvider,
  ComboboxPropsProvider,
  DataListPropsProvider,
  DialogPropsProvider,
  DrawerPropsProvider,
  EditablePropsProvider,
  EmptyStatePropsProvider,
  FieldPropsProvider,
  FieldsetPropsProvider,
  FileUploadPropsProvider,
  HoverCardPropsProvider,
  ListPropsProvider,
  ListboxPropsProvider,
  MenuPropsProvider,
  NativeSelectPropsProvider,
  NumberInputPropsProvider,
  PaginationPropsProvider,
  PinInputPropsProvider,
  PopoverPropsProvider,
  ProgressPropsProvider,
  QrCodePropsProvider,
  RadioCardPropsProvider,
  RadioGroupPropsProvider,
  RatingGroupPropsProvider,
  ScrollAreaPropsProvider,
  SegmentGroupPropsProvider,
  SelectPropsProvider,
  SliderPropsProvider,
  StatPropsProvider,
  StatusPropsProvider,
  StepsPropsProvider,
  SwitchPropsProvider,
  TablePropsProvider,
  TabsPropsProvider,
  TagPropsProvider,
  TimelinePropsProvider,
  TooltipPropsProvider,
  TreeViewPropsProvider,
} from "@chakra-ui/react";

Usage Pattern:

import { Button, ButtonPropsProvider } from "@chakra-ui/react";

// Share button props across multiple buttons
<ButtonPropsProvider value={{ variant: "solid", colorPalette: "blue" }}>
  <Button>Save</Button>
  <Button>Cancel</Button>
  <Button variant="outline">Reset</Button> {/* Override specific props */}
</ButtonPropsProvider>

// Multi-part component example
import { Dialog, DialogPropsProvider } from "@chakra-ui/react";

<DialogPropsProvider value={{ size: "lg", colorPalette: "teal" }}>
  <Dialog.Root>
    <Dialog.Trigger>Open Dialog</Dialog.Trigger>
    <Dialog.Content>
      {/* All Dialog parts inherit size and colorPalette */}
      <Dialog.Header>Title</Dialog.Header>
      <Dialog.Body>Content</Dialog.Body>
    </Dialog.Content>
  </Dialog.Root>
</DialogPropsProvider>

This pattern is useful for:

  • Setting default props for multiple component instances
  • Theming sections of your application
  • Reducing prop repetition in component trees

Token System

useToken

Hook for accessing design tokens.

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

function useToken(category: string, token: string | string[]): string[];

Usage:

// Get a single token value
const blue500 = useToken("colors", "blue.500")[0];

// Get multiple token values
const [spacing4, spacing8] = useToken("spacing", ["4", "8"]);

Style Utilities

These utilities are available through the SystemContext and can be accessed via defaultSystem or useChakraContext(). They are not exported as top-level functions from @chakra-ui/react.

CSS Function

Converts style objects to CSS strings.

import { defaultSystem, useChakraContext } from "@chakra-ui/react";

// Available via defaultSystem
const css = defaultSystem.css;

// Or via hook
function MyComponent() {
  const { css } = useChakraContext();
  // use css here
}

// Function signature
function css(styles: SystemStyleObject): string;

Usage:

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

const className = defaultSystem.css({
  color: "blue.500",
  padding: "4",
  _hover: {
    color: "blue.600",
  },
});

CVA Function

Class Variance Authority for recipe-based styling.

import { defaultSystem, useChakraContext } from "@chakra-ui/react";

// Available via defaultSystem
const cva = defaultSystem.cva;

// Or via hook
function MyComponent() {
  const { cva } = useChakraContext();
  // use cva here
}

interface RecipeConfig {
  base?: SystemStyleObject;
  variants?: Record<string, Record<string, SystemStyleObject>>;
  compoundVariants?: Array<{
    [key: string]: any;
    css: SystemStyleObject;
  }>;
  defaultVariants?: Record<string, any>;
}

// Function signature
function cva(config: RecipeConfig): RecipeFn;

Usage:

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

const buttonRecipe = defaultSystem.cva({
  base: {
    fontWeight: "semibold",
    borderRadius: "md",
  },
  variants: {
    variant: {
      solid: { bg: "blue.500", color: "white" },
      outline: { borderWidth: "1px", borderColor: "blue.500" },
    },
    size: {
      sm: { px: "3", py: "1", fontSize: "sm" },
      md: { px: "4", py: "2", fontSize: "md" },
    },
  },
  defaultVariants: {
    variant: "solid",
    size: "md",
  },
});

SVA Function

Slot Variance Authority for multi-part component styling.

import { defaultSystem, useChakraContext } from "@chakra-ui/react";

// Available via defaultSystem
const sva = defaultSystem.sva;

// Or via hook
function MyComponent() {
  const { sva } = useChakraContext();
  // use sva here
}

interface SlotRecipeConfig {
  slots: string[];
  base?: Record<string, SystemStyleObject>;
  variants?: Record<string, Record<string, Record<string, SystemStyleObject>>>;
  compoundVariants?: Array<{
    [key: string]: any;
    css: Record<string, SystemStyleObject>;
  }>;
  defaultVariants?: Record<string, any>;
}

// Function signature
function sva(config: SlotRecipeConfig): SlotRecipeFn;

Usage:

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

const cardRecipe = defaultSystem.sva({
  slots: ["root", "header", "body", "footer"],
  base: {
    root: { borderWidth: "1px", borderRadius: "md" },
    header: { p: "4", borderBottomWidth: "1px" },
    body: { p: "4" },
    footer: { p: "4", borderTopWidth: "1px" },
  },
  variants: {
    size: {
      sm: {
        root: { fontSize: "sm" },
        header: { p: "3" },
        body: { p: "3" },
        footer: { p: "3" },
      },
      md: {
        root: { fontSize: "md" },
        header: { p: "4" },
        body: { p: "4" },
        footer: { p: "4" },
      },
    },
  },
});

Configuration Utilities

Helper functions for defining type-safe system configuration.

import {
  defineConfig,
  defineConditions,
  defineRecipe,
  defineSlotRecipe,
  defineKeyframes,
  defineGlobalStyles,
  defineStyle,
  defineTextStyles,
  defineLayerStyles,
  defineAnimationStyles,
  defineTokens,
  defineSemanticTokens,
  mergeConfigs,
} from "@chakra-ui/react";

// System configuration
function defineConfig(config: SystemConfig): SystemConfig;
function mergeConfigs(...configs: SystemConfig[]): SystemConfig;

// Conditions
function defineConditions<T extends ConditionRecord>(conditions: T): T;

// Recipes
function defineRecipe<T>(recipe: T): T;
function defineSlotRecipe<T>(recipe: T): T;

// Styles
function defineKeyframes<T>(keyframes: T): T;
function defineGlobalStyles<T>(styles: T): T;
function defineStyle<T>(style: T): T;

// Composition styles
function defineTextStyles<T>(styles: T): T;
function defineLayerStyles<T>(styles: T): T;
function defineAnimationStyles<T>(styles: T): T;

// Tokens
function defineTokens<T>(tokens: T): T;
function defineSemanticTokens<T>(tokens: T): T;

Usage:

import { defineConfig, defineTokens, defineRecipe } from "@chakra-ui/react";

// Define custom theme configuration
const config = defineConfig({
  theme: {
    tokens: defineTokens({
      colors: {
        brand: { value: "#0066CC" },
      },
    }),
    recipes: {
      button: defineRecipe({
        base: { fontWeight: "semibold" },
        variants: {
          variant: {
            solid: { bg: "brand", color: "white" },
          },
        },
      }),
    },
  },
});

Utility Functions

mergeProps

Merges component props with proper event handler composition.

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

function mergeProps<T extends Record<string, any>>(...sources: T[]): T;

mergeRefs

Merges multiple React refs into a single ref callback. Handles cleanup properly when refs change.

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

function mergeRefs<T>(...refs: Array<React.Ref<T> | undefined>): React.RefCallback<T>;

Usage Example:

import { mergeRefs } from "@chakra-ui/react";
import { useRef, forwardRef } from "react";

const MyComponent = forwardRef<HTMLDivElement, MyProps>((props, ref) => {
  const localRef = useRef<HTMLDivElement>(null);

  return <div ref={mergeRefs(ref, localRef)} {...props} />;
});

createContext

Creates typed React context with proper error handling.

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

interface CreateContextOptions<T> {
  name?: string;
  strict?: boolean;
  hookName?: string;
  providerName?: string;
  errorMessage?: string;
  defaultValue?: T;
}

type CreateContextReturn<T> = [
  React.Provider<T>,
  () => T,
  React.Context<T>
];

function createContext<T>(options?: CreateContextOptions<T>): CreateContextReturn<T>;

Usage:

const [Provider, useMyContext, MyContext] = createContext<MyContextValue>({
  name: "MyContext",
  strict: true,
});

// Use the Provider in your component tree
<Provider value={myValue}>
  <ChildComponents />
</Provider>

// Use the hook in child components
function ChildComponent() {
  const value = useMyContext();
  // ...
}

// Access Context directly if needed
const contextValue = React.useContext(MyContext);

Collection Utilities

Create typed collections for select, combobox, and other list components.

import {
  createListCollection,
  createTreeCollection,
  createFileTreeCollection,
  createGridCollection,
} from "@chakra-ui/react";

interface CollectionItem {
  label: string;
  value: string;
  disabled?: boolean;
}

interface CollectionOptions<T> {
  items: T[];
  itemToString?: (item: T) => string;
  itemToValue?: (item: T) => string;
  itemToDisabled?: (item: T) => boolean;
}

function createListCollection<T extends CollectionItem>(
  options: CollectionOptions<T>
): ListCollection<T>;

interface TreeNode {
  label: string;
  value: string;
  children?: TreeNode[];
}

function createTreeCollection(options: {
  items: TreeNode[];
}): TreeCollection;

function createFileTreeCollection(options: {
  items: FilePathTreeNode[];
}): TreeCollection;

function createGridCollection<T>(options: {
  items: T[][];
}): GridCollection<T>;

Usage:

const collection = createListCollection({
  items: [
    { label: "React", value: "react" },
    { label: "Vue", value: "vue", disabled: true },
    { label: "Svelte", value: "svelte" },
  ],
});

Types

interface RecipeProps<V = any> {
  [key: string]: any;
}

interface SlotRecipeProps<V = any> {
  [key: string]: any;
}

interface UtilityConfig {
  className?: string;
  values?: Record<string, any>;
  transform?: (value: any) => any;
}