@chakra-ui/react
- Version 3.3.1
- Published
- 1.96 MB
- 7 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
- AbsoluteCenter
- AccordionItem
- AccordionItemBody
- AccordionItemContent
- AccordionItemIndicator
- AccordionItemTrigger
- AccordionPropsProvider
- AccordionRoot
- AccordionRootProvider
- ActionBarCloseTrigger
- ActionBarContent
- ActionBarPositioner
- ActionBarPropsProvider
- ActionBarRoot
- ActionBarRootProvider
- ActionBarSelectionTrigger
- ActionBarSeparator
- AlertContent
- AlertDescription
- AlertIndicator
- AlertPropsProvider
- AlertRoot
- AlertTitle
- AspectRatio
- AvatarFallback
- AvatarIcon
- AvatarImage
- AvatarPropsProvider
- AvatarRoot
- AvatarRootProvider
- Badge
- BadgePropsProvider
- Bleed
- BlockquoteCaption
- BlockquoteContent
- BlockquoteIcon
- BlockquotePropsProvider
- BlockquoteRoot
- Box
- BreadcrumbCurrentLink
- BreadcrumbEllipsis
- BreadcrumbItem
- BreadcrumbLink
- BreadcrumbList
- BreadcrumbPropsProvider
- BreadcrumbRoot
- BreadcrumbSeparator
- Button
- CardBody
- CardDescription
- CardFooter
- CardHeader
- CardPropsProvider
- CardRoot
- CardTitle
- Center
- chakra
- CheckboxCardAddon
- CheckboxCardContent
- CheckboxCardControl
- CheckboxCardDescription
- CheckboxCardHiddenInput
- CheckboxCardIndicator
- CheckboxCardLabel
- CheckboxCardRoot
- CheckboxCardRootPropsProvider
- CheckboxCardRootProvider
- CheckboxControl
- CheckboxGroup
- CheckboxHiddenInput
- CheckboxIndicator
- CheckboxLabel
- CheckboxPropsProvider
- CheckboxRoot
- CheckboxRootProvider
- Checkmark
- Circle
- ClipboardControl
- ClipboardIndicator
- ClipboardInput
- ClipboardLabel
- ClipboardPropsProvider
- ClipboardRoot
- ClipboardRootProvider
- ClipboardTrigger
- ClipboardValueText
- Code
- CodePropsProvider
- CollapsibleContent
- CollapsiblePropsProvider
- CollapsibleRoot
- CollapsibleRootProvider
- CollapsibleTrigger
- ColorPickerArea
- ColorPickerAreaBackground
- ColorPickerAreaThumb
- ColorPickerChannelInput
- ColorPickerChannelSlider
- ColorPickerChannelSliderLabel
- ColorPickerChannelSliderThumb
- ColorPickerChannelSliderTrack
- ColorPickerChannelSliderValueText
- ColorPickerContent
- ColorPickerControl
- ColorPickerEyeDropperTrigger
- ColorPickerFormatSelect
- ColorPickerFormatTrigger
- ColorPickerHiddenInput
- ColorPickerLabel
- ColorPickerPositioner
- ColorPickerPropsProvider
- ColorPickerRoot
- ColorPickerRootProvider
- ColorPickerSwatch
- ColorPickerSwatchGroup
- ColorPickerSwatchIndicator
- ColorPickerSwatchTrigger
- ColorPickerTransparencyGrid
- ColorPickerTrigger
- ColorPickerValueSwatch
- ColorPickerValueText
- ColorPickerView
- ColorSwatch
- ColorSwatchPropsProvider
- Container
- ContainerPropsProvider
- DataListItem
- DataListItemLabel
- DataListItemValue
- DataListPropsProvider
- DataListRoot
- defaultBaseConfig
- defaultConfig
- defaultSystem
- defineGlobalStyles
- defineKeyframes
- defineRecipe
- defineSemanticTokens
- defineSlotRecipe
- defineStyle
- defineTokens
- DialogActionTrigger
- DialogBackdrop
- DialogBody
- DialogCloseTrigger
- DialogContent
- DialogDescription
- DialogFooter
- DialogHeader
- DialogPositioner
- DialogPropsProvider
- DialogRoot
- DialogRootProvider
- DialogTitle
- DialogTrigger
- DrawerActionTrigger
- DrawerBackdrop
- DrawerBody
- DrawerCloseTrigger
- DrawerContent
- DrawerDescription
- DrawerFooter
- DrawerHeader
- DrawerPositioner
- DrawerRoot
- DrawerRootPropsProvider
- DrawerRootProvider
- DrawerTitle
- DrawerTrigger
- EditableArea
- EditableCancelTrigger
- EditableControl
- EditableEditTrigger
- EditableInput
- EditablePreview
- EditablePropsProvider
- EditableRoot
- EditableRootProvider
- EditableSubmitTrigger
- EditableTextarea
- Em
- EMPTY_SLOT_STYLES
- EMPTY_STYLES
- EmptyStateContent
- EmptyStateDescription
- EmptyStateIndicator
- EmptyStatePropsProvider
- EmptyStateRoot
- EmptyStateTitle
- FieldErrorIcon
- FieldErrorText
- FieldHelperText
- FieldLabel
- FieldPropsProvider
- FieldRequiredIndicator
- FieldRoot
- FieldsetContent
- FieldsetErrorText
- FieldsetHelperText
- FieldsetLegend
- FieldsetRoot
- FileUploadClearTrigger
- FileUploadDropzone
- FileUploadDropzoneContent
- FileUploadHiddenInput
- FileUploadItem
- FileUploadItemContent
- FileUploadItemDeleteTrigger
- FileUploadItemGroup
- FileUploadItemName
- FileUploadItemPreview
- FileUploadItemPreviewImage
- FileUploadItemSizeText
- FileUploadLabel
- FileUploadPropsProvider
- FileUploadRoot
- FileUploadRootProvider
- FileUploadTrigger
- Flex
- Float
- FormatByte
- FormatNumber
- Grid
- GridItem
- Group
- Heading
- HeadingPropsProvider
- HoverCardArrow
- HoverCardArrowTip
- HoverCardContent
- HoverCardPositioner
- HoverCardPropsProvider
- HoverCardRoot
- HoverCardRootProvider
- HoverCardTrigger
- HStack
- Icon
- IconButton
- Image
- Input
- InputAddon
- InputElement
- InputPropsProvider
- Kbd
- Link
- LinkBox
- LinkOverlay
- LinkPropsProvider
- ListIndicator
- ListItem
- ListRoot
- ListRootPropsProvider
- Mark
- MarkPropsProvider
- MenuArrow
- MenuArrowTip
- MenuCheckboxItem
- MenuContent
- MenuContextTrigger
- MenuIndicator
- MenuItem
- MenuItemCommand
- MenuItemGroup
- MenuItemGroupLabel
- MenuItemIndicator
- MenuItemText
- MenuPositioner
- MenuPropsProvider
- MenuRadioItem
- MenuRadioItemGroup
- MenuRoot
- MenuRootProvider
- MenuSeparator
- MenuTrigger
- MenuTriggerItem
- NativeSelectField
- NativeSelectPropsProvider
- NativeSelectRoot
- NumberInputControl
- NumberInputDecrementTrigger
- NumberInputIncrementTrigger
- NumberInputInput
- NumberInputLabel
- NumberInputPropsProvider
- NumberInputRoot
- NumberInputRootProvider
- NumberInputScrubber
- NumberInputValueText
- PaginationEllipsis
- PaginationItem
- PaginationNextTrigger
- PaginationPrevTrigger
- PaginationPropsProvider
- PaginationRoot
- PaginationRootProvider
- PinInputControl
- PinInputHiddenInput
- PinInputInput
- PinInputLabel
- PinInputPropsProvider
- PinInputRoot
- PinInputRootProvider
- PopoverAnchor
- PopoverArrow
- PopoverArrowTip
- PopoverBody
- PopoverCloseTrigger
- PopoverContent
- PopoverDescription
- PopoverFooter
- PopoverHeader
- PopoverPositioner
- PopoverPropsProvider
- PopoverRoot
- PopoverRootProvider
- PopoverTitle
- PopoverTrigger
- ProgressCircleCircle
- ProgressCircleLabel
- ProgressCirclePropsProvider
- ProgressCircleRange
- ProgressCircleRoot
- ProgressCircleRootProvider
- ProgressCircleTrack
- ProgressCircleValueText
- ProgressLabel
- ProgressPropsProvider
- ProgressRange
- ProgressRoot
- ProgressRootProvider
- ProgressTrack
- ProgressValueText
- QrCodeFrame
- QrCodeOverlay
- QrCodePattern
- QrCodePropsProvider
- QrCodeRoot
- QrCodeRootProvider
- RadioCardContext
- RadioCardItem
- RadioCardItemAddon
- RadioCardItemContent
- RadioCardItemControl
- RadioCardItemDescription
- RadioCardItemHiddenInput
- RadioCardItemIndicator
- RadioCardItemText
- RadioCardLabel
- RadioCardPropsProvider
- RadioCardRoot
- RadioCardRootProvider
- RadioGroupContext
- RadioGroupItem
- RadioGroupItemControl
- RadioGroupItemHiddenInput
- RadioGroupItemIndicator
- RadioGroupItemText
- RadioGroupLabel
- RadioGroupPropsProvider
- RadioGroupRoot
- RadioGroupRootProvider
- Radiomark
- RatingGroupControl
- RatingGroupHiddenInput
- RatingGroupItem
- RatingGroupItemIndicator
- RatingGroupLabel
- RatingGroupPropsProvider
- RatingGroupRoot
- RatingGroupRootProvider
- SegmentGroupIndicator
- SegmentGroupItem
- SegmentGroupItemHiddenInput
- SegmentGroupItemText
- SegmentGroupPropsProvider
- SegmentGroupRoot
- SegmentGroupRootProvider
- SelectClearTrigger
- SelectContent
- SelectControl
- SelectHiddenSelect
- SelectIndicator
- SelectIndicatorGroup
- SelectItem
- SelectItemGroup
- SelectItemGroupLabel
- SelectItemIndicator
- SelectItemText
- SelectLabel
- SelectPositioner
- SelectPropsProvider
- SelectRoot
- SelectRootProvider
- SelectTrigger
- SelectValueText
- Separator
- SeparatorPropsProvider
- SimpleGrid
- Skeleton
- SkeletonPropsProvider
- SkipNavContent
- SkipNavLink
- SliderControl
- SliderDraggingIndicator
- SliderHiddenInput
- SliderLabel
- SliderMarker
- SliderMarkerGroup
- SliderMarkerIndicator
- SliderPropsProvider
- SliderRange
- SliderRoot
- SliderRootProvider
- SliderThumb
- SliderTrack
- SliderValueText
- Spacer
- Span
- Spinner
- SpinnerPropsProvider
- Square
- Stack
- StackSeparator
- StatDownIndicator
- StatHelpText
- StatLabel
- StatPropsProvider
- StatRoot
- StatUpIndicator
- StatusIndicator
- StatusPropsProvider
- StatusRoot
- StatValueText
- StatValueUnit
- StepsCompletedContent
- StepsContent
- StepsContext
- StepsDescription
- StepsIndicator
- StepsItem
- StepsItemContext
- StepsList
- StepsNextTrigger
- StepsNumber
- StepsPrevTrigger
- StepsPropsProvider
- StepsRoot
- StepsRootProvider
- StepsSeparator
- StepsTitle
- StepsTrigger
- Sticky
- Strong
- SwitchControl
- SwitchHiddenInput
- SwitchIndicator
- SwitchLabel
- SwitchPropsProvider
- SwitchRoot
- SwitchRootProvider
- SwitchThumb
- SwitchThumbIndicator
- TableBody
- TableCaption
- TableCell
- TableColumn
- TableColumnGroup
- TableColumnHeader
- TableFooter
- TableHeader
- TableRoot
- TableRootPropsProvider
- TableRow
- TableScrollArea
- TabsContent
- TabsContentGroup
- TabsIndicator
- TabsList
- TabsPropsProvider
- TabsRoot
- TabsRootProvider
- TabsTrigger
- TagCloseTrigger
- TagEndElement
- TagLabel
- TagRoot
- TagRootPropsProvider
- TagStartElement
- Text
- Textarea
- TextareaPropsProvider
- TextPropsProvider
- Theme
- TimelineConnector
- TimelineContent
- TimelineDescription
- TimelineIndicator
- TimelineItem
- TimelineRoot
- TimelineRootPropsProvider
- TimelineSeparator
- TimelineTitle
- ToastActionTrigger
- ToastCloseTrigger
- ToastDescription
- Toaster
- ToastIndicator
- ToastRoot
- ToastTitle
- ToggleIndicator
- TogglePropsProvider
- ToggleRoot
- TooltipArrow
- TooltipArrowTip
- TooltipContent
- TooltipPositioner
- TooltipPropsProvider
- TooltipRoot
- TooltipRootProvider
- TooltipTrigger
- VisuallyHidden
- visuallyHiddenStyle
- VStack
Functions
- AccordionContext()
- AccordionItemContext()
- ActionBarContext()
- AvatarContext()
- ChakraProvider()
- CheckboxCardContext()
- CheckboxContext()
- ClientOnly()
- ClipboardContext()
- CollapsibleContext()
- ColorPickerContext()
- ColorSwatchMix()
- createContext()
- createIcon()
- createRecipeContext()
- createSlotRecipeContext()
- createSystem()
- defineAnimationStyles()
- defineConditions()
- defineConfig()
- defineLayerStyles()
- defineTextStyles()
- DialogContext()
- DrawerContext()
- EditableContext()
- FieldsetContext()
- FileUploadContext()
- For()
- Highlight()
- HoverCardContext()
- isValidSystem()
- MenuContext()
- MenuItemContext()
- mergeConfigs()
- mergeProps()
- mergeRefs()
- NativeSelectIndicator()
- NumberInputContext()
- PaginationContext()
- PinInputContext()
- PopoverContext()
- ProgressCircleContext()
- ProgressContext()
- RatingGroupContext()
- RatingGroupItemContext()
- RecipePropsProvider()
- SegmentGroupContext()
- SegmentGroupItemContext()
- SelectContext()
- SelectItemContext()
- Show()
- SliderContext()
- StepsStatus()
- SwitchContext()
- TabsContext()
- ToggleContext()
- TooltipContext()
- useAccordionStyles()
- useActionBarStyles()
- useAlertStyles()
- useAvatarStyles()
- useBlockquoteStyles()
- useBreadcrumbStyles()
- useBreakpoint()
- useBreakpointValue()
- useCallbackRef()
- useCardStyles()
- useChakraContext()
- useCheckboxCardStyles()
- useCheckboxStyles()
- useClipboardStyles()
- useCollapsibleStyles()
- useColorPickerStyles()
- useControllableProp()
- useControllableState()
- useDataListStyles()
- useDialogStyles()
- useDisclosure()
- useDrawerStyles()
- useEditableStyles()
- useEmptyStateStyles()
- useFieldStyles()
- useFileUploadStyles()
- useHoverCardStyles()
- useListStyles()
- useMediaQuery()
- useMenuStyles()
- useNativeSelectStyles()
- useNumberInputStyles()
- usePaginationStyles()
- useParentRecipeProps()
- usePinInputStyles()
- usePopoverStyles()
- useProgressCircleStyles()
- useProgressStyles()
- useQrCodeStyles()
- useRadioCardStyles()
- useRadioGroupStyles()
- useRatingGroupStyles()
- useRecipe()
- useSegmentGroupStyles()
- useSelectStyles()
- useSliderStyles()
- useSlotRecipe()
- useStatStyles()
- useStatusStyles()
- useStepsStyles()
- useSwitchStyles()
- useTableStyles()
- useTabsStyles()
- useTagStyles()
- useTimelineStyles()
- useToastStyles()
- useToggleStyles()
- useToken()
- useTooltipStyles()
Interfaces
ConfigRecipeSlots
- accordion
- actionBar
- alert
- avatar
- blockquote
- breadcrumb
- card
- checkbox
- checkboxCard
- collapsible
- colorPicker
- dataList
- dialog
- drawer
- editable
- emptyState
- field
- fieldset
- fileUpload
- hoverCard
- list
- menu
- nativeSelect
- numberInput
- pinInput
- popover
- progress
- progressCircle
- qrCode
- radioCard
- radioGroup
- ratingGroup
- segmentGroup
- select
- slider
- stat
- status
- steps
- switch
- table
- tabs
- tag
- timeline
- toast
- tooltip
Type Aliases
- AnimationStyle
- AnimationStyles
- ChakraComponent
- ColorPalette
- ConditionalValue
- DataAttr
- HTMLChakraProps
- HtmlProp
- InferRecipeProps
- JsxElement
- JsxHtmlProps
- LayerStyle
- LayerStyles
- PatchHtmlProps
- RecipeCompoundSelection
- RecipeCompoundVariant
- RecipeCreatorFn
- RecipeIdentityFn
- RecipeKey
- RecipeProps
- RecipeSelection
- RecipeVariantFn
- RecipeVariantMap
- RecipeVariantProps
- RecipeVariantRecord
- SlotRecipeCompoundVariant
- SlotRecipeConfig
- SlotRecipeCreatorFn
- SlotRecipeFn
- SlotRecipeIdentityFn
- SlotRecipeKey
- SlotRecipeProps
- SlotRecipeRecord
- SlotRecipeVariantFn
- SlotRecipeVariantRecord
- StyledFactoryFn
- SystemStyleObject
- TextStyle
- TextStyles
- Token
- Tokens
- UseBreakpointValueOptions
- UseDisclosureReturn
Namespaces
ColorPicker
- Area
- AreaBackground
- AreaBackgroundProps
- AreaProps
- AreaThumb
- AreaThumbProps
- ChannelInput
- ChannelInputProps
- ChannelSlider
- ChannelSliderLabel
- ChannelSliderLabelProps
- ChannelSliderProps
- ChannelSliderThumb
- ChannelSliderThumbProps
- ChannelSliderTrack
- ChannelSliderTrackProps
- ChannelSliderValueText
- ChannelSliderValueTextProps
- Content
- ContentProps
- Context()
- Control
- ControlProps
- EyeDropperTrigger
- EyeDropperTriggerProps
- FormatSelect
- FormatSelectProps
- FormatTrigger
- FormatTriggerProps
- HiddenInput
- Label
- LabelProps
- Positioner
- PositionerProps
- PropsProvider
- Root
- RootProps
- RootProvider
- RootProviderProps
- Swatch
- SwatchGroup
- SwatchGroupProps
- SwatchIndicator
- SwatchIndicatorProps
- SwatchProps
- SwatchTrigger
- SwatchTriggerProps
- TransparencyGrid
- TransparencyGridProps
- Trigger
- TriggerProps
- ValueChangeDetails
- ValueSwatch
- ValueSwatchProps
- ValueText
- ValueTextProps
- View
- ViewProps
Dialog
- ActionTrigger
- ActionTriggerProps
- Backdrop
- BackdropProps
- Body
- BodyProps
- CloseTrigger
- CloseTriggerProps
- Content
- ContentProps
- Context()
- Description
- DescriptionProps
- Footer
- FooterProps
- Header
- HeaderProps
- OpenChangeDetails
- Positioner
- PositionerProps
- PropsProvider
- Root
- RootProps
- RootProvider
- RootProviderProps
- Title
- TitleProps
- Trigger
- TriggerProps
Drawer
- ActionTrigger
- ActionTriggerProps
- Backdrop
- BackdropProps
- Body
- BodyProps
- CloseTrigger
- CloseTriggerProps
- Content
- ContentProps
- Context()
- Description
- DescriptionProps
- Footer
- FooterProps
- Header
- HeaderProps
- OpenChangeDetails
- Positioner
- PositionerProps
- Root
- RootProps
- RootPropsProvider
- RootProvider
- RootProviderProps
- Title
- TitleProps
- Trigger
- TriggerProps
FileUpload
- ClearTrigger
- Context()
- Dropzone
- DropzoneContent
- DropzoneContentProps
- DropzoneProps
- FileAcceptDetails
- FileChangeDetails
- FileRejectDetails
- HiddenInput
- Item
- ItemContent
- ItemContentProps
- ItemDeleteTrigger
- ItemDeleteTriggerProps
- ItemGroup
- ItemGroupProps
- ItemName
- ItemNameProps
- ItemPreview
- ItemPreviewImage
- ItemPreviewImageProps
- ItemPreviewProps
- ItemProps
- ItemSizeText
- ItemSizeTextProps
- Label
- LabelProps
- PropsProvider
- Root
- RootProps
- RootProvider
- RootProviderProps
- Trigger
- TriggerProps
Menu
- Arrow
- ArrowProps
- ArrowTip
- ArrowTipProps
- CheckboxItem
- CheckboxItemProps
- CommandProps
- Content
- ContentProps
- Context()
- ContextTrigger
- ContextTriggerProps
- HighlightChangeDetails
- Indicator
- IndicatorProps
- Item
- ItemCommand
- ItemCommandProps
- ItemContext()
- ItemGroup
- ItemGroupLabel
- ItemGroupLabelProps
- ItemGroupProps
- ItemIndicator
- ItemIndicatorProps
- ItemProps
- ItemText
- ItemTextProps
- OpenChangeDetails
- Positioner
- PositionerProps
- RadioItem
- RadioItemGroup
- RadioItemGroupProps
- RadioItemProps
- Root
- RootProps
- RootPropsProvider
- RootProvider
- RootProviderProps
- SelectionDetails
- Separator
- SeparatorProps
- Trigger
- TriggerItem
- TriggerItemProps
- TriggerProps
Popover
- Anchor
- AnchorProps
- Arrow
- ArrowProps
- ArrowTip
- ArrowTipProps
- Body
- BodyProps
- CloseTrigger
- CloseTriggerProps
- Content
- ContentProps
- Context()
- Description
- DescriptionProps
- Footer
- FooterProps
- Header
- HeaderProps
- OpenChangeDetails
- Positioner
- PositionerProps
- PropsProvider
- Root
- RootProps
- RootProvider
- RootProviderProps
- Title
- TitleProps
- Trigger
- TriggerProps
- usePopoverStyles()
Select
- ClearTrigger
- ClearTriggerProps
- Content
- ContentProps
- Context()
- Control
- ControlProps
- HiddenSelect
- HighlightChangeDetails
- Indicator
- IndicatorGroup
- IndicatorGroupProps
- IndicatorProps
- Item
- ItemContext()
- ItemGroup
- ItemGroupLabel
- ItemGroupLabelProps
- ItemGroupProps
- ItemIndicator
- ItemIndicatorProps
- ItemProps
- ItemText
- ItemTextProps
- Label
- LabelProps
- OpenChangeDetails
- Positioner
- PositionerProps
- PropsProvider
- Root
- RootComponent
- RootProps
- RootProvider
- RootProviderProps
- Trigger
- TriggerProps
- ValueChangeDetails
- ValueText
- ValueTextProps
Slider
- Context()
- Control
- ControlProps
- DraggingIndicator
- DraggingIndicatorProps
- HiddenInput
- Label
- LabelProps
- Marker
- MarkerGroup
- MarkerGroupProps
- MarkerIndicator
- MarkerIndicatorProps
- MarkerProps
- PropsProvider
- Range
- RangeProps
- Root
- RootProps
- RootProvider
- RootProviderProps
- Thumb
- ThumbProps
- Track
- TrackProps
- ValueChangeDetails
- ValueText
- ValueTextProps
Steps
- ChangeDetails
- CompletedContent
- CompletedContentProps
- Content
- ContentProps
- Context
- Description
- DescriptionProps
- Indicator
- IndicatorProps
- Item
- ItemContext
- ItemProps
- List
- ListProps
- NextTrigger
- NextTriggerProps
- Number
- NumberProps
- PrevTrigger
- PrevTriggerProps
- PropsProvider
- Root
- RootProps
- RootProvider
- RootProviderProps
- Separator
- SeparatorProps
- Status()
- StatusProps
- Title
- TitleProps
- Trigger
- TriggerProps
Variables
variable AbsoluteCenter
const AbsoluteCenter: FunctionComponent<any>;
React component used to horizontally and vertically center an element relative to its parent dimensions.
It uses the
position: absolute
strategy.See Also
Docs https://chakra-ui.com/center
variable AccordionItem
const AccordionItem: any;
variable AccordionItemBody
const AccordionItemBody: any;
variable AccordionItemContent
const AccordionItemContent: any;
variable AccordionItemIndicator
const AccordionItemIndicator: any;
variable AccordionItemTrigger
const AccordionItemTrigger: any;
variable AccordionPropsProvider
const AccordionPropsProvider: React.Provider<ArkAccordion.RootBaseProps>;
variable AccordionRoot
const AccordionRoot: any;
variable AccordionRootProvider
const AccordionRootProvider: any;
variable ActionBarCloseTrigger
const ActionBarCloseTrigger: any;
variable ActionBarContent
const ActionBarContent: any;
variable ActionBarPositioner
const ActionBarPositioner: any;
variable ActionBarPropsProvider
const ActionBarPropsProvider: React.Provider<ActionBarRootBaseProps>;
variable ActionBarRoot
const ActionBarRoot: any;
variable ActionBarRootProvider
const ActionBarRootProvider: any;
variable ActionBarSelectionTrigger
const ActionBarSelectionTrigger: any;
variable ActionBarSeparator
const ActionBarSeparator: any;
variable AlertContent
const AlertContent: any;
variable AlertDescription
const AlertDescription: any;
variable AlertIndicator
const AlertIndicator: any;
variable AlertPropsProvider
const AlertPropsProvider: React.Provider<AlertRootBaseProps>;
variable AlertRoot
const AlertRoot: any;
variable AlertTitle
const AlertTitle: any;
variable AspectRatio
const AspectRatio: any;
React component used to cropping media (videos, images and maps) to a desired aspect ratio.
See Also
Docs https://chakra-ui.com/aspectratiobox
variable AvatarFallback
const AvatarFallback: any;
variable AvatarIcon
const AvatarIcon: any;
variable AvatarImage
const AvatarImage: any;
variable AvatarPropsProvider
const AvatarPropsProvider: React.Provider<AvatarRootBaseProps>;
variable AvatarRoot
const AvatarRoot: any;
variable AvatarRootProvider
const AvatarRootProvider: any;
variable Badge
const Badge: any;
variable BadgePropsProvider
const BadgePropsProvider: React.Provider<BadgeBaseProps>;
variable Bleed
const Bleed: any;
variable BlockquoteCaption
const BlockquoteCaption: any;
variable BlockquoteContent
const BlockquoteContent: any;
variable BlockquoteIcon
const BlockquoteIcon: any;
variable BlockquotePropsProvider
const BlockquotePropsProvider: React.Provider<BlockquoteRootBaseProps>;
variable BlockquoteRoot
const BlockquoteRoot: any;
variable Box
const Box: FunctionComponent<any>;
Box is the most abstract component on top of which other chakra components are built. It renders a
div
element by default.See Also
Docs https://chakra-ui.com/box
variable BreadcrumbCurrentLink
const BreadcrumbCurrentLink: any;
variable BreadcrumbEllipsis
const BreadcrumbEllipsis: any;
variable BreadcrumbItem
const BreadcrumbItem: any;
variable BreadcrumbLink
const BreadcrumbLink: any;
variable BreadcrumbList
const BreadcrumbList: any;
variable BreadcrumbPropsProvider
const BreadcrumbPropsProvider: React.Provider<BreadcrumbRootBaseProps>;
variable BreadcrumbRoot
const BreadcrumbRoot: any;
variable BreadcrumbSeparator
const BreadcrumbSeparator: any;
variable Button
const Button: any;
variable CardBody
const CardBody: any;
variable CardDescription
const CardDescription: any;
variable CardFooter
const CardFooter: any;
variable CardHeader
const CardHeader: any;
variable CardPropsProvider
const CardPropsProvider: React.Provider<CardRootBaseProps>;
variable CardRoot
const CardRoot: any;
variable CardTitle
const CardTitle: any;
variable Center
const Center: FunctionComponent<any>;
React component used to horizontally and vertically center its child. It uses the popular
display: flex
centering technique.See Also
Docs https://chakra-ui.com/center
variable chakra
const chakra: StyledFactoryFn;
variable CheckboxCardAddon
const CheckboxCardAddon: any;
variable CheckboxCardContent
const CheckboxCardContent: any;
variable CheckboxCardControl
const CheckboxCardControl: any;
variable CheckboxCardDescription
const CheckboxCardDescription: any;
variable CheckboxCardHiddenInput
const CheckboxCardHiddenInput: any;
variable CheckboxCardIndicator
const CheckboxCardIndicator: any;
variable CheckboxCardLabel
const CheckboxCardLabel: any;
variable CheckboxCardRoot
const CheckboxCardRoot: any;
variable CheckboxCardRootPropsProvider
const CheckboxCardRootPropsProvider: React.Provider<CheckboxCardRootBaseProps>;
variable CheckboxCardRootProvider
const CheckboxCardRootProvider: any;
variable CheckboxControl
const CheckboxControl: any;
variable CheckboxGroup
const CheckboxGroup: FunctionComponent<any>;
variable CheckboxHiddenInput
const CheckboxHiddenInput: any;
variable CheckboxIndicator
const CheckboxIndicator: any;
variable CheckboxLabel
const CheckboxLabel: any;
variable CheckboxPropsProvider
const CheckboxPropsProvider: React.Provider<CheckboxRootBaseProps>;
variable CheckboxRoot
const CheckboxRoot: any;
variable CheckboxRootProvider
const CheckboxRootProvider: any;
variable Checkmark
const Checkmark: any;
variable Circle
const Circle: any;
variable ClipboardControl
const ClipboardControl: any;
variable ClipboardIndicator
const ClipboardIndicator: any;
variable ClipboardInput
const ClipboardInput: any;
variable ClipboardLabel
const ClipboardLabel: any;
variable ClipboardPropsProvider
const ClipboardPropsProvider: React.Provider<ClipboardRootBaseProps>;
variable ClipboardRoot
const ClipboardRoot: any;
variable ClipboardRootProvider
const ClipboardRootProvider: any;
variable ClipboardTrigger
const ClipboardTrigger: any;
variable ClipboardValueText
const ClipboardValueText: any;
variable Code
const Code: any;
variable CodePropsProvider
const CodePropsProvider: React.Provider<CodeBaseProps>;
variable CollapsibleContent
const CollapsibleContent: any;
variable CollapsiblePropsProvider
const CollapsiblePropsProvider: React.Provider<CollapsibleRootBaseProps>;
variable CollapsibleRoot
const CollapsibleRoot: any;
variable CollapsibleRootProvider
const CollapsibleRootProvider: any;
variable CollapsibleTrigger
const CollapsibleTrigger: any;
variable ColorPickerArea
const ColorPickerArea: any;
variable ColorPickerAreaBackground
const ColorPickerAreaBackground: any;
variable ColorPickerAreaThumb
const ColorPickerAreaThumb: any;
variable ColorPickerChannelInput
const ColorPickerChannelInput: any;
variable ColorPickerChannelSlider
const ColorPickerChannelSlider: any;
variable ColorPickerChannelSliderLabel
const ColorPickerChannelSliderLabel: any;
variable ColorPickerChannelSliderThumb
const ColorPickerChannelSliderThumb: any;
variable ColorPickerChannelSliderTrack
const ColorPickerChannelSliderTrack: any;
variable ColorPickerChannelSliderValueText
const ColorPickerChannelSliderValueText: any;
variable ColorPickerContent
const ColorPickerContent: any;
variable ColorPickerControl
const ColorPickerControl: any;
variable ColorPickerEyeDropperTrigger
const ColorPickerEyeDropperTrigger: any;
variable ColorPickerFormatSelect
const ColorPickerFormatSelect: any;
variable ColorPickerFormatTrigger
const ColorPickerFormatTrigger: any;
variable ColorPickerHiddenInput
const ColorPickerHiddenInput: any;
variable ColorPickerLabel
const ColorPickerLabel: any;
variable ColorPickerPositioner
const ColorPickerPositioner: any;
variable ColorPickerPropsProvider
const ColorPickerPropsProvider: React.Provider<ColorPickerRootBaseProps>;
variable ColorPickerRoot
const ColorPickerRoot: any;
variable ColorPickerRootProvider
const ColorPickerRootProvider: any;
variable ColorPickerSwatch
const ColorPickerSwatch: any;
variable ColorPickerSwatchGroup
const ColorPickerSwatchGroup: any;
variable ColorPickerSwatchIndicator
const ColorPickerSwatchIndicator: any;
variable ColorPickerSwatchTrigger
const ColorPickerSwatchTrigger: any;
variable ColorPickerTransparencyGrid
const ColorPickerTransparencyGrid: any;
variable ColorPickerTrigger
const ColorPickerTrigger: any;
variable ColorPickerValueSwatch
const ColorPickerValueSwatch: any;
variable ColorPickerValueText
const ColorPickerValueText: any;
variable ColorPickerView
const ColorPickerView: any;
variable ColorSwatch
const ColorSwatch: any;
variable ColorSwatchPropsProvider
const ColorSwatchPropsProvider: any;
variable Container
const Container: any;
variable ContainerPropsProvider
const ContainerPropsProvider: React.Provider<ContainerBaseProps>;
variable DataListItem
const DataListItem: any;
variable DataListItemLabel
const DataListItemLabel: any;
variable DataListItemValue
const DataListItemValue: any;
variable DataListPropsProvider
const DataListPropsProvider: React.Provider<DataListRootBaseProps>;
variable DataListRoot
const DataListRoot: any;
variable defaultBaseConfig
const defaultBaseConfig: SystemConfig;
variable defaultConfig
const defaultConfig: SystemConfig;
variable defaultSystem
const defaultSystem: SystemContext;
variable defineGlobalStyles
const defineGlobalStyles: GlobalStyleIdentityFn;
variable defineKeyframes
const defineKeyframes: KeyframeIdentityFn;
variable defineRecipe
const defineRecipe: RecipeIdentityFn;
variable defineSemanticTokens
const defineSemanticTokens: ProxyValue<SemanticTokenDefinition>;
variable defineSlotRecipe
const defineSlotRecipe: SlotRecipeIdentityFn;
variable defineStyle
const defineStyle: SystemStyleIdentityFn;
variable defineTokens
const defineTokens: ProxyValue<TokenDefinition>;
variable DialogActionTrigger
const DialogActionTrigger: any;
variable DialogBackdrop
const DialogBackdrop: any;
variable DialogBody
const DialogBody: any;
variable DialogCloseTrigger
const DialogCloseTrigger: any;
variable DialogContent
const DialogContent: any;
variable DialogDescription
const DialogDescription: any;
variable DialogFooter
const DialogFooter: any;
variable DialogHeader
const DialogHeader: any;
variable DialogPositioner
const DialogPositioner: any;
variable DialogPropsProvider
const DialogPropsProvider: React.Provider<DialogRootBaseProps>;
variable DialogRoot
const DialogRoot: any;
variable DialogRootProvider
const DialogRootProvider: any;
variable DialogTitle
const DialogTitle: any;
variable DialogTrigger
const DialogTrigger: any;
variable DrawerActionTrigger
const DrawerActionTrigger: any;
variable DrawerBackdrop
const DrawerBackdrop: any;
variable DrawerBody
const DrawerBody: any;
variable DrawerCloseTrigger
const DrawerCloseTrigger: any;
variable DrawerContent
const DrawerContent: any;
variable DrawerDescription
const DrawerDescription: any;
variable DrawerFooter
const DrawerFooter: any;
variable DrawerHeader
const DrawerHeader: any;
variable DrawerPositioner
const DrawerPositioner: any;
variable DrawerRoot
const DrawerRoot: any;
variable DrawerRootPropsProvider
const DrawerRootPropsProvider: React.Provider<DrawerRootBaseProps>;
variable DrawerRootProvider
const DrawerRootProvider: any;
variable DrawerTitle
const DrawerTitle: any;
variable DrawerTrigger
const DrawerTrigger: any;
variable EditableArea
const EditableArea: any;
variable EditableCancelTrigger
const EditableCancelTrigger: any;
variable EditableControl
const EditableControl: any;
variable EditableEditTrigger
const EditableEditTrigger: any;
variable EditableInput
const EditableInput: any;
variable EditablePreview
const EditablePreview: any;
variable EditablePropsProvider
const EditablePropsProvider: React.Provider<EditableRootBaseProps>;
variable EditableRoot
const EditableRoot: any;
variable EditableRootProvider
const EditableRootProvider: any;
variable EditableSubmitTrigger
const EditableSubmitTrigger: any;
variable EditableTextarea
const EditableTextarea: any;
variable Em
const Em: FunctionComponent<any>;
variable EMPTY_SLOT_STYLES
const EMPTY_SLOT_STYLES: Readonly<Record<string, SystemStyleObject>>;
variable EMPTY_STYLES
const EMPTY_STYLES: Readonly<SystemStyleObject>;
variable EmptyStateContent
const EmptyStateContent: any;
variable EmptyStateDescription
const EmptyStateDescription: any;
variable EmptyStateIndicator
const EmptyStateIndicator: any;
variable EmptyStatePropsProvider
const EmptyStatePropsProvider: React.Provider<EmptyStateRootBaseProps>;
variable EmptyStateRoot
const EmptyStateRoot: any;
variable EmptyStateTitle
const EmptyStateTitle: any;
variable FieldErrorIcon
const FieldErrorIcon: any;
variable FieldErrorText
const FieldErrorText: any;
variable FieldHelperText
const FieldHelperText: any;
variable FieldLabel
const FieldLabel: any;
variable FieldPropsProvider
const FieldPropsProvider: React.Provider<FieldRootBaseProps>;
variable FieldRequiredIndicator
const FieldRequiredIndicator: any;
variable FieldRoot
const FieldRoot: any;
variable FieldsetContent
const FieldsetContent: any;
variable FieldsetErrorText
const FieldsetErrorText: any;
variable FieldsetHelperText
const FieldsetHelperText: any;
variable FieldsetLegend
const FieldsetLegend: any;
variable FieldsetRoot
const FieldsetRoot: any;
variable FileUploadClearTrigger
const FileUploadClearTrigger: any;
variable FileUploadDropzone
const FileUploadDropzone: any;
variable FileUploadDropzoneContent
const FileUploadDropzoneContent: any;
variable FileUploadHiddenInput
const FileUploadHiddenInput: any;
variable FileUploadItem
const FileUploadItem: any;
variable FileUploadItemContent
const FileUploadItemContent: any;
variable FileUploadItemDeleteTrigger
const FileUploadItemDeleteTrigger: any;
variable FileUploadItemGroup
const FileUploadItemGroup: any;
variable FileUploadItemName
const FileUploadItemName: any;
variable FileUploadItemPreview
const FileUploadItemPreview: any;
variable FileUploadItemPreviewImage
const FileUploadItemPreviewImage: any;
variable FileUploadItemSizeText
const FileUploadItemSizeText: any;
variable FileUploadLabel
const FileUploadLabel: any;
variable FileUploadPropsProvider
const FileUploadPropsProvider: React.Provider<FileUploadRootBaseProps>;
variable FileUploadRoot
const FileUploadRoot: any;
variable FileUploadRootProvider
const FileUploadRootProvider: any;
variable FileUploadTrigger
const FileUploadTrigger: any;
variable Flex
const Flex: any;
variable Float
const Float: any;
variable FormatByte
const FormatByte: { (props: Format.ByteProps): any; displayName: string };
variable FormatNumber
const FormatNumber: { (props: Format.NumberProps): any; displayName: string };
variable Grid
const Grid: any;
variable GridItem
const GridItem: any;
variable Group
const Group: any;
variable Heading
const Heading: any;
variable HeadingPropsProvider
const HeadingPropsProvider: React.Provider<HeadingProps>;
variable HoverCardArrow
const HoverCardArrow: any;
variable HoverCardArrowTip
const HoverCardArrowTip: any;
variable HoverCardContent
const HoverCardContent: any;
variable HoverCardPositioner
const HoverCardPositioner: any;
variable HoverCardPropsProvider
const HoverCardPropsProvider: React.Provider<HoverCardRootBaseProps>;
variable HoverCardRoot
const HoverCardRoot: any;
variable HoverCardRootProvider
const HoverCardRootProvider: any;
variable HoverCardTrigger
const HoverCardTrigger: any;
variable HStack
const HStack: any;
A view that arranges its children in a horizontal line.
See Also
Docs https://chakra-ui.com/docs/components/stack
variable Icon
const Icon: any;
The Icon component renders as an svg element to help define your own custom components.
See Also
Docs https://chakra-ui.com/docs/components/icon#using-the-icon-component
variable IconButton
const IconButton: any;
variable Image
const Image: any;
React component that renders an image with support for fallbacks
See Also
Docs https://www.chakra-ui.com/docs/components/image
variable Input
const Input: any;
variable InputAddon
const InputAddon: any;
variable InputElement
const InputElement: FunctionComponent<any>;
variable InputPropsProvider
const InputPropsProvider: React.Provider<InputProps>;
variable Kbd
const Kbd: any;
variable Link
const Link: any;
variable LinkBox
const LinkBox: any;
LinkBox
is used to wrap content areas within a link while ensuring semantic htmlSee Also
Docs https://chakra-ui.com/docs/navigation/link-overlay
Resources https://www.sarasoueidan.com/blog/nested-links
variable LinkOverlay
const LinkOverlay: any;
variable LinkPropsProvider
const LinkPropsProvider: React.Provider<LinkProps>;
variable ListIndicator
const ListIndicator: any;
variable ListItem
const ListItem: any;
variable ListRoot
const ListRoot: any;
variable ListRootPropsProvider
const ListRootPropsProvider: React.Provider<ListRootBaseProps>;
variable Mark
const Mark: any;
variable MarkPropsProvider
const MarkPropsProvider: React.Provider<MarkProps>;
variable MenuArrow
const MenuArrow: any;
variable MenuArrowTip
const MenuArrowTip: any;
variable MenuCheckboxItem
const MenuCheckboxItem: any;
variable MenuContent
const MenuContent: any;
variable MenuContextTrigger
const MenuContextTrigger: any;
variable MenuIndicator
const MenuIndicator: any;
variable MenuItem
const MenuItem: any;
variable MenuItemCommand
const MenuItemCommand: any;
variable MenuItemGroup
const MenuItemGroup: any;
variable MenuItemGroupLabel
const MenuItemGroupLabel: any;
variable MenuItemIndicator
const MenuItemIndicator: any;
variable MenuItemText
const MenuItemText: any;
variable MenuPositioner
const MenuPositioner: any;
variable MenuPropsProvider
const MenuPropsProvider: React.Provider<MenuRootBaseProps>;
variable MenuRadioItem
const MenuRadioItem: any;
variable MenuRadioItemGroup
const MenuRadioItemGroup: any;
variable MenuRoot
const MenuRoot: any;
variable MenuRootProvider
const MenuRootProvider: any;
variable MenuSeparator
const MenuSeparator: any;
variable MenuTrigger
const MenuTrigger: any;
variable MenuTriggerItem
const MenuTriggerItem: any;
variable NativeSelectField
const NativeSelectField: any;
variable NativeSelectPropsProvider
const NativeSelectPropsProvider: React.Provider<NativeSelectRootBaseProps>;
variable NativeSelectRoot
const NativeSelectRoot: any;
variable NumberInputControl
const NumberInputControl: any;
variable NumberInputDecrementTrigger
const NumberInputDecrementTrigger: any;
variable NumberInputIncrementTrigger
const NumberInputIncrementTrigger: any;
variable NumberInputInput
const NumberInputInput: any;
variable NumberInputLabel
const NumberInputLabel: any;
variable NumberInputPropsProvider
const NumberInputPropsProvider: React.Provider<NumberInputRootBaseProps>;
variable NumberInputRoot
const NumberInputRoot: any;
variable NumberInputRootProvider
const NumberInputRootProvider: any;
variable NumberInputScrubber
const NumberInputScrubber: any;
variable NumberInputValueText
const NumberInputValueText: any;
variable PaginationEllipsis
const PaginationEllipsis: any;
variable PaginationItem
const PaginationItem: any;
variable PaginationNextTrigger
const PaginationNextTrigger: any;
variable PaginationPrevTrigger
const PaginationPrevTrigger: any;
variable PaginationPropsProvider
const PaginationPropsProvider: React.Provider<PaginationRootBaseProps>;
variable PaginationRoot
const PaginationRoot: any;
variable PaginationRootProvider
const PaginationRootProvider: any;
variable PinInputControl
const PinInputControl: any;
variable PinInputHiddenInput
const PinInputHiddenInput: any;
variable PinInputInput
const PinInputInput: any;
variable PinInputLabel
const PinInputLabel: any;
variable PinInputPropsProvider
const PinInputPropsProvider: React.Provider<PinInputRootBaseProps>;
variable PinInputRoot
const PinInputRoot: any;
variable PinInputRootProvider
const PinInputRootProvider: any;
variable PopoverAnchor
const PopoverAnchor: any;
variable PopoverArrow
const PopoverArrow: any;
variable PopoverArrowTip
const PopoverArrowTip: any;
variable PopoverBody
const PopoverBody: any;
variable PopoverCloseTrigger
const PopoverCloseTrigger: any;
variable PopoverContent
const PopoverContent: any;
variable PopoverDescription
const PopoverDescription: any;
variable PopoverFooter
const PopoverFooter: any;
variable PopoverHeader
const PopoverHeader: any;
variable PopoverPositioner
const PopoverPositioner: any;
variable PopoverPropsProvider
const PopoverPropsProvider: React.Provider<PopoverRootBaseProps>;
variable PopoverRoot
const PopoverRoot: any;
variable PopoverRootProvider
const PopoverRootProvider: any;
variable PopoverTitle
const PopoverTitle: any;
variable PopoverTrigger
const PopoverTrigger: any;
variable ProgressCircleCircle
const ProgressCircleCircle: any;
variable ProgressCircleLabel
const ProgressCircleLabel: any;
variable ProgressCirclePropsProvider
const ProgressCirclePropsProvider: React.Provider<ProgressCircleRootBaseProps>;
variable ProgressCircleRange
const ProgressCircleRange: any;
variable ProgressCircleRoot
const ProgressCircleRoot: any;
variable ProgressCircleRootProvider
const ProgressCircleRootProvider: any;
variable ProgressCircleTrack
const ProgressCircleTrack: any;
variable ProgressCircleValueText
const ProgressCircleValueText: any;
variable ProgressLabel
const ProgressLabel: any;
variable ProgressPropsProvider
const ProgressPropsProvider: React.Provider<ProgressRootBaseProps>;
variable ProgressRange
const ProgressRange: any;
variable ProgressRoot
const ProgressRoot: any;
variable ProgressRootProvider
const ProgressRootProvider: any;
variable ProgressTrack
const ProgressTrack: any;
variable ProgressValueText
const ProgressValueText: any;
variable QrCodeFrame
const QrCodeFrame: any;
variable QrCodeOverlay
const QrCodeOverlay: any;
variable QrCodePattern
const QrCodePattern: any;
variable QrCodePropsProvider
const QrCodePropsProvider: React.Provider<QrCodeRootBaseProps>;
variable QrCodeRoot
const QrCodeRoot: any;
variable QrCodeRootProvider
const QrCodeRootProvider: any;
variable RadioCardContext
const RadioCardContext: React.FC<RadioCardContextProps>;
variable RadioCardItem
const RadioCardItem: any;
variable RadioCardItemAddon
const RadioCardItemAddon: any;
variable RadioCardItemContent
const RadioCardItemContent: any;
variable RadioCardItemControl
const RadioCardItemControl: any;
variable RadioCardItemDescription
const RadioCardItemDescription: any;
variable RadioCardItemHiddenInput
const RadioCardItemHiddenInput: any;
variable RadioCardItemIndicator
const RadioCardItemIndicator: any;
variable RadioCardItemText
const RadioCardItemText: any;
variable RadioCardLabel
const RadioCardLabel: any;
variable RadioCardPropsProvider
const RadioCardPropsProvider: React.Provider<RadioCardRootBaseProps>;
variable RadioCardRoot
const RadioCardRoot: any;
variable RadioCardRootProvider
const RadioCardRootProvider: any;
variable RadioGroupContext
const RadioGroupContext: React.FC<RadioGroupContextProps>;
variable RadioGroupItem
const RadioGroupItem: any;
variable RadioGroupItemControl
const RadioGroupItemControl: any;
variable RadioGroupItemHiddenInput
const RadioGroupItemHiddenInput: any;
variable RadioGroupItemIndicator
const RadioGroupItemIndicator: any;
variable RadioGroupItemText
const RadioGroupItemText: any;
variable RadioGroupLabel
const RadioGroupLabel: any;
variable RadioGroupPropsProvider
const RadioGroupPropsProvider: React.Provider<RadioGroupRootBaseProps>;
variable RadioGroupRoot
const RadioGroupRoot: any;
variable RadioGroupRootProvider
const RadioGroupRootProvider: any;
variable Radiomark
const Radiomark: any;
variable RatingGroupControl
const RatingGroupControl: any;
variable RatingGroupHiddenInput
const RatingGroupHiddenInput: any;
variable RatingGroupItem
const RatingGroupItem: any;
variable RatingGroupItemIndicator
const RatingGroupItemIndicator: any;
variable RatingGroupLabel
const RatingGroupLabel: any;
variable RatingGroupPropsProvider
const RatingGroupPropsProvider: React.Provider<RatingGroupRootBaseProps>;
variable RatingGroupRoot
const RatingGroupRoot: any;
variable RatingGroupRootProvider
const RatingGroupRootProvider: any;
variable SegmentGroupIndicator
const SegmentGroupIndicator: any;
variable SegmentGroupItem
const SegmentGroupItem: any;
variable SegmentGroupItemHiddenInput
const SegmentGroupItemHiddenInput: any;
variable SegmentGroupItemText
const SegmentGroupItemText: any;
variable SegmentGroupPropsProvider
const SegmentGroupPropsProvider: React.Provider<SegmentGroupRootBaseProps>;
variable SegmentGroupRoot
const SegmentGroupRoot: any;
variable SegmentGroupRootProvider
const SegmentGroupRootProvider: any;
variable SelectClearTrigger
const SelectClearTrigger: any;
variable SelectContent
const SelectContent: any;
variable SelectControl
const SelectControl: any;
variable SelectHiddenSelect
const SelectHiddenSelect: any;
variable SelectIndicator
const SelectIndicator: any;
variable SelectIndicatorGroup
const SelectIndicatorGroup: any;
variable SelectItem
const SelectItem: any;
variable SelectItemGroup
const SelectItemGroup: any;
variable SelectItemGroupLabel
const SelectItemGroupLabel: any;
variable SelectItemIndicator
const SelectItemIndicator: any;
variable SelectItemText
const SelectItemText: any;
variable SelectLabel
const SelectLabel: any;
variable SelectPositioner
const SelectPositioner: any;
variable SelectPropsProvider
const SelectPropsProvider: React.Provider<SelectRootBaseProps<any>>;
variable SelectRoot
const SelectRoot: SelectRootComponent;
variable SelectRootProvider
const SelectRootProvider: SelectRootProviderComponent;
variable SelectTrigger
const SelectTrigger: any;
variable SelectValueText
const SelectValueText: any;
variable Separator
const Separator: any;
variable SeparatorPropsProvider
const SeparatorPropsProvider: React.Provider<SeparatorBaseProps>;
variable SimpleGrid
const SimpleGrid: any;
SimpleGrid
React component that uses the
Grid
component and provides a simpler interface to create responsive grid layouts.Provides props that easily define columns and spacing.
See Also
Docs https://chakra-ui.com/simplegrid
variable Skeleton
const Skeleton: any;
variable SkeletonPropsProvider
const SkeletonPropsProvider: React.Provider<SkeletonProps>;
variable SkipNavContent
const SkipNavContent: any;
Renders a div as the target for the
SkipNavLink
.See Also
Docs https://chakra-ui.com/docs/components/skip-nav
variable SkipNavLink
const SkipNavLink: any;
Renders a link that remains hidden until focused to skip to the main content.
See Also
Docs https://chakra-ui.com/docs/components/skip-nav
variable SliderControl
const SliderControl: any;
variable SliderDraggingIndicator
const SliderDraggingIndicator: any;
variable SliderHiddenInput
const SliderHiddenInput: any;
variable SliderLabel
const SliderLabel: any;
variable SliderMarker
const SliderMarker: any;
variable SliderMarkerGroup
const SliderMarkerGroup: any;
variable SliderMarkerIndicator
const SliderMarkerIndicator: any;
variable SliderPropsProvider
const SliderPropsProvider: React.Provider<SliderRootBaseProps>;
variable SliderRange
const SliderRange: any;
variable SliderRoot
const SliderRoot: any;
variable SliderRootProvider
const SliderRootProvider: any;
variable SliderThumb
const SliderThumb: any;
variable SliderTrack
const SliderTrack: any;
variable SliderValueText
const SliderValueText: any;
variable Spacer
const Spacer: FunctionComponent<any>;
A flexible flex spacer that expands along the major axis of its containing flex layout. It renders a
div
by default, and takes up any available space.See Also
Docs https://chakra-ui.com/flex#using-the-spacer
variable Span
const Span: FunctionComponent<any>;
variable Spinner
const Spinner: any;
variable SpinnerPropsProvider
const SpinnerPropsProvider: React.Provider<SpinnerProps>;
variable Square
const Square: any;
variable Stack
const Stack: any;
Stacks help you easily create flexible and automatically distributed layouts
You can stack elements in the horizontal or vertical direction, and apply a space or/and separator between each element.
It uses
display: flex
internally and renders adiv
.See Also
Docs https://chakra-ui.com/stack
variable StackSeparator
const StackSeparator: FunctionComponent<any>;
variable StatDownIndicator
const StatDownIndicator: any;
variable StatHelpText
const StatHelpText: any;
variable StatLabel
const StatLabel: any;
variable StatPropsProvider
const StatPropsProvider: React.Provider<StatRootBaseProps>;
variable StatRoot
const StatRoot: any;
variable StatUpIndicator
const StatUpIndicator: any;
variable StatusIndicator
const StatusIndicator: any;
variable StatusPropsProvider
const StatusPropsProvider: React.Provider<StatusRootBaseProps>;
variable StatusRoot
const StatusRoot: any;
variable StatValueText
const StatValueText: any;
variable StatValueUnit
const StatValueUnit: any;
variable StepsCompletedContent
const StepsCompletedContent: any;
variable StepsContent
const StepsContent: any;
variable StepsContext
const StepsContext: { (props: ArkSteps.ContextProps): any; displayName: string };
variable StepsDescription
const StepsDescription: any;
variable StepsIndicator
const StepsIndicator: any;
variable StepsItem
const StepsItem: any;
variable StepsItemContext
const StepsItemContext: { (props: ArkSteps.ItemContextProps): any; displayName: string;};
variable StepsList
const StepsList: any;
variable StepsNextTrigger
const StepsNextTrigger: any;
variable StepsNumber
const StepsNumber: any;
variable StepsPrevTrigger
const StepsPrevTrigger: any;
variable StepsPropsProvider
const StepsPropsProvider: React.Provider<StepsRootBaseProps>;
variable StepsRoot
const StepsRoot: any;
variable StepsRootProvider
const StepsRootProvider: any;
variable StepsSeparator
const StepsSeparator: any;
variable StepsTitle
const StepsTitle: any;
variable StepsTrigger
const StepsTrigger: any;
variable Sticky
const Sticky: FunctionComponent<any>;
variable Strong
const Strong: FunctionComponent<any>;
variable SwitchControl
const SwitchControl: any;
variable SwitchHiddenInput
const SwitchHiddenInput: any;
variable SwitchIndicator
const SwitchIndicator: any;
variable SwitchLabel
const SwitchLabel: any;
variable SwitchPropsProvider
const SwitchPropsProvider: React.Provider<SwitchRootBaseProps>;
variable SwitchRoot
const SwitchRoot: any;
variable SwitchRootProvider
const SwitchRootProvider: any;
variable SwitchThumb
const SwitchThumb: any;
variable SwitchThumbIndicator
const SwitchThumbIndicator: any;
variable TableBody
const TableBody: any;
variable TableCaption
const TableCaption: any;
variable TableCell
const TableCell: any;
variable TableColumn
const TableColumn: any;
variable TableColumnGroup
const TableColumnGroup: any;
variable TableColumnHeader
const TableColumnHeader: any;
variable TableFooter
const TableFooter: any;
variable TableHeader
const TableHeader: any;
variable TableRoot
const TableRoot: any;
variable TableRootPropsProvider
const TableRootPropsProvider: React.Provider<TableRootBaseProps>;
variable TableRow
const TableRow: any;
variable TableScrollArea
const TableScrollArea: FunctionComponent<any>;
variable TabsContent
const TabsContent: any;
variable TabsContentGroup
const TabsContentGroup: any;
variable TabsIndicator
const TabsIndicator: any;
variable TabsList
const TabsList: any;
variable TabsPropsProvider
const TabsPropsProvider: React.Provider<TabsRootBaseProps>;
variable TabsRoot
const TabsRoot: any;
variable TabsRootProvider
const TabsRootProvider: any;
variable TabsTrigger
const TabsTrigger: any;
variable TagCloseTrigger
const TagCloseTrigger: any;
variable TagEndElement
const TagEndElement: any;
variable TagLabel
const TagLabel: any;
variable TagRoot
const TagRoot: any;
variable TagRootPropsProvider
const TagRootPropsProvider: React.Provider<TagRootBaseProps>;
variable TagStartElement
const TagStartElement: any;
variable Text
const Text: any;
variable Textarea
const Textarea: any;
variable TextareaPropsProvider
const TextareaPropsProvider: React.Provider<TextareaProps>;
variable TextPropsProvider
const TextPropsProvider: React.Provider<TextProps>;
variable Theme
const Theme: any;
variable TimelineConnector
const TimelineConnector: any;
variable TimelineContent
const TimelineContent: any;
variable TimelineDescription
const TimelineDescription: any;
variable TimelineIndicator
const TimelineIndicator: any;
variable TimelineItem
const TimelineItem: any;
variable TimelineRoot
const TimelineRoot: any;
variable TimelineRootPropsProvider
const TimelineRootPropsProvider: React.Provider<TimelineRootBaseProps>;
variable TimelineSeparator
const TimelineSeparator: any;
variable TimelineTitle
const TimelineTitle: any;
variable ToastActionTrigger
const ToastActionTrigger: any;
variable ToastCloseTrigger
const ToastCloseTrigger: any;
variable ToastDescription
const ToastDescription: any;
variable Toaster
const Toaster: React.FC<ToasterProps>;
variable ToastIndicator
const ToastIndicator: any;
variable ToastRoot
const ToastRoot: any;
variable ToastTitle
const ToastTitle: any;
variable ToggleIndicator
const ToggleIndicator: any;
variable TogglePropsProvider
const TogglePropsProvider: React.Provider<ToggleRootBaseProps>;
variable ToggleRoot
const ToggleRoot: any;
variable TooltipArrow
const TooltipArrow: any;
variable TooltipArrowTip
const TooltipArrowTip: any;
variable TooltipContent
const TooltipContent: any;
variable TooltipPositioner
const TooltipPositioner: any;
variable TooltipPropsProvider
const TooltipPropsProvider: React.Provider<TooltipRootBaseProps>;
variable TooltipRoot
const TooltipRoot: any;
variable TooltipRootProvider
const TooltipRootProvider: any;
variable TooltipTrigger
const TooltipTrigger: any;
variable VisuallyHidden
const VisuallyHidden: FunctionComponent<any>;
Visually hidden component used to hide elements on screen
See Also
Docs https://chakra-ui.com/docs/components/visually-hidden
variable visuallyHiddenStyle
const visuallyHiddenStyle: { border: string; clip: string; height: string; width: string; margin: string; padding: string; overflow: string; whiteSpace: string; position: string;};
variable VStack
const VStack: any;
A view that arranges its children in a vertical line.
See Also
Docs https://chakra-ui.com/docs/components/stack
Functions
function AccordionContext
AccordionContext: (props: ArkAccordion.ContextProps) => any;
function AccordionItemContext
AccordionItemContext: (props: ArkAccordion.ItemContextProps) => any;
function ActionBarContext
ActionBarContext: (props: ArkPopover.ContextProps) => any;
function AvatarContext
AvatarContext: (props: ArkAvatar.ContextProps) => any;
function ChakraProvider
ChakraProvider: (props: ChakraProviderProps) => any;
function CheckboxCardContext
CheckboxCardContext: (props: ArkCheckbox.ContextProps) => any;
function CheckboxContext
CheckboxContext: (props: ArkCheckbox.ContextProps) => any;
function ClientOnly
ClientOnly: (props: ClientOnlyProps) => any;
function ClipboardContext
ClipboardContext: (props: ArkClipboard.ContextProps) => any;
function CollapsibleContext
CollapsibleContext: (props: ArkCollapsible.ContextProps) => any;
function ColorPickerContext
ColorPickerContext: (props: ArkColorPicker.ContextProps) => any;
function ColorSwatchMix
ColorSwatchMix: (props: ColorSwatchMixProps) => any;
function createContext
createContext: <T>(options?: CreateContextOptions<T>) => CreateContextReturn<T>;
function createIcon
createIcon: (options: CreateIconOptions) => any;
function createRecipeContext
createRecipeContext: <K extends RecipeKey>( options: UseRecipeOptions<K>) => { withContext: <T, P>( Component: React.ElementType<any>, options?: JsxFactoryOptions<P> ) => React.ForwardRefExoticComponent<any>; PropsProvider: any; withPropsProvider: <P>() => React.Provider<Partial<P>>; usePropsContext: () => Record<string, any>; useRecipeResult: (props: any) => { styles: Readonly<import('./css.types').SystemStyleObject>; className: string; props: { [x: string]: any; [x: number]: any; [x: symbol]: any }; };};
function createSlotRecipeContext
createSlotRecipeContext: <R extends SlotRecipeKey>( options: UseSlotRecipeOptions<R>) => { StylesProvider: any; ClassNamesProvider: any; PropsProvider: any; usePropsContext: () => Record<string, any>; useRecipeResult: (props: any) => { styles: Record<string, SystemStyleObject>; classNames: Record<string, string>; props: { [x: string]: any; [x: number]: any; [x: symbol]: any }; }; withProvider: <T, P>( Component: React.ElementType<any>, slot: R extends keyof ConfigRecipeSlots ? ConfigRecipeSlots[R] : string, options?: WithProviderOptions<P> ) => React.ForwardRefExoticComponent<any>; withContext: <T, P_1>( Component: React.ElementType<any>, slot?: R extends keyof ConfigRecipeSlots ? ConfigRecipeSlots[R] : string, options?: WithContextOptions<P_1> ) => React.ForwardRefExoticComponent<any>; withRootProvider: <P_2>( Component: React.ElementType<any>, options?: WithRootProviderOptions<P_2> ) => React.FC<React.PropsWithoutRef<P_2>>; useStyles: () => Record<string, SystemStyleObject>; useClassNames: () => Record<string, string>;};
function createSystem
createSystem: (...configs: SystemConfig[]) => SystemContext;
function defineAnimationStyles
defineAnimationStyles: ( v: CompositionStyles['animationStyles']) => import('./composition').AnimationStyles;
function defineConditions
defineConditions: <T extends ConditionRecord>(v: T) => T;
function defineConfig
defineConfig: (v: SystemConfig) => SystemConfig;
function defineLayerStyles
defineLayerStyles: ( v: CompositionStyles['layerStyles']) => import('./composition').LayerStyles;
function defineTextStyles
defineTextStyles: ( v: CompositionStyles['textStyles']) => import('./composition').TextStyles;
function DialogContext
DialogContext: (props: ArkDialog.ContextProps) => any;
function DrawerContext
DrawerContext: (props: ArkDialog.ContextProps) => any;
function EditableContext
EditableContext: (props: ArkEditable.ContextProps) => any;
function FieldsetContext
FieldsetContext: (props: Fieldset.ContextProps) => any;
function FileUploadContext
FileUploadContext: (props: ArkFileUpload.ContextProps) => any;
function For
For: <T extends string | number | Dict<any>>( props: ForProps<T>) => React.ReactNode;
function Highlight
Highlight: (props: HighlightProps) => JSX.Element;
Highlight
allows you to highlight substrings of a text.See Also
Docs https://chakra-ui.com/docs/components/highlight
function HoverCardContext
HoverCardContext: (props: ArkHoverCard.ContextProps) => any;
function isValidSystem
isValidSystem: (mod: unknown) => mod is SystemContext;
function MenuContext
MenuContext: (props: ArkMenu.ContextProps) => any;
function MenuItemContext
MenuItemContext: (props: ArkMenu.ItemContextProps) => any;
function mergeConfigs
mergeConfigs: (...configs: SystemConfig[]) => SystemConfig;
function mergeProps
mergeProps: <T extends Props>( ...args: T[]) => UnionToIntersection<TupleTypes<T[]>>;
function mergeRefs
mergeRefs: <T>( ...refs: (ReactRef<T> | null | undefined)[]) => (node: T | null) => void;
function NativeSelectIndicator
NativeSelectIndicator: (props: NativeSelectIndicatorProps) => any;
function NumberInputContext
NumberInputContext: (props: ArkNumberInput.ContextProps) => any;
function PaginationContext
PaginationContext: (props: ArkPagination.ContextProps) => any;
function PinInputContext
PinInputContext: (props: ArkPinInput.ContextProps) => any;
function PopoverContext
PopoverContext: (props: ArkPopover.ContextProps) => any;
function ProgressCircleContext
ProgressCircleContext: (props: ArkProgress.ContextProps) => any;
function ProgressContext
ProgressContext: (props: ArkProgress.ContextProps) => any;
function RatingGroupContext
RatingGroupContext: (props: ArkRatingGroup.ContextProps) => any;
function RatingGroupItemContext
RatingGroupItemContext: (props: ArkRatingGroup.ItemContextProps) => any;
function RecipePropsProvider
RecipePropsProvider: < T extends | 'container' | 'badge' | 'button' | 'code' | 'heading' | 'input' | 'inputAddon' | 'kbd' | 'link' | 'mark' | 'separator' | 'skeleton' | 'skipNavLink' | 'spinner' | 'textarea' | 'icon' | 'checkmark' | 'radiomark' | 'colorSwatch' | (string & {}) | 'accordion' | 'actionBar' | 'alert' | 'avatar' | 'blockquote' | 'breadcrumb' | 'card' | 'checkbox' | 'checkboxCard' | 'collapsible' | 'dataList' | 'dialog' | 'drawer' | 'editable' | 'emptyState' | 'field' | 'fieldset' | 'fileUpload' | 'hoverCard' | 'list' | 'menu' | 'nativeSelect' | 'numberInput' | 'pinInput' | 'popover' | 'progress' | 'progressCircle' | 'radioCard' | 'radioGroup' | 'ratingGroup' | 'segmentGroup' | 'select' | 'slider' | 'stat' | 'steps' | 'switch' | 'table' | 'tabs' | 'tag' | 'toast' | 'tooltip' | 'status' | 'timeline' | 'colorPicker' | 'qrCode'>( props: Props<T>) => any;
function SegmentGroupContext
SegmentGroupContext: (props: ArkSegmentGroup.ContextProps) => any;
function SegmentGroupItemContext
SegmentGroupItemContext: (props: ArkSegmentGroup.ItemContextProps) => any;
function SelectContext
SelectContext: <T extends unknown>(props: ArkSelect.ContextProps<T>) => any;
function SelectItemContext
SelectItemContext: (props: ArkSelect.ItemContextProps) => any;
function Show
Show: <T>(props: ShowProps<T>) => JSX.Element;
function SliderContext
SliderContext: (props: ArkSlider.ContextProps) => any;
function StepsStatus
StepsStatus: (props: StepsStatusProps) => any;
function SwitchContext
SwitchContext: (props: ArkSwitch.ContextProps) => any;
function TabsContext
TabsContext: (props: ArkTabs.ContextProps) => any;
function ToggleContext
ToggleContext: (props: ArkToggle.ContextProps) => any;
function TooltipContext
TooltipContext: (props: ArkTooltip.ContextProps) => any;
function useAccordionStyles
useAccordionStyles: () => Record<string, import('../..').SystemStyleObject>;
function useActionBarStyles
useActionBarStyles: () => Record<string, import('../..').SystemStyleObject>;
function useAlertStyles
useAlertStyles: () => Record<string, import('../..').SystemStyleObject>;
function useAvatarStyles
useAvatarStyles: () => Record<string, import('../..').SystemStyleObject>;
function useBlockquoteStyles
useBlockquoteStyles: () => Record<string, import('../..').SystemStyleObject>;
function useBreadcrumbStyles
useBreadcrumbStyles: () => Record<string, import('../..').SystemStyleObject>;
function useBreakpoint
useBreakpoint: (options?: UseBreakpointOptions) => string;
function useBreakpointValue
useBreakpointValue: <T = any>( value: Value<T>, opts?: UseBreakpointValueOptions) => T | undefined;
function useCallbackRef
useCallbackRef: <Args extends unknown[], Return>( callback: (...args: Args) => Return, deps?: React.DependencyList) => (...args: Args) => Return | undefined;
This hook is user-land implementation of the experimental
useEffectEvent
hook. React docs: https://react.dev/learn/separating-events-from-effects#declaring-an-effect-event
function useCardStyles
useCardStyles: () => Record<string, import('../..').SystemStyleObject>;
function useChakraContext
useChakraContext: () => SystemContext;
function useCheckboxCardStyles
useCheckboxCardStyles: () => Record<string, import('../..').SystemStyleObject>;
function useCheckboxStyles
useCheckboxStyles: () => Record<string, import('../..').SystemStyleObject>;
function useClipboardStyles
useClipboardStyles: () => Record<string, import('../..').SystemStyleObject>;
function useCollapsibleStyles
useCollapsibleStyles: () => Record<string, import('../..').SystemStyleObject>;
function useColorPickerStyles
useColorPickerStyles: () => Record<string, import('../..').SystemStyleObject>;
function useControllableProp
useControllableProp: <T>(prop: T | undefined, state: T) => [boolean, T];
Given a prop value and state value, the useControllableProp hook is used to determine whether a component is controlled or uncontrolled, and also returns the computed value.
See Also
Docs https://chakra-ui.com/docs/hooks/use-controllable#usecontrollableprop
function useControllableState
useControllableState: <T>( props: UseControllableStateProps<T>) => [T, React.Dispatch<React.SetStateAction<T>>];
The
useControllableState
hook returns the state and function that updates the state, just like React.useState does.See Also
Docs https://chakra-ui.com/docs/hooks/use-controllable#usecontrollablestate
function useDataListStyles
useDataListStyles: () => Record<string, import('../..').SystemStyleObject>;
function useDialogStyles
useDialogStyles: () => Record<string, import('../..').SystemStyleObject>;
function useDisclosure
useDisclosure: (props?: UseDisclosureProps) => { open: boolean; onOpen: () => void; onClose: () => void; onToggle: () => void;};
useDisclosure
is a custom hook used to help handle common open, close, or toggle scenarios. It can be used to control feedback component such asModal
,AlertDialog
,Drawer
, etc.See Also
Docs https://chakra-ui.com/docs/hooks/use-disclosure
function useDrawerStyles
useDrawerStyles: () => Record<string, import('../..').SystemStyleObject>;
function useEditableStyles
useEditableStyles: () => Record<string, import('../..').SystemStyleObject>;
function useEmptyStateStyles
useEmptyStateStyles: () => Record<string, import('../..').SystemStyleObject>;
function useFieldStyles
useFieldStyles: () => Record<string, import('../..').SystemStyleObject>;
function useFileUploadStyles
useFileUploadStyles: () => Record<string, import('../..').SystemStyleObject>;
function useHoverCardStyles
useHoverCardStyles: () => Record<string, import('../..').SystemStyleObject>;
function useListStyles
useListStyles: () => Record<string, import('../..').SystemStyleObject>;
function useMediaQuery
useMediaQuery: (query: string[], options: UseMediaQueryOptions) => boolean[];
function useMenuStyles
useMenuStyles: () => Record<string, import('../..').SystemStyleObject>;
function useNativeSelectStyles
useNativeSelectStyles: () => Record<string, import('../..').SystemStyleObject>;
function useNumberInputStyles
useNumberInputStyles: () => Record<string, import('../..').SystemStyleObject>;
function usePaginationStyles
usePaginationStyles: () => Record<string, import('../..').SystemStyleObject>;
function useParentRecipeProps
useParentRecipeProps: () => { recipe?: import('./recipe.types').RecipeDefinition;};
function usePinInputStyles
usePinInputStyles: () => Record<string, import('../..').SystemStyleObject>;
function usePopoverStyles
usePopoverStyles: () => Record<string, import('../..').SystemStyleObject>;
function useProgressCircleStyles
useProgressCircleStyles: () => Record<string, import('../..').SystemStyleObject>;
function useProgressStyles
useProgressStyles: () => Record<string, import('../..').SystemStyleObject>;
function useQrCodeStyles
useQrCodeStyles: () => Record<string, import('../..').SystemStyleObject>;
function useRadioCardStyles
useRadioCardStyles: () => Record<string, import('../..').SystemStyleObject>;
function useRadioGroupStyles
useRadioGroupStyles: () => Record<string, import('../..').SystemStyleObject>;
function useRatingGroupStyles
useRatingGroupStyles: () => Record<string, import('../..').SystemStyleObject>;
function useRecipe
useRecipe: { <Options extends { key: RecipeKey; recipe?: RecipeDefinition }>( options: Options ): Options['key'] extends keyof ConfigRecipes ? ConfigRecipes[Options['key']] : SystemRecipeFn<{}, {}>; <Options extends { recipe: RecipeDefinition<RecipeVariantRecord> }>( options: Options ): Options['recipe'] extends RecipeDefinition< infer T extends RecipeVariantRecord > ? SystemRecipeFn<RecipeVariantProps<Options['recipe']>, RecipeVariantMap<T>> : never;};
function useSegmentGroupStyles
useSegmentGroupStyles: () => Record<string, import('../..').SystemStyleObject>;
function useSelectStyles
useSelectStyles: () => Record<string, import('../..').SystemStyleObject>;
function useSliderStyles
useSliderStyles: () => Record<string, import('../..').SystemStyleObject>;
function useSlotRecipe
useSlotRecipe: { <Options extends { key: SlotRecipeKey; recipe?: SlotRecipeConfig }>( options: Options ): Options['key'] extends keyof ConfigSlotRecipes ? ConfigSlotRecipes[Options['key']] : SystemSlotRecipeFn<string, {}, {}>; < Options extends { recipe: SlotRecipeConfig<string, SlotRecipeVariantRecord<string>>; } >( options: Options ): Options['recipe'] extends SlotRecipeConfig< infer S extends string, infer T extends SlotRecipeVariantRecord<infer S extends string> > ? SystemSlotRecipeFn< S, RecipeVariantProps<Options['recipe']>, RecipeVariantMap<T> > : never;};
function useStatStyles
useStatStyles: () => Record<string, import('../..').SystemStyleObject>;
function useStatusStyles
useStatusStyles: () => Record<string, import('../..').SystemStyleObject>;
function useStepsStyles
useStepsStyles: () => Record<string, import('../..').SystemStyleObject>;
function useSwitchStyles
useSwitchStyles: () => Record<string, import('../..').SystemStyleObject>;
function useTableStyles
useTableStyles: () => Record<string, SystemStyleObject>;
function useTabsStyles
useTabsStyles: () => Record<string, import('../..').SystemStyleObject>;
function useTagStyles
useTagStyles: () => Record<string, import('../..').SystemStyleObject>;
function useTimelineStyles
useTimelineStyles: () => Record<string, import('../..').SystemStyleObject>;
function useToastStyles
useToastStyles: () => Record<string, import('../..').SystemStyleObject>;
function useToggleStyles
useToggleStyles: () => Record<string, import('../..').SystemStyleObject>;
function useToken
useToken: (category: string, token: string | string[]) => string[];
function useTooltipStyles
useTooltipStyles: () => Record<string, import('../..').SystemStyleObject>;
Interfaces
interface AbsoluteCenterProps
interface AbsoluteCenterProps extends HTMLChakraProps<'div'> {}
property axis
axis?: 'horizontal' | 'vertical' | 'both';
interface AccordionFocusChangeDetails
interface AccordionFocusChangeDetails extends ArkAccordion.FocusChangeDetails {}
interface AccordionItemBodyProps
interface AccordionItemBodyProps extends HTMLChakraProps<'div'> {}
interface AccordionItemContentProps
interface AccordionItemContentProps extends HTMLChakraProps<'div', ArkAccordion.ItemContentBaseProps> {}
interface AccordionItemIndicatorProps
interface AccordionItemIndicatorProps extends HTMLChakraProps<'button', ArkAccordion.ItemIndicatorBaseProps> {}
interface AccordionItemProps
interface AccordionItemProps extends HTMLChakraProps<'div', ArkAccordion.ItemBaseProps> {}
interface AccordionItemTriggerProps
interface AccordionItemTriggerProps extends HTMLChakraProps<'button', ArkAccordion.ItemTriggerBaseProps> {}
interface AccordionRootProps
interface AccordionRootProps extends HTMLChakraProps<'div', AccordionRootBaseProps> {}
interface AccordionRootProviderProps
interface AccordionRootProviderProps extends HTMLChakraProps<'div', AccordionRootProviderBaseProps> {}
interface AccordionValueChangeDetails
interface AccordionValueChangeDetails extends ArkAccordion.ValueChangeDetails {}
interface ActionBarCloseTriggerProps
interface ActionBarCloseTriggerProps extends HTMLChakraProps<'button', ArkPopover.CloseTriggerProps> {}
interface ActionBarContentProps
interface ActionBarContentProps extends HTMLChakraProps<'div', ArkPopover.ContentBaseProps> {}
interface ActionBarOpenChangeDetails
interface ActionBarOpenChangeDetails extends ArkPopover.OpenChangeDetails {}
interface ActionBarPositionerProps
interface ActionBarPositionerProps extends HTMLChakraProps<'div'> {}
interface ActionBarRootProps
interface ActionBarRootProps extends Omit<ActionBarRootBaseProps, 'positioning'> {}
property children
children: React.ReactNode;
interface ActionBarRootProviderProps
interface ActionBarRootProviderProps extends ActionBarRootProviderBaseProps {}
interface ActionBarSelectionTriggerProps
interface ActionBarSelectionTriggerProps extends HTMLChakraProps<'button'> {}
interface ActionBarSeparatorProps
interface ActionBarSeparatorProps extends HTMLChakraProps<'div'> {}
interface AlertContentProps
interface AlertContentProps extends HTMLChakraProps<'div'> {}
interface AlertDescriptionProps
interface AlertDescriptionProps extends HTMLChakraProps<'div'> {}
interface AlertIndicatorProps
interface AlertIndicatorProps extends HTMLChakraProps<'span'> {}
interface AlertRootProps
interface AlertRootProps extends HTMLChakraProps<'div', AlertRootBaseProps> {}
interface AlertTitleProps
interface AlertTitleProps extends HTMLChakraProps<'div'> {}
interface AspectRatioProps
interface AspectRatioProps extends Omit<HTMLChakraProps<'div'>, 'aspectRatio'> {}
property ratio
ratio?: ConditionalValue<number>;
The aspect ratio of the Box. Common values are:
21/9
,16/9
,9/16
,4/3
,1.85/1
interface AvatarFallbackProps
interface AvatarFallbackProps extends HTMLChakraProps<'div', ArkAvatar.FallbackProps> {}
interface AvatarIconProps
interface AvatarIconProps extends HTMLChakraProps<'svg'> {}
interface AvatarImageProps
interface AvatarImageProps extends HTMLChakraProps<'img', ArkAvatar.ImageProps> {}
interface AvatarRootProps
interface AvatarRootProps extends HTMLChakraProps<'div', AvatarRootBaseProps> {}
interface AvatarStatusChangeDetails
interface AvatarStatusChangeDetails extends ArkAvatar.StatusChangeDetails {}
interface BadgeProps
interface BadgeProps extends HTMLChakraProps<'span', BadgeBaseProps> {}
interface BleedProps
interface BleedProps extends HTMLChakraProps<'div'> {}
property block
block?: SystemStyleObject['marginBlock'];
The negative margin on the y-axis
property blockEnd
blockEnd?: SystemStyleObject['marginBlockEnd'];
The negative margin on the block-end axis
property blockStart
blockStart?: SystemStyleObject['marginBlockStart'];
The negative margin on the block-start axis
property inline
inline?: SystemStyleObject['marginInline'];
The negative margin on the x-axis
property inlineEnd
inlineEnd?: SystemStyleObject['marginInlineEnd'];
The negative margin on the inline-end axis
property inlineStart
inlineStart?: SystemStyleObject['marginInlineStart'];
The negative margin on the inline-start axis
interface BlockquoteCaptionProps
interface BlockquoteCaptionProps extends HTMLChakraProps<'figcaption'> {}
interface BlockquoteContentProps
interface BlockquoteContentProps extends HTMLChakraProps<'blockquote'> {}
interface BlockquoteIconProps
interface BlockquoteIconProps extends HTMLChakraProps<'svg'> {}
interface BlockquoteRootProps
interface BlockquoteRootProps extends HTMLChakraProps<'figure', BlockquoteRootBaseProps> {}
interface BoxProps
interface BoxProps extends HTMLChakraProps<'div'> {}
interface BreadcrumbCurrentLinkProps
interface BreadcrumbCurrentLinkProps extends HTMLChakraProps<'span'> {}
interface BreadcrumbEllipsisProps
interface BreadcrumbEllipsisProps extends HTMLChakraProps<'span'> {}
interface BreadcrumbItemProps
interface BreadcrumbItemProps extends HTMLChakraProps<'li'> {}
interface BreadcrumbLinkProps
interface BreadcrumbLinkProps extends HTMLChakraProps<'a'> {}
interface BreadcrumbListProps
interface BreadcrumbListProps extends HTMLChakraProps<'ol'> {}
interface BreadcrumbRootProps
interface BreadcrumbRootProps extends HTMLChakraProps<'nav', BreadcrumbRootBaseProps> {}
interface BreadcrumbSeparatorProps
interface BreadcrumbSeparatorProps extends HTMLChakraProps<'li'> {}
interface ButtonProps
interface ButtonProps extends HTMLChakraProps<'button', ButtonBaseProps> {}
interface CardBodyProps
interface CardBodyProps extends HTMLChakraProps<'div'> {}
interface CardDescriptionProps
interface CardDescriptionProps extends HTMLChakraProps<'p'> {}
interface CardFooterProps
interface CardFooterProps extends HTMLChakraProps<'div'> {}
interface CardHeaderProps
interface CardHeaderProps extends HTMLChakraProps<'div'> {}
interface CardRootProps
interface CardRootProps extends HTMLChakraProps<'div', CardRootBaseProps> {}
interface CardTitleProps
interface CardTitleProps extends HTMLChakraProps<'h2'> {}
interface CenterProps
interface CenterProps extends HTMLChakraProps<'div'> {}
interface ChakraProviderProps
interface ChakraProviderProps {}
interface CheckboxCardAddonProps
interface CheckboxCardAddonProps extends HTMLChakraProps<'div'> {}
interface CheckboxCardCheckedChangeDetails
interface CheckboxCardCheckedChangeDetails extends ArkCheckbox.CheckedChangeDetails {}
interface CheckboxCardContentProps
interface CheckboxCardContentProps extends HTMLChakraProps<'div'> {}
interface CheckboxCardControlProps
interface CheckboxCardControlProps extends HTMLChakraProps<'div', ArkCheckbox.ControlBaseProps> {}
interface CheckboxCardDescriptionProps
interface CheckboxCardDescriptionProps extends HTMLChakraProps<'div'> {}
interface CheckboxCardIndicatorProps
interface CheckboxCardIndicatorProps extends HTMLChakraProps<'svg'> {}
interface CheckboxCardLabelProps
interface CheckboxCardLabelProps extends HTMLChakraProps<'span', ArkCheckbox.LabelBaseProps> {}
interface CheckboxCardRootProps
interface CheckboxCardRootProps extends HTMLChakraProps<'label', CheckboxCardRootBaseProps> {}
interface CheckboxCardRootProviderProps
interface CheckboxCardRootProviderProps extends HTMLChakraProps<'label', CheckboxCardRootProviderBaseProps> {}
interface CheckboxCheckedChangeDetails
interface CheckboxCheckedChangeDetails extends ArkCheckbox.CheckedChangeDetails {}
interface CheckboxControlProps
interface CheckboxControlProps extends HTMLChakraProps<'div', ArkCheckbox.ControlBaseProps> {}
interface CheckboxGroupProps
interface CheckboxGroupProps extends HTMLChakraProps<'div', ArkCheckbox.GroupBaseProps> {}
interface CheckboxIndicatorProps
interface CheckboxIndicatorProps extends HTMLChakraProps<'svg'> {}
property checked
checked?: React.ReactElement;
property indeterminate
indeterminate?: React.ReactElement;
interface CheckboxLabelProps
interface CheckboxLabelProps extends HTMLChakraProps<'span', ArkCheckbox.LabelBaseProps> {}
interface CheckboxRootProps
interface CheckboxRootProps extends HTMLChakraProps<'label', CheckboxRootBaseProps> {}
interface CheckmarkProps
interface CheckmarkProps extends HTMLChakraProps<'svg', RecipeProps<'checkmark'>>, UnstyledProp {}
property checked
checked?: boolean;
Whether the checkmark is checked
property disabled
disabled?: boolean;
Whether the checkmark is disabled
property indeterminate
indeterminate?: boolean;
Whether the checkmark is indeterminate
interface CircleProps
interface CircleProps extends SquareProps {}
interface ClientOnlyProps
interface ClientOnlyProps {}
interface ClipboardControlProps
interface ClipboardControlProps extends HTMLChakraProps<'div', ArkClipboard.ControlProps> {}
interface ClipboardCopyStatusDetails
interface ClipboardCopyStatusDetails extends ArkClipboard.CopyStatusDetails {}
interface ClipboardIndicatorProps
interface ClipboardIndicatorProps extends HTMLChakraProps<'div', ArkClipboard.IndicatorProps> {}
interface ClipboardInputProps
interface ClipboardInputProps extends HTMLChakraProps<'input', ArkClipboard.InputProps> {}
interface ClipboardLabelProps
interface ClipboardLabelProps extends HTMLChakraProps<'label', ArkClipboard.LabelProps> {}
interface ClipboardRootProps
interface ClipboardRootProps extends HTMLChakraProps<'div', ClipboardRootBaseProps> {}
interface ClipboardRootProviderProps
interface ClipboardRootProviderProps extends HTMLChakraProps<'div', ClipboardRootProviderBaseProps> {}
interface ClipboardTriggerProps
interface ClipboardTriggerProps extends HTMLChakraProps<'button', ArkClipboard.TriggerProps> {}
interface ClipboardValueTextProps
interface ClipboardValueTextProps extends HTMLChakraProps<'div', ArkClipboard.ValueTextProps> {}
interface CodeProps
interface CodeProps extends HTMLChakraProps<'code', CodeBaseProps> {}
interface CollapsibleContentProps
interface CollapsibleContentProps extends HTMLChakraProps<'div', ArkCollapsible.ContentBaseProps> {}
interface CollapsibleOpenChangeDetails
interface CollapsibleOpenChangeDetails extends ArkCollapsible.OpenChangeDetails {}
interface CollapsibleRootProps
interface CollapsibleRootProps extends HTMLChakraProps<'div', CollapsibleRootBaseProps> {}
interface CollapsibleRootProviderProps
interface CollapsibleRootProviderProps extends HTMLChakraProps<'div', CollapsibleRootProviderBaseProps> {}
interface CollapsibleTriggerProps
interface CollapsibleTriggerProps extends HTMLChakraProps<'button', ArkCollapsible.TriggerBaseProps> {}
interface ColorPickerAreaBackgroundProps
interface ColorPickerAreaBackgroundProps extends HTMLChakraProps<'div', ArkColorPicker.AreaBackgroundBaseProps> {}
interface ColorPickerAreaProps
interface ColorPickerAreaProps extends HTMLChakraProps<'div', ArkColorPicker.AreaBaseProps> {}
interface ColorPickerAreaThumbProps
interface ColorPickerAreaThumbProps extends HTMLChakraProps<'div', ArkColorPicker.AreaThumbBaseProps> {}
interface ColorPickerChannelInputProps
interface ColorPickerChannelInputProps extends HTMLChakraProps<'input', ArkColorPicker.ChannelInputBaseProps> {}
interface ColorPickerChannelSliderLabelProps
interface ColorPickerChannelSliderLabelProps extends HTMLChakraProps<'div', ArkColorPicker.ChannelSliderLabelBaseProps> {}
interface ColorPickerChannelSliderProps
interface ColorPickerChannelSliderProps extends HTMLChakraProps<'div', ArkColorPicker.ChannelSliderBaseProps> {}
interface ColorPickerChannelSliderThumbProps
interface ColorPickerChannelSliderThumbProps extends HTMLChakraProps<'div', ArkColorPicker.ChannelSliderThumbBaseProps> {}
interface ColorPickerChannelSliderTrackProps
interface ColorPickerChannelSliderTrackProps extends HTMLChakraProps<'div', ArkColorPicker.ChannelSliderTrackBaseProps> {}
interface ColorPickerChannelSliderValueTextProps
interface ColorPickerChannelSliderValueTextProps extends HTMLChakraProps<'div', ArkColorPicker.ChannelSliderValueTextBaseProps> {}
interface ColorPickerContentProps
interface ColorPickerContentProps extends HTMLChakraProps<'div', ArkColorPicker.ContentBaseProps> {}
interface ColorPickerControlProps
interface ColorPickerControlProps extends HTMLChakraProps<'div', ArkColorPicker.ControlBaseProps> {}
interface ColorPickerEyeDropperTriggerProps
interface ColorPickerEyeDropperTriggerProps extends HTMLChakraProps<'button', ArkColorPicker.EyeDropperTriggerBaseProps> {}
interface ColorPickerFormatSelectProps
interface ColorPickerFormatSelectProps extends HTMLChakraProps<'select', ArkColorPicker.FormatSelectBaseProps> {}
interface ColorPickerFormatTriggerProps
interface ColorPickerFormatTriggerProps extends HTMLChakraProps<'button', ArkColorPicker.FormatTriggerBaseProps> {}
interface ColorPickerLabelProps
interface ColorPickerLabelProps extends HTMLChakraProps<'label', ArkColorPicker.LabelBaseProps> {}
interface ColorPickerPositionerProps
interface ColorPickerPositionerProps extends HTMLChakraProps<'div', ArkColorPicker.PositionerBaseProps> {}
interface ColorPickerRootProps
interface ColorPickerRootProps extends HTMLChakraProps<'div', ColorPickerRootBaseProps> {}
interface ColorPickerRootProviderProps
interface ColorPickerRootProviderProps extends HTMLChakraProps<'div', ColorPickerRootProviderBaseProps> {}
interface ColorPickerSwatchGroupProps
interface ColorPickerSwatchGroupProps extends HTMLChakraProps<'div', ArkColorPicker.SwatchGroupBaseProps> {}
interface ColorPickerSwatchIndicatorProps
interface ColorPickerSwatchIndicatorProps extends HTMLChakraProps<'div', ArkColorPicker.SwatchIndicatorBaseProps> {}
interface ColorPickerSwatchProps
interface ColorPickerSwatchProps extends HTMLChakraProps<'div', ArkColorPicker.SwatchBaseProps> {}
interface ColorPickerSwatchTriggerProps
interface ColorPickerSwatchTriggerProps extends HTMLChakraProps<'button', ArkColorPicker.SwatchTriggerBaseProps> {}
interface ColorPickerTransparencyGridProps
interface ColorPickerTransparencyGridProps extends HTMLChakraProps<'div', ArkColorPicker.TransparencyGridBaseProps> {}
interface ColorPickerTriggerProps
interface ColorPickerTriggerProps extends HTMLChakraProps<'button', ArkColorPicker.TriggerBaseProps> {}
interface ColorPickerValueChangeDetails
interface ColorPickerValueChangeDetails extends ArkColorPicker.ValueChangeDetails {}
interface ColorPickerValueSwatchProps
interface ColorPickerValueSwatchProps extends HTMLChakraProps<'div', ArkColorPicker.ValueSwatchBaseProps> {}
interface ColorPickerValueTextProps
interface ColorPickerValueTextProps extends HTMLChakraProps<'div', ArkColorPicker.ValueTextBaseProps> {}
interface ColorPickerViewProps
interface ColorPickerViewProps extends HTMLChakraProps<'div', ArkColorPicker.ViewBaseProps> {}
interface ColorSwatchBaseProps
interface ColorSwatchBaseProps extends UnstyledProp, RecipeProps<'colorSwatch'> {}
property value
value: string;
interface ColorSwatchMixProps
interface ColorSwatchMixProps extends Omit<ColorSwatchProps, 'value'> {}
property items
items: string[];
interface ColorSwatchProps
interface ColorSwatchProps extends Assign<HTMLChakraProps<'span'>, ColorSwatchBaseProps> {}
interface CompositionStyles
interface CompositionStyles {}
property animationStyles
animationStyles: AnimationStyles;
property layerStyles
layerStyles: LayerStyles;
property textStyles
textStyles: TextStyles;
interface ConfigRecipeSlots
interface ConfigRecipeSlots {}
property accordion
accordion: AccordionSlot;
property actionBar
actionBar: ActionBarSlot;
property alert
alert: AlertSlot;
property avatar
avatar: AvatarSlot;
property blockquote
blockquote: BlockquoteSlot;
property breadcrumb
breadcrumb: BreadcrumbSlot;
property card
card: CardSlot;
property checkbox
checkbox: CheckboxSlot;
property checkboxCard
checkboxCard: CheckboxCardSlot;
property collapsible
collapsible: CollapsibleSlot;
property colorPicker
colorPicker: ColorPickerSlot;
property dataList
dataList: DataListSlot;
property dialog
dialog: DialogSlot;
property drawer
drawer: DrawerSlot;
property editable
editable: EditableSlot;
property emptyState
emptyState: EmptyStateSlot;
property field
field: FieldSlot;
property fieldset
fieldset: FieldsetSlot;
property fileUpload
fileUpload: FileUploadSlot;
property hoverCard
hoverCard: HoverCardSlot;
property list
list: ListSlot;
property menu
menu: MenuSlot;
property nativeSelect
nativeSelect: NativeSelectSlot;
property numberInput
numberInput: NumberInputSlot;
property pinInput
pinInput: PinInputSlot;
property popover
popover: PopoverSlot;
property progress
progress: ProgressSlot;
property progressCircle
progressCircle: ProgressCircleSlot;
property qrCode
qrCode: QrCodeSlot;
property radioCard
radioCard: RadioCardSlot;
property radioGroup
radioGroup: RadioGroupSlot;
property ratingGroup
ratingGroup: RatingGroupSlot;
property segmentGroup
segmentGroup: SegmentGroupSlot;
property select
select: SelectSlot;
property slider
slider: SliderSlot;
property stat
stat: StatSlot;
property status
status: StatusSlot;
property steps
steps: StepsSlot;
property switch
switch: SwitchSlot;
property table
table: TableSlot;
property tabs
tabs: TabsSlot;
property tag
tag: TagSlot;
property timeline
timeline: TimelineSlot;
property toast
toast: ToastSlot;
property tooltip
tooltip: TooltipSlot;
interface ContainerProps
interface ContainerProps extends HTMLChakraProps<'div', ContainerBaseProps> {}
interface CssKeyframes
interface CssKeyframes {}
index signature
[name: string]: { [time: string]: CssProperties;};
interface DataListItemLabelProps
interface DataListItemLabelProps extends HTMLChakraProps<'dt'> {}
interface DataListItemProps
interface DataListItemProps extends HTMLChakraProps<'div'> {}
interface DataListItemValueProps
interface DataListItemValueProps extends HTMLChakraProps<'dd'> {}
interface DataListRootProps
interface DataListRootProps extends HTMLChakraProps<'dl', DataListRootBaseProps> {}
interface DialogActionTriggerProps
interface DialogActionTriggerProps extends HTMLChakraProps<'button'> {}
interface DialogBackdropProps
interface DialogBackdropProps extends HTMLChakraProps<'div', ArkDialog.BackdropBaseProps> {}
interface DialogBodyProps
interface DialogBodyProps extends HTMLChakraProps<'div'> {}
interface DialogCloseTriggerProps
interface DialogCloseTriggerProps extends HTMLChakraProps<'button', ArkDialog.CloseTriggerBaseProps> {}
interface DialogContentProps
interface DialogContentProps extends HTMLChakraProps<'section', ArkDialog.ContentBaseProps> {}
interface DialogDescriptionProps
interface DialogDescriptionProps extends HTMLChakraProps<'p', ArkDialog.DescriptionBaseProps> {}
interface DialogFooterProps
interface DialogFooterProps extends HTMLChakraProps<'footer'> {}
interface DialogHeaderProps
interface DialogHeaderProps extends HTMLChakraProps<'div'> {}
interface DialogOpenChangeDetails
interface DialogOpenChangeDetails extends ArkDialog.OpenChangeDetails {}
interface DialogPositionerProps
interface DialogPositionerProps extends HTMLChakraProps<'div', ArkDialog.PositionerBaseProps> {}
interface DialogRootProps
interface DialogRootProps extends DialogRootBaseProps {}
property children
children: React.ReactNode;
interface DialogRootProviderProps
interface DialogRootProviderProps extends DialogRootProviderBaseProps {}
property children
children: React.ReactNode;
interface DialogTitleProps
interface DialogTitleProps extends HTMLChakraProps<'h2', ArkDialog.TitleBaseProps> {}
interface DialogTriggerProps
interface DialogTriggerProps extends HTMLChakraProps<'button', ArkDialog.TriggerBaseProps> {}
interface DrawerActionTriggerProps
interface DrawerActionTriggerProps extends HTMLChakraProps<'button'> {}
interface DrawerBackdropProps
interface DrawerBackdropProps extends HTMLChakraProps<'div', ArkDialog.BackdropBaseProps> {}
interface DrawerBodyProps
interface DrawerBodyProps extends HTMLChakraProps<'div'> {}
interface DrawerCloseTriggerProps
interface DrawerCloseTriggerProps extends HTMLChakraProps<'button', ArkDialog.CloseTriggerBaseProps> {}
interface DrawerContentProps
interface DrawerContentProps extends HTMLChakraProps<'section', ArkDialog.ContentBaseProps> {}
interface DrawerDescriptionProps
interface DrawerDescriptionProps extends HTMLChakraProps<'p', ArkDialog.DescriptionBaseProps> {}
interface DrawerFooterProps
interface DrawerFooterProps extends HTMLChakraProps<'footer'> {}
interface DrawerHeaderProps
interface DrawerHeaderProps extends HTMLChakraProps<'div'> {}
interface DrawerOpenChangeDetails
interface DrawerOpenChangeDetails extends ArkDialog.OpenChangeDetails {}
interface DrawerPositionerProps
interface DrawerPositionerProps extends HTMLChakraProps<'div', ArkDialog.PositionerBaseProps> {}
interface DrawerRootProps
interface DrawerRootProps extends DrawerRootBaseProps {}
property children
children: React.ReactNode;
interface DrawerRootProviderProps
interface DrawerRootProviderProps extends DrawerRootProviderBaseProps {}
property children
children: React.ReactNode;
interface DrawerTitleProps
interface DrawerTitleProps extends HTMLChakraProps<'h2', ArkDialog.TitleBaseProps> {}
interface DrawerTriggerProps
interface DrawerTriggerProps extends HTMLChakraProps<'button', ArkDialog.TriggerBaseProps> {}
interface EditableAreaProps
interface EditableAreaProps extends HTMLChakraProps<'div', ArkEditable.AreaBaseProps> {}
interface EditableCancelTriggerProps
interface EditableCancelTriggerProps extends HTMLChakraProps<'button', ArkEditable.CancelTriggerBaseProps> {}
interface EditableControlProps
interface EditableControlProps extends HTMLChakraProps<'div', ArkEditable.ControlBaseProps> {}
interface EditableEditTriggerProps
interface EditableEditTriggerProps extends HTMLChakraProps<'button', ArkEditable.EditTriggerBaseProps> {}
interface EditableInputProps
interface EditableInputProps extends HTMLChakraProps<'input', ArkEditable.InputBaseProps> {}
interface EditablePreviewProps
interface EditablePreviewProps extends HTMLChakraProps<'span', ArkEditable.PreviewBaseProps> {}
interface EditableRootProps
interface EditableRootProps extends HTMLChakraProps<'div', EditableRootBaseProps> {}
interface EditableRootProviderProps
interface EditableRootProviderProps extends HTMLChakraProps<'div', EditableRootProviderBaseProps> {}
interface EditableSubmitTriggerProps
interface EditableSubmitTriggerProps extends HTMLChakraProps<'button', ArkEditable.SubmitTriggerBaseProps> {}
interface EditableTextareaProps
interface EditableTextareaProps extends HTMLChakraProps<'textarea', ArkEditable.InputBaseProps> {}
interface EditableValueChangeDetails
interface EditableValueChangeDetails extends ArkEditable.ValueChangeDetails {}
interface EmProps
interface EmProps extends HTMLChakraProps<'em'> {}
interface EmptyStateContentProps
interface EmptyStateContentProps extends HTMLChakraProps<'div'> {}
interface EmptyStateDescriptionProps
interface EmptyStateDescriptionProps extends HTMLChakraProps<'p'> {}
interface EmptyStateIndicatorProps
interface EmptyStateIndicatorProps extends HTMLChakraProps<'div'> {}
interface EmptyStateRootProps
interface EmptyStateRootProps extends HTMLChakraProps<'div', EmptyStateRootBaseProps> {}
interface EmptyStateTitleProps
interface EmptyStateTitleProps extends HTMLChakraProps<'h3'> {}
interface FieldErrorIconProps
interface FieldErrorIconProps extends HTMLChakraProps<'svg'> {}
interface FieldErrorTextProps
interface FieldErrorTextProps extends HTMLChakraProps<'div', ArkField.ErrorTextBaseProps> {}
interface FieldHelperTextProps
interface FieldHelperTextProps extends HTMLChakraProps<'div', ArkField.HelperTextBaseProps> {}
interface FieldLabelProps
interface FieldLabelProps extends HTMLChakraProps<'label', ArkField.LabelBaseProps> {}
interface FieldRequiredIndicatorProps
interface FieldRequiredIndicatorProps extends HTMLChakraProps<'span'> {}
property fallback
fallback?: React.ReactNode;
interface FieldRootProps
interface FieldRootProps extends HTMLChakraProps<'div', FieldRootBaseProps> {}
interface FieldsetContentProps
interface FieldsetContentProps extends HTMLChakraProps<'div'> {}
interface FieldsetErrorTextProps
interface FieldsetErrorTextProps extends HTMLChakraProps<'span', Fieldset.ErrorTextBaseProps> {}
interface FieldsetHelperTextProps
interface FieldsetHelperTextProps extends HTMLChakraProps<'span', Fieldset.HelperTextBaseProps> {}
interface FieldsetLegendProps
interface FieldsetLegendProps extends HTMLChakraProps<'legend', Fieldset.LegendBaseProps> {}
interface FieldsetRootProps
interface FieldsetRootProps extends HTMLChakraProps<'fieldset', FieldsetRootBaseProps> {}
interface FileUploadClearTriggerProps
interface FileUploadClearTriggerProps extends HTMLChakraProps<'button'> {}
interface FileUploadDropzoneContentProps
interface FileUploadDropzoneContentProps extends HTMLChakraProps<'div'> {}
interface FileUploadDropzoneProps
interface FileUploadDropzoneProps extends HTMLChakraProps<'li', ArkFileUpload.DropzoneBaseProps> {}
interface FileUploadFileAcceptDetails
interface FileUploadFileAcceptDetails extends ArkFileUpload.FileAcceptDetails {}
interface FileUploadFileChangeDetails
interface FileUploadFileChangeDetails extends ArkFileUpload.FileChangeDetails {}
interface FileUploadFileRejectDetails
interface FileUploadFileRejectDetails extends ArkFileUpload.FileRejectDetails {}
interface FileUploadItemContentProps
interface FileUploadItemContentProps extends HTMLChakraProps<'div'> {}
interface FileUploadItemDeleteTriggerProps
interface FileUploadItemDeleteTriggerProps extends HTMLChakraProps<'button', ArkFileUpload.ItemDeleteTriggerBaseProps> {}
interface FileUploadItemGroupProps
interface FileUploadItemGroupProps extends HTMLChakraProps<'ul', ArkFileUpload.ItemGroupBaseProps> {}
interface FileUploadItemNameProps
interface FileUploadItemNameProps extends HTMLChakraProps<'span', ArkFileUpload.ItemNameBaseProps> {}
interface FileUploadItemPreviewImageProps
interface FileUploadItemPreviewImageProps extends HTMLChakraProps<'img', ArkFileUpload.ItemPreviewImageBaseProps> {}
interface FileUploadItemPreviewProps
interface FileUploadItemPreviewProps extends HTMLChakraProps<'div', ArkFileUpload.ItemPreviewBaseProps> {}
interface FileUploadItemProps
interface FileUploadItemProps extends HTMLChakraProps<'li', ArkFileUpload.ItemBaseProps> {}
interface FileUploadItemSizeTextProps
interface FileUploadItemSizeTextProps extends HTMLChakraProps<'span', ArkFileUpload.ItemSizeTextBaseProps> {}
interface FileUploadLabelProps
interface FileUploadLabelProps extends HTMLChakraProps<'label', ArkFileUpload.LabelBaseProps> {}
interface FileUploadRootProps
interface FileUploadRootProps extends HTMLChakraProps<'div', FileUploadRootBaseProps> {}
interface FileUploadRootProviderProps
interface FileUploadRootProviderProps extends HTMLChakraProps<'div', FileUploadRootProviderBaseProps> {}
interface FileUploadTriggerProps
interface FileUploadTriggerProps extends HTMLChakraProps<'button', ArkFileUpload.TriggerBaseProps> {}
interface FlexProps
interface FlexProps extends HTMLChakraProps<'div', FlexOptions> {}
interface FloatProps
interface FloatProps extends Omit<HTMLChakraProps<'div'>, keyof FloatOptions>, FloatOptions {}
interface FormatByteProps
interface FormatByteProps extends Format.ByteProps {}
interface FormatNumberProps
interface FormatNumberProps extends Format.NumberProps {}
interface ForProps
interface ForProps<T> {}
property children
children: (item: Exclude<T, undefined>, index: number) => React.ReactNode;
The render function to render each item in the array
property each
each: T[] | readonly T[] | undefined;
The array to iterate over
property fallback
fallback?: React.ReactNode;
The fallback content to render when the array is empty
interface GlobalStyleObject
interface GlobalStyleObject {}
index signature
[selector: string]: SystemStyleObject;
interface GridItemProps
interface GridItemProps extends BoxProps {}
property area
area?: SystemStyleObject['gridArea'];
property colEnd
colEnd?: ConditionalValue<number | 'auto'>;
property colSpan
colSpan?: ConditionalValue<number | 'auto'>;
property colStart
colStart?: ConditionalValue<number | 'auto'>;
property rowEnd
rowEnd?: ConditionalValue<number | 'auto'>;
property rowSpan
rowSpan?: ConditionalValue<number | 'auto'>;
property rowStart
rowStart?: ConditionalValue<number | 'auto'>;
interface GridProps
interface GridProps extends Omit<HTMLChakraProps<'div'>, keyof GridOptions>, GridOptions {}
interface GroupProps
interface GroupProps extends HTMLChakraProps<'div', VariantProps> {}
interface HeadingProps
interface HeadingProps extends Assign<HTMLChakraProps<'h2'>, RecipeProps<'heading'>> {}
interface HighlightProps
interface HighlightProps {}
property children
children: string | ((props: HighlightChunk[]) => React.ReactNode);
property ignoreCase
ignoreCase?: boolean;
property matchAll
matchAll?: boolean;
property query
query: string | string[];
property styles
styles?: SystemStyleObject;
interface HoverCardArrowProps
interface HoverCardArrowProps extends HTMLChakraProps<'div', ArkHoverCard.ArrowBaseProps> {}
interface HoverCardArrowTipProps
interface HoverCardArrowTipProps extends HTMLChakraProps<'div', ArkHoverCard.ArrowTipBaseProps> {}
interface HoverCardContentProps
interface HoverCardContentProps extends HTMLChakraProps<'section', ArkHoverCard.ContentBaseProps> {}
interface HoverCardOpenChangeDetails
interface HoverCardOpenChangeDetails extends ArkHoverCard.OpenChangeDetails {}
interface HoverCardPositionerProps
interface HoverCardPositionerProps extends HTMLChakraProps<'div', ArkHoverCard.PositionerBaseProps> {}
interface HoverCardRootProps
interface HoverCardRootProps extends HoverCardRootBaseProps {}
property children
children: React.ReactNode;
interface HoverCardRootProviderProps
interface HoverCardRootProviderProps extends HoverCardRootProviderBaseProps {}
property children
children: React.ReactNode;
interface HoverCardTriggerProps
interface HoverCardTriggerProps extends HTMLChakraProps<'button', ArkHoverCard.TriggerBaseProps> {}
interface HtmlProps
interface HtmlProps {}
property htmlContent
htmlContent?: string;
property htmlHeight
htmlHeight?: string | number;
property htmlSize
htmlSize?: number;
property htmlTranslate
htmlTranslate?: 'yes' | 'no' | undefined;
property htmlWidth
htmlWidth?: string | number;
interface IconButtonProps
interface IconButtonProps extends ButtonProps {}
interface IconProps
interface IconProps extends HTMLChakraProps<'svg'>, RecipeProps<'icon'> {}
interface ImageProps
interface ImageProps extends HTMLChakraProps<'img', ImageOptions> {}
interface InputAddonProps
interface InputAddonProps extends HTMLChakraProps<'div'>, RecipeProps<'inputAddon'>, UnstyledProp {}
interface InputElementProps
interface InputElementProps extends HTMLChakraProps<'div'> {}
interface InputProps
interface InputProps extends HTMLChakraProps<'input', InputBaseProps> {}
interface JsxFactory
interface JsxFactory {}
call signature
<T extends ElementType>(component: T): ChakraComponent<T, {}>;
call signature
<T extends ElementType, P extends RecipeVariantRecord>( component: T, recipe: RecipeDefinition<P>, options?: JsxFactoryOptions<Assign<ComponentProps<T>, RecipeSelection<P>>>): JsxElement<T, RecipeSelection<P>>;
interface JsxFactoryOptions
interface JsxFactoryOptions<TProps> {}
property defaultProps
defaultProps?: Partial<TProps> & DataAttr;
property forwardAsChild
forwardAsChild?: boolean;
property forwardProps
forwardProps?: string[];
method shouldForwardProp
shouldForwardProp: (prop: string, variantKeys: string[]) => boolean;
interface JsxStyleProps
interface JsxStyleProps extends SystemProperties, MinimalNested<SystemStyleObject> {}
property css
css?: | SystemStyleObject | undefined | Omit<(SystemStyleObject | undefined)[], keyof any[]>;
interface KbdProps
interface KbdProps extends HTMLChakraProps<'kbd', KbdBaseProps> {}
interface LinkBoxProps
interface LinkBoxProps extends HTMLChakraProps<'div'> {}
interface LinkOverlayProps
interface LinkOverlayProps extends HTMLChakraProps<'a'> {}
interface LinkProps
interface LinkProps extends HTMLChakraProps<'a', LinkBaseProps> {}
interface ListIndicatorProps
interface ListIndicatorProps extends HTMLChakraProps<'span'> {}
interface ListItemProps
interface ListItemProps extends HTMLChakraProps<'li'> {}
interface ListRootProps
interface ListRootProps extends HTMLChakraProps<'ul', ListRootBaseProps> {}
interface MarkProps
interface MarkProps extends Assign<HTMLChakraProps<'mark'>, RecipeProps<'mark'>> {}
interface MenuArrowProps
interface MenuArrowProps extends HTMLChakraProps<'div', ArkMenu.ArrowBaseProps> {}
interface MenuArrowTipProps
interface MenuArrowTipProps extends HTMLChakraProps<'div', ArkMenu.ArrowTipBaseProps> {}
interface MenuCheckboxItemProps
interface MenuCheckboxItemProps extends HTMLChakraProps<'div', ArkMenu.CheckboxItemBaseProps> {}
interface MenuContentProps
interface MenuContentProps extends HTMLChakraProps<'div', ArkMenu.ContentBaseProps> {}
interface MenuContextTriggerProps
interface MenuContextTriggerProps extends HTMLChakraProps<'div', ArkMenu.ContextTriggerBaseProps> {}
interface MenuHighlightChangeDetails
interface MenuHighlightChangeDetails extends ArkMenu.HighlightChangeDetails {}
interface MenuIndicatorProps
interface MenuIndicatorProps extends HTMLChakraProps<'div', ArkMenu.IndicatorBaseProps> {}
interface MenuItemCommandProps
interface MenuItemCommandProps extends HTMLChakraProps<'kbd'> {}
interface MenuItemGroupLabelProps
interface MenuItemGroupLabelProps extends HTMLChakraProps<'div', ArkMenu.ItemGroupLabelBaseProps> {}
interface MenuItemGroupProps
interface MenuItemGroupProps extends HTMLChakraProps<'div', ArkMenu.ItemGroupBaseProps> {}
interface MenuItemIndicatorProps
interface MenuItemIndicatorProps extends HTMLChakraProps<'div', ArkMenu.ItemIndicatorBaseProps> {}
interface MenuItemProps
interface MenuItemProps extends HTMLChakraProps<'div', ArkMenu.ItemBaseProps> {}
interface MenuItemTextProps
interface MenuItemTextProps extends HTMLChakraProps<'div', ArkMenu.ItemTextBaseProps> {}
interface MenuOpenChangeDetails
interface MenuOpenChangeDetails extends ArkMenu.OpenChangeDetails {}
interface MenuPositionerProps
interface MenuPositionerProps extends HTMLChakraProps<'div', ArkMenu.PositionerBaseProps> {}
interface MenuRadioItemGroupProps
interface MenuRadioItemGroupProps extends HTMLChakraProps<'div', ArkMenu.RadioItemGroupBaseProps> {}
interface MenuRadioItemProps
interface MenuRadioItemProps extends HTMLChakraProps<'div', ArkMenu.RadioItemBaseProps> {}
interface MenuRootProps
interface MenuRootProps extends MenuRootBaseProps {}
property children
children: React.ReactNode;
interface MenuRootProviderProps
interface MenuRootProviderProps extends MenuRootProviderBaseProps {}
property children
children: React.ReactNode;
interface MenuSelectionDetails
interface MenuSelectionDetails extends ArkMenu.SelectionDetails {}
interface MenuSeparatorProps
interface MenuSeparatorProps extends HTMLChakraProps<'div', ArkMenu.SeparatorBaseProps> {}
interface MenuTriggerItemProps
interface MenuTriggerItemProps extends HTMLChakraProps<'div', ArkMenu.TriggerItemBaseProps> {}
interface MenuTriggerProps
interface MenuTriggerProps extends HTMLChakraProps<'button', ArkMenu.TriggerBaseProps> {}
interface NativeSelectFieldProps
interface NativeSelectFieldProps extends Omit<HTMLChakraProps<'select'>, Omitted> {}
property placeholder
placeholder?: string;
interface NativeSelectIndicatorProps
interface NativeSelectIndicatorProps extends HTMLChakraProps<'div'> {}
interface NativeSelectRootProps
interface NativeSelectRootProps extends HTMLChakraProps<'div', NativeSelectRootBaseProps> {}
interface NumberInputControlProps
interface NumberInputControlProps extends HTMLChakraProps<'div', ArkNumberInput.ControlBaseProps> {}
interface NumberInputDecrementTriggerProps
interface NumberInputDecrementTriggerProps extends HTMLChakraProps<'button', ArkNumberInput.DecrementTriggerBaseProps> {}
interface NumberInputFocusChangeDetails
interface NumberInputFocusChangeDetails extends ArkNumberInput.FocusChangeDetails {}
interface NumberInputIncrementTriggerProps
interface NumberInputIncrementTriggerProps extends HTMLChakraProps<'button', ArkNumberInput.IncrementTriggerBaseProps> {}
interface NumberInputInputProps
interface NumberInputInputProps extends HTMLChakraProps<'input', ArkNumberInput.InputBaseProps> {}
interface NumberInputLabelProps
interface NumberInputLabelProps extends HTMLChakraProps<'label', ArkNumberInput.LabelBaseProps> {}
interface NumberInputRootProps
interface NumberInputRootProps extends HTMLChakraProps<'div', NumberInputRootBaseProps> {}
interface NumberInputRootProviderProps
interface NumberInputRootProviderProps extends HTMLChakraProps<'div', NumberInputRootProviderBaseProps> {}
interface NumberInputScrubberProps
interface NumberInputScrubberProps extends HTMLChakraProps<'div', ArkNumberInput.ScrubberBaseProps> {}
interface NumberInputValueChangeDetails
interface NumberInputValueChangeDetails extends ArkNumberInput.ValueChangeDetails {}
interface NumberInputValueInvalidDetails
interface NumberInputValueInvalidDetails extends ArkNumberInput.ValueInvalidDetails {}
interface NumberInputValueTextProps
interface NumberInputValueTextProps extends HTMLChakraProps<'span', ArkNumberInput.ValueTextBaseProps> {}
interface PaginationEllipsisProps
interface PaginationEllipsisProps extends HTMLChakraProps<'div', ArkPagination.EllipsisBaseProps> {}
interface PaginationItemProps
interface PaginationItemProps extends HTMLChakraProps<'button', ArkPagination.ItemBaseProps> {}
interface PaginationNextTriggerProps
interface PaginationNextTriggerProps extends HTMLChakraProps<'button', ArkPagination.NextTriggerBaseProps> {}
interface PaginationPrevTriggerProps
interface PaginationPrevTriggerProps extends HTMLChakraProps<'button', ArkPagination.PrevTriggerBaseProps> {}
interface PaginationRootProps
interface PaginationRootProps extends HTMLChakraProps<'div', PaginationRootBaseProps> {}
interface PaginationRootProviderProps
interface PaginationRootProviderProps extends HTMLChakraProps<'div', PaginationRootProviderBaseProps> {}
interface PinInputControlProps
interface PinInputControlProps extends HTMLChakraProps<'div', ArkPinInput.ControlBaseProps> {}
interface PinInputInputProps
interface PinInputInputProps extends HTMLChakraProps<'input', ArkPinInput.InputBaseProps> {}
interface PinInputLabelProps
interface PinInputLabelProps extends HTMLChakraProps<'label'> {}
interface PinInputRootProps
interface PinInputRootProps extends HTMLChakraProps<'div', PinInputRootBaseProps> {}
interface PinInputRootProviderProps
interface PinInputRootProviderProps extends HTMLChakraProps<'div', PinInputRootProviderBaseProps> {}
interface PinInputValueChangeDetails
interface PinInputValueChangeDetails extends ArkPinInput.ValueChangeDetails {}
interface PolymorphicProps
interface PolymorphicProps {}
interface PopoverAnchorProps
interface PopoverAnchorProps extends HTMLChakraProps<'div', ArkPopover.AnchorBaseProps> {}
interface PopoverArrowProps
interface PopoverArrowProps extends HTMLChakraProps<'div', ArkPopover.ArrowBaseProps> {}
interface PopoverArrowTipProps
interface PopoverArrowTipProps extends HTMLChakraProps<'div', ArkPopover.ArrowTipBaseProps> {}
interface PopoverBodyProps
interface PopoverBodyProps extends HTMLChakraProps<'div'> {}
interface PopoverCloseTriggerProps
interface PopoverCloseTriggerProps extends HTMLChakraProps<'button', ArkPopover.CloseTriggerBaseProps> {}
interface PopoverContentProps
interface PopoverContentProps extends HTMLChakraProps<'div', ArkPopover.ContentBaseProps> {}
interface PopoverDescriptionProps
interface PopoverDescriptionProps extends HTMLChakraProps<'div', ArkPopover.DescriptionBaseProps> {}
interface PopoverFooterProps
interface PopoverFooterProps extends HTMLChakraProps<'footer'> {}
interface PopoverHeaderProps
interface PopoverHeaderProps extends HTMLChakraProps<'div', ArkPopover.TitleBaseProps> {}
interface PopoverOpenChangeDetails
interface PopoverOpenChangeDetails extends ArkPopover.OpenChangeDetails {}
interface PopoverPositionerProps
interface PopoverPositionerProps extends HTMLChakraProps<'div', ArkPopover.PositionerBaseProps> {}
interface PopoverRootProps
interface PopoverRootProps extends PopoverRootBaseProps {}
property children
children: React.ReactNode;
interface PopoverRootProviderProps
interface PopoverRootProviderProps extends PopoverRootProviderBaseProps {}
property children
children: React.ReactNode;
interface PopoverTitleProps
interface PopoverTitleProps extends HTMLChakraProps<'div', ArkPopover.TitleBaseProps> {}
interface PopoverTriggerProps
interface PopoverTriggerProps extends HTMLChakraProps<'button', ArkPopover.TriggerBaseProps> {}
interface ProgressCircleCircleProps
interface ProgressCircleCircleProps extends HTMLChakraProps<'svg', ArkProgress.CircleBaseProps> {}
interface ProgressCircleLabelProps
interface ProgressCircleLabelProps extends HTMLChakraProps<'div', ArkProgress.LabelBaseProps> {}
interface ProgressCircleRangeProps
interface ProgressCircleRangeProps extends HTMLChakraProps<'circle', ArkProgress.RangeBaseProps> {}
interface ProgressCircleRootProps
interface ProgressCircleRootProps extends HTMLChakraProps<'div', ProgressCircleRootBaseProps> {}
interface ProgressCircleRootProviderProps
interface ProgressCircleRootProviderProps extends HTMLChakraProps<'div', ProgressCircleRootProviderBaseProps> {}
interface ProgressCircleTrackProps
interface ProgressCircleTrackProps extends HTMLChakraProps<'circle', ArkProgress.TrackBaseProps> {}
interface ProgressCircleValueTextProps
interface ProgressCircleValueTextProps extends HTMLChakraProps<'div', ArkProgress.ValueTextBaseProps> {}
interface ProgressLabelProps
interface ProgressLabelProps extends HTMLChakraProps<'div', ArkProgress.LabelBaseProps> {}
interface ProgressRangeProps
interface ProgressRangeProps extends HTMLChakraProps<'div', ArkProgress.RangeBaseProps> {}
interface ProgressRootProps
interface ProgressRootProps extends HTMLChakraProps<'div', ProgressRootBaseProps> {}
interface ProgressRootProviderProps
interface ProgressRootProviderProps extends HTMLChakraProps<'div', ProgressRootProviderBaseProps> {}
interface ProgressTrackProps
interface ProgressTrackProps extends HTMLChakraProps<'div', ArkProgress.TrackBaseProps> {}
interface ProgressValueTextProps
interface ProgressValueTextProps extends HTMLChakraProps<'div', ArkProgress.ValueTextBaseProps> {}
interface QrCodeFrameProps
interface QrCodeFrameProps extends HTMLChakraProps<'svg'> {}
interface QrCodeOverlayProps
interface QrCodeOverlayProps extends HTMLChakraProps<'div'> {}
interface QrCodePatternProps
interface QrCodePatternProps extends HTMLChakraProps<'path'> {}
interface QrCodeRootProps
interface QrCodeRootProps extends HTMLChakraProps<'div', QrCodeRootBaseProps> {}
interface RadioCardItemAddonProps
interface RadioCardItemAddonProps extends HTMLChakraProps<'div'> {}
interface RadioCardItemContentProps
interface RadioCardItemContentProps extends HTMLChakraProps<'div'> {}
interface RadioCardItemControlProps
interface RadioCardItemControlProps extends HTMLChakraProps<'div', ArkRadioGroup.ItemControlBaseProps> {}
interface RadioCardItemDescriptionProps
interface RadioCardItemDescriptionProps extends HTMLChakraProps<'div'> {}
interface RadioCardItemIndicatorProps
interface RadioCardItemIndicatorProps extends HTMLChakraProps<'span'> {}
property checked
checked?: React.ReactElement;
interface RadioCardItemProps
interface RadioCardItemProps extends HTMLChakraProps<'div', ArkRadioGroup.ItemBaseProps> {}
interface RadioCardItemTextProps
interface RadioCardItemTextProps extends HTMLChakraProps<'span', ArkRadioGroup.ItemTextBaseProps> {}
interface RadioCardLabelProps
interface RadioCardLabelProps extends HTMLChakraProps<'div', ArkRadioGroup.LabelBaseProps> {}
interface RadioCardRootProps
interface RadioCardRootProps extends HTMLChakraProps<'div', RadioCardRootBaseProps> {}
interface RadioCardRootProviderProps
interface RadioCardRootProviderProps extends HTMLChakraProps<'div', RadioCardRootProviderBaseProps> {}
interface RadioCardValueChangeDetails
interface RadioCardValueChangeDetails extends ArkRadioGroup.ValueChangeDetails {}
interface RadioGroupItemControlProps
interface RadioGroupItemControlProps extends HTMLChakraProps<'div', ArkRadioGroup.ItemControlBaseProps> {}
interface RadioGroupItemProps
interface RadioGroupItemProps extends HTMLChakraProps<'div', ArkRadioGroup.ItemBaseProps> {}
interface RadioGroupItemTextProps
interface RadioGroupItemTextProps extends HTMLChakraProps<'span', ArkRadioGroup.ItemTextBaseProps> {}
interface RadioGroupLabelProps
interface RadioGroupLabelProps extends HTMLChakraProps<'div', ArkRadioGroup.LabelBaseProps> {}
interface RadioGroupRootProps
interface RadioGroupRootProps extends HTMLChakraProps<'div', RadioGroupRootBaseProps> {}
interface RadioGroupRootProviderProps
interface RadioGroupRootProviderProps extends HTMLChakraProps<'div', RadioGroupRootProviderBaseProps> {}
interface RadioGroupValueChangeDetails
interface RadioGroupValueChangeDetails extends ArkRadioGroup.ValueChangeDetails {}
interface RadiomarkProps
interface RadiomarkProps extends HTMLChakraProps<'span', RecipeProps<'radiomark'>>, UnstyledProp {}
interface RatingGroupControlProps
interface RatingGroupControlProps extends HTMLChakraProps<'div', ArkRatingGroup.ControlBaseProps> {}
interface RatingGroupHoverChangeDetails
interface RatingGroupHoverChangeDetails extends ArkRatingGroup.HoverChangeDetails {}
interface RatingGroupItemIndicatorProps
interface RatingGroupItemIndicatorProps extends HTMLChakraProps<'span'> {}
property icon
icon?: React.ReactElement;
interface RatingGroupItemProps
interface RatingGroupItemProps extends HTMLChakraProps<'div', ArkRatingGroup.ItemBaseProps> {}
interface RatingGroupLabelProps
interface RatingGroupLabelProps extends HTMLChakraProps<'div', ArkRatingGroup.LabelBaseProps> {}
interface RatingGroupRootProps
interface RatingGroupRootProps extends HTMLChakraProps<'div', RatingGroupRootBaseProps> {}
interface RatingGroupRootProviderProps
interface RatingGroupRootProviderProps extends HTMLChakraProps<'div', RatingGroupRootProviderBaseProps> {}
interface RatingGroupValueChangeDetails
interface RatingGroupValueChangeDetails extends ArkRatingGroup.ValueChangeDetails {}
interface RecipeDefinition
interface RecipeDefinition<T extends RecipeVariantRecord = RecipeVariantRecord> {}
property base
base?: SystemStyleObject;
The base styles of the recipe.
property className
className?: string;
The class name of the recipe.
property compoundVariants
compoundVariants?: Pretty<RecipeCompoundVariant<RecipeCompoundSelection<T>>>[];
The styles to apply when a combination of variants is selected.
property defaultVariants
defaultVariants?: RecipeSelection<T> & { colorPalette?: ColorPalette;};
The default variants of the recipe.
property variants
variants?: T;
The multi-variant styles of the recipe.
interface RecipeRuntimeFn
interface RecipeRuntimeFn<T extends RecipeVariantRecord> extends RecipeVariantFn<T> {}
property config
config: RecipeDefinition<T>;
property merge
merge: any;
property variantKeys
variantKeys: (keyof T)[];
property variantMap
variantMap: RecipeVariantMap<T>;
method splitVariantProps
splitVariantProps: <Props extends RecipeSelection<T>>( props: Props) => [RecipeSelection<T>, Pretty<DistributiveOmit<Props, keyof T>>];
interface SegmentGroupIndicatorProps
interface SegmentGroupIndicatorProps extends HTMLChakraProps<'div', ArkSegmentGroup.IndicatorBaseProps> {}
interface SegmentGroupItemProps
interface SegmentGroupItemProps extends HTMLChakraProps<'label', ArkSegmentGroup.ItemBaseProps> {}
interface SegmentGroupItemTextProps
interface SegmentGroupItemTextProps extends HTMLChakraProps<'span', ArkSegmentGroup.ItemTextBaseProps> {}
interface SegmentGroupRootProps
interface SegmentGroupRootProps extends HTMLChakraProps<'div', SegmentGroupRootBaseProps> {}
interface SegmentGroupRootProviderProps
interface SegmentGroupRootProviderProps extends HTMLChakraProps<'div', SegmentGroupRootProviderBaseProps> {}
interface SegmentGroupValueChangeDetails
interface SegmentGroupValueChangeDetails extends ArkSegmentGroup.ValueChangeDetails {}
interface SelectClearTriggerProps
interface SelectClearTriggerProps extends HTMLChakraProps<'button', ArkSelect.ClearTriggerBaseProps> {}
interface SelectContentProps
interface SelectContentProps extends HTMLChakraProps<'div', ArkSelect.ContentBaseProps> {}
interface SelectControlProps
interface SelectControlProps extends HTMLChakraProps<'div', ArkSelect.ControlBaseProps> {}
interface SelectHighlightChangeDetails
interface SelectHighlightChangeDetails<T extends CollectionItem = any> extends ArkSelect.HighlightChangeDetails<T> {}
interface SelectIndicatorGroupProps
interface SelectIndicatorGroupProps extends HTMLChakraProps<'div'> {}
interface SelectIndicatorProps
interface SelectIndicatorProps extends HTMLChakraProps<'div', ArkSelect.ItemIndicatorBaseProps> {}
interface SelectItemGroupLabelProps
interface SelectItemGroupLabelProps extends HTMLChakraProps<'div', ArkSelect.ItemGroupLabelBaseProps> {}
interface SelectItemGroupProps
interface SelectItemGroupProps extends HTMLChakraProps<'div', ArkSelect.ItemGroupBaseProps> {}
interface SelectItemIndicatorProps
interface SelectItemIndicatorProps extends HTMLChakraProps<'div', ArkSelect.ItemIndicatorBaseProps> {}
interface SelectItemProps
interface SelectItemProps extends HTMLChakraProps<'div', ArkSelect.ItemBaseProps> {}
interface SelectItemTextProps
interface SelectItemTextProps extends HTMLChakraProps<'div', ArkSelect.ItemTextBaseProps> {}
interface SelectLabelProps
interface SelectLabelProps extends HTMLChakraProps<'label', ArkSelect.LabelBaseProps> {}
interface SelectOpenChangeDetails
interface SelectOpenChangeDetails extends ArkSelect.OpenChangeDetails {}
interface SelectPositionerProps
interface SelectPositionerProps extends HTMLChakraProps<'div', ArkSelect.PositionerBaseProps> {}
interface SelectRootProps
interface SelectRootProps<T extends CollectionItem = any> extends HTMLChakraProps<'div', SelectRootBaseProps<T>> {}
interface SelectRootProviderProps
interface SelectRootProviderProps<T extends CollectionItem = any> extends HTMLChakraProps<'div', SelectRootProviderBaseProps<T>> {}
interface SelectTriggerProps
interface SelectTriggerProps extends HTMLChakraProps<'button', ArkSelect.TriggerBaseProps> {}
interface SelectValueChangeDetails
interface SelectValueChangeDetails<T extends CollectionItem = any> extends ArkSelect.ValueChangeDetails<T> {}
interface SelectValueTextProps
interface SelectValueTextProps extends HTMLChakraProps<'span', ArkSelect.ValueTextBaseProps> {}
interface SeparatorProps
interface SeparatorProps extends HTMLChakraProps<'span', SeparatorBaseProps> {}
interface ShowProps
interface ShowProps<T> {}
interface SimpleGridProps
interface SimpleGridProps extends Omit<GridProps, 'columns'>, SimpleGridOptions {}
interface SkeletonProps
interface SkeletonProps extends HTMLChakraProps<'div'>, RecipeProps<'skeleton'>, UnstyledProp {}
interface SkipNavContentProps
interface SkipNavContentProps extends HTMLChakraProps<'div'> {}
interface SkipNavLinkProps
interface SkipNavLinkProps extends HTMLChakraProps<'a'>, RecipeProps<'skipNavLink'> {}
interface SliderControlProps
interface SliderControlProps extends HTMLChakraProps<'div', ArkSlider.ControlBaseProps> {}
interface SliderDraggingIndicatorProps
interface SliderDraggingIndicatorProps extends HTMLChakraProps<'div', ArkSlider.DraggingIndicatorBaseProps> {}
interface SliderLabelProps
interface SliderLabelProps extends HTMLChakraProps<'label', ArkSlider.LabelBaseProps> {}
interface SliderMarkerGroupProps
interface SliderMarkerGroupProps extends HTMLChakraProps<'div', ArkSlider.MarkerGroupBaseProps> {}
interface SliderMarkerIndicatorProps
interface SliderMarkerIndicatorProps extends HTMLChakraProps<'div'> {}
interface SliderMarkerProps
interface SliderMarkerProps extends HTMLChakraProps<'div', ArkSlider.MarkerBaseProps> {}
interface SliderRangeProps
interface SliderRangeProps extends HTMLChakraProps<'div', ArkSlider.RangeBaseProps> {}
interface SliderRootProps
interface SliderRootProps extends HTMLChakraProps<'div', SliderRootBaseProps> {}
interface SliderRootProviderProps
interface SliderRootProviderProps extends HTMLChakraProps<'div', SliderRootProviderBaseProps> {}
interface SliderThumbProps
interface SliderThumbProps extends HTMLChakraProps<'div', ArkSlider.ThumbBaseProps> {}
interface SliderTrackProps
interface SliderTrackProps extends HTMLChakraProps<'div', ArkSlider.TrackBaseProps> {}
interface SliderValueChangeDetails
interface SliderValueChangeDetails extends ArkSlider.ValueChangeDetails {}
interface SliderValueTextProps
interface SliderValueTextProps extends HTMLChakraProps<'div', ArkSlider.ValueTextBaseProps> {}
interface SlotRecipeDefinition
interface SlotRecipeDefinition< S extends string = string, T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>> {}
property base
base?: SlotRecord<S, SystemStyleObject>;
The base styles of the recipe.
property className
className?: string;
The class name of the recipe. Useful for targeting slots.
Say the recipe has slots like
root
,control
and the class name is 'checkbox' Each slot will have a class name likecheckbox__root
,checkbox__control
property compoundVariants
compoundVariants?: Pretty< SlotRecipeCompoundVariant<S, RecipeCompoundSelection<T>>>[];
The styles to apply when a combination of variants is selected.
property defaultVariants
defaultVariants?: RecipeSelection<T> & { colorPalette?: ColorPalette;};
The default variants of the recipe.
property slots
slots: S[] | Readonly<S[]>;
The parts/slots of the recipe.
property variants
variants?: T;
The multi-variant styles of the recipe.
interface SlotRecipeRuntimeFn
interface SlotRecipeRuntimeFn<S extends string, T extends SlotRecipeVariantRecord<S>> extends SlotRecipeVariantFn<S, T> {}
property classNameMap
classNameMap: Record<S, string>;
property variantKeys
variantKeys: (keyof T)[];
property variantMap
variantMap: RecipeVariantMap<T>;
method splitVariantProps
splitVariantProps: <Props extends RecipeSelection<T>>( props: Props) => [RecipeSelection<T>, Pretty<Omit<Props, keyof T>>];
interface SpacerProps
interface SpacerProps extends HTMLChakraProps<'div'> {}
interface SpanProps
interface SpanProps extends HTMLChakraProps<'span'> {}
interface SpinnerProps
interface SpinnerProps extends HTMLChakraProps<'span'>, UnstyledProp, RecipeProps<'spinner'> {}
interface SquareProps
interface SquareProps extends BoxProps {}
property size
size?: BoxProps['boxSize'];
The size (width and height) of the square
interface StackProps
interface StackProps extends HTMLChakraProps<'div', StackOptions> {}
interface StackSeparatorProps
interface StackSeparatorProps extends HTMLChakraProps<'div'> {}
interface StatDownIndicatorProps
interface StatDownIndicatorProps extends HTMLChakraProps<'span'> {}
interface StatHelpTextProps
interface StatHelpTextProps extends HTMLChakraProps<'span'> {}
interface StatLabelProps
interface StatLabelProps extends HTMLChakraProps<'dt'> {}
interface StatRootProps
interface StatRootProps extends HTMLChakraProps<'dl', StatRootBaseProps> {}
interface StatUpIndicatorProps
interface StatUpIndicatorProps extends HTMLChakraProps<'span'> {}
interface StatusIndicatorProps
interface StatusIndicatorProps extends HTMLChakraProps<'div'> {}
interface StatusRootProps
interface StatusRootProps extends HTMLChakraProps<'div', StatusRootBaseProps> {}
interface StatValueTextProps
interface StatValueTextProps extends HTMLChakraProps<'dd'> {}
interface StatValueUnitProps
interface StatValueUnitProps extends HTMLChakraProps<'span'> {}
interface StepsChangeDetails
interface StepsChangeDetails extends ArkSteps.ChangeDetails {}
interface StepsCompletedContentProps
interface StepsCompletedContentProps extends HTMLChakraProps<'div'> {}
interface StepsContentProps
interface StepsContentProps extends HTMLChakraProps<'div', ArkSteps.ContentBaseProps> {}
interface StepsDescriptionProps
interface StepsDescriptionProps extends HTMLChakraProps<'div'> {}
interface StepsIndicatorProps
interface StepsIndicatorProps extends HTMLChakraProps<'div', ArkSteps.IndicatorBaseProps> {}
interface StepsItemProps
interface StepsItemProps extends HTMLChakraProps<'div', ArkSteps.ItemBaseProps> {}
interface StepsListProps
interface StepsListProps extends HTMLChakraProps<'div', ArkSteps.ListBaseProps> {}
interface StepsNextTriggerProps
interface StepsNextTriggerProps extends HTMLChakraProps<'button', ArkSteps.NextTriggerBaseProps> {}
interface StepsNumberProps
interface StepsNumberProps extends HTMLChakraProps<'div'> {}
interface StepsPrevTriggerProps
interface StepsPrevTriggerProps extends HTMLChakraProps<'button', ArkSteps.PrevTriggerBaseProps> {}
interface StepsRootProps
interface StepsRootProps extends HTMLChakraProps<'div', StepsRootBaseProps> {}
interface StepsRootProviderProps
interface StepsRootProviderProps extends HTMLChakraProps<'div', StepsRootProviderBaseProps> {}
interface StepsSeparatorProps
interface StepsSeparatorProps extends HTMLChakraProps<'div', ArkSteps.SeparatorBaseProps> {}
interface StepsStatusProps
interface StepsStatusProps {}
property complete
complete: React.ReactNode;
property current
current?: React.ReactNode;
property incomplete
incomplete: React.ReactNode;
interface StepsTitleProps
interface StepsTitleProps extends HTMLChakraProps<'div'> {}
interface StepsTriggerProps
interface StepsTriggerProps extends HTMLChakraProps<'button', ArkSteps.TriggerBaseProps> {}
interface StickyProps
interface StickyProps extends HTMLChakraProps<'div'> {}
interface StrongProps
interface StrongProps extends HTMLChakraProps<'em'> {}
interface SwitchCheckedChangeDetails
interface SwitchCheckedChangeDetails extends ArkSwitch.CheckedChangeDetails {}
interface SwitchControlProps
interface SwitchControlProps extends HTMLChakraProps<'span', ArkSwitch.ControlBaseProps> {}
interface SwitchIndicatorProps
interface SwitchIndicatorProps extends HTMLChakraProps<'span'> {}
property fallback
fallback?: React.ReactNode;
interface SwitchLabelProps
interface SwitchLabelProps extends HTMLChakraProps<'span', ArkSwitch.LabelBaseProps> {}
interface SwitchRootProps
interface SwitchRootProps extends HTMLChakraProps<'label', SwitchRootBaseProps> {}
interface SwitchRootProviderProps
interface SwitchRootProviderProps extends HTMLChakraProps<'label', SwitchRootProviderBaseProps> {}
interface SwitchThumbIndicatorProps
interface SwitchThumbIndicatorProps extends HTMLChakraProps<'span'> {}
property fallback
fallback?: React.ReactNode;
interface SwitchThumbProps
interface SwitchThumbProps extends HTMLChakraProps<'span', ArkSwitch.ThumbBaseProps> {}
interface SystemConfig
interface SystemConfig extends PreflightConfig {}
property conditions
conditions?: Dict;
property cssVarsPrefix
cssVarsPrefix?: string;
property cssVarsRoot
cssVarsRoot?: string;
property disableLayers
disableLayers?: boolean;
property globalCss
globalCss?: Record<string, SystemStyleObject>;
property layers
layers?: Record<CascadeLayer, string>;
property strictTokens
strictTokens?: boolean;
property theme
theme?: ThemingConfig;
property utilities
utilities?: UtilityConfig;
interface SystemContext
interface SystemContext {}
property $$chakra
$$chakra: true;
property breakpoints
breakpoints: Breakpoint;
property conditions
conditions: Condition;
property css
css: CssFn;
property cva
cva: RecipeCreatorFn;
property layers
layers: Layers;
property properties
properties: Set<string>;
property sva
sva: SlotRecipeCreatorFn;
property token
token: TokenFn;
property tokens
tokens: TokenDictionary;
property utility
utility: Utility;
method getGlobalCss
getGlobalCss: () => Dict;
method getPreflightCss
getPreflightCss: () => Dict;
method getRecipe
getRecipe: (key: string, fallback?: any) => any;
method getSlotRecipe
getSlotRecipe: (key: string, fallback?: any) => any;
method getTokenCss
getTokenCss: () => Dict;
method hasRecipe
hasRecipe: (key: string) => boolean;
method isRecipe
isRecipe: (key: string) => boolean;
method isSlotRecipe
isSlotRecipe: (key: string) => boolean;
method isValidProperty
isValidProperty: (prop: string) => boolean;
method normalizeValue
normalizeValue: (value: any) => any;
method splitCssProps
splitCssProps: <T extends SystemStyleObject>( props: T) => [SystemStyleObject, DistributiveOmit<T, keyof SystemStyleObject>];
interface SystemRecipeFn
interface SystemRecipeFn<VP, VM> {}
property className
className: string;
property variantKeys
variantKeys: Array<keyof VP>;
property variantMap
variantMap: VM;
method splitVariantProps
splitVariantProps: <P extends VP>( props: P) => [VP, Pretty<DistributiveOmit<P, keyof VP>>];
call signature
(props?: Partial<VP>): SystemStyleObject;
interface SystemSlotRecipeFn
interface SystemSlotRecipeFn<S extends string, VP, VM> {}
property classNameMap
classNameMap: Record<S, string>;
property variantKeys
variantKeys: Array<keyof VP>;
property variantMap
variantMap: VM;
method splitVariantProps
splitVariantProps: <P extends VP & { recipe?: any }>( props: P) => [VP, Pretty<DistributiveOmit<P, keyof VP | 'recipe'>>];
call signature
(props?: Partial<VP>): Record<S, SystemStyleObject>;
interface TableBodyProps
interface TableBodyProps extends HTMLChakraProps<'tbody'> {}
interface TableCaptionProps
interface TableCaptionProps extends HTMLChakraProps<'caption'> {}
interface TableCellProps
interface TableCellProps extends HTMLChakraProps<'td'> {}
interface TableColumnGroupProps
interface TableColumnGroupProps extends HTMLChakraProps<'colgroup'> {}
interface TableColumnHeaderProps
interface TableColumnHeaderProps extends HTMLChakraProps<'th'> {}
interface TableColumnProps
interface TableColumnProps extends HTMLChakraProps<'col'> {}
interface TableFooterProps
interface TableFooterProps extends HTMLChakraProps<'tfoot'> {}
interface TableHeaderProps
interface TableHeaderProps extends HTMLChakraProps<'thead'> {}
interface TableRootProps
interface TableRootProps extends HTMLChakraProps<'table', TableRootBaseProps> {}
property native
native?: boolean;
If
true
, the table will style its descendants with nested selectors
interface TableRowProps
interface TableRowProps extends HTMLChakraProps<'tr'> {}
interface TableScrollAreaProps
interface TableScrollAreaProps extends HTMLChakraProps<'div'> {}
interface TabsContentGroupProps
interface TabsContentGroupProps extends HTMLChakraProps<'div'> {}
interface TabsContentProps
interface TabsContentProps extends HTMLChakraProps<'div', ArkTabs.ContentBaseProps> {}
interface TabsIndicatorProps
interface TabsIndicatorProps extends HTMLChakraProps<'div', ArkTabs.ListBaseProps> {}
interface TabsListProps
interface TabsListProps extends HTMLChakraProps<'div', ArkTabs.ListBaseProps> {}
interface TabsRootProps
interface TabsRootProps extends HTMLChakraProps<'div', TabsRootBaseProps> {}
interface TabsRootProviderProps
interface TabsRootProviderProps extends HTMLChakraProps<'div', TabsRootProviderBaseProps> {}
interface TabsTriggerProps
interface TabsTriggerProps extends HTMLChakraProps<'button', ArkTabs.TriggerBaseProps> {}
interface TagCloseTriggerProps
interface TagCloseTriggerProps extends HTMLChakraProps<'button'> {}
interface TagEndElementProps
interface TagEndElementProps extends HTMLChakraProps<'span'> {}
interface TagLabelProps
interface TagLabelProps extends HTMLChakraProps<'span'> {}
interface TagRootProps
interface TagRootProps extends HTMLChakraProps<'span', TagRootBaseProps> {}
interface TagStartElementProps
interface TagStartElementProps extends HTMLChakraProps<'span'> {}
interface TextareaProps
interface TextareaProps extends HTMLChakraProps<'textarea', TextareaBaseProps> {}
interface TextProps
interface TextProps extends Assign<HTMLChakraProps<'p'>, RecipeProps<'text'>> {}
interface ThemeProps
interface ThemeProps extends HTMLChakraProps<'div'> {}
property appearance
appearance?: 'light' | 'dark';
The appearance of the theme.
property hasBackground
hasBackground?: boolean;
Whether to apply the theme background and color.
interface ThemingConfig
interface ThemingConfig {}
property animationStyles
animationStyles?: Record<string, Dict>;
property breakpoints
breakpoints?: Record<string, string>;
property keyframes
keyframes?: CssKeyframes;
property layerStyles
layerStyles?: Record<string, Dict>;
property recipes
recipes?: Record<string, RecipeDefinition>;
property semanticTokens
semanticTokens?: SemanticTokenDefinition;
property slotRecipes
slotRecipes?: Record<string, SlotRecipeConfig>;
property textStyles
textStyles?: Record<string, Dict>;
property tokens
tokens?: TokenDefinition;
interface TimelineConnectorProps
interface TimelineConnectorProps extends HTMLChakraProps<'div'> {}
interface TimelineContentProps
interface TimelineContentProps extends HTMLChakraProps<'div'> {}
interface TimelineDescriptionProps
interface TimelineDescriptionProps extends HTMLChakraProps<'div'> {}
interface TimelineIndicatorProps
interface TimelineIndicatorProps extends HTMLChakraProps<'div'> {}
interface TimelineItemProps
interface TimelineItemProps extends HTMLChakraProps<'div'> {}
interface TimelineRootProps
interface TimelineRootProps extends HTMLChakraProps<'div', TimelineRootBaseProps> {}
interface TimelineSeparatorProps
interface TimelineSeparatorProps extends HTMLChakraProps<'div'> {}
interface TimelineTitleProps
interface TimelineTitleProps extends HTMLChakraProps<'div'> {}
interface ToastActionTriggerProps
interface ToastActionTriggerProps extends HTMLChakraProps<'button', ArkToast.ActionTriggerProps> {}
interface ToastCloseTriggerProps
interface ToastCloseTriggerProps extends HTMLChakraProps<'button', ArkToast.CloseTriggerProps> {}
interface ToastDescriptionProps
interface ToastDescriptionProps extends HTMLChakraProps<'div', ArkToast.DescriptionProps> {}
interface ToasterProps
interface ToasterProps extends HTMLChakraProps<'div', ToasterBaseProps> {}
interface ToastIndicatorProps
interface ToastIndicatorProps extends HTMLChakraProps<'span'> {}
interface ToastRootProps
interface ToastRootProps extends HTMLChakraProps<'div', ToastRootBaseProps> {}
interface ToastTitleProps
interface ToastTitleProps extends HTMLChakraProps<'div', ArkToast.TitleProps> {}
interface ToggleIndicatorProps
interface ToggleIndicatorProps extends HTMLChakraProps<'div', ArkToggle.IndicatorBaseProps> {}
interface ToggleRootBaseProps
interface ToggleRootBaseProps extends Assign<ArkToggle.RootBaseProps, SlotRecipeProps<'toggle'>>, UnstyledProp {}
interface ToggleRootProps
interface ToggleRootProps extends HTMLChakraProps<'button', ToggleRootBaseProps> {}
interface TokenInterface
interface Token<T = any> {}
property description
description?: string;
property extensions
extensions: TokenExtensions;
property name
name: string;
property originalValue
originalValue: any;
property path
path: string[];
property value
value: T;
interface TooltipArrowProps
interface TooltipArrowProps extends HTMLChakraProps<'div', ArkTooltip.ArrowProps> {}
interface TooltipArrowTipProps
interface TooltipArrowTipProps extends HTMLChakraProps<'div', ArkTooltip.ArrowTipProps> {}
interface TooltipContentProps
interface TooltipContentProps extends HTMLChakraProps<'section', ArkTooltip.ContentProps> {}
interface TooltipOpenChangeDetails
interface TooltipOpenChangeDetails extends ArkTooltip.OpenChangeDetails {}
interface TooltipPositionerProps
interface TooltipPositionerProps extends HTMLChakraProps<'div', ArkTooltip.PositionerProps> {}
interface TooltipRootProps
interface TooltipRootProps extends TooltipRootBaseProps {}
property children
children?: React.ReactNode;
interface TooltipRootProviderProps
interface TooltipRootProviderProps extends TooltipRootProviderBaseProps {}
property children
children?: React.ReactNode;
interface TooltipTriggerProps
interface TooltipTriggerProps extends HTMLChakraProps<'button', ArkTooltip.TriggerProps> {}
interface UnstyledProp
interface UnstyledProp {}
property unstyled
unstyled?: boolean;
If
true
, the element will opt out of the theme styles.
interface UseBreakpointOptions
interface UseBreakpointOptions {}
property breakpoints
breakpoints?: string[];
property fallback
fallback?: string;
property getWindow
getWindow?: () => typeof window;
property ssr
ssr?: boolean;
interface UseControllableStateProps
interface UseControllableStateProps<T> {}
property defaultValue
defaultValue?: T | (() => T);
property onChange
onChange?: (value: T) => void;
property shouldUpdate
shouldUpdate?: (prev: T, next: T) => boolean;
property value
value?: T;
interface UseDisclosureProps
interface UseDisclosureProps {}
property defaultOpen
defaultOpen?: boolean;
property id
id?: string;
property open
open?: boolean;
method onClose
onClose: () => void;
method onOpen
onOpen: () => void;
interface UseMediaQueryOptions
interface UseMediaQueryOptions {}
interface UseRecipeOptions
interface UseRecipeOptions<K extends RecipeKey> {}
interface UseSlotRecipeOptions
interface UseSlotRecipeOptions<K extends SlotRecipeKey> {}
interface WithContextOptions
interface WithContextOptions<P> extends JsxFactoryOptions<P> {}
interface WithProviderOptions
interface WithProviderOptions<P> extends JsxFactoryOptions<P>, WrapElementProps<P> {}
interface WithRootProviderOptions
interface WithRootProviderOptions<P> extends WrapElementProps<P> {}
property defaultProps
defaultProps?: Partial<P>;
Type Aliases
type AnimationStyle
type AnimationStyle = CompositionStyleObject<AnimationStyleProperty>;
type AnimationStyles
type AnimationStyles = Recursive<Token<AnimationStyle>>;
type ChakraComponent
type ChakraComponent<T extends ElementType, P extends Dict = {}> = FunctionComponent< HTMLChakraProps<T, P> & { ref?: any; }>;
type ColorPalette
type ColorPalette = | 'transparent' | 'current' | 'black' | 'white' | 'whiteAlpha' | 'blackAlpha' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink' | 'bg' | 'fg' | 'border';
type ConditionalValue
type ConditionalValue<V> = | V | Array<V | null> | { [K in keyof Conditions]?: ConditionalValue<V>; };
type DataAttr
type DataAttr = Record< `data-${string}`, string | number | undefined | null | boolean>;
type HTMLChakraProps
type HTMLChakraProps<T extends ElementType, P extends Dict = {}> = JsxHtmlProps< ComponentPropsWithoutRef<T>, Assign<JsxStyleProps, P> & PolymorphicProps>;
type HtmlProp
type HtmlProp = | 'color' | 'size' | 'translate' | 'transition' | 'width' | 'height' | 'content';
type InferRecipeProps
type InferRecipeProps<T> = T extends ChakraComponent<any, infer P> ? P : {};
type JsxElement
type JsxElement<T extends ElementType, P extends Dict> = T extends ChakraComponent< infer A, infer B> ? ChakraComponent<A, Pretty<DistributiveUnion<P, B>>> : ChakraComponent<T, P>;
type JsxHtmlProps
type JsxHtmlProps<T extends Dict, P extends Dict = {}> = Assign< PatchHtmlProps<T>, P>;
type LayerStyle
type LayerStyle = CompositionStyleObject<LayerStyleProperty>;
type LayerStyles
type LayerStyles = Recursive<Token<LayerStyle>>;
type PatchHtmlProps
type PatchHtmlProps<T> = DistributiveOmit<T, HtmlProp> & HtmlProps;
type RecipeCompoundSelection
type RecipeCompoundSelection<T> = { [K in keyof T]?: OneOrMore<StringToBoolean<keyof T[K]>> | undefined;} & { colorPalette?: OneOrMore<ColorPalette> | undefined;};
type RecipeCompoundVariant
type RecipeCompoundVariant<T> = T & { css: SystemStyleObject;};
type RecipeCreatorFn
type RecipeCreatorFn = <T extends RecipeVariantRecord>( config: RecipeDefinition<T>) => RecipeRuntimeFn<T>;
type RecipeIdentityFn
type RecipeIdentityFn = <T extends RecipeVariantRecord>( config: RecipeDefinition<T>) => RecipeDefinition<T>;
type RecipeKey
type RecipeKey = keyof ConfigRecipes | (string & {});
type RecipeProps
type RecipeProps<T> = T extends keyof ConfigRecipes ? ConfigRecipes[T]['__type'] & { recipe?: RecipeDefinition } : { recipe?: RecipeDefinition };
type RecipeSelection
type RecipeSelection< T extends RecipeVariantRecord | SlotRecipeVariantRecord<string>> = keyof any extends keyof T ? {} : { [K in keyof T]?: ConditionalValue<StringToBoolean<keyof T[K]> | undefined>; };
type RecipeVariantFn
type RecipeVariantFn<T extends RecipeVariantRecord> = ( props?: RecipeSelection<T>) => string;
type RecipeVariantMap
type RecipeVariantMap<T extends RecipeVariantRecord> = { [K in keyof T]: Array<keyof T[K]>;};
type RecipeVariantProps
type RecipeVariantProps<T extends RecipeDefinition | SlotRecipeDefinition> = T extends RecipeDefinition<infer U> ? RecipeSelection<U> : T extends SlotRecipeDefinition<string, infer U> ? RecipeSelection<U> : never;
type RecipeVariantRecord
type RecipeVariantRecord = Record<any, Record<any, SystemStyleObject>>;
type SlotRecipeCompoundVariant
type SlotRecipeCompoundVariant<S extends string, T> = T & { css: SlotRecord<S, SystemStyleObject>;};
type SlotRecipeConfig
type SlotRecipeConfig< S extends string = string, T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>> = SlotRecipeDefinition<S, T>;
type SlotRecipeCreatorFn
type SlotRecipeCreatorFn = <S extends string, T extends SlotRecipeVariantRecord<S>>( config: SlotRecipeDefinition<S, T>) => SlotRecipeRuntimeFn<S, T>;
type SlotRecipeFn
type SlotRecipeFn<K extends SlotRecipeKey> = K extends keyof ConfigSlotRecipes ? ConfigSlotRecipes[K] : SystemSlotRecipeFn<string, {}, {}>;
type SlotRecipeIdentityFn
type SlotRecipeIdentityFn = <S extends string, T extends SlotRecipeVariantRecord<S>>( config: SlotRecipeDefinition<S, T>) => SlotRecipeDefinition<S, T>;
type SlotRecipeKey
type SlotRecipeKey = keyof ConfigSlotRecipes | (string & {});
type SlotRecipeProps
type SlotRecipeProps<T> = T extends keyof ConfigSlotRecipes ? ConfigSlotRecipes[T]['__type'] & { recipe?: SlotRecipeDefinition } : { recipe?: SlotRecipeDefinition };
type SlotRecipeRecord
type SlotRecipeRecord<T, K> = T extends keyof ConfigRecipeSlots ? Record<ConfigRecipeSlots[T], K> : Record<string, K>;
type SlotRecipeVariantFn
type SlotRecipeVariantFn<S extends string, T extends RecipeVariantRecord> = ( props?: RecipeSelection<T>) => SlotRecord<S, string>;
type SlotRecipeVariantRecord
type SlotRecipeVariantRecord<S extends string> = Record< any, Record<any, SlotRecord<S, SystemStyleObject>>>;
type StyledFactoryFn
type StyledFactoryFn = JsxFactory & JsxElements;
type SystemStyleObject
type SystemStyleObject = Nested<SystemProperties & CssVarProperties>;
type TextStyle
type TextStyle = CompositionStyleObject<TextStyleProperty>;
type TextStyles
type TextStyles = Recursive<Token<TextStyle>>;
type Token
type Token = | 'aspectRatios.square' | 'aspectRatios.landscape' | 'aspectRatios.portrait' | 'aspectRatios.wide' | 'aspectRatios.ultrawide' | 'aspectRatios.golden' | 'animations.spin' | 'animations.ping' | 'animations.pulse' | 'animations.bounce' | 'blurs.none' | 'blurs.sm' | 'blurs.md' | 'blurs.lg' | 'blurs.xl' | 'blurs.2xl' | 'blurs.3xl' | 'blurs.4xl' | 'borders.xs' | 'borders.sm' | 'borders.md' | 'borders.lg' | 'borders.xl' | 'colors.transparent' | 'colors.current' | 'colors.black' | 'colors.white' | 'colors.whiteAlpha.50' | 'colors.whiteAlpha.100' | 'colors.whiteAlpha.200' | 'colors.whiteAlpha.300' | 'colors.whiteAlpha.400' | 'colors.whiteAlpha.500' | 'colors.whiteAlpha.600' | 'colors.whiteAlpha.700' | 'colors.whiteAlpha.800' | 'colors.whiteAlpha.900' | 'colors.whiteAlpha.950' | 'colors.blackAlpha.50' | 'colors.blackAlpha.100' | 'colors.blackAlpha.200' | 'colors.blackAlpha.300' | 'colors.blackAlpha.400' | 'colors.blackAlpha.500' | 'colors.blackAlpha.600' | 'colors.blackAlpha.700' | 'colors.blackAlpha.800' | 'colors.blackAlpha.900' | 'colors.blackAlpha.950' | 'colors.gray.50' | 'colors.gray.100' | 'colors.gray.200' | 'colors.gray.300' | 'colors.gray.400' | 'colors.gray.500' | 'colors.gray.600' | 'colors.gray.700' | 'colors.gray.800' | 'colors.gray.900' | 'colors.gray.950' | 'colors.red.50' | 'colors.red.100' | 'colors.red.200' | 'colors.red.300' | 'colors.red.400' | 'colors.red.500' | 'colors.red.600' | 'colors.red.700' | 'colors.red.800' | 'colors.red.900' | 'colors.red.950' | 'colors.orange.50' | 'colors.orange.100' | 'colors.orange.200' | 'colors.orange.300' | 'colors.orange.400' | 'colors.orange.500' | 'colors.orange.600' | 'colors.orange.700' | 'colors.orange.800' | 'colors.orange.900' | 'colors.orange.950' | 'colors.yellow.50' | 'colors.yellow.100' | 'colors.yellow.200' | 'colors.yellow.300' | 'colors.yellow.400' | 'colors.yellow.500' | 'colors.yellow.600' | 'colors.yellow.700' | 'colors.yellow.800' | 'colors.yellow.900' | 'colors.yellow.950' | 'colors.green.50' | 'colors.green.100' | 'colors.green.200' | 'colors.green.300' | 'colors.green.400' | 'colors.green.500' | 'colors.green.600' | 'colors.green.700' | 'colors.green.800' | 'colors.green.900' | 'colors.green.950' | 'colors.teal.50' | 'colors.teal.100' | 'colors.teal.200' | 'colors.teal.300' | 'colors.teal.400' | 'colors.teal.500' | 'colors.teal.600' | 'colors.teal.700' | 'colors.teal.800' | 'colors.teal.900' | 'colors.teal.950' | 'colors.blue.50' | 'colors.blue.100' | 'colors.blue.200' | 'colors.blue.300' | 'colors.blue.400' | 'colors.blue.500' | 'colors.blue.600' | 'colors.blue.700' | 'colors.blue.800' | 'colors.blue.900' | 'colors.blue.950' | 'colors.cyan.50' | 'colors.cyan.100' | 'colors.cyan.200' | 'colors.cyan.300' | 'colors.cyan.400' | 'colors.cyan.500' | 'colors.cyan.600' | 'colors.cyan.700' | 'colors.cyan.800' | 'colors.cyan.900' | 'colors.cyan.950' | 'colors.purple.50' | 'colors.purple.100' | 'colors.purple.200' | 'colors.purple.300' | 'colors.purple.400' | 'colors.purple.500' | 'colors.purple.600' | 'colors.purple.700' | 'colors.purple.800' | 'colors.purple.900' | 'colors.purple.950' | 'colors.pink.50' | 'colors.pink.100' | 'colors.pink.200' | 'colors.pink.300' | 'colors.pink.400' | 'colors.pink.500' | 'colors.pink.600' | 'colors.pink.700' | 'colors.pink.800' | 'colors.pink.900' | 'colors.pink.950' | 'durations.fastest' | 'durations.faster' | 'durations.fast' | 'durations.moderate' | 'durations.slow' | 'durations.slower' | 'durations.slowest' | 'easings.ease-in' | 'easings.ease-out' | 'easings.ease-in-out' | 'easings.ease-in-smooth' | 'fonts.heading' | 'fonts.body' | 'fonts.mono' | 'fontSizes.2xs' | 'fontSizes.xs' | 'fontSizes.sm' | 'fontSizes.md' | 'fontSizes.lg' | 'fontSizes.xl' | 'fontSizes.2xl' | 'fontSizes.3xl' | 'fontSizes.4xl' | 'fontSizes.5xl' | 'fontSizes.6xl' | 'fontSizes.7xl' | 'fontSizes.8xl' | 'fontSizes.9xl' | 'fontWeights.thin' | 'fontWeights.extralight' | 'fontWeights.light' | 'fontWeights.normal' | 'fontWeights.medium' | 'fontWeights.semibold' | 'fontWeights.bold' | 'fontWeights.extrabold' | 'fontWeights.black' | 'letterSpacings.tighter' | 'letterSpacings.tight' | 'letterSpacings.wide' | 'letterSpacings.wider' | 'letterSpacings.widest' | 'lineHeights.shorter' | 'lineHeights.short' | 'lineHeights.moderate' | 'lineHeights.tall' | 'lineHeights.taller' | 'radii.none' | 'radii.2xs' | 'radii.xs' | 'radii.sm' | 'radii.md' | 'radii.lg' | 'radii.xl' | 'radii.2xl' | 'radii.3xl' | 'radii.4xl' | 'radii.full' | 'spacing.1' | 'spacing.2' | 'spacing.3' | 'spacing.4' | 'spacing.5' | 'spacing.6' | 'spacing.7' | 'spacing.8' | 'spacing.9' | 'spacing.10' | 'spacing.11' | 'spacing.12' | 'spacing.14' | 'spacing.16' | 'spacing.20' | 'spacing.24' | 'spacing.28' | 'spacing.32' | 'spacing.36' | 'spacing.40' | 'spacing.44' | 'spacing.48' | 'spacing.52' | 'spacing.56' | 'spacing.60' | 'spacing.64' | 'spacing.72' | 'spacing.80' | 'spacing.96' | 'spacing.0.5' | 'spacing.1.5' | 'spacing.2.5' | 'spacing.3.5' | 'spacing.4.5' | 'sizes.1' | 'sizes.2' | 'sizes.3' | 'sizes.4' | 'sizes.5' | 'sizes.6' | 'sizes.7' | 'sizes.8' | 'sizes.9' | 'sizes.10' | 'sizes.11' | 'sizes.12' | 'sizes.14' | 'sizes.16' | 'sizes.20' | 'sizes.24' | 'sizes.28' | 'sizes.32' | 'sizes.36' | 'sizes.40' | 'sizes.44' | 'sizes.48' | 'sizes.52' | 'sizes.56' | 'sizes.60' | 'sizes.64' | 'sizes.72' | 'sizes.80' | 'sizes.96' | 'sizes.3xs' | 'sizes.2xs' | 'sizes.xs' | 'sizes.sm' | 'sizes.md' | 'sizes.lg' | 'sizes.xl' | 'sizes.2xl' | 'sizes.3xl' | 'sizes.4xl' | 'sizes.5xl' | 'sizes.6xl' | 'sizes.7xl' | 'sizes.8xl' | 'sizes.0.5' | 'sizes.1.5' | 'sizes.2.5' | 'sizes.3.5' | 'sizes.4.5' | 'sizes.1/2' | 'sizes.1/3' | 'sizes.2/3' | 'sizes.1/4' | 'sizes.3/4' | 'sizes.1/5' | 'sizes.2/5' | 'sizes.3/5' | 'sizes.4/5' | 'sizes.1/6' | 'sizes.2/6' | 'sizes.3/6' | 'sizes.4/6' | 'sizes.5/6' | 'sizes.1/12' | 'sizes.2/12' | 'sizes.3/12' | 'sizes.4/12' | 'sizes.5/12' | 'sizes.6/12' | 'sizes.7/12' | 'sizes.8/12' | 'sizes.9/12' | 'sizes.10/12' | 'sizes.11/12' | 'sizes.max' | 'sizes.min' | 'sizes.fit' | 'sizes.prose' | 'sizes.full' | 'sizes.dvh' | 'sizes.svh' | 'sizes.lvh' | 'sizes.dvw' | 'sizes.svw' | 'sizes.lvw' | 'sizes.vw' | 'sizes.vh' | 'sizes.breakpoint-sm' | 'sizes.breakpoint-md' | 'sizes.breakpoint-lg' | 'sizes.breakpoint-xl' | 'sizes.breakpoint-2xl' | 'zIndex.hide' | 'zIndex.base' | 'zIndex.docked' | 'zIndex.dropdown' | 'zIndex.sticky' | 'zIndex.banner' | 'zIndex.overlay' | 'zIndex.modal' | 'zIndex.popover' | 'zIndex.skipNav' | 'zIndex.toast' | 'zIndex.tooltip' | 'zIndex.max' | 'cursor.button' | 'cursor.checkbox' | 'cursor.disabled' | 'cursor.menuitem' | 'cursor.option' | 'cursor.radio' | 'cursor.slider' | 'cursor.switch' | 'breakpoints.sm' | 'breakpoints.md' | 'breakpoints.lg' | 'breakpoints.xl' | 'breakpoints.2xl' | 'colors.bg' | 'colors.bg.subtle' | 'colors.bg.muted' | 'colors.bg.emphasized' | 'colors.bg.inverted' | 'colors.bg.panel' | 'colors.bg.error' | 'colors.bg.warning' | 'colors.bg.success' | 'colors.bg.info' | 'colors.fg' | 'colors.fg.muted' | 'colors.fg.subtle' | 'colors.fg.inverted' | 'colors.fg.error' | 'colors.fg.warning' | 'colors.fg.success' | 'colors.fg.info' | 'colors.border' | 'colors.border.muted' | 'colors.border.subtle' | 'colors.border.emphasized' | 'colors.border.inverted' | 'colors.border.error' | 'colors.border.warning' | 'colors.border.success' | 'colors.border.info' | 'colors.gray.contrast' | 'colors.gray.fg' | 'colors.gray.subtle' | 'colors.gray.muted' | 'colors.gray.emphasized' | 'colors.gray.solid' | 'colors.gray.focusRing' | 'colors.red.contrast' | 'colors.red.fg' | 'colors.red.subtle' | 'colors.red.muted' | 'colors.red.emphasized' | 'colors.red.solid' | 'colors.red.focusRing' | 'colors.orange.contrast' | 'colors.orange.fg' | 'colors.orange.subtle' | 'colors.orange.muted' | 'colors.orange.emphasized' | 'colors.orange.solid' | 'colors.orange.focusRing' | 'colors.green.contrast' | 'colors.green.fg' | 'colors.green.subtle' | 'colors.green.muted' | 'colors.green.emphasized' | 'colors.green.solid' | 'colors.green.focusRing' | 'colors.blue.contrast' | 'colors.blue.fg' | 'colors.blue.subtle' | 'colors.blue.muted' | 'colors.blue.emphasized' | 'colors.blue.solid' | 'colors.blue.focusRing' | 'colors.yellow.contrast' | 'colors.yellow.fg' | 'colors.yellow.subtle' | 'colors.yellow.muted' | 'colors.yellow.emphasized' | 'colors.yellow.solid' | 'colors.yellow.focusRing' | 'colors.teal.contrast' | 'colors.teal.fg' | 'colors.teal.subtle' | 'colors.teal.muted' | 'colors.teal.emphasized' | 'colors.teal.solid' | 'colors.teal.focusRing' | 'colors.purple.contrast' | 'colors.purple.fg' | 'colors.purple.subtle' | 'colors.purple.muted' | 'colors.purple.emphasized' | 'colors.purple.solid' | 'colors.purple.focusRing' | 'colors.pink.contrast' | 'colors.pink.fg' | 'colors.pink.subtle' | 'colors.pink.muted' | 'colors.pink.emphasized' | 'colors.pink.solid' | 'colors.pink.focusRing' | 'colors.cyan.contrast' | 'colors.cyan.fg' | 'colors.cyan.subtle' | 'colors.cyan.muted' | 'colors.cyan.emphasized' | 'colors.cyan.solid' | 'colors.cyan.focusRing' | 'shadows.xs' | 'shadows.sm' | 'shadows.md' | 'shadows.lg' | 'shadows.xl' | 'shadows.2xl' | 'shadows.inner' | 'shadows.inset' | 'radii.l1' | 'radii.l2' | 'radii.l3' | 'spacing.-1' | 'spacing.-2' | 'spacing.-3' | 'spacing.-4' | 'spacing.-5' | 'spacing.-6' | 'spacing.-7' | 'spacing.-8' | 'spacing.-9' | 'spacing.-10' | 'spacing.-11' | 'spacing.-12' | 'spacing.-14' | 'spacing.-16' | 'spacing.-20' | 'spacing.-24' | 'spacing.-28' | 'spacing.-32' | 'spacing.-36' | 'spacing.-40' | 'spacing.-44' | 'spacing.-48' | 'spacing.-52' | 'spacing.-56' | 'spacing.-60' | 'spacing.-64' | 'spacing.-72' | 'spacing.-80' | 'spacing.-96' | 'spacing.-0.5' | 'spacing.-1.5' | 'spacing.-2.5' | 'spacing.-3.5' | 'spacing.-4.5' | 'colors.colorPalette' | 'colors.colorPalette.50' | 'colors.colorPalette.100' | 'colors.colorPalette.200' | 'colors.colorPalette.300' | 'colors.colorPalette.400' | 'colors.colorPalette.500' | 'colors.colorPalette.600' | 'colors.colorPalette.700' | 'colors.colorPalette.800' | 'colors.colorPalette.900' | 'colors.colorPalette.950' | 'colors.colorPalette.subtle' | 'colors.colorPalette.muted' | 'colors.colorPalette.emphasized' | 'colors.colorPalette.inverted' | 'colors.colorPalette.panel' | 'colors.colorPalette.error' | 'colors.colorPalette.warning' | 'colors.colorPalette.success' | 'colors.colorPalette.info' | 'colors.colorPalette.contrast' | 'colors.colorPalette.fg' | 'colors.colorPalette.solid' | 'colors.colorPalette.focusRing';
type Tokens
type Tokens = { aspectRatios: AspectRatiosToken; animations: AnimationsToken; blurs: BlursToken; borders: BordersToken; colors: ColorsToken; durations: DurationsToken; easings: EasingsToken; fonts: FontsToken; fontSizes: FontSizesToken; fontWeights: FontWeightsToken; letterSpacings: LetterSpacingsToken; lineHeights: LineHeightsToken; radii: RadiiToken; spacing: SpacingToken; sizes: SizesToken; zIndex: ZIndexToken; cursor: CursorToken; breakpoints: BreakpointsToken; shadows: ShadowsToken;} & { [token: string]: never };
type UseBreakpointValueOptions
type UseBreakpointValueOptions = Omit<UseBreakpointOptions, 'breakpoints'>;
type UseDisclosureReturn
type UseDisclosureReturn = ReturnType<typeof useDisclosure>;
Namespaces
namespace Accordion
module 'dist/types/components/accordion/namespace.d.ts' {}
variable Item
const Item: any;
variable ItemBody
const ItemBody: any;
variable ItemContent
const ItemContent: any;
variable ItemIndicator
const ItemIndicator: any;
variable ItemTrigger
const ItemTrigger: any;
variable PropsProvider
const PropsProvider: React.Provider<ArkAccordion.RootBaseProps>;
variable Root
const Root: any;
variable RootProvider
const RootProvider: any;
function Context
Context: (props: ArkAccordion.ContextProps) => any;
function ItemContext
ItemContext: (props: ArkAccordion.ItemContextProps) => any;
interface FocusChangeDetails
interface AccordionFocusChangeDetails extends ArkAccordion.FocusChangeDetails {}
interface ItemBodyProps
interface AccordionItemBodyProps extends HTMLChakraProps<'div'> {}
interface ItemContentProps
interface AccordionItemContentProps extends HTMLChakraProps<'div', ArkAccordion.ItemContentBaseProps> {}
interface ItemIndicatorProps
interface AccordionItemIndicatorProps extends HTMLChakraProps<'button', ArkAccordion.ItemIndicatorBaseProps> {}
interface ItemProps
interface AccordionItemProps extends HTMLChakraProps<'div', ArkAccordion.ItemBaseProps> {}
interface ItemTriggerProps
interface AccordionItemTriggerProps extends HTMLChakraProps<'button', ArkAccordion.ItemTriggerBaseProps> {}
interface RootProps
interface AccordionRootProps extends HTMLChakraProps<'div', AccordionRootBaseProps> {}
interface RootProviderProps
interface AccordionRootProviderProps extends HTMLChakraProps<'div', AccordionRootProviderBaseProps> {}
interface ValueChangeDetails
interface AccordionValueChangeDetails extends ArkAccordion.ValueChangeDetails {}
namespace ActionBar
module 'dist/types/components/action-bar/namespace.d.ts' {}
variable CloseTrigger
const CloseTrigger: any;
variable Content
const Content: any;
variable Positioner
const Positioner: any;
variable PropsProvider
const PropsProvider: React.Provider<ActionBarRootBaseProps>;
variable Root
const Root: any;
variable RootProvider
const RootProvider: any;
variable SelectionTrigger
const SelectionTrigger: any;
variable Separator
const Separator: any;
function Context
Context: (props: ArkPopover.ContextProps) => any;
interface CloseTriggerProps
interface ActionBarCloseTriggerProps extends HTMLChakraProps<'button', ArkPopover.CloseTriggerProps> {}
interface ContentProps
interface ActionBarContentProps extends HTMLChakraProps<'div', ArkPopover.ContentBaseProps> {}
interface OpenChangeDetails
interface ActionBarOpenChangeDetails extends ArkPopover.OpenChangeDetails {}
interface PositionerProps
interface ActionBarPositionerProps extends HTMLChakraProps<'div'> {}
interface RootProps
interface ActionBarRootProps extends Omit<ActionBarRootBaseProps, 'positioning'> {}
property children
children: React.ReactNode;
interface RootProviderProps
interface ActionBarRootProviderProps extends ActionBarRootProviderBaseProps {}
interface SelectionTriggerProps
interface ActionBarSelectionTriggerProps extends HTMLChakraProps<'button'> {}
interface SeparatorProps
interface ActionBarSeparatorProps extends HTMLChakraProps<'div'> {}
namespace Alert
module 'dist/types/components/alert/namespace.d.ts' {}
variable Content
const Content: any;
variable Description
const Description: any;
variable Indicator
const Indicator: any;
variable Root
const Root: any;
variable RootPropsProvider
const RootPropsProvider: React.Provider<AlertRootBaseProps>;
variable Title
const Title: any;
interface ContentProps
interface AlertContentProps extends HTMLChakraProps<'div'> {}
interface DescriptionProps
interface AlertDescriptionProps extends HTMLChakraProps<'div'> {}
interface IndicatorProps
interface AlertIndicatorProps extends HTMLChakraProps<'span'> {}
interface RootProps
interface AlertRootProps extends HTMLChakraProps<'div', AlertRootBaseProps> {}
interface TitleProps
interface AlertTitleProps extends HTMLChakraProps<'div'> {}
namespace Avatar
module 'dist/types/components/avatar/namespace.d.ts' {}
variable Fallback
const Fallback: any;
variable Icon
const Icon: any;
variable Image
const Image: any;
variable PropsProvider
const PropsProvider: React.Provider<AvatarRootBaseProps>;
variable Root
const Root: any;
variable RootProvider
const RootProvider: any;
function Context
Context: (props: ArkAvatar.ContextProps) => any;
interface FallbackProps
interface AvatarFallbackProps extends HTMLChakraProps<'div', ArkAvatar.FallbackProps> {}
interface IconProps
interface AvatarIconProps extends HTMLChakraProps<'svg'> {}
interface ImageProps
interface AvatarImageProps extends HTMLChakraProps<'img', ArkAvatar.ImageProps> {}
interface RootProps
interface AvatarRootProps extends HTMLChakraProps<'div', AvatarRootBaseProps> {}
interface StatusChangeDetails
interface AvatarStatusChangeDetails extends ArkAvatar.StatusChangeDetails {}
namespace Blockquote
module 'dist/types/components/blockquote/namespace.d.ts' {}
variable Caption
const Caption: any;
variable Content
const Content: any;
variable Icon
const Icon: any;
variable PropsProvider
const PropsProvider: React.Provider<BlockquoteRootBaseProps>;
variable Root
const Root: any;
interface BlockquoteIconProps
interface BlockquoteIconProps extends HTMLChakraProps<'svg'> {}
interface CaptionProps
interface BlockquoteCaptionProps extends HTMLChakraProps<'figcaption'> {}
interface ContentProps
interface BlockquoteContentProps extends HTMLChakraProps<'blockquote'> {}
interface RootProps
interface BlockquoteRootProps extends HTMLChakraProps<'figure', BlockquoteRootBaseProps> {}
namespace Breadcrumb
module 'dist/types/components/breadcrumb/namespace.d.ts' {}
variable CurrentLink
const CurrentLink: any;
variable Ellipsis
const Ellipsis: any;
variable Item
const Item: any;
variable Link
const Link: any;
variable List
const List: any;
variable PropsProvider
const PropsProvider: React.Provider<BreadcrumbRootBaseProps>;
variable Root
const Root: any;
variable Separator
const Separator: any;
interface CurrentLinkProps
interface BreadcrumbCurrentLinkProps extends HTMLChakraProps<'span'> {}
interface EllipsisProps
interface BreadcrumbEllipsisProps extends HTMLChakraProps<'span'> {}
interface ItemProps
interface BreadcrumbItemProps extends HTMLChakraProps<'li'> {}
interface LinkProps
interface BreadcrumbLinkProps extends HTMLChakraProps<'a'> {}
interface ListProps
interface BreadcrumbListProps extends HTMLChakraProps<'ol'> {}
interface RootProps
interface BreadcrumbRootProps extends HTMLChakraProps<'nav', BreadcrumbRootBaseProps> {}
interface SeparatorProps
interface BreadcrumbSeparatorProps extends HTMLChakraProps<'li'> {}
namespace Card
module 'dist/types/components/card/namespace.d.ts' {}
variable Body
const Body: any;
variable Description
const Description: any;
variable Footer
const Footer: any;
variable Header
const Header: any;
variable PropsProvider
const PropsProvider: React.Provider<CardRootBaseProps>;
variable Root
const Root: any;
variable Title
const Title: any;
interface BodyProps
interface CardBodyProps extends HTMLChakraProps<'div'> {}
interface DescriptionProps
interface CardDescriptionProps extends HTMLChakraProps<'p'> {}
interface FooterProps
interface CardFooterProps extends HTMLChakraProps<'div'> {}
interface HeaderProps
interface CardHeaderProps extends HTMLChakraProps<'div'> {}
interface RootProps
interface CardRootProps extends HTMLChakraProps<'div', CardRootBaseProps> {}
interface TitleProps
interface CardTitleProps extends HTMLChakraProps<'h2'> {}
namespace Checkbox
module 'dist/types/components/checkbox/namespace.d.ts' {}
variable Control
const Control: any;
variable Group
const Group: FunctionComponent<any>;
variable HiddenInput
const HiddenInput: any;
variable Indicator
const Indicator: any;
variable Label
const Label: any;
variable PropsProvider
const PropsProvider: React.Provider<CheckboxRootBaseProps>;
variable Root
const Root: any;
variable RootProvider
const RootProvider: any;
function Context
Context: (props: ArkCheckbox.ContextProps) => any;
interface CheckedChangeDetails
interface CheckboxCheckedChangeDetails extends ArkCheckbox.CheckedChangeDetails {}
interface ControlProps
interface CheckboxControlProps extends HTMLChakraProps<'div', ArkCheckbox.ControlBaseProps> {}
interface GroupProps
interface CheckboxGroupProps extends HTMLChakraProps<'div', ArkCheckbox.GroupBaseProps> {}
interface IndicatorProps
interface CheckboxIndicatorProps extends HTMLChakraProps<'svg'> {}
property checked
checked?: React.ReactElement;
property indeterminate
indeterminate?: React.ReactElement;
interface LabelProps
interface CheckboxLabelProps extends HTMLChakraProps<'span', ArkCheckbox.LabelBaseProps> {}
interface RootProps
interface CheckboxRootProps extends HTMLChakraProps<'label', CheckboxRootBaseProps> {}
interface RootProviderProps
interface CheckboxRootProviderProps extends HTMLChakraProps<'div', CheckboxRootProviderBaseProps> {}
namespace CheckboxCard
module 'dist/types/components/checkbox-card/namespace.d.ts' {}
variable Addon
const Addon: any;
variable Content
const Content: any;
variable Control
const Control: any;
variable Description
const Description: any;
variable HiddenInput
const HiddenInput: any;
variable Indicator
const Indicator: any;
variable Label
const Label: any;
variable Root
const Root: any;
variable RootPropsProvider
const RootPropsProvider: React.Provider<CheckboxCardRootBaseProps>;
variable RootProvider
const RootProvider: any;
function Context
Context: (props: ArkCheckbox.ContextProps) => any;
interface AddonProps
interface CheckboxCardAddonProps extends HTMLChakraProps<'div'> {}
interface CheckedChangeDetails
interface CheckboxCardCheckedChangeDetails extends ArkCheckbox.CheckedChangeDetails {}
interface ContentProps
interface CheckboxCardContentProps extends HTMLChakraProps<'div'> {}
interface ControlProps
interface CheckboxCardControlProps extends HTMLChakraProps<'div', ArkCheckbox.ControlBaseProps> {}
interface DescriptionProps
interface CheckboxCardDescriptionProps extends HTMLChakraProps<'div'> {}
interface IndicatorProps
interface CheckboxCardIndicatorProps extends HTMLChakraProps<'svg'> {}
interface LabelProps
interface CheckboxCardLabelProps extends HTMLChakraProps<'span', ArkCheckbox.LabelBaseProps> {}
interface RootProps
interface CheckboxCardRootProps extends HTMLChakraProps<'label', CheckboxCardRootBaseProps> {}
interface RootProviderProps
interface CheckboxCardRootProviderProps extends HTMLChakraProps<'label', CheckboxCardRootProviderBaseProps> {}
namespace Clipboard
module 'dist/types/components/clipboard/namespace.d.ts' {}
variable Control
const Control: any;
variable Indicator
const Indicator: any;
variable Input
const Input: any;
variable Label
const Label: any;
variable PropsProvider
const PropsProvider: React.Provider<ClipboardRootBaseProps>;
variable Root
const Root: any;
variable RootProvider
const RootProvider: any;
variable Trigger
const Trigger: any;
variable ValueText
const ValueText: any;
function Context
Context: (props: ArkClipboard.ContextProps) => any;
interface ControlProps
interface ClipboardControlProps extends HTMLChakraProps<'div', ArkClipboard.ControlProps> {}
interface CopyStatusDetails
interface ClipboardCopyStatusDetails extends ArkClipboard.CopyStatusDetails {}
interface IndicatorProps
interface ClipboardIndicatorProps extends HTMLChakraProps<'div', ArkClipboard.IndicatorProps> {}
interface InputProps
interface ClipboardInputProps extends HTMLChakraProps<'input', ArkClipboard.InputProps> {}
interface LabelProps
interface ClipboardLabelProps extends HTMLChakraProps<'label', ArkClipboard.LabelProps> {}
interface RootProps
interface ClipboardRootProps extends HTMLChakraProps<'div', ClipboardRootBaseProps> {}
interface RootProviderProps
interface ClipboardRootProviderProps extends HTMLChakraProps<'div', ClipboardRootProviderBaseProps> {}
interface TriggerProps
interface ClipboardTriggerProps extends HTMLChakraProps<'button', ArkClipboard.TriggerProps> {}
interface ValueTextProps
interface ClipboardValueTextProps extends HTMLChakraProps<'div', ArkClipboard.ValueTextProps> {}
namespace Collapsible
module 'dist/types/components/collapsible/namespace.d.ts' {}
variable Content
const Content: any;
variable PropsProvider
const PropsProvider: React.Provider<CollapsibleRootBaseProps>;
variable Root
const Root: any;
variable RootProvider
const RootProvider: any;
variable Trigger
const Trigger: any;
function Context
Context: (props: ArkCollapsible.ContextProps) => any;
interface ContentProps
interface CollapsibleContentProps extends HTMLChakraProps<'div', ArkCollapsible.ContentBaseProps> {}
interface OpenChangeDetails
interface CollapsibleOpenChangeDetails extends ArkCollapsible.OpenChangeDetails {}
interface RootProps
interface CollapsibleRootProps extends HTMLChakraProps<'div', CollapsibleRootBaseProps> {}
interface RootProviderProps
interface CollapsibleRootProviderProps extends HTMLChakraProps<'div', CollapsibleRootProviderBaseProps> {}
interface TriggerProps
interface CollapsibleTriggerProps extends HTMLChakraProps<'button', ArkCollapsible.TriggerBaseProps> {}
namespace ColorPicker
module 'dist/types/components/color-picker/namespace.d.ts' {}
variable Area
const Area: any;
variable AreaBackground
const AreaBackground: any;
variable AreaThumb
const AreaThumb: any;
variable ChannelInput
const ChannelInput: any;
variable ChannelSlider
const ChannelSlider: any;
variable ChannelSliderLabel
const ChannelSliderLabel: any;
variable ChannelSliderThumb
const ChannelSliderThumb: any;
variable ChannelSliderTrack
const ChannelSliderTrack: any;
variable ChannelSliderValueText
const ChannelSliderValueText: any;
variable Content
const Content: any;
variable Control
const Control: any;
variable EyeDropperTrigger
const EyeDropperTrigger: any;
variable FormatSelect
const FormatSelect: any;
variable FormatTrigger
const FormatTrigger: any;
variable HiddenInput
const HiddenInput: any;
variable Label
const Label: any;
variable Positioner
const Positioner: any;
variable PropsProvider
const PropsProvider: React.Provider<ColorPickerRootBaseProps>;
variable Root
const Root: any;
variable RootProvider
const RootProvider: any;
variable Swatch
const Swatch: any;
variable SwatchGroup
const SwatchGroup: any;
variable SwatchIndicator
const SwatchIndicator: any;
variable SwatchTrigger
const SwatchTrigger: any;
variable TransparencyGrid
const TransparencyGrid: any;
variable Trigger
const Trigger: any;
variable ValueSwatch
const ValueSwatch: any;
variable ValueText
const ValueText: any;
variable View
const View: any;
function Context
Context: (props: ArkColorPicker.ContextProps) => any;
interface AreaBackgroundProps
interface ColorPickerAreaBackgroundProps extends HTMLChakraProps<'div', ArkColorPicker.AreaBackgroundBaseProps> {}
interface AreaProps
interface ColorPickerAreaProps extends HTMLChakraProps<'div', ArkColorPicker.AreaBaseProps> {}
interface AreaThumbProps
interface ColorPickerAreaThumbProps extends HTMLChakraProps<'div', ArkColorPicker.AreaThumbBaseProps> {}
interface ChannelInputProps
interface ColorPickerChannelInputProps extends HTMLChakraProps<'input', ArkColorPicker.ChannelInputBaseProps> {}
interface ChannelSliderLabelProps
interface ColorPickerChannelSliderLabelProps extends HTMLChakraProps<'div', ArkColorPicker.ChannelSliderLabelBaseProps> {}
interface ChannelSliderProps
interface ColorPickerChannelSliderProps extends HTMLChakraProps<'div', ArkColorPicker.ChannelSliderBaseProps> {}
interface ChannelSliderThumbProps
interface ColorPickerChannelSliderThumbProps extends HTMLChakraProps<'div', ArkColorPicker.ChannelSliderThumbBaseProps> {}
interface ChannelSliderTrackProps
interface ColorPickerChannelSliderTrackProps extends HTMLChakraProps<'div', ArkColorPicker.ChannelSliderTrackBaseProps> {}
interface ChannelSliderValueTextProps
interface ColorPickerChannelSliderValueTextProps extends HTMLChakraProps<'div', ArkColorPicker.ChannelSliderValueTextBaseProps> {}
interface ContentProps
interface ColorPickerContentProps extends HTMLChakraProps<'div', ArkColorPicker.ContentBaseProps> {}
interface ControlProps
interface ColorPickerControlProps extends HTMLChakraProps<'div', ArkColorPicker.ControlBaseProps> {}
interface EyeDropperTriggerProps
interface ColorPickerEyeDropperTriggerProps extends HTMLChakraProps<'button', ArkColorPicker.EyeDropperTriggerBaseProps> {}
interface FormatSelectProps
interface ColorPickerFormatSelectProps extends HTMLChakraProps<'select', ArkColorPicker.FormatSelectBaseProps> {}
interface FormatTriggerProps
interface ColorPickerFormatTriggerProps extends HTMLChakraProps<'button', ArkColorPicker.FormatTriggerBaseProps> {}
interface LabelProps
interface ColorPickerLabelProps extends HTMLChakraProps<'label', ArkColorPicker.LabelBaseProps> {}
interface PositionerProps
interface ColorPickerPositionerProps extends HTMLChakraProps<'div', ArkColorPicker.PositionerBaseProps> {}
interface RootProps
interface ColorPickerRootProps extends HTMLChakraProps<'div', ColorPickerRootBaseProps> {}
interface RootProviderProps
interface ColorPickerRootProviderProps extends HTMLChakraProps<'div', ColorPickerRootProviderBaseProps> {}
interface SwatchGroupProps
interface ColorPickerSwatchGroupProps extends HTMLChakraProps<'div', ArkColorPicker.SwatchGroupBaseProps> {}
interface SwatchIndicatorProps
interface ColorPickerSwatchIndicatorProps extends HTMLChakraProps<'div', ArkColorPicker.SwatchIndicatorBaseProps> {}
interface SwatchProps
interface ColorPickerSwatchProps extends HTMLChakraProps<'div', ArkColorPicker.SwatchBaseProps> {}
interface SwatchTriggerProps
interface ColorPickerSwatchTriggerProps extends HTMLChakraProps<'button', ArkColorPicker.SwatchTriggerBaseProps> {}
interface TransparencyGridProps
interface ColorPickerTransparencyGridProps extends HTMLChakraProps<'div', ArkColorPicker.TransparencyGridBaseProps> {}
interface TriggerProps
interface ColorPickerTriggerProps extends HTMLChakraProps<'button', ArkColorPicker.TriggerBaseProps> {}
interface ValueChangeDetails
interface ColorPickerValueChangeDetails extends ArkColorPicker.ValueChangeDetails {}
interface ValueSwatchProps
interface ColorPickerValueSwatchProps extends HTMLChakraProps<'div', ArkColorPicker.ValueSwatchBaseProps> {}
interface ValueTextProps
interface ColorPickerValueTextProps extends HTMLChakraProps<'div', ArkColorPicker.ValueTextBaseProps> {}
interface ViewProps
interface ColorPickerViewProps extends HTMLChakraProps<'div', ArkColorPicker.ViewBaseProps> {}
namespace DataList
module 'dist/types/components/data-list/namespace.d.ts' {}
variable Item
const Item: any;
variable ItemLabel
const ItemLabel: any;
variable ItemValue
const ItemValue: any;
variable PropsProvider
const PropsProvider: React.Provider<DataListRootBaseProps>;
variable Root
const Root: any;
interface ItemLabelProps
interface DataListItemLabelProps extends HTMLChakraProps<'dt'> {}
interface ItemProps
interface DataListItemProps extends HTMLChakraProps<'div'> {}
interface ItemValueProps
interface DataListItemValueProps extends HTMLChakraProps<'dd'> {}
interface RootProps
interface DataListRootProps extends HTMLChakraProps<'dl', DataListRootBaseProps> {}
namespace Dialog
module 'dist/types/components/dialog/namespace.d.ts' {}
variable ActionTrigger
const ActionTrigger: any;
variable Backdrop
const Backdrop: any;
variable Body
const Body: any;
variable CloseTrigger
const CloseTrigger: any;
variable Content
const Content: any;
variable Description
const Description: any;
variable Footer
const Footer: any;
variable Header
const Header: any;
variable Positioner
const Positioner: any;
variable PropsProvider
const PropsProvider: React.Provider<DialogRootBaseProps>;
variable Root
const Root: any;
variable RootProvider
const RootProvider: any;
variable Title
const Title: any;
variable Trigger
const Trigger: any;
function Context
Context: (props: ArkDialog.ContextProps) => any;
interface ActionTriggerProps
interface DialogActionTriggerProps extends HTMLChakraProps<'button'> {}
interface BackdropProps
interface DialogBackdropProps extends HTMLChakraProps<'div', ArkDialog.BackdropBaseProps> {}
interface BodyProps
interface DialogBodyProps extends HTMLChakraProps<'div'> {}
interface CloseTriggerProps
interface DialogCloseTriggerProps extends HTMLChakraProps<'button', ArkDialog.CloseTriggerBaseProps> {}
interface ContentProps
interface DialogContentProps extends HTMLChakraProps<'section', ArkDialog.ContentBaseProps> {}
interface DescriptionProps
interface DialogDescriptionProps extends HTMLChakraProps<'p', ArkDialog.DescriptionBaseProps> {}
interface FooterProps
interface DialogFooterProps extends HTMLChakraProps<'footer'> {}
interface HeaderProps
interface DialogHeaderProps extends HTMLChakraProps<'div'> {}
interface OpenChangeDetails
interface DialogOpenChangeDetails extends ArkDialog.OpenChangeDetails {}
interface PositionerProps
interface DialogPositionerProps extends HTMLChakraProps<'div', ArkDialog.PositionerBaseProps> {}
interface RootProps
interface DialogRootProps extends DialogRootBaseProps {}
property children
children: React.ReactNode;
interface RootProviderProps
interface DialogRootProviderProps extends DialogRootProviderBaseProps {}
property children
children: React.ReactNode;
interface TitleProps
interface DialogTitleProps extends HTMLChakraProps<'h2', ArkDialog.TitleBaseProps> {}
interface TriggerProps
interface DialogTriggerProps extends HTMLChakraProps<'button', ArkDialog.TriggerBaseProps> {}
namespace Drawer
module 'dist/types/components/drawer/namespace.d.ts' {}
variable ActionTrigger
const ActionTrigger: any;
variable Backdrop
const Backdrop: any;
variable Body
const Body: any;
variable CloseTrigger
const CloseTrigger: any;
variable Content
const Content: any;
variable Description
const Description: any;
variable Footer
const Footer: any;
variable Header
const Header: any;
variable Positioner
const Positioner: any;
variable Root
const Root: any;
variable RootPropsProvider
const RootPropsProvider: React.Provider<DrawerRootBaseProps>;
variable RootProvider
const RootProvider: any;
variable Title
const Title: any;
variable Trigger
const Trigger: any;
function Context
Context: (props: ArkDialog.ContextProps) => any;
interface ActionTriggerProps
interface DrawerActionTriggerProps extends HTMLChakraProps<'button'> {}
interface BackdropProps
interface DrawerBackdropProps extends HTMLChakraProps<'div', ArkDialog.BackdropBaseProps> {}
interface BodyProps
interface DrawerBodyProps extends HTMLChakraProps<'div'> {}
interface CloseTriggerProps
interface DrawerCloseTriggerProps extends HTMLChakraProps<'button', ArkDialog.CloseTriggerBaseProps> {}
interface ContentProps
interface DrawerContentProps extends HTMLChakraProps<'section', ArkDialog.ContentBaseProps> {}
interface DescriptionProps
interface DrawerDescriptionProps extends HTMLChakraProps<'p', ArkDialog.DescriptionBaseProps> {}
interface FooterProps
interface DrawerFooterProps extends HTMLChakraProps<'footer'> {}
interface HeaderProps
interface DrawerHeaderProps extends HTMLChakraProps<'div'> {}
interface OpenChangeDetails
interface DrawerOpenChangeDetails extends ArkDialog.OpenChangeDetails {}
interface PositionerProps
interface DrawerPositionerProps extends HTMLChakraProps<'div', ArkDialog.PositionerBaseProps> {}
interface RootProps
interface DrawerRootProps extends DrawerRootBaseProps {}
property children
children: React.ReactNode;
interface RootProviderProps
interface DrawerRootProviderProps extends DrawerRootProviderBaseProps {}
property children
children: React.ReactNode;
interface TitleProps
interface DrawerTitleProps extends HTMLChakraProps<'h2', ArkDialog.TitleBaseProps> {}
interface TriggerProps
interface DrawerTriggerProps extends HTMLChakraProps<'button', ArkDialog.TriggerBaseProps> {}
namespace Editable
module 'dist/types/components/editable/namespace.d.ts' {}
variable Area
const Area: any;
variable CancelTrigger
const CancelTrigger: any;
variable Control
const Control: any;
variable EditTrigger
const EditTrigger: any;
variable Input
const Input: any;
variable Preview
const Preview: any;
variable PropsProvider
const PropsProvider: React.Provider<EditableRootBaseProps>;
variable Root
const Root: any;
variable RootProvider
const RootProvider: any;
variable SubmitTrigger
const SubmitTrigger: any;
variable Textarea
const Textarea: any;
function Context
Context: (props: ArkEditable.ContextProps) => any;
interface AreaProps
interface EditableAreaProps extends HTMLChakraProps<'div', ArkEditable.AreaBaseProps> {}
interface CancelTriggerProps
interface EditableCancelTriggerProps extends HTMLChakraProps<'button', ArkEditable.CancelTriggerBaseProps> {}
interface ControlProps
interface EditableControlProps extends HTMLChakraProps<'div', ArkEditable.ControlBaseProps> {}
interface EditTriggerProps
interface EditableEditTriggerProps extends HTMLChakraProps<'button', ArkEditable.EditTriggerBaseProps> {}
interface InputProps
interface EditableInputProps extends HTMLChakraProps<'input', ArkEditable.InputBaseProps> {}
interface PreviewProps
interface EditablePreviewProps extends HTMLChakraProps<'span', ArkEditable.PreviewBaseProps> {}
interface RootProps
interface EditableRootProps extends HTMLChakraProps<'div', EditableRootBaseProps> {}
interface RootProviderProps
interface EditableRootProviderProps extends HTMLChakraProps<'div', EditableRootProviderBaseProps> {}
interface SubmitTriggerProps
interface EditableSubmitTriggerProps extends HTMLChakraProps<'button', ArkEditable.SubmitTriggerBaseProps> {}
interface TextareaProps
interface EditableTextareaProps extends HTMLChakraProps<'textarea', ArkEditable.InputBaseProps> {}
interface ValueChangeDetails
interface EditableValueChangeDetails extends ArkEditable.ValueChangeDetails {}
namespace EmptyState
module 'dist/types/components/empty-state/namespace.d.ts' {}
variable Content
const Content: any;
variable Description
const Description: any;
variable Indicator
const Indicator: any;
variable PropsProvider
const PropsProvider: React.Provider<EmptyStateRootBaseProps>;
variable Root
const Root: any;
variable Title
const Title: any;
interface ContentProps
interface EmptyStateContentProps extends HTMLChakraProps<'div'> {}
interface DescriptionProps
interface EmptyStateDescriptionProps extends HTMLChakraProps<'p'> {}
interface IndicatorProps
interface EmptyStateIndicatorProps extends HTMLChakraProps<'div'> {}
interface RootProps
interface EmptyStateRootProps extends HTMLChakraProps<'div', EmptyStateRootBaseProps> {}
interface TitleProps
interface EmptyStateTitleProps extends HTMLChakraProps<'h3'> {}
namespace Field
module 'dist/types/components/field/namespace.d.ts' {}
variable ErrorIcon
const ErrorIcon: any;
variable ErrorText
const ErrorText: any;
variable HelperText
const HelperText: any;
variable Label
const Label: any;
variable PropsProvider
const PropsProvider: React.Provider<FieldRootBaseProps>;
variable RequiredIndicator
const RequiredIndicator: any;
variable Root
const Root: any;
interface ErrorIconProps
interface FieldErrorIconProps extends HTMLChakraProps<'svg'> {}
interface ErrorTextProps
interface FieldErrorTextProps extends HTMLChakraProps<'div', ArkField.ErrorTextBaseProps> {}
interface HelperTextProps
interface FieldHelperTextProps extends HTMLChakraProps<'div', ArkField.HelperTextBaseProps> {}
interface LabelProps
interface FieldLabelProps extends HTMLChakraProps<'label', ArkField.LabelBaseProps> {}
interface RequiredIndicatorProps
interface FieldRequiredIndicatorProps extends HTMLChakraProps<'span'> {}
property fallback
fallback?: React.ReactNode;
interface RootProps
interface FieldRootProps extends HTMLChakraProps<'div', FieldRootBaseProps> {}
namespace Fieldset
module 'dist/types/components/fieldset/namespace.d.ts' {}
variable Content
const Content: any;
variable ErrorText
const ErrorText: any;
variable HelperText
const HelperText: any;
variable Legend
const Legend: any;
variable Root
const Root: any;
function Context
Context: (props: Fieldset.ContextProps) => any;
interface ContentProps
interface FieldsetContentProps extends HTMLChakraProps<'div'> {}
interface ErrorTextProps
interface FieldsetErrorTextProps extends HTMLChakraProps<'span', Fieldset.ErrorTextBaseProps> {}
interface HelperTextProps
interface FieldsetHelperTextProps extends HTMLChakraProps<'span', Fieldset.HelperTextBaseProps> {}
interface LegendProps
interface FieldsetLegendProps extends HTMLChakraProps<'legend', Fieldset.LegendBaseProps> {}
interface RootProps
interface FieldsetRootProps extends HTMLChakraProps<'fieldset', FieldsetRootBaseProps> {}
namespace FileUpload
module 'dist/types/components/file-upload/namespace.d.ts' {}
variable ClearTrigger
const ClearTrigger: any;
variable Dropzone
const Dropzone: any;
variable DropzoneContent
const DropzoneContent: any;
variable HiddenInput
const HiddenInput: any;
variable Item
const Item: any;
variable ItemContent
const ItemContent: any;
variable ItemDeleteTrigger
const ItemDeleteTrigger: any;
variable ItemGroup
const ItemGroup: any;
variable ItemName
const ItemName: any;
variable ItemPreview
const ItemPreview: any;
variable ItemPreviewImage
const ItemPreviewImage: any;
variable ItemSizeText
const ItemSizeText: any;
variable Label
const Label: any;
variable PropsProvider
const PropsProvider: React.Provider<FileUploadRootBaseProps>;
variable Root
const Root: any;
variable RootProvider
const RootProvider: any;
variable Trigger
const Trigger: any;
function Context
Context: (props: ArkFileUpload.ContextProps) => any;
interface DropzoneContentProps
interface FileUploadDropzoneContentProps extends HTMLChakraProps<'div'> {}
interface DropzoneProps
interface FileUploadDropzoneProps extends HTMLChakraProps<'li', ArkFileUpload.DropzoneBaseProps> {}
interface FileAcceptDetails
interface FileUploadFileAcceptDetails extends ArkFileUpload.FileAcceptDetails {}
interface FileChangeDetails
interface FileUploadFileChangeDetails extends ArkFileUpload.FileChangeDetails {}
interface FileRejectDetails
interface FileUploadFileRejectDetails extends ArkFileUpload.FileRejectDetails {}
interface ItemContentProps
interface FileUploadItemContentProps extends HTMLChakraProps<'div'> {}
interface ItemDeleteTriggerProps
interface FileUploadItemDeleteTriggerProps extends HTMLChakraProps<'button', ArkFileUpload.ItemDeleteTriggerBaseProps> {}
interface ItemGroupProps
interface FileUploadItemGroupProps extends HTMLChakraProps<'ul', ArkFileUpload.ItemGroupBaseProps> {}
interface ItemNameProps
interface FileUploadItemNameProps extends HTMLChakraProps<'span', ArkFileUpload.ItemNameBaseProps> {}
interface ItemPreviewImageProps
interface FileUploadItemPreviewImageProps extends HTMLChakraProps<'img', ArkFileUpload.ItemPreviewImageBaseProps> {}
interface ItemPreviewProps
interface FileUploadItemPreviewProps extends HTMLChakraProps<'div', ArkFileUpload.ItemPreviewBaseProps> {}
interface ItemProps
interface FileUploadItemProps extends HTMLChakraProps<'li', ArkFileUpload.ItemBaseProps> {}
interface ItemSizeTextProps
interface FileUploadItemSizeTextProps extends HTMLChakraProps<'span', ArkFileUpload.ItemSizeTextBaseProps> {}
interface LabelProps
interface FileUploadLabelProps extends HTMLChakraProps<'label', ArkFileUpload.LabelBaseProps> {}
interface RootProps
interface FileUploadRootProps extends HTMLChakraProps<'div', FileUploadRootBaseProps> {}
interface RootProviderProps
interface FileUploadRootProviderProps extends HTMLChakraProps<'div', FileUploadRootProviderBaseProps> {}
interface TriggerProps
interface FileUploadTriggerProps extends HTMLChakraProps<'button', ArkFileUpload.TriggerBaseProps> {}
namespace HoverCard
module 'dist/types/components/hover-card/namespace.d.ts' {}
variable Arrow
const Arrow: any;
variable ArrowTip
const ArrowTip: any;
variable Content
const Content: any;
variable Positioner
const Positioner: any;
variable PropsProvider
const PropsProvider: React.Provider<HoverCardRootBaseProps>;
variable Root
const Root: any;
variable RootProvider
const RootProvider: any;
variable Trigger
const Trigger: any;
function Context
Context: (props: ArkHoverCard.ContextProps) => any;
interface ArrowProps
interface HoverCardArrowProps extends HTMLChakraProps<'div', ArkHoverCard.ArrowBaseProps> {}
interface ArrowTipProps
interface HoverCardArrowTipProps extends HTMLChakraProps<'div', ArkHoverCard.ArrowTipBaseProps> {}
interface ContentProps
interface HoverCardContentProps extends HTMLChakraProps<'section', ArkHoverCard.ContentBaseProps> {}
interface OpenChangeDetails
interface HoverCardOpenChangeDetails extends ArkHoverCard.OpenChangeDetails {}
interface PositionerProps
interface HoverCardPositionerProps extends HTMLChakraProps<'div', ArkHoverCard.PositionerBaseProps> {}
interface RootProps
interface HoverCardRootProps extends HoverCardRootBaseProps {}
property children
children: React.ReactNode;
interface RootProviderProps
interface HoverCardRootProviderProps extends HoverCardRootProviderBaseProps {}
property children
children: React.ReactNode;
interface TriggerProps
interface HoverCardTriggerProps extends HTMLChakraProps<'button', ArkHoverCard.TriggerBaseProps> {}
namespace List
module 'dist/types/components/list/namespace.d.ts' {}
variable Indicator
const Indicator: any;
variable IndicatorProps
const IndicatorProps: any;
variable Item
const Item: any;
variable Root
const Root: any;
variable RootPropsProvider
const RootPropsProvider: React.Provider<ListRootBaseProps>;
interface ItemProps
interface ListItemProps extends HTMLChakraProps<'li'> {}
interface RootProps
interface ListRootProps extends HTMLChakraProps<'ul', ListRootBaseProps> {}
namespace Menu
module 'dist/types/components/menu/namespace.d.ts' {}
variable Arrow
const Arrow: any;
variable ArrowTip
const ArrowTip: any;
variable CheckboxItem
const CheckboxItem: any;
variable Content
const Content: any;
variable ContextTrigger
const ContextTrigger: any;
variable Indicator
const Indicator: any;
variable Item
const Item: any;
variable ItemCommand
const ItemCommand: any;
variable ItemGroup
const ItemGroup: any;
variable ItemGroupLabel
const ItemGroupLabel: any;
variable ItemIndicator
const ItemIndicator: any;
variable ItemText
const ItemText: any;
variable Positioner
const Positioner: any;
variable RadioItem
const RadioItem: any;
variable RadioItemGroup
const RadioItemGroup: any;
variable Root
const Root: any;
variable RootPropsProvider
const RootPropsProvider: React.Provider<MenuRootBaseProps>;
variable RootProvider
const RootProvider: any;
variable Separator
const Separator: any;
variable Trigger
const Trigger: any;
variable TriggerItem
const TriggerItem: any;
function Context
Context: (props: ArkMenu.ContextProps) => any;
function ItemContext
ItemContext: (props: ArkMenu.ItemContextProps) => any;
interface ArrowProps
interface MenuArrowProps extends HTMLChakraProps<'div', ArkMenu.ArrowBaseProps> {}
interface ArrowTipProps
interface MenuArrowTipProps extends HTMLChakraProps<'div', ArkMenu.ArrowTipBaseProps> {}
interface CheckboxItemProps
interface MenuCheckboxItemProps extends HTMLChakraProps<'div', ArkMenu.CheckboxItemBaseProps> {}
interface CommandProps
interface MenuItemCommandProps extends HTMLChakraProps<'kbd'> {}
interface ContentProps
interface MenuContentProps extends HTMLChakraProps<'div', ArkMenu.ContentBaseProps> {}
interface ContextTriggerProps
interface MenuContextTriggerProps extends HTMLChakraProps<'div', ArkMenu.ContextTriggerBaseProps> {}
interface HighlightChangeDetails
interface MenuHighlightChangeDetails extends ArkMenu.HighlightChangeDetails {}
interface IndicatorProps
interface MenuIndicatorProps extends HTMLChakraProps<'div', ArkMenu.IndicatorBaseProps> {}
interface ItemCommandProps
interface MenuItemCommandProps extends HTMLChakraProps<'kbd'> {}
interface ItemGroupLabelProps
interface MenuItemGroupLabelProps extends HTMLChakraProps<'div', ArkMenu.ItemGroupLabelBaseProps> {}
interface ItemGroupProps
interface MenuItemGroupProps extends HTMLChakraProps<'div', ArkMenu.ItemGroupBaseProps> {}
interface ItemIndicatorProps
interface MenuItemIndicatorProps extends HTMLChakraProps<'div', ArkMenu.ItemIndicatorBaseProps> {}
interface ItemProps
interface MenuItemProps extends HTMLChakraProps<'div', ArkMenu.ItemBaseProps> {}
interface ItemTextProps
interface MenuItemTextProps extends HTMLChakraProps<'div', ArkMenu.ItemTextBaseProps> {}
interface OpenChangeDetails
interface MenuOpenChangeDetails extends ArkMenu.OpenChangeDetails {}
interface PositionerProps
interface MenuPositionerProps extends HTMLChakraProps<'div', ArkMenu.PositionerBaseProps> {}
interface RadioItemGroupProps
interface MenuRadioItemGroupProps extends HTMLChakraProps<'div', ArkMenu.RadioItemGroupBaseProps> {}
interface RadioItemProps
interface MenuRadioItemProps extends HTMLChakraProps<'div', ArkMenu.RadioItemBaseProps> {}
interface RootProps
interface MenuRootProps extends MenuRootBaseProps {}
property children
children: React.ReactNode;
interface RootProviderProps
interface MenuRootProviderProps extends MenuRootProviderBaseProps {}
property children
children: React.ReactNode;
interface SelectionDetails
interface MenuSelectionDetails extends ArkMenu.SelectionDetails {}
interface SeparatorProps
interface MenuSeparatorProps extends HTMLChakraProps<'div', ArkMenu.SeparatorBaseProps> {}
interface TriggerItemProps
interface MenuTriggerItemProps extends HTMLChakraProps<'div', ArkMenu.TriggerItemBaseProps> {}
interface TriggerProps
interface MenuTriggerProps extends HTMLChakraProps<'button', ArkMenu.TriggerBaseProps> {}
namespace NativeSelect
module 'dist/types/components/native-select/namespace.d.ts' {}
variable Field
const Field: any;
variable PropsProvider
const PropsProvider: React.Provider<NativeSelectRootBaseProps>;
variable Root
const Root: any;
function Indicator
Indicator: (props: NativeSelectIndicatorProps) => any;
interface FieldProps
interface NativeSelectFieldProps extends Omit<HTMLChakraProps<'select'>, Omitted> {}
property placeholder
placeholder?: string;
interface IndicatorProps
interface NativeSelectIndicatorProps extends HTMLChakraProps<'div'> {}
interface RootProps
interface NativeSelectRootProps extends HTMLChakraProps<'div', NativeSelectRootBaseProps> {}
namespace NumberInput
module 'dist/types/components/number-input/namespace.d.ts' {}
variable Control
const Control: any;
variable DecrementTrigger
const DecrementTrigger: any;
variable IncrementTrigger
const IncrementTrigger: any;
variable Input
const Input: any;
variable Label
const Label: any;
variable PropsProvider
const PropsProvider: React.Provider<NumberInputRootBaseProps>;
variable Root
const Root: any;
variable RootProvider
const RootProvider: any;
variable Scrubber
const Scrubber: any;
variable ValueText
const ValueText: any;
function Context
Context: (props: ArkNumberInput.ContextProps) => any;
interface ControlProps
interface NumberInputControlProps extends HTMLChakraProps<'div', ArkNumberInput.ControlBaseProps> {}
interface DecrementTriggerProps
interface NumberInputDecrementTriggerProps extends HTMLChakraProps<'button', ArkNumberInput.DecrementTriggerBaseProps> {}
interface FocusChangeDetails
interface NumberInputFocusChangeDetails extends ArkNumberInput.FocusChangeDetails {}
interface IncrementTriggerProps
interface NumberInputIncrementTriggerProps extends HTMLChakraProps<'button', ArkNumberInput.IncrementTriggerBaseProps> {}
interface InputProps
interface NumberInputInputProps extends HTMLChakraProps<'input', ArkNumberInput.InputBaseProps> {}
interface LabelProps
interface NumberInputLabelProps extends HTMLChakraProps<'label', ArkNumberInput.LabelBaseProps> {}
interface RootProps
interface NumberInputRootProps extends HTMLChakraProps<'div', NumberInputRootBaseProps> {}
interface RootProviderProps
interface NumberInputRootProviderProps extends HTMLChakraProps<'div', NumberInputRootProviderBaseProps> {}
interface ScrubberProps
interface NumberInputScrubberProps extends HTMLChakraProps<'div', ArkNumberInput.ScrubberBaseProps> {}
interface ValueChangeDetails
interface NumberInputValueChangeDetails extends ArkNumberInput.ValueChangeDetails {}
interface ValueInvalidDetails
interface NumberInputValueInvalidDetails extends ArkNumberInput.ValueInvalidDetails {}
interface ValueTextProps
interface NumberInputValueTextProps extends HTMLChakraProps<'span', ArkNumberInput.ValueTextBaseProps> {}
namespace Pagination
module 'dist/types/components/pagination/namespace.d.ts' {}
variable Ellipsis
const Ellipsis: any;
variable Item
const Item: any;
variable NextTrigger
const NextTrigger: any;
variable PrevTrigger
const PrevTrigger: any;
variable PropsProvider
const PropsProvider: React.Provider<PaginationRootBaseProps>;
variable Root
const Root: any;
variable RootProvider
const RootProvider: any;
function Context
Context: (props: ArkPagination.ContextProps) => any;
interface EllipsisProps
interface PaginationEllipsisProps extends HTMLChakraProps<'div', ArkPagination.EllipsisBaseProps> {}
interface ItemProps
interface PaginationItemProps extends HTMLChakraProps<'button', ArkPagination.ItemBaseProps> {}
interface NextTriggerProps
interface PaginationNextTriggerProps extends HTMLChakraProps<'button', ArkPagination.NextTriggerBaseProps> {}
interface PageChangeDetails
interface PaginationPageChangeDetails extends ArkPagination.PageChangeDetails {}
interface PageSizeChangeDetails
interface PaginationPageSizeChangeDetails extends ArkPagination.PageSizeChangeDetails {}
interface PrevTriggerProps
interface PaginationPrevTriggerProps extends HTMLChakraProps<'button', ArkPagination.PrevTriggerBaseProps> {}
interface RootProps
interface PaginationRootProps extends HTMLChakraProps<'div', PaginationRootBaseProps> {}
interface RootProviderProps
interface PaginationRootProviderProps extends HTMLChakraProps<'div', PaginationRootProviderBaseProps> {}
namespace PinInput
module 'dist/types/components/pin-input/namespace.d.ts' {}
variable Control
const Control: any;
variable HiddenInput
const HiddenInput: any;
variable Input
const Input: any;
variable Label
const Label: any;
variable PropsProvider
const PropsProvider: React.Provider<PinInputRootBaseProps>;
variable Root
const Root: any;
variable RootProvider
const RootProvider: any;
function Context
Context: (props: ArkPinInput.ContextProps) => any;
interface ControlProps
interface PinInputControlProps extends HTMLChakraProps<'div', ArkPinInput.ControlBaseProps> {}
interface InputProps
interface PinInputInputProps extends HTMLChakraProps<'input', ArkPinInput.InputBaseProps> {}
interface LabelProps
interface PinInputLabelProps extends HTMLChakraProps<'label'> {}
interface RootProps
interface PinInputRootProps extends HTMLChakraProps<'div', PinInputRootBaseProps> {}
interface RootProviderProps
interface PinInputRootProviderProps extends HTMLChakraProps<'div', PinInputRootProviderBaseProps> {}
interface ValueChangeDetails
interface PinInputValueChangeDetails extends ArkPinInput.ValueChangeDetails {}
namespace Popover
module 'dist/types/components/popover/namespace.d.ts' {}
variable Anchor
const Anchor: any;
variable Arrow
const Arrow: any;
variable ArrowTip
const ArrowTip: any;
variable Body
const Body: any;
variable CloseTrigger
const CloseTrigger: any;
variable Content
const Content: any;
variable Description
const Description: any;
variable Footer
const Footer: any;
variable Header
const Header: any;
variable Positioner
const Positioner: any;
variable PropsProvider
const PropsProvider: React.Provider<PopoverRootBaseProps>;
variable Root
const Root: any;
variable RootProvider
const RootProvider: any;
variable Title
const Title: any;
variable Trigger
const Trigger: any;
function Context
Context: (props: ArkPopover.ContextProps) => any;
function usePopoverStyles
usePopoverStyles: () => Record<string, import('../..').SystemStyleObject>;
interface AnchorProps
interface PopoverAnchorProps extends HTMLChakraProps<'div', ArkPopover.AnchorBaseProps> {}
interface ArrowProps
interface PopoverArrowProps extends HTMLChakraProps<'div', ArkPopover.ArrowBaseProps> {}
interface ArrowTipProps
interface PopoverArrowTipProps extends HTMLChakraProps<'div', ArkPopover.ArrowTipBaseProps> {}
interface BodyProps
interface PopoverBodyProps extends HTMLChakraProps<'div'> {}
interface CloseTriggerProps
interface PopoverCloseTriggerProps extends HTMLChakraProps<'button', ArkPopover.CloseTriggerBaseProps> {}
interface ContentProps
interface PopoverContentProps extends HTMLChakraProps<'div', ArkPopover.ContentBaseProps> {}
interface DescriptionProps
interface PopoverDescriptionProps extends HTMLChakraProps<'div', ArkPopover.DescriptionBaseProps> {}
interface FooterProps
interface PopoverFooterProps extends HTMLChakraProps<'footer'> {}
interface HeaderProps
interface PopoverHeaderProps extends HTMLChakraProps<'div', ArkPopover.TitleBaseProps> {}
interface OpenChangeDetails
interface PopoverOpenChangeDetails extends ArkPopover.OpenChangeDetails {}
interface PositionerProps
interface PopoverPositionerProps extends HTMLChakraProps<'div', ArkPopover.PositionerBaseProps> {}
interface RootProps
interface PopoverRootProps extends PopoverRootBaseProps {}
property children
children: React.ReactNode;
interface RootProviderProps
interface PopoverRootProviderProps extends PopoverRootProviderBaseProps {}
property children
children: React.ReactNode;
interface TitleProps
interface PopoverTitleProps extends HTMLChakraProps<'div', ArkPopover.TitleBaseProps> {}
interface TriggerProps
interface PopoverTriggerProps extends HTMLChakraProps<'button', ArkPopover.TriggerBaseProps> {}
namespace Progress
module 'dist/types/components/progress/namespace.d.ts' {}
variable Label
const Label: any;
variable PropsProvider
const PropsProvider: React.Provider<ProgressRootBaseProps>;
variable Range
const Range: any;
variable Root
const Root: any;
variable RootProvider
const RootProvider: any;
variable Track
const Track: any;
variable ValueText
const ValueText: any;
function Context
Context: (props: ArkProgress.ContextProps) => any;
interface LabelProps
interface ProgressLabelProps extends HTMLChakraProps<'div', ArkProgress.LabelBaseProps> {}
interface RangeProps
interface ProgressRangeProps extends HTMLChakraProps<'div', ArkProgress.RangeBaseProps> {}
interface RootProps
interface ProgressRootProps extends HTMLChakraProps<'div', ProgressRootBaseProps> {}
interface RootProviderProps
interface ProgressRootProviderProps extends HTMLChakraProps<'div', ProgressRootProviderBaseProps> {}
interface TrackProps
interface ProgressTrackProps extends HTMLChakraProps<'div', ArkProgress.TrackBaseProps> {}
interface ValueTextProps
interface ProgressValueTextProps extends HTMLChakraProps<'div', ArkProgress.ValueTextBaseProps> {}
namespace ProgressCircle
module 'dist/types/components/progress-circle/namespace.d.ts' {}
variable Circle
const Circle: any;
variable Label
const Label: any;
variable PropsProvider
const PropsProvider: React.Provider<ProgressCircleRootBaseProps>;
variable Range
const Range: any;
variable Root
const Root: any;
variable RootProvider
const RootProvider: any;
variable Track
const Track: any;
variable ValueText
const ValueText: any;
interface CircleProps
interface ProgressCircleCircleProps extends HTMLChakraProps<'svg', ArkProgress.CircleBaseProps> {}
interface LabelProps
interface ProgressCircleLabelProps extends HTMLChakraProps<'div', ArkProgress.LabelBaseProps> {}
interface RangeProps
interface ProgressCircleRangeProps extends HTMLChakraProps<'circle', ArkProgress.RangeBaseProps> {}
interface RootProps
interface ProgressCircleRootProps extends HTMLChakraProps<'div', ProgressCircleRootBaseProps> {}
interface RootProviderProps
interface ProgressCircleRootProviderProps extends HTMLChakraProps<'div', ProgressCircleRootProviderBaseProps> {}
interface TrackProps
interface ProgressCircleTrackProps extends HTMLChakraProps<'circle', ArkProgress.TrackBaseProps> {}
interface ValueTextProps
interface ProgressCircleValueTextProps extends HTMLChakraProps<'div', ArkProgress.ValueTextBaseProps> {}
namespace QrCode
module 'dist/types/components/qr-code/namespace.d.ts' {}
variable DownloadTrigger
const DownloadTrigger: any;
variable Frame
const Frame: any;
variable Overlay
const Overlay: any;
variable Pattern
const Pattern: any;
variable PropsProvider
const PropsProvider: React.Provider<QrCodeRootBaseProps>;
variable Root
const Root: any;
variable RootProvider
const RootProvider: any;
interface DownloadTriggerProps
interface QrCodeDownloadTriggerProps extends HTMLChakraProps<'button', ArkQrCode.DownloadTriggerBaseProps> {}
interface FrameProps
interface QrCodeFrameProps extends HTMLChakraProps<'svg'> {}
interface OverlayProps
interface QrCodeOverlayProps extends HTMLChakraProps<'div'> {}
interface PatternProps
interface QrCodePatternProps extends HTMLChakraProps<'path'> {}
interface RootProps
interface QrCodeRootProps extends HTMLChakraProps<'div', QrCodeRootBaseProps> {}
interface RootProviderProps
interface QrCodeRootProviderProps extends HTMLChakraProps<'div', QrCodeRootProviderBaseProps> {}
namespace RadioCard
module 'dist/types/components/radio-card/namespace.d.ts' {}
variable Context
const Context: React.FC<RadioCardContextProps>;
variable Item
const Item: any;
variable ItemAddon
const ItemAddon: any;
variable ItemContent
const ItemContent: any;
variable ItemContext
const ItemContext: React.FC<RadioCardItemContextProps>;
variable ItemControl
const ItemControl: any;
variable ItemDescription
const ItemDescription: any;
variable ItemHiddenInput
const ItemHiddenInput: any;
variable ItemIndicator
const ItemIndicator: any;
variable ItemText
const ItemText: any;
variable Label
const Label: any;
variable PropsProvider
const PropsProvider: React.Provider<RadioCardRootBaseProps>;
variable Root
const Root: any;
variable RootProvider
const RootProvider: any;
interface ItemAddonProps
interface RadioCardItemAddonProps extends HTMLChakraProps<'div'> {}
interface ItemContentProps
interface RadioCardItemContentProps extends HTMLChakraProps<'div'> {}
interface ItemControlProps
interface RadioCardItemControlProps extends HTMLChakraProps<'div', ArkRadioGroup.ItemControlBaseProps> {}
interface ItemDescriptionProps
interface RadioCardItemDescriptionProps extends HTMLChakraProps<'div'> {}
interface ItemIndicatorProps
interface RadioCardItemIndicatorProps extends HTMLChakraProps<'span'> {}
property checked
checked?: React.ReactElement;
interface ItemProps
interface RadioCardItemProps extends HTMLChakraProps<'div', ArkRadioGroup.ItemBaseProps> {}
interface ItemTextProps
interface RadioCardItemTextProps extends HTMLChakraProps<'span', ArkRadioGroup.ItemTextBaseProps> {}
interface LabelProps
interface RadioCardLabelProps extends HTMLChakraProps<'div', ArkRadioGroup.LabelBaseProps> {}
interface RootProps
interface RadioCardRootProps extends HTMLChakraProps<'div', RadioCardRootBaseProps> {}
interface RootProviderProps
interface RadioCardRootProviderProps extends HTMLChakraProps<'div', RadioCardRootProviderBaseProps> {}
interface ValueChangeDetails
interface RadioCardValueChangeDetails extends ArkRadioGroup.ValueChangeDetails {}
namespace RadioGroup
module 'dist/types/components/radio-group/namespace.d.ts' {}
variable Context
const Context: React.FC<RadioGroupContextProps>;
variable Item
const Item: any;
variable ItemContext
const ItemContext: React.FC<RadioGroupItemContextProps>;
variable ItemControl
const ItemControl: any;
variable ItemHiddenInput
const ItemHiddenInput: any;
variable ItemIndicator
const ItemIndicator: any;
variable ItemText
const ItemText: any;
variable Label
const Label: any;
variable PropsProvider
const PropsProvider: React.Provider<RadioGroupRootBaseProps>;
variable Root
const Root: any;
variable RootProvider
const RootProvider: any;
interface ItemControlProps
interface RadioGroupItemControlProps extends HTMLChakraProps<'div', ArkRadioGroup.ItemControlBaseProps> {}
interface ItemProps
interface RadioGroupItemProps extends HTMLChakraProps<'div', ArkRadioGroup.ItemBaseProps> {}
interface ItemTextProps
interface RadioGroupItemTextProps extends HTMLChakraProps<'span', ArkRadioGroup.ItemTextBaseProps> {}
interface LabelProps
interface RadioGroupLabelProps extends HTMLChakraProps<'div', ArkRadioGroup.LabelBaseProps> {}
interface RootProps
interface RadioGroupRootProps extends HTMLChakraProps<'div', RadioGroupRootBaseProps> {}
interface RootProviderProps
interface RadioGroupRootProviderProps extends HTMLChakraProps<'div', RadioGroupRootProviderBaseProps> {}
interface ValueChangeDetails
interface RadioGroupValueChangeDetails extends ArkRadioGroup.ValueChangeDetails {}
namespace RatingGroup
module 'dist/types/components/rating-group/namespace.d.ts' {}
variable Control
const Control: any;
variable HiddenInput
const HiddenInput: any;
variable Item
const Item: any;
variable ItemIndicator
const ItemIndicator: any;
variable Label
const Label: any;
variable PropsProvider
const PropsProvider: React.Provider<RatingGroupRootBaseProps>;
variable Root
const Root: any;
variable RootProvider
const RootProvider: any;
function Context
Context: (props: ArkRatingGroup.ContextProps) => any;
function ItemContext
ItemContext: (props: ArkRatingGroup.ItemContextProps) => any;
function useRatingGroupStyles
useRatingGroupStyles: () => Record<string, import('../..').SystemStyleObject>;
interface ControlProps
interface RatingGroupControlProps extends HTMLChakraProps<'div', ArkRatingGroup.ControlBaseProps> {}
interface HoverChangeDetails
interface RatingGroupHoverChangeDetails extends ArkRatingGroup.HoverChangeDetails {}
interface ItemIndicatorProps
interface RatingGroupItemIndicatorProps extends HTMLChakraProps<'span'> {}
property icon
icon?: React.ReactElement;
interface ItemProps
interface RatingGroupItemProps extends HTMLChakraProps<'div', ArkRatingGroup.ItemBaseProps> {}
interface LabelProps
interface RatingGroupLabelProps extends HTMLChakraProps<'div', ArkRatingGroup.LabelBaseProps> {}
interface RootProps
interface RatingGroupRootProps extends HTMLChakraProps<'div', RatingGroupRootBaseProps> {}
interface RootProviderProps
interface RatingGroupRootProviderProps extends HTMLChakraProps<'div', RatingGroupRootProviderBaseProps> {}
interface ValueChangeDetails
interface RatingGroupValueChangeDetails extends ArkRatingGroup.ValueChangeDetails {}
namespace SegmentGroup
module 'dist/types/components/segment-group/namespace.d.ts' {}
variable Indicator
const Indicator: any;
variable Item
const Item: any;
variable ItemHiddenInput
const ItemHiddenInput: any;
variable ItemText
const ItemText: any;
variable PropsProvider
const PropsProvider: React.Provider<SegmentGroupRootBaseProps>;
variable Root
const Root: any;
variable RootProvider
const RootProvider: any;
function Context
Context: (props: ArkSegmentGroup.ContextProps) => any;
function ItemContext
ItemContext: (props: ArkSegmentGroup.ItemContextProps) => any;
interface IndicatorProps
interface SegmentGroupIndicatorProps extends HTMLChakraProps<'div', ArkSegmentGroup.IndicatorBaseProps> {}
interface ItemProps
interface SegmentGroupItemProps extends HTMLChakraProps<'label', ArkSegmentGroup.ItemBaseProps> {}
interface ItemTextProps
interface SegmentGroupItemTextProps extends HTMLChakraProps<'span', ArkSegmentGroup.ItemTextBaseProps> {}
interface RootProps
interface SegmentGroupRootProps extends HTMLChakraProps<'div', SegmentGroupRootBaseProps> {}
interface RootProviderProps
interface SegmentGroupRootProviderProps extends HTMLChakraProps<'div', SegmentGroupRootProviderBaseProps> {}
interface ValueChangeDetails
interface SegmentGroupValueChangeDetails extends ArkSegmentGroup.ValueChangeDetails {}
namespace Select
module 'dist/types/components/select/namespace.d.ts' {}
variable ClearTrigger
const ClearTrigger: any;
variable Content
const Content: any;
variable Control
const Control: any;
variable HiddenSelect
const HiddenSelect: any;
variable Indicator
const Indicator: any;
variable IndicatorGroup
const IndicatorGroup: any;
variable Item
const Item: any;
variable ItemGroup
const ItemGroup: any;
variable ItemGroupLabel
const ItemGroupLabel: any;
variable ItemIndicator
const ItemIndicator: any;
variable ItemText
const ItemText: any;
variable Label
const Label: any;
variable Positioner
const Positioner: any;
variable PropsProvider
const PropsProvider: React.Provider<SelectRootBaseProps<any>>;
variable Root
const Root: SelectRootComponent;
variable RootProvider
const RootProvider: SelectRootProviderComponent;
variable Trigger
const Trigger: any;
variable ValueText
const ValueText: any;
function Context
Context: <T extends unknown>(props: ArkSelect.ContextProps<T>) => any;
function ItemContext
ItemContext: (props: ArkSelect.ItemContextProps) => any;
interface ClearTriggerProps
interface SelectClearTriggerProps extends HTMLChakraProps<'button', ArkSelect.ClearTriggerBaseProps> {}
interface ContentProps
interface SelectContentProps extends HTMLChakraProps<'div', ArkSelect.ContentBaseProps> {}
interface ControlProps
interface SelectControlProps extends HTMLChakraProps<'div', ArkSelect.ControlBaseProps> {}
interface HighlightChangeDetails
interface SelectHighlightChangeDetails<T extends CollectionItem = any> extends ArkSelect.HighlightChangeDetails<T> {}
interface IndicatorGroupProps
interface SelectIndicatorGroupProps extends HTMLChakraProps<'div'> {}
interface IndicatorProps
interface SelectIndicatorProps extends HTMLChakraProps<'div', ArkSelect.ItemIndicatorBaseProps> {}
interface ItemGroupLabelProps
interface SelectItemGroupLabelProps extends HTMLChakraProps<'div', ArkSelect.ItemGroupLabelBaseProps> {}
interface ItemGroupProps
interface SelectItemGroupProps extends HTMLChakraProps<'div', ArkSelect.ItemGroupBaseProps> {}
interface ItemIndicatorProps
interface SelectItemIndicatorProps extends HTMLChakraProps<'div', ArkSelect.ItemIndicatorBaseProps> {}
interface ItemProps
interface SelectItemProps extends HTMLChakraProps<'div', ArkSelect.ItemBaseProps> {}
interface ItemTextProps
interface SelectItemTextProps extends HTMLChakraProps<'div', ArkSelect.ItemTextBaseProps> {}
interface LabelProps
interface SelectLabelProps extends HTMLChakraProps<'label', ArkSelect.LabelBaseProps> {}
interface OpenChangeDetails
interface SelectOpenChangeDetails extends ArkSelect.OpenChangeDetails {}
interface PositionerProps
interface SelectPositionerProps extends HTMLChakraProps<'div', ArkSelect.PositionerBaseProps> {}
interface RootComponent
interface SelectRootComponent {}
call signature
<T extends CollectionItem>( props: SelectRootProps<T> & React.RefAttributes<HTMLDivElement>): JSX.Element;
interface RootProps
interface SelectRootProps<T extends CollectionItem = any> extends HTMLChakraProps<'div', SelectRootBaseProps<T>> {}
interface RootProviderProps
interface SelectRootProviderProps<T extends CollectionItem = any> extends HTMLChakraProps<'div', SelectRootProviderBaseProps<T>> {}
interface TriggerProps
interface SelectTriggerProps extends HTMLChakraProps<'button', ArkSelect.TriggerBaseProps> {}
interface ValueChangeDetails
interface SelectValueChangeDetails<T extends CollectionItem = any> extends ArkSelect.ValueChangeDetails<T> {}
interface ValueTextProps
interface SelectValueTextProps extends HTMLChakraProps<'span', ArkSelect.ValueTextBaseProps> {}
namespace Slider
module 'dist/types/components/slider/namespace.d.ts' {}
variable Control
const Control: any;
variable DraggingIndicator
const DraggingIndicator: any;
variable HiddenInput
const HiddenInput: any;
variable Label
const Label: any;
variable Marker
const Marker: any;
variable MarkerGroup
const MarkerGroup: any;
variable MarkerIndicator
const MarkerIndicator: any;
variable PropsProvider
const PropsProvider: React.Provider<SliderRootBaseProps>;
variable Range
const Range: any;
variable Root
const Root: any;
variable RootProvider
const RootProvider: any;
variable Thumb
const Thumb: any;
variable Track
const Track: any;
variable ValueText
const ValueText: any;
function Context
Context: (props: ArkSlider.ContextProps) => any;
interface ControlProps
interface SliderControlProps extends HTMLChakraProps<'div', ArkSlider.ControlBaseProps> {}
interface DraggingIndicatorProps
interface SliderDraggingIndicatorProps extends HTMLChakraProps<'div', ArkSlider.DraggingIndicatorBaseProps> {}
interface LabelProps
interface SliderLabelProps extends HTMLChakraProps<'label', ArkSlider.LabelBaseProps> {}
interface MarkerGroupProps
interface SliderMarkerGroupProps extends HTMLChakraProps<'div', ArkSlider.MarkerGroupBaseProps> {}
interface MarkerIndicatorProps
interface SliderMarkerIndicatorProps extends HTMLChakraProps<'div'> {}
interface MarkerProps
interface SliderMarkerProps extends HTMLChakraProps<'div', ArkSlider.MarkerBaseProps> {}
interface RangeProps
interface SliderRangeProps extends HTMLChakraProps<'div', ArkSlider.RangeBaseProps> {}
interface RootProps
interface SliderRootProps extends HTMLChakraProps<'div', SliderRootBaseProps> {}
interface RootProviderProps
interface SliderRootProviderProps extends HTMLChakraProps<'div', SliderRootProviderBaseProps> {}
interface ThumbProps
interface SliderThumbProps extends HTMLChakraProps<'div', ArkSlider.ThumbBaseProps> {}
interface TrackProps
interface SliderTrackProps extends HTMLChakraProps<'div', ArkSlider.TrackBaseProps> {}
interface ValueChangeDetails
interface SliderValueChangeDetails extends ArkSlider.ValueChangeDetails {}
interface ValueTextProps
interface SliderValueTextProps extends HTMLChakraProps<'div', ArkSlider.ValueTextBaseProps> {}
namespace Stat
module 'dist/types/components/stat/namespace.d.ts' {}
variable DownIndicator
const DownIndicator: any;
variable HelpText
const HelpText: any;
variable Label
const Label: any;
variable PropsProvider
const PropsProvider: React.Provider<StatRootBaseProps>;
variable Root
const Root: any;
variable UpIndicator
const UpIndicator: any;
variable ValueText
const ValueText: any;
variable ValueUnit
const ValueUnit: any;
interface DownIndicatorProps
interface StatDownIndicatorProps extends HTMLChakraProps<'span'> {}
interface HelpTextProps
interface StatHelpTextProps extends HTMLChakraProps<'span'> {}
interface LabelProps
interface StatLabelProps extends HTMLChakraProps<'dt'> {}
interface RootProps
interface StatRootProps extends HTMLChakraProps<'dl', StatRootBaseProps> {}
interface UpIndicatorProps
interface StatUpIndicatorProps extends HTMLChakraProps<'span'> {}
interface ValueTextProps
interface StatValueTextProps extends HTMLChakraProps<'dd'> {}
interface ValueUnitProps
interface StatValueUnitProps extends HTMLChakraProps<'span'> {}
namespace Status
module 'dist/types/components/status/namespace.d.ts' {}
variable Indicator
const Indicator: any;
variable PropsProvider
const PropsProvider: React.Provider<StatusRootBaseProps>;
variable Root
const Root: any;
interface IndicatorProps
interface StatusIndicatorProps extends HTMLChakraProps<'div'> {}
interface RootProps
interface StatusRootProps extends HTMLChakraProps<'div', StatusRootBaseProps> {}
namespace Steps
module 'dist/types/components/steps/namespace.d.ts' {}
variable CompletedContent
const CompletedContent: any;
variable Content
const Content: any;
variable Context
const Context: { (props: ArkSteps.ContextProps): any; displayName: string };
variable Description
const Description: any;
variable Indicator
const Indicator: any;
variable Item
const Item: any;
variable ItemContext
const ItemContext: { (props: ArkSteps.ItemContextProps): any; displayName: string };
variable List
const List: any;
variable NextTrigger
const NextTrigger: any;
variable Number
const Number: any;
variable PrevTrigger
const PrevTrigger: any;
variable PropsProvider
const PropsProvider: React.Provider<StepsRootBaseProps>;
variable Root
const Root: any;
variable RootProvider
const RootProvider: any;
variable Separator
const Separator: any;
variable Title
const Title: any;
variable Trigger
const Trigger: any;
function Status
Status: (props: StepsStatusProps) => any;
interface ChangeDetails
interface StepsChangeDetails extends ArkSteps.ChangeDetails {}
interface CompletedContentProps
interface StepsCompletedContentProps extends HTMLChakraProps<'div'> {}
interface ContentProps
interface StepsContentProps extends HTMLChakraProps<'div', ArkSteps.ContentBaseProps> {}
interface DescriptionProps
interface StepsDescriptionProps extends HTMLChakraProps<'div'> {}
interface IndicatorProps
interface StepsIndicatorProps extends HTMLChakraProps<'div', ArkSteps.IndicatorBaseProps> {}
interface ItemProps
interface StepsItemProps extends HTMLChakraProps<'div', ArkSteps.ItemBaseProps> {}
interface ListProps
interface StepsListProps extends HTMLChakraProps<'div', ArkSteps.ListBaseProps> {}
interface NextTriggerProps
interface StepsNextTriggerProps extends HTMLChakraProps<'button', ArkSteps.NextTriggerBaseProps> {}
interface NumberProps
interface StepsNumberProps extends HTMLChakraProps<'div'> {}
interface PrevTriggerProps
interface StepsPrevTriggerProps extends HTMLChakraProps<'button', ArkSteps.PrevTriggerBaseProps> {}
interface RootProps
interface StepsRootProps extends HTMLChakraProps<'div', StepsRootBaseProps> {}
interface RootProviderProps
interface StepsRootProviderProps extends HTMLChakraProps<'div', StepsRootProviderBaseProps> {}
interface SeparatorProps
interface StepsSeparatorProps extends HTMLChakraProps<'div', ArkSteps.SeparatorBaseProps> {}
interface StatusProps
interface StepsStatusProps {}
property complete
complete: React.ReactNode;
property current
current?: React.ReactNode;
property incomplete
incomplete: React.ReactNode;
interface TitleProps
interface StepsTitleProps extends HTMLChakraProps<'div'> {}
interface TriggerProps
interface StepsTriggerProps extends HTMLChakraProps<'button', ArkSteps.TriggerBaseProps> {}
namespace Switch
module 'dist/types/components/switch/namespace.d.ts' {}
variable Control
const Control: any;
variable HiddenInput
const HiddenInput: any;
variable Indicator
const Indicator: any;
variable Label
const Label: any;
variable PropsProvider
const PropsProvider: React.Provider<SwitchRootBaseProps>;
variable Root
const Root: any;
variable RootProvider
const RootProvider: any;
variable Thumb
const Thumb: any;
variable ThumbIndicator
const ThumbIndicator: any;
function Context
Context: (props: ArkSwitch.ContextProps) => any;
interface CheckedChangeDetails
interface SwitchCheckedChangeDetails extends ArkSwitch.CheckedChangeDetails {}
interface ControlProps
interface SwitchControlProps extends HTMLChakraProps<'span', ArkSwitch.ControlBaseProps> {}
interface IndicatorProps
interface SwitchIndicatorProps extends HTMLChakraProps<'span'> {}
property fallback
fallback?: React.ReactNode;
interface LabelProps
interface SwitchLabelProps extends HTMLChakraProps<'span', ArkSwitch.LabelBaseProps> {}
interface RootProps
interface SwitchRootProps extends HTMLChakraProps<'label', SwitchRootBaseProps> {}
interface RootProviderProps
interface SwitchRootProviderProps extends HTMLChakraProps<'label', SwitchRootProviderBaseProps> {}
interface ThumbIndicatorProps
interface SwitchThumbIndicatorProps extends HTMLChakraProps<'span'> {}
property fallback
fallback?: React.ReactNode;
interface ThumbProps
interface SwitchThumbProps extends HTMLChakraProps<'span', ArkSwitch.ThumbBaseProps> {}
namespace Table
module 'dist/types/components/table/namespace.d.ts' {}
variable Body
const Body: any;
variable Caption
const Caption: any;
variable Cell
const Cell: any;
variable Column
const Column: any;
variable ColumnGroup
const ColumnGroup: any;
variable ColumnHeader
const ColumnHeader: any;
variable Footer
const Footer: any;
variable Header
const Header: any;
variable Root
const Root: any;
variable RootPropsProvider
const RootPropsProvider: React.Provider<TableRootBaseProps>;
variable Row
const Row: any;
variable ScrollArea
const ScrollArea: FunctionComponent<any>;
interface BodyProps
interface TableBodyProps extends HTMLChakraProps<'tbody'> {}
interface CaptionProps
interface TableCaptionProps extends HTMLChakraProps<'caption'> {}
interface CellProps
interface TableCellProps extends HTMLChakraProps<'td'> {}
interface ColumnGroupProps
interface TableColumnGroupProps extends HTMLChakraProps<'colgroup'> {}
interface ColumnHeaderProps
interface TableColumnHeaderProps extends HTMLChakraProps<'th'> {}
interface ColumnProps
interface TableColumnProps extends HTMLChakraProps<'col'> {}
interface FooterProps
interface TableFooterProps extends HTMLChakraProps<'tfoot'> {}
interface HeaderProps
interface TableHeaderProps extends HTMLChakraProps<'thead'> {}
interface RootProps
interface TableRootProps extends HTMLChakraProps<'table', TableRootBaseProps> {}
property native
native?: boolean;
If
true
, the table will style its descendants with nested selectors
interface RowProps
interface TableRowProps extends HTMLChakraProps<'tr'> {}
interface ScrollAreaProps
interface TableScrollAreaProps extends HTMLChakraProps<'div'> {}
namespace Tabs
module 'dist/types/components/tabs/namespace.d.ts' {}
variable Content
const Content: any;
variable ContentGroup
const ContentGroup: any;
variable Indicator
const Indicator: any;
variable List
const List: any;
variable PropsProvider
const PropsProvider: React.Provider<TabsRootBaseProps>;
variable Root
const Root: any;
variable RootProvider
const RootProvider: any;
variable Trigger
const Trigger: any;
function Context
Context: (props: ArkTabs.ContextProps) => any;
interface ContentGroupProps
interface TabsContentGroupProps extends HTMLChakraProps<'div'> {}
interface ContentProps
interface TabsContentProps extends HTMLChakraProps<'div', ArkTabs.ContentBaseProps> {}
interface IndicatorProps
interface TabsIndicatorProps extends HTMLChakraProps<'div', ArkTabs.ListBaseProps> {}
interface ListProps
interface TabsListProps extends HTMLChakraProps<'div', ArkTabs.ListBaseProps> {}
interface RootProps
interface TabsRootProps extends HTMLChakraProps<'div', TabsRootBaseProps> {}
interface RootProviderProps
interface TabsRootProviderProps extends HTMLChakraProps<'div', TabsRootProviderBaseProps> {}
interface TriggerProps
interface TabsTriggerProps extends HTMLChakraProps<'button', ArkTabs.TriggerBaseProps> {}
interface ValueChangeDetails
interface TabsValueChangeDetails extends ArkTabs.ValueChangeDetails {}
namespace Tag
module 'dist/types/components/tag/namespace.d.ts' {}
variable CloseTrigger
const CloseTrigger: any;
variable EndElement
const EndElement: any;
variable Label
const Label: any;
variable Root
const Root: any;
variable RootPropsProvider
const RootPropsProvider: React.Provider<TagRootBaseProps>;
variable StartElement
const StartElement: any;
interface CloseTriggerProps
interface TagCloseTriggerProps extends HTMLChakraProps<'button'> {}
interface EndElementProps
interface TagEndElementProps extends HTMLChakraProps<'span'> {}
interface LabelProps
interface TagLabelProps extends HTMLChakraProps<'span'> {}
interface RootProps
interface TagRootProps extends HTMLChakraProps<'span', TagRootBaseProps> {}
interface StartElementProps
interface TagStartElementProps extends HTMLChakraProps<'span'> {}
namespace Timeline
module 'dist/types/components/timeline/namespace.d.ts' {}
variable Connector
const Connector: any;
variable Content
const Content: any;
variable Description
const Description: any;
variable Indicator
const Indicator: any;
variable Item
const Item: any;
variable Root
const Root: any;
variable RootPropsProvider
const RootPropsProvider: React.Provider<TimelineRootBaseProps>;
variable Separator
const Separator: any;
variable Title
const Title: any;
interface ConnectorProps
interface TimelineConnectorProps extends HTMLChakraProps<'div'> {}
interface ContentProps
interface TimelineContentProps extends HTMLChakraProps<'div'> {}
interface DescriptionProps
interface TimelineDescriptionProps extends HTMLChakraProps<'div'> {}
interface IndicatorProps
interface TimelineIndicatorProps extends HTMLChakraProps<'div'> {}
interface ItemProps
interface TimelineItemProps extends HTMLChakraProps<'div'> {}
interface RootProps
interface TimelineRootProps extends HTMLChakraProps<'div', TimelineRootBaseProps> {}
interface SeparatorProps
interface TimelineSeparatorProps extends HTMLChakraProps<'div'> {}
interface TitleProps
interface TimelineTitleProps extends HTMLChakraProps<'div'> {}
namespace Toast
module 'dist/types/components/toast/namespace.d.ts' {}
variable ActionTrigger
const ActionTrigger: any;
variable CloseTrigger
const CloseTrigger: any;
variable Description
const Description: any;
variable Indicator
const Indicator: any;
variable Root
const Root: any;
variable Title
const Title: any;
interface ActionTriggerProps
interface ToastActionTriggerProps extends HTMLChakraProps<'button', ArkToast.ActionTriggerProps> {}
interface CloseTriggerProps
interface ToastCloseTriggerProps extends HTMLChakraProps<'button', ArkToast.CloseTriggerProps> {}
interface DescriptionProps
interface ToastDescriptionProps extends HTMLChakraProps<'div', ArkToast.DescriptionProps> {}
interface IndicatorProps
interface ToastIndicatorProps extends HTMLChakraProps<'span'> {}
interface RootProps
interface ToastRootProps extends HTMLChakraProps<'div', ToastRootBaseProps> {}
interface TitleProps
interface ToastTitleProps extends HTMLChakraProps<'div', ArkToast.TitleProps> {}
namespace Toggle
module 'dist/types/components/toggle/namespace.d.ts' {}
variable Indicator
const Indicator: any;
variable PropsProvider
const PropsProvider: React.Provider<ToggleRootBaseProps>;
variable Root
const Root: any;
function Context
Context: (props: ArkToggle.ContextProps) => any;
interface IndicatorProps
interface ToggleIndicatorProps extends HTMLChakraProps<'div', ArkToggle.IndicatorBaseProps> {}
interface RootBaseProps
interface ToggleRootBaseProps extends Assign<ArkToggle.RootBaseProps, SlotRecipeProps<'toggle'>>, UnstyledProp {}
interface RootProps
interface ToggleRootProps extends HTMLChakraProps<'button', ToggleRootBaseProps> {}
namespace Tooltip
module 'dist/types/components/tooltip/namespace.d.ts' {}
variable Arrow
const Arrow: any;
variable ArrowTip
const ArrowTip: any;
variable Content
const Content: any;
variable Positioner
const Positioner: any;
variable PropsProvider
const PropsProvider: React.Provider<TooltipRootBaseProps>;
variable Root
const Root: any;
variable RootProvider
const RootProvider: any;
variable Trigger
const Trigger: any;
function Context
Context: (props: ArkTooltip.ContextProps) => any;
interface ArrowProps
interface TooltipArrowProps extends HTMLChakraProps<'div', ArkTooltip.ArrowProps> {}
interface ArrowTipProps
interface TooltipArrowTipProps extends HTMLChakraProps<'div', ArkTooltip.ArrowTipProps> {}
interface ContentProps
interface TooltipContentProps extends HTMLChakraProps<'section', ArkTooltip.ContentProps> {}
interface OpenChangeDetails
interface TooltipOpenChangeDetails extends ArkTooltip.OpenChangeDetails {}
interface PositionerProps
interface TooltipPositionerProps extends HTMLChakraProps<'div', ArkTooltip.PositionerProps> {}
interface RootProps
interface TooltipRootProps extends TooltipRootBaseProps {}
property children
children?: React.ReactNode;
interface RootProviderProps
interface TooltipRootProviderProps extends TooltipRootProviderBaseProps {}
property children
children?: React.ReactNode;
interface TriggerProps
interface TooltipTriggerProps extends HTMLChakraProps<'button', ArkTooltip.TriggerProps> {}
Package Files (180)
- dist/types/components/accordion/accordion.d.ts
- dist/types/components/accordion/namespace.d.ts
- dist/types/components/action-bar/action-bar.d.ts
- dist/types/components/action-bar/namespace.d.ts
- dist/types/components/alert/alert.d.ts
- dist/types/components/alert/namespace.d.ts
- dist/types/components/aspect-ratio/aspect-ratio.d.ts
- dist/types/components/avatar/avatar.d.ts
- dist/types/components/avatar/namespace.d.ts
- dist/types/components/badge/badge.d.ts
- dist/types/components/bleed/bleed.d.ts
- dist/types/components/blockquote/blockquote.d.ts
- dist/types/components/blockquote/namespace.d.ts
- dist/types/components/box/box.d.ts
- dist/types/components/box/circle.d.ts
- dist/types/components/box/span.d.ts
- dist/types/components/box/square.d.ts
- dist/types/components/box/sticky.d.ts
- dist/types/components/breadcrumb/breadcrumb.d.ts
- dist/types/components/breadcrumb/namespace.d.ts
- dist/types/components/button/button.d.ts
- dist/types/components/button/icon-button.d.ts
- dist/types/components/card/card.d.ts
- dist/types/components/card/namespace.d.ts
- dist/types/components/center/absolute-center.d.ts
- dist/types/components/center/center.d.ts
- dist/types/components/checkbox-card/checkbox-card.d.ts
- dist/types/components/checkbox-card/namespace.d.ts
- dist/types/components/checkbox/checkbox.d.ts
- dist/types/components/checkbox/namespace.d.ts
- dist/types/components/checkmark/checkmark.d.ts
- dist/types/components/client-only/client-only.d.ts
- dist/types/components/clipboard/clipboard.d.ts
- dist/types/components/clipboard/namespace.d.ts
- dist/types/components/code/code.d.ts
- dist/types/components/collapsible/collapsible.d.ts
- dist/types/components/collapsible/namespace.d.ts
- dist/types/components/color-picker/color-picker.d.ts
- dist/types/components/color-picker/namespace.d.ts
- dist/types/components/color-swatch/index.d.ts
- dist/types/components/container/container.d.ts
- dist/types/components/data-list/data-list.d.ts
- dist/types/components/data-list/namespace.d.ts
- dist/types/components/dialog/dialog.d.ts
- dist/types/components/dialog/namespace.d.ts
- dist/types/components/drawer/drawer.d.ts
- dist/types/components/drawer/namespace.d.ts
- dist/types/components/editable/editable.d.ts
- dist/types/components/editable/namespace.d.ts
- dist/types/components/empty-state/empty-state.d.ts
- dist/types/components/empty-state/namespace.d.ts
- dist/types/components/field/field.d.ts
- dist/types/components/field/namespace.d.ts
- dist/types/components/fieldset/fieldset.d.ts
- dist/types/components/fieldset/namespace.d.ts
- dist/types/components/file-upload/file-upload.d.ts
- dist/types/components/file-upload/namespace.d.ts
- dist/types/components/flex/flex.d.ts
- dist/types/components/float/float.d.ts
- dist/types/components/for/for.d.ts
- dist/types/components/format/index.d.ts
- dist/types/components/grid/grid-item.d.ts
- dist/types/components/grid/grid.d.ts
- dist/types/components/grid/simple-grid.d.ts
- dist/types/components/group/group.d.ts
- dist/types/components/highlight/highlight.d.ts
- dist/types/components/hover-card/hover-card.d.ts
- dist/types/components/hover-card/namespace.d.ts
- dist/types/components/icon/create-icon.d.ts
- dist/types/components/icon/icon.d.ts
- dist/types/components/image/image.d.ts
- dist/types/components/input/input-addon.d.ts
- dist/types/components/input/input-element.d.ts
- dist/types/components/input/input.d.ts
- dist/types/components/kbd/kbd.d.ts
- dist/types/components/link/link-box.d.ts
- dist/types/components/link/link.d.ts
- dist/types/components/list/list.d.ts
- dist/types/components/list/namespace.d.ts
- dist/types/components/menu/menu.d.ts
- dist/types/components/menu/namespace.d.ts
- dist/types/components/native-select/namespace.d.ts
- dist/types/components/native-select/native-select.d.ts
- dist/types/components/number-input/namespace.d.ts
- dist/types/components/number-input/number-input.d.ts
- dist/types/components/pagination/namespace.d.ts
- dist/types/components/pagination/pagination.d.ts
- dist/types/components/pin-input/namespace.d.ts
- dist/types/components/pin-input/pin-input.d.ts
- dist/types/components/popover/namespace.d.ts
- dist/types/components/popover/popover.d.ts
- dist/types/components/progress-circle/namespace.d.ts
- dist/types/components/progress-circle/progress-circle.d.ts
- dist/types/components/progress/namespace.d.ts
- dist/types/components/progress/progress.d.ts
- dist/types/components/qr-code/namespace.d.ts
- dist/types/components/qr-code/qr-code.d.ts
- dist/types/components/radio-card/namespace.d.ts
- dist/types/components/radio-card/radio-card.d.ts
- dist/types/components/radio-group/namespace.d.ts
- dist/types/components/radio-group/radio-group.d.ts
- dist/types/components/radiomark/radiomark.d.ts
- dist/types/components/rating-group/namespace.d.ts
- dist/types/components/rating-group/rating-group.d.ts
- dist/types/components/segment-group/namespace.d.ts
- dist/types/components/segment-group/segment-group.d.ts
- dist/types/components/select/namespace.d.ts
- dist/types/components/select/select.d.ts
- dist/types/components/separator/separator.d.ts
- dist/types/components/show/show.d.ts
- dist/types/components/skeleton/skeleton.d.ts
- dist/types/components/skip-nav/skip-nav-content.d.ts
- dist/types/components/skip-nav/skip-nav-link.d.ts
- dist/types/components/slider/namespace.d.ts
- dist/types/components/slider/slider.d.ts
- dist/types/components/spacer/spacer.d.ts
- dist/types/components/spinner/spinner.d.ts
- dist/types/components/stack/h-stack.d.ts
- dist/types/components/stack/stack-separator.d.ts
- dist/types/components/stack/stack.d.ts
- dist/types/components/stack/v-stack.d.ts
- dist/types/components/stat/namespace.d.ts
- dist/types/components/stat/stat.d.ts
- dist/types/components/status/namespace.d.ts
- dist/types/components/status/status.d.ts
- dist/types/components/steps/namespace.d.ts
- dist/types/components/steps/steps.d.ts
- dist/types/components/switch/namespace.d.ts
- dist/types/components/switch/switch.d.ts
- dist/types/components/table/namespace.d.ts
- dist/types/components/table/table.d.ts
- dist/types/components/tabs/namespace.d.ts
- dist/types/components/tabs/tabs.d.ts
- dist/types/components/tag/namespace.d.ts
- dist/types/components/tag/tag.d.ts
- dist/types/components/textarea/textarea.d.ts
- dist/types/components/theme.d.ts
- dist/types/components/timeline/namespace.d.ts
- dist/types/components/timeline/timeline.d.ts
- dist/types/components/toast/namespace.d.ts
- dist/types/components/toast/toast.d.ts
- dist/types/components/toggle/namespace.d.ts
- dist/types/components/toggle/toggle.d.ts
- dist/types/components/tooltip/namespace.d.ts
- dist/types/components/tooltip/tooltip.d.ts
- dist/types/components/typography/em.d.ts
- dist/types/components/typography/heading.d.ts
- dist/types/components/typography/mark.d.ts
- dist/types/components/typography/strong.d.ts
- dist/types/components/typography/text.d.ts
- dist/types/components/visually-hidden/visually-hidden.d.ts
- dist/types/create-context.d.ts
- dist/types/hooks/use-breakpoint.d.ts
- dist/types/hooks/use-callback-ref.d.ts
- dist/types/hooks/use-controllable-state.d.ts
- dist/types/hooks/use-disclosure.d.ts
- dist/types/hooks/use-media-query.d.ts
- dist/types/index.d.ts
- dist/types/merge-props.d.ts
- dist/types/merge-refs.d.ts
- dist/types/preset-base.d.ts
- dist/types/preset.d.ts
- dist/types/styled-system/composition.d.ts
- dist/types/styled-system/config.d.ts
- dist/types/styled-system/create-recipe-context.d.ts
- dist/types/styled-system/create-slot-recipe-context.d.ts
- dist/types/styled-system/css.types.d.ts
- dist/types/styled-system/empty.d.ts
- dist/types/styled-system/factory.d.ts
- dist/types/styled-system/factory.types.d.ts
- dist/types/styled-system/generated/recipes.gen.d.ts
- dist/types/styled-system/generated/token.gen.d.ts
- dist/types/styled-system/provider.d.ts
- dist/types/styled-system/recipe-props.d.ts
- dist/types/styled-system/recipe.types.d.ts
- dist/types/styled-system/system.d.ts
- dist/types/styled-system/types.d.ts
- dist/types/styled-system/use-recipe.d.ts
- dist/types/styled-system/use-slot-recipe.d.ts
- dist/types/styled-system/use-token.d.ts
Dependencies (7)
Dev Dependencies (4)
Peer Dependencies (3)
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[![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>
- Updated .
Package analyzed in 19046 ms. - Missing or incorrect documentation? Open an issue for this package.