mantine.core — io.github.unisoma/mantine-ui-wrapper 9.5.0.0-SNAPSHOT

Mantine @mantine/core 9.5.0 wrappers (generated, supplement hoisted from codegen/supplements/).

accordion clj/s

Accordion — Divide content into collapsible sections

https://mantine.dev/core/accordion

Props (docgen 9.5.0):

• chevron React.ReactNode — Custom chevron icon
• chevronIconSize string | number (default 16) — Size of the default chevron icon. Ignored when chevron prop is set. Use chevronSize instead when using custom chevron.
• chevronPosition "left" | "right" (default right) — Position of the chevron relative to the item label
• chevronSize string | number (default auto) — Size of the chevron icon container
• defaultValue string | string[] | null — Uncontrolled component default value
• disableChevronRotation boolean (default false) — If set, chevron rotation is disabled
• disableCollapse boolean (default false) — If set, the open item cannot be collapsed by clicking it again, so one item always stays open. Only applies when multiple is false.
• keepMounted boolean (default true) — If set to false, panels are unmounted when collapsed. By default, panels stay mounted when collapsed.
• keepMountedMode "activity" | "display-none" (default 'activity') — Controls how inactive panels content is hidden when keepMounted is true, 'activity' – hidden with Activity component, 'display-none' – hidden with display: none styles
• loop boolean (default true) — If set, arrow keys loop through items (first to last and last to first)
• multiple boolean (default false) — If set, multiple items can be opened at the same time
• onChange (value: AccordionValue<Multiple>) => void — Called when value changes, payload type depends on multiple prop
• order 2 | 3 | 4 | 5 | 6 — Sets heading level (h2-h6) for Accordion.Control elements. Wraps each control in the corresponding heading tag, recommended to meet WAI-ARIA accessibility requirements. Has no visual effect.
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius. Numbers are converted to rem.
• transitionDuration number (default 200) — Transition duration in ms
• value string | string[] | null — Controlled component value

Optional leading props map; remaining args are children.

accordion-chevron clj/s

Accordion.Chevron — compound part of Accordion (docgen omits it). Optional leading props map; remaining args are children.

accordion-control clj/s

AccordionControl — Divide content into collapsible sections (Accordion family)

https://mantine.dev/core/accordion

Props (docgen 9.5.0):

• chevron React.ReactNode — Custom chevron icon
• children React.ReactNode — Control label
• disabled boolean — Sets disabled attribute, prevents interactions
• icon React.ReactNode — Icon displayed next to the label

Optional leading props map; remaining args are children.

accordion-item clj/s

AccordionItem — Divide content into collapsible sections (Accordion family)

https://mantine.dev/core/accordion

Props (docgen 9.5.0):

• value string (required) — Value that is used to manage the accordion state

Optional leading props map; remaining args are children.

accordion-panel clj/s

Accordion.Panel — compound part of Accordion (docgen omits it). Optional leading props map; remaining args are children.

action-icon clj/s

ActionIcon — Icon button

https://mantine.dev/core/action-icon

Polymorphic: accepts :component / :render-root.

Props (docgen 9.5.0):

• autoContrast boolean — If set, adjusts text color based on background color for filled variant
• children React.ReactNode — Icon element
• color MantineColor (default theme.primaryColor) — Key of theme.colors or any valid CSS color.
• disabled boolean — Sets disabled attribute, prevents interactions
• gradient MantineGradient (default theme.defaultGradient) — Gradient values used with variant="gradient".
• loaderProps LoaderProps — Props passed down to the Loader component. Ignored when loading prop is not set.
• loading boolean — If set, Loader component is displayed instead of the children
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius. Numbers are converted to rem.
• size number | MantineSize | (string & {}) | "input-xs" | "input-sm" | "input-md" | "input-lg" | "input-xl" (default 'md') — Controls width and height of the button. Numbers are converted to rem.

Optional leading props map; remaining args are children.

action-icon-group clj/s

ActionIconGroup — Icon button (ActionIcon family)

https://mantine.dev/core/action-icon

Polymorphic: accepts :component / :render-root.

Props (docgen 9.5.0):

• borderWidth string | number (default 1) — border-width of the child components.
• children React.ReactNode — ActionIcon and ActionIcon.GroupSection components only
• orientation "horizontal" | "vertical" (default 'horizontal') — Group orientation

Optional leading props map; remaining args are children.

action-icon-group-section clj/s

ActionIcon.GroupSection — compound part of ActionIcon (docgen omits it). Optional leading props map; remaining args are children.

affix clj/s

Affix — Renders children inside portal at fixed position

https://mantine.dev/core/affix

Props (docgen 9.5.0):

• portalProps BasePortalProps — Props passed down to the Portal component. Ignored when withinPortal is false.
• position AffixPosition (default { bottom: 0, right: 0 }) — Affix position on screen
• withinPortal boolean (default true) — Determines whether the component is rendered within Portal
• zIndex React.CSSProperties["zIndex"] (default 200) — Root element z-index property

Optional leading props map; remaining args are children.

alert clj/s

Alert — Attract user attention with important static message

https://mantine.dev/core/alert

Props (docgen 9.5.0):

• autoContrast boolean — If set, adjusts text color based on background color for filled variant
• closeButtonLabel string — Close button aria-label
• color MantineColor (default theme.primaryColor) — Key of theme.colors or any valid CSS color
• icon React.ReactNode — Icon displayed next to the title
• onClose () => void — Called when the close button is clicked
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius
• title React.ReactNode — Alert title
• withCloseButton boolean (default false) — Determines whether close button should be displayed

Optional leading props map; remaining args are children.

alpha-slider clj/s

AlphaSlider — Slider component for selecting alpha channel in color pickers (0 – 1)

https://mantine.dev/core/alpha-slider

Props (docgen 9.5.0):

• color string (required)
• focusable boolean (default true) — If set, slider thumb can be focused
• onChange (value: number) => void — Called when value changes
• onChangeEnd (value: number) => void — Called when user stops dragging the slider or uses keyboard to change value
• onScrubEnd () => void — Called when user stops dragging the slider
• onScrubStart () => void — Called when user starts dragging the slider
• size MantineSize (default 'md') — Slider size
• value number (required) — Controlled component value

Optional leading props map; remaining args are children.

anchor clj/s

Anchor — Display link with theme styles

https://mantine.dev/core/anchor

Props (docgen 9.5.0):

• gradient MantineGradient (default theme.defaultGradient) — Gradient configuration, ignored when variant is not gradient
• inherit boolean (default false) — Determines whether font properties should be inherited from the parent
• inline boolean (default false) — Sets line-height to 1 for centering
• lineClamp number — Number of lines after which Text will be truncated
• size MantineSize | (string & {}) (default 'md') — Controls font-size and line-height
• textWrap "wrap" | "nowrap" | "balance" | "pretty" | "stable" — Controls text-wrap CSS property
• truncate TextTruncate — Side on which Text must be truncated, if true, text is truncated from the start
• underline "always" | "hover" | "not-hover" | "never" (default hover) — Defines when text-decoration: underline styles are applied.

Optional leading props map; remaining args are children.

angle-slider clj/s

AngleSlider — Pick angle value between 0 and 360

https://mantine.dev/core/angle-slider

Props (docgen 9.5.0):

• defaultValue number — Uncontrolled component default value
• disabled boolean — Sets data-disabled attribute, disables interactions
• formatLabel (value: number) => ReactNode — A function to format label based on the current value
• hiddenInputProps React.ComponentProps<"input"> — Props passed down to the hidden input
• marks { value: number; label?: string; }[] | undefined — Array of marks displayed on the slider
• name string — Hidden input name, use with uncontrolled component
• onChange (value: number) => void — Called on value change
• onChangeEnd (value: number) => void — Called after the selection is finished
• onScrubEnd () => void — Called in onMouseUp and onTouchEnd
• onScrubStart () => void — Called in onMouseDown and onTouchStart
• restrictToMarks boolean (default false) — If set, the selection is allowed only from the given marks array
• size number (default 60) — Slider size in px
• step number (default 1) — Step between values
• thumbSize number — Size of the thumb in px. Calculated based on the size value by default.
• value number — Controlled component value
• withLabel boolean (default true) — If set, the label is displayed inside the slider

Optional leading props map; remaining args are children.

app-shell clj/s

AppShell — Responsive shell for your application with header, navbar, aside and footer

https://mantine.dev/core/app-shell

Props (docgen 9.5.0):

• aside AppShellAsideConfiguration — Aside configuration, controls width, breakpoints and collapsed state. Required if you use Aside component.
• disabled boolean — If set, Navbar, Aside, Header and Footer components are hidden
• footer AppShellFooterConfiguration — Footer configuration, controls height, offset and collapsed state. Required if you use Footer component.
• header AppShellHeaderConfiguration — Header configuration, controls height, offset and collapsed state. Required if you use Header component.
• layout "default" | "alt" — Determines how Navbar/Aside are arranged relative to Header/Footer
• mode "fixed" | "static" (default 'fixed') — Determines positioning mode of all sections
• navbar AppShellNavbarConfiguration — Navbar configuration, controls width, breakpoints and collapsed state. Required if you use Navbar component.
• offsetScrollbars boolean (default true) — If set, Header and Footer components include styles to offset scrollbars. Based on react-remove-scroll.
• padding MantineSpacing | AppShellResponsiveSize (default 0) — Padding of the main section. Important: use padding prop instead of p.
• transitionDuration number (default 200) — Duration of all transitions in ms
• transitionTimingFunction TransitionTimingFunction (default ease) — Timing function of all transitions
• withBorder boolean (default true) — If set, the associated components have a border
• zIndex string | number (default 100) — z-index of all associated elements

Optional leading props map; remaining args are children.

app-shell-aside clj/s

AppShellAside — Responsive shell for your application with header, navbar, aside and footer (AppShell family)

https://mantine.dev/core/app-shell

Props (docgen 9.5.0):

• withBorder boolean — If set, component haves a border, overrides withBorder prop on AppShell component
• zIndex React.CSSProperties["zIndex"] — Sets z-index. Inherited from the AppShell by default.

Optional leading props map; remaining args are children.

app-shell-footer clj/s

AppShellFooter — Responsive shell for your application with header, navbar, aside and footer (AppShell family)

https://mantine.dev/core/app-shell

Props (docgen 9.5.0):

• withBorder boolean — If set, component haves a border, overrides withBorder prop on AppShell component
• zIndex React.CSSProperties["zIndex"] — Sets z-index. Inherited from the AppShell by default.

Optional leading props map; remaining args are children.

app-shell-header clj/s

AppShellHeader — Responsive shell for your application with header, navbar, aside and footer (AppShell family)

https://mantine.dev/core/app-shell

Props (docgen 9.5.0):

• withBorder boolean — If set, component haves a border, overrides withBorder prop on AppShell component
• zIndex React.CSSProperties["zIndex"] — Sets z-index. Inherited from the AppShell by default.

Optional leading props map; remaining args are children.

app-shell-main clj/s

AppShell.Main — compound part of AppShell (docgen omits it). Optional leading props map; remaining args are children.

app-shell-navbar clj/s

AppShellNavbar — Responsive shell for your application with header, navbar, aside and footer (AppShell family)

https://mantine.dev/core/app-shell

Props (docgen 9.5.0):

• withBorder boolean — If set, component haves a border, overrides withBorder prop on AppShell component
• zIndex React.CSSProperties["zIndex"] — Sets z-index. Inherited from the AppShell by default.

Optional leading props map; remaining args are children.

app-shell-section clj/s

AppShellSection

Props (docgen 9.5.0):

• grow boolean — If set, the section expands to take all available space

Optional leading props map; remaining args are children.

aspect-ratio clj/s

AspectRatio — Maintain responsive consistent width/height ratio

https://mantine.dev/core/aspect-ratio

Props (docgen 9.5.0):

• ratio number (default 1) — Aspect ratio, for example, 16 / 9, 4 / 3, 1920 / 1080

Optional leading props map; remaining args are children.

autocomplete clj/s

Autocomplete — Autocomplete user input with any list of options

https://mantine.dev/core/autocomplete

Props (docgen 9.5.0):

• autoSelectOnBlur boolean (default false) — If set, the highlighted option is selected when the input loses focus
• clearButtonProps InputClearButtonProps — Props passed down to the clear button
• clearSectionMode ClearSectionMode (default 'both') — Determines how the clear button and rightSection are rendered
• clearable boolean (default false) — If set, the clear button is displayed when the component has a value
• comboboxProps ComboboxProps — Props passed down to Combobox component
• data ComboboxGenericData — Data used to display options. Values must be unique.
• defaultDropdownOpened boolean — Uncontrolled dropdown initial opened state
• defaultValue string — Default value for uncontrolled component
• description React.ReactNode — Contents of Input.Description component. If not set, description is not displayed.
• descriptionProps InputDescriptionProps — Props passed down to the Input.Description component
• disabled boolean — Sets disabled attribute on the input element
• dropdownOpened boolean — Controlled dropdown opened state
• error React.ReactNode — Contents of Input.Error component. If not set, error is not displayed.
• errorProps InputErrorProps — Props passed down to the Input.Error component
• filter OptionsFilter<string> — Function based on which items are filtered and sorted
• floatingHeight "viewport" — If set to 'viewport', the dropdown grows to fill the available vertical space in the viewport. Disables the flip middleware.
• inputContainer (children: ReactNode) => ReactNode (default React.Fragment) — Render function to wrap the input element. Useful for adding tooltips, popovers, or other wrappers around the input.
• inputSize string — HTML size attribute for the input element (number of visible characters)
• inputWrapperOrder ("input" | "label" | "description" | "error")[] (default ['label', 'description', 'input', 'error']) — Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.
• label React.ReactNode — Contents of Input.Label component. If not set, label is not displayed.
• labelProps InputLabelProps — Props passed down to the Input.Label component
• leftSection React.ReactNode — Content section displayed on the left side of the input
• leftSectionPointerEvents React.CSSProperties["pointerEvents"] (default 'none') — Sets pointer-events styles on the leftSection element. Use 'all' when section contains interactive elements (buttons, links).
• leftSectionProps React.ComponentProps<"div"> — Props passed down to the leftSection element
• leftSectionWidth React.CSSProperties["width"] — Left section width, used to set width of the section and input padding-left, by default equals to the input height
• limit number — Maximum number of options displayed at a time, Infinity by default
• loading boolean (default false) — Displays loading indicator in the left or right section
• loadingPosition "left" | "right" (default 'right') — Position of the loading indicator
• maxDropdownHeight string | number — max-height of the dropdown, only applicable when withScrollArea prop is true, 250 by default
• onChange (value: string) => void — Called when value changes
• onClear () => void — Called when the clear button is clicked
• onDropdownClose () => void — Called when dropdown closes
• onDropdownOpen () => void — Called when dropdown opens
• onOptionSubmit (value: string) => void — Called when option is submitted from dropdown with mouse click or Enter key
• openOnFocus boolean (default true) — If set, the dropdown opens when the input receives focus
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem
• renderOption RenderAutocompleteOption — Function to render custom option content
• required boolean (default false) — Adds required attribute to the input and a red asterisk on the right side of label
• rightSection React.ReactNode — Content section displayed on the right side of the input
• rightSectionPointerEvents React.CSSProperties["pointerEvents"] (default 'none') — Sets pointer-events styles on the rightSection element. Use 'all' when section contains interactive elements (buttons, links).
• rightSectionProps React.ComponentProps<"div"> — Props passed down to the rightSection element
• rightSectionWidth React.CSSProperties["width"] — Right section width, used to set width of the section and input padding-right, by default equals to the input height
• scrollAreaProps ScrollAreaProps — Props passed to the underlying ScrollArea component in the dropdown
• selectFirstOptionOnChange boolean — If set, the first option is selected when value changes, false by default
• selectFirstOptionOnDropdownOpen boolean — If set, the first option is selected when dropdown opens, false by default
• size MantineSize (default 'sm') — Controls input height, horizontal padding, and font-size
• success React.ReactNode — Contents of Input.Success component. If not set, success is not displayed.
• successProps InputSuccessProps & DataAttributes — Props passed down to the Input.Success component
• value string — Controlled component value
• withAsterisk boolean (default false) — If set, the required asterisk is displayed next to the label. Overrides required prop. Does not add required attribute to the input.
• withErrorStyles boolean (default true) — Determines whether the input should have red border and red text color when the error prop is set
• withScrollArea boolean — Determines whether the options should be wrapped with ScrollArea.AutoSize, true by default
• withSuccessStyles boolean (default true) — Determines whether the input should have green border when the success prop is set
• wrapperProps WrapperProps — Props passed down to the root element

Optional leading props map; remaining args are children.

avatar clj/s

Avatar — Display user profile image, initials or fallback icon

https://mantine.dev/core/avatar

Polymorphic: accepts :component / :render-root.

Props (docgen 9.5.0):

• allowedInitialsColors DefaultMantineColor[] — A list of colors that is used for autogenerated initials. By default, all default Mantine colors can be used except gray and dark.
• alt string — Image alt attribute, also used as title attribute for placeholder
• autoContrast boolean — If set, adjusts text color based on background color for filled variant
• children React.ReactNode — Avatar placeholder, displayed when src={null} or when the image cannot be loaded
• color DefaultMantineColor | "initials" (default 'gray') — Key of theme.colors or any valid CSS color
• gradient MantineGradient (default theme.defaultGradient) — Gradient configuration for variant="gradient"
• imageProps DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> — Attributes passed down to img element
• name string — Name of the user. When src is not set, used to display initials and to generate color when color="initials" is set.
• radius MantineRadius | number (default '1000px') — Key of theme.radius or any valid CSS value to set border-radius
• size MantineSize | number (default 'md') — Width and height of the avatar, numbers are converted to rem
• src string | null — Image url, if the image cannot be loaded or src={null}, then placeholder is displayed instead

Optional leading props map; remaining args are children.

avatar-group clj/s

AvatarGroup — Display user profile image, initials or fallback icon (Avatar family)

https://mantine.dev/core/avatar

Polymorphic: accepts :component / :render-root.

Optional leading props map; remaining args are children.

background-image clj/s

BackgroundImage — Displays image as background

https://mantine.dev/core/background-image

Polymorphic: accepts :component / :render-root.

Props (docgen 9.5.0):

• radius MantineRadius | number (default 0) — Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem
• src string (required) — Image url

Optional leading props map; remaining args are children.

badge clj/s

Badge — Display badge, pill or tag

https://mantine.dev/core/badge

Polymorphic: accepts :component / :render-root.

Props (docgen 9.5.0):

• autoContrast boolean — If set, adjusts text color based on background color for filled variant
• children React.ReactNode — Main badge content
• circle boolean — If set, badge min-width becomes equal to its height and horizontal padding is removed
• color MantineColor (default theme.primaryColor) — Key of theme.colors or any valid CSS color
• fullWidth boolean (default false) — Determines whether Badge should take 100% of its parent width
• gradient MantineGradient (default theme.defaultGradient) — Gradient configuration used when variant=\"gradient\"
• leftSection React.ReactNode — Content displayed on the left side of the badge label
• radius MantineRadius | number (default 'xl') — Key of theme.radius or any valid CSS value to set border-radius
• rightSection React.ReactNode — Content displayed on the right side of the badge label
• size MantineSize (default 'md') — Controls font-size, height and horizontal padding

Optional leading props map; remaining args are children.

blockquote clj/s

Blockquote — Blockquote with optional cite

https://mantine.dev/core/blockquote

Props (docgen 9.5.0):

• cite React.ReactNode — Reference to a cited quote
• color MantineColor (default theme.primaryColor) — Key of theme.colors or any valid CSS color
• icon React.ReactNode — Blockquote icon, displayed at the top left side
• iconSize string | number (default 40) — Controls icon width and height, numbers are converted to rem
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius
• textWrap "wrap" | "nowrap" | "balance" | "pretty" | "stable" — Controls text-wrap CSS property

Optional leading props map; remaining args are children.

box clj/s

Box — polymorphic layout primitive (accepts :component / :render-root). Optional leading props map; remaining args are children.

breadcrumbs clj/s

Breadcrumbs — Separates list of react nodes with given separator

https://mantine.dev/core/breadcrumbs

Props (docgen 9.5.0):

• children React.ReactNode (required) — React nodes that should be separated with separator
• separator React.ReactNode (default '/') — Separator between children
• separatorMargin MantineSpacing (default 'xs') — Controls spacing between separator and breadcrumb

Optional leading props map; remaining args are children.

burger clj/s

Burger — Open/close navigation button

https://mantine.dev/core/burger

Props (docgen 9.5.0):

• color MantineColor — Key of theme.colors of any valid CSS value, by default theme.white in dark color scheme and theme.black in light
• lineSize string | number — Controls height of lines, by default calculated based on size prop
• opened boolean (default false) — State of the burger, when true burger is transformed into X
• size MantineSize | number (default 'md') — Controls burger width and height, numbers are converted to rem
• transitionDuration number (default 300) — transition-duration property value in ms
• transitionTimingFunction string (default 'ease') — transition-timing-function property value

Optional leading props map; remaining args are children.

button clj/s

Button — Button component to render button or link

https://mantine.dev/core/button

Props (docgen 9.5.0):

• autoContrast boolean — If set, adjusts text color based on background color for filled variant
• children React.ReactNode — Button content
• color MantineColor (default theme.primaryColor) — Key of theme.colors or any valid CSS color
• disabled boolean — Sets disabled attribute, applies disabled styles
• fullWidth boolean (default false) — Sets width: 100%
• gradient MantineGradient (default theme.defaultGradient) — Gradient configuration used for variant="gradient"
• justify JustifyContent (default 'center') — Sets justify-content of inner element, can be used to change distribution of sections and label
• leftSection React.ReactNode — Content on the left side of the button label
• loaderProps LoaderProps — Props added to the Loader component (only visible when loading prop is set)
• loading boolean — If set, the Loader component is displayed over the button
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius
• rightSection React.ReactNode — Content on the right side of the button label
• size ButtonSize (default 'sm') — Controls button height, font-size and horizontal padding

Optional leading props map; remaining args are children.

button-group clj/s

ButtonGroup — Button component to render button or link (Button family)

https://mantine.dev/core/button

Props (docgen 9.5.0):

• borderWidth string | number (default 1) — border-width of the child Button components. Numbers are converted to rem.
• children React.ReactNode — Button components
• orientation "horizontal" | "vertical" (default horizontal) — Orientation of the group

Optional leading props map; remaining args are children.

button-group-section clj/s

ButtonGroupSection — Button component to render button or link (Button family)

https://mantine.dev/core/button

Props (docgen 9.5.0):

• autoContrast boolean — If set, adjusts text color based on background color for filled variant
• gradient MantineGradient (default theme.defaultGradient) — Gradient configuration used when variant="gradient"
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius
• size ButtonSize (default 'sm') — Controls section height, font-size and horizontal padding

Optional leading props map; remaining args are children.

card clj/s

Card — Card with sections

https://mantine.dev/core/card

Props (docgen 9.5.0):

• children React.ReactNode — Card content
• orientation "horizontal" | "vertical" (default 'vertical') — Card orientation
• padding MantineSpacing (default 'md') — Key of theme.spacing or any valid CSS value to set padding
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem
• shadow MantineShadow — Key of theme.shadows or any valid CSS value to set box-shadow
• withBorder boolean — Adds border to the card

Optional leading props map; remaining args are children.

card-section clj/s

CardSection — Card with sections (Card family)

https://mantine.dev/core/card

Props (docgen 9.5.0):

• inheritPadding boolean — If set, the section inherits padding from the parent Card
• withBorder boolean — Adds border to the root element

Optional leading props map; remaining args are children.

cascader clj/s

Cascader — Select a path from hierarchical data with cascading columns

https://mantine.dev/core/cascader

Props (docgen 9.5.0):

• allowDeselect boolean (default true) — If set, the selected value can be deselected by selecting it again
• changeOnSelect boolean (default false) — If set, any intermediate option can be selected, not only leaf options
• checkIconPosition "left" | "right" (default 'right') — Position of the check icon relative to the option label
• chevronColor MantineColor — Controls the default chevron color
• clearButtonProps InputClearButtonProps — Props passed down to the clear button
• clearSectionMode ClearSectionMode (default 'both') — Determines how the clear button and rightSection are rendered
• clearable boolean (default false) — If set, the clear button is displayed when a value is selected
• closeOnSelect boolean — Determines whether the dropdown should be closed when a value is selected, defaults to !allowDeselect
• columnWidth string | number — Width of each column
• comboboxProps Record<string, any> — Props passed down to the underlying Combobox component
• data CascaderOption[] (required) — Hierarchical options data
• defaultDropdownOpened boolean — Uncontrolled dropdown opened state
• defaultSearchValue string — Uncontrolled search value
• defaultValue string[] | null — Uncontrolled selected path from root to node
• description React.ReactNode — Contents of Input.Description component. If not set, description is not displayed.
• descriptionProps InputDescriptionProps — Props passed down to the Input.Description component
• disabled boolean — Sets disabled attribute on the input element
• dropdownOpened boolean — Controlled dropdown opened state
• error React.ReactNode — Contents of Input.Error component. If not set, error is not displayed.
• errorProps InputErrorProps — Props passed down to the Input.Error component
• expandTrigger "hover" | "click" (default 'click') — Determines how the next column is opened
• filter (query: string, options: CascaderOption[]) => boolean — Custom search filter, matched against the full option path
• formatValue CascaderFormatValue — A function to format the selected path displayed in the input, should return a string
• hiddenInputProps React.ComponentProps<"input"> — Props passed down to the hidden input
• inputContainer (children: ReactNode) => ReactNode (default React.Fragment) — Render function to wrap the input element. Useful for adding tooltips, popovers, or other wrappers around the input.
• inputSize string — HTML size attribute for the input element (number of visible characters)
• inputWrapperOrder ("input" | "label" | "description" | "error")[] (default ['label', 'description', 'input', 'error']) — Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.
• label React.ReactNode — Contents of Input.Label component. If not set, label is not displayed.
• labelProps InputLabelProps — Props passed down to the Input.Label component
• leftSection React.ReactNode — Content section displayed on the left side of the input
• leftSectionPointerEvents React.CSSProperties["pointerEvents"] (default 'none') — Sets pointer-events styles on the leftSection element. Use 'all' when section contains interactive elements (buttons, links).
• leftSectionProps React.ComponentProps<"div"> — Props passed down to the leftSection element
• leftSectionWidth React.CSSProperties["width"] — Left section width, used to set width of the section and input padding-left, by default equals to the input height
• loading boolean (default false) — Displays loading indicator in the left or right section
• loadingPosition "left" | "right" (default 'right') — Position of the loading indicator
• maxDisplayedLevels number (default 3) — Maximum number of columns (levels) displayed next to each other, deeper levels replace earlier ones
• maxDropdownHeight string | number (default 260) — Max height of a column before it becomes scrollable
• nextLevelsControlLabel string (default 'Show next levels') — aria-label and title of the control that reveals levels hidden after the visible ones by maxDisplayedLevels
• nothingFoundMessage React.ReactNode — Message displayed when there are no options or search results
• onChange (value: string[] | null, options: CascaderOption[]) => void — Called when the selected path changes with the path and the resolved option chain
• onClear () => void — Called when the clear button is clicked
• onDropdownClose () => void — Called when the dropdown closes
• onDropdownOpen () => void — Called when the dropdown opens
• onSearchChange (value: string) => void — Called when the search value changes
• openOnFocus boolean (default true) — Opens the dropdown when the input is focused in searchable mode
• pointer boolean (default false) — Determines whether the input should have cursor: pointer style. Use when input acts as a button-like trigger (e.g., component="button" for Select/DatePicker).
• previousLevelsControlLabel string (default 'Show previous levels') — aria-label and title of the control that reveals levels hidden before the visible ones by maxDisplayedLevels
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem
• renderOption (option: CascaderOption, level: number) => ReactNode — Custom rendering of an option in columns
• renderSearchOption (query: string, options: CascaderOption[]) => ReactNode — Custom rendering of a search result row
• required boolean (default false) — Adds required attribute to the input and a red asterisk on the right side of label
• rightSection React.ReactNode — Content section displayed on the right side of the input
• rightSectionPointerEvents React.CSSProperties["pointerEvents"] (default 'none') — Sets pointer-events styles on the rightSection element. Use 'all' when section contains interactive elements (buttons, links).
• rightSectionProps React.ComponentProps<"div"> — Props passed down to the rightSection element
• rightSectionWidth React.CSSProperties["width"] — Right section width, used to set width of the section and input padding-right, by default equals to the input height
• scrollAreaProps ScrollAreaProps — Props passed down to the dropdown ScrollArea
• searchValue string — Controlled search value
• searchable boolean (default false) — If set, options can be searched by their flattened paths
• separator React.ReactNode (default '/') — Path separator displayed in the input and search results
• size MantineSize (default 'sm') — Controls input height, horizontal padding, and font-size
• success React.ReactNode — Contents of Input.Success component. If not set, success is not displayed.
• successProps InputSuccessProps & DataAttributes — Props passed down to the Input.Success component
• value string[] | null — Controlled selected path from root to node
• withAsterisk boolean (default false) — If set, the required asterisk is displayed next to the label. Overrides required prop. Does not add required attribute to the input.
• withCheckIcon boolean (default true) — If set, the check icon is displayed on the selected option
• withColumns boolean (default true) — Renders the dropdown as cascading columns. When false, options are rendered as a flat list of paths, the same way as search results (useful for narrow/mobile layouts)
• withErrorStyles boolean (default true) — Determines whether the input should have red border and red text color when the error prop is set
• withSuccessStyles boolean (default true) — Determines whether the input should have green border when the success prop is set
• wrapperProps WrapperProps — Props passed down to the root element

Optional leading props map; remaining args are children.

center clj/s

Center — Centers content vertically and horizontally

https://mantine.dev/core/center

Polymorphic: accepts :component / :render-root.

Props (docgen 9.5.0):

• children React.ReactNode — Content to center
• inline boolean — If set, inline-flex is used instead of flex

Optional leading props map; remaining args are children.

checkbox clj/s

Checkbox — Capture boolean input from user

https://mantine.dev/core/checkbox

Props (docgen 9.5.0):

• autoContrast boolean — If set, adjusts icon color based on background color for filled variant
• color MantineColor (default theme.primaryColor) — Key of theme.colors or any valid CSS color to set input background color in checked state
• description React.ReactNode — Description below the label
• error React.ReactNode — Error message below the label
• icon CheckboxIconComponent — Icon for checked or indeterminate state
• iconColor MantineColor — Key of theme.colors or any valid CSS color to set icon color. By default, depends on theme.autoContrast.
• id string — Unique input id
• indeterminate boolean — Indeterminate state of the checkbox. If set, checked prop is dismissed.
• label React.ReactNode — label associated with the checkbox
• labelPosition "left" | "right" (default 'right') — Position of the label relative to the input
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius
• rootRef Ref<HTMLDivElement> — Root element ref
• size MantineSize (default 'sm') — Controls size of the component
• withErrorStyles boolean (default true) — If set, applies error styles to the checkbox when error prop is set
• wrapperProps React.ComponentProps<"div"> — Props passed down to the root element

Optional leading props map; remaining args are children.

checkbox-card clj/s

CheckboxCard — Capture boolean input from user (Checkbox family)

https://mantine.dev/core/checkbox

Props (docgen 9.5.0):

• checked boolean — Controlled component value
• defaultChecked boolean — Uncontrolled component default value
• onChange (checked: boolean) => void — Called when value changes
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem
• value string — Value of the checkbox, used with Checkbox.Group
• withBorder boolean — Adds border to the root element

Optional leading props map; remaining args are children.

checkbox-card-context clj/s

CheckboxCardContext

Optional leading props map; remaining args are children.

checkbox-group clj/s

CheckboxGroup — Capture boolean input from user (Checkbox family)

https://mantine.dev/core/checkbox

Optional leading props map; remaining args are children.

checkbox-indicator clj/s

CheckboxIndicator — Capture boolean input from user (Checkbox family)

https://mantine.dev/core/checkbox

Props (docgen 9.5.0):

• autoContrast boolean — If set, adjusts icon color based on background color for filled variant
• checked boolean — Determines whether the component should have checked styles
• color MantineColor (default theme.primaryColor) — Key of theme.colors or any valid CSS color to set input background color in checked state
• disabled boolean — Indicates disabled state
• icon CheckboxIconComponent — Icon for checked or indeterminate state
• iconColor MantineColor — Key of theme.colors or any valid CSS color to set icon color, by default value depends on theme.autoContrast
• indeterminate boolean — Indeterminate state of the checkbox. If set, checked prop is ignored.
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius
• size MantineSize | number (default 'sm') — Controls size of the component

Optional leading props map; remaining args are children.

chip clj/s

Chip — Pick one or multiple values with inline controls

https://mantine.dev/core/chip

Props (docgen 9.5.0):

• autoContrast boolean — If set, adjusts text color based on the chip background color for filled variant
• checked boolean — Controlled checked state
• children React.ReactNode (required) — label element associated with the input
• color MantineColor (default theme.primaryColor) — Key of theme.colors or any valid CSS color.
• defaultChecked boolean — Uncontrolled checked state initial value
• icon React.ReactNode — Any element or component to replace the default icon
• id string — Unique input id, generated randomly if not provided
• onChange (checked: boolean) => void — Calls when checked state changes
• radius MantineRadius | number (default 'xl') — Key of theme.radius or any valid CSS value to set border-radius
• rootRef Ref<HTMLDivElement> — Assigns ref of the root element
• size MantineSize (default 'sm') — Controls various properties related to the component size
• type "checkbox" | "radio" (default 'checkbox') — Chip input type
• wrapperProps React.ComponentProps<"div"> — Props passed down to the root element

Optional leading props map; remaining args are children.

chip-group clj/s

ChipGroup — Pick one or multiple values with inline controls (Chip family)

https://mantine.dev/core/chip

Props (docgen 9.5.0):

• children React.ReactNode — Chip components and any other elements
• defaultValue Primitive | Value[] | null — Uncontrolled component initial value
• multiple boolean — If set, multiple values can be selected
• onChange (value: Multiple extends true ? Value[] : Value) => void — Called when value changes. If multiple prop is set, called with an array of selected values. If not, called with a string value of selected chip.
• value Primitive | Value[] | null — Controlled component value

Optional leading props map; remaining args are children.

chip-group-context clj/s

ChipGroupContext

Optional leading props map; remaining args are children.

close-button clj/s

CloseButton — Button with close icon

https://mantine.dev/core/close-button

Polymorphic: accepts :component / :render-root.

Props (docgen 9.5.0):

• children React.ReactNode — Content rendered inside the button. For example VisuallyHidden with label for screen readers.
• disabled boolean — Sets disabled attribute, assigns disabled styles
• icon React.ReactNode — React node to replace the default close icon. If set, iconSize prop is ignored.
• iconSize string | number (default 70%) — X icon width and height
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius. Numbers are converted to rem.
• size MantineSize | number (default 'md') — Controls width and height of the button. Numbers are converted to rem.

Optional leading props map; remaining args are children.

code clj/s

Code — Inline and block code

https://mantine.dev/core/code

Props (docgen 9.5.0):

• block boolean — If set, code is rendered in pre
• color MantineColor — Key of theme.colors or any valid CSS color, controls background-color of the code. By default, calculated based on the color scheme.

Optional leading props map; remaining args are children.

collapse clj/s

Collapse — Animate presence with slide down/up transition

https://mantine.dev/core/collapse

Props (docgen 9.5.0):

• animateOpacity boolean (default true) — Determines whether the opacity is animated
• expanded boolean (required) — Expanded state
• keepMounted boolean (default true) — If set, the element is kept in the DOM when collapsed. When true, React 19 Activity is used to preserve state while collapsed. When false, the element is unmounted after the exit animation.
• keepMountedMode "activity" | "display-none" (default 'activity') — Controls how the element is hidden when keepMounted is set: 'activity' – hidden with React 19 Activity component, 'display-none' – hidden with display: none styles
• onTransitionEnd () => void — Called when the transition ends
• onTransitionStart () => void — Called when transition starts
• orientation "horizontal" | "vertical" (default 'vertical') — Collapse orientation
• transitionDuration number (default 200) — Transition duration in ms
• transitionTimingFunction string (default ease) — Transition timing function

Optional leading props map; remaining args are children.

color-input clj/s

ColorInput — Capture color from user

https://mantine.dev/core/color-input

Props (docgen 9.5.0):

• closeOnColorSwatchClick boolean (default false) — If set, the dropdown is closed when one of the color swatches is clicked
• defaultValue string — Uncontrolled component default value
• description React.ReactNode — Contents of Input.Description component. If not set, description is not displayed.
• descriptionProps InputDescriptionProps — Props passed down to the Input.Description component
• disabled boolean — Sets disabled attribute on the input element
• disallowInput boolean — If input is not allowed, the user can only pick value with color picker and swatches
• error React.ReactNode — Contents of Input.Error component. If not set, error is not displayed.
• errorProps InputErrorProps — Props passed down to the Input.Error component
• eyeDropperButtonProps Record<string, any> — Props passed down to the eye dropper button
• eyeDropperIcon React.ReactNode — An icon to replace the default eye dropper icon
• fixOnBlur boolean (default true) — If set, the input value resets to the last known valid value when the input loses focus
• format 'hex' | 'hexa' | 'rgba' | 'rgb' | 'hsl' | 'hsla' (default 'hex') — Color format. hexa, rgba, hsla values render alpha channel slider
• inputContainer (children: ReactNode) => ReactNode (default React.Fragment) — Render function to wrap the input element. Useful for adding tooltips, popovers, or other wrappers around the input.
• inputSize string — HTML size attribute for the input element (number of visible characters)
• inputWrapperOrder ("input" | "label" | "description" | "error")[] (default ['label', 'description', 'input', 'error']) — Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.
• label React.ReactNode — Contents of Input.Label component. If not set, label is not displayed.
• labelProps InputLabelProps — Props passed down to the Input.Label component
• leftSection React.ReactNode — Content section displayed on the left side of the input
• leftSectionPointerEvents React.CSSProperties["pointerEvents"] (default 'none') — Sets pointer-events styles on the leftSection element. Use 'all' when section contains interactive elements (buttons, links).
• leftSectionProps React.ComponentProps<"div"> — Props passed down to the leftSection element
• leftSectionWidth React.CSSProperties["width"] — Left section width, used to set width of the section and input padding-left, by default equals to the input height
• loading boolean (default false) — Displays loading indicator in the left or right section
• loadingPosition "left" | "right" (default 'right') — Position of the loading indicator
• onChange (value: string) => void — Called when value changes
• onChangeEnd (value: string) => void — Called when the user stops dragging one of the sliders or changes the value with keyboard
• pointer boolean (default false) — Determines whether the input should have cursor: pointer style. Use when input acts as a button-like trigger (e.g., component="button" for Select/DatePicker).
• popoverProps PopoverProps — Props passed down to the Popover component
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem
• required boolean (default false) — Adds required attribute to the input and a red asterisk on the right side of label
• rightSection React.ReactNode — Content section displayed on the right side of the input
• rightSectionPointerEvents React.CSSProperties["pointerEvents"] (default 'none') — Sets pointer-events styles on the rightSection element. Use 'all' when section contains interactive elements (buttons, links).
• rightSectionProps React.ComponentProps<"div"> — Props passed down to the rightSection element
• rightSectionWidth React.CSSProperties["width"] — Right section width, used to set width of the section and input padding-right, by default equals to the input height
• size MantineSize (default 'sm') — Controls input height, horizontal padding, and font-size
• success React.ReactNode — Contents of Input.Success component. If not set, success is not displayed.
• successProps InputSuccessProps & DataAttributes — Props passed down to the Input.Success component
• swatches string[] — A list of colors used to display swatches list below the color picker
• swatchesPerRow number (default 7) — Number of swatches per row
• value string — Controlled component value
• withAsterisk boolean (default false) — If set, the required asterisk is displayed next to the label. Overrides required prop. Does not add required attribute to the input.
• withErrorStyles boolean (default true) — Determines whether the input should have red border and red text color when the error prop is set
• withEyeDropper boolean (default true) — If set, the eye dropper button is displayed in the right section
• withPicker boolean (default true) — If false, the component displays only swatches
• withPreview boolean (default true) — If set, the preview color swatch is displayed in the left section of the input
• withSuccessStyles boolean (default true) — Determines whether the input should have green border when the success prop is set
• wrapperProps WrapperProps — Props passed down to the root element

Optional leading props map; remaining args are children.

color-picker clj/s

ColorPicker — Pick colors in hex(a), rgb(a), hsl(a) and hsv(a) formats

https://mantine.dev/core/color-picker

Props (docgen 9.5.0):

• alphaLabel string — Alpha slider aria-label
• defaultValue string — Uncontrolled component default value
• focusable boolean (default true) — If set, interactive elements (sliders thumbs and swatches) are focusable with keyboard
• format 'hex' | 'hexa' | 'rgba' | 'rgb' | 'hsl' | 'hsla' (default 'hex') — Color format. hexa, rgba, hsla values render alpha channel slider
• fullWidth boolean (default false) — If set, the component takes 100% width of its container
• hiddenInputProps ClassAttributes<HTMLInputElement> & InputHTMLAttributes<HTMLInputElement> & DataAttributes — Props spread to the hidden input
• hueLabel string — Hue slider aria-label
• name string — Hidden input name attribute, if not set, the input will not be rendered
• onChange (value: string) => void — Called when value changes
• onChangeEnd (value: string) => void — Called when the user stops dragging one of the sliders or changes the value with keyboard
• onColorSwatchClick (color: string) => void — Called when one of the color swatches is clicked
• saturationLabel string — Saturation slider aria-label
• size MantineSize (default 'md') — Component size
• swatches string[] — A list of colors used to display swatches list below the color picker
• swatchesPerRow number (default 7) — Number of swatches per row
• value string — Controlled component value
• withPicker boolean (default true) — If false, the component displays only swatches

Optional leading props map; remaining args are children.

color-swatch clj/s

ColorSwatch — Displays color

https://mantine.dev/core/color-swatch

Polymorphic: accepts :component / :render-root.

Props (docgen 9.5.0):

• children React.ReactNode — Children inside the swatch
• color string (required) — Valid CSS color to display
• radius MantineRadius | number (default 1000) — Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem.
• size React.CSSProperties["width"] (default 28) — Swatch width and height, any valid CSS value, numbers are converted to rem.
• withShadow boolean (default true) — If set, the swatch has inner box-shadow

Optional leading props map; remaining args are children.

combobox clj/s

Combobox — Create custom select, autocomplete or multiselect inputs

https://mantine.dev/core/combobox

Props (docgen 9.5.0):

• arrowOffset number (default 5) — Arrow offset in px
• arrowPosition 'center' | 'side' — Arrow position
• arrowRadius number (default 0) — Arrow border-radius in px
• arrowSize number (default 7) — Arrow size in px
• children React.ReactNode — Combobox content
• disabled boolean — If set, popover dropdown will not be rendered
• dropdownPadding Padding<string | number> (default 4) — Controls padding of the dropdown
• floatingHeight "viewport" — If set to 'viewport', the dropdown grows to fill the available vertical space in the viewport. Disables the flip middleware.
• floatingStrategy FloatingStrategy (default 'absolute') — Changes floating ui position strategy
• hideDetached boolean (default true) — If set, the dropdown is hidden when the element is hidden with styles or not visible on the screen
• keepMounted boolean — If set, the dropdown is not unmounted from the DOM when hidden. display: none styles are added instead.
• keepMountedMode "activity" | "display-none" (default 'activity') — Controls how the dropdown is hidden when keepMounted is set: 'activity' – hidden with React 19 Activity component, 'display-none' – hidden with display: none styles
• middlewares PopoverMiddlewares (default { flip: true, shift: true, inline: false }) — Floating ui middlewares to configure position handling
• offset number | FloatingAxesOffsets (default 8) — Offset of the dropdown element
• onClose () => void — Called when dropdown closes
• onDismiss () => void — Called when the popover is dismissed by clicking outside or by pressing escape
• onEnterTransitionEnd () => void — Called when enter transition ends
• onExitTransitionEnd () => void — Called when exit transition ends
• onOpen () => void — Called when dropdown opens
• onOptionSubmit (value: string, optionProps: ComboboxOptionProps) => void — Called when item is selected with the Enter key or by clicking it
• onPositionChange (position: FloatingPosition) => void — Called when dropdown position changes
• overlayProps OverlayProps & ElementProps<"div"> — Props passed down to Overlay component
• portalProps BasePortalProps — Props to pass down to the Portal when withinPortal is true
• position FloatingPosition (default 'bottom') — Dropdown position relative to the target element
• preventPositionChangeWhenVisible boolean (default true) — If true, the dropdown picks its side on open (flip runs once, preferring the position prop) and then never changes side — scrolling, resizing, and content size changes will not flip the dropdown. The side is recalculated fresh on the next open. Does not affect the shift middleware. Set to false to keep flip active and allow the dropdown to re-flip on every change.
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius
• readOnly boolean — Determines whether the Combobox value can be changed
• resetSelectionOnOptionHover boolean (default false) — Determines whether selection should be reset when option is hovered
• returnFocus boolean (default false) — Determines whether focus should be automatically returned to control when dropdown closes
• shadow MantineShadow — Key of theme.shadows or any other valid CSS box-shadow value
• size MantineSize (default 'sm') — Controls items font-size and padding
• store ComboboxStore — Combobox store, can be used to control combobox state
• transitionProps TransitionProps (default { duration: 150, transition: 'fade' }) — Props passed down to the Transition component. Use to configure duration and animation type.
• width PopoverWidth (default 'max-content') — Dropdown width, or 'target' to make dropdown width the same as target element
• withArrow boolean (default false) — Determines whether component should have an arrow
• withOverlay boolean (default false) — Determines whether the overlay should be displayed when the dropdown is opened
• withinPortal boolean (default true) — Determines whether dropdown should be rendered within the Portal
• zIndex string | number (default 300) — Dropdown z-index

Optional leading props map; remaining args are children.

combobox-chevron clj/s

Combobox.Chevron — compound part of Combobox (docgen omits it). Optional leading props map; remaining args are children.

combobox-clear-button clj/s

Combobox.ClearButton — compound part of Combobox (docgen omits it). Optional leading props map; remaining args are children.

combobox-dropdown clj/s

ComboboxDropdown — Create custom select, autocomplete or multiselect inputs (Combobox family)

https://mantine.dev/core/combobox

Props (docgen 9.5.0):

• hidden boolean — Determines whether the dropdown should be hidden, for example, when there are no options to display

Optional leading props map; remaining args are children.

combobox-dropdown-target clj/s

ComboboxDropdownTarget — Create custom select, autocomplete or multiselect inputs (Combobox family)

https://mantine.dev/core/combobox

Props (docgen 9.5.0):

• children React.ReactNode (required) — Target element
• refProp string — Key of the prop that should be used to access element ref

Optional leading props map; remaining args are children.

combobox-empty clj/s

Combobox.Empty — compound part of Combobox (docgen omits it). Optional leading props map; remaining args are children.

combobox-events-target clj/s

ComboboxEventsTarget — Create custom select, autocomplete or multiselect inputs (Combobox family)

https://mantine.dev/core/combobox

Props (docgen 9.5.0):

• autoComplete string — Input autocomplete attribute
• children React.ReactNode (required) — Target element
• refProp string — Key of the prop is used to access element ref
• targetType "button" | "input" (default input) — Determines which events should be handled by the target element. button target type handles Space and Enter keys to toggle dropdown opened state.
• withAriaAttributes boolean (default true) — If set, the target has aria- attributes
• withExpandedAttribute boolean (default false) — If set, the target has aria-expanded attribute
• withKeyboardNavigation boolean (default true) — If set, the component responds to the keyboard events

Optional leading props map; remaining args are children.

combobox-footer clj/s

Combobox.Footer — compound part of Combobox (docgen omits it). Optional leading props map; remaining args are children.

combobox-group clj/s

ComboboxGroup — Create custom select, autocomplete or multiselect inputs (Combobox family)

https://mantine.dev/core/combobox

Props (docgen 9.5.0):

• label React.ReactNode — Group label

Optional leading props map; remaining args are children.

combobox-header clj/s

Combobox.Header — compound part of Combobox (docgen omits it). Optional leading props map; remaining args are children.

combobox-hidden-input clj/s

Combobox.HiddenInput — compound part of Combobox (docgen omits it). Optional leading props map; remaining args are children.

combobox-option clj/s

ComboboxOption — Create custom select, autocomplete or multiselect inputs (Combobox family)

https://mantine.dev/core/combobox

Props (docgen 9.5.0):

• active boolean — Current active state
• disabled boolean — Disabled state
• selected boolean — Current selected state
• value Primitive (required) — Option value

Optional leading props map; remaining args are children.

combobox-options clj/s

Combobox.Options — compound part of Combobox (docgen omits it). Optional leading props map; remaining args are children.

combobox-popover clj/s

ComboboxPopover — Add combobox dropdown to any button element

https://mantine.dev/core/combobox-popover

Props (docgen 9.5.0):

• allowDeselect boolean (default true) — Allows deselecting the selected option by clicking it (only for single mode)
• checkIconPosition "left" | "right" (default 'left') — Position of the check icon relative to the option label
• children React.ReactNode — Content of the component
• comboboxProps ComboboxProps — Props passed down to Combobox component
• data ComboboxData<Value> — Data used to generate options
• defaultDropdownOpened boolean — Uncontrolled dropdown initial opened state
• defaultSearchValue string — Default search value
• defaultValue Primitive | Value[] | null — Uncontrolled component default value
• dropdownOpened boolean — Controlled dropdown opened state
• filter OptionsFilter<Value> — Function based on which items are filtered and sorted
• form string — Hidden input form for form submission
• hiddenInputProps React.ComponentProps<"input"> — Props passed down to the hidden input
• hiddenInputValuesDivider string (default ',') — Divider used to separate values in the hidden input value attribute
• limit number (default Infinity) — Maximum number of options displayed at a time
• maxDropdownHeight string | number (default 250) — max-height of the dropdown
• multiple boolean — If set, multiple items can be selected at the same time
• name string — Hidden input name for form submission
• nothingFoundMessage React.ReactNode — Message displayed when no options match the search query or when there is no data
• onChange (value: ComboboxPopoverValue<Multiple, Value>) => void — Called when value changes
• onDropdownClose () => void — Called when dropdown closes
• onDropdownOpen () => void — Called when dropdown opens
• onOptionSubmit (value: Value) => void — Called when option is submitted from dropdown with mouse click or Enter key
• onSearchChange (value: string) => void — Called when search changes
• renderOption (item: ComboboxLikeRenderOptionInput<ComboboxItem<string>>) => ReactNode — A function to render content of the option, replaces the default content of the option
• scrollAreaProps ScrollAreaProps — Props passed down to the underlying ScrollArea component in the dropdown
• searchValue string — Controlled search value
• searchable boolean (default false) — Allows searching through options
• selectFirstOptionOnDropdownOpen boolean (default false) — If set, the first option is selected when dropdown opens
• value Primitive | Value[] | null — Controlled component value
• withAlignedLabels boolean (default false) — Aligns unchecked labels with the checked one
• withCheckIcon boolean (default true) — Displays check icon near the selected option label
• withScrollArea boolean (default true) — Determines whether the options should be wrapped with ScrollArea.AutoSize

Optional leading props map; remaining args are children.

combobox-popover-target clj/s

ComboboxPopover.Target — compound part of ComboboxPopover (docgen omits it). Optional leading props map; remaining args are children.

combobox-search clj/s

Combobox.Search — compound part of Combobox (docgen omits it). Optional leading props map; remaining args are children.

combobox-target clj/s

ComboboxTarget — Create custom select, autocomplete or multiselect inputs (Combobox family)

https://mantine.dev/core/combobox

Props (docgen 9.5.0):

• autoComplete string — Input autocomplete attribute
• children React.ReactNode (required) — Target element
• refProp string — Key of the prop that is used to access element ref
• targetType "button" | "input" (default input) — Determines which events is handled by the target element. button target type handles Space and Enter keys to toggle dropdown opened state.
• withAriaAttributes boolean (default true) — If set, the target has aria- attributes
• withExpandedAttribute boolean (default false) — If set, the target has aria-expanded attribute
• withKeyboardNavigation boolean (default true) — If set, the component responds to keyboard events

Optional leading props map; remaining args are children.

container clj/s

Container — Center content with padding and max-width

https://mantine.dev/core/container

Props (docgen 9.5.0):

• fluid boolean (default false) — If set, the container takes 100% width of its parent and size prop is ignored.
• size MantineSize | number (default 'md') — max-width of the container, value is not responsive – it is the same for all screen sizes. Numbers are converted to rem. Ignored when fluid prop is set.
• strategy "block" | "grid" (default 'block') — Centering strategy

Optional leading props map; remaining args are children.

copy-button clj/s

CopyButton — Copies given text to clipboard

https://mantine.dev/core/copy-button

Props (docgen 9.5.0):

• children (payload: { copied: boolean; copy: () => void; }) => ReactNode (required) — Children callback, provides current status and copy function as an argument
• timeout number (default 1000) — Copied status timeout in ms
• value string (required) — Value that is copied to the clipboard when the button is clicked

Optional leading props map; remaining args are children.

create-theme clj/s

(create-theme theme)

Build a Mantine theme object from a Clojure map.

Wraps clj->js, so theme keys are CAMELCASE-ONLY: clj->js does NOT camelize kebab-case, so write :fontFamily / :primaryColor / :defaultRadius (not :font-family). Freeform nested maps (:colors, :other) pass straight through — their keys are user data, not Mantine prop names.

data-list clj/s

DataList — Display label-value pairs as a description list

https://mantine.dev/core/data-list

Props (docgen 9.5.0):

• children React.ReactNode — DataList.Item components
• gap MantineSpacing (default 'sm') — Key of theme.spacing or any valid CSS value to set gap between items
• labelWidth MinWidth<string | number> (default '120px') — Controls min-width of the label (dt) element, any valid CSS value
• orientation "horizontal" | "vertical" (default 'horizontal') — Controls arrangement of label and value within each item. horizontal renders label and value side by side, vertical stacks label on top of value
• size MantineSize (default 'sm') — Controls font-size and line-height
• withDivider boolean (default false) — Adds border between items

Optional leading props map; remaining args are children.

data-list-item clj/s

DataList.Item — compound part of DataList (docgen omits it). Optional leading props map; remaining args are children.

data-list-item-label clj/s

DataList.ItemLabel — compound part of DataList (docgen omits it). Optional leading props map; remaining args are children.

data-list-item-value clj/s

DataList.ItemValue — compound part of DataList (docgen omits it). Optional leading props map; remaining args are children.

dialog clj/s

Dialog — Display a fixed overlay dialog at any side of the screen

https://mantine.dev/core/dialog

Props (docgen 9.5.0):

• children React.ReactNode — Dialog content
• keepMounted boolean (default false) — If set, the component uses display: none to hide the root element instead of removing the DOM node
• onClose () => void — Called on close button click
• opened boolean (required) — Opened state
• portalProps BasePortalProps — Props passed down to the Portal component. Ignored when withinPortal is false.
• position AffixPosition (default { bottom: 0, right: 0 }) — Affix position on screen
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem
• shadow MantineShadow — Key of theme.shadows or any valid CSS value to set box-shadow
• size MantineSize | number (default 'md') — Controls width of the dialog
• transitionProps TransitionProps (default { transition: 'pop-top-right', duration: 200 }) — Props passed down to the underlying Transition component
• withBorder boolean — Adds border to the root element
• withCloseButton boolean (default false) — If set, displays the close button
• withinPortal boolean (default true) — Determines whether the component is rendered within Portal
• zIndex React.CSSProperties["zIndex"] (default 200) — Root element z-index property

Optional leading props map; remaining args are children.

direction-provider clj/s

DirectionProvider — sets LTR/RTL text direction for descendants. Optional leading props map; remaining args are children.

divider clj/s

Divider — Horizontal line with optional label or vertical divider

https://mantine.dev/core/divider

Props (docgen 9.5.0):

• color MantineColor — Key of theme.colors or any valid CSS color value
• label React.ReactNode — Divider label, visible only with orientation="horizontal"
• labelPosition "center" | "left" | "right" (default 'center') — Label position
• orientation "horizontal" | "vertical" (default 'horizontal') — Divider orientation
• size MantineSize | number (default 'xs') — Controls width/height (depends on orientation)

Optional leading props map; remaining args are children.

drawer clj/s

Drawer — Display overlay area at any side of the screen

https://mantine.dev/core/drawer

Props (docgen 9.5.0):

• children React.ReactNode — Drawer content
• closeButtonProps ModalBaseCloseButtonProps — Props passed down to the close button
• closeOnClickOutside boolean (default true) — If set, the modal/drawer is closed when user clicks on the overlay
• closeOnEscape boolean (default true) — If set, onClose is called when user presses the escape key
• id string — Id used to connect modal/drawer with body and title
• keepMounted boolean (default false) — If set modal/drawer is not unmounted from the DOM when hidden. display: none styles are applied instead.
• keepMountedMode "activity" | "display-none" (default 'activity') — Controls how the modal/drawer is hidden when keepMounted is set: 'activity' - hidden with React 19 Activity component, 'display-none' - hidden with display: none styles
• lockScroll boolean (default true) — If set, scroll is locked when opened={true}
• offset string | number (default 0) — Drawer container offset from the viewport end
• onClose () => void (required) — Called when modal/drawer is closed
• onEnterTransitionEnd () => void — Called when enter transition ends
• onExitTransitionEnd () => void — Called when exit transition ends
• opened boolean (required) — Controls opened state
• overlayProps ModalBaseOverlayProps — Props passed down to the Overlay component, can be used to configure opacity, background-color, styles and other properties
• padding MantineSpacing (default 'md') — Key of theme.spacing or any valid CSS value to set content, header and footer padding
• portalProps BasePortalProps — Props passed down to the Portal component when withinPortal is set
• position DrawerPosition (default 'left') — Side of the screen on which drawer will be opened
• radius MantineRadius | number (default 0) — Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem
• removeScrollProps RemoveScrollProps — Props passed down to react-remove-scroll, can be used to customize scroll lock behavior
• returnFocus boolean (default true) — If set, focus is returned to the last active element when onClose is called
• scrollAreaComponent ScrollAreaComponent (default 'div') — Scroll area component
• shadow MantineShadow (default 'xl') — Key of theme.shadows or any valid CSS box-shadow value
• size MantineSize | number (default 'md') — Controls width of the content area
• stackId string — Id of the drawer in the Drawer.Stack
• title React.ReactNode — Drawer title
• transitionProps TransitionProps — Props added to the Transition component that used to animate overlay and body, use to configure duration and animation type, { duration: 200, transition: 'fade-down' } by default
• trapFocus boolean (default true) — If set, focus is trapped within the modal/drawer
• withCloseButton boolean (default true) — If set, the close button is displayed
• withOverlay boolean (default true) — If set, the overlay is displayed
• withinPortal boolean (default true) — If set, the component is rendered inside Portal
• zIndex string | number (default 200) — z-index CSS property of the root element

Optional leading props map; remaining args are children.

drawer-body clj/s

Drawer.Body — compound part of Drawer (docgen omits it). Optional leading props map; remaining args are children.

drawer-close-button clj/s

Drawer.CloseButton — compound part of Drawer (docgen omits it). Optional leading props map; remaining args are children.

drawer-content clj/s

Drawer.Content — compound part of Drawer (docgen omits it). Optional leading props map; remaining args are children.

drawer-header clj/s

Drawer.Header — compound part of Drawer (docgen omits it). Optional leading props map; remaining args are children.

drawer-overlay clj/s

Drawer.Overlay — compound part of Drawer (docgen omits it). Optional leading props map; remaining args are children.

drawer-root clj/s

Drawer.Root — compound part of Drawer (docgen omits it). Optional leading props map; remaining args are children.

drawer-stack clj/s

Drawer.Stack — compound part of Drawer (docgen omits it). Optional leading props map; remaining args are children.

drawer-title clj/s

Drawer.Title — compound part of Drawer (docgen omits it). Optional leading props map; remaining args are children.

empty-state clj/s

EmptyState — Display a placeholder for no data, empty results and first-run states

https://mantine.dev/core/empty-state

Props (docgen 9.5.0):

• align "center" | "left" | "right" (default 'center') — Content alignment. center stacks the content in a centered column, left/right place the indicator on the side with the content next to it
• children React.ReactNode — EmptyState compound components, rendered after the shorthand props content
• color MantineColor (default theme.primaryColor) — Key of theme.colors or any valid CSS color, used by filled and light variants
• description React.ReactNode — Description content, rendered inside EmptyState.Description
• icon React.ReactNode — Icon or illustration, rendered inside EmptyState.Indicator
• size MantineSize (default 'md') — Controls indicator size, gap between elements and font sizes of title and description
• title React.ReactNode — Title content, rendered inside EmptyState.Title
• withIndicatorBackground boolean (default false) — If set, a neutral circular background is displayed behind the indicator. Setting variant always displays a colored background regardless of this prop

Optional leading props map; remaining args are children.

empty-state-actions clj/s

EmptyState.Actions — compound part of EmptyState (docgen omits it). Optional leading props map; remaining args are children.

empty-state-description clj/s

EmptyState.Description — compound part of EmptyState (docgen omits it). Optional leading props map; remaining args are children.

empty-state-indicator clj/s

EmptyState.Indicator — compound part of EmptyState (docgen omits it). Optional leading props map; remaining args are children.

empty-state-title clj/s

EmptyState.Title — compound part of EmptyState (docgen omits it). Optional leading props map; remaining args are children.

fieldset clj/s

Fieldset — Group related elements in a form

https://mantine.dev/core/fieldset

Props (docgen 9.5.0):

• legend React.ReactNode — Fieldset legend
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius

Optional leading props map; remaining args are children.

file-button clj/s

FileButton — Open file picker with a button click

https://mantine.dev/core/file-button

Props (docgen 9.5.0):

• accept string — File input accept attribute, for example, "image/png,image/jpeg"
• capture boolean | "user" | "environment" — Specifies that, optionally, a new file should be captured, and which device should be used to capture that new media of a type defined by the accept attribute.
• children (props: { onClick: () => void; }) => ReactNode (required) — Function that receives button props and returns react node that should be rendered
• disabled boolean — Disables file picker
• form string — Input form attribute
• inputProps React.ComponentProps<"input"> — Passes down props to the input element used to capture files
• multiple boolean — If set, user can pick more than one file
• name string — Input name attribute
• onChange (payload: Multiple extends true ? File[] : File | null) => void (required) — Called when files are picked
• resetRef Ref<() => void> — Reference of the function that should be called when value changes to null or empty array

Optional leading props map; remaining args are children.

file-input clj/s

FileInput — Capture files from user

https://mantine.dev/core/file-input

Props (docgen 9.5.0):

• accept string — File input accept attribute, for example, "image/png,image/jpeg"
• capture boolean | "user" | "environment" — Specifies that, optionally, a new file should be captured, and which device should be used to capture that new media of a type defined by the accept attribute.
• clearButtonProps React.ComponentProps<"button"> — Props passed down to the clear button
• clearSectionMode ClearSectionMode (default 'both') — Determines how the clear button and rightSection are rendered
• clearable boolean (default false) — If set, the clear button is displayed in the right section
• defaultValue File | File[] | null — Uncontrolled component default value
• description React.ReactNode — Contents of Input.Description component. If not set, description is not displayed.
• descriptionProps InputDescriptionProps — Props passed down to the Input.Description component
• disabled boolean — Sets disabled attribute on the input element
• error React.ReactNode — Contents of Input.Error component. If not set, error is not displayed.
• errorProps InputErrorProps — Props passed down to the Input.Error component
• fileInputProps React.ComponentProps<"input"> — Props passed down to the hidden input[type="file"]
• form string — Input form attribute
• inputContainer (children: ReactNode) => ReactNode (default React.Fragment) — Render function to wrap the input element. Useful for adding tooltips, popovers, or other wrappers around the input.
• inputSize string — HTML size attribute for the input element (number of visible characters)
• inputWrapperOrder ("input" | "label" | "description" | "error")[] (default ['label', 'description', 'input', 'error']) — Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.
• label React.ReactNode — Contents of Input.Label component. If not set, label is not displayed.
• labelProps InputLabelProps — Props passed down to the Input.Label component
• leftSection React.ReactNode — Content section displayed on the left side of the input
• leftSectionPointerEvents React.CSSProperties["pointerEvents"] (default 'none') — Sets pointer-events styles on the leftSection element. Use 'all' when section contains interactive elements (buttons, links).
• leftSectionProps React.ComponentProps<"div"> — Props passed down to the leftSection element
• leftSectionWidth React.CSSProperties["width"] — Left section width, used to set width of the section and input padding-left, by default equals to the input height
• loading boolean (default false) — Displays loading indicator in the left or right section
• loadingPosition "left" | "right" (default 'right') — Position of the loading indicator
• multiple boolean (default false) — If set, user can pick more than one file
• name string — Input name attribute
• onChange (payload: Multiple extends true ? File[] : File | null) => void — Called when value changes
• placeholder React.ReactNode — Input placeholder
• pointer boolean (default false) — Determines whether the input should have cursor: pointer style. Use when input acts as a button-like trigger (e.g., component="button" for Select/DatePicker).
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem
• readOnly boolean — If set, the input value cannot be changed
• required boolean (default false) — Adds required attribute to the input and a red asterisk on the right side of label
• resetRef Ref<() => void> — Reference of the function that should be called when value changes to null or empty array
• rightSection React.ReactNode — Content section displayed on the right side of the input
• rightSectionPointerEvents React.CSSProperties["pointerEvents"] (default 'none') — Sets pointer-events styles on the rightSection element. Use 'all' when section contains interactive elements (buttons, links).
• rightSectionProps React.ComponentProps<"div"> — Props passed down to the rightSection element
• rightSectionWidth React.CSSProperties["width"] — Right section width, used to set width of the section and input padding-right, by default equals to the input height
• size MantineSize (default 'sm') — Controls input height, horizontal padding, and font-size
• success React.ReactNode — Contents of Input.Success component. If not set, success is not displayed.
• successProps InputSuccessProps & DataAttributes — Props passed down to the Input.Success component
• value File | File[] | null — Controlled component value
• valueComponent FC<{ value: File | File[] | null; }> — Value renderer. By default, displays file name.
• withAsterisk boolean (default false) — If set, the required asterisk is displayed next to the label. Overrides required prop. Does not add required attribute to the input.
• withErrorStyles boolean (default true) — Determines whether the input should have red border and red text color when the error prop is set
• withSuccessStyles boolean (default true) — Determines whether the input should have green border when the success prop is set
• wrapperProps WrapperProps — Props passed down to the root element

Optional leading props map; remaining args are children.

flex clj/s

Flex — Compose elements in a flex container

https://mantine.dev/core/flex

Polymorphic: accepts :component / :render-root.

Props (docgen 9.5.0):

• align StyleProp<AlignItems> — align-items CSS property
• columnGap StyleProp<MantineSpacing> — column-gap CSS property
• direction StyleProp<FlexDirection> — flex-direction CSS property
• gap StyleProp<MantineSpacing> — gap CSS property
• justify StyleProp<JustifyContent> — justify-content CSS property
• rowGap StyleProp<MantineSpacing> — row-gap CSS property
• wrap StyleProp<FlexWrap> — flex-wrap CSS property

Optional leading props map; remaining args are children.

floating-indicator clj/s

FloatingIndicator — Display a floating indicator over a group of elements

https://mantine.dev/core/floating-indicator

Props (docgen 9.5.0):

• displayAfterTransitionEnd boolean (default false) — Controls whether the indicator should be hidden initially and displayed after the parent's transition ends. Set to true when the parent container has CSS transitions (e.g., transform: scale()) to prevent the indicator from appearing at the wrong position during the parent's animation.
• onTransitionEnd () => void — Called when the indicator finishes transitioning to a new position
• onTransitionStart () => void — Called when the indicator starts transitioning to a new position
• parent HTMLElement | null (required) — Parent container element that must have position: relative. The indicator's position is calculated relative to this element.
• target HTMLElement | null (required) — Target element over which the indicator is displayed. The indicator will be positioned to match the target's size and position.
• transitionDuration string | number (default 150) — Transition duration in ms

Optional leading props map; remaining args are children.

floating-window clj/s

FloatingWindow — Draggable floating area

https://mantine.dev/core/floating-window

Props (docgen 9.5.0):

• axis "x" | "y" — If set, restricts movement to the specified axis
• constrainOffset number — The offset from the viewport edges when constraining the element. Requires constrainToViewport: true.
• constrainToViewport boolean — If true, the element can only move within the current viewport boundaries.
• dimensions FloatingWindowDimensions — Dimensions configuration for resizable floating window
• dragHandleSelector string — Selector of an element that should be used to drag floating window. If not specified, the entire root element is used as a drag target.
• enabled boolean — If false, the element can not be dragged.
• excludeDragHandleSelector string — Selector of an element within dragHandleSelector that should be excluded from the drag event.
• initialPosition FloatingWindowPositionConfig — Initial position. If not set, calculated from element styles.
• onDragEnd () => void — Called when the drag stops
• onDragStart () => void — Called when the drag starts
• onPositionChange (pos: FloatingWindowPosition) => void — Called when the element position changes
• portalProps Omit<PortalProps, "children"> — Props passed down to Portal component
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem
• setPositionRef RefObject<SetFloatingWindowPosition | null> — Assigns ref to set position programmatically
• shadow MantineShadow — Key of theme.shadows or any valid CSS value to set box-shadow
• withBorder boolean — Adds border to the root element
• withinPortal boolean (default true) — Determines whether the window should be rendered inside Portal
• zIndex React.CSSProperties["zIndex"] (default 400) — z-index of the root element

Optional leading props map; remaining args are children.

focus-trap clj/s

FocusTrap — Trap focus at child node

https://mantine.dev/core/focus-trap

Props (docgen 9.5.0):

• active boolean (default true) — If set to false, disables focus trap
• children any (required) — Element to trap focus at, must support ref prop
• innerRef Ref<any> — Ref to combine with the focus trap ref
• refProp string (default ref) — Prop that is used to access element ref

Optional leading props map; remaining args are children.

focus-trap-initial-focus clj/s

FocusTrapInitialFocus

Optional leading props map; remaining args are children.

grid clj/s

Grid — Responsive 12 columns grid system

https://mantine.dev/core/grid

Props (docgen 9.5.0):

• align AlignItems (default stretch) — Sets align-items
• breakpoints GridBreakpoints — Breakpoints values, only used with type="container"
• columnGap StyleProp<MantineSpacing> — Column gap, overrides gap for horizontal spacing
• columns number (default 12) — Number of columns in each row
• gap StyleProp<MantineSpacing> (default 'md') — Gap between columns and rows, key of theme.spacing or any valid CSS value
• grow boolean (default false) — If set, columns in the last row expand to fill all available space
• justify JustifyContent (default flex-start) — Sets justify-content
• overflow Overflow (default 'visible') — Sets overflow CSS property on the root element
• rowGap StyleProp<MantineSpacing> — Row gap, overrides gap for vertical spacing
• type "media" | "container" (default 'media') — Type of queries used for responsive styles

Optional leading props map; remaining args are children.

grid-col clj/s

GridCol — Responsive 12 columns grid system (Grid family)

https://mantine.dev/core/grid

Props (docgen 9.5.0):

• align StyleProp<AlignSelf> — Vertical alignment of the column, controls align-self CSS property
• offset StyleProp<number> — Column start offset – number of empty columns before this column
• order StyleProp<number> — Column order, use to reorder columns at different viewport sizes
• span StyleProp<ColSpan> (default 12) — Column span

Optional leading props map; remaining args are children.

group clj/s

Group — Compose elements and components in a horizontal flex container

https://mantine.dev/core/group

Props (docgen 9.5.0):

• align AlignItems (default 'center') — Controls align-items CSS property
• gap MantineSpacing (default 'md') — Key of theme.spacing or any valid CSS value for gap, numbers are converted to rem
• grow boolean (default false) — Determines whether each child element should have flex-grow: 1 style
• justify JustifyContent (default 'flex-start') — Controls justify-content CSS property
• preventGrowOverflow boolean (default true) — Determines whether children should take only dedicated amount of space (max-width style is set based on the number of children)
• wrap FlexWrap (default 'wrap') — Controls flex-wrap CSS property

Optional leading props map; remaining args are children.

highlight clj/s

Highlight — Highlight given part of a string with mark

https://mantine.dev/core/highlight

Polymorphic: accepts :component / :render-root.

Props (docgen 9.5.0):

• accentInsensitive boolean (default true) — Perform accent-insensitive matching. When enabled cafe will match cafe, café, cafè, etc.
• caseInsensitive boolean (default true) — Perform case-insensitive matching.
• children string (required) — String in which to highlight substrings
• color string | (string & {}) (default 'yellow') — Default background color for all highlighted text. Key of theme.colors or any valid CSS color, passed to Mark component. Can be overridden per term when using HighlightTerm objects.
• gradient MantineGradient (default theme.defaultGradient) — Gradient configuration, ignored when variant is not gradient
• highlight string | string[] | HighlightTerm[] (required) — Substring(s) to highlight in children. Can be: - string: single term - string[]: multiple terms with same color - HighlightTerm[]: multiple terms with custom colors per term - Matching is case-insensitive and accent-insensitive by default, use caseInsensitive and accentInsensitive props to control this behavior - Regex special characters are automatically escaped - When multiple substrings are provided, longer matches take precedence - Empty strings and whitespace-only strings are ignored
• highlightStyles CSSProperties | ((theme: MantineTheme) => CSSProperties) — Styles applied to mark elements
• inherit boolean (default false) — Determines whether font properties should be inherited from the parent
• inline boolean (default false) — Sets line-height to 1 for centering
• lineClamp number — Number of lines after which Text will be truncated
• size MantineSize | (string & {}) (default 'md') — Controls font-size and line-height
• span boolean — Shorthand for component="span"
• textWrap "wrap" | "nowrap" | "balance" | "pretty" | "stable" — Controls text-wrap CSS property
• truncate TextTruncate — Side on which Text must be truncated, if true, text is truncated from the start
• wholeWord boolean (default false) — Only match whole words (adds word boundaries to regex). When enabled, 'the' will not match 'there'.

Optional leading props map; remaining args are children.

hover-card clj/s

HoverCard — Display popover section when target element is hovered

https://mantine.dev/core/hover-card

Props (docgen 9.5.0):

• arrowOffset number (default 5) — Arrow offset in px
• arrowPosition 'center' | 'side' — Arrow position
• arrowRadius number (default 0) — Arrow border-radius in px
• arrowSize number (default 7) — Arrow size in px
• children React.ReactNode — Popover.Target and Popover.Dropdown components
• clickOutsideEvents string[] — Events that trigger outside clicks
• closeDelay number (default 150) — Delay in ms before the dropdown closes after mouse leaves the target or dropdown. Overridden by HoverCard.Group delay if used within a group.
• closeOnClickOutside boolean (default true) — Determines whether dropdown should be closed on outside clicks
• closeOnEscape boolean (default true) — Determines whether dropdown should be closed when Escape key is pressed
• defaultOpened boolean — Initial opened state for uncontrolled component
• disabled boolean — If set, popover dropdown will not be rendered
• floatingStrategy FloatingStrategy (default 'absolute') — Changes floating ui position strategy
• hideDetached boolean (default true) — If set, the dropdown is hidden when the element is hidden with styles or not visible on the screen
• id string — Id base to create accessibility connections
• initiallyOpened boolean — Initial opened state
• keepMounted boolean — If set, the dropdown is not unmounted from the DOM when hidden. display: none styles are added instead.
• keepMountedMode "activity" | "display-none" (default 'activity') — Controls how the dropdown is hidden when keepMounted is set: 'activity' – hidden with React 19 Activity component, 'display-none' – hidden with display: none styles
• middlewares PopoverMiddlewares (default { flip: true, shift: true, inline: false }) — Floating ui middlewares to configure position handling
• offset number | FloatingAxesOffsets (default 8) — Offset of the dropdown element
• onClose () => void — Called when the dropdown is closed
• onDismiss () => void — Called when the popover is dismissed by clicking outside or by pressing escape
• onEnterTransitionEnd () => void — Called when enter transition ends
• onExitTransitionEnd () => void — Called when exit transition ends
• onOpen () => void — Called when the dropdown is opened
• onPositionChange (position: FloatingPosition) => void — Called when dropdown position changes
• openDelay number (default 0) — Delay in ms before the dropdown opens after mouse enters the target. Overridden by HoverCard.Group delay if used within a group.
• overlayProps OverlayProps & ElementProps<"div"> — Props passed down to Overlay component
• portalProps BasePortalProps — Props to pass down to the Portal when withinPortal is true
• position FloatingPosition (default 'bottom') — Dropdown position relative to the target element
• preventPositionChangeWhenVisible boolean (default true) — If true, the dropdown picks its side on open (flip runs once, preferring the position prop) and then never changes side — scrolling, resizing, and content size changes will not flip the dropdown. The side is recalculated fresh on the next open. Does not affect the shift middleware. Set to false to keep flip active and allow the dropdown to re-flip on every change.
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius
• returnFocus boolean (default false) — Determines whether focus should be automatically returned to control when dropdown closes
• shadow MantineShadow — Key of theme.shadows or any other valid CSS box-shadow value
• transitionProps TransitionProps (default { duration: 150, transition: 'fade' }) — Props passed down to the Transition component. Use to configure duration and animation type.
• trapFocus boolean (default false) — Determines whether focus should be trapped within dropdown
• width PopoverWidth (default 'max-content') — Dropdown width, or 'target' to make dropdown width the same as target element
• withArrow boolean (default false) — Determines whether component should have an arrow
• withOverlay boolean (default false) — Determines whether the overlay should be displayed when the dropdown is opened
• withRoles boolean (default true) — Determines whether dropdown and target elements should have accessible roles
• withinPortal boolean (default true) — Determines whether dropdown should be rendered within the Portal
• zIndex string | number (default 300) — Dropdown z-index

Optional leading props map; remaining args are children.

hover-card-dropdown clj/s

HoverCard.Dropdown — compound part of HoverCard (docgen omits it). Optional leading props map; remaining args are children.

hover-card-group clj/s

HoverCardGroup — Display popover section when target element is hovered (HoverCard family)

https://mantine.dev/core/hover-card

Props (docgen 9.5.0):

• children React.ReactNode (required) — HoverCard components
• closeDelay number — Close delay in ms
• openDelay number — Open delay in ms

Optional leading props map; remaining args are children.

hover-card-target clj/s

HoverCardTarget — Display popover section when target element is hovered (HoverCard family)

https://mantine.dev/core/hover-card

Props (docgen 9.5.0):

• children React.ReactNode (required) — Target element
• eventPropsWrapperName string (default undefined (event listeners passed directly to component)) — Name of the prop to wrap event listeners in. Use when the target component expects event listeners in a nested object. For example, some components expect componentProps={{ onMouseEnter, onMouseLeave }}.
• popupType string (default 'dialog') — Popup accessible type
• refProp string — Key of the prop that should be used to access element ref

Optional leading props map; remaining args are children.

hue-slider clj/s

HueSlider — Slider component for selecting hue channel in color pickers (0 – 360 degrees)

https://mantine.dev/core/hue-slider

Props (docgen 9.5.0):

• focusable boolean (default true) — If set, slider thumb can be focused
• onChange (value: number) => void — Called when value changes
• onChangeEnd (value: number) => void — Called when user stops dragging the slider or uses keyboard to change value
• onScrubEnd () => void — Called when user stops dragging the slider
• onScrubStart () => void — Called when user starts dragging the slider
• size MantineSize (default 'md') — Slider size
• value number (required) — Controlled component value

Optional leading props map; remaining args are children.

image clj/s

Image — Image with optional fallback

https://mantine.dev/core/image

Polymorphic: accepts :component / :render-root.

Props (docgen 9.5.0):

• fallbackSrc string — Image url used as a fallback if the image cannot be loaded
• fit ObjectFit (default 'cover') — Controls object-fit style
• onError (event: SyntheticEvent<HTMLImageElement, Event>) => void — Called when image fails to load
• radius MantineRadius | number (default 0) — Key of theme.radius or any valid CSS value to set border-radius
• src any — Image url

Optional leading props map; remaining args are children.

indicator clj/s

Indicator — Display element at the corner of another element

https://mantine.dev/core/indicator

Props (docgen 9.5.0):

• autoContrast boolean — If set, adjusts text color based on background color
• color MantineColor (default theme.primaryColor) — Key of theme.colors or any valid CSS color value
• disabled boolean — Hides the indicator when set
• inline boolean (default false) — Changes container display from block to inline-block, use when wrapping elements with fixed width
• label React.ReactNode — Label displayed inside the indicator, for example, notification count
• maxValue number — Maximum value to display. If label is a number greater than this value, it will be displayed as {maxValue}+
• offset number | { x: number; y: number; } (default 0) — Distance in pixels to offset the indicator from its default position, useful for elements with border-radius. Can be a number for uniform offset or an object with x and y properties for separate horizontal and vertical offsets
• position "bottom-end" | "bottom-start" | "top-end" | "top-start" | "bottom-center" | "top-center" | "middle-center" | "middle-end" | "middle-start" (default 'top-end') — Indicator position relative to the target element
• processing boolean (default false) — If set, the indicator has processing animation
• radius MantineRadius | number (default 100) — Key of theme.radius or any valid CSS value to set border-radius
• showZero boolean (default true) — Determines whether indicator with label 0 should be displayed
• size string | number (default 10) — Indicator width and height
• withBorder boolean — Adds border to the root element
• zIndex string | number (default 200) — Indicator z-index

Optional leading props map; remaining args are children.

input clj/s

Input — Base component to create custom inputs

https://mantine.dev/core/input

Polymorphic: accepts :component / :render-root.

Props (docgen 9.5.0):

• disabled boolean — Sets disabled attribute on the input element
• error React.ReactNode — Determines whether the input should have error styles and aria-invalid attribute
• id string — Input element id
• inputSize string — HTML size attribute for the input element (number of visible characters)
• leftSection React.ReactNode — Content section displayed on the left side of the input
• leftSectionPointerEvents React.CSSProperties["pointerEvents"] (default 'none') — Sets pointer-events styles on the leftSection element. Use 'all' when section contains interactive elements (buttons, links).
• leftSectionProps React.ComponentProps<"div"> — Props passed down to the leftSection element
• leftSectionWidth React.CSSProperties["width"] — Left section width, used to set width of the section and input padding-left, by default equals to the input height
• loading boolean (default false) — Displays loading indicator in the left or right section
• loadingPosition "left" | "right" (default 'right') — Position of the loading indicator
• multiline boolean (default false) — Adjusts padding and sizing calculations for multiline inputs (use with component="textarea"). Does not make the input multiline by itself.
• pointer boolean (default false) — Determines whether the input should have cursor: pointer style. Use when input acts as a button-like trigger (e.g., component="button" for Select/DatePicker).
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem
• required boolean — Sets required attribute on the input element
• rightSection React.ReactNode — Content section displayed on the right side of the input
• rightSectionPointerEvents React.CSSProperties["pointerEvents"] (default 'none') — Sets pointer-events styles on the rightSection element. Use 'all' when section contains interactive elements (buttons, links).
• rightSectionProps React.ComponentProps<"div"> — Props passed down to the rightSection element
• rightSectionWidth React.CSSProperties["width"] — Right section width, used to set width of the section and input padding-right, by default equals to the input height
• rootRef Ref<HTMLDivElement> — Root element ref
• size MantineSize (default 'sm') — Controls input height, horizontal padding, and font-size
• success React.ReactNode — Determines whether the input should have success styles
• withAria boolean (default true) — Determines whether aria- and other accessibility attributes should be added to the input. Only disable when implementing custom accessibility handling.
• withErrorStyles boolean (default true) — Determines whether the input should have red border and red text color when the error prop is set
• withSuccessStyles boolean (default true) — Determines whether the input should have green border when the success prop is set
• wrapperProps WrapperProps — Props passed down to the root element of the Input component

Optional leading props map; remaining args are children.

input-base clj/s

InputBase

Props (docgen 9.5.0):

• description React.ReactNode — Contents of Input.Description component. If not set, description is not displayed.
• descriptionProps InputDescriptionProps — Props passed down to the Input.Description component
• disabled boolean — Sets disabled attribute on the input element
• error React.ReactNode — Contents of Input.Error component. If not set, error is not displayed.
• errorProps InputErrorProps — Props passed down to the Input.Error component
• inputContainer (children: ReactNode) => ReactNode (default React.Fragment) — Render function to wrap the input element. Useful for adding tooltips, popovers, or other wrappers around the input.
• inputSize string — HTML size attribute for the input element (number of visible characters)
• inputWrapperOrder ("input" | "label" | "description" | "error")[] (default ['label', 'description', 'input', 'error']) — Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.
• label React.ReactNode — Contents of Input.Label component. If not set, label is not displayed.
• labelProps InputLabelProps — Props passed down to the Input.Label component
• leftSection React.ReactNode — Content section displayed on the left side of the input
• leftSectionPointerEvents React.CSSProperties["pointerEvents"] (default 'none') — Sets pointer-events styles on the leftSection element. Use 'all' when section contains interactive elements (buttons, links).
• leftSectionProps React.ComponentProps<"div"> — Props passed down to the leftSection element
• leftSectionWidth React.CSSProperties["width"] — Left section width, used to set width of the section and input padding-left, by default equals to the input height
• loading boolean (default false) — Displays loading indicator in the left or right section
• loadingPosition "left" | "right" (default 'right') — Position of the loading indicator
• multiline boolean (default false) — If set, the input can have multiple lines, for example when component="textarea"
• pointer boolean (default false) — Determines whether the input should have cursor: pointer style. Use when input acts as a button-like trigger (e.g., component="button" for Select/DatePicker).
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem
• required boolean (default false) — Adds required attribute to the input and a red asterisk on the right side of label
• rightSection React.ReactNode — Content section displayed on the right side of the input
• rightSectionPointerEvents React.CSSProperties["pointerEvents"] (default 'none') — Sets pointer-events styles on the rightSection element. Use 'all' when section contains interactive elements (buttons, links).
• rightSectionProps React.ComponentProps<"div"> — Props passed down to the rightSection element
• rightSectionWidth React.CSSProperties["width"] — Right section width, used to set width of the section and input padding-right, by default equals to the input height
• size MantineSize (default 'sm') — Controls input height, horizontal padding, and font-size
• success React.ReactNode — Contents of Input.Success component. If not set, success is not displayed.
• successProps InputSuccessProps & DataAttributes — Props passed down to the Input.Success component
• withAria boolean (default true) — If set, aria- and other accessibility attributes are added to the input
• withAsterisk boolean (default false) — If set, the required asterisk is displayed next to the label. Overrides required prop. Does not add required attribute to the input.
• withErrorStyles boolean (default true) — Determines whether the input should have red border and red text color when the error prop is set
• withSuccessStyles boolean (default true) — Determines whether the input should have green border when the success prop is set
• wrapperProps React.ComponentProps<"div"> — Props passed down to the root element (Input.Wrapper component)

Optional leading props map; remaining args are children.

input-clear-button clj/s

Input.ClearButton — compound part of Input (docgen omits it). Optional leading props map; remaining args are children.

input-description clj/s

InputDescription — Base component to create custom inputs (Input family)

https://mantine.dev/core/input

Polymorphic: accepts :component / :render-root.

Props (docgen 9.5.0):

• size MantineFontSize (default 'sm') — Controls description font-size

Optional leading props map; remaining args are children.

input-error clj/s

InputError — Base component to create custom inputs (Input family)

https://mantine.dev/core/input

Polymorphic: accepts :component / :render-root.

Props (docgen 9.5.0):

• size MantineFontSize (default 'sm') — Controls error font-size

Optional leading props map; remaining args are children.

input-label clj/s

InputLabel — Base component to create custom inputs (Input family)

https://mantine.dev/core/input

Polymorphic: accepts :component / :render-root.

Props (docgen 9.5.0):

• labelElement "div" | "label" (default 'label') — Root element of the label
• required boolean — If set, the required asterisk is displayed next to the label
• size MantineFontSize (default 'sm') — Controls label font-size

Optional leading props map; remaining args are children.

input-placeholder clj/s

Input.Placeholder — compound part of Input (docgen omits it). Optional leading props map; remaining args are children.

input-success clj/s

Input.Success — compound part of Input (docgen omits it). Optional leading props map; remaining args are children.

input-wrapper clj/s

InputWrapper — Base component to create custom inputs (Input family)

https://mantine.dev/core/input

Polymorphic: accepts :component / :render-root.

Props (docgen 9.5.0):

• description React.ReactNode — Contents of Input.Description component. If not set, description is not displayed.
• descriptionProps InputDescriptionProps — Props passed down to the Input.Description component
• error React.ReactNode — Contents of Input.Error component. If not set, error is not displayed.
• errorProps InputErrorProps — Props passed down to the Input.Error component
• id string — Static id used as base to generate aria- attributes, by default generates random id
• inputContainer (children: ReactNode) => ReactNode (default React.Fragment) — Render function to wrap the input element. Useful for adding tooltips, popovers, or other wrappers around the input.
• inputWrapperOrder ("input" | "label" | "description" | "error")[] (default ['label', 'description', 'input', 'error']) — Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.
• label React.ReactNode — Contents of Input.Label component. If not set, label is not displayed.
• labelElement "div" | "label" (default 'label') — Root element for the label. Use 'div' when wrapper contains multiple input elements and you need to handle htmlFor manually.
• labelProps InputLabelProps — Props passed down to the Input.Label component
• required boolean (default false) — Adds required attribute to the input and a red asterisk on the right side of label
• size MantineFontSize — Controls size of Input.Label, Input.Description and Input.Error components
• success React.ReactNode — Contents of Input.Success component. If not set, success is not displayed.
• successProps InputSuccessProps & DataAttributes — Props passed down to the Input.Success component
• withAsterisk boolean (default false) — If set, the required asterisk is displayed next to the label. Overrides required prop. Does not add required attribute to the input.

Optional leading props map; remaining args are children.

json-input clj/s

JsonInput — Capture json data from user

https://mantine.dev/core/json-input

Props (docgen 9.5.0):

• autosize boolean (default false) — If set, enables textarea height growing with its content
• bottomSection React.ReactNode — Content rendered at the bottom of the input, inside the border
• bottomSectionProps React.ComponentProps<"div"> — Props passed down to the bottomSection element
• defaultValue string — Uncontrolled component default value
• description React.ReactNode — Contents of Input.Description component. If not set, description is not displayed.
• descriptionProps InputDescriptionProps — Props passed down to the Input.Description component
• deserialize ((text: string, reviver?: ((this: any, key: string, value: any) => any)) => any) | undefined (default JSON.parse) — Function to deserialize string value for formatting and validation. Must throw an error if the string is invalid JSON.
• disabled boolean — Sets disabled attribute on the input element
• error React.ReactNode — Contents of Input.Error component. If not set, error is not displayed.
• errorProps InputErrorProps — Props passed down to the Input.Error component
• formatOnBlur boolean (default false) — Determines whether the value should be formatted on blur
• indentSpaces number (default 2) — Number of spaces to use as white space for formatting. Passed as the third argument to serialize function.
• inputContainer (children: ReactNode) => ReactNode (default React.Fragment) — Render function to wrap the input element. Useful for adding tooltips, popovers, or other wrappers around the input.
• inputSize string — HTML size attribute for the input element (number of visible characters)
• inputWrapperOrder ("input" | "label" | "description" | "error")[] (default ['label', 'description', 'input', 'error']) — Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.
• label React.ReactNode — Contents of Input.Label component. If not set, label is not displayed.
• labelProps InputLabelProps — Props passed down to the Input.Label component
• leftSection React.ReactNode — Content section displayed on the left side of the input
• leftSectionPointerEvents React.CSSProperties["pointerEvents"] (default 'none') — Sets pointer-events styles on the leftSection element. Use 'all' when section contains interactive elements (buttons, links).
• leftSectionProps React.ComponentProps<"div"> — Props passed down to the leftSection element
• leftSectionWidth React.CSSProperties["width"] — Left section width, used to set width of the section and input padding-left, by default equals to the input height
• loading boolean (default false) — Displays loading indicator in the left or right section
• loadingPosition "left" | "right" (default 'right') — Position of the loading indicator
• maxRows number — Maximum rows for autosize textarea to grow, ignored if autosize prop is not set
• minRows number — Minimum rows of autosize textarea, ignored if autosize prop is not set
• onChange (value: string) => void — Called when value changes
• pointer boolean (default false) — Determines whether the input should have cursor: pointer style. Use when input acts as a button-like trigger (e.g., component="button" for Select/DatePicker).
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem
• required boolean (default false) — Adds required attribute to the input and a red asterisk on the right side of label
• resize Resize (default 'none') — Controls resize CSS property
• rightSection React.ReactNode — Content section displayed on the right side of the input
• rightSectionPointerEvents React.CSSProperties["pointerEvents"] (default 'none') — Sets pointer-events styles on the rightSection element. Use 'all' when section contains interactive elements (buttons, links).
• rightSectionProps React.ComponentProps<"div"> — Props passed down to the rightSection element
• rightSectionWidth React.CSSProperties["width"] — Right section width, used to set width of the section and input padding-right, by default equals to the input height
• serialize { (value: any, replacer?: ((this: any, key: string, value: any) => any), space?: string | number | undefined): string; (value: any, replacer?: (string | number)[] | null | undefined, space?: string | ... 1 more ... | undefined): string; } | undefined (default JSON.stringify) — Function to serialize value into a string for formatting. Called with (value, null, 2) where 2 is the indentation level.
• size MantineSize (default 'sm') — Controls input height, horizontal padding, and font-size
• success React.ReactNode — Contents of Input.Success component. If not set, success is not displayed.
• successProps InputSuccessProps & DataAttributes — Props passed down to the Input.Success component
• validationError React.ReactNode — Error message shown when the input value is invalid JSON (checked on blur). If not provided, a generic error state is shown. Takes precedence over the error prop when validation fails.
• value string — Controlled component value
• withAsterisk boolean (default false) — If set, the required asterisk is displayed next to the label. Overrides required prop. Does not add required attribute to the input.
• withErrorStyles boolean (default true) — Determines whether the input should have red border and red text color when the error prop is set
• withSuccessStyles boolean (default true) — Determines whether the input should have green border when the success prop is set
• wrapperProps WrapperProps — Props passed down to the root element

Optional leading props map; remaining args are children.

kbd clj/s

Kbd — Display keyboard key

https://mantine.dev/core/kbd

Props (docgen 9.5.0):

• size MantineSize | number (default 'sm') — Controls font-size and padding

Optional leading props map; remaining args are children.

list clj/s

List — Display ordered or unordered list

https://mantine.dev/core/list

Props (docgen 9.5.0):

• center boolean (default false) — Vertically centers list items with their icons
• children React.ReactNode — List.Item components
• icon React.ReactNode — Icon to replace default list markers. Applied to all items unless overridden on individual List.Item components
• listStyleType ListStyleType — Controls CSS list-style-type property. Overrides the default list marker style based on list type
• reversed boolean — Reverses the order of list items (only works with type="ordered")
• size MantineSize (default 'md') — Controls font-size and line-height
• spacing MantineSpacing (default 0) — Key of theme.spacing or any valid CSS value to set spacing between items
• start number — Starting value for ordered list numbering (only works with type="ordered")
• type "ordered" | "unordered" (default 'unordered') — List type
• withPadding boolean (default false) — Adds extra horizontal padding to the list, useful for nested lists

Optional leading props map; remaining args are children.

list-item clj/s

ListItem — Display ordered or unordered list (List family)

https://mantine.dev/core/list

Props (docgen 9.5.0):

• children React.ReactNode — Item content
• icon React.ReactNode — Icon to replace item bullet

Optional leading props map; remaining args are children.

loader clj/s

Loader — Indicate loading state

https://mantine.dev/core/loader

Props (docgen 9.5.0):

• children React.ReactNode — Overrides default loader with given content
• color MantineColor (default theme.primaryColor) — Key of theme.colors or any valid CSS color
• loaders Partial<Record<(string & {}) | "bars" | "dots" | "oval", MantineLoaderComponent>> — Object of loaders components, can be customized via default props or inline.
• size MantineSize | number (default 'md') — Controls width and height of the loader. Loader has predefined xs-xl values. Numbers are converted to rem.
• type (string & {}) | "bars" | "dots" | "oval" (default 'oval') — Loader type, key of loaders prop

Optional leading props map; remaining args are children.

loading-overlay clj/s

LoadingOverlay — An overlay with centered loader

https://mantine.dev/core/loading-overlay

Props (docgen 9.5.0):

• loaderProps LoaderProps — Props passed down to Loader component
• onEnter () => void — Called when transition starts
• onEntered () => void — Called when transition ends
• onExit () => void — Called when exit transition starts
• onExited () => void — Called when exit transition ends
• overlayProps OverlayProps — Props passed down to Overlay component. Use to customizing blur, opacity, color and other properties.
• transitionProps TransitionProps — Props passed down to Transition component. Set duration to create custom transition or override default transition.
• visible boolean (default false) — Controls overlay visibility. Typically used with state (useState, useDisclosure).
• zIndex string | number (default 400) — Controls z-index of both the overlay and loader. The loader receives z-index + 1.

Optional leading props map; remaining args are children.

mantine-provider clj/s

MantineProvider — application root; supplies theme, color scheme and CSS variables. Nothing Mantine renders without it. Optional leading props map; remaining args are children.

mark clj/s

Mark — Highlight part of the text

https://mantine.dev/core/mark

Props (docgen 9.5.0):

• color MantineColor (default yellow) — Key of theme.colors or any valid CSS color

Optional leading props map; remaining args are children.

marquee clj/s

Marquee — Create continuous scrolling animation for content

https://mantine.dev/core/marquee

Props (docgen 9.5.0):

• children React.ReactNode (required) — Content to scroll
• duration number (default 40000) — Animation duration in ms
• fadeEdgeColor string (default 'var(--mantine-color-body)') — Color of the fade gradient,
• fadeEdgeSize string (default '5%') — Size of the fade gradient,
• fadeEdges boolean (default true) — Whether to show gradient fade on edges,
• gap MantineSpacing (default 'md') — Gap between repeated children, key of theme.spacing or any valid CSS value
• orientation "horizontal" | "vertical" (default 'horizontal') — Scroll orientation
• pauseOnHover boolean (default false) — Pauses animation on hover
• repeat number (default 4) — Number of times children are repeated inline for seamless scrolling
• reverse boolean (default false) — Reverses animation direction

Optional leading props map; remaining args are children.

mask-input clj/s

MaskInput — Input with mask pattern for formatted text entry

https://mantine.dev/core/mask-input

Props (docgen 9.5.0):

• alwaysShowMask boolean — Show mask pattern even when field is empty and unfocused
• autoClear boolean — Clear value on blur when mask is incomplete, false by default
• beforeMaskedStateChange (states: { previousState: { value: string; selection: { start: number; end: number; } | null; }; currentState: { value: string; selection: { start: number; end: number; } | null; }; nextState: { value: string; selection: { ...; } | null; }; }) => { ...; } — Escape hatch for advanced cursor/value manipulation
• description React.ReactNode — Contents of Input.Description component. If not set, description is not displayed.
• descriptionProps InputDescriptionProps — Props passed down to the Input.Description component
• disabled boolean — Sets disabled attribute on the input element
• error React.ReactNode — Contents of Input.Error component. If not set, error is not displayed.
• errorProps InputErrorProps — Props passed down to the Input.Error component
• inputContainer (children: ReactNode) => ReactNode (default React.Fragment) — Render function to wrap the input element. Useful for adding tooltips, popovers, or other wrappers around the input.
• inputSize string — HTML size attribute for the input element (number of visible characters)
• inputWrapperOrder ("input" | "label" | "description" | "error")[] (default ['label', 'description', 'input', 'error']) — Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.
• label React.ReactNode — Contents of Input.Label component. If not set, label is not displayed.
• labelProps InputLabelProps — Props passed down to the Input.Label component
• leftSection React.ReactNode — Content section displayed on the left side of the input
• leftSectionPointerEvents React.CSSProperties["pointerEvents"] (default 'none') — Sets pointer-events styles on the leftSection element. Use 'all' when section contains interactive elements (buttons, links).
• leftSectionProps React.ComponentProps<"div"> — Props passed down to the leftSection element
• leftSectionWidth React.CSSProperties["width"] — Left section width, used to set width of the section and input padding-left, by default equals to the input height
• loading boolean (default false) — Displays loading indicator in the left or right section
• loadingPosition "left" | "right" (default 'right') — Position of the loading indicator
• mask string | (string | RegExp)[] (required) — Mask pattern string or array of string literals and RegExp objects
• modify ((value: string) => Partial<Pick<MaskInputProps, "mask" | "tokens" | "separate" | "slotChar">>) | undefined — Called before masking on each keystroke, can return overrides for mask options
• onChangeRaw (rawValue: string, maskedValue: string) => void — Called on every change with raw and masked values
• onComplete (maskedValue: string, rawValue: string) => void — Called when all required mask slots are filled
• pointer boolean (default false) — Determines whether the input should have cursor: pointer style. Use when input acts as a button-like trigger (e.g., component="button" for Select/DatePicker).
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem
• required boolean (default false) — Adds required attribute to the input and a red asterisk on the right side of label
• resetRef RefObject<(() => void) | null> — Assigns a function that clears the input value to the given ref
• rightSection React.ReactNode — Content section displayed on the right side of the input
• rightSectionPointerEvents React.CSSProperties["pointerEvents"] (default 'none') — Sets pointer-events styles on the rightSection element. Use 'all' when section contains interactive elements (buttons, links).
• rightSectionProps React.ComponentProps<"div"> — Props passed down to the rightSection element
• rightSectionWidth React.CSSProperties["width"] — Right section width, used to set width of the section and input padding-right, by default equals to the input height
• separate boolean — When true, raw and display values are decoupled
• showMaskOnFocus boolean — Show mask placeholder on focus, true by default
• size MantineSize (default 'sm') — Controls input height, horizontal padding, and font-size
• slotChar string | null — Character displayed in unfilled slots, "_" by default
• success React.ReactNode — Contents of Input.Success component. If not set, success is not displayed.
• successProps InputSuccessProps & DataAttributes — Props passed down to the Input.Success component
• tokens Record<string, RegExp> — Override or extend the default token map
• transform (char: string) => string — Transform each character before validation and insertion
• withAsterisk boolean (default false) — If set, the required asterisk is displayed next to the label. Overrides required prop. Does not add required attribute to the input.
• withErrorStyles boolean (default true) — Determines whether the input should have red border and red text color when the error prop is set
• withSuccessStyles boolean (default true) — Determines whether the input should have green border when the success prop is set
• wrapperProps WrapperProps — Props passed down to the root element

Optional leading props map; remaining args are children.

menu clj/s

Menu — Combine a list of secondary actions into single interactive area

https://mantine.dev/core/menu

Props (docgen 9.5.0):

• alignItemsLabels "none" | "all" | "with-indicators" (default 'with-indicators') — Controls how indicator slot space is reserved on menu items for label alignment. 'all' reserves space on every Menu.Item, 'with-indicators' reserves space only on Menu.CheckboxItem and Menu.RadioItem, 'none' reserves space only on items that currently display an indicator.
• arrowOffset number (default 5) — Arrow offset in px
• arrowPosition 'center' | 'side' — Arrow position
• arrowRadius number (default 0) — Arrow border-radius in px
• arrowSize number (default 7) — Arrow size in px
• checkIcon React.ReactNode — Custom icon rendered as the indicator of checked Menu.CheckboxItem and selected Menu.RadioItem. Can be overridden per item with the checkIcon prop.
• children React.ReactNode — Menu children
• clickOutsideEvents string[] (default ['mousedown', 'touchstart', 'keydown']) — Events that trigger outside click detection. Includes mousedown for desktop clicks, touchstart for mobile, and keydown for Escape key handling
• closeDelay number — Close delay in ms, applicable only to trigger="hover" variant
• closeOnClickOutside boolean — If set, the dropdown is closed on outside clicks
• closeOnEscape boolean (default true) — If set, the dropdown is closed when the Escape key is pressed
• closeOnItemClick boolean — If set, the Menu is closed when one of the items is clicked. Can be overridden per item with closeMenuOnClick prop
• defaultOpened boolean — Uncontrolled menu initial opened state
• disabled boolean — If set, popover dropdown will not be rendered
• floatingStrategy FloatingStrategy (default 'absolute') — Changes floating ui position strategy
• hideDetached boolean (default true) — If set, the dropdown is hidden when the element is hidden with styles or not visible on the screen
• id string — Id base to create accessibility connections
• keepMounted boolean — If set, the dropdown is not unmounted from the DOM when hidden. display: none styles are added instead.
• keepMountedMode "activity" | "display-none" (default 'activity') — Controls how the dropdown is hidden when keepMounted is set: 'activity' – hidden with React 19 Activity component, 'display-none' – hidden with display: none styles
• loop boolean — If set, arrow key presses wrap around from last item to first and vice versa
• menuItemTabIndex 0 | -1 (default -1) — Set the tabindex on all menu items. Use 0 to allow Tab key navigation through menu items (required for navigation menus following WAI-ARIA disclosure pattern).
• middlewares PopoverMiddlewares (default { flip: true, shift: true, inline: false }) — Floating ui middlewares to configure position handling
• offset number | FloatingAxesOffsets (default 8) — Offset of the dropdown element
• onChange (opened: boolean) => void — Called when menu opened state changes
• onClose () => void — Called when Menu is closed
• onDismiss () => void — Called when the popover is dismissed by clicking outside or by pressing escape
• onEnterTransitionEnd () => void — Called when enter transition ends
• onExitTransitionEnd () => void — Called when exit transition ends
• onOpen () => void — Called when Menu is opened
• onPositionChange (position: FloatingPosition) => void — Called when dropdown position changes
• openDelay number — Open delay in ms, applicable only to trigger="hover" variant
• opened boolean — Controlled menu opened state
• overlayProps OverlayProps & ElementProps<"div"> — Props passed down to Overlay component
• portalProps BasePortalProps — Props to pass down to the Portal when withinPortal is true
• position FloatingPosition (default 'bottom') — Dropdown position relative to the target element
• preventPositionChangeWhenVisible boolean (default true) — If true, the dropdown picks its side on open (flip runs once, preferring the position prop) and then never changes side — scrolling, resizing, and content size changes will not flip the dropdown. The side is recalculated fresh on the next open. Does not affect the shift middleware. Set to false to keep flip active and allow the dropdown to re-flip on every change.
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius
• returnFocus boolean (default true) — Determines whether focus should be automatically returned to control when dropdown closes
• shadow MantineShadow — Key of theme.shadows or any other valid CSS box-shadow value
• transitionProps TransitionProps (default { duration: 150, transition: 'fade' }) — Props passed down to the Transition component. Use to configure duration and animation type.
• trapFocus boolean — If set, focus is trapped within the menu dropdown when it is opened
• trigger "hover" | "click" | "click-hover" — Event trigger to open menu. Note: 'hover' is not keyboard accessible; prefer 'click-hover' for accessible hover menus
• width PopoverWidth (default 'max-content') — Dropdown width, or 'target' to make dropdown width the same as target element
• withArrow boolean (default false) — Determines whether component should have an arrow
• withInitialFocusPlaceholder boolean (default true) — Adds a hidden focusable element at the start of the dropdown to prevent unexpected focus jumps when opening with keyboard. Set to false if you need custom focus management.
• withOverlay boolean (default false) — Determines whether the overlay should be displayed when the dropdown is opened
• withinPortal boolean (default true) — Determines whether dropdown should be rendered within the Portal
• zIndex string | number (default 300) — Dropdown z-index

Optional leading props map; remaining args are children.

menu-checkbox-group clj/s

MenuCheckboxGroup — Combine a list of secondary actions into single interactive area (Menu family)

https://mantine.dev/core/menu

Props (docgen 9.5.0):

• children React.ReactNode — Menu.CheckboxItem components and other elements
• defaultValue string[] — Uncontrolled default selected values
• onChange (value: string[]) => void — Called with the new array of selected values when a Menu.CheckboxItem is toggled
• value string[] — Controlled selected values

Optional leading props map; remaining args are children.

menu-checkbox-item clj/s

MenuCheckboxItem — Combine a list of secondary actions into single interactive area (Menu family)

https://mantine.dev/core/menu

Props (docgen 9.5.0):

• checkIcon React.ReactNode — Replaces the default check icon rendered in the indicator slot when the item is checked. Overrides checkIcon set on Menu.
• checked boolean — Controlled checked state. Overrides selection derived from the parent Menu.CheckboxGroup.
• children React.ReactNode — Item label
• closeMenuOnClick boolean — If set, closes the menu when this item is clicked. By default, checkbox items do not close the menu.
• color MantineColor — Key of theme.colors or any valid CSS color
• defaultChecked boolean — Uncontrolled default checked state. Ignored when the item is used inside Menu.CheckboxGroup.
• disabled boolean — Sets disabled attribute, applies disabled styles
• onChange (checked: boolean) => void — Called when checked state changes. Overrides onChange of the parent Menu.CheckboxGroup.
• rightSection React.ReactNode — Section displayed at the end of the label
• value string — Value of the checkbox item. When used inside Menu.CheckboxGroup, determines whether the item is checked and what value is added/removed on toggle.

Optional leading props map; remaining args are children.

menu-context-menu clj/s

MenuContextMenu — Combine a list of secondary actions into single interactive area (Menu family)

https://mantine.dev/core/menu

Props (docgen 9.5.0):

• children React.ReactNode (required) — Element that opens the menu when right-clicked. Menu dropdown is positioned at the cursor. The trigger element must not call event.preventDefault() in its own onContextMenu handler, otherwise the native context menu is not suppressed.
• disabled boolean — If set, the right-click trigger is disabled and the browser's default context menu is shown
• longPressDelay number — Delay in ms before a touch long-press opens the dropdown on touch devices, 500 by default

Optional leading props map; remaining args are children.

menu-divider clj/s

Menu.Divider — compound part of Menu (docgen omits it). Optional leading props map; remaining args are children.

menu-dropdown clj/s

Menu.Dropdown — compound part of Menu (docgen omits it). Optional leading props map; remaining args are children.

menu-item clj/s

MenuItem — Combine a list of secondary actions into single interactive area (Menu family)

https://mantine.dev/core/menu

Props (docgen 9.5.0):

• children React.ReactNode — Item label
• closeMenuOnClick boolean — Controls whether the menu closes when this item is clicked. When undefined, inherits from Menu's closeOnItemClick prop. When true or false, overrides the Menu-level setting
• color MantineColor — Key of theme.colors or any valid CSS color
• disabled boolean — Sets disabled attribute, applies disabled styles
• leftSection React.ReactNode — Section displayed at the start of the label
• rightSection React.ReactNode — Section displayed at the end of the label

Optional leading props map; remaining args are children.

menu-label clj/s

Menu.Label — compound part of Menu (docgen omits it). Optional leading props map; remaining args are children.

menu-radio-group clj/s

MenuRadioGroup — Combine a list of secondary actions into single interactive area (Menu family)

https://mantine.dev/core/menu

Props (docgen 9.5.0):

• children React.ReactNode — Menu.RadioItem components and other elements
• defaultValue string | null — Uncontrolled default selected value
• onChange (value: string) => void — Called with the new value when a Menu.RadioItem is selected
• value string | null — Controlled selected value

Optional leading props map; remaining args are children.

menu-radio-item clj/s

MenuRadioItem — Combine a list of secondary actions into single interactive area (Menu family)

https://mantine.dev/core/menu

Props (docgen 9.5.0):

• checkIcon React.ReactNode — Replaces the default radio indicator rendered when the item is selected. Overrides checkIcon set on Menu.
• checked boolean — Overrides selected state determined by the parent Menu.RadioGroup.
• children React.ReactNode — Item label
• closeMenuOnClick boolean — If set, closes the menu when this item is clicked. By default, radio items do not close the menu.
• color MantineColor — Key of theme.colors or any valid CSS color
• disabled boolean — Sets disabled attribute, applies disabled styles
• onChange (value: string) => void — Called with the item value when item is selected. Overrides onChange of the parent Menu.RadioGroup.
• rightSection React.ReactNode — Section displayed at the end of the label
• value string (required) — Value of the radio item. Used by the parent Menu.RadioGroup to determine which item is selected.

Optional leading props map; remaining args are children.

menu-search clj/s

MenuSearch — Combine a list of secondary actions into single interactive area (Menu family)

https://mantine.dev/core/menu

Props (docgen 9.5.0):

• clearSearchOnClose boolean (default true) — If set, clears the search value after the menu close transition completes. Requires a controlled value/onChange pair.
• disabled boolean — Sets disabled attribute on the input element
• error React.ReactNode — Determines whether the input should have error styles and aria-invalid attribute
• id string — Input element id
• inputSize string — HTML size attribute for the input element (number of visible characters)
• leftSection React.ReactNode — Content section displayed on the left side of the input
• leftSectionPointerEvents React.CSSProperties["pointerEvents"] (default 'none') — Sets pointer-events styles on the leftSection element. Use 'all' when section contains interactive elements (buttons, links).
• leftSectionProps React.ComponentProps<"div"> — Props passed down to the leftSection element
• leftSectionWidth React.CSSProperties["width"] — Left section width, used to set width of the section and input padding-left, by default equals to the input height
• loading boolean (default false) — Displays loading indicator in the left or right section
• loadingPosition "left" | "right" (default 'right') — Position of the loading indicator
• multiline boolean (default false) — Adjusts padding and sizing calculations for multiline inputs (use with component="textarea"). Does not make the input multiline by itself.
• pointer boolean (default false) — Determines whether the input should have cursor: pointer style. Use when input acts as a button-like trigger (e.g., component="button" for Select/DatePicker).
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem
• required boolean — Sets required attribute on the input element
• rightSection React.ReactNode — Content section displayed on the right side of the input
• rightSectionPointerEvents React.CSSProperties["pointerEvents"] (default 'none') — Sets pointer-events styles on the rightSection element. Use 'all' when section contains interactive elements (buttons, links).
• rightSectionProps React.ComponentProps<"div"> — Props passed down to the rightSection element
• rightSectionWidth React.CSSProperties["width"] — Right section width, used to set width of the section and input padding-right, by default equals to the input height
• rootRef Ref<HTMLDivElement> — Root element ref
• size MantineSize (default 'sm') — Controls input height, horizontal padding, and font-size
• success React.ReactNode — Determines whether the input should have success styles
• withAria boolean (default true) — Determines whether aria- and other accessibility attributes should be added to the input. Only disable when implementing custom accessibility handling.
• withErrorStyles boolean (default true) — Determines whether the input should have red border and red text color when the error prop is set
• withSuccessStyles boolean (default true) — Determines whether the input should have green border when the success prop is set
• wrapperProps WrapperProps — Props passed down to the root element of the Input component

Optional leading props map; remaining args are children.

menu-sub clj/s

MenuSub — Combine a list of secondary actions into single interactive area (Menu family)

https://mantine.dev/core/menu

Props (docgen 9.5.0):

• arrowOffset number (default 5) — Arrow offset in px
• arrowPosition 'center' | 'side' — Arrow position
• arrowRadius number (default 0) — Arrow border-radius in px
• arrowSize number (default 7) — Arrow size in px
• closeDelay number — Close delay in ms, applicable when hover trigger is used
• disabled boolean — If set, popover dropdown will not be rendered
• floatingStrategy FloatingStrategy (default 'absolute') — Changes floating ui position strategy
• hideDetached boolean (default true) — If set, the dropdown is hidden when the element is hidden with styles or not visible on the screen
• keepMounted boolean — If set, the dropdown is not unmounted from the DOM when hidden. display: none styles are added instead.
• keepMountedMode "activity" | "display-none" (default 'activity') — Controls how the dropdown is hidden when keepMounted is set: 'activity' – hidden with React 19 Activity component, 'display-none' – hidden with display: none styles
• middlewares PopoverMiddlewares (default { flip: true, shift: true, inline: false }) — Floating ui middlewares to configure position handling
• offset number | FloatingAxesOffsets (default 0) — Offset of the dropdown element
• onChange (opened: boolean) => void — Called with current state when dropdown opens or closes
• onClose () => void — Called when dropdown closes
• onDismiss () => void — Called when the popover is dismissed by clicking outside or by pressing escape
• onEnterTransitionEnd () => void — Called when enter transition ends
• onExitTransitionEnd () => void — Called when exit transition ends
• onOpen () => void — Called when dropdown opens
• onPositionChange (position: FloatingPosition) => void — Called when dropdown position changes
• openDelay number — Open delay in ms, applicable when hover trigger is used
• opened boolean — Controlled opened state
• overlayProps OverlayProps & ElementProps<"div"> — Props passed down to Overlay component
• portalProps BasePortalProps — Props to pass down to the Portal when withinPortal is true
• position FloatingPosition (default 'right-start') — Dropdown position relative to the target element
• preventPositionChangeWhenVisible boolean (default true) — If true, the dropdown picks its side on open (flip runs once, preferring the position prop) and then never changes side — scrolling, resizing, and content size changes will not flip the dropdown. The side is recalculated fresh on the next open. Does not affect the shift middleware. Set to false to keep flip active and allow the dropdown to re-flip on every change.
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius
• returnFocus boolean (default false) — Determines whether focus should be automatically returned to control when dropdown closes
• safeAreaPolygon boolean | SafePolygonOptions (default true) — Determines whether submenu stays open while the cursor moves toward its dropdown. Pass an object to configure safe polygon behavior.
• shadow MantineShadow — Key of theme.shadows or any other valid CSS box-shadow value
• transitionProps TransitionProps (default { duration: 0 }) — Props passed down to the Transition component that used to animate dropdown presence, use to configure duration and animation type
• width PopoverWidth (default 'max-content') — Dropdown width, or 'target' to make dropdown width the same as target element
• withArrow boolean (default false) — Determines whether component should have an arrow
• withOverlay boolean (default false) — Determines whether the overlay should be displayed when the dropdown is opened
• withinPortal boolean (default true) — Determines whether dropdown should be rendered within the Portal
• zIndex string | number (default 300) — Dropdown z-index

Optional leading props map; remaining args are children.

menu-sub-dropdown clj/s

MenuSub.Dropdown — compound part of MenuSub (docgen omits it). Optional leading props map; remaining args are children.

menu-sub-item clj/s

MenuSubItem — Combine a list of secondary actions into single interactive area (Menu family)

https://mantine.dev/core/menu

Props (docgen 9.5.0):

• children React.ReactNode — Item label
• closeMenuOnClick boolean — If set, the menu is closed when the item is clicked. Overrides closeOnItemClick prop on the Menu component.
• color MantineColor — Key of theme.colors or any valid CSS color
• disabled boolean — Sets disabled attribute, applies disabled styles
• leftSection React.ReactNode — Section displayed at the start of the label
• rightSection React.ReactNode — Section displayed at the end of the label

Optional leading props map; remaining args are children.

menu-sub-target clj/s

MenuSubTarget — Combine a list of secondary actions into single interactive area (Menu family)

https://mantine.dev/core/menu

Props (docgen 9.5.0):

• children React.ReactNode (required) — Target element
• refProp string (default 'ref') — Key of the prop used to get element ref

Optional leading props map; remaining args are children.

menu-target clj/s

MenuTarget — Combine a list of secondary actions into single interactive area (Menu family)

https://mantine.dev/core/menu

Props (docgen 9.5.0):

• children React.ReactNode (required) — Target element
• refProp string (default 'ref') — Key of the prop used to get element ref, useful for forwarding refs to custom components

Optional leading props map; remaining args are children.

menubar clj/s

Menubar — Desktop application style menubar with a row of menu triggers

https://mantine.dev/core/menubar

Props (docgen 9.5.0):

• children React.ReactNode — Menubar.Menu components
• defaultOpenIndex number | null (default null) — Index of the opened menu for uncontrolled component
• loop boolean (default true) — If set, arrow key navigation wraps from last to first menu and vice versa
• onOpenChange (index: number | null) => void — Called when the opened menu changes with its index or null when all menus are closed
• openIndex number | null — Index of the controlled opened menu, null closes all menus
• position FloatingPosition (default 'bottom-start') — Dropdown position relative to the target element
• trigger "hover" | "click" (default 'click') — Event that opens a menu when none of the menus is opened. 'click' opens a menu on target click and then switches menus on hover (desktop application pattern), 'hover' opens a menu when the target is hovered

Optional leading props map; remaining args are children.

menubar-dropdown clj/s

Menubar.Dropdown — compound part of Menubar (docgen omits it). Optional leading props map; remaining args are children.

menubar-menu clj/s

Menubar.Menu — compound part of Menubar (docgen omits it). Optional leading props map; remaining args are children.

menubar-target clj/s

Menubar.Target — compound part of Menubar (docgen omits it). Optional leading props map; remaining args are children.

modal clj/s

Modal — An accessible overlay dialog

https://mantine.dev/core/modal

Props (docgen 9.5.0):

• centered boolean (default false) — If set, the modal is centered vertically
• children React.ReactNode — Modal content
• closeButtonProps ModalBaseCloseButtonProps — Props passed down to the close button
• closeOnClickOutside boolean (default true) — If set, the modal/drawer is closed when user clicks on the overlay
• closeOnEscape boolean (default true) — If set, onClose is called when user presses the escape key
• fullScreen boolean (default false) — If set, the modal takes the entire screen
• id string — Id used to connect modal/drawer with body and title
• keepMounted boolean (default false) — If set modal/drawer is not unmounted from the DOM when hidden. display: none styles are applied instead.
• keepMountedMode "activity" | "display-none" (default 'activity') — Controls how the modal/drawer is hidden when keepMounted is set: 'activity' - hidden with React 19 Activity component, 'display-none' - hidden with display: none styles
• lockScroll boolean (default true) — If set, scroll is locked when opened={true}
• onClose () => void (required) — Called when modal/drawer is closed
• onEnterTransitionEnd () => void — Called when enter transition ends
• onExitTransitionEnd () => void — Called when exit transition ends
• opened boolean (required) — Controls opened state
• overlayProps ModalBaseOverlayProps — Props passed down to the Overlay component, use to configure opacity, background-color, styles and other properties
• padding MantineSpacing (default 'md') — Key of theme.spacing or any valid CSS value to set content, header and footer padding
• portalProps BasePortalProps — Props passed down to the Portal component when withinPortal is set
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius
• removeScrollProps RemoveScrollProps — Props passed down to react-remove-scroll, can be used to customize scroll lock behavior
• returnFocus boolean (default true) — If set, focus is returned to the last active element when onClose is called
• scrollAreaComponent ScrollAreaComponent (default 'div') — Scroll area component
• shadow MantineShadow (default 'xl') — Key of theme.shadows or any valid CSS box-shadow value
• size MantineSize | number (default 'md') — Controls width of the content area
• stackId string — Id of the modal in the Modal.Stack
• title React.ReactNode — Modal title
• transitionProps TransitionProps — Props added to the Transition component that used to animate overlay and body, use to configure duration and animation type, { duration: 200, transition: 'fade-down' } by default
• trapFocus boolean (default true) — If set, focus is trapped within the modal/drawer
• withCloseButton boolean (default true) — If set, the close button is rendered
• withOverlay boolean (default true) — If set, the overlay is rendered
• withinPortal boolean (default true) — If set, the component is rendered inside Portal
• xOffset MarginLeft<string | number> (default 5vw) — Left/right modal offset
• yOffset MarginTop<string | number> (default 5dvh) — Top/bottom modal offset
• zIndex string | number (default 200) — z-index CSS property of the root element

Optional leading props map; remaining args are children.

modal-base clj/s

ModalBase

Props (docgen 9.5.0):

• children React.ReactNode — Modal/drawer content
• closeOnClickOutside boolean (default true) — If set, the modal/drawer is closed when user clicks on the overlay
• closeOnEscape boolean (default true) — If set, onClose is called when user presses the escape key
• id string — Id used to connect modal/drawer with body and title
• keepMounted boolean (default false) — If set modal/drawer is not unmounted from the DOM when hidden. display: none styles are applied instead.
• keepMountedMode "activity" | "display-none" (default activity) — Controls how the modal/drawer is hidden when keepMounted is set: 'activity' - hidden with React 19 Activity component, 'display-none' - hidden with display: none styles
• lockScroll boolean (default true) — If set, scroll is locked when opened={true}
• onClose () => void (required) — Called when modal/drawer is closed
• onEnterTransitionEnd () => void — Called when enter transition ends
• onExitTransitionEnd () => void — Called when exit transition ends
• opened boolean (required) — Controls opened state
• padding MantineSpacing (default 'md') — Key of theme.spacing or any valid CSS value to set content, header and footer padding
• portalProps BasePortalProps — Props passed down to the Portal component when withinPortal is set
• removeScrollProps RemoveScrollProps — Props passed down to react-remove-scroll, can be used to customize scroll lock behavior
• returnFocus boolean (default true) — If set, focus is returned to the last active element when onClose is called
• shadow MantineShadow (default 'xl') — Key of theme.shadows or any valid CSS box-shadow value
• size MantineSize | number (default 'md') — Controls width of the content area
• transitionProps TransitionProps — Props added to the Transition component that used to animate overlay and body, use to configure duration and animation type, { duration: 200, transition: 'fade-down' } by default
• trapFocus boolean (default true) — If set, focus is trapped within the modal/drawer
• withinPortal boolean (default true) — If set, the component is rendered inside Portal
• zIndex string | number (default 200) — z-index CSS property of the root element

Optional leading props map; remaining args are children.

modal-body clj/s

Modal.Body — compound part of Modal (docgen omits it). Optional leading props map; remaining args are children.

modal-close-button clj/s

Modal.CloseButton — compound part of Modal (docgen omits it). Optional leading props map; remaining args are children.

modal-content clj/s

Modal.Content — compound part of Modal (docgen omits it). Optional leading props map; remaining args are children.

modal-header clj/s

Modal.Header — compound part of Modal (docgen omits it). Optional leading props map; remaining args are children.

modal-overlay clj/s

Modal.Overlay — compound part of Modal (docgen omits it). Optional leading props map; remaining args are children.

modal-root clj/s

Modal.Root — compound part of Modal (docgen omits it). Optional leading props map; remaining args are children.

modal-stack clj/s

Modal.Stack — compound part of Modal (docgen omits it). Optional leading props map; remaining args are children.

modal-title clj/s

Modal.Title — compound part of Modal (docgen omits it). Optional leading props map; remaining args are children.

multi-select clj/s

MultiSelect — Custom searchable multi select

https://mantine.dev/core/multi-select

Props (docgen 9.5.0):

• checkIconPosition "left" | "right" (default 'left') — Position of the checkmark icon shown next to selected options in the dropdown
• chevronColor MantineColor — Controls color of the default chevron
• clearButtonProps InputClearButtonProps — Props passed down to the clear button
• clearSearchOnChange boolean (default true) — Clear search value when item is selected
• clearSectionMode ClearSectionMode (default 'both') — Determines how the clear button and rightSection are rendered
• clearable boolean (default false) — When enabled, displays a clear button to remove all selected values (hidden when component is empty, disabled, or read-only)
• comboboxProps ComboboxProps — Props passed down to Combobox component
• data ComboboxData<Value> — Data used to generate options. Values must be unique, otherwise an error will be thrown and component will not render.
• defaultDropdownOpened boolean — Uncontrolled dropdown initial opened state
• defaultSearchValue string — Default search value
• defaultValue Value[] — Uncontrolled component default value
• description React.ReactNode — Contents of Input.Description component. If not set, description is not displayed.
• descriptionProps InputDescriptionProps — Props passed down to the Input.Description component
• disabled boolean — Sets disabled attribute on the input element
• dropdownOpened boolean — Controlled dropdown opened state
• error React.ReactNode — Contents of Input.Error component. If not set, error is not displayed.
• errorProps InputErrorProps — Props passed down to the Input.Error component
• filter OptionsFilter<Value> — Function based on which items are filtered and sorted
• floatingHeight "viewport" — If set to 'viewport', the dropdown grows to fill the available vertical space in the viewport. Disables the flip middleware.
• hiddenInputProps React.ComponentProps<"input"> — Props passed down to the hidden input
• hiddenInputValuesDivider string (default ',') — Divider used to separate values in the hidden input value attribute
• hidePickedOptions boolean (default false) — When enabled, selected options are hidden from the dropdown list
• inputContainer (children: ReactNode) => ReactNode (default React.Fragment) — Render function to wrap the input element. Useful for adding tooltips, popovers, or other wrappers around the input.
• inputSize string — HTML size attribute for the input element (number of visible characters)
• inputWrapperOrder ("input" | "label" | "description" | "error")[] (default ['label', 'description', 'input', 'error']) — Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.
• label React.ReactNode — Contents of Input.Label component. If not set, label is not displayed.
• labelProps InputLabelProps — Props passed down to the Input.Label component
• leftSection React.ReactNode — Content section displayed on the left side of the input
• leftSectionPointerEvents React.CSSProperties["pointerEvents"] (default 'none') — Sets pointer-events styles on the leftSection element. Use 'all' when section contains interactive elements (buttons, links).
• leftSectionProps React.ComponentProps<"div"> — Props passed down to the leftSection element
• leftSectionWidth React.CSSProperties["width"] — Left section width, used to set width of the section and input padding-left, by default equals to the input height
• limit number — Maximum number of options displayed at a time, Infinity by default
• loading boolean (default false) — Displays loading indicator in the left or right section
• loadingPosition "left" | "right" (default 'right') — Position of the loading indicator
• maxDropdownHeight string | number — max-height of the dropdown, only applicable when withScrollArea prop is true, 250 by default
• maxValues number — Maximum number of values, no limit if not set
• nothingFoundMessage React.ReactNode — Message displayed when no options match the search query (when searchable is enabled) or when the data array is empty. If not set, the dropdown will be hidden instead.
• onChange (value: Value[]) => void — Called when value changes
• onClear () => void — Called when the clear button is clicked
• onDropdownClose () => void — Called when dropdown closes
• onDropdownOpen () => void — Called when dropdown opens
• onMaxValues () => void — Called when user attempts to select more values than allowed
• onOptionSubmit (value: Value) => void — Called when option is submitted from dropdown with mouse click or Enter key
• onRemove (value: Value) => void — Called with value of the removed item
• onSearchChange (value: string) => void — Called when search changes
• openOnFocus boolean (default true) — Controls whether dropdown opens when the input receives focus
• pointer boolean (default false) — Determines whether the input should have cursor: pointer style. Use when input acts as a button-like trigger (e.g., component="button" for Select/DatePicker).
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem
• renderOption (item: ComboboxLikeRenderOptionInput<ComboboxItem<Value>>) => ReactNode — A function to render content of the option, replaces the default content of the option
• renderPill (props: ComboboxRenderPillInput<Value>) => ReactNode — A function to render content of the pill
• required boolean (default false) — Adds required attribute to the input and a red asterisk on the right side of label
• rightSection React.ReactNode — Content section displayed on the right side of the input
• rightSectionPointerEvents React.CSSProperties["pointerEvents"] (default 'none') — Sets pointer-events styles on the rightSection element. Use 'all' when section contains interactive elements (buttons, links).
• rightSectionProps React.ComponentProps<"div"> — Props passed down to the rightSection element
• rightSectionWidth React.CSSProperties["width"] — Right section width, used to set width of the section and input padding-right, by default equals to the input height
• scrollAreaProps ScrollAreaProps — Props passed down to the underlying ScrollArea component in the dropdown
• searchValue string — Controlled search value
• searchable boolean (default false) — Allows searching through options by user input
• selectFirstOptionOnChange boolean — If set, the first option is selected when value changes, false by default
• selectFirstOptionOnDropdownOpen boolean — If set, the first option is selected when dropdown opens, false by default
• size MantineSize (default 'sm') — Controls input height, horizontal padding, and font-size
• success React.ReactNode — Contents of Input.Success component. If not set, success is not displayed.
• successProps InputSuccessProps & DataAttributes — Props passed down to the Input.Success component
• value Value[] — Controlled component value
• withAlignedLabels boolean (default false) — If set, unchecked labels are aligned with checked ones
• withAsterisk boolean (default false) — If set, the required asterisk is displayed next to the label. Overrides required prop. Does not add required attribute to the input.
• withCheckIcon boolean (default true) — If set, the check icon is displayed near the selected option label
• withErrorStyles boolean (default true) — Determines whether the input should have red border and red text color when the error prop is set
• withPillsReorder boolean (default false) — If set, selected values can be reordered by dragging pills. Disabled when disabled or readOnly is set.
• withScrollArea boolean — Determines whether the options should be wrapped with ScrollArea.AutoSize, true by default
• withSuccessStyles boolean (default true) — Determines whether the input should have green border when the success prop is set
• wrapperProps WrapperProps — Props passed down to the root element

Optional leading props map; remaining args are children.

native-select clj/s

NativeSelect — Native select element based on Input

https://mantine.dev/core/native-select

Props (docgen 9.5.0):

• data ComboboxStringGroupData — Data used to render options. Accepts strings, objects with label/value, or grouped options. If children prop is provided, data will be ignored.
• description React.ReactNode — Contents of Input.Description component. If not set, description is not displayed.
• descriptionProps InputDescriptionProps — Props passed down to the Input.Description component
• disabled boolean — Sets disabled attribute on the input element
• error React.ReactNode — Contents of Input.Error component. If not set, error is not displayed.
• errorProps InputErrorProps — Props passed down to the Input.Error component
• inputContainer (children: ReactNode) => ReactNode (default React.Fragment) — Render function to wrap the input element. Useful for adding tooltips, popovers, or other wrappers around the input.
• inputSize string — HTML size attribute for the input element (number of visible characters)
• inputWrapperOrder ("input" | "label" | "description" | "error")[] (default ['label', 'description', 'input', 'error']) — Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.
• label React.ReactNode — Contents of Input.Label component. If not set, label is not displayed.
• labelProps InputLabelProps — Props passed down to the Input.Label component
• leftSection React.ReactNode — Content section displayed on the left side of the input
• leftSectionPointerEvents React.CSSProperties["pointerEvents"] (default 'none') — Sets pointer-events styles on the leftSection element. Use 'all' when section contains interactive elements (buttons, links).
• leftSectionProps React.ComponentProps<"div"> — Props passed down to the leftSection element
• leftSectionWidth React.CSSProperties["width"] — Left section width, used to set width of the section and input padding-left, by default equals to the input height
• loading boolean (default false) — Displays loading indicator in the left or right section
• loadingPosition "left" | "right" (default 'right') — Position of the loading indicator
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem
• required boolean (default false) — Adds required attribute to the input and a red asterisk on the right side of label
• rightSection React.ReactNode — Content section displayed on the right side of the input
• rightSectionPointerEvents React.CSSProperties["pointerEvents"] (default 'none') — Sets pointer-events styles on the rightSection element. Use 'all' when section contains interactive elements (buttons, links).
• rightSectionProps React.ComponentProps<"div"> — Props passed down to the rightSection element
• rightSectionWidth React.CSSProperties["width"] — Right section width, used to set width of the section and input padding-right, by default equals to the input height
• size MantineSize (default 'sm') — Controls input height, horizontal padding, and font-size
• success React.ReactNode — Contents of Input.Success component. If not set, success is not displayed.
• successProps InputSuccessProps & DataAttributes — Props passed down to the Input.Success component
• withAsterisk boolean (default false) — If set, the required asterisk is displayed next to the label. Overrides required prop. Does not add required attribute to the input.
• withErrorStyles boolean (default true) — Determines whether the input should have red border and red text color when the error prop is set
• withSuccessStyles boolean (default true) — Determines whether the input should have green border when the success prop is set
• wrapperProps WrapperProps — Props passed down to the root element

Optional leading props map; remaining args are children.

nav-link clj/s

NavLink — Navigation link

https://mantine.dev/core/nav-link

Polymorphic: accepts :component / :render-root.

Props (docgen 9.5.0):

• active boolean (default false) — Determines whether the link should have active styles
• autoContrast boolean — If set, adjusts text color based on background color for filled variant
• children React.ReactNode — Child NavLink components
• childrenOffset MantineSpacing (default 'lg') — Controls indentation of nested NavLink components, key of theme.spacing or any valid CSS value
• color MantineColor (default theme.primaryColor) — Key of theme.colors or any valid CSS color to control active styles
• defaultOpened boolean — Uncontrolled nested items collapse initial state
• description React.ReactNode — Link description, displayed below the label
• disableRightSectionRotation boolean (default false) — If set, right section will not be rotated when collapse is opened
• disabled boolean (default false) — If set, disabled styles will be added to the root element
• keepMounted boolean — If set to false, child NavLinks are unmounted when collapsed
• label React.ReactNode — Main link label
• leftSection React.ReactNode — Section displayed on the left side of the label
• noWrap boolean (default false) — If set, label and description are truncated with ellipsis instead of wrapping
• onChange (opened: boolean) => void — Called when open state changes
• onClick MouseEventHandler<HTMLElement> — Called when the root element is clicked
• onKeyDown KeyboardEventHandler<HTMLElement> — Called on keydown of the root element
• opened boolean — Controlled nested items collapse state
• rightSection React.ReactNode — Section displayed on the right side of the label

Optional leading props map; remaining args are children.

notification clj/s

Notification — Show dynamic notifications and alerts to user, part of notifications system

https://mantine.dev/core/notification

Props (docgen 9.5.0):

• children React.ReactNode — Notification description, displayed below the title. When no title is provided, this serves as the main message.
• closeButtonProps ElementProps<"button"> & DataAttributes — Props passed down to the close button
• color MantineColor (default theme.primaryColor) — Controls icon background color or notification accent line color, key of theme.colors or any valid CSS color. When icon is provided, sets the icon background color. When no icon is provided, sets the colored accent line on the left.
• icon React.ReactNode — Notification icon, replaces color line
• loaderProps LoaderProps — Props passed down to the Loader component
• loading boolean — If set, displays a Loader component instead of the icon. Takes precedence over the icon prop if both are provided.
• onClose () => void — Called when the close button is clicked
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius
• title React.ReactNode — Notification title, displayed above the message body
• withBorder boolean — Adds border to the root element
• withCloseButton boolean (default true) — If set, the close button is visible

Optional leading props map; remaining args are children.

number-formatter clj/s

NumberFormatter — Format number with thousands/decimal separators and suffix/prefix

https://mantine.dev/core/number-formatter

Props (docgen 9.5.0):

• allowNegative boolean (default true) — If set, negative values are allowed
• decimalScale number (default Infinity) — Limits the number of digits that are displayed after the decimal point
• decimalSeparator string — Character used as a decimal separator, '.' by default
• fixedDecimalScale boolean (default false) — If set, zeros are added after decimalSeparator to match given decimalScale.
• prefix string — Prefix added before the value
• suffix string — Suffix added after the value
• thousandSeparator string | boolean (default ',') — A character used to separate thousands
• thousandsGroupStyle "none" | "thousand" | "lakh" | "wan" — Defines the thousand grouping style
• value string | number — Value to format

Optional leading props map; remaining args are children.

number-input clj/s

NumberInput — Capture number from user

https://mantine.dev/core/number-input

Props (docgen 9.5.0):

• allowDecimal boolean (default true) — If set, decimal values are allowed
• allowLeadingZeros boolean (default true) — Determines whether leading zeros are allowed during input. If false, leading zeros are removed as you type (e.g., typing 007 results in 7). Works in conjunction with trimLeadingZeroesOnBlur.
• allowNegative boolean (default true) — Determines whether negative numbers are allowed. If false, the input will not accept negative values, and the decrement button will stop at 0 (when min is not set).
• allowedDecimalSeparators string[] (default ['.', ',']) — Characters which when pressed result in a decimal separator. These characters will be replaced by the decimalSeparator in the input value.
• clampBehavior "none" | "blur" | "strict" — Controls how values are clamped to the min/max range: - 'blur' (default): User can type any value, but it's clamped when the input loses focus - 'strict': User cannot type values outside the range - 'none': No clamping; min/max only apply to increment/decrement controls and arrow keys
• decimalScale number (default Infinity) — Limits the number of digits that can be entered after the decimal point
• decimalSeparator string (default '.') — Character used as a decimal separator. Generally used with allowedDecimalSeparators prop.
• defaultValue string | NumberInputNumericType — Uncontrolled component default value
• description React.ReactNode — Contents of Input.Description component. If not set, description is not displayed.
• descriptionProps InputDescriptionProps — Props passed down to the Input.Description component
• disabled boolean — Sets disabled attribute on the input element
• error React.ReactNode — Contents of Input.Error component. If not set, error is not displayed.
• errorProps InputErrorProps — Props passed down to the Input.Error component
• fixedDecimalScale boolean (default false) — If true, automatically pads the decimal part with zeros to match decimalScale (e.g., with decimalScale={2}, typing 5.1 displays as 5.10). Requires decimalScale to be set.
• handlersRef Ref<NumberInputHandlers> | undefined — Increment/decrement handlers
• hideControls boolean (default false) — If set, the up/down controls are hidden
• inputContainer (children: ReactNode) => ReactNode (default React.Fragment) — Render function to wrap the input element. Useful for adding tooltips, popovers, or other wrappers around the input.
• inputSize string — HTML size attribute for the input element (number of visible characters)
• inputWrapperOrder ("input" | "label" | "description" | "error")[] (default ['label', 'description', 'input', 'error']) — Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.
• isAllowed (values: NumberFormatValues) => boolean — A function to validate the input value. If this function returns false, the onChange will not be called and the input value will not change.
• label React.ReactNode — Contents of Input.Label component. If not set, label is not displayed.
• labelProps InputLabelProps — Props passed down to the Input.Label component
• leftSection React.ReactNode — Content section displayed on the left side of the input
• leftSectionPointerEvents React.CSSProperties["pointerEvents"] (default 'none') — Sets pointer-events styles on the leftSection element. Use 'all' when section contains interactive elements (buttons, links).
• leftSectionProps React.ComponentProps<"div"> — Props passed down to the leftSection element
• leftSectionWidth React.CSSProperties["width"] — Left section width, used to set width of the section and input padding-left, by default equals to the input height
• loading boolean (default false) — Displays loading indicator in the left or right section
• loadingPosition "left" | "right" (default 'right') — Position of the loading indicator
• max NumberInputNumericType — Maximum possible value
• min NumberInputNumericType — Minimum possible value
• onChange (value: NumberInputValue<T>) => void — Called when value changes
• onMaxReached () => void — Called when the decrement button or arrow down key is pressed and the value has reached the minimum
• onMinReached () => void — Called when the increment button or arrow up key is pressed and the value has reached the maximum
• onValueChange OnValueChange — Called when value changes with react-number-format payload
• prefix string — Prefix added before the input value
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem
• required boolean (default false) — Adds required attribute to the input and a red asterisk on the right side of label
• rightSection React.ReactNode — Content section displayed on the right side of the input
• rightSectionPointerEvents React.CSSProperties["pointerEvents"] (default 'none') — Sets pointer-events styles on the rightSection element. Use 'all' when section contains interactive elements (buttons, links).
• rightSectionProps React.ComponentProps<"div"> — Props passed down to the rightSection element
• rightSectionWidth React.CSSProperties["width"] — Right section width, used to set width of the section and input padding-right, by default equals to the input height
• selectAllOnFocus boolean (default false) — If set, all text is selected when the input receives focus
• size MantineSize (default 'sm') — Controls input height, horizontal padding, and font-size
• startValue NumberInputNumericType (default 0) — Value used when incrementing/decrementing an empty input. If min is set and startValue < min, min is used instead.
• step NumberInputNumericType (default 1) — Number by which value will be incremented/decremented with up/down controls and keyboard arrows
• stepHoldDelay number — Initial delay in milliseconds before stepping the value.
• stepHoldInterval number | ((stepCount: number) => number) (default undefined) — Interval in milliseconds between value steps when increment/decrement button is held down. Can be a number or a function (stepCount) => number for dynamic intervals. Requires stepHoldDelay to be set.
• success React.ReactNode — Contents of Input.Success component. If not set, success is not displayed.
• successProps InputSuccessProps & DataAttributes — Props passed down to the Input.Success component
• suffix string — Suffix added after the input value
• thousandSeparator string | boolean — A character used to separate thousands
• thousandsGroupStyle "none" | "thousand" | "lakh" | "wan" — Defines the thousand grouping style. 'thousand' (1,000), 'lakh' (1,00,000), 'wan' (1,0000), 'none'.
• trimLeadingZeroesOnBlur boolean (default true) — If set, leading zeros are removed on blur. For example, 00100 -> 100
• type "text" | "tel" | "password" (default 'text') — Controls input type attribute
• value string | NumberInputNumericType — Controlled component value
• valueIsNumericString boolean (default false) — Advanced: Set to true if you're passing numeric strings (e.g., "12345") and using formatting props like prefix or suffix. In most cases, you don't need this prop. See react-number-format docs for details.
• withAsterisk boolean (default false) — If set, the required asterisk is displayed next to the label. Overrides required prop. Does not add required attribute to the input.
• withErrorStyles boolean (default true) — Determines whether the input should have red border and red text color when the error prop is set
• withKeyboardEvents boolean (default true) — If set, up/down keyboard events increment/decrement value
• withSuccessStyles boolean (default true) — Determines whether the input should have green border when the success prop is set
• wrapperProps WrapperProps — Props passed down to the root element

Optional leading props map; remaining args are children.

overflow-list clj/s

OverflowList

https://mantine.dev/core/overflow-list

Props (docgen 9.5.0):

• collapseFrom "end" | "start" (default 'end') — Direction from which items are collapsed when they overflow, 'end' collapses last items, 'start' collapses first items
• data T[] (required) — Array of items to display
• gap MantineSpacing (default 'xs') — Key of theme.spacing or any valid CSS value for gap, numbers are converted to rem
• getItemKey (item: T, index: number) => Key — A function to resolve a unique key for each item. Used to detect when the contents of data change (for example when items are reordered while the length stays the same) so the visible/overflow split can be recomputed. Required to detect reordering when data contains objects; for primitive items (strings, numbers) the item value is used by default.
• maxRows number (default 1) — Number of rows to display
• maxVisibleItems number (default Infinity) — Maximum number of visible items
• renderItem (item: T, index: number) => ReactNode (required) — Function to render item
• renderOverflow (items: T[]) => ReactNode (required) — Function to render hidden items

Optional leading props map; remaining args are children.

overlay clj/s

Overlay — Overlays parent element with div element with any color and opacity

https://mantine.dev/core/overlay

Polymorphic: accepts :component / :render-root.

Props (docgen 9.5.0):

• backgroundOpacity number (default 0.6) — Overlay background-color opacity 0–1, ignored when gradient prop is set
• blur string | number (default 0) — Overlay background blur in px (converted to rem). Applies backdrop-filter: blur(). Note: backdrop-filter is not supported in all browsers.
• center boolean (default false) — Centers content inside the overlay using flexbox (sets display: flex, align-items: center, justify-content: center)
• children React.ReactNode — Content inside overlay
• color BackgroundColor (default #000) — Overlay background-color
• fixed boolean (default false) — Changes position from absolute to fixed (viewport-relative instead of parent-relative)
• gradient string — Changes overlay to gradient. If set, both color and backgroundOpacity props are ignored.
• radius MantineRadius | number (default 0) — Key of theme.radius or any valid CSS value to set border-radius
• zIndex string | number (default 200) — Overlay z-index

Optional leading props map; remaining args are children.

pagination clj/s

Pagination — Display active page and navigate between multiple pages

https://mantine.dev/core/pagination

Props (docgen 9.5.0):

• autoContrast boolean — If set, adjusts text color based on the active page background color to ensure sufficient contrast
• boundaries number (default 1) — Number of elements visible on the left/right edges
• color MantineColor (default theme.primaryColor) — Key of theme.colors, active item color
• defaultValue number — Active page for uncontrolled component, must be an integer in [1, total] interval
• disabled boolean — Disables all controls, applies disabled styles
• dotsIcon PaginationIcon — Dots icon component
• firstIcon PaginationIcon — First control icon component
• formatLabel PaginationFormatLabel — Function to format the label text displayed in responsive mode
• gap MantineSpacing (default 8) — Key of theme.spacing, gap between controls
• getControlProps (control: "next" | "previous" | "first" | "last") => Record<string, any> — Props passed down to next/previous/first/last controls
• getItemProps (page: number) => Record<string, any> — Additional props passed down to controls
• hideWithOnePage boolean (default false) — If set, the pagination is hidden when only one page is available (total={1})
• lastIcon PaginationIcon — Last control icon component
• layout "default" | "responsive" (default 'default') — Determines how the pagination is displayed, 'responsive' uses CSS container queries to switch between pages and a compact label
• nextIcon PaginationIcon — Next control icon component
• onChange (value: number) => void — Called when page changes
• onFirstPage () => void — Called when first page control is clicked
• onLastPage () => void — Called when last page control is clicked
• onNextPage () => void — Called when next page control is clicked
• onPreviousPage () => void — Called when previous page control is clicked
• previousIcon PaginationIcon — Previous control icon component
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem
• siblings number (default 1) — Number of siblings displayed on the left/right side of the selected page
• size number | MantineSize | (string & {}) | "input-xs" | "input-sm" | "input-md" | "input-lg" | "input-xl" (default 'md') — height and min-width of controls
• startValue number — Starting page number, defaults to 1
• total number (required) — Total number of pages, must be an integer
• value number — Active page for controlled component, must be an integer in [1, total] interval
• withControls boolean (default true) — If set, next/previous controls are displayed
• withEdges boolean (default false) — If set, first/last controls are displayed
• withPages boolean (default true) — If set to false, page number buttons are hidden, only next/previous controls remain

Optional leading props map; remaining args are children.

pagination-control clj/s

PaginationControl — Display active page and navigate between multiple pages (Pagination family)

https://mantine.dev/core/pagination

Props (docgen 9.5.0):

• active boolean — Applies active styles, adds data-active attribute
• withPadding boolean (default true) — Applies padding

Optional leading props map; remaining args are children.

pagination-dots clj/s

PaginationDots — Display active page and navigate between multiple pages (Pagination family)

https://mantine.dev/core/pagination

Props (docgen 9.5.0):

• icon FC<PaginationIconProps> — Custom dots icon component, must accept svg element props and size prop

Optional leading props map; remaining args are children.

pagination-first clj/s

PaginationFirst — Display active page and navigate between multiple pages (Pagination family)

https://mantine.dev/core/pagination

Props (docgen 9.5.0):

• icon FC<PaginationIconProps> — An icon component to replace the default icon

Optional leading props map; remaining args are children.

pagination-items clj/s

PaginationItems — Display active page and navigate between multiple pages (Pagination family)

https://mantine.dev/core/pagination

Props (docgen 9.5.0):

• dotsIcon PaginationIcon — Dots icon component

Optional leading props map; remaining args are children.

pagination-label clj/s

Pagination.Label — compound part of Pagination (docgen omits it). Optional leading props map; remaining args are children.

pagination-last clj/s

PaginationLast — Display active page and navigate between multiple pages (Pagination family)

https://mantine.dev/core/pagination

Props (docgen 9.5.0):

• icon FC<PaginationIconProps> — An icon component to replace the default icon

Optional leading props map; remaining args are children.

pagination-next clj/s

PaginationNext — Display active page and navigate between multiple pages (Pagination family)

https://mantine.dev/core/pagination

Props (docgen 9.5.0):

• icon FC<PaginationIconProps> — An icon component to replace the default icon

Optional leading props map; remaining args are children.

pagination-previous clj/s

PaginationPrevious — Display active page and navigate between multiple pages (Pagination family)

https://mantine.dev/core/pagination

Props (docgen 9.5.0):

• icon FC<PaginationIconProps> — An icon component to replace the default icon

Optional leading props map; remaining args are children.

pagination-root clj/s

PaginationRoot — Display active page and navigate between multiple pages (Pagination family)

https://mantine.dev/core/pagination

Props (docgen 9.5.0):

• autoContrast boolean — If set, adjusts text color based on the active page background color to ensure sufficient contrast
• boundaries number (default 1) — Number of elements visible on the left/right edges
• color MantineColor (default theme.primaryColor) — Key of theme.colors, active item color
• defaultValue number — Active page for uncontrolled component, must be an integer in [1, total] interval
• disabled boolean — Disables all controls, applies disabled styles
• getItemProps (page: number) => Record<string, any> — Additional props passed down to controls
• layout "default" | "responsive" (default 'default') — Determines how the pagination is displayed, 'responsive' uses CSS container queries to switch between pages and a compact label
• onChange (value: number) => void — Called when page changes
• onFirstPage () => void — Called when first page control is clicked
• onLastPage () => void — Called when last page control is clicked
• onNextPage () => void — Called when next page control is clicked
• onPreviousPage () => void — Called when previous page control is clicked
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem
• siblings number (default 1) — Number of siblings displayed on the left/right side of the selected page
• size number | MantineSize | (string & {}) | "input-xs" | "input-sm" | "input-md" | "input-lg" | "input-xl" (default 'md') — height and min-width of controls
• startValue number — Starting page number, defaults to 1
• total number (required) — Total number of pages, must be an integer
• value number — Active page for controlled component, must be an integer in [1, total] interval

Optional leading props map; remaining args are children.

paper clj/s

Paper — Renders white or dark background depending on color scheme

https://mantine.dev/core/paper

Polymorphic: accepts :component / :render-root.

Props (docgen 9.5.0):

• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem
• shadow MantineShadow — Key of theme.shadows or any valid CSS value to set box-shadow
• withBorder boolean — Adds border to the root element

Optional leading props map; remaining args are children.

password-input clj/s

PasswordInput — Capture password data from user

https://mantine.dev/core/password-input

Props (docgen 9.5.0):

• defaultVisible boolean — If set, the input value is visible by default
• description React.ReactNode — Contents of Input.Description component. If not set, description is not displayed.
• descriptionProps InputDescriptionProps — Props passed down to the Input.Description component
• disabled boolean — Sets disabled attribute on the input element
• error React.ReactNode — Contents of Input.Error component. If not set, error is not displayed.
• errorProps InputErrorProps — Props passed down to the Input.Error component
• inputContainer (children: ReactNode) => ReactNode (default React.Fragment) — Render function to wrap the input element. Useful for adding tooltips, popovers, or other wrappers around the input.
• inputSize string — HTML size attribute for the input element (number of visible characters)
• inputWrapperOrder ("input" | "label" | "description" | "error")[] (default ['label', 'description', 'input', 'error']) — Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.
• label React.ReactNode — Contents of Input.Label component. If not set, label is not displayed.
• labelProps InputLabelProps — Props passed down to the Input.Label component
• leftSection React.ReactNode — Content section displayed on the left side of the input
• leftSectionPointerEvents React.CSSProperties["pointerEvents"] (default 'none') — Sets pointer-events styles on the leftSection element. Use 'all' when section contains interactive elements (buttons, links).
• leftSectionProps React.ComponentProps<"div"> — Props passed down to the leftSection element
• leftSectionWidth React.CSSProperties["width"] — Left section width, used to set width of the section and input padding-left, by default equals to the input height
• loading boolean (default false) — Displays loading indicator in the left or right section
• loadingPosition "left" | "right" (default 'right') — Position of the loading indicator
• onVisibilityChange (visible: boolean) => void — Called when visibility changes
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem
• required boolean (default false) — Adds required attribute to the input and a red asterisk on the right side of label
• rightSection React.ReactNode — Content section displayed on the right side of the input
• rightSectionPointerEvents React.CSSProperties["pointerEvents"] (default 'none') — Sets pointer-events styles on the rightSection element. Use 'all' when section contains interactive elements (buttons, links).
• rightSectionProps React.ComponentProps<"div"> — Props passed down to the rightSection element
• rightSectionWidth React.CSSProperties["width"] — Right section width, used to set width of the section and input padding-right, by default equals to the input height
• size MantineSize (default 'sm') — Controls input height, horizontal padding, and font-size
• success React.ReactNode — Contents of Input.Success component. If not set, success is not displayed.
• successProps InputSuccessProps & DataAttributes — Props passed down to the Input.Success component
• visibilityToggleButtonProps Record<string, any> — Props passed down to the visibility toggle button
• visibilityToggleIcon FC<{ reveal: boolean; }> — A component to replace the visibility toggle icon
• visible boolean — If set, the input value is visible
• withAsterisk boolean (default false) — If set, the required asterisk is displayed next to the label. Overrides required prop. Does not add required attribute to the input.
• withErrorStyles boolean (default true) — Determines whether the input should have red border and red text color when the error prop is set
• withSuccessStyles boolean (default true) — Determines whether the input should have green border when the success prop is set
• wrapperProps WrapperProps — Props passed down to the root element

Optional leading props map; remaining args are children.

pill clj/s

Pill — Removable and non-removable tags

https://mantine.dev/core/pill

Props (docgen 9.5.0):

• disabled boolean — Adds disabled attribute, applies disabled styles
• onRemove () => void — Called when the remove button is clicked
• radius MantineRadius | number (default 'xl') — Key of theme.radius or any valid CSS value to set border-radius. Numbers are converted to rem.
• removeButtonProps CloseButtonProps & ClassAttributes<HTMLButtonElement> & ButtonHTMLAttributes<HTMLButtonElement> — Props passed down to the remove button
• size MantineSize (default 'sm') — Controls pill font-size and padding
• withRemoveButton boolean (default false) — Controls visibility of the remove button

Optional leading props map; remaining args are children.

pill-group clj/s

PillGroup — Removable and non-removable tags (Pill family)

https://mantine.dev/core/pill

Optional leading props map; remaining args are children.

pills-input clj/s

PillsInput — Base component for custom tags inputs and multi selects

https://mantine.dev/core/pills-input

Props (docgen 9.5.0):

• description React.ReactNode — Contents of Input.Description component. If not set, description is not displayed.
• descriptionProps InputDescriptionProps — Props passed down to the Input.Description component
• disabled boolean — Sets disabled attribute on the input element
• error React.ReactNode — Contents of Input.Error component. If not set, error is not displayed.
• errorProps InputErrorProps — Props passed down to the Input.Error component
• inputContainer (children: ReactNode) => ReactNode (default React.Fragment) — Render function to wrap the input element. Useful for adding tooltips, popovers, or other wrappers around the input.
• inputSize string — HTML size attribute for the input element (number of visible characters)
• inputWrapperOrder ("input" | "label" | "description" | "error")[] (default ['label', 'description', 'input', 'error']) — Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.
• label React.ReactNode — Contents of Input.Label component. If not set, label is not displayed.
• labelProps InputLabelProps — Props passed down to the Input.Label component
• leftSection React.ReactNode — Content section displayed on the left side of the input
• leftSectionPointerEvents React.CSSProperties["pointerEvents"] (default 'none') — Sets pointer-events styles on the leftSection element. Use 'all' when section contains interactive elements (buttons, links).
• leftSectionProps React.ComponentProps<"div"> — Props passed down to the leftSection element
• leftSectionWidth React.CSSProperties["width"] — Left section width, used to set width of the section and input padding-left, by default equals to the input height
• loading boolean (default false) — Displays loading indicator in the left or right section
• loadingPosition "left" | "right" (default 'right') — Position of the loading indicator
• pointer boolean (default false) — Determines whether the input should have cursor: pointer style. Use when input acts as a button-like trigger (e.g., component="button" for Select/DatePicker).
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem
• required boolean (default false) — Adds required attribute to the input and a red asterisk on the right side of label
• rightSection React.ReactNode — Content section displayed on the right side of the input
• rightSectionPointerEvents React.CSSProperties["pointerEvents"] (default 'none') — Sets pointer-events styles on the rightSection element. Use 'all' when section contains interactive elements (buttons, links).
• rightSectionProps React.ComponentProps<"div"> — Props passed down to the rightSection element
• rightSectionWidth React.CSSProperties["width"] — Right section width, used to set width of the section and input padding-right, by default equals to the input height
• size MantineSize (default 'sm') — Controls input height, horizontal padding, and font-size
• success React.ReactNode — Contents of Input.Success component. If not set, success is not displayed.
• successProps InputSuccessProps & DataAttributes — Props passed down to the Input.Success component
• withAsterisk boolean (default false) — If set, the required asterisk is displayed next to the label. Overrides required prop. Does not add required attribute to the input.
• withErrorStyles boolean (default true) — Determines whether the input should have red border and red text color when the error prop is set
• withSuccessStyles boolean (default true) — Determines whether the input should have green border when the success prop is set
• wrapperProps WrapperProps — Props passed down to the root element

Optional leading props map; remaining args are children.

pills-input-field clj/s

PillsInputField — Base component for custom tags inputs and multi selects (PillsInput family)

https://mantine.dev/core/pills-input

Props (docgen 9.5.0):

• pointer boolean — If set, cursor is changed to pointer
• type "hidden" | "auto" | "visible" (default 'visible') — Controls input styles when focused. If auto the input is hidden when not focused. If visible the input will always remain visible.

Optional leading props map; remaining args are children.

pin-input clj/s

PinInput — Capture pin code or one time password from the user

https://mantine.dev/core/pin-input

Props (docgen 9.5.0):

• ariaLabel string — aria-label attribute
• autoFocus boolean (default false) — If set, the first input is focused when component is mounted
• defaultValue string — Uncontrolled component default value
• disabled boolean — Adds disabled attribute to all inputs
• error boolean — Sets aria-invalid attribute and applies error styles to all inputs
• form string — Hidden input form attribute
• gap MantineSpacing (default 'md') — Key of theme.spacing or any valid CSS value to set gap between inputs, numbers are converted to rem
• getInputProps (index: number) => InputProps & ElementProps<"input", "size"> & DataAttributes — Props added to the input element depending on its index
• hiddenInputProps React.ComponentProps<"input"> — Props passed down to the hidden input
• id string — Base id used to generate unique ids for inputs
• inputMode "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" — inputmode attribute, inferred from the type prop if not specified
• inputType HTMLInputTypeAttribute — Inputs type attribute, inferred from the type prop if not specified
• length number (default 4) — Number of inputs
• manageFocus boolean (default true) — Determines whether focus should be moved automatically to the next input once filled
• mask boolean (default false) — Changes input type to "password"
• name string — Hidden input name attribute
• onChange (value: string) => void — Called when value changes
• onComplete (value: string) => void — Called when all inputs have value
• oneTimeCode boolean (default true) — Determines whether autocomplete="one-time-code" attribute should be set on all inputs
• placeholder string (default '○') — Inputs placeholder
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem
• readOnly boolean — If set, the user cannot edit the value
• rootRef Ref<HTMLDivElement> — Assigns ref of the root element
• size MantineSize (default 'sm') — Controls inputs width and height
• success boolean — Applies success styles to all inputs
• type "number" | RegExp | "alphanumeric" (default 'alphanumeric') — Determines which values can be entered
• value string — Controlled component value

Optional leading props map; remaining args are children.

popover clj/s

Popover — Display popover section relative to given target element

https://mantine.dev/core/popover

Props (docgen 9.5.0):

• arrowOffset number (default 5) — Arrow offset in px
• arrowPosition 'center' | 'side' — Arrow position
• arrowRadius number (default 0) — Arrow border-radius in px
• arrowSize number (default 7) — Arrow size in px
• children React.ReactNode — Popover.Target and Popover.Dropdown components
• clickOutsideEvents string[] — Events that trigger outside clicks
• closeOnClickOutside boolean (default true) — Determines whether dropdown should be closed on outside clicks
• closeOnEscape boolean (default true) — Determines whether dropdown should be closed when Escape key is pressed
• defaultOpened boolean — Initial opened state for uncontrolled component
• disabled boolean — If set, popover dropdown will not be rendered
• floatingStrategy FloatingStrategy (default 'absolute') — Changes floating ui position strategy
• hideDetached boolean (default true) — If set, the dropdown is hidden when the element is hidden with styles or not visible on the screen
• id string — Id base to create accessibility connections
• keepMounted boolean — If set, the dropdown is not unmounted from the DOM when hidden. display: none styles are added instead.
• keepMountedMode "activity" | "display-none" (default 'activity') — Controls how the dropdown is hidden when keepMounted is set: 'activity' – hidden with React 19 Activity component, 'display-none' – hidden with display: none styles
• middlewares PopoverMiddlewares (default { flip: true, shift: true, inline: false }) — Floating ui middlewares to configure position handling
• offset number | FloatingAxesOffsets (default 8) — Offset of the dropdown element
• onChange (opened: boolean) => void — Called with current state when dropdown opens or closes
• onClose () => void — Called when dropdown closes
• onDismiss () => void — Called when the popover is dismissed by clicking outside or by pressing escape
• onEnterTransitionEnd () => void — Called when enter transition ends
• onExitTransitionEnd () => void — Called when exit transition ends
• onOpen () => void — Called when dropdown opens
• onPositionChange (position: FloatingPosition) => void — Called when dropdown position changes
• opened boolean — Controlled dropdown opened state
• overlayProps OverlayProps & ElementProps<"div"> — Props passed down to Overlay component
• portalProps BasePortalProps — Props to pass down to the Portal when withinPortal is true
• position FloatingPosition (default 'bottom') — Dropdown position relative to the target element
• preventPositionChangeWhenVisible boolean (default true) — If true, the dropdown picks its side on open (flip runs once, preferring the position prop) and then never changes side — scrolling, resizing, and content size changes will not flip the dropdown. The side is recalculated fresh on the next open. Does not affect the shift middleware. Set to false to keep flip active and allow the dropdown to re-flip on every change.
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius
• returnFocus boolean (default false) — Determines whether focus should be automatically returned to control when dropdown closes
• shadow MantineShadow — Key of theme.shadows or any other valid CSS box-shadow value
• transitionProps TransitionProps (default { duration: 150, transition: 'fade' }) — Props passed down to the Transition component. Use to configure duration and animation type.
• trapFocus boolean (default false) — Determines whether focus should be trapped within dropdown
• width PopoverWidth (default 'max-content') — Dropdown width, or 'target' to make dropdown width the same as target element
• withArrow boolean (default false) — Determines whether component should have an arrow
• withOverlay boolean (default false) — Determines whether the overlay should be displayed when the dropdown is opened
• withRoles boolean (default true) — Determines whether dropdown and target elements should have accessible roles
• withinPortal boolean (default true) — Determines whether dropdown should be rendered within the Portal
• zIndex string | number (default 300) — Dropdown z-index

Optional leading props map; remaining args are children.

popover-context-menu clj/s

PopoverContextMenu — Display popover section relative to given target element (Popover family)

https://mantine.dev/core/popover

Props (docgen 9.5.0):

• children React.ReactNode (required) — Element that opens the popover when right-clicked. Dropdown is positioned at the cursor. The trigger element must not call event.preventDefault() in its own onContextMenu handler, otherwise the native context menu is not suppressed.
• disabled boolean — If set, the right-click trigger is disabled and the browser's default context menu is shown
• longPressDelay number — Delay in ms before a touch long-press opens the dropdown on touch devices, 500 by default

Optional leading props map; remaining args are children.

popover-dropdown clj/s

PopoverDropdown

Optional leading props map; remaining args are children.

popover-target clj/s

PopoverTarget — Display popover section relative to given target element (Popover family)

https://mantine.dev/core/popover

Props (docgen 9.5.0):

• children React.ReactNode (required) — Target element
• popupType string (default 'dialog') — Popup accessible type
• refProp string — Key of the prop that should be used to access element ref

Optional leading props map; remaining args are children.

portal clj/s

Portal — Renders component outside of parent element tree

https://mantine.dev/core/portal

Props (docgen 9.5.0):

• children React.ReactNode (required) — Content to render inside the portal
• reuseTargetNode boolean (default true) — When true and target is not specified, all Portal instances share a single container node appended to document.body. When false, each Portal creates its own container node. Has no effect when target is specified.
• target string | HTMLElement — Target element where portal should be rendered. Accepts: - HTMLElement: Renders portal inside this element - string: CSS selector - renders inside first matching element - undefined: Uses shared portal node or creates new one based on reuseTargetNode Note: If selector doesn't match any element, portal will not render

Optional leading props map; remaining args are children.

progress clj/s

Progress — Give user feedback for status of the task

https://mantine.dev/core/progress

Props (docgen 9.5.0):

• animated boolean (default false) — If set, the sections stripes are animated (automatically enables striped)
• autoContrast boolean — If set, adjusts label text color based on section background color for readability
• color MantineColor (default theme.primaryColor) — Key of theme.colors or any valid CSS value
• orientation "horizontal" | "vertical" (default 'horizontal') — Controls orientation
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius
• size MantineSize | number (default 'md') — Controls track height
• striped boolean (default false) — If set, the section has stripes
• transitionDuration number (default 100) — Controls sections width transition duration, value is specified in ms
• value number (required) — Value of the progress

Optional leading props map; remaining args are children.

progress-label clj/s

Progress.Label — compound part of Progress (docgen omits it). Optional leading props map; remaining args are children.

progress-root clj/s

ProgressRoot — Give user feedback for status of the task (Progress family)

https://mantine.dev/core/progress

Props (docgen 9.5.0):

• autoContrast boolean — If set, adjusts label text color based on section background color for readability
• orientation "horizontal" | "vertical" (default 'horizontal') — Controls orientation
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius
• size MantineSize | number (default 'md') — Controls track height
• transitionDuration number (default 100) — Controls sections width transition duration, value is specified in ms

Optional leading props map; remaining args are children.

progress-section clj/s

ProgressSection — Give user feedback for status of the task (Progress family)

https://mantine.dev/core/progress

Props (docgen 9.5.0):

• animated boolean (default false) — If set, the sections stripes are animated, striped prop is ignored
• color MantineColor (default theme.primaryColor) — Key of theme.colors or any valid CSS value
• striped boolean (default false) — If set, the section has stripes
• value number (required) — Value of the section in 0–100 range
• withAria boolean (default true) — Determines whether aria-* props should be added to the root element

Optional leading props map; remaining args are children.

radio clj/s

Radio — Wrapper for input type radio

https://mantine.dev/core/radio

Props (docgen 9.5.0):

• autoContrast boolean — If set, adjusts text color based on background color for filled variant
• color MantineColor (default theme.primaryColor) — Key of theme.colors or any valid CSS color to set radio background color in checked state
• description React.ReactNode — Description displayed below the label
• error React.ReactNode — Error displayed below the label
• icon FC<RadioIconProps> — A component that replaces the default radio icon (centered dot)
• iconColor MantineColor — Key of theme.colors or any valid CSS color to set icon color. When not set, icon color is determined automatically based on theme.autoContrast setting
• label React.ReactNode — Content of the label associated with the radio
• labelPosition "left" | "right" (default 'right') — Position of the label relative to the input
• radius MantineRadius | number (default 'xl') — Key of theme.radius or any valid CSS value to set border-radius
• rootRef Ref<HTMLDivElement> — Assigns ref of the root element
• size MantineSize (default 'sm') — Controls size of the component
• withErrorStyles boolean (default true) — If set, applies error styles to the radio when error prop is set
• wrapperProps React.ComponentProps<"div"> — Props passed down to the root element

Optional leading props map; remaining args are children.

radio-card clj/s

RadioCard — Wrapper for input type radio (Radio family)

https://mantine.dev/core/radio

Props (docgen 9.5.0):

• checked boolean — Checked state
• name string — Value used to associate all related radio cards, required for accessibility if used outside of Radio.Group
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem
• value string — Value of the radio, used with Radio.Group
• withBorder boolean — Adds border to the root element

Optional leading props map; remaining args are children.

radio-card-context clj/s

RadioCardContext

Optional leading props map; remaining args are children.

radio-group clj/s

RadioGroup — Wrapper for input type radio (Radio family)

https://mantine.dev/core/radio

Props (docgen 9.5.0):

• children React.ReactNode (required) — Radio components and any other elements
• defaultValue Primitive | null — Uncontrolled component default value
• description React.ReactNode — Contents of Input.Description component. If not set, description is not displayed.
• descriptionProps InputDescriptionProps — Props passed down to the Input.Description component
• disabled boolean — Sets disabled attribute, prevents interactions
• error React.ReactNode — Contents of Input.Error component. If not set, error is not displayed.
• errorProps InputErrorProps — Props passed down to the Input.Error component
• id string — Static id used as base to generate aria- attributes, by default generates random id
• inputContainer (children: ReactNode) => ReactNode (default React.Fragment) — Render function to wrap the input element. Useful for adding tooltips, popovers, or other wrappers around the input.
• inputWrapperOrder ("input" | "label" | "description" | "error")[] (default ['label', 'description', 'input', 'error']) — Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.
• label React.ReactNode — Contents of Input.Label component. If not set, label is not displayed.
• labelElement "div" | "label" (default 'label') — Root element for the label. Use 'div' when wrapper contains multiple input elements and you need to handle htmlFor manually.
• labelProps InputLabelProps — Props passed down to the Input.Label component
• name string — name attribute of child radio inputs. By default, name is generated randomly.
• onChange (value: Value) => void — Called when value changes
• readOnly boolean — If set, value cannot be changed
• required boolean (default false) — Adds required attribute to the input and a red asterisk on the right side of label
• size MantineSize (default 'sm') — Controls size of the Input.Wrapper
• success React.ReactNode — Contents of Input.Success component. If not set, success is not displayed.
• successProps InputSuccessProps & DataAttributes — Props passed down to the Input.Success component
• value Primitive | null — Controlled component value
• withAsterisk boolean (default false) — If set, the required asterisk is displayed next to the label. Overrides required prop. Does not add required attribute to the input.
• wrapperProps React.ComponentProps<"div"> — Props passed down to the Input.Wrapper

Optional leading props map; remaining args are children.

radio-group-context clj/s

RadioGroupContext

Optional leading props map; remaining args are children.

radio-indicator clj/s

RadioIndicator — Wrapper for input type radio (Radio family)

https://mantine.dev/core/radio

Props (docgen 9.5.0):

• autoContrast boolean — If set, adjusts text color based on background color for filled variant
• checked boolean — Checked state
• color MantineColor (default theme.primaryColor) — Key of theme.colors or any valid CSS color to set indicator background color in checked state
• disabled boolean — Disabled state
• icon FC<RadioIconProps> — A component that replaces the default radio icon (centered dot)
• iconColor MantineColor — Key of theme.colors or any valid CSS color to set icon color. When not set, icon color is determined automatically based on theme.autoContrast setting
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius
• size MantineSize | number (default 'sm') — Controls size of the component

Optional leading props map; remaining args are children.

range-slider clj/s

RangeSlider — RangeSlider component

https://mantine.dev/core/range-slider

Props (docgen 9.5.0):

• color MantineColor (default theme.primaryColor) — Key of theme.colors or any valid CSS color, controls color of track and thumb
• defaultValue RangeSliderValue — Uncontrolled component default value
• disabled boolean — Disables slider
• domain [number, number] (default [min, max]) — Domain of the slider, defines the selectable value range independently of min/max. Useful when you want to display a wider track range (min/max) but restrict actual selection to a subset (domain).
• hiddenInputProps React.ComponentProps<"input"> — Props passed down to the hidden input
• inverted boolean (default false) — Determines whether track values representation should be inverted
• label ReactNode | ((value: number) => ReactNode) — Function to generate label or any react node to render instead, set to null to disable label
• labelAlwaysOn boolean (default false) — Determines whether the label should be visible when the slider is not being dragged or hovered
• labelTransitionProps TransitionProps (default { transition: 'fade', duration: 0 }) — Props passed down to the Transition component
• marks SliderMark[] — Marks displayed on the track
• max number (default 100) — Maximum possible value
• maxRange number (default Infinity) — Maximum range interval
• min number (default 0) — Minimal possible value
• minRange number (default 10) — Minimal range interval between the two thumbs. Consider this value relative to the total range (max - min).
• name string — Hidden input name, use with uncontrolled component
• onChange (value: RangeSliderValue) => void — Called when value changes
• onChangeEnd (value: RangeSliderValue) => void — Called when user stops dragging slider or changes value with arrows
• orientation "horizontal" | "vertical" (default 'horizontal') — Slider orientation
• precision number — Number of significant digits after the decimal point
• pushOnOverlap boolean (default true) — Determines whether the other thumb should be pushed by the current thumb dragging when minRange/maxRange is reached
• radius MantineRadius | number (default 'xl') — Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem
• restrictToMarks boolean (default false) — Determines whether the selection should be only allowed from the given marks array
• scale (value: number) => number — A transformation function to change the scale of the slider
• showLabelOnHover boolean (default true) — Determines whether the label should be displayed when the slider is hovered
• size MantineSize | number (default 'md') — Controls size of the track
• step number (default 1) — Number by which value will be incremented/decremented with thumb drag and arrows
• thumbChildren React.ReactNode — Content rendered inside thumb
• thumbFromLabel string — First thumb aria-label
• thumbLabel string — aria-label for both thumbs (overridden by thumbFromLabel/thumbToLabel if provided)
• thumbProps (index: 0 | 1) => DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> — Props passed down to thumb element based on the thumb index
• thumbSize string | number — Thumb width and height, by default value is computed based on size prop
• thumbToLabel string — Second thumb aria-label
• thumbValueText string | ((value: number) => string) — aria-valuetext for both thumbs. When a function is provided, it receives the scaled value.
• value RangeSliderValue — Controlled component value

Optional leading props map; remaining args are children.

rating clj/s

Rating — Pick and display rating

https://mantine.dev/core/rating

Props (docgen 9.5.0):

• allowClear boolean — When true, clicking the same rating value clears the rating to 0, default is false
• color MantineColor — Key of theme.colors or any CSS color value, default is 'yellow'
• count number — Number of rating items (stars), default is 5
• defaultValue number — Uncontrolled component default value
• emptySymbol ReactNode | ((value: number) => ReactNode) — Icon displayed for unselected rating items. Can be a function that receives the rating value.
• fractions number — Number of fractions each item can be divided into, default is 1
• fullSymbol ReactNode | ((value: number) => ReactNode) — Icon displayed for selected rating items. Can be a function that receives the rating value.
• getSymbolLabel (index: number) => string — Function to generate aria-label for each rating value. Receives the rating value as argument, default is (value) => String(value)
• highlightSelectedOnly boolean — When true, only the clicked rating item is highlighted, not all items up to the selected value, default is false
• name string — Name attribute for form submission. If not provided, a unique id will be generated.
• onChange (value: number) => void — Called when value changes
• onHover (value: number) => void — Called when rating item is hovered. Receives -1 when hover ends.
• readOnly boolean — When true, rating cannot be changed by user interaction, default is false
• size MantineSize | number (default 'sm') — Controls component size
• value number — Controlled component value

Optional leading props map; remaining args are children.

rem clj/s

rem — Mantine px->rem helper. Raw passthrough of the JS fn (pass a number or string; returns a rem string).

ring-progress clj/s

RingProgress — Give user feedback for status of the task with circle diagram

https://mantine.dev/core/ring-progress

Props (docgen 9.5.0):

• label React.ReactNode — Label displayed in the center of the ring
• rootColor MantineColor — Color of the unfilled portion of the ring (background). Defaults to gray-2 in light mode, dark-4 in dark mode
• roundCaps boolean (default false) — Applies rounded line caps to the start and end of visible sections
• sectionGap number (default 0) — Gap between sections in degrees. Reduces the visual size of each section
• sections RingProgressSection[] (required) — Array of sections to display in the ring. Each section should have a value (0-100), color, and optional tooltip. Sections can also receive any valid SVG circle element props.
• size number (default 120) — Width and height of the progress ring
• startAngle number (default 270) — Starting angle in degrees. 0 = right, 90 = bottom, 180 = left, 270 = top
• thickness number (default 12) — Ring thickness in pixels. Cannot exceed size / 4 and will be automatically clamped if necessary
• transitionDuration number (default 0) — Transition duration in milliseconds for section value and color changes

Optional leading props map; remaining args are children.

rolling-number clj/s

RollingNumber — Animate value changes with rolling digits

https://mantine.dev/core/rolling-number

Props (docgen 9.5.0):

• animationDuration number (default 600) — Animation duration in milliseconds
• decimalScale number — Number of decimal places to display
• decimalSeparator string (default '.') — Character used as a decimal separator
• fixedDecimalScale boolean (default false) — If set, trailing zeros are added to match decimalScale
• prefix string — Prefix added before the value
• suffix string — Suffix added after the value
• tabularNumbers boolean (default true) — If set, use tabular (monospace) numbers
• thousandSeparator string | boolean (default false) — Character used to separate thousands, set to true for ,
• timingFunction string (default 'ease') — CSS timing function for animation
• value number (required) — Number value to display
• withLiveRegion boolean (default false) — If set, the root element acts as an aria-live="polite" region (role="status") and screen readers announce every value change. When false, the root uses role="img" so the current value is still accessible but updates are not announced.

Optional leading props map; remaining args are children.

scroll-area clj/s

ScrollArea — Area with custom scrollbars

https://mantine.dev/core/scroll-area

Props (docgen 9.5.0):

• offsetScrollbars boolean | "x" | "y" | "present" (default false) — Determines whether scrollbars should be offset with padding on given axis - true - adds padding to offset both scrollbars (always) - 'x' - adds padding to offset horizontal scrollbar (always) - 'y' - adds padding to offset vertical scrollbar (always) - 'present' - adds padding only when scrollbars are visible (dynamic)
• onBottomReached () => void — Called when scrollarea is scrolled to the bottom (within 0.8px tolerance for sub-pixel rendering)
• onLeftReached () => void — Called when scrollarea is scrolled to the left (within 0.8px tolerance for sub-pixel rendering)
• onRightReached () => void — Called when scrollarea is scrolled to the right (within 0.8px tolerance for sub-pixel rendering)
• onScrollPositionChange (position: { x: number; y: number; }) => void — Called with current position (x and y coordinates) when viewport is scrolled
• onTopReached () => void — Called when scrollarea is scrolled all the way to the top
• overscrollBehavior OverscrollBehavior — Defines overscroll-behavior of the viewport
• scrollHideDelay number (default 1000) — Scroll hide delay in ms, applicable only when type is set to hover or scroll
• scrollbarSize string | number — Scrollbar size, any valid CSS value for width/height, numbers are converted to rem, default value is 12px (0.75rem)
• scrollbars false | "x" | "y" | "xy" (default 'xy') — Axis at which scrollbars must be rendered - 'x' - horizontal scrollbar only - 'y' - vertical scrollbar only - 'xy' - both scrollbars - false - no scrollbars rendered (content remains scrollable via mouse/touch)
• startScrollPosition { x?: number; y?: number | undefined; } | undefined — Initial scroll position set on mount
• type "auto" | "scroll" | "always" | "hover" | "never" (default 'hover') — Defines scrollbars behavior - 'hover' – scrollbars visible on hover (default) - 'scroll' – scrollbars visible during scrolling - 'auto' – scrollbars visible only when content overflows (like CSS overflow: auto) - 'always' – scrollbars always visible, even when content doesn't overflow - 'never' – scrollbars always hidden
• verticalScrollbarPosition "left" | "right" — Pins the vertical scrollbar to a physical side (left or right) regardless of direction. By default, the scrollbar follows the inline-end edge (right in LTR, left in RTL).
• viewportProps React.ComponentProps<"div"> — Props passed down to the viewport element
• viewportRef Ref<HTMLDivElement> — Assigns viewport element (scrollable container) ref

Optional leading props map; remaining args are children.

scroll-area-autosize clj/s

ScrollAreaAutosize

Props (docgen 9.5.0):

• offsetScrollbars boolean | "x" | "y" | "present" (default false) — Determines whether scrollbars should be offset with padding on given axis - true - adds padding to offset both scrollbars (always) - 'x' - adds padding to offset horizontal scrollbar (always) - 'y' - adds padding to offset vertical scrollbar (always) - 'present' - adds padding only when scrollbars are visible (dynamic)
• onBottomReached () => void — Called when scrollarea is scrolled to the bottom (within 0.8px tolerance for sub-pixel rendering)
• onLeftReached () => void — Called when scrollarea is scrolled to the left (within 0.8px tolerance for sub-pixel rendering)
• onOverflowChange (overflowing: boolean) => void — Called when content overflows due to max-height, making the container scrollable
• onRightReached () => void — Called when scrollarea is scrolled to the right (within 0.8px tolerance for sub-pixel rendering)
• onScrollPositionChange (position: { x: number; y: number; }) => void — Called with current position (x and y coordinates) when viewport is scrolled
• onTopReached () => void — Called when scrollarea is scrolled all the way to the top
• overscrollBehavior OverscrollBehavior — Defines overscroll-behavior of the viewport
• scrollHideDelay number (default 1000) — Scroll hide delay in ms, applicable only when type is set to hover or scroll
• scrollbarSize string | number — Scrollbar size, any valid CSS value for width/height, numbers are converted to rem, default value is 12px (0.75rem)
• scrollbars false | "x" | "y" | "xy" (default 'xy') — Axis at which scrollbars must be rendered - 'x' - horizontal scrollbar only - 'y' - vertical scrollbar only - 'xy' - both scrollbars - false - no scrollbars rendered (content remains scrollable via mouse/touch)
• startScrollPosition { x?: number; y?: number | undefined; } | undefined — Initial scroll position set on mount
• type "auto" | "scroll" | "always" | "hover" | "never" (default 'hover') — Defines scrollbars behavior - 'hover' – scrollbars visible on hover (default) - 'scroll' – scrollbars visible during scrolling - 'auto' – scrollbars visible only when content overflows (like CSS overflow: auto) - 'always' – scrollbars always visible, even when content doesn't overflow - 'never' – scrollbars always hidden
• verticalScrollbarPosition "left" | "right" — Pins the vertical scrollbar to a physical side (left or right) regardless of direction. By default, the scrollbar follows the inline-end edge (right in LTR, left in RTL).
• viewportProps React.ComponentProps<"div"> — Props passed down to the viewport element
• viewportRef Ref<HTMLDivElement> — Assigns viewport element (scrollable container) ref

Optional leading props map; remaining args are children.

scroller clj/s

Scroller — Horizontal scroll container with navigation controls

https://mantine.dev/core/scroller

Props (docgen 9.5.0):

• children React.ReactNode (required) — Content to display
• controlSize string | number (default 60px) — Size of the control buttons,
• draggable boolean — Determines whether content can be scrolled by dragging with mouse, true by default
• edgeGradientColor string — Background color for the gradient fade on controls, 'var(--mantine-color-body)' by default
• endControlIcon React.ReactNode — Icon component for the end control, AccordionChevron by default
• endControlProps React.ComponentProps<"button"> — Props passed to the end control button
• scrollAmount number — Amount of pixels to scroll when clicking the control buttons, 200 by default
• showEndControl boolean — Determines whether end control should always be visible regardless of scroll position, false by default
• showStartControl boolean — Determines whether start control should always be visible regardless of scroll position, false by default
• startControlIcon React.ReactNode — Icon component for the start control, AccordionChevron by default
• startControlProps React.ComponentProps<"button"> — Props passed to the start control button

Optional leading props map; remaining args are children.

segmented-control clj/s

SegmentedControl — A linear set of two or more segments

https://mantine.dev/core/segmented-control

Props (docgen 9.5.0):

• autoContrast boolean — If set, automatically adjusts label text color for optimal contrast against the indicator background color
• color MantineColor — Key of theme.colors or any valid CSS color, changes indicator background color. By default, uses white in light mode and dark.5 in dark mode
• data (Value | SegmentedControlItem<Value>)[] (required) — Data based on which controls are rendered
• defaultValue Primitive — Uncontrolled component default value
• disabled boolean — Determines whether the component is disabled
• fullWidth boolean (default false) — Determines whether the component should take 100% width of its parent
• name string — Name attribute for the radio group. A random name is auto-generated if not provided
• onChange (value: Value) => void — Called when value changes
• orientation "horizontal" | "vertical" (default 'horizontal') — Component orientation
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem
• readOnly boolean — If set to false, prevents changing the value
• size MantineSize (default 'sm') — Controls font-size, padding and height properties
• transitionDuration number (default 200) — Indicator transition-duration in ms, set 0 to turn off transitions
• transitionTimingFunction string (default ease) — Indicator transition-timing-function property
• value Primitive — Controlled component value
• withItemsBorders boolean (default true) — Determines whether there should be borders between items

Optional leading props map; remaining args are children.

select clj/s

Select — Custom searchable select

https://mantine.dev/core/select

Props (docgen 9.5.0):

• allowDeselect boolean (default true) — Allows deselecting the selected option by clicking it
• autoSelectOnBlur boolean (default false) — Automatically selects the highlighted option when input loses focus
• checkIconPosition "left" | "right" (default 'left') — Position of the check icon relative to the option label
• chevronColor MantineColor — Controls color of the default chevron, by default depends on the color scheme
• clearButtonProps InputClearButtonProps — Props passed down to the clear button
• clearSectionMode ClearSectionMode (default 'both') — Determines how the clear button and rightSection are rendered
• clearable boolean (default false) — Displays clear button in the right section when component has value
• comboboxProps ComboboxProps — Props passed down to Combobox component
• data ComboboxData<Value> — Data used to generate options. Values must be unique, otherwise an error will be thrown and component will not render.
• defaultDropdownOpened boolean — Uncontrolled dropdown initial opened state
• defaultSearchValue string — Default search value
• defaultValue Primitive | null — Uncontrolled component default value
• description React.ReactNode — Contents of Input.Description component. If not set, description is not displayed.
• descriptionProps InputDescriptionProps — Props passed down to the Input.Description component
• disabled boolean — Sets disabled attribute on the input element
• dropdownOpened boolean — Controlled dropdown opened state
• error React.ReactNode — Contents of Input.Error component. If not set, error is not displayed.
• errorProps InputErrorProps — Props passed down to the Input.Error component
• filter OptionsFilter<Value> — Function based on which items are filtered and sorted
• floatingHeight "viewport" — If set to 'viewport', the dropdown grows to fill the available vertical space in the viewport. Disables the flip middleware.
• hiddenInputProps React.ComponentProps<"input"> — Props passed down to the hidden input
• inputContainer (children: ReactNode) => ReactNode (default React.Fragment) — Render function to wrap the input element. Useful for adding tooltips, popovers, or other wrappers around the input.
• inputSize string — HTML size attribute for the input element (number of visible characters)
• inputWrapperOrder ("input" | "label" | "description" | "error")[] (default ['label', 'description', 'input', 'error']) — Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.
• label React.ReactNode — Contents of Input.Label component. If not set, label is not displayed.
• labelProps InputLabelProps — Props passed down to the Input.Label component
• leftSection React.ReactNode — Content section displayed on the left side of the input
• leftSectionPointerEvents React.CSSProperties["pointerEvents"] (default 'none') — Sets pointer-events styles on the leftSection element. Use 'all' when section contains interactive elements (buttons, links).
• leftSectionProps React.ComponentProps<"div"> — Props passed down to the leftSection element
• leftSectionWidth React.CSSProperties["width"] — Left section width, used to set width of the section and input padding-left, by default equals to the input height
• limit number — Maximum number of options displayed at a time, Infinity by default
• loading boolean (default false) — Displays loading indicator in the left or right section
• loadingPosition "left" | "right" (default 'right') — Position of the loading indicator
• maxDropdownHeight string | number — max-height of the dropdown, only applicable when withScrollArea prop is true, 250 by default
• nothingFoundMessage React.ReactNode — Message displayed when no options match the search query or when there is no data
• onChange (value: Value | null, option: ComboboxItem<Value>) => void — Called when value changes
• onClear () => void — Called when the clear button is clicked
• onDropdownClose () => void — Called when dropdown closes
• onDropdownOpen () => void — Called when dropdown opens
• onOptionSubmit (value: Value) => void — Called when option is submitted from dropdown with mouse click or Enter key
• onSearchChange (value: string) => void — Called when search changes
• openOnFocus boolean (default true) — Opens dropdown when input receives focus (requires searchable={true})
• pointer boolean (default false) — Determines whether the input should have cursor: pointer style. Use when input acts as a button-like trigger (e.g., component="button" for Select/DatePicker).
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem
• renderOption (item: ComboboxLikeRenderOptionInput<ComboboxItem<Value>>) => ReactNode — A function to render content of the option, replaces the default content of the option
• required boolean (default false) — Adds required attribute to the input and a red asterisk on the right side of label
• rightSection React.ReactNode — Content section displayed on the right side of the input
• rightSectionPointerEvents React.CSSProperties["pointerEvents"] (default 'none') — Sets pointer-events styles on the rightSection element. Use 'all' when section contains interactive elements (buttons, links).
• rightSectionProps React.ComponentProps<"div"> — Props passed down to the rightSection element
• rightSectionWidth React.CSSProperties["width"] — Right section width, used to set width of the section and input padding-right, by default equals to the input height
• scrollAreaProps ScrollAreaProps — Props passed down to the underlying ScrollArea component in the dropdown
• searchValue string — Controlled search value
• searchable boolean (default false) — Determines whether the select should be searchable
• selectFirstOptionOnChange boolean — If set, the first option is selected when value changes, false by default
• selectFirstOptionOnDropdownOpen boolean — If set, the first option is selected when dropdown opens, false by default
• size MantineSize (default 'sm') — Controls input height, horizontal padding, and font-size
• success React.ReactNode — Contents of Input.Success component. If not set, success is not displayed.
• successProps InputSuccessProps & DataAttributes — Props passed down to the Input.Success component
• value Primitive | null — Controlled component value
• withAlignedLabels boolean (default false) — Aligns unchecked labels with the checked one
• withAsterisk boolean (default false) — If set, the required asterisk is displayed next to the label. Overrides required prop. Does not add required attribute to the input.
• withCheckIcon boolean (default true) — Displays check icon near the selected option label
• withErrorStyles boolean (default true) — Determines whether the input should have red border and red text color when the error prop is set
• withScrollArea boolean — Determines whether the options should be wrapped with ScrollArea.AutoSize, true by default
• withSuccessStyles boolean (default true) — Determines whether the input should have green border when the success prop is set
• wrapperProps WrapperProps — Props passed down to the root element

Optional leading props map; remaining args are children.

semi-circle-progress clj/s

SemiCircleProgress — Represent progress with semi circle diagram

https://mantine.dev/core/semi-circle-progress

Props (docgen 9.5.0):

• emptySegmentColor MantineColor (default 'gray.2' in light mode, 'dark.4' in dark mode) — Key of theme.colors or any valid CSS color value
• fillDirection "right-to-left" | "left-to-right" (default 'left-to-right') — Direction from which the circle is filled
• filledSegmentColor MantineColor (default theme.primaryColor) — Key of theme.colors or any valid CSS color value
• label React.ReactNode — Label rendered inside the circle
• labelPosition "center" | "bottom" (default 'bottom') — Label position relative to the circle center
• orientation "up" | "down" (default 'up') — Orientation of the circle
• size number (default 200) — Width of the component and diameter of the full circle in px. The visible SVG height will be size/2
• thickness number (default 12) — Stroke width of the circle segments in px
• transitionDuration number (default 0) — Transition duration for the filled segment progress changes in ms. Does not affect color transitions
• value number (required) — Progress value from 0 to 100

Optional leading props map; remaining args are children.

simple-grid clj/s

SimpleGrid — Responsive grid in which each item takes equal amount of space

https://mantine.dev/core/simple-grid

Props (docgen 9.5.0):

• autoFlow "auto-fit" | "auto-fill" (default 'auto-fill') — Grid repeat type when minColWidth is set
• autoRows string — Sets the size of implicitly created grid rows
• cols StyleProp<number> (default 1) — Number of columns
• minColWidth string | number — Minimum column width when using auto-fit/auto-fill. When set, cols prop is ignored
• spacing StyleProp<MantineSpacing> (default 'md') — Spacing between columns
• type "media" | "container" (default 'media') — Determines type of queries that are used for responsive styles
• verticalSpacing StyleProp<MantineSpacing> (default undefined) — Spacing between rows. When not set, falls back to spacing value

Optional leading props map; remaining args are children.

skeleton clj/s

Skeleton — Indicate content loading state

https://mantine.dev/core/skeleton

Props (docgen 9.5.0):

• animate boolean (default true) — Enables animation
• circle boolean (default false) — If set, Skeleton width and border-radius are equal to its height
• height Height<string | number> (default auto) — Skeleton height, numbers are converted to rem
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius. Numbers are converted to rem.
• visible boolean (default true) — Determines whether Skeleton overlay should be displayed
• width React.CSSProperties["width"] (default 100%) — Skeleton width, numbers are converted to rem, ignored when circle prop is set.

Optional leading props map; remaining args are children.

slider clj/s

Slider — Slider component

https://mantine.dev/core/slider

Props (docgen 9.5.0):

• color MantineColor (default theme.primaryColor) — Key of theme.colors or any valid CSS color, controls color of track and thumb
• defaultValue number — Uncontrolled component default value
• disabled boolean — Disables slider
• domain [number, number] (default [min, max]) — Domain of the slider, defines the selectable value range independently of min/max. Useful when you want to display a wider track range (min/max) but restrict actual selection to a subset (domain).
• hiddenInputProps React.ComponentProps<"input"> — Props passed down to the hidden input
• inverted boolean (default false) — Determines whether track value representation should be inverted
• label ReactNode | ((value: number) => ReactNode) — Function to generate label or any react node to render instead, set to null to disable label
• labelAlwaysOn boolean (default false) — Determines whether the label should be visible when the slider is not being dragged or hovered
• labelTransitionProps TransitionProps (default { transition: 'fade', duration: 0 }) — Props passed down to the Transition component
• marks SliderMark[] — Marks displayed on the track
• max number (default 100) — Maximum possible value
• min number (default 0) — Minimal possible value
• name string — Hidden input name, use with uncontrolled component
• onChange (value: number) => void — Called when value changes
• onChangeEnd (value: number) => void — Called when user stops dragging slider or changes value with arrows
• orientation "horizontal" | "vertical" (default 'horizontal') — Slider orientation
• precision number — Number of significant digits after the decimal point
• radius MantineRadius | number (default 'xl') — Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem
• restrictToMarks boolean (default false) — Determines whether the selection should be only allowed from the given marks array
• scale (value: number) => number — A transformation function to change the scale of the slider
• showLabelOnHover boolean (default true) — Determines whether the label should be displayed when the slider is hovered
• size MantineSize | number (default 'md') — Controls size of the track
• startPointValue number — Value at which the filled bar starts. When set, the bar extends from this point toward the current value. Ignored when inverted is set.
• step number (default 1) — Number by which value will be incremented/decremented with thumb drag and arrows
• thumbChildren React.ReactNode — Content rendered inside thumb
• thumbLabel string — Thumb aria-label
• thumbProps React.ComponentProps<"div"> — Props passed down to thumb element
• thumbSize string | number — Thumb width and height, by default value is computed based on size prop
• thumbValueText string | ((value: number) => string) — Thumb aria-valuetext. When a function is provided, it receives the scaled value.
• value number — Controlled component value

Optional leading props map; remaining args are children.

space clj/s

Space

Optional leading props map; remaining args are children.

splitter clj/s

Splitter — Resizable split pane layout

https://mantine.dev/core/splitter

Props (docgen 9.5.0):

• children React.ReactNode — Splitter panes
• handleColor MantineColor — Key of theme.colors or any valid CSS color for the separator line
• handleIcon React.ReactNode — Custom icon displayed in the handle thumb, by default uses grip icon based on orientation
• lineSize string | number (default 2) — CSS value for separator line thickness between panes
• onCollapseChange (panelIndex: number, collapsed: boolean) => void — Called when a panel collapses or expands
• onResizeEnd (handleIndex: number, sizes: SplitterPaneSize[]) => void — Called when drag ends
• onResizeStart (handleIndex: number) => void — Called when drag starts
• onSizeChange (sizes: SplitterPaneSize[]) => void — Called during resize with updated sizes, each value keeps its declared unit
• orientation "horizontal" | "vertical" (default 'horizontal') — Layout direction
• redistribute "nearest" | "equal" | UseSplitterRedistributeFn — How to redistribute space when immediate neighbor is at its min/max
• resetOnDoubleClick boolean (default true) — Restore the two panes adjacent to a handle to their default ratio (preserving their combined size) when the handle is double-clicked
• shiftStep SplitterStep (default 10) — Shift+arrow step size, a number/% is a percentage, px/rem is resolved to pixels
• sizes SplitterPaneSize[] — Controlled sizes, each value keeps the unit it was declared in (number/% flexible, px/rem fixed)
• splitterRef RefObject<UseSplitterReturnValue<any> | null> — Ref to imperative splitter API (sizes, collapse, expand, etc.)
• step SplitterStep (default 1) — Keyboard step size, a number/% is a percentage, px/rem is resolved to pixels
• withHandle boolean (default true) — Determines whether the thumb with grip icon is displayed on the handle

Optional leading props map; remaining args are children.

splitter-pane clj/s

Splitter.Pane — compound part of Splitter (docgen omits it). Optional leading props map; remaining args are children.

spoiler clj/s

Spoiler — Hide long sections of content under a spoiler

https://mantine.dev/core/spoiler

Props (docgen 9.5.0):

• controlRef Ref<HTMLButtonElement> — Ref of the toggle button element
• defaultExpanded boolean (default false) — Initial expanded state in uncontrolled mode. If true, content starts expanded. If false, content starts collapsed
• expanded boolean — Controlled expanded state value
• hideAriaLabel string — Accessible label for the toggle button when expanded. If not set, hideLabel is used
• hideLabel React.ReactNode (required) — Content displayed in the toggle button when content is expanded (to collapse)
• maxHeight number (default 100) — Maximum height of visible content in px. When content exceeds this height, the toggle control appears
• onExpandedChange (expanded: boolean) => void — Called when expanded state changes (when spoiler visibility is toggled by the user)
• showAriaLabel string — Accessible label for the toggle button when collapsed. If not set, showLabel is used
• showLabel React.ReactNode (required) — Content displayed in the toggle button when content is collapsed (to expand)
• transitionDuration number (default 200) — Spoiler reveal transition duration in ms. Set to 0 to disable animation

Optional leading props map; remaining args are children.

stack clj/s

Stack — Compose elements and components in a vertical flex container

https://mantine.dev/core/stack

Props (docgen 9.5.0):

• align AlignItems (default 'stretch') — Controls align-items CSS property
• gap MantineSpacing (default 'md') — Key of theme.spacing or any valid CSS value to set gap property, numbers are converted to rem
• justify JustifyContent (default 'flex-start') — Controls justify-content CSS property

Optional leading props map; remaining args are children.

stepper clj/s

Stepper — Display content divided into a steps sequence

https://mantine.dev/core/stepper

Props (docgen 9.5.0):

• active number (required) — Index of the active step
• allowNextStepsSelect boolean (default true) — When true, users can click and jump to any step. When false, users can only navigate to completed steps
• autoContrast boolean — When true, automatically adjusts the icon color in completed steps to ensure sufficient contrast against the step background color
• children React.ReactNode (required) — Stepper.Step components
• color MantineColor (default theme.primaryColor) — Key of theme.colors or any valid CSS color, controls colors of active and progress steps
• completedIcon ReactNode | StepFragmentComponent (default CheckIcon) — Step icon displayed when step is completed
• contentPadding MantineSpacing (default 'md') — Key of theme.spacing or any valid CSS value to set padding-top of the content
• icon ReactNode | StepFragmentComponent (default step index + 1) — Step icon
• iconPosition "left" | "right" (default 'left') — Icon position relative to the step body
• iconSize string | number — Controls size of the step icon, by default icon size is inferred from size prop
• keepMounted boolean (default false) — If set, all step content is kept mounted. React 19 Activity is used to preserve state while content is hidden.
• onStepClick (stepIndex: number) => void — Called when a clickable step is clicked with its 0-based index. Not called for the currently active step.
• orientation "horizontal" | "vertical" (default 'horizontal') — Stepper orientation
• progressIcon ReactNode | StepFragmentComponent (default step index + 1) — Step icon displayed when step is in progress
• radius MantineRadius | number (default "xl") — Key of theme.radius or any valid CSS value to set steps border-radius
• size MantineSize — Controls size of various Stepper elements
• wrap boolean (default true) — Determines whether steps should wrap to the next line if no space is available

Optional leading props map; remaining args are children.

stepper-completed clj/s

Stepper.Completed — compound part of Stepper (docgen omits it). Optional leading props map; remaining args are children.

stepper-step clj/s

StepperStep — Display content divided into a steps sequence (Stepper family)

https://mantine.dev/core/stepper

Props (docgen 9.5.0):

• allowStepClick boolean — Set to false to disable clicks on step
• allowStepSelect boolean — Should step selection be allowed
• color MantineColor — Key of theme.colors, by default controlled by Stepper component
• completedIcon ReactNode | StepFragmentComponent — Step icon displayed when step is completed
• description ReactNode | StepFragmentComponent — Step description
• icon ReactNode | StepFragmentComponent — Step icon, defaults to step index + 1 when rendered within Stepper
• iconPosition "left" | "right" — Icon position relative to step body, controlled by Stepper component
• iconSize string | number — Icon wrapper size
• label ReactNode | StepFragmentComponent — Step label, render after icon
• loading boolean — Indicates loading state of the step
• orientation "horizontal" | "vertical" — Component orientation
• progressIcon ReactNode | StepFragmentComponent — Step icon displayed when step is in progress
• state "stepInactive" | "stepProgress" | "stepCompleted" — Step state, automatically set by Stepper component based on active prop. stepInactive: not reached, stepProgress: current, stepCompleted: passed
• step number — 0-based step index, automatically set by Stepper component
• withIcon boolean (default true) — When false, hides the step icon. Useful for creating compact steppers with only labels

Optional leading props map; remaining args are children.

switch clj/s

Switch — Capture boolean input from user

https://mantine.dev/core/switch

Props (docgen 9.5.0):

• color MantineColor (default theme.primaryColor) — Key of theme.colors or any valid CSS color to set input color in checked state
• description React.ReactNode — Description displayed below the label
• error React.ReactNode — Error displayed below the label
• id string — Id used to bind input and label, if not passed, unique id will be generated instead
• label React.ReactNode — Content of the label associated with the switch
• labelPosition "left" | "right" (default 'right') — Position of the label relative to the input
• offLabel React.ReactNode — Inner label when the Switch is in unchecked state
• onLabel React.ReactNode — Inner label when the Switch is in checked state
• radius MantineRadius | number (default 'xl') — Key of theme.radius or any valid CSS value to set border-radius
• rootRef Ref<HTMLDivElement> — Assigns ref of the root element
• size MantineSize — Controls size of all elements
• thumbIcon React.ReactNode — Icon inside the thumb of the switch
• withThumbIndicator boolean (default true) — If set, displays a colored dot inside the thumb that matches the track background color
• wrapperProps React.ComponentProps<"div"> — Props passed down to the root element

Optional leading props map; remaining args are children.

switch-group clj/s

SwitchGroup — Capture boolean input from user (Switch family)

https://mantine.dev/core/switch

Optional leading props map; remaining args are children.

table clj/s

Table — Render table with theme styles

https://mantine.dev/core/table

Props (docgen 9.5.0):

• borderColor MantineColor — Color of table borders, key of theme.colors or any valid CSS color
• captionSide "bottom" | "top" (default bottom) — Side of the Table.Caption
• data TableData — Data used to generate table, ignored if children prop is set
• highlightOnHover boolean (default false) — If set, table rows background changes to highlightOnHoverColor when hovered
• highlightOnHoverColor MantineColor — Background color of table rows when hovered, key of theme.colors or any valid CSS color
• horizontalSpacing MantineSpacing (default xs) — Horizontal cells spacing, key of theme.spacing or any valid CSS value for padding, numbers are converted to rem
• layout TableLayout (default auto) — Value of table-layout style
• stickyHeader boolean (default false) — If set, Table.Thead is sticky
• stickyHeaderOffset string | number (default 0) — Offset from top at which Table.Thead should become sticky
• striped boolean | "odd" | "even" (default false) — If set, every odd/even row background changes to stripedColor, if set to true, then odd value will be used
• stripedColor MantineColor — Background color of striped rows, key of theme.colors or any valid CSS color
• tabularNums boolean (default false) — If set, font-variant-numeric: tabular-nums style is applied
• verticalSpacing MantineSpacing (default xs) — Vertical cells spacing, key of theme.spacing or any valid CSS value for padding, numbers are converted to rem
• withColumnBorders boolean (default false) — If set, the table has borders between columns
• withRowBorders boolean (default true) — If set, the table has borders between rows
• withTableBorder boolean (default false) — If set, the table has the outer border

Optional leading props map; remaining args are children.

table-caption clj/s

Table.Caption — compound part of Table (docgen omits it). Optional leading props map; remaining args are children.

table-of-contents clj/s

TableOfContents

https://mantine.dev/core/table-of-contents

Props (docgen 9.5.0):

• autoContrast boolean — If set, adjusts text color based on background color for filled variant
• color MantineColor (default theme.primaryColor) — Key of theme.colors or any valid CSS color value
• depthOffset string | number — Controls padding on the left side of control, multiplied by (depth - minDepthToOffset), 20px by default
• getControlProps (payload: TableOfContentsGetControlPropsPayload) => UnstyledButtonProps & ElementProps<"button"> & Record<...> — A function to pass props down to controls, accepts values from use-scroll-spy hook as an argument and active state.
• initialData InitialTableOfContentsData[] — Data used to render content until actual values are retrieved from the DOM
• minDepthToOffset number — Minimum depth value that requires offset, 1 by default
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius
• reinitializeRef RefObject<() => void> — A function to reinitialize headings from use-scroll-spy hook
• scrollSpyOptions UseScrollSpyOptions — Options passed down to use-scroll-spy hook
• size MantineSize | number (default 'md') — Controls font-size and padding of all elements

Optional leading props map; remaining args are children.

table-scroll-container clj/s

Table.ScrollContainer — compound part of Table (docgen omits it). Optional leading props map; remaining args are children.

table-tbody clj/s

Table.Tbody — compound part of Table (docgen omits it). Optional leading props map; remaining args are children.

table-td clj/s

Table.Td — compound part of Table (docgen omits it). Optional leading props map; remaining args are children.

table-tfoot clj/s

Table.Tfoot — compound part of Table (docgen omits it). Optional leading props map; remaining args are children.

table-th clj/s

Table.Th — compound part of Table (docgen omits it). Optional leading props map; remaining args are children.

table-thead clj/s

Table.Thead — compound part of Table (docgen omits it). Optional leading props map; remaining args are children.

table-tr clj/s

Table.Tr — compound part of Table (docgen omits it). Optional leading props map; remaining args are children.

tabs clj/s

Tabs — Switch between different views

https://mantine.dev/core/tabs

Props (docgen 9.5.0):

• activateTabWithKeyboard boolean (default true) — If set, tab is activated with arrow key press
• allowTabDeactivation boolean (default false) — If set, tab can be deactivated
• autoContrast boolean — If set, adjusts text color based on background color for pills variant
• children React.ReactNode — Tabs content
• color MantineColor — Changes colors of Tabs.Tab components when variant is pills or default, does nothing for other variants
• defaultValue string | null — Uncontrolled component default value
• id string — Base id, used to generate ids to connect labels with controls, generated randomly by default
• inverted boolean (default false) — Determines whether tabs should have inverted styles
• keepMounted boolean (default true) — If set to false, Tabs.Panel content will be unmounted when the associated tab is not active
• keepMountedMode "activity" | "display-none" (default 'activity') — Controls how inactive tabs content is hidden when keepMounted is true, 'activity' – hidden with Activity component, 'display-none' – hidden with display: none styles
• loop boolean (default true) — If set, arrow key presses loop though items (first to last and last to first)
• onChange (value: string | null) => void — Called when value changes
• orientation "horizontal" | "vertical" (default 'horizontal') — Tabs orientation
• placement "left" | "right" (default 'left') — Tabs.List placement relative to Tabs.Panel, applicable only when orientation="vertical"
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius
• value string | null — Controlled component value

Optional leading props map; remaining args are children.

tabs-list clj/s

TabsList — Switch between different views (Tabs family)

https://mantine.dev/core/tabs

Props (docgen 9.5.0):

• children React.ReactNode (required) — Tabs.Tab components
• grow boolean (default false) — Determines whether tabs should take all available space
• justify JustifyContent (default flex-start) — Tabs alignment

Optional leading props map; remaining args are children.

tabs-panel clj/s

TabsPanel — Switch between different views (Tabs family)

https://mantine.dev/core/tabs

Props (docgen 9.5.0):

• children React.ReactNode (required) — Panel content
• keepMounted boolean — If set, the content is kept mounted, even if keepMounted is set false in the parent Tabs component
• value string (required) — Value of associated control

Optional leading props map; remaining args are children.

tabs-tab clj/s

TabsTab — Switch between different views (Tabs family)

https://mantine.dev/core/tabs

Props (docgen 9.5.0):

• children React.ReactNode — Tab label
• color MantineColor — Key of theme.colors or any valid CSS color, controls tab color based on variant
• leftSection React.ReactNode — Content displayed on the left side of the label
• rightSection React.ReactNode — Content displayed on the right side of the label
• size string | number — Size passed from parent component, sets data-size if value is not number like
• value string (required) — Value of associated panel

Optional leading props map; remaining args are children.

tags-input clj/s

TagsInput — Capture a list of values from user with free input and suggestions

https://mantine.dev/core/tags-input

Props (docgen 9.5.0):

• acceptValueOnBlur boolean (default true) — If set, the value typed in by the user but not submitted is accepted when the input is blurred
• allowDuplicates boolean (default false) — If set, duplicate tags are allowed
• clearButtonProps InputClearButtonProps — Props passed down to the clear button
• clearSectionMode ClearSectionMode (default 'both') — Determines how the clear button and rightSection are rendered
• clearable boolean (default false) — If set, the clear button is displayed in the right section when the component has value
• comboboxProps ComboboxProps — Props passed down to Combobox component
• data ComboboxGenericData — Data displayed in the dropdown. Values must be unique.
• defaultDropdownOpened boolean — Uncontrolled dropdown initial opened state
• defaultSearchValue string — Default search value
• defaultValue string[] — Uncontrolled component default value
• description React.ReactNode — Contents of Input.Description component. If not set, description is not displayed.
• descriptionProps InputDescriptionProps — Props passed down to the Input.Description component
• disabled boolean — Sets disabled attribute on the input element
• dropdownOpened boolean — Controlled dropdown opened state
• error React.ReactNode — Contents of Input.Error component. If not set, error is not displayed.
• errorProps InputErrorProps — Props passed down to the Input.Error component
• filter OptionsFilter<string> — Function based on which items are filtered and sorted
• floatingHeight "viewport" — If set to 'viewport', the dropdown grows to fill the available vertical space in the viewport. Disables the flip middleware.
• hiddenInputProps React.ComponentProps<"input"> — Props passed down to the hidden input
• hiddenInputValuesDivider string (default ',') — Divider used to separate values in the hidden input value attribute
• inputContainer (children: ReactNode) => ReactNode (default React.Fragment) — Render function to wrap the input element. Useful for adding tooltips, popovers, or other wrappers around the input.
• inputSize string — HTML size attribute for the input element (number of visible characters)
• inputWrapperOrder ("input" | "label" | "description" | "error")[] (default ['label', 'description', 'input', 'error']) — Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.
• isDuplicate (value: string, currentValues: string[]) => boolean — Custom function to determine if a tag is duplicate. Accepts tag value and array of current values. By default, checks if the tag exists case-insensitively.
• label React.ReactNode — Contents of Input.Label component. If not set, label is not displayed.
• labelProps InputLabelProps — Props passed down to the Input.Label component
• leftSection React.ReactNode — Content section displayed on the left side of the input
• leftSectionPointerEvents React.CSSProperties["pointerEvents"] (default 'none') — Sets pointer-events styles on the leftSection element. Use 'all' when section contains interactive elements (buttons, links).
• leftSectionProps React.ComponentProps<"div"> — Props passed down to the leftSection element
• leftSectionWidth React.CSSProperties["width"] — Left section width, used to set width of the section and input padding-left, by default equals to the input height
• limit number — Maximum number of options displayed at a time, Infinity by default
• loading boolean (default false) — Displays loading indicator in the left or right section
• loadingPosition "left" | "right" (default 'right') — Position of the loading indicator
• maxDropdownHeight string | number — max-height of the dropdown, only applicable when withScrollArea prop is true, 250 by default
• maxTags number (default Infinity) — Maximum number of tags
• onChange (value: string[]) => void — Called when value changes
• onClear () => void — Called when the clear button is clicked
• onDropdownClose () => void — Called when dropdown closes
• onDropdownOpen () => void — Called when dropdown opens
• onDuplicate (value: string) => void — Called when user tries to submit a duplicated tag
• onMaxTags (value: string) => void — Called when user tries to add more tags than maxTags
• onOptionSubmit (value: string) => void — Called when option is submitted from dropdown with mouse click or Enter key
• onRemove (value: string) => void — Called when tag is removed
• onSearchChange (value: string) => void — Called when search changes
• openOnFocus boolean (default true) — If set, the dropdown opens when the input receives focus
• pointer boolean (default false) — Determines whether the input should have cursor: pointer style. Use when input acts as a button-like trigger (e.g., component="button" for Select/DatePicker).
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem
• renderOption (input: ComboboxLikeRenderOptionInput<ComboboxGenericItem<string>>) => ReactNode — A function to render content of the option, replaces the default content of the option
• renderPill (props: ComboboxRenderPillInput<string>) => ReactNode — A function to render content of the pill, replaces the default content of the pill
• required boolean (default false) — Adds required attribute to the input and a red asterisk on the right side of label
• rightSection React.ReactNode — Content section displayed on the right side of the input
• rightSectionPointerEvents React.CSSProperties["pointerEvents"] (default 'none') — Sets pointer-events styles on the rightSection element. Use 'all' when section contains interactive elements (buttons, links).
• rightSectionProps React.ComponentProps<"div"> — Props passed down to the rightSection element
• rightSectionWidth React.CSSProperties["width"] — Right section width, used to set width of the section and input padding-right, by default equals to the input height
• scrollAreaProps ScrollAreaProps — Props passed down to the underlying ScrollArea component in the dropdown
• searchValue string — Controlled search value
• selectFirstOptionOnChange boolean — If set, the first option is selected when value changes, false by default
• selectFirstOptionOnDropdownOpen boolean — If set, the first option is selected when dropdown opens, false by default
• size MantineSize (default 'sm') — Controls input height, horizontal padding, and font-size
• splitChars string[] — Characters that should trigger tags split, [','] by default
• success React.ReactNode — Contents of Input.Success component. If not set, success is not displayed.
• successProps InputSuccessProps & DataAttributes — Props passed down to the Input.Success component
• value string[] — Controlled component value
• withAsterisk boolean (default false) — If set, the required asterisk is displayed next to the label. Overrides required prop. Does not add required attribute to the input.
• withErrorStyles boolean (default true) — Determines whether the input should have red border and red text color when the error prop is set
• withPillsReorder boolean (default false) — If set, tags can be reordered by dragging pills. Disabled when disabled or readOnly is set.
• withScrollArea boolean — Determines whether the options should be wrapped with ScrollArea.AutoSize, true by default
• withSuccessStyles boolean (default true) — Determines whether the input should have green border when the success prop is set
• wrapperProps WrapperProps — Props passed down to the root element

Optional leading props map; remaining args are children.

text clj/s

Text — Display text

https://mantine.dev/core/text

Props (docgen 9.5.0):

• gradient MantineGradient (default theme.defaultGradient) — Gradient configuration, ignored when variant is not gradient
• inherit boolean (default false) — Determines whether font properties should be inherited from the parent
• inline boolean (default false) — Sets line-height to 1 for centering
• lineClamp number — Number of lines after which Text will be truncated
• size MantineSize | (string & {}) (default 'md') — Controls font-size and line-height
• span boolean — Shorthand for component="span"
• textWrap "wrap" | "nowrap" | "balance" | "pretty" | "stable" — Controls text-wrap CSS property
• truncate TextTruncate — Side on which Text must be truncated, if true, text is truncated from the start

Optional leading props map; remaining args are children.

text-input clj/s

TextInput — Capture string input from user

https://mantine.dev/core/text-input

Props (docgen 9.5.0):

• description React.ReactNode — Contents of Input.Description component. If not set, description is not displayed.
• descriptionProps InputDescriptionProps — Props passed down to the Input.Description component
• disabled boolean — Sets disabled attribute on the input element
• error React.ReactNode — Contents of Input.Error component. If not set, error is not displayed.
• errorProps InputErrorProps — Props passed down to the Input.Error component
• inputContainer (children: ReactNode) => ReactNode (default React.Fragment) — Render function to wrap the input element. Useful for adding tooltips, popovers, or other wrappers around the input.
• inputSize string — HTML size attribute for the input element (number of visible characters)
• inputWrapperOrder ("input" | "label" | "description" | "error")[] (default ['label', 'description', 'input', 'error']) — Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.
• label React.ReactNode — Contents of Input.Label component. If not set, label is not displayed.
• labelProps InputLabelProps — Props passed down to the Input.Label component
• leftSection React.ReactNode — Content section displayed on the left side of the input
• leftSectionPointerEvents React.CSSProperties["pointerEvents"] (default 'none') — Sets pointer-events styles on the leftSection element. Use 'all' when section contains interactive elements (buttons, links).
• leftSectionProps React.ComponentProps<"div"> — Props passed down to the leftSection element
• leftSectionWidth React.CSSProperties["width"] — Left section width, used to set width of the section and input padding-left, by default equals to the input height
• loading boolean (default false) — Displays loading indicator in the left or right section
• loadingPosition "left" | "right" (default 'right') — Position of the loading indicator
• pointer boolean (default false) — Determines whether the input should have cursor: pointer style. Use when input acts as a button-like trigger (e.g., component="button" for Select/DatePicker).
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem
• required boolean (default false) — Adds required attribute to the input and a red asterisk on the right side of label
• rightSection React.ReactNode — Content section displayed on the right side of the input
• rightSectionPointerEvents React.CSSProperties["pointerEvents"] (default 'none') — Sets pointer-events styles on the rightSection element. Use 'all' when section contains interactive elements (buttons, links).
• rightSectionProps React.ComponentProps<"div"> — Props passed down to the rightSection element
• rightSectionWidth React.CSSProperties["width"] — Right section width, used to set width of the section and input padding-right, by default equals to the input height
• size MantineSize (default 'sm') — Controls input height, horizontal padding, and font-size
• success React.ReactNode — Contents of Input.Success component. If not set, success is not displayed.
• successProps InputSuccessProps & DataAttributes — Props passed down to the Input.Success component
• withAsterisk boolean (default false) — If set, the required asterisk is displayed next to the label. Overrides required prop. Does not add required attribute to the input.
• withErrorStyles boolean (default true) — Determines whether the input should have red border and red text color when the error prop is set
• withSuccessStyles boolean (default true) — Determines whether the input should have green border when the success prop is set
• wrapperProps WrapperProps — Props passed down to the root element

Optional leading props map; remaining args are children.

textarea clj/s

Textarea — Autosize or regular textarea

https://mantine.dev/core/textarea

Props (docgen 9.5.0):

• autosize boolean (default false) — If set, enables textarea height growing with its content
• bottomSection React.ReactNode — Content rendered at the bottom of the input, inside the border
• bottomSectionProps React.ComponentProps<"div"> — Props passed down to the bottomSection element
• description React.ReactNode — Contents of Input.Description component. If not set, description is not displayed.
• descriptionProps InputDescriptionProps — Props passed down to the Input.Description component
• disabled boolean — Sets disabled attribute on the input element
• error React.ReactNode — Contents of Input.Error component. If not set, error is not displayed.
• errorProps InputErrorProps — Props passed down to the Input.Error component
• inputContainer (children: ReactNode) => ReactNode (default React.Fragment) — Render function to wrap the input element. Useful for adding tooltips, popovers, or other wrappers around the input.
• inputSize string — HTML size attribute for the input element (number of visible characters)
• inputWrapperOrder ("input" | "label" | "description" | "error")[] (default ['label', 'description', 'input', 'error']) — Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.
• label React.ReactNode — Contents of Input.Label component. If not set, label is not displayed.
• labelProps InputLabelProps — Props passed down to the Input.Label component
• leftSection React.ReactNode — Content section displayed on the left side of the input
• leftSectionPointerEvents React.CSSProperties["pointerEvents"] (default 'none') — Sets pointer-events styles on the leftSection element. Use 'all' when section contains interactive elements (buttons, links).
• leftSectionProps React.ComponentProps<"div"> — Props passed down to the leftSection element
• leftSectionWidth React.CSSProperties["width"] — Left section width, used to set width of the section and input padding-left, by default equals to the input height
• loading boolean (default false) — Displays loading indicator in the left or right section
• loadingPosition "left" | "right" (default 'right') — Position of the loading indicator
• maxRows number — Maximum rows for autosize textarea to grow, ignored if autosize prop is not set
• minRows number — Minimum rows of autosize textarea, ignored if autosize prop is not set
• pointer boolean (default false) — Determines whether the input should have cursor: pointer style. Use when input acts as a button-like trigger (e.g., component="button" for Select/DatePicker).
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem
• required boolean (default false) — Adds required attribute to the input and a red asterisk on the right side of label
• resize Resize (default 'none') — Controls resize CSS property
• rightSection React.ReactNode — Content section displayed on the right side of the input
• rightSectionPointerEvents React.CSSProperties["pointerEvents"] (default 'none') — Sets pointer-events styles on the rightSection element. Use 'all' when section contains interactive elements (buttons, links).
• rightSectionProps React.ComponentProps<"div"> — Props passed down to the rightSection element
• rightSectionWidth React.CSSProperties["width"] — Right section width, used to set width of the section and input padding-right, by default equals to the input height
• size MantineSize (default 'sm') — Controls input height, horizontal padding, and font-size
• success React.ReactNode — Contents of Input.Success component. If not set, success is not displayed.
• successProps InputSuccessProps & DataAttributes — Props passed down to the Input.Success component
• withAsterisk boolean (default false) — If set, the required asterisk is displayed next to the label. Overrides required prop. Does not add required attribute to the input.
• withErrorStyles boolean (default true) — Determines whether the input should have red border and red text color when the error prop is set
• withSuccessStyles boolean (default true) — Determines whether the input should have green border when the success prop is set
• wrapperProps WrapperProps — Props passed down to the root element

Optional leading props map; remaining args are children.

theme-icon clj/s

ThemeIcon — Render icon inside element with theme colors

https://mantine.dev/core/theme-icon

Props (docgen 9.5.0):

• autoContrast boolean — If set, adjusts text color based on background color for filled variant
• children React.ReactNode — Icon displayed inside the component
• color MantineColor (default theme.primaryColor) — Key of theme.colors or any valid CSS color.
• gradient MantineGradient (default theme.defaultGradient) — Gradient data used when variant="gradient"
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius. Numbers are converted to rem.
• size MantineSize | number (default 'md') — Controls width and height of the button. Numbers are converted to rem.

Optional leading props map; remaining args are children.

timeline clj/s

Timeline — Display list of events in chronological order

https://mantine.dev/core/timeline

Props (docgen 9.5.0):

• active number — Index of the active element
• align "left" | "right" (default 'left') — Position of content relative to the bullet
• autoContrast boolean — If set, adjusts text color based on background color for filled variant
• bulletSize string | number (default 20) — Size of the bullet
• children React.ReactNode — Timeline.Item components
• color MantineColor (default theme.primaryColor) — Key of theme.colors or any valid CSS color to control active item colors
• lineWidth string | number — Control width of the line
• radius MantineRadius | number (default 'xl') — Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem
• reverseActive boolean (default false) — If set, the active items direction is reversed without reversing items order

Optional leading props map; remaining args are children.

timeline-item clj/s

TimelineItem — Display list of events in chronological order (Timeline family)

https://mantine.dev/core/timeline

Props (docgen 9.5.0):

• alternate boolean (default false) — If set, switches the position of content and opposite
• bullet React.ReactNode — React node that should be rendered inside the bullet – icon, image, avatar, etc. By default, large white dot is displayed.
• children React.ReactNode — Content displayed below the title
• color MantineColor (default theme.primaryColor) — Key of theme.colors or any valid CSS color to control active item colors
• lineVariant "dashed" | "dotted" | "solid" (default 'solid') — Controls line border style
• opposite React.ReactNode — Content displayed on the opposite side of the timeline item
• radius MantineRadius | number (default 'xl') — Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem
• title React.ReactNode — Item title, displayed next to the bullet

Optional leading props map; remaining args are children.

title clj/s

Title — h1-h6 heading

https://mantine.dev/core/title

Props (docgen 9.5.0):

• lineClamp number — Number of lines after which heading will be truncated
• order TitleOrder (default 1) — Heading order (1-6), controls font-size style if size prop is not set
• size TitleSize — Changes title size, if not set, then size is controlled by order prop
• textWrap "wrap" | "nowrap" | "balance" | "pretty" | "stable" (default 'wrap') — Heading text-wrap CSS property

Optional leading props map; remaining args are children.

tooltip clj/s

Tooltip — Renders tooltip at given element on mouse over or other event

https://mantine.dev/core/tooltip

Props (docgen 9.5.0):

• arrowOffset number (default 5) — Arrow offset in px
• arrowPosition 'center' | 'side' (default side) — Arrow position relative to the tooltip
• arrowRadius number (default 0) — Arrow border-radius in px
• arrowSize number (default 4) — Arrow size in px
• autoContrast boolean — If set, adjusts text color based on background color for filled variant
• children React.ReactNode — Target element, must support ref prop and ...others
• closeDelay number (default 0) — Close delay in ms
• color MantineColor — Key of theme.colors or any valid CSS color, controls tooltip background, by default set based on current color scheme
• defaultOpened boolean — Uncontrolled tooltip initial opened state
• disabled boolean — If set, tooltip element will not be rendered
• events { hover: boolean; focus: boolean; touch: boolean; } (default { hover: true, focus: false, touch: false }) — Determines which events will be used to show tooltip
• floatingStrategy FloatingStrategy (default 'absolute') — Changes floating ui position strategy
• inline boolean — Must be set if the tooltip target is an inline element
• keepMounted boolean — If set, the tooltip is not unmounted from the DOM when hidden, display: none styles are applied instead
• label React.ReactNode (required) — Tooltip content
• middlewares TooltipMiddlewares — Floating ui middlewares to configure position handling, { flip: true, shift: true, inline: false } by default
• multiline boolean — Determines whether content should be wrapped on to the next line, false by default
• offset number | FloatingAxesOffsets (default 5) — Space between target element and tooltip in px
• onPositionChange (position: FloatingPosition) => void — Called when tooltip position changes
• openDelay number — Open delay in ms
• opened boolean — Controlled opened state
• portalProps Omit<BasePortalProps, "withinPortal"> — Props to pass down to the portal when withinPortal is true
• position FloatingPosition — Tooltip position relative to target element (Tooltip component) or mouse (Tooltip.Floating component)
• radius MantineRadius | number — Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem@default theme.defaultRadius
• refProp string — Key of the prop that can be used to access element ref, ref by default
• target string | HTMLElement | RefObject<HTMLElement | null> | null — Selector, ref of an element or element itself that should be used for positioning
• transitionProps TransitionProps (default { duration: 100, transition: 'fade' }) — Props passed down to the Transition component that used to animate tooltip presence, use to configure duration and animation type
• withArrow boolean (default false) — If set, the tooltip has an arrow
• withinPortal boolean — Determines whether tooltip should be rendered within Portal, true by default
• zIndex string | number — Tooltip z-index, 300 by default

Optional leading props map; remaining args are children.

tooltip-floating clj/s

Tooltip.Floating — compound part of Tooltip (docgen omits it). Optional leading props map; remaining args are children.

tooltip-group clj/s

Tooltip.Group — compound part of Tooltip (docgen omits it). Optional leading props map; remaining args are children.

transition clj/s

Transition — Animate presence of component with pre-made animations

https://mantine.dev/core/transition

Props (docgen 9.5.0):

• children (styles: CSSProperties) => Element (required) — Render function with transition styles argument
• duration number (default 250) — Transition duration in ms
• enterDelay number — Delay in ms before enter transition starts
• exitDelay number — Delay in ms before exit transition starts
• exitDuration number (default 250) — Exit transition duration in ms
• keepMounted boolean — If set, the element is kept in the DOM when hidden. React 19 Activity is used to preserve state while the element is not visible.
• keepMountedMode "activity" | "display-none" (default activity) — Controls how the element is hidden when keepMounted is set: 'activity' - hidden with React 19 Activity component, 'display-none' - hidden with display: none styles
• mounted boolean (required) — Determines whether component should be mounted to the DOM
• onEnter () => void — Called when enter transition starts
• onEntered () => void — Called when enter transition ends
• onExit () => void — Called when exit transition starts
• onExited () => void — Called when exit transition ends
• timingFunction string (default ease) — Transition timing function
• transition MantineTransition (default fade) — Transition name or object

Optional leading props map; remaining args are children.

tree clj/s

Tree — Display a Tree structure

https://mantine.dev/core/tree

Props (docgen 9.5.0):

• allowDrop TreeAllowDrop — Called for each potential drop target to determine whether a drop is allowed. When it returns false, the drop indicator is hidden and the drop is rejected.
• allowRangeSelection boolean (default true) — If set, tree nodes range can be selected with click when Shift key is pressed
• checkOnSpace boolean (default false) — If set, tree node is checked on space key press
• clearSelectionOnOutsideClick boolean (default false) — If set, selection is cleared when user clicks outside of the tree
• data TreeNodeData[] (required) — Data used to render nodes
• expandOnClick boolean (default true) — If set, tree node with children is expanded on click
• expandOnSpace boolean (default true) — If set, tree node with children is expanded on space key press
• keepMounted boolean (default false) — If set, subtree content is kept mounted when collapsed. React 19 Activity is used to preserve state.
• levelOffset MantineSpacing (default 'lg') — Horizontal padding of each subtree level, key of theme.spacing or any valid CSS value
• onDragDrop (payload: TreeDragDropPayload) => void — Called when a node is dropped on another node, enables drag-and-drop when provided
• renderNode RenderNode — A function to render tree node label
• selectOnClick boolean (default false) — If set, tree node is selected on click
• tree UseTreeReturnType — Use-tree hook instance that can be used to manipulate component state
• withDragHandle boolean (default false) — If set, drag-and-drop must be initiated from an element that spreads dragHandleProps from the renderNode payload, rather than anywhere on the node.
• withLines boolean (default false) — If set, connecting lines are rendered showing parent-child relationships

Optional leading props map; remaining args are children.

tree-select clj/s

TreeSelect — Select with hierarchical tree data

https://mantine.dev/core/tree-select

Props (docgen 9.5.0):

• allowDeselect boolean (default true) — Allows deselecting in single mode
• checkStrictly boolean (default false) — Disables parent-child cascade in checkbox mode
• checkedStrategy CheckedStrategy (default 'child') — Controls which checked nodes appear in value/pills in checkbox mode
• chevronAriaLabels TreeSelectChevronAriaLabels — aria-label values for the expand/collapse chevron button
• chevronColor MantineColor — Controls the default chevron color
• clearButtonProps InputClearButtonProps — Props for the clear button
• clearSearchOnChange boolean (default true) — Clear search on selection change
• clearSectionMode ClearSectionMode (default 'both') — Determines how the clear button and rightSection are rendered
• clearable boolean (default false) — Shows clear button
• comboboxProps Record<string, any> — Props passed to the underlying Combobox
• data TreeNodeData[] (required) — Tree data
• defaultDropdownOpened boolean — Default dropdown state
• defaultExpandAll boolean (default false) — Expand all nodes by default
• defaultExpandedValues string[] — Default expanded node values
• defaultSearchValue string — Default search value
• defaultValue string | string[] | null — Default value
• description React.ReactNode — Contents of Input.Description component. If not set, description is not displayed.
• descriptionProps InputDescriptionProps — Props passed down to the Input.Description component
• disabled boolean — Sets disabled attribute on the input element
• dropdownOpened boolean — Controlled dropdown state
• error React.ReactNode — Contents of Input.Error component. If not set, error is not displayed.
• errorProps InputErrorProps — Props passed down to the Input.Error component
• expandOnClick boolean (default false) — Also toggle expand when clicking a parent node (not just the chevron). In single and multiple modes, parent clicks only expand; only leaves can be selected. In checkbox mode, parent clicks both check and expand.
• expandedValues string[] — Controlled expanded state
• filter (query: string, node: TreeNodeData) => boolean — Custom filter function
• hiddenInputProps React.ComponentProps<"input"> — Props for the hidden input
• hiddenInputValuesDivider string (default ',') — Divider for hidden input values
• inputContainer (children: ReactNode) => ReactNode (default React.Fragment) — Render function to wrap the input element. Useful for adding tooltips, popovers, or other wrappers around the input.
• inputSize string — HTML size attribute for the input element (number of visible characters)
• inputWrapperOrder ("input" | "label" | "description" | "error")[] (default ['label', 'description', 'input', 'error']) — Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.
• label React.ReactNode — Contents of Input.Label component. If not set, label is not displayed.
• labelProps InputLabelProps — Props passed down to the Input.Label component
• leftSection React.ReactNode — Content section displayed on the left side of the input
• leftSectionPointerEvents React.CSSProperties["pointerEvents"] (default 'none') — Sets pointer-events styles on the leftSection element. Use 'all' when section contains interactive elements (buttons, links).
• leftSectionProps React.ComponentProps<"div"> — Props passed down to the leftSection element
• leftSectionWidth React.CSSProperties["width"] — Left section width, used to set width of the section and input padding-left, by default equals to the input height
• loading boolean (default false) — Displays loading indicator in the left or right section
• loadingPosition "left" | "right" (default 'right') — Position of the loading indicator
• maxDisplayedValues number — Maximum displayed pills before "+N more"
• maxDisplayedValuesContent ReactNode | ((overflow: number) => ReactNode) — Content shown when values overflow maxDisplayedValues
• maxDropdownHeight string | number (default 220) — Max dropdown height
• maxValues number — Maximum selectable values (multiple/checkbox mode)
• mode TreeSelectMode (default 'single') — Selection mode: 'single', 'multiple', or 'checkbox' (with cascade)
• nothingFoundMessage React.ReactNode — Message when no nodes match search
• onChange (value: TreeSelectValue<Mode>) => void — Called when value changes
• onClear () => void — Called when clear button is clicked
• onDropdownClose () => void — Called when dropdown closes
• onDropdownOpen () => void — Called when dropdown opens
• onExpandedChange (values: string[]) => void — Called when expanded state changes
• onRemove (value: string) => void — Called with removed value in multiple/checkbox mode
• onSearchChange (value: string) => void — Called when search changes
• openOnFocus boolean (default true) — Opens dropdown on focus (searchable mode)
• pointer boolean (default false) — Determines whether the input should have cursor: pointer style. Use when input acts as a button-like trigger (e.g., component="button" for Select/DatePicker).
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem
• renderNode (payload: TreeSelectRenderNodePayload) => ReactNode — Custom node rendering in the dropdown
• required boolean (default false) — Adds required attribute to the input and a red asterisk on the right side of label
• rightSection React.ReactNode — Content section displayed on the right side of the input
• rightSectionPointerEvents React.CSSProperties["pointerEvents"] (default 'none') — Sets pointer-events styles on the rightSection element. Use 'all' when section contains interactive elements (buttons, links).
• rightSectionProps React.ComponentProps<"div"> — Props passed down to the rightSection element
• rightSectionWidth React.CSSProperties["width"] — Right section width, used to set width of the section and input padding-right, by default equals to the input height
• scrollAreaProps ScrollAreaProps — Props for the ScrollArea in the dropdown
• searchValue string — Controlled search value
• searchable boolean (default false) — Enables search filtering
• size MantineSize (default 'sm') — Controls input height, horizontal padding, and font-size
• success React.ReactNode — Contents of Input.Success component. If not set, success is not displayed.
• successProps InputSuccessProps & DataAttributes — Props passed down to the Input.Success component
• value string | string[] | null — Controlled value
• withAsterisk boolean (default false) — If set, the required asterisk is displayed next to the label. Overrides required prop. Does not add required attribute to the input.
• withErrorStyles boolean (default true) — Determines whether the input should have red border and red text color when the error prop is set
• withLines boolean (default true) — Show tree connection lines between parent and child nodes
• withSuccessStyles boolean (default true) — Determines whether the input should have green border when the success prop is set
• wrapperProps WrapperProps — Props passed down to the root element

Optional leading props map; remaining args are children.

typography clj/s

Typography

Optional leading props map; remaining args are children.

unstyled-button clj/s

UnstyledButton

Props (docgen 9.5.0):

• size string | number — Size passed from parent component, sets data-size if value is not number like

Optional leading props map; remaining args are children.

use-computed-color-scheme clj/s

useComputedColorScheme — the resolved light/dark scheme (never 'auto'). Raw passthrough: returns the raw JS string.

use-mantine-color-scheme clj/s

useMantineColorScheme — read/set the color scheme. Raw passthrough: returns the raw JS value (.-colorScheme, .-setColorScheme, .-toggleColorScheme, ...).

use-mantine-theme clj/s

useMantineTheme — read the resolved Mantine theme. Raw passthrough: returns the raw JS theme object (read via interop).

visually-hidden clj/s

VisuallyHidden

Optional leading props map; remaining args are children.