@chakra-ui/core

@chakra-ui/core

Version 0.8.0
Published 4 years ago
890 kB
16 dependencies
MIT license

Install

npm i @chakra-ui/core

yarn add @chakra-ui/core

pnpm add @chakra-ui/core

Overview

Responsive and accessible React UI components built with React and Emotion

Index

Variables

variable Accordion

const Accordion: React.FC<AccordionProps>;

The accordion component delivers large amounts of content in a small space through progressive disclosure.
By default, only one item may be expanded and it can only be collapsed again by expanding another.

variable AccordionHeader

const AccordionHeader: React.FC<any>;

AccordionHeader component composes PseudoBox, this means you can use the _expanded, _disabled, _hover, etc. props to style them

variable AccordionIcon

const AccordionIcon: React.FC<IconProps>;

variable AccordionItem

const AccordionItem: React.FC<any>;

Accordions allow users to expand and collapse sections of content. It composes Box component.

variable AccordionPanel

const AccordionPanel: React.FC<any>;

AccordionPanel component composes Collapse to provide the height animation

variable Alert

const Alert: React.FC<any>;

Alerts are used to communicate a state that affects a system, feature or page

variable AlertDescription

const AlertDescription: React.FC<any>;

variable AlertDialog

const AlertDialog: React.FC<IAlertDialog>;

variable AlertDialogBody

const AlertDialogBody: React.FC<any>;

variable AlertDialogCloseButton

const AlertDialogCloseButton: React.FC<CloseButtonProps>;

variable AlertDialogContent

const AlertDialogContent: React.FC<any>;

variable AlertDialogFooter

const AlertDialogFooter: React.FC<any>;

variable AlertDialogHeader

const AlertDialogHeader: React.FC<any>;

variable AlertDialogOverlay

const AlertDialogOverlay: React.FC<any>;

variable AlertIcon

const AlertIcon: React.FC<IconProps>;

variable AlertTitle

const AlertTitle: React.FC<any>;

variable AspectRatioBox

const AspectRatioBox: React.FC<any>;

variable Avatar

const Avatar: React.FC<AvatarProps>;

The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.

variable AvatarBadge

const AvatarBadge: React.FC<any>;

variable AvatarGroup

const AvatarGroup: React.FC<AvatarGroupProps>;

AvatarGroup is a wrapper to render a collection of evenly spaced avatars.

variable AvatarName

const AvatarName: React.FC<any>;

variable Badge

const Badge: React.FC<any>;

The Badge component is used for state, general text, and number labels.

variable Box

const Box: React.FC<any>;

const Breadcrumb: React.FC<any>;

variable BreadcrumbItem

const BreadcrumbItem: React.FC<any>;

variable BreadcrumbLink

const BreadcrumbLink: React.FC<any>;

variable BreadcrumbSeparator

const BreadcrumbSeparator: React.FC<any>;

variable Button

const Button: React.FC<ButtonProps>;

variable ButtonGroup

const ButtonGroup: React.FC<ButtonGroupProps>;

variable Callout

const Callout: React.FC<any>;

A react component used to alert users of a particular screen area that needs user action

variable Checkbox

const Checkbox: React.FC<any>;

variable CheckboxGroup

const CheckboxGroup: React.FC<CheckboxGroupProps>;

variable CircularProgress

const CircularProgress: React.FC<any>;

variable CircularProgressLabel

const CircularProgressLabel: React.FC<any>;

variable CloseButton

const CloseButton: React.FC<CloseButtonProps>;

variable Code

const Code: React.FC<any>;

variable Collapse

const Collapse: React.FC<any>;

variable ColorModeProvider

const ColorModeProvider: React.FC<IColorModeProvider>;

variable ControlBox

const ControlBox: Emotion.StyledComponent<any, {}, {}>;

variable CSSReset

const CSSReset: React.FC<CSSResetProps>;

variable DarkMode

const DarkMode: React.FC<IColorModeProvider>;

variable Divider

const Divider: React.FC<
    Omit<any, 'aria-orientation'> & { orientation?: BoxProps['aria-orientation'] }
>;

variable Drawer

const Drawer: React.FC<IDrawer>;

variable DrawerBody

const DrawerBody: React.FC<any>;

variable DrawerCloseButton

const DrawerCloseButton: React.FC<CloseButtonProps>;

variable DrawerContent

const DrawerContent: React.FC<any>;

variable DrawerFooter

const DrawerFooter: React.FC<any>;

variable DrawerHeader

const DrawerHeader: React.FC<any>;

variable DrawerOverlay

const DrawerOverlay: React.FC<any>;

variable Editable

const Editable: React.FC<EditableProps>;

variable EditableInput

const EditableInput: React.FC<any>;

variable EditablePreview

const EditablePreview: React.FC<any>;

variable Flex

const Flex: React.FC<any>;

variable FormControl

const FormControl: React.FC<any>;

FormControl provides context such as isInvalid, isRequired, isDisabled to it's children.

variable FormErrorMessage

const FormErrorMessage: React.FC<any>;

variable FormHelperText

const FormHelperText: React.FC<any>;

variable FormLabel

const FormLabel: React.FC<any>;

FormLabel is used for form inputs and controls. It reads from the FormControl context to handle it's styles for the various form states.

variable Grid

const Grid: React.FC<any>;

variable Heading

const Heading: React.FC<HeadingProps>;

variable Icon

const Icon: React.FC<IconProps>;

variable IconButton

const IconButton: React.FC<IconButtonProps>;

variable Image

const Image: React.FC<any>;

variable Input

const Input: React.FC<any>;

variable InputAddon

const InputAddon: React.FC<any>;

variable InputGroup

const InputGroup: React.FC<any>;

variable InputLeftAddon

const InputLeftAddon: React.FC<any>;

variable InputLeftElement

const InputLeftElement: React.FC<Omit<any, 'placement'>>;

variable InputRightAddon

const InputRightAddon: React.FC<any>;

variable InputRightElement

const InputRightElement: React.FC<Omit<any, 'placement'>>;

variable Kbd

const Kbd: React.FC<any>;

variable LightMode

const LightMode: React.FC<IColorModeProvider>;

variable Link

const Link: React.FC<any>;

Links are accesible elements used primarily for navigation. This component is styled to resemble a hyperlink and semantically renders an <a>.

variable List

const List: React.FC<any>;

variable ListIcon

const ListIcon: React.FC<ListIconProps>;

variable ListItem

const ListItem: React.FC<any>;

const Menu: React.FC<MenuProps>;

variable MenuButton

const MenuButton: React.FC<any>;

variable MenuDivider

const MenuDivider: React.FC<any>;

variable MenuGroup

const MenuGroup: React.FC<any>;

variable MenuItem

const MenuItem: React.FC<any>;

variable MenuItemOption

const MenuItemOption: React.FC<any>;

variable MenuList

const MenuList: React.FC<any>;

variable MenuOptionGroup

const MenuOptionGroup: React.FC<any>;

const Modal: React.FC<IModal>;

variable ModalBody

const ModalBody: React.FC<any>;

variable ModalCloseButton

const ModalCloseButton: React.FC<CloseButtonProps>;

variable ModalContent

const ModalContent: React.FC<any>;

variable ModalFooter

const ModalFooter: React.FC<any>;

variable ModalHeader

const ModalHeader: React.FC<any>;

variable ModalOverlay

const ModalOverlay: React.FC<any>;

variable NumberDecrementStepper

const NumberDecrementStepper: React.FC<any>;

variable NumberIncrementStepper

const NumberIncrementStepper: React.FC<any>;

variable NumberInput

const NumberInput: React.FC<any>;

variable NumberInputField

const NumberInputField: React.FC<any>;

variable NumberInputStepper

const NumberInputStepper: React.FC<any>;

const Popover: React.FC<PopoverProps>;

variable PopoverArrow

const PopoverArrow: React.FC<any>;

variable PopoverBody

const PopoverBody: React.FC<any>;

variable PopoverCloseButton

const PopoverCloseButton: React.FC<any>;

variable PopoverContent

const PopoverContent: React.FC<any>;

variable PopoverContext

const PopoverContext: React.Context<{}>;

variable PopoverFooter

const PopoverFooter: React.FC<any>;

variable PopoverHeader

const PopoverHeader: React.FC<any>;

variable PopoverTrigger

const PopoverTrigger: React.FC<IPopoverTrigger>;

variable Portal

const Portal: React.FC<PortalProps>;

variable Progress

const Progress: React.FC<any>;

variable PseudoBox

const PseudoBox: React.FC<any>;

PseudoBox is an interactive wrapper that composes Box and converts common CSS pseudo-selectors to props for ease of styling.
For example, to style :hover use _hover
Example 1
<PseudoBox _hover={...} _focus={...}/>

variable Radio

const Radio: React.FC<any>;

variable RadioButtonGroup

const RadioButtonGroup: React.FC<RadioButtonGroupProps>;

variable RadioGroup

const RadioGroup: React.FC<RadioGroupProps>;

variable Scale

const Scale: React.FC<any>;

variable Select

const Select: React.FC<any>;

variable SimpleGrid

const SimpleGrid: React.FC<any>;

variable Skeleton

const Skeleton: React.FC<any>;

variable Slide

const Slide: React.FC<any>;

variable SlideIn

const SlideIn: React.FC<any>;

variable Slider

const Slider: React.FC<SliderProps>;

variable SliderFilledTrack

const SliderFilledTrack: React.FC<any>;

variable SliderThumb

const SliderThumb: React.FC<any>;

variable SliderTrack

const SliderTrack: React.FC<any>;

variable Spinner

const Spinner: React.FC<SpinnerProps>;

Spinner is used for indicating a loading state of a component or page.
RECOMMENDED: Add aria-busy="true" to the component that triggered the loading state while the spinner is shown.

variable Stack

const Stack: React.FC<any>;

variable Stat

const Stat: React.FC<any>;

variable StatArrow

const StatArrow: React.FC<StatArrowProps>;

variable StatGroup

const StatGroup: React.FC<any>;

variable StatHelpText

const StatHelpText: React.FC<any>;

variable StatLabel

const StatLabel: React.FC<any>;

variable StatNumber

const StatNumber: React.FC<any>;

variable Switch

const Switch: React.FC<SwitchProps>;

variable Tab

const Tab: React.FC<any>;

variable TabList

const TabList: React.FC<any>;

variable TabPanel

const TabPanel: React.FC<any>;

variable TabPanels

const TabPanels: React.FC<any>;

variable Tabs

const Tabs: React.FC<TabsProps>;

variable Tag

const Tag: React.FC<TagProps>;

variable TagCloseButton

const TagCloseButton: any;

variable TagIcon

const TagIcon: React.FC<TagIconProps>;

variable TagLabel

const TagLabel: React.FC<any>;

variable Text

const Text: React.FC<any>;

variable Textarea

const Textarea: React.FC<any>;

variable theme

const theme: DefaultTheme;

variable ThemeProvider

const ThemeProvider: React.FC<{ theme?: ITheme }>;

const Tooltip: React.FC<any>;

variable VisuallyHidden

const VisuallyHidden: React.FC<any>;

Functions

function css

css: (styleProps: object) => Function;

function useClipboard

useClipboard: <T>(value: T) => IClipboard<T>;

useClipboard is a custom hook to handle copying content to clipboard

function useColorMode

useColorMode: () => IUseColorMode;

function useDisclosure

useDisclosure: (defaultIsOpen?: boolean) => UseDisclosureReturn;

useDisclosure is a custom hook to help handle common open, close, or toggle scenarios
Returns
An object of isOpen, onOpen, onClose, onToggle

function useFormControl

useFormControl: (props: UseFormControlProps) => UseFormControlProps;

React hook to read from props passed to the FormControl component It's mostly used to design custom form control components.
Parameter props
props passed to the input control

function useNumberInput

useNumberInput: (props: UseNumberInputProps) => UseNumberInputReturn;

function usePopoverContext

usePopoverContext: () => PopoverContextValue | undefined;

function usePrevious

usePrevious: <T>(value: T) => T;

function useTheme

useTheme: () => ITheme;

function useToast

useToast: () => (props: useToastOptions) => void;

Interfaces

interface ColorHues

interface ColorHues {}

property 100

100: string;

property 200

200: string;

property 300

300: string;

property 400

400: string;

property 50

50: string;

property 500

500: string;

property 600

600: string;

property 700

700: string;

property 800

800: string;

property 900

900: string;

interface CustomTheme

interface CustomTheme extends SS.Theme {}

property icons

icons: IconsType;

interface DefaultTheme

interface DefaultTheme extends Typography {}

property borders

borders: Borders;

property breakpoints

breakpoints: Breakpoints;

property colors

colors: Colors;

property icons

icons: Record<string, Icon>;

property opacity

opacity: Opacity;

property radii

radii: Radii;

property shadows

shadows: Shadows;

property sizes

sizes: Sizes;

property space

space: BaseSizes;

property zIndices

zIndices: ZIndices;

interface IAccordion

interface IAccordion {}

property allowMultiple

allowMultiple?: boolean;

If true, multiple accordion items can be expanded at once.

property allowToggle

allowToggle?: boolean;

If true, any expanded accordion item can be collapsed again.

property children

children: React.ReactNode;

The content of the accordion. Must be AccordionItem

property defaultIndex

defaultIndex?: number | number[];

The initial index(es) of the expanded accordion item

property index

index?: number | number[];

The index(es) of the expanded accordion item

property onChange

onChange?: (expandedIndex?: number | number[]) => void;

The callback invoked when accordion items are expanded or collapsed.

interface IAccordionItem

interface IAccordionItem {}

property defaultIsOpen

defaultIsOpen?: boolean;

If true, expands the accordion by on initial mount.

property id

id?: string;

A unique id for the accordion item.

property isDisabled

isDisabled?: boolean;

If true, the accordion header will be disabled.

property isOpen

isOpen?: boolean;

If true, expands the accordion in the controlled mode.

property onChange

onChange?: (isOpen: boolean) => void;

The callback fired when the accordion is expanded/collapsed.

interface IAccordionItemRenderProps

interface IAccordionItemRenderProps {}

property isDisabled

isDisabled?: boolean;

property isExpanded

isExpanded?: boolean;

interface IAlert

interface IAlert {}

property status

status?: 'error' | 'success' | 'warning' | 'info';

The status of the alert

property variant

variant?: 'subtle' | 'solid' | 'left-accent' | 'top-accent';

The variant of the alert style to use.

interface IAlertDialog

interface IAlertDialog extends Omit<IModal, 'initialFocusRef'> {}

property leastDestructiveRef

leastDestructiveRef: React.RefObject<HTMLElement>;

interface IAvatar

interface IAvatar {}

property children

children?: React.ReactNode;

The badge at the bottom right corner of the avatar.

property name

name?: string;

The name of the person in the avatar.
- if src has loaded, the name will be used as the alt attribute of the img - If src is not loaded, the name will be used to create the initials

property showBorder

showBorder?: boolean;

If true, the Avatar will show a border around it.
Best for a group of avatars

property size

size?: Size;

The size of the avatar.

property src

src?: string;

The image url of the Avatar

interface IBadge

interface IBadge {}

property variant

variant?: 'solid' | 'subtle' | 'outline';

The variant of the badge

property variantColor

variantColor?: string;

The color scheme of the badge
🚨Note: This should be one of the color keys in the theme that has 100 - 900 color values (e.g.green, red).
See Also
- http://chakra-ui.com/theme#colors

interface IButton

interface IButton {}

property children

children: React.ReactNode;

The content of the button.

property iconSpacing

iconSpacing?: PseudoBoxProps['margin'];

The space between the button icon and label. Use the styled-system tokens or add custom values as a string

property isActive

isActive?: boolean;

If true, the button will be styled in it's active state.

property isDisabled

isDisabled?: boolean;

If true, the button will be disabled.

property isFullWidth

isFullWidth?: boolean;

If true, the button will take up the full width of its container.

property isLoading

isLoading?: boolean;

If true, the button will show a spinner.

property leftIcon

leftIcon?: Icons | React.ComponentType;

If added, the button will show an icon before the button's label. Use the icon key in theme.iconPath

property loadingText

loadingText?: string;

The label to show in the button when isLoading is true If no text is passed, it only shows the spinner

property rightIcon

rightIcon?: Icons | React.ComponentType;

If added, the button will show an icon after the button's label. Use the icon key in theme.iconPath

property size

size?: 'xs' | 'sm' | 'md' | 'lg';

The size of the button

property type

type?: 'button' | 'reset' | 'submit';

The html button type to use.

property variant

variant?: 'outline' | 'ghost' | 'unstyled' | 'link' | 'solid';

The variant of the button style to use.

property variantColor

variantColor?: string;

The color scheme of the button.
🚨Note: This should be one of the color keys in the theme that has 100 - 900 color values (e.g.green, red).
See Also
- http://chakra-ui.com/theme#colors

interface IButtonGroup

interface IButtonGroup {}

property children

children?: React.ReactNode;

property color

color?: string;

property isAttached

isAttached?: boolean;

If true, the borderRadius of button that are direct children will be altered to look flushed together

property size

size?: IButton['size'];

property spacing

spacing?: StyledSystem.MarginRightProps['marginRight'];

property variant

variant?: IButton['variant'];

interface ICheckbox

interface ICheckbox {}

property children

children?: React.ReactNode;

The children is the label to be displayed to the right of the checkbox.

property defaultIsChecked

defaultIsChecked?: boolean;

If true, the checkbox will be initially checked.

property id

id?: string;

id assigned to input

property isChecked

isChecked?: boolean;

If true, the checkbox will be checked. You'll need to pass onChange to update it's value (since it's now controlled)

property isDisabled

isDisabled?: boolean;

If true, the checkbox will be disabled

property isFullWidth

isFullWidth?: boolean;

If true, the checkbox should take up the full width of the parent.

property isIndeterminate

isIndeterminate?: boolean;

If true, the checkbox will be indeterminate. This only affects the icon shown inside checkbox and does not modify the isChecked property.

property isInvalid

isInvalid?: boolean;

If true, the checkbox is marked as invalid. Changes style of unchecked state.

property isReadOnly

isReadOnly?: boolean;

If true, the checkbox will be readonly

property name

name?: string;

The name of the input field in a checkbox (Useful for form submission).

property onChange

onChange?: React.ChangeEventHandler<HTMLInputElement>;

The callback invoked when the checked state of the Checkbox changes..

property size

size?: 'sm' | 'md' | 'lg';

The size (width and height) of the checkbox

property value

value?: string | number;

The value to be used in the checkbox input. This is the value that will be returned on form submission.

property variantColor

variantColor?: string;

The color scheme of the checkbox.
🚨Note: This should be one of the color keys in the theme that has 100 - 900 color values (e.g.green, red).
See Also
- http://chakra-ui.com/theme#colors

interface ICheckboxGroup

interface ICheckboxGroup {}

property children

children?: React.ReactNode;

The content of the checkbox group. Must be the Checkbox component

property defaultValue

defaultValue?: Array<ICheckbox['value']>;

The initial value of the checkbox group

property id

id?: ICheckbox['id'];

The id of the checkbox group.

property isInline

isInline?: boolean;

If true, the checkboxes will aligned horizontally.

property name

name?: ICheckbox['name'];

The name of the checkbox group. This prop is passed to each checbox

property onChange

onChange?: (value: Array<ICheckbox['value']>) => void;

The callback fired when any children Checkbox is checked or unchecked

property size

size?: ICheckbox['size'];

The size of the checkbox. It's forwarded to all children checkbox

property spacing

spacing?: StyledSystem.MarginProps['margin'];

The space between each checkbox

property value

value?: Array<ICheckbox['value']>;

The value of the checkbox group

property variantColor

variantColor?: ICheckbox['variantColor'];

The color of the checkbox when it's checked.

interface ICollapse

interface ICollapse {}

property animateOpacity

animateOpacity?: boolean;

If true, the opacity of the content will be animated

property duration

duration?: number;

The duration of the animation in ms

property endingHeight

endingHeight?: number | string;

The height you want the content in it's expanded state. Set to auto by default

property isOpen

isOpen?: boolean;

If true, the content will be visible

property startingHeight

startingHeight?: number | string;

The height you want the content in it's collapsed state. Set to 0 by default

method onAnimationEnd

onAnimationEnd: (props: { newHeight: number }) => void;

The function to be called when the collapse animation starts. It provides the newHeight as an argument

method onAnimationStart

onAnimationStart: (props: { newHeight: number }) => void;

The function to be called when the collapse animation ends. It provides the newHeight as an argument

interface IColorModeProvider

interface IColorModeProvider {}

property children

children: React.ReactNode;

property value

value?: 'light' | 'dark';

interface IControlBox

interface IControlBox {}

property type

type?: 'checkbox' | 'radio';

interface IDrawer

interface IDrawer extends IModal {}

property finalFocusRef

finalFocusRef?: IModal['finalFocusRef'];

The element to receive focus when the drawer closes. You could point it to the element that triggered the drawer

property isFullHeight

isFullHeight?: boolean;

If true, the drawer fills the height of the viewport by default.

property placement

placement?: 'top' | 'left' | 'bottom' | 'right';

Set the position of the drawer should slide from.

property size

size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';

The size of the drawer when placement is left or right.

interface IFormControl

interface IFormControl extends UseFormControlProps {}

property children

children?: React.ReactNode;

Content of the form control.

interface IGrid

interface IGrid {}

property area

area?: StyledSystem.GridAreaProps['gridArea'];

property autoColumns

autoColumns?: StyledSystem.GridAutoColumnsProps['gridAutoColumns'];

property autoFlow

autoFlow?: StyledSystem.GridAutoFlowProps['gridAutoFlow'];

property autoRows

autoRows?: StyledSystem.GridAutoRowsProps['gridAutoRows'];

property column

column?: StyledSystem.GridColumnProps['gridColumn'];

property columnGap

columnGap?: StyledSystem.GridColumnGapProps['gridColumnGap'];

property gap

gap?: StyledSystem.GridGapProps['gridGap'];

property row

row?: StyledSystem.GridRowProps['gridRow'];

property rowGap

rowGap?: StyledSystem.GridRowGapProps['gridRowGap'];

property templateAreas

templateAreas?: StyledSystem.GridTemplateAreasProps['gridTemplateAreas'];

property templateColumns

templateColumns?: StyledSystem.GridTemplateColumnsProps['gridTemplateColumns'];

property templateRows

templateRows?: StyledSystem.GridTemplateRowsProps['gridTemplateRows'];

interface IInput

interface IInput<T = HTMLInputElement> {}

property "aria-describedby"

'aria-describedby'?: React.AriaAttributes['aria-describedby'];

[ARIA] The id of the element that describes the input.

property "aria-label"

'aria-label'?: React.AriaAttributes['aria-label'];

[ARIA] The accessible label to use, in scenarios where the input as no visible label

property as

as?: React.ElementType;

The element or component to use in place of input

property errorBorderColor

errorBorderColor?: string;

The border color when the input is invalid. Use color keys in theme.colors
Example 1
errorBorderColor = "red.500"

property focusBorderColor

focusBorderColor?: string;

The border color when the input is focused. Use color keys in theme.colors
Example 1
focusBorderColor = "blue.500"

property isDisabled

isDisabled?: React.InputHTMLAttributes<T>['disabled'];

If true, the input will be disabled. This sets aria-disabled=true and you can style this state by passing _disabled prop

property isFullWidth

isFullWidth?: boolean;

If true, the input element will span the full width of it's parent

property isInvalid

isInvalid?: boolean;

If true, the input will indicate an error. This sets aria-invalid=true and you can style this state by passing _invalid prop

property isReadOnly

isReadOnly?: React.InputHTMLAttributes<T>['readOnly'];

If true, prevents the value of the input from being edited.

property isRequired

isRequired?: React.InputHTMLAttributes<T>['required'];

If true, the input element will be required.

property size

size?: Size;

The visual size of the input element.

property variant

variant?: Variant;

The variant of the input style to use.

interface IInputGroup

interface IInputGroup {}

property children

children: React.ReactNode;

property size

size?: IInput['size'];

interface ILink

interface ILink {}

property isDisabled

isDisabled?: boolean;

If true, the link will be disabled and not tabbable

property isExternal

isExternal?: boolean;

If true, the link will open in new tab

property onClick

onClick?: React.MouseEventHandler<HTMLAnchorElement>;

Action to perform when clicked

interface IMenu

interface IMenu {}

property autoSelect

autoSelect?: boolean;

property closeOnBlur

closeOnBlur?: boolean;

property closeOnSelect

closeOnSelect?: boolean;

property isOpen

isOpen?: boolean;

interface IMenuButton

interface IMenuButton {}

property onClick

onClick?: React.MouseEventHandler<HTMLElement>;

property onKeyDown

onKeyDown?: React.KeyboardEventHandler<HTMLElement>;

interface IMenuItemOption

interface IMenuItemOption {}

property children

children: React.ReactNode;

property isChecked

isChecked?: boolean;

property isDisabled

isDisabled?: boolean;

property onClick

onClick?: React.KeyboardEventHandler<HTMLElement>;

property onKeyDown

onKeyDown?: React.KeyboardEventHandler<HTMLElement>;

property onMouseLeave

onMouseLeave?: React.MouseEventHandler<HTMLElement>;

property onMouseMove

onMouseMove?: React.MouseEventHandler<HTMLElement>;

property type

type?: 'radio' | 'checkbox';

property value

value?: string | number;

interface IMenuList

interface IMenuList {}

property onBlur

onBlur?: React.FocusEventHandler<HTMLElement>;

property onKeydown

onKeydown?: React.KeyboardEventHandler<HTMLElement>;

interface IMenuOptionGroup

interface IMenuOptionGroup {}

property children

children?: React.ReactNode;

property defaultValue

defaultValue?: stringOrNumber;

property name

name?: string;

property onChange

onChange?: (value: stringOrNumber) => void;

property title

title?: string;

property type

type?: 'radio' | 'checkbox';

property value

value?: stringOrNumber;

interface IModal

interface IModal {}

property addAriaLabels

addAriaLabels?: boolean | { header?: boolean; body?: boolean };

By default, a unique id is passed to the header and body. These ids are used to add aria-labelledby and aria-describedby to the ModalContent.
You can configure this behavior: - Set it to false if you'd like to manually add the aria-* attributes. - Set it to {header: false} if you don't render the ModalHeader within the modal. We'll remove the aria-labelledby prop.
true

property blockScrollOnMount

blockScrollOnMount?: boolean;

If true, scrolling will be disabled on the body when the modal opens. true

property children

children: React.ReactNode;

The content of the modal.

property closeOnEsc

closeOnEsc?: boolean;

If true, the modal will close when the Esc key is pressed true

property closeOnOverlayClick

closeOnOverlayClick?: boolean;

If true, the modal will close when the overlay is clicked true

property container

container?: React.RefObject<HTMLElement>;

property finalFocusRef

finalFocusRef?: React.RefObject<HTMLElement>;

The ref of element to receive focus when the modal closes.

property formatIds

formatIds?: (id: string | number) => {
    content: string;
    header: string;
    body: string;
};

The function to format the ids passed to the ModalHeader, Modalbody, and ModalContent

property id

id?: string;

The id of the modal

property initialFocusRef

initialFocusRef?: React.RefObject<HTMLElement>;

The ref of element to receive focus when the modal opens.

property isCentered

isCentered?: boolean;

If true, the modal will be centered on screen.

property isOpen

isOpen?: boolean;

If true, the modal when be opened.

property onClose

onClose?: (
    event: React.MouseEvent | React.KeyboardEvent,
    reason?: 'pressedEscape' | 'clickedOverlay'
) => void;

Callback invoked to close the modal.

property preserveScrollBarGap

preserveScrollBarGap?: boolean;

If true, a padding-right will be applied to the body element that's equal to the width of the scrollbar.
This can help prevent some unpleasant flickering effect and content adjustment when the modal opens

property returnFocusOnClose

returnFocusOnClose?: boolean;

If true, the modal will return focus to the element that triggered it when it closes.

property scrollBehavior

scrollBehavior?: 'inside' | 'outside';

Where scroll behaviour should originate. - If set to inside, scroll only occurs within the ModalBody. - If set to outside, the entire ModalContent will scroll within the viewport.

property size

size?: ModalSizes | BoxProps['maxWidth'];

The size (maxWidth) of the modal.

property useInert

useInert?: boolean;

A11y: If true, the siblings of the Modal will have aria-hidden set to true so that screen readers can only see the Modal.
This is commonly known as making the other elements **inert**
true

interface IModalContent

interface IModalContent {}

property children

children: React.ReactNode;

property onClick

onClick?: React.KeyboardEventHandler<HTMLElement>;

property zIndex

zIndex?: BoxProps['zIndex'];

interface INumberInput

interface INumberInput extends UseNumberInputProps {}

property isFullWidth

isFullWidth?: boolean;

property size

size?: InputProps['size'];

interface IPopover

interface IPopover {}

property closeOnBlur

closeOnBlur?: boolean;

If true, the popover will close when you blur out it by clicking outside or tabbing out

property closeOnEsc

closeOnEsc?: boolean;

If true, the popover will close when you hit the Esc key

property defaultIsOpen

defaultIsOpen?: boolean;

If true, the popover will be initially opened.

property gutter

gutter?: number;

The gap (in pixels) to apply between the popover and the target. Used by popper.js

property id

id?: string;

The html id attribute of the popover. If not provided, we generate a unique id.
This id is also used to auto-generate the aria-labelledby and aria-decribedby attributes that points to the PopoverHeader and PopoverBody

property initialFocusRef

initialFocusRef?: React.RefObject<HTMLElement>;

The ref of the element that should receive focus when the popover opens.

property isOpen

isOpen?: boolean;

If true, the popover will be opened in controlled mode.

property onClose

onClose?: () => void;

Callback fired when the popover closes

property onOpen

onOpen?: () => void;

Callback fired when the popover opens

property placement

placement?: PopperJS.Placement;

The placment of the popover

property returnFocusOnClose

returnFocusOnClose?: boolean;

If true, the popover will return focus to the trigger when it closes

property trigger

trigger?: 'hover' | 'click';

The interaction that triggers the popover.
hover - means the popover will open when you hover with mouse or focus with keyboard on the popover trigger
click - means the popover will open on click or press Enter to Space on keyboard

property usePortal

usePortal?: boolean;

If true the popover is displayed with a Portal. Rendering content inside a Portal allows the popover content to escape the physical bounds of its parent while still being positioned correctly relative to its target

interface IPopoverContent

interface IPopoverContent {}

property "aria-label"

'aria-label'?: string;

If the PopoverHeading isn't rendered, use this prop to add an accessible label to the popover.

property gutter

gutter?: number;

property onBlur

onBlur?: React.FocusEventHandler<HTMLElement>;

property onFocus

onFocus?: React.FocusEventHandler<HTMLElement>;

property onKeyDown

onKeyDown?: React.KeyboardEventHandler<HTMLElement>;

property onMouseEnter

onMouseEnter?: React.MouseEventHandler<HTMLElement>;

property onMouseLeave

onMouseLeave?: React.MouseEventHandler<HTMLElement>;

interface IPopoverTrigger

interface IPopoverTrigger {}

property children

children: React.ReactNode;

interface IProgress

interface IProgress {}

property color

color?: string;

property hasStripe

hasStripe?: boolean;

property isAnimated

isAnimated?: boolean;

property max

max?: number;

property min

min?: number;

property size

size?: 'lg' | 'md' | 'sm';

property value

value?: number;

interface IRadio

interface IRadio {}

property "aria-label"

'aria-label'?: string;

The aria-label attribute associated with the radio element

property "aria-labelledby"

'aria-labelledby'?: string;

The aria-labelledby attribute associated with the radio element

property children

children?: React.ReactNode;

property defaultIsChecked

defaultIsChecked?: boolean;

If true, the radio will be initially checked.

property id

id?: string;

id assigned to input

property isChecked

isChecked?: boolean;

If true, the radio will be checked. You'll need to pass onChange to update it's value (since it's now controlled)

property isDisabled

isDisabled?: boolean;

If true, the radio will be disabled

property isFullWidth

isFullWidth?: boolean;

If true, the radio will occupy the full width of it's parent container

property isInvalid

isInvalid?: boolean;

If true, the radio button will be invalid. This sets aria-invalid to true.

property name

name?: string;

The name of the input field in a radio (Useful for form submission).

property onBlur

onBlur?: React.FocusEventHandler<HTMLInputElement>;

property onChange

onChange?: React.ChangeEventHandler<HTMLInputElement>;

property onFocus

onFocus?: React.FocusEventHandler<HTMLInputElement>;

property size

size?: 'lg' | 'md' | 'sm';

The size of the radio button

property value

value?: string | number;

The value to be used in the radio button. This is the value that will be returned on form submission.

property variantColor

variantColor?: string;

The color scheme of the radio.
🚨Note: This should be one of the color keys in the theme that has 100 - 900 color values (e.g.green, red).
See Also
- http://chakra-ui.com/theme#colors

interface IRadioButtonGroup

interface IRadioButtonGroup {}

property children

children?: React.ReactNode;

property defaultValue

defaultValue?: IRadio['value'];

property isInline

isInline?: boolean;

property name

name?: IRadio['name'];

property onChange

onChange?: (value: IRadio['value']) => void;

property spacing

spacing?: BoxProps['margin'];

property value

value?: IRadio['value'];

interface IRadioGroup

interface IRadioGroup {}

property children

children?: React.ReactNode;

property defaultValue

defaultValue?: IRadio['value'];

property id

id?: string;

property isInline

isInline?: boolean;

property name

name?: string;

property onChange

onChange?: (
    event: React.ChangeEvent<HTMLInputElement>,
    value: IRadio['value']
) => void;

property spacing

spacing?: BoxProps['margin'];

property value

value?: IRadio['value'];

property variantColor

variantColor?: IRadio['variantColor'];

interface IScale

interface IScale {}

property children

children: (styles: Object) => React.ReactNode;

property duration

duration?: number;

property in

in: boolean;

property initialScale

initialScale?: number;

interface ISkeleton

interface ISkeleton {}

property colorEnd

colorEnd?: string;

The color at the animation end

property colorStart

colorStart?: string;

The color at the animation start

property fadeInDuration

fadeInDuration?: number;

The fadeIn duration in seconds

property isLoaded

isLoaded?: boolean;

Render only the children

property speed

speed?: number;

The animation speed in seconds

interface ISlide

interface ISlide {}

property duration

duration?: number;

property finalHeight

finalHeight?: BoxProps['height'];

property finalWidth

finalWidth?: BoxProps['maxWidth'];

property from

from: 'bottom' | 'top' | 'left' | 'right';

property in

in: boolean;

interface ISlideIn

interface ISlideIn {}

property children

children: (styles: Object) => React.ReactNode;

property duration

duration?: number;

property in

in: boolean;

property offset

offset?: string;

interface ISpinnerProps

interface ISpinnerProps {}

property color

color?: string;

The color of the spinner

property emptyColor

emptyColor?: string;

The color of the empty area in the spinner

property label

label?: string;

For accessibility, it's important to add a fallback loading text. This text will be visible to screen readers.

property size

size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';

The size of the spinner

property speed

speed?: string;

The speed of the spinner.
Example 1
<Spinner speed="0.2s"/>

property thickness

thickness?: string;

The thickness of the spinner
Example 1
<Spinner thickness="4px"/>

interface ISwitch

interface ISwitch {}

property "aria-label"

'aria-label'?: string;

The aria-label of the switch for accessibility.

property "aria-labelledby"

'aria-labelledby'?: string;

The aria-labelledby of the switch for accessibility.

property children

children?: React.ReactNode;

The children of the switch.

property color

color?: string;

The background color of the switch when checked
🚨Note: This should be one of the color keys in the theme that has 100 - 900 color values (e.g.green, red).
See Also
- http://chakra-ui.com/theme#colors

property defaultIsChecked

defaultIsChecked?: boolean;

If true, the switch will be initially checked.

property isChecked

isChecked?: boolean;

If true, set the switch to the checked state.

property isDisabled

isDisabled?: boolean;

If true, set the disabled to the invalid state.

property isInvalid

isInvalid?: boolean;

If true, set the switch to the invalid state.

property name

name?: string;

The input name of the switch when used in a form

property size

size?: 'sm' | 'md' | 'lg';

The size of the switch

property value

value?: string | number | boolean;

The value of the switch.

interface ITabList

interface ITabList {}

property children

children: React.ReactNode;

The children of the tab list should be Tab.

interface ITabPanel

interface ITabPanel {}

property children

children: React.ReactNode;

The children of the tab panel.

property id

id?: string;

The id of the tab panel. Used during cloneElement

property isSelected

isSelected?: boolean;

If true, indicates that the panel is selected. Used during cloneElement

property selectedPanelRef

selectedPanelRef?: React.RefObject<HTMLElement>;

The ref of the panel if it is selected. Used during cloneElement

interface ITabPanels

interface ITabPanels {}

property children

children: React.ReactNode;

The children of the tab panels should be TabPanel.

interface ITabs

interface ITabs {}

property align

align?: 'start' | 'center' | 'end';

The alignment of the tabs

property children

children: React.ReactNode;

The children of the tabs should be TabPanel and TabList.

property defaultIndex

defaultIndex?: number;

The index of the tab that should be activated initially

property index

index?: number;

The index of the activated tab

property isFitted

isFitted?: boolean;

If true, tabs will stretch to width of the tablist.

property isManual

isManual?: boolean;

If true, the tabs will be manually activated and display its panel by pressing Space or Enter.
If false, the tabs will be automatically activated and their panel is displayed when they receive focus.

property onChange

onChange?: (index: number) => void;

Callback when the index (controlled or un-controlled) changes.

property orientation

orientation?: 'vertical' | 'horizontal';

The orientation of the .

property size

size?: 'sm' | 'md' | 'lg';

The size of the tab (affects the font-size and padding).

property variant

variant?:
    | 'line'
    | 'enclosed'
    | 'enclosed-colored'
    | 'soft-rounded'
    | 'solid-rounded'
    | 'unstyled';

The style of the tabs to use

property variantColor

variantColor?: string;

The color scheme of the tabs
🚨Note: This should be one of the color keys in the theme that has 100 - 900 color values (e.g.green, red).
See Also
- http://chakra-ui.com/theme#colors

interface ITag

interface ITag {}

property size

size?: 'sm' | 'md' | 'lg';

The size of the tag.

property variant

variant?: IBadge['variant'];

The variant of the tag.

property variantColor

variantColor?: IBadge['variantColor'];

The color scheme of the tag.

interface ITagCloseButton

interface ITagCloseButton {}

property isDisabled

isDisabled?: boolean;

interface IToast

interface IToast extends IAlert {}

property description

description?: string;

The description of the toast

property duration

duration?: number | null;

Duration before dismiss in milliseconds, or null to never dismiss.

property isClosable

isClosable?: boolean;

If true adds a close button to the toast.

property onClose

onClose?: () => void;

Callback function to close the toast.

property position

position?: keyof typeof Position;

One of toasted-notes positions.

property title

title?: string;

The title of the toast.

interface ITooltip

interface ITooltip {}

property "aria-label"

'aria-label': string;

property children

children: React.ReactNode;

The ReactNode to be used as the trigger of the tooltip.

property closeOnClick

closeOnClick?: boolean;

If true hide the tooltip, when the trigger is clicked.

property defaultIsOpen

defaultIsOpen?: boolean;

If true, the tooltip is initially shown.

property hasArrow

hasArrow?: boolean;

If true display an arrow tip on the tooltip.

property hideDelay

hideDelay?: number;

The delay in ms for the tooltip to hide

property isOpen

isOpen?: boolean;

If true, the tooltip is shown.

property label

label?: string;

The label of the tooltip.

property onClose

onClose?: () => void;

Function called when the tooltip hides.

property onOpen

onOpen?: () => void;

Function called when the tooltip shows.

property placement

placement?: PopperProps['placement'];

property shouldWrapChildren

shouldWrapChildren?: boolean;

If true, the tooltip will wrap the children in a span with tabIndex=0

property showDelay

showDelay?: number;

The delay in ms for the tooltip to show

interface IUseColorMode

interface IUseColorMode {}

property colorMode

colorMode: 'light' | 'dark';

property toggleColorMode

toggleColorMode: () => void;

interface PopoverContextValue

interface PopoverContextValue {}

property bodyId

bodyId: string;

property closeOnEsc

closeOnEsc: boolean;

property headerId

headerId: string;

property initialFocusRef

initialFocusRef: boolean;

property isHoveringRef

isHoveringRef: React.RefObject<boolean>;

property isOpen

isOpen: boolean;

property onBlur

onBlur: React.FocusEventHandler<HTMLElement>;

property onClose

onClose: () => void;

property onOpen

onOpen: () => void;

property onToggle

onToggle: () => void;

property placement

placement: PopperJS.Placement;

property popoverId

popoverId: string;

property popoverRef

popoverRef: React.RefObject<HTMLElement>;

property referenceRef

referenceRef: React.RefObject<HTMLElement>;

property trigger

trigger: 'hover' | 'click';

property usePortal

usePortal: boolean;

interface PortalProps

interface PortalProps {}

property children

children: React.ReactNode;

The children to render into the container.

property container

container?: React.ReactInstance | (() => React.ReactInstance | null) | null;

A node, component instance, or function that returns either. The container will have the portal children appended to it. By default, it uses the body of the top-level document object, so it's simply document.body most of the time.

property isDisabled

isDisabled?: boolean;

If true, the children stay within it's parent DOM hierarchy.

property onRendered

onRendered?: () => void;

Callback fired once the children has been mounted into the container.

interface UseFormControlProps

interface UseFormControlProps {}

property isDisabled

isDisabled?: boolean;

If true set the form control to the disabled state.

property isInvalid

isInvalid?: boolean;

If true set the form control to the invalid state.

property isReadOnly

isReadOnly?: boolean;

If true set the form control to the read only state.

property isRequired

isRequired?: boolean;

If true set the form control to be required.

Type Aliases

type AccordionHeaderProps

type AccordionHeaderProps = PseudoBoxProps & React.ButtonHTMLAttributes<any>;

type AccordionItemChildren

type AccordionItemChildren =
    | { children(props: IAccordionItemRenderProps): React.ReactNode }
    | { children: React.ReactNode };

The content of the accordion. The children must be the AccordionHeader and AccordionPanel components.

type AccordionItemProps

type AccordionItemProps = IAccordionItem & AccordionItemChildren & PseudoBoxProps;

type AccordionProps

type AccordionProps = IAccordion & Omit<BoxProps, 'onChange'>;

type AlertProps

type AlertProps = IAlert & BoxProps;

type AspectRatioBoxProps

type AspectRatioBoxProps = IAspectRatio & BoxProps;

type AvatarGroupProps

type AvatarGroupProps = IAvatarGroup & Omit<BoxProps, 'size'>;

type AvatarNameProps

type AvatarNameProps = IAvatar['name'] & BoxProps;

type AvatarProps

type AvatarProps = IAvatar & Omit<BoxProps, 'size'>;

type BadgeProps

type BadgeProps = IBadge & BoxProps;

type BoxProps

type BoxProps = BoxHTMLProps &
    StyledSystemProps &
    ModifiedStyledSystemProps &
    As &
    Truncated;

type BreadcrumbItemProps

type BreadcrumbItemProps = BreadcrumbProps & {
    /**
     * If `true`, indicates that the breadcrumb item is active, adds
     * `aria-current=page` and renders a `span`
     */
    isCurrentPage?: boolean;
};

type ButtonGroupProps

type ButtonGroupProps = IButtonGroup & Omit<BoxProps, 'size'>;

type ButtonProps

type ButtonProps = IButton & Omit<PseudoBoxProps, 'size'>;

type CheckboxGroupProps

type CheckboxGroupProps = ICheckboxGroup & Omit<BoxProps, 'onChange' | 'size'>;

type CheckboxProps

type CheckboxProps = ICheckbox &
    React.RefAttributes<HTMLInputElement> &
    Omit<BoxProps, 'onChange' | 'defaultChecked'>;

type CloseButtonProps

type CloseButtonProps = ICloseButton & Omit<PseudoBoxProps, 'size'>;

type CollapseProps

type CollapseProps = AnimateHeightProps & ICollapse & BoxProps;

type ControlBoxProps

type ControlBoxProps = IControlBox & BoxProps;

type CSSResetProps

type CSSResetProps = {
    config?: (theme: ITheme, defaultConfig?: ConfigReturnType) => ConfigReturnType;
};

type EditableProps

type EditableProps = IEditable & Omit<BoxProps, 'onChange' | 'onSubmit'>;

type FlexProps

type FlexProps = IFlex & BoxProps;

type FormControlProps

type FormControlProps = IFormControl & BoxProps;

type GridProps

type GridProps = BoxProps & IGrid;

type HeadingProps

type HeadingProps = IHeading & Omit<BoxProps, 'size'>;

type IconButtonProps

type IconButtonProps = IIconButton & _ButtonProps;

type IconProps

type IconProps = IIcon & Omit<BoxProps, 'size'>;

type IconsType

type IconsType = Record<string, Icon>;

type ImageProps

type ImageProps = IImage & BoxProps;

type InputAddonProps

type InputAddonProps = IInputAddon & BoxProps;

type InputAttributes

type InputAttributes = React.InputHTMLAttributes<HTMLInputElement>;

type InputGroupProps

type InputGroupProps = IInputGroup & BoxProps;

type InputProps

type InputProps<T = HTMLInputElement> = IInput<T> &
    PseudoBoxProps &
    InputHTMLAttributes &
    React.RefAttributes<T>;

type InternalState

type InternalState = { isOpen?: boolean; onClose?: () => void };

type ISelect

type ISelect = IInput<HTMLSelectElement> &
    MergeSelectAttributes &
    React.RefAttributes<HTMLSelectElement>;

type ITheme

type ITheme = DefaultTheme;

type LinkProps

type LinkProps = ILink & PseudoBoxProps & React.HTMLProps<HTMLAnchorElement>;

type MenuButtonProps

type MenuButtonProps = PseudoBoxProps & IMenuButton;

type MenuGroupProps

type MenuGroupProps = IMenuGroup & BoxProps;

type MenuItemOptionProps

type MenuItemOptionProps = PseudoBoxProps & IMenuItemOption;

type MenuItemProps

type MenuItemProps = IMenuItem & PseudoBoxProps;

type MenuListProps

type MenuListProps = IMenuList & PopperProps;

type MenuOptionGroupProps

type MenuOptionGroupProps = MenuGroupProps & IMenuOptionGroup;

type MenuProps

type MenuProps = IMenu & MenuChildren;

type ModalContentProps

type ModalContentProps = IModalContent & BoxProps;

type ModalSizes

type ModalSizes =
    | 'xs'
    | 'sm'
    | 'md'
    | 'lg'
    | 'xl'
    | '2xl'
    | '3xl'
    | '4xl'
    | '5xl'
    | '6xl'
    | 'full';

type NumberInputProps

type NumberInputProps = INumberInput &
    Omit<FlexProps, 'onChange' | 'ref' | 'size'> &
    React.RefAttributes<HTMLInputElement>;

type OmittedTypes

type OmittedTypes =
    | 'size'
    | 'disabled'
    | 'required'
    | 'checked'
    | 'defaultChecked'
    | 'readOnly';

type PopoverChildren

type PopoverChildren =
    | {
          children: React.ReactNode;
      }
    | { children: (props: InternalState) => React.ReactNode };

The content of the popover

type PopoverCloseButtonProps

type PopoverCloseButtonProps = PseudoBoxProps & {
    onClick?: React.MouseEventHandler<HTMLElement>;
};

type PopoverContentProps

type PopoverContentProps = IPopoverContent & PopperProps;

type PopoverProps

type PopoverProps = IPopover & PopoverChildren;

type ProgressProps

type ProgressProps = IProgress & BoxProps;

type PseudoBoxProps

type PseudoBoxProps = IPseudoBoxProps & BoxProps;

type RadioButtonGroupProps

type RadioButtonGroupProps = IRadioButtonGroup & Omit<BoxProps, 'onChange'>;

type RadioGroupProps

type RadioGroupProps = IRadioGroup & Omit<BoxProps, 'onChange'>;

type RadioProps

type RadioProps = IRadio &
    Omit<BoxProps, 'onChange' | 'ref' | 'onFocus' | 'onBlur' | 'size'> &
    React.RefAttributes<HTMLInputElement>;

type ScaleProps

type ScaleProps = IScale & TransitionProps<boolean>;

type SelectProps

type SelectProps = ISelect & {
    /**
     * The props passed to the select's root element.
     *
     * The internal structure looks like this:
     *
     * ```jsx
     * <SelectWrapper {...rootProps}>
     *  <Select /> <== most props go here directly
     *  <SelectIconWrapper />
     * </SelectWrapper>
     * ```
     *
     * In some scenario, you might want to pass some other props to the root.
     */
    rootProps?: BoxProps;
    /**
     * The placeholder for the select. This renders an `<option>` with empty value
     *
     * ```jsx
     * <option value="">{placeholder}</option>
     * ```
     */
    placeholder?: string;
    /**
     * The icon component to render.
     * You can use an icon in Chakra or pass a custom icon
     * from libraries like `react-icons`
     *
     * @example
     * ```jsx
     * <Select icon="arrow-down" />
     * <Select icon={MdArrowDownward} />
     * ```
     */
    icon?: string | React.ElementType;
    /**
     * The size of the icon
     */
    iconSize?: BoxProps['size'];
    /**
     * The color of the icon
     */
    iconColor?: BoxProps['color'];
};

type SimpleGridProps

type SimpleGridProps = BoxProps & ISimpleGrid;

type SkeletonProps

type SkeletonProps = ISkeleton & BoxProps;

type SlideInProps

type SlideInProps = ISlideIn & TransitionProps<boolean>;

type SlideProps

type SlideProps = ISlide & TransitionProps<boolean>;

type SliderProps

type SliderProps = ISlider & Omit<BoxProps, 'onChange' | 'size'>;

type SpinnerProps

type SpinnerProps = Omit<BoxProps, 'size'> & ISpinnerProps;

type StackProps

type StackProps = IStack & BoxProps;

type StatArrowProps

type StatArrowProps = IconProps & {
    type?: 'increase' | 'decrease';
    'aria-label'?: string;
};

type stringOrNumber

type stringOrNumber = string | number | Array<number | string>;

type SwitchProps

type SwitchProps = ISwitch & Omit<BoxProps, 'defaultChecked' | 'size'>;

type TabListProps

type TabListProps = ITabList & FlexProps;

type TabPanelProps

type TabPanelProps = ITabPanel & BoxProps;

type TabPanelsProps

type TabPanelsProps = ITabPanels & BoxProps;

type TabsProps

type TabsProps = ITabs & Omit<BoxProps, 'onChange' | 'size'>;

type TagProps

type TagProps = ITag & Omit<PseudoBoxProps, 'size'>;

type TooltipProps

type TooltipProps = ITooltip & BoxProps;

type useToastOptions

type useToastOptions = IToast & RenderOption;

type VariantColor

type VariantColor = keyof Omit<Colors, 'transparent' | 'current'>;

Package Files (76)

Dependencies (16)

Dev Dependencies (0)

No dev dependencies.

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/core.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@chakra-ui/core)

HTML

<a href="https://www.jsdocs.io/package/@chakra-ui/core"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 2 years ago.
Package analyzed in 7506 ms.
Missing or incorrect documentation? Open an issue for this package.