@chakra-ui/react

  • Version 2.0.2
  • Published
  • 76.2 kB
  • 47 dependencies
  • MIT license

Install

npm i @chakra-ui/react
yarn add @chakra-ui/react
pnpm add @chakra-ui/react

Overview

Responsive and accessible React UI components built with React and Emotion

Index

Variables

variable ChakraProvider

const ChakraProvider: {
({ children, toastOptions, ...restProps }: ChakraProviderProps): JSX.Element;
defaultProps: {
theme: {
components: typeof import('@chakra-ui/theme/src/components');
styles: import('@chakra-ui/theme-tools').Styles;
config: import('@chakra-ui/theme').ThemeConfig;
sizes: {
container: { sm: string; md: string; lg: string; xl: string };
max: string;
min: string;
full: string;
'3xs': string;
'2xs': string;
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
'3xl': string;
'4xl': string;
'5xl': string;
'6xl': string;
'7xl': string;
'8xl': string;
px: string;
0.5: string;
1: string;
1.5: string;
2: string;
2.5: string;
3: string;
3.5: string;
4: string;
5: string;
6: string;
7: string;
8: string;
9: string;
10: string;
12: string;
14: string;
16: string;
20: string;
24: string;
28: string;
32: string;
36: string;
40: string;
44: string;
48: string;
52: string;
56: string;
60: string;
64: string;
72: string;
80: string;
96: string;
};
shadows: {
xs: string;
sm: string;
base: string;
md: string;
lg: string;
xl: string;
'2xl': string;
outline: string;
inner: string;
none: string;
'dark-lg': string;
};
space: {
px: string;
0.5: string;
1: string;
1.5: string;
2: string;
2.5: string;
3: string;
3.5: string;
4: string;
5: string;
6: string;
7: string;
8: string;
9: string;
10: string;
12: string;
14: string;
16: string;
20: string;
24: string;
28: string;
32: string;
36: string;
40: string;
44: string;
48: string;
52: string;
56: string;
60: string;
64: string;
72: string;
80: string;
96: string;
};
borders: {
none: number;
'1px': string;
'2px': string;
'4px': string;
'8px': string;
};
transition: {
property: {
common: string;
colors: string;
dimensions: string;
position: string;
background: string;
};
easing: {
'ease-in': string;
'ease-out': string;
'ease-in-out': string;
};
duration: {
'ultra-fast': string;
faster: string;
fast: string;
normal: string;
slow: string;
slower: string;
'ultra-slow': string;
};
};
letterSpacings: {
tighter: string;
tight: string;
normal: string;
wide: string;
wider: string;
widest: string;
};
lineHeights: {
normal: string;
none: number;
shorter: number;
short: number;
base: number;
tall: number;
taller: string;
'3': string;
'4': string;
'5': string;
'6': string;
'7': string;
'8': string;
'9': string;
'10': string;
};
fontWeights: {
hairline: number;
thin: number;
light: number;
normal: number;
medium: number;
semibold: number;
bold: number;
extrabold: number;
black: number;
};
fonts: { heading: string; body: string; mono: string };
fontSizes: {
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
'3xl': string;
'4xl': string;
'5xl': string;
'6xl': string;
'7xl': string;
'8xl': string;
'9xl': string;
};
breakpoints: import('@chakra-ui/theme-tools').Breakpoints<{
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
}>;
zIndices: {
hide: number;
auto: string;
base: number;
docked: number;
dropdown: number;
sticky: number;
banner: number;
overlay: number;
modal: number;
popover: number;
skipLink: number;
toast: number;
tooltip: number;
};
radii: {
none: string;
sm: string;
base: string;
md: string;
lg: string;
xl: string;
'2xl': string;
'3xl': string;
full: string;
};
blur: {
none: number;
sm: string;
base: string;
md: string;
lg: string;
xl: string;
'2xl': string;
'3xl': string;
};
colors: {
transparent: string;
current: string;
black: string;
white: string;
whiteAlpha: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
};
blackAlpha: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
};
gray: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
};
red: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
};
orange: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
};
yellow: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
};
green: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
};
teal: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
};
blue: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
};
cyan: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
};
purple: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
};
pink: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
};
linkedin: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
};
facebook: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
};
messenger: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
};
whatsapp: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
};
twitter: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
};
telegram: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
};
};
semanticTokens: {
colors: {
'chakra-body-text': { _light: string; _dark: string };
'chakra-body-bg': { _light: string; _dark: string };
'chakra-border-color': { _light: string; _dark: string };
'chakra-placeholder-color': { _light: string; _dark: string };
};
};
direction: 'ltr';
};
};
};

    Functions

    function extendTheme

    extendTheme: (...extensions: any[]) => Dict;
    • NOTE: This got too complex to manage, and it's not worth the extra complexity. We'll re-evaluate this API in the future releases.

      Function to override or customize the Chakra UI theme conveniently. First extension overrides the baseTheme and following extensions override the preceding extensions.

      @example: import { theme as baseTheme, extendTheme, withDefaultColorScheme } from '@chakra-ui/react'

      const customTheme = extendTheme( { colors: { brand: { 500: "#b4d455", }, }, }, withDefaultColorScheme({ colorScheme: "red" }), baseTheme // optional )

    function mergeThemeOverride

    mergeThemeOverride: (...overrides: any[]) => any;

      function withDefaultColorScheme

      withDefaultColorScheme: ({
      colorScheme,
      components,
      }: {
      colorScheme: ThemingProps['colorScheme'];
      components?: string[] | Dict;
      }) => ThemeExtension;

        function withDefaultProps

        withDefaultProps: ({
        defaultProps: { colorScheme, variant, size },
        components,
        }: {
        defaultProps: ComponentDefaultProps;
        components?: string[] | Dict;
        }) => (theme: Dict) => any;

          function withDefaultSize

          withDefaultSize: ({
          size,
          components,
          }: {
          size: ThemingProps['size'];
          components?: string[] | Dict;
          }) => ThemeExtension;

            function withDefaultVariant

            withDefaultVariant: ({
            variant,
            components,
            }: {
            variant: ThemingProps['variant'];
            components?: string[] | Dict;
            }) => ThemeExtension;

              Interfaces

              interface ChakraProviderProps

              interface ChakraProviderProps extends BaseChakraProviderProps {}

                property toastOptions

                toastOptions?: ToastProviderProps;
                • Provide defaults for useToast() usages for ChakraProviders children

                Type Aliases

                type BaseThemeWithExtensions

                type BaseThemeWithExtensions<
                BaseTheme extends ChakraTheme,
                Extensions extends readonly [...any]
                > = BaseTheme &
                (Extensions extends [infer L, ...infer R]
                ? L extends AnyFunction
                ? ReturnType<L> & BaseThemeWithExtensions<BaseTheme, R>
                : L & BaseThemeWithExtensions<BaseTheme, R>
                : Extensions);

                  type DeepPartial

                  type DeepPartial<T> = {
                  [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
                  };

                    type ThemeExtension

                    type ThemeExtension<Override extends ThemeOverride = ThemeOverride> = (
                    themeOverride: Override
                    ) => Override;

                      type ThemeOverride

                      type ThemeOverride<BaseTheme = Theme> = DeepPartial<ChakraTheme> &
                      DeepThemeExtension<BaseTheme, ChakraTheme> &
                      Dict;

                        Package Files (7)

                        Dependencies (47)

                        Dev Dependencies (5)

                        Peer Dependencies (5)

                        Badge

                        To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                        You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@chakra-ui/react.

                        • Markdown
                          [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@chakra-ui/react)
                        • HTML
                          <a href="https://www.jsdocs.io/package/@chakra-ui/react"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>