@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 forChakraProvider
s 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)
- dist/chakra-ui-react.cjs.d.ts
- dist/declarations/src/chakra-provider.d.ts
- dist/declarations/src/extend-theme.d.ts
- dist/declarations/src/theme-extensions/with-default-color-scheme.d.ts
- dist/declarations/src/theme-extensions/with-default-props.d.ts
- dist/declarations/src/theme-extensions/with-default-size.d.ts
- dist/declarations/src/theme-extensions/with-default-variant.d.ts
Dependencies (47)
- @chakra-ui/accordion
- @chakra-ui/alert
- @chakra-ui/avatar
- @chakra-ui/breadcrumb
- @chakra-ui/button
- @chakra-ui/checkbox
- @chakra-ui/close-button
- @chakra-ui/control-box
- @chakra-ui/counter
- @chakra-ui/css-reset
- @chakra-ui/editable
- @chakra-ui/form-control
- @chakra-ui/hooks
- @chakra-ui/icon
- @chakra-ui/image
- @chakra-ui/input
- @chakra-ui/layout
- @chakra-ui/live-region
- @chakra-ui/media-query
- @chakra-ui/menu
- @chakra-ui/modal
- @chakra-ui/number-input
- @chakra-ui/pin-input
- @chakra-ui/popover
- @chakra-ui/popper
- @chakra-ui/portal
- @chakra-ui/progress
- @chakra-ui/provider
- @chakra-ui/radio
- @chakra-ui/react-env
- @chakra-ui/select
- @chakra-ui/skeleton
- @chakra-ui/slider
- @chakra-ui/spinner
- @chakra-ui/stat
- @chakra-ui/switch
- @chakra-ui/system
- @chakra-ui/table
- @chakra-ui/tabs
- @chakra-ui/tag
- @chakra-ui/textarea
- @chakra-ui/theme
- @chakra-ui/toast
- @chakra-ui/tooltip
- @chakra-ui/transition
- @chakra-ui/utils
- @chakra-ui/visually-hidden
Dev Dependencies (5)
Peer Dependencies (5)
Badge
To add a badge like this oneto 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[](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>
- Updated .
Package analyzed in 1046 ms. - Missing or incorrect documentation? Open an issue for this package.