[
  {
    "name": "Getting Started",
    "endpoint": "/getting-started",
    "description": "Build feature-rich, accessible Dash apps faster than ever! Dash Mantine Components includes over 100 customizable components based on the React Mantine library, with consistent styling, theming, and full support for light and dark mode.",
    "dmc": false,
    "order": 1,
    "content": "\n\n## Getting Started  \nBuild feature-rich, accessible Dash apps faster than ever! Dash Mantine Components includes over 100 customizable components based on the React Mantine library, with consistent styling, theming, and full support for light and dark mode.  \nCategory: General  \n\n### Installation\n\n```bash\npip install dash-mantine-components\n```\n\n```bash\npoetry add dash-mantine-components\n```\n\n### Basic Usage\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import Dash\n\napp = Dash()\n\napp.layout = dmc.MantineProvider(\n    dmc.Alert(\n       \"Welcome to Dash Mantine Components\",\n       title=\"Hello!\",\n       color=\"violet\",\n    )\n)\n\nif __name__ == \"__main__\":\n    app.run(debug=True)\n```\n\n\n### Important Notes \n\n\n#### Wrap the layout with `MantineProvider`\n\n```python\napp.layout = dmc.MantineProvider(\n   # your content\n)\n```\n\nThe `MantineProvider` is a core wrapper component that handles global styles, themes, and settings for all child components.\n\nIt’s required to:\n\n- Enable component styling and theming (e.g., colors, fonts, spacing)\n\n- Apply dark/light mode\n\n- Customize default props across the app\n\n- Register custom themes or override styles\n\n#### Using Dash 2.x?\nYou must set React to version 18.2.0:\n```python\n# required for dash 2.x\nimport dash\ndash._dash_renderer._set_react_version(\"18.2.0\")\n```\n\n#### Using DMC < 1.2.0?\n\nIf you are using DMC < 1.2.0 it is required to include additional stylesheets for certain components. See the\n[migration guide](/migration) for more information.\n\n### Documentation\n\nThis documentation site is built almost entirely with Dash Mantine Components.\nYou can explore the source code on the [dcm-docs GitHub](https://github.com/snehilvj/dmc-docs)  for ideas and inspiration.\n\nThroughout the docs, you’ll find interactive demos that highlight how different props and combinations affect each component in real time.\n\nNote that this documentation has some additional styling applied to it. So when you actually use these components, they \nmight look a bit different. You can check out [MantineProvider theme object](/theme-object) for more details on\ntheming and customizations and to see the [theme used in these docs.](/theme-object#usage-in-dmc-docs)\n\n\n### Next Steps\n\nPlease read the [Mantine API Overview](/mantine-api) section before starting development to learn about all of the\navailable theming and styling features.\n\n### Questions?\n\nPlease ask on the [dash community forum](https://community.plotly.com/), or join our [Discord.](https://discord.gg/KuJkh4Pyq5)"
  },
  {
    "name": "Help Center",
    "endpoint": "/help-center",
    "description": "Frequently asked questions and links to more examples",
    "dmc": false,
    "content": "\n\n## Help Center  \nFrequently asked questions and links to more examples  \nCategory: General  \n\n### Where can I find the roadmap?\n\nOur [roadmap](https://github.com/snehilvj/dash-mantine-components/discussions/377) on GitHub outlines our development goals and priorities. It is updated regularly to reflect progress and\nnew plans  in DMC and changes in the upstream Mantine library.\n\n### Where can I find release announcements?\n\n[Release announcements](https://github.com/snehilvj/dash-mantine-components/discussions/categories/releases) are \navailable in GitHub Discussions. They include detailed descriptions and examples of new features and updates to the documentation.  \n\n### How can I help?\n\nWe welcome contributions!  \n- Bug Reports: Please open or comment on [issues](https://github.com/snehilvj/dash-mantine-components/issues).  \n- Feature Requests: Use [Discussions](https://github.com/snehilvj/dash-mantine-components/discussions/categories/ideas).  \n- Pull Requests: See our [Contributing Guide](https://github.com/snehilvj/dash-mantine-components/blob/master/CONTRIBUTING.md).  \n- Documentation: Updating the docs is a great starting point for first-time contributors since the project is a Dash app built with `dash-mantine-components`. For more details, check out the [dmc-docs GitHub](https://github.com/snehilvj/dmc-docs).  \n\n### Where can I find more examples?\n\n- [Dash Mantine Components PyCafe](https://py.cafe/dash.mantine.components): Browse dozens of complete, minimal examples you can run and edit in your browser.  \n- The [help_center](https://github.com/snehilvj/dmc-docs/tree/main/help_center) folder in the dmc-docs GitHub for additional examples.  \n- [DMC DBC Building Blocks](https://dash-building-blocks.com/) site for more minimal code blocks to add to your app.  \n- [Tips and Tricks](https://github.com/snehilvj/dash-mantine-components/discussions/categories/tips-and-tricks) section of GitHub Discussions:  \n  - Frequently asked questions  \n  - Examples of using DMC components in Dash AG Grid  \n  - KPI cards examples  \n  - AppShell examples with responsive layouts for headers, navbars, footers, and aside  \n  - Theme switch components  \n  - Plotly figures with a Mantine theme  \n  - ...and more!  Content is updated regularly\n\n### Need more help?\n\n- Join our [Discord](https://discord.gg/KuJkh4Pyq5) to connect with other contributors.  \n- Visit the [Plotly Dash Community Forum](https://community.plotly.com/) for discussions and support.  \n- Use [GitHub Discussions]() to ask questions and find more examples.  \n- Check out the upstream [Mantine Help Center](https://help.mantine.dev/). The code snippets are in TypeScript, but we can help with those. There’s great content applicable to DMC as well."
  },
  {
    "name": "LLMs.txt",
    "endpoint": "/llms",
    "description": "Dash Mantine Components provides LLM-friendly documentation to help AI tools like Cursor, Windsurf, GitHub Copilot, ChatGPT, and Claude understand and work with the DMC library.",
    "dmc": false,
    "content": "\n\n## LLMs.txt  \nDash Mantine Components provides LLM-friendly documentation to help AI tools like Cursor, Windsurf, GitHub Copilot, ChatGPT, and Claude understand and work with the DMC library.  \nCategory: General  \n\n### Complete Documentation\n\nFull DMC documentation following the [LLMs.txt](https://llmstxt.org/) standard (~1.6MB)\n\n* [View DMC llms.txt online](https://www.dash-mantine-components.com/assets/llms.txt)\n* [View Mantine llms.txt online](https://mantine.dev/llms.txt) (upstream Mantine documentation)\n\n\n### Customized llms.txt\n\nWhile the full `llms.txt` file contains everything, customizing it for your project can significantly improve both accuracy and efficiency when working with AI tools.\n\nBenefits of a Customized File:\n* Faster and more relevant AI responses— smaller, focused documentation files help tools like ChatGPT or Cursor zero in on exactly the components and props you’re using.\n* Reduced context noise — by stripping out unrelated sections, large component sets, or advanced examples you don’t use, AI tools spend their context window entirely on your project-relevant APIs.\n* Improved compatibility with code assistants that have input size limits (like GitHub Copilot or Claude).\n\nYou’ll find detailed options for generating your own `llms.txt` at the bottom of this page.\n\n### Usage with AI Tools\n\n#### Cursor\n1. Type `@Docs` in your prompt\n2. Reference the DMC documentation URL: `https://www.dash-mantine-components.com/assets/llms.txt`\n3. Ask questions about DMC components, styling, or implementation\n\nTip: You’ll get even better results if you upload your customized `llms.txt` file directly or reference it locally instead of the full version.\n\n#### Windsurf\n1. Reference the documentation using `@https://www.dash-mantine-components.com/assets/llms.txt`\n2. Or add your custom file path to your `.windsurfrules` file for persistent access\n3. Smaller, project-specific files make Windsurf faster to index and query.\n\n#### ChatGPT & Claude\n1. Mention that you're using Dash Mantine Components v2.\n2. Reference the documentation URL: `https://www.dash-mantine-components.com/assets/llms.txt`\n3. For best results, upload your customized llms.txt (containing only the components used in your app). This improves\nthe model’s ability to generate correct code using DMC props.\n\n#### GitHub Copilot\n\nWhile Copilot doesn't directly support external documentation, you can:\n\n1. Include relevant documentation snippets or short versions of `llms.txt` in your project.\n2. Reference component names and props accurately in comments for better inline completions.\n\n\n\n### Example Prompts\n\nHere are some example prompts you can use with AI tools:\n\n* \"Using Dash Mantine Components v2, how do I create a dark mode toggle?\"\n* \"Show me how to use the AppShell component with a collapsible navbar\"\n* \"How can I customize the theme colors in MantineProvider?\"\n* \"How to align input with a button in a flex container?\"\n* \"Refer only to my custom llms.txt file (layout and feedback components) for examples.\"\n\n\n\n### Documentation Generation\n\nThe LLM documentation is automatically generated from our source files.  To ensure you have the latest documentation, \nwe regenerate the `llms.txt` file with each release.  The file follows the [LLMs.txt](https://llmstxt.org/) standard\nfor better compatibility with AI tools.\n\n### Creating a Custom llms.txt File\n\nYou’ll get the best results by using  only the sections of the documentation that you need. \n\n\n#### Option 1 — Download using customization app\nUse the interactive tool below to select specific component categories (for example, layout, inputs, feedback) or individual components (like `AppShell`, `Card`, or `Button`), then download your file.\n\n#### Option 2 — Build your own from llms.json\n\nYou can also manually create your own `llms.txt` file using the structured data in  [llms.json](https://www.dash-mantine-components.com/assets/llms.json).\n\nEach entry in `llms.json` represents one documentation page, including fields like `name`, `description`, `category`,\nand full `content`.  You can filter and combine only the components you need — for example, by category or name.\n\n#### Option 3 — Use the “Copy for LLMs” feature\n\nEach documentation page includes a “Copy for LLMs” button that copies that page’s content in LLM-friendly format.\nUse this when you want to paste a few pages directly into a chat session (e.g. ChatGPT or Cursor) without downloading the entire documentation.\n\nUse this for quick one-off conversations, when you only need to reference one or two components.\n\n### Contributing\n\nIf you find any issues with the LLM documentation or have suggestions for improvement, please [open an issue](https://github.com/snehilvj/dmc-docs/issues) on our documentation GitHub repository."
  },
  {
    "name": "Mantine API Overview",
    "endpoint": "/mantine-api",
    "head": "A guide to help you get familiar with core Mantine concepts.",
    "description": "A guide to help you get familiar with core Mantine concepts.",
    "dmc": false,
    "content": "\n\n## Mantine API Overview  \nA guide to help you get familiar with core Mantine concepts.  \nCategory: General  \n\n### MantineProvider\n\nWrap your `app.layout` with a `MantineProvider` to manage your app’s overall theme, including colors, spacing, fonts,\nand light/dark mode. It also exposes Mantine CSS variables based on your theme settings.\n\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import Dash\napp = Dash()\n\napp.layout = dmc.MantineProvider(\n    # children=[] your layout here\n)\n\nif __name__ == \"__main__\":\n    app.run(debug=True)\n\n```\n\n\n### Light Dark Color scheme  \n\nAll Mantine components support light, dark and auto color schemes.\n\nThe default color scheme is light.  You can set the default color scheme on `MantineProvider`:\n\nSee the Theming section for examples of a [Theme Switch Component](/theme-switch)\n\n\n\n### Theme object\n\nMantine’s  [default theme](/theme-object#default-theme) makes Dash apps look great in both light and dark modes. If you’re new to Dash Mantine Components,\nstart with the default theme. You can customize the theme globally by editing the `theme` prop in the `MantineProvider`.\n\nThe `theme` object is a dictionary where you can set things like colors, border radius, spacing, fonts, and breakpoints globally.\nMantine will merge your custom theme with the defaults, so you just need to provide what you want to change.\n\nSee the [Theme Object documentation](/theme-object) for all options.\n\n\n```python\n# Your theme  is merged with default theme\ntheme = {\n    \"fontFamily\": \"Montserrat, sans-serif\",\n    \"defaultRadius\": \"md\",    \n}\n\napp.layout = dmc.MantineProvider(\n    # children=[] your layout here\n    theme=theme\n)\n```\n\n\nThis example demonstrates how changing the `theme` updates the entire app’s appearance. Here, we change:\n- Primary accent color\n- Border radius\n- Card shadow style\n- Color scheme (light/dark)\n\nTry it live: [DMC Theme Builder on Pycafe](https://py.cafe/app/dash.mantine.components/dash-mantine-theme-builder)\n\n---\n\n---\n\nMost of the theme values are exposed as CSS variables and can be accessed\nboth in component props and CSS.\n\nAccessing theme values in a `.css` file in the `/assets` folder:\n\n```css\n.demo {\n  background: var(--mantine-color-red-1);\n  color: var(--mantine-color-red-9);\n  font-family: var(--mantine-font-family);\n  border-radius: var(--mantine-radius-md);\n}\n```\n\nAccessing CSS variables in the `style` or `styles` prop in a component\n\n```python\ndmc.Card(style={\"backgroundColor\":\"var(--mantine-color-red-1)\"})\n```\n\n\n\n### Component specific props\nMost of the components provide props that allow you to customize their styles. For example, `Button` component has\n`color`, `variant`, `size` and `radius` props that control its appearance:\n\n\n### Style props\n\n[Style props](/style-props) work similar to component specific props, but with several differences:\n\n- Style props are not component specific, they can be used with any component.\n- Style props always control a single CSS property. For example, `c` prop controls CSS `color` property, while `color` prop controls a set of properties: `color`, `background-color` and `border-color`.\n- Style props are set in style attribute. It is not possible to override them with CSS without using `!important`.\n\n[Style props](/style-props) are useful when you need to change a single CSS property without creating a separate file for styles. Some of the most common use cases are:\n\n\n- Changing text color and font-size\n\n```python\n\ndmc.Card([\n    dmc.Text(\"Card title\", c=\"blue.8\", fz=\"lg\"),\n    dmc.Text(\"Card description\", c=\"dimmed\", fz=\"sm\")\n])\n```\n\n- Applying margins to inputs inside a form:\n\n```python\ndmc.Paper([\n    dmc.TextInput(label=\"First name\"),\n    dmc.TextInput(label=\"Last name\", mt=\"md\"),\n    dmc.TextInput(label=\"Email\", mt=\"md\")    \n])\n```\n\n- Adding padding to various elements:\n\n```python\ndmc.Paper(\"My custom card\", p=\"xl\")\n```\n\nNote that style props were never intended to be used as a primary way of styling components. In most cases, it is better\nto limit the number of style props used per component to 3-4. If you find yourself using more than 4 style props, \nconsider creating a separate CSS file with styles – it will be easier to maintain and will be more performant.\n\n\n### style prop\n\nYou can use the `style` prop to define inline styles, just like in other dash components:\n```python\ndmc.Card(style={\"backgroundColor\": \"blue\", \"color\": \"white\"})\n```\n\n### className prop\nYou can define CSS classes in a `.css` file in the `/assets` folder. These can then be referenced using the `className` prop, just like in other dash components:\n\n```python \ndmc.Card(className=\"card-style\")\n```\n\n.css file:\n```css\n.card-style {\n    background-color: blue;\n    color: white;\n}\n```\n\n### Styles API\n\nNote that the `style` and the `className` props will apply style to the root of the component.  Many DMC components contain\nmultiple elements, for example the `TextInput` includes `label`, `description`, `error` props.  \n\nUse the `classNames` or `styles` props to target the nested elements.  \n- `styles` prop: Used to apply inline styles directly to specific inner elements of a Mantine component.\n- `classNames`prop: Used to apply custom CSS class names to specific inner elements of a Mantine component\n\nSee more information in the [StylesAPI](/styles-api) section.\n\n\n\n### Colors\n\nColors are stored in `theme['colors']` dict and are exposed as CSS variables. Each color must have at least 10 shades.\nYou can generate new colors based on a single color value with the [Mantine colors generator](https://mantine.dev/colors-generator/).\n\nColors are numbered from 0 to 9 where 0 is the lightest and 9 is the darkest color. Example of blue color from the default theme:\n\n\nTo access colors in styles use CSS variables:\n\n```css\n.demo {\n  background: var(--mantine-color-blue-9);\n  color: var(--mantine-color-blue-0);\n}\n```\n\n### CSS variables\nTheme values are converted to [CSS variables](/css-variables) and are available to use in your styles. All Mantine CSS variables are\nprefixed with `--mantine-`, for example:\n\n- theme[\"fontFamily\"] → --mantine-font-family\n- theme[\"colors\"][\"blue\"][9] → --mantine-color-blue-9\n- theme[\"spacing\"][\"xl\"] → --mantine-spacing-xl\n\n### CSS Variables list\n\nFor a list of all Mantine CSS variables that are generated from default theme, see the [CSS variables](/css-variables) section."
  },
  {
    "name": "ActionIcon",
    "description": "Use this component as an alternative to buttons when you just want to use an icon.",
    "endpoint": "/components/actionicon",
    "package": "dash_mantine_components",
    "category": "Buttons",
    "content": "\n\n## ActionIcon  \nUse this component as an alternative to buttons when you just want to use an icon.  \nCategory: Buttons  \n\n### Introduction\n\n### Usage\n\nActionIcon component is an alternative to [Button](/components/button) component. It can be customized with Mantine styles and used with its\n`n_clicks` property.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import callback, html, Output, Input\nfrom dash_iconify import DashIconify\n\ncomponent = html.Div(\n    [\n        dmc.ActionIcon(\n            DashIconify(icon=\"clarity:settings-line\", width=20),\n            size=\"lg\",\n            variant=\"filled\",\n            id=\"action-icon\",\n            n_clicks=0,\n            mb=10,\n        ),\n        dmc.Text(id=\"action-output\"),\n    ]\n)\n\n\n@callback(\n    Output(\"action-output\", \"children\"),\n    Input(\"action-icon\", \"n_clicks\"),\n)\ndef update_clicks(n_clicks):\n    return f\"Clicked {n_clicks} times.\"\n```\n### Children\nYou can use a dash component such as `DashIconify` in the `children` prop.  Note that it does not control the icon size, \nyou need to specify it manually on icon component to match `ActionIcon` size.\n\nFor example, if you were to use `DashIconify`, you can set the icon size like this:\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ndmc.ActionIcon(\n    DashIconify(icon=\"bi:github\", width=20),\n    size=\"lg\"\n)\n```\n\n### Variants\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ncomponent = dmc.Group(\n    [\n        dmc.ActionIcon(\n            DashIconify(icon=\"clarity:settings-line\"), color=\"blue\", variant=variant\n        )\n        for variant in [\n            \"subtle\",\n            \"filled\",\n            \"outline\",\n            \"light\",\n            \"default\",\n            \"transparent\",\n            \"gradient\",\n            \"white\"\n        ]\n    ]\n)\n```\n### Gradient variant\n\nWhen `variant` prop is set to `gradient`, you can control gradient with gradient prop, it accepts an object with\n`from`, `to` and `deg` properties. If the `gradient` prop is not set, `ActionIcon` will use `defaultGradient` which can\nbe configured on the `theme` dict in the `MantineProvider`. `gradient` prop is ignored when `variant` is not set to `gradient`.\n\nNote that `variant=\"gradient\"` supports only linear gradients with two colors. If you need a more complex gradient, then\nuse `Styles API` to modify `ActionIcon` styles.\n\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ncomponent = dmc.Group(\n    [\n        dmc.ActionIcon(\n            DashIconify(icon=\"clarity:settings-line\"),\n            color=\"blue\",\n            variant=\"gradient\",\n            gradient=gradient\n        )\n        for gradient in [\n            {\"from\": \"red\", \"to\": \"blue\", \"deg\": 90 },\n            {\"from\": \"red\", \"to\": \"blue\", \"deg\": 180},\n            {\"from\": \"teal\", \"to\": \"yellow\", \"deg\": 90},\n            {\"from\": \"teal\", \"to\": \"yellow\", \"deg\": 180}\n         ]\n    ]\n)\n```\n### Colors\n\nHere is a sample using the following colors:\n\"gray\", \"red\", \"pink\", \"grape\", \"violet\", \"indigo\", \"blue\", \"lime\", \"yellow\", \"orange\"\n\nAnd these variants:\n\"subtle\", \"filled\", \"outline\", \"light\", \"transparent\"\n\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ndmc.ActionIcon(\n    DashIconify(icon=\"icomoon-free:sun\"),\n    variant=\"outline\",\n    color=\"orange\",\n)\n```\n\n\n###  Size\n\nYou can use any valid CSS value in `size` prop, it is used to set `width`, `min-width`, `min-height` and `height`\nproperties. Note that `size` prop does not control child icon size, you need to set it manually on icon component.\nWhen size is a number, the value is treated as `px` units and converted to `rem` units.\n\n```python\ndmc.ActionIcon(size=20, children=[...])\n```\n\nIf you want `ActionIcon` to have the same size as Mantine inputs, use `size=\"input-sm\"` prop:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Group([\n    dmc.TextInput(placeholder=\"sm sixe input\", size=\"sm\"),\n    dmc.ActionIcon(\n        size=\"input-sm\",\n        variant=\"default\",\n        children=\"SM\"\n    )\n])\n```\n### Loading state\nWhen `loading` prop is set, `ActionIcon` will be disabled and `Loader` with overlay will be rendered in the center of \nthe button. Loader color depends on `ActionIcon` variant.\n\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\nfrom dash import callback, Input, Output\n\ncomponent = dmc.Box([\n    dmc.Group(\n        [\n            dmc.ActionIcon(\n                id=\"icon-loading-default\",\n                children=DashIconify(icon=\"tabler:heart\", width=18, height=18)\n            ),\n            dmc.ActionIcon(\n                id=\"icon-loading-light\",\n                children=DashIconify(icon=\"tabler:heart\", width=18, height=18),\n                variant=\"light\",\n            ),\n            dmc.ActionIcon(\n                id=\"icon-loading-outline\",\n                children=DashIconify(icon=\"tabler:heart\", width=18, height=18),\n                variant=\"outline\",\n            ),\n        ]\n    ),\n    dmc.Switch(\n        id=\"loading-switch\",\n        label=\"Loading state\",\n        checked=False,\n        mt=\"md\",\n    ),\n])\n\n\n@callback(\n    Output(\"icon-loading-default\", \"loading\"),\n    Output(\"icon-loading-light\", \"loading\"),\n    Output(\"icon-loading-outline\", \"loading\"),\n    Input(\"loading-switch\", \"checked\"),\n)\ndef toggle_loading(loading_state):\n    return loading_state, loading_state, loading_state\n```\n### Loader props\nYou can customize Loader with `loaderProps` prop, it accepts all props that `Loader` component has:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.ActionIcon(size=\"xl\", loading=True, loaderProps={\"type\": \"dots\"})\n```\n### Add custom variants\n\nTo add new `ActionIcon` variants, define a class in the `.css` file using the data-variant attribute. Add the new variants to\nthe `theme` prop in the `MantineProvider` so they available in all `ActionIcon` components in your app.\n\n\nExample:\n - [View Code on GitHub](https://github.com/snehilvj/dmc-docs/tree/main/help_center/theme/action_icon_custom_variants.py)  \n - [Live Demo on PyCafe](https://py.cafe/dash.mantine.components/actionicon-custom-variants-demo)  \n\n\nThe example includes the following in a .css file in /assets\n```css\n.ai-custom-variants {\n  &[data-variant='danger'] {\n    background-color: var(--mantine-color-red-9);\n    color: var(--mantine-color-red-0);\n  }\n\n  &[data-variant='primary'] {\n    background: linear-gradient(45deg, #4b6cb7 10%, #253b67 90%);\n    color: var(--mantine-color-white);\n  }\n}\n```\n\nThe example adds the custom variants to the `theme` prop in `Mantine Provider`\n\n```python\napp.layout = dmc.MantineProvider(\n   children=[# your app content],\n   theme={\n      \"components\": {\n           \"ActionIcon\": {\"classNames\": {\"root\": \"ai-custom-variants\"}}\n       }\n   }\n)\n```\n \n### autoContrast\n`ActionIcon` supports `autoContrast` prop.  You can also set `autoContrast` in the `theme` prop in the `MantineProvider`.\nIf `autoContrast` is set either on `ActionIcon` or on `theme`, content color will be adjusted to have sufficient\ncontrast with the value specified in `color` prop.\n\nNote that `autoContrast` feature works only if you use `color` prop to change background color. `autoContrast` works\nonly with `filled` variant.\n\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\n\ncomponent = dmc.Group(\n    [\n        dmc.ActionIcon(\n            children=DashIconify(icon=\"tabler:heart\", width=18, height=18),\n            color=\"lime.3\"\n        ),\n        dmc.ActionIcon(\n            children=DashIconify(icon=\"tabler:heart\", width=18, height=18),\n            color=\"lime.3\",\n            autoContrast=True\n        ),\n    ]\n)\n```\n### ActionIconGroup\n\n\n```python\n\ndmc.ActionIconGroup(\n    [\n        dmc.ActionIcon(\n            variant=\"default\",\n            size=\"lg\",\n            children=DashIconify(icon=\"tabler:photo\", width=20),\n        ),\n        dmc.ActionIcon(\n            variant=\"default\",\n            size=\"lg\",\n            children=DashIconify(icon=\"tabler:settings\", width=20),        \n        ),\n        dmc.ActionIcon(\n            variant=\"default\",\n            size=\"lg\",\n            children=DashIconify(icon=\"tabler:heart\", width=20),\n        ),\n    ],\n    orientation=\"horizontal\"\n)\n```\n\nNote that you must not wrap child `ActionIcon` components with any additional elements:\n\n```python\ndmc.ActionIconGroup([\n    html.Div(dmc.ActionIcon(...)),  # don't do it like this\n    dmc.ActionIcon(...)\n])\n```\n\n\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n#### ActionIcon Selectors\n\n| Selector | Static selector               | Description                                                |\n|----------|--------------------------------|------------------------------------------------------------|\n| root     | .mantine-ActionIcon-root       | Root element                                               |\n| loader   | .mantine-ActionIcon-loader     | Loader component, rendered inside the root element when `loading` prop is set |\n| icon     | .mantine-ActionIcon-icon       | Inner icon wrapper                                         |\n\n\n#### ActionIcon CSS Variables\n\n| Selector | Variable        | Description                                  |\n|----------|-----------------|----------------------------------------------|\n| root     | --ai-bg         | Controls background                         |\n|          | --ai-hover      | Controls background when hovered            |\n|          | --ai-bd         | Controls border                             |\n|          | --ai-color      | Controls icon color                         |\n|          | --ai-hover-color| Controls icon color when hovered            |\n|          | --ai-radius     | Controls border-radius                      |\n|          | --ai-size       | Controls width, height, min-width, and min-height styles |\n\n\n#### ActionIcon Data Attributes\n\n| Selector      | Attribute       | Condition                  |\n|---------------|-----------------|----------------------------|\n| root          | data-disabled   | `disabled` prop is set     |\n| root, icon    | data-loading    | `loading` prop is set      |\n\n\n#### ActionIconGroup Selectors\n\n| Selector | Static selector                    | Description                     |\n|----------|-------------------------------------|---------------------------------|\n| group    | .mantine-ActionIconGroup-group      | Root element                    |\n\n\n#### ActionIconGroup CSS Variables\n\n| Selector | Variable            | Description                                                      |\n|----------|---------------------|------------------------------------------------------------------|\n| group    | --ai-border-width   | Controls border width of child `ActionIcon` components placed beside one another |\n\n\n#### ActionIconGroup Data Attributes\n\n| Selector | Attribute        | Value                      |\n|----------|------------------|----------------------------|\n| group    | data-orientation | Value of `orientation` prop |\n\n\n\n\n### Keyword Arguments\n#### ActionIcon\n\n- children (a list of or a singular dash component, string or number; optional):\n    Icon displayed inside the button.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- autoContrast (boolean; optional):\n    Determines whether button text color with filled variant should\n    depend on `background-color`. If luminosity of the `color` prop is\n    less than `theme.luminosityThreshold`, then `theme.white` will be\n    used for text color, otherwise `theme.black`. Overrides\n    `theme.autoContrast`.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- color (optional):\n    Key of `theme.colors` or any valid CSS color. Default value is\n    `theme.primaryColor`.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- disabled (boolean; optional):\n    Sets `disabled` and `data-disabled` attributes on the button\n    element.\n\n- gradient (dict; optional):\n    Gradient data used when `variant=\"gradient\"`, default value is\n    `theme.defaultGradient`.\n\n    `gradient` is a dict with keys:\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loaderProps (dict; optional):\n    Props added to the `Loader` component (only visible when `loading`\n    prop is set).\n\n    `loaderProps` is a dict with keys:\n\n- loading (boolean; optional):\n    Determines whether `Loader` component should be displayed instead\n    of the `children`, `False` by default.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- n_clicks (number; default 0):\n    An integer that represents the number of times that this element\n    has been clicked on.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set border-radius.\n    Numbers are converted to rem. `theme.defaultRadius` by default.\n\n- size (number; optional):\n    Controls width and height of the button. Numbers are converted to\n    rem. `'md'` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n#### ActionIcon Group\n\n- children (a list of or a singular dash component, string or number; optional):\n    `ActionIcon` components only.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- borderWidth (string | number; optional):\n    `border-width` of the child `ActionIcon` components. Default value\n    in `1`.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- orientation (a value equal to: 'horizontal', 'vertical'; optional):\n    Controls group orientation, `'horizontal'` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`."
  },
  {
    "name": "Button",
    "description": "DMC alternative to html.Button.",
    "endpoint": "/components/button",
    "package": "dash_mantine_components",
    "category": "Buttons",
    "content": "\n\n## Button  \nDMC alternative to html.Button.  \nCategory: Buttons  \n\n### Introduction\n\n### Variant\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Group(\n    [\n        dmc.Button(\"Default button\"),\n        dmc.Button(\"Subtle button\", variant=\"subtle\"),\n        dmc.Button(\"Gradient button\", variant=\"gradient\"),\n        dmc.Button(\"Filled button\", variant=\"filled\"),\n        dmc.Button(\"Light button\", variant=\"light\"),\n        dmc.Button(\"Outline button\", variant=\"outline\"),\n        dmc.Button(\"Transparent\", variant=\"transparent\"),\n        dmc.Button(\"White\", variant=\"white\"),\n    ]\n)\n```\n#### Gradient Variant\n\nTo use gradient as Button background:\n\n* set `variant` prop to \"gradient\"\n* set `gradient` prop to `{ 'from': 'color-from', 'to': 'color-to', 'deg': 135}`, where\n\n  * `color-from` and `color-to` are colors from Mantine's theme colors.\n  * `deg` is linear gradient deg.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Group(\n    children=[\n        dmc.Button(\n            \"Indigo cyan\",\n            variant=\"gradient\",\n            gradient={\"from\": \"indigo\", \"to\": \"cyan\"},\n        ),\n        dmc.Button(\n            \"Lime green\",\n            variant=\"gradient\",\n            gradient={\"from\": \"teal\", \"to\": \"lime\", \"deg\": 105},\n        ),\n        dmc.Button(\n            \"Teal blue\",\n            variant=\"gradient\",\n            gradient={\"from\": \"teal\", \"to\": \"blue\", \"deg\": 60},\n        ),\n        dmc.Button(\n            \"Orange red\",\n            variant=\"gradient\",\n            gradient={\"from\": \"orange\", \"to\": \"red\"},\n        ),\n        dmc.Button(\n            \"Grape pink\",\n            variant=\"gradient\",\n            gradient={\"from\": \"grape\", \"to\": \"pink\", \"deg\": 35},\n        ),\n    ]\n)\n```\n### Left and right sections  \n\n`leftSection` and `rightSection` allow adding icons or any other element to the left and right side of the button.\nWhen a section is added, padding on the corresponding side is reduced.\n\nNote that `leftSection` and `rightSection` are flipped in RTL mode (`leftSection` is displayed on the right and `rightSection` is displayed on the left).\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ncomponent = dmc.Group(\n    [\n        dmc.Button(\n            \"Connect to Database\",\n            leftSection=DashIconify(icon=\"fluent:database-plug-connected-20-filled\"),\n        ),\n        dmc.Button(\n            \"Load Data\",\n            variant=\"subtle\",\n            rightSection=DashIconify(icon=\"logos:twitter\"),\n            color=\"blue\",\n        ),\n        dmc.Button(\n            \"Settings\",\n            variant=\"outline\",\n            leftSection=DashIconify(icon=\"fluent:settings-32-regular\"),\n        ),\n    ]\n)\n```\n### Sections position\n`justify` prop sets `justify-content` of inner element. You can use it to change the alignment of left and right sections.\nFor example, to spread them across the button set `justify='space-between'`.\n\nIf you need to align just one section to the side of the button, set `justify` to `space-between` and add empty `html.Span()` to the opposite section.\n\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\nfrom dash import html\n\nicon = DashIconify(icon=\"tabler:photo\", width=14)\n\ncomponent = dmc.Stack(\n    [\n        dmc.Button(\n            \"Button label\",\n            justify=\"center\",\n            fullWidth=True,\n            leftSection=icon,\n            rightSection=icon,\n            variant=\"default\",\n        ),\n        dmc.Button(\n            \"Button label\",\n            justify=\"center\",\n            fullWidth=True,\n            leftSection=icon,\n            variant=\"default\",\n            mt=\"md\",\n        ),\n        dmc.Button(\n            \"Button label\",\n            justify=\"center\",\n            fullWidth=True,\n            rightSection=icon,\n            variant=\"default\",\n            mt=\"md\",\n        ),\n        dmc.Button(\n            \"Button label\",\n            justify=\"center\",\n            fullWidth=True,\n            leftSection=html.Span(),  # Empty spacer\n            rightSection=icon,\n            variant=\"default\",\n            mt=\"md\",\n        ),\n    ]\n)\n```\n\n### Loading State\n\nStarting with dash version 2.9.2, you can use duplicate callback outputs. Here's an example that lets you easily show\nloading state while the callback is running.   Note that the button is disabled automatically when `loading=True`\n\n```python\nimport uuid\nfrom time import sleep\n\nimport dash_mantine_components as dmc\nfrom dash import html, callback, Output, Input, clientside_callback\nfrom dash_iconify import DashIconify\n\ncomponent = html.Div(\n    [\n        dmc.Button(\n            \"Load from database\",\n            id=\"loading-button\",\n            leftSection=DashIconify(icon=\"fluent:database-plug-connected-20-filled\"),\n        ),\n        dmc.Text(id=\"clicked-output\", mt=10),\n    ]\n)\n\nclientside_callback(\n    \"\"\"\n    function updateLoadingState(n_clicks) {\n        return true\n    }\n    \"\"\",\n    Output(\"loading-button\", \"loading\", allow_duplicate=True),\n    Input(\"loading-button\", \"n_clicks\"),\n    prevent_initial_call=True,\n)\n\n\n@callback(\n    Output(\"clicked-output\", \"children\"),\n    Output(\"loading-button\", \"loading\"),\n    Input(\"loading-button\", \"n_clicks\"),\n    prevent_initial_call=True,\n)\ndef load_from_db(n_clicks):\n    sleep(3)\n    return str(uuid.uuid4()), False\n```\n### Loader Props\n\nYou can customize [Loader](/components/loader) with `loaderProps` prop, it accepts all props that Loader component has:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Button(\"Loading Props\", loaderProps={\"type\": \"dots\"}, loading=True)\n```\n### Colors\n\n```python\nimport dash_mantine_components as dmc\n\ndmc.Button(\"Settings\", color=\"red\")\n```\n\n### Radius and Size\n\nButton's radius and size can be customized by setting `radius` and `size` props. Both props have predefined values:\nxs, sm, md, lg, xl. Alternatively, you can use a number to set radius, size in px.\n\n```python\nimport dash_mantine_components as dmc\n\ndmc.Group(\n    [\n        dmc.Button(\"Connect to Database\", size=\"sm\"),\n        dmc.Button(\"Notify\", radius=\"xl\"),\n        dmc.Button(\"Settings\", size=20),\n    ]\n)\n```\n\n### Compact Size\n\n```python\nimport dash_mantine_components as dmc\n\nsizes = [\"xs\", \"sm\", \"md\", \"lg\", \"xl\"]\n\ncomponent = dmc.Stack(\n    [\n        dmc.Group(\n            [dmc.Button(f\"Normal {size}\", size=size) for size in sizes],\n        ),\n        dmc.Group(\n            [dmc.Button(f\"Compact {size}\", size=f\"compact-{size}\") for size in sizes],\n        ),\n    ]\n)\n```\n### Full Width Button\n\nPass `fullWidth=True` for a full width button.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Button(\"Click to open the app\", fullWidth=True, variant=\"outline\")\n```\n### Add custom variants\n\nTo add new `Button` variants, define a class in the `.css` file using the `data-variant` attribute. Add the new variants to\nthe `theme` prop in the `MantineProvider` so they available in all `Button` components in your app.\n\n\nExample:\n - [View Code on GitHub](https://github.com/snehilvj/dmc-docs/tree/main/help_center/theme/button_custom_variants.py)  \n - [Live Demo on PyCafe](https://py.cafe/dash.mantine.components/button-custom-variants-demo-0)  \n \n\nThe example includes the following in a .css file in /assets\n```css\n.button-custom-variants {\n  &[data-variant='danger'] {\n    background-color: var(--mantine-color-red-9);\n    color: var(--mantine-color-red-0);\n  }\n\n  &[data-variant='primary'] {\n    background: linear-gradient(45deg, #4b6cb7 10%, #253b67 90%);\n    color: var(--mantine-color-white);\n    border-width: 0;\n  }\n}\n```\n\nThe example adds the custom variants to the `theme` prop in `Mantine Provider`\n\n```python\napp.layout = dmc.MantineProvider(\n   children=[# your app content],\n   theme={\n      \"components\": {\n           \"Button\": {\"classNames\": {\"root\": \"button-custom-variants\"}}\n       }\n   }\n)\n```\n\n\n### Button Group\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.ButtonGroup(\n    [\n        dmc.Button(\"First\", variant=\"outline\"),\n        dmc.Button(\"Second\", variant=\"outline\"),\n        dmc.Button(\"Third\", variant=\"outline\"),\n    ]\n)\n```\nNote that you must not wrap child `Button` components with any additional elements:\n\n```python\ndmc.ButtonGroup([\n    html.Div(dmc.Button(\"This will not work\")),\n    dmc.Button(\"Buttons will have incorrect borders\")\n])\n```\n\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n#### Button Selectors\n\n| Selector | Static selector          | Description                                        |\n|----------|---------------------------|----------------------------------------------------|\n| root     | .mantine-Button-root      | Root element                                       |\n| loader   | .mantine-Button-loader    | Loader component, displayed only when `loading` prop is set |\n| inner    | .mantine-Button-inner     | Contains all other elements, child of the root element |\n| section  | .mantine-Button-section   | Left and right sections of the button             |\n| label    | .mantine-Button-label     | Button children                                   |\n\n#### Button CSS Variables\n\n| Selector | Variable                  | Description                                       |\n|----------|---------------------------|---------------------------------------------------|\n| root     | --button-bg               | Controls background                               |\n|          | --button-bd               | Controls border                                   |\n|          | --button-hover            | Controls background when hovered                 |\n|          | --button-color            | Controls text color                               |\n|          | --button-hover-color      | Controls text color when hovered                 |\n|          | --button-radius           | Controls border-radius                            |\n|          | --button-height           | Controls height of the button                     |\n|          | --button-padding-x        | Controls horizontal padding of the button         |\n|          | --button-fz               | Controls font-size of the button                  |\n|          | --button-justify          | Controls `justify-content` of the inner element   |\n\n#### Button Data Attributes\n\n| Selector       | Attribute             | Condition               | Value                           |\n|----------------|------------------------|--------------------------|---------------------------------|\n| root           | data-disabled          | `disabled` prop is set   | –                               |\n| root, label    | data-loading           | `loading` prop is set    | –                               |\n| root           | data-block             | `fullWidth` prop is set  | –                               |\n| root           | data-with-left-section | `leftSection` is set     | –                               |\n| root           | data-with-right-section| `rightSection` is set    | –                               |\n| section        | data-position          | –                        | Section position: left or right |\n\n#### Button.Group Selectors\n\n| Selector | Static selector            | Description               |\n|----------|-----------------------------|---------------------------|\n| group    | .mantine-ButtonGroup-group  | Root element              |\n\n#### Button.Group CSS Variables\n\n| Selector | Variable                  | Description                               |\n|----------|---------------------------|-------------------------------------------|\n| group    | --button-border-width     | Border-width of child Button components   |\n\n#### Button.Group Data Attributes\n\n| Selector | Attribute        | Value                   |\n|----------|-------------------|-------------------------|\n| group    | data-orientation  | Value of `orientation` prop |\n\n\n\n\n### Keyword Arguments\n#### Button\n\n- children (a list of or a singular dash component, string or number; optional):\n    Button content.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- autoContrast (boolean; optional):\n    Determines whether button text color with filled variant should\n    depend on `background-color`. If luminosity of the `color` prop is\n    less than `theme.luminosityThreshold`, then `theme.white` will be\n    used for text color, otherwise `theme.black`. Overrides\n    `theme.autoContrast`.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- color (optional):\n    Key of `theme.colors` or any valid CSS color, `theme.primaryColor`\n    by default.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- disabled (boolean; optional):\n    Indicates disabled state.\n\n- fullWidth (boolean; optional):\n    Determines whether button should take 100% width of its parent\n    container, `False` by default.\n\n- gradient (dict; optional):\n    Gradient configuration used when `variant=\"gradient\"`, default\n    value is `theme.defaultGradient`.\n\n    `gradient` is a dict with keys:\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- justify (optional):\n    Sets `justify-content` of `inner` element, can be used to change\n    distribution of sections and label, `'center'` by default.\n\n- leftSection (a list of or a singular dash component, string or number; optional):\n    Content displayed on the left side of the button label.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loaderProps (dict; optional):\n    Props added to the `Loader` component (only visible when `loading`\n    prop is set).\n\n    `loaderProps` is a dict with keys:\n\n- loading (boolean; optional):\n    Determines whether the `Loader` component should be displayed over\n    the button.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- n_clicks (number; default 0):\n    An integer that represents the number of times that this element\n    has been clicked on.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set\n    `border-radius`, `theme.defaultRadius` by default.\n\n- rightSection (a list of or a singular dash component, string or number; optional):\n    Content displayed on the right side of the button label.\n\n- size (optional):\n    Controls button `height`, `font-size` and horizontal `padding`,\n    `'sm'` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n#### ButtonGroup\n\n- children (a list of or a singular dash component, string or number; optional):\n    `Button` components.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- borderWidth (string | number; optional):\n    `border-width` of the child `Button` components. Numbers are\n    converted to rem. Default value in `1`.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- orientation (a value equal to: 'horizontal', 'vertical'; optional):\n    Orientation of the group, `horizontal` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`."
  },
  {
    "name": "ColorSchemeToggle",
    "description": "Use ColorSchemeToggle to switch light and dark color schemes.",
    "endpoint": "/components/colorschemetoggle",
    "package": "dash_mantine_components",
    "category": "Buttons",
    "content": "\n\n## ColorSchemeToggle  \nUse ColorSchemeToggle to switch light and dark color schemes.  \nCategory: Buttons  \n\nThe `ColorSchemeToggle` is a button that lets users switch between light and dark color themes.\n\nIt is built on the `ActionIcon` component. See the [ActionIcon documentation](/components/actionicon) for examples of \nstyling with props such as `size`, `color`, and `gradient`.\n\n\n### Usage\n\nCopy this app to run it locally. For a live demo, click the `ColorSchemeToggle` in the header of these docs.\n\nNote that the toggle switches themes automatically and does not require a Dash callback.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import Dash\nfrom dash_iconify import DashIconify\n\napp = Dash()\n\ncomponent = dmc.ColorSchemeToggle(\n    lightIcon=DashIconify(icon=\"radix-icons:sun\", width=20),\n    darkIcon=DashIconify(icon=\"radix-icons:moon\", width=20),\n    color=\"yellow\",\n    size=\"lg\",\n    m=\"xl\",\n)\n\napp.layout = dmc.MantineProvider(component)\n\nif __name__ == \"__main__\":\n    app.run(debug=True)\n\n```\n\n### lightIcon and darkIcon\n\nThe `lightIcon` and `darkIcon` props accept any Dash component. For example, you can pass `DashIconify` to display icons \nfor each theme. You can also wrap the icon with a tooltip component to show text on hover:\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ndmc.ColorSchemeToggle(\n    lightIcon=dmc.Tooltip(DashIconify(icon=\"radix-icons:sun\"), label=\"Light mode\"),\n    darkIcon=dmc.Tooltip(DashIconify(icon=\"radix-icons:moon\"), label=\"Dark mode\"),\n)\n```\n\n### computedColorScheme\n\nThe `computedColorScheme` prop is read-only and can be used as an `Input` in a Dash callback. This is useful when\nyou need to update Plotly figures or components such as `dash-ag-grid` based on the current Mantine theme. See examples\nin the [Figure Templates](/components/figure-templates) and [Dash Ag Grid](/dash-ag-grid) sections.\n\n`computedColorScheme` always returns `\"light\"` or `\"dark\"`, even if the toggle is set to `\"auto\"`.\n\n```python\nfrom dash import Input, Output\nimport dash_mantine_components as dmc\n\n@app.callback(\n    Output(\"color-scheme-output\", \"children\"),\n    Input(\"color-scheme-toggle\", \"computedColorScheme\"),\n)\ndef update(scheme):\n    return f\"Current color scheme: {scheme}\"\n```\n\n### Custom theme switch components\n\nIf you want to create your own custom theme switch or need more control over how themes toggle, check out \nthe [Theme Switch Components](/theme-switch) page for and example using `Switch`.\n\n\n### Setting theme when the app is loading\n\nThe selected color scheme from `ColorSchemeToggle` is saved in `localStorage` under `mantine-color-scheme-value`, allowing\nthe correct styles to be applied before the app renders and preventing flashes of the wrong color on page load or refresh.\n\nUse `pre_render_color_scheme()` at the top of your app to initialize the Mantine color scheme immediately, matching the\nuser’s preference or system theme:\n\n```python\nimport dash_mantine_components as dmc\n\ndmc.pre_render_color_scheme()\n```\n\nNote:  `pre_render_color_scheme()` required dash>=3.0\n\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n#### ColorSchemeToggle Selectors\n\n| Selector | Static selector               | Description                                                |\n|----------|--------------------------------|------------------------------------------------------------|\n| root     | .mantine-ActionIcon-root       | Root element                                               |\n| icon     | .mantine-ActionIcon-icon       | Inner icon wrapper                                         |\n\n\n#### ColorSchemeToggle CSS Variables\n\n| Selector | Variable        | Description                                  |\n|----------|-----------------|----------------------------------------------|\n| root     | --ai-bg         | Controls background                         |\n|          | --ai-hover      | Controls background when hovered            |\n|          | --ai-bd         | Controls border                             |\n|          | --ai-color      | Controls icon color                         |\n|          | --ai-hover-color| Controls icon color when hovered            |\n|          | --ai-radius     | Controls border-radius                      |\n|          | --ai-size       | Controls width, height, min-width, and min-height styles |\n\n\n#### ActionIcon Data Attributes\n\n| Selector      | Attribute       | Condition                  |\n|---------------|-----------------|----------------------------|\n| root          | data-disabled   | `disabled` prop is set     |\n\n\n\n\n### Keyword Arguments\n#### ColorSchemeToggle\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- autoContrast (boolean; optional):\n    If set, adjusts text color based on background color for `filled`\n    variant.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- color (optional):\n    Key of `theme.colors` or any valid CSS color. default\n    `theme.primaryColor`.\n\n- computedColorScheme (a value equal to: 'dark', 'light'; optional):\n    Read-only Color Scheme.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- darkIcon (a list of or a singular dash component, string or number; optional):\n    Icon shown when scheme is dark.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- disabled (boolean; optional):\n    Sets `disabled` attribute, prevents interactions.\n\n- gradient (dict; optional):\n    Gradient values used with `variant=\"gradient\"`. default\n    `theme.defaultGradient`.\n\n    `gradient` is a dict with keys:\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- lightIcon (a list of or a singular dash component, string or number; optional):\n    Icon shown when scheme is light.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set border-radius.\n    Numbers are converted to rem. default `theme.defaultRadius`.\n\n- size (number; optional):\n    Controls width and height of the button. Numbers are converted to\n    rem. default `'md'`.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`."
  },
  {
    "name": "CopyButton",
    "description": "Copies given text to clipboard.  A DMC alternative to dcc.Clipboard.",
    "endpoint": "/components/copybutton",
    "package": "dash_mantine_components",
    "category": "Buttons",
    "content": "\n\n## CopyButton  \nCopies given text to clipboard.  A DMC alternative to dcc.Clipboard.  \nCategory: Buttons  \n\n### Introduction\n\n`CopyButton` is a ready-to-use clipboard button built with the Mantine `Button` component.\nIt supports props for dynamic text, icons and colors while copying plus all standard `Button` props.\n\n\n### Colors\n\nUse `color` and `copiedColor` props to change the button’s color before and after copying.\nNote - if `copiedColor` is not provided, the color will remain unchanged during copying.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.CopyButton(\n    value=\"https://www.dash-mantine-components.com/\",\n    children=\"Copy URL\",\n    color=\"blue\",\n    copiedColor=\"teal\"\n)\n```\n### Copy State Display \n\nUse `children` and `copiedChildren` to control the content of the underlying button before and after copying.\n\nThe `CopyButton` renders a Mantine `Button` internally, and `children` / `copiedChildren` are passed directly as the\nbutton’s children. For this reason, they must not contain interactive elements (for example: buttons, links, inputs,\nor other clickable controls), as nesting interactive components inside a button results in invalid HTML and accessibility issues.\n\nUse text, icons, or non-interactive Dash components (such as `Text`, `Group`, `Stack`, or `Icon` components) to customize the button content.\n\nIf you would like to use something other than a button (like an `ActionIcon`), use the `CustomCopyButton` instead.\n\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ncomponent = dmc.Group([\n    dmc.CopyButton(\n        value=\"https://www.dash-mantine-components.com/\",\n        children=\"Copy URL\",\n        copiedChildren=\"Copied!\",\n        color=\"blue\",\n        copiedColor=\"teal\"\n    ),\n    dmc.CopyButton(\n        value=\"This text is copied\",\n        children=DashIconify(icon=\"tabler:clipboard\"),\n        copiedChildren=DashIconify(icon=\"tabler:check\"),\n        color=\"blue\",\n        copiedColor=\"teal\",\n        variant=\"outline\"\n    ),\n    dmc.CopyButton(\n        value=\"This text is copied\",\n        children=DashIconify(icon=\"fa-regular:copy\"),\n        copiedChildren=DashIconify(icon=\"fa-regular:check-circle\"),\n        color=\"gray\",\n        copiedColor=\"dark\",\n        variant=\"transparent\"\n    )\n])\n```\n### Copy from another component\nUse `target_id` to copy text (or value prop) from another component instead of using a static value. No callback required!\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\n\ncomponent = dmc.Group([\n    dmc.Textarea(\n        \"Type here.  This text will be copied.\",\n        id=\"text-to-copy\",\n        autosize=True,\n        minRows=3,\n        w=300\n    ),\n    dmc.CopyButton(\n        target_id=\"text-to-copy\",\n        children=DashIconify(icon=\"fa-regular:copy\"),\n        copiedChildren=DashIconify(icon=\"fa-regular:check-circle\"),\n        color=\"var(--mantine-color-dimmed)\",\n        copiedColor=\"gray\",\n        variant=\"outline\",\n        size=\"xs\"\n    )\n], gap=0, align=\"flex-start\" )\n```\n### Copy in a callback\n\nSet `triggerCopy=True` to trigger the copy from a callback. This property automatically resets to `False` after copying.\n\nNote that the  `value` and `triggerCopy` properties can be updated in the same callback.\n\n\nIn this example, the `CopyButton` is hidden, and `triggerCopy` is set to `True` when the `value` of the `Select` component changes.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import Input, Output, callback\n\ncomponent = dmc.Box([\n    dmc.Select(\n        id=\"copy-select\",\n        data=[\"Job A\", \"Job B\", \"Job C\"],\n        label=\"Select Job\",\n        description=\"Results are copied to the clipboard\"\n    ),\n    dmc.Text(id=\"copy-select-output\"),\n    dmc.CopyButton(\n        id=\"copy-trigger\",\n        style={\"visibility\": \"hidden\"},\n        value=\"\"\n    )\n])\n\n@callback(\n    Output(\"copy-select-output\", \"children\"),\n    Output(\"copy-trigger\", \"value\"),\n    Output(\"copy-trigger\", \"triggerCopy\"),\n    Input(\"copy-select\", \"value\")\n)\ndef update_clipboard(v):\n    results = f\"Results from {v}\"\n    return results, results, True\n```\n### Timeout\n\nThe `timeout` prop controls how long the \"copied\" state is displayed (in milliseconds). The default is 1000ms.\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.CopyButton(\n    value=\"copied text\",\n    children=\"Copy\",\n    copiedChildren=\"Copied\",\n    color=\"dark.3\",\n    copiedColor=\"gray.2\",\n    autoContrast=True,\n    timeout=\"2000\"\n)\n```\n### Custom Copy Button\n\nCreate a custom copy button using a JavaScript function. This example uses an `ActionIcon` and `Tooltip` that respond to the copied state.\n\n\nNote: This example uses custom JavaScript defined in the assets folder. Learn more in the \"Functions As Props\" section of this document.\n\n\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ncomponent = dmc.CustomCopyButton(\n    value=\"Custom Copy demo\",\n    children={\"function\": \"copyActionIcon\"},\n)\n```\n\n```javascript\nvar dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\nvar dmc = window.dash_mantine_components;\nvar DashIconify = window.dash_iconify.DashIconify;\n\ndmcfuncs.copyActionIcon = function({ copied, copy }) {\n  return React.createElement(\n    dmc.Tooltip,\n    {\n      label: copied ? 'Copied' : 'Copy',\n      withArrow: true,\n      position: 'right'\n    },\n    React.createElement(\n      dmc.ActionIcon,\n      {\n        color: copied ? 'teal' : 'gray',\n        variant: 'subtle',\n        onClick: copy\n      },\n      copied\n        ? React.createElement(DashIconify, { icon: 'tabler:check', style: { width: 16, height: 16 } })\n        : React.createElement(DashIconify, { icon: 'tabler:copy', style: { width: 16, height: 16 } })\n    )\n  );\n};\n```\n\n\n\n### Security\nDue to security reasons `CopyButton` components will not work in iframes and may not work with local files opened with `file://` protocol.  \n\nIt will work with local websites using `http://` protocol, but when deployed it must use `https//` (secure).\n\nLearn more about [navigator.clipboard](https://web.dev/articles/async-clipboard).\n\n\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n#### CopyButton Selectors\n\n| Selector | Static selector          | Description                                        |\n|----------|---------------------------|----------------------------------------------------|\n| root     | .mantine-Button-root      | Root element                                       |\n| loader   | .mantine-Button-loader    | Loader component, displayed only when `loading` prop is set |\n| inner    | .mantine-Button-inner     | Contains all other elements, child of the root element |\n| section  | .mantine-Button-section   | Left and right sections of the button             |\n| label    | .mantine-Button-label     | Button children                                   |\n\n#### CopyButton CSS Variables\n\n| Selector | Variable                  | Description                                       |\n|----------|---------------------------|---------------------------------------------------|\n| root     | --button-bg               | Controls background                               |\n|          | --button-bd               | Controls border                                   |\n|          | --button-hover            | Controls background when hovered                 |\n|          | --button-color            | Controls text color                               |\n|          | --button-hover-color      | Controls text color when hovered                 |\n|          | --button-radius           | Controls border-radius                            |\n|          | --button-height           | Controls height of the button                     |\n|          | --button-padding-x        | Controls horizontal padding of the button         |\n|          | --button-fz               | Controls font-size of the button                  |\n|          | --button-justify          | Controls `justify-content` of the inner element   |\n\n#### CopyButton Data Attributes\n\n| Selector       | Attribute             | Condition               | Value                           |\n|----------------|------------------------|--------------------------|---------------------------------|\n| root           | data-disabled          | `disabled` prop is set   | –                               |\n| root           | data-block             | `fullWidth` prop is set  | –                               |\n\n\n### Keyword Arguments\n#### CopyButton\n\n- children (a list of or a singular dash component, string or number; optional):\n    Button content displayed before copying.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- autoContrast (boolean; optional):\n    Determines whether button text color with filled variant should\n    depend on `background-color`. If luminosity of the `color` prop is\n    less than `theme.luminosityThreshold`, then `theme.white` will be\n    used for text color, otherwise `theme.black`. Overrides\n    `theme.autoContrast`.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- color (optional):\n    Key of `theme.colors` or any valid CSS color, used when the value\n    has not been copied yet.\n\n- copiedChildren (a list of or a singular dash component, string or number; optional):\n    Button content displayed after the value has been copied to\n    clipboard.\n\n- copiedColor (optional):\n    Key of `theme.colors` or any valid CSS color, used after the value\n    has been copied to clipboard.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- disabled (boolean; optional):\n    Indicates disabled state.\n\n- fullWidth (boolean; optional):\n    Determines whether button should take 100% width of its parent\n    container, `False` by default.\n\n- gradient (dict; optional):\n    Gradient configuration used when `variant=\"gradient\"`, default\n    value is `theme.defaultGradient`.\n\n    `gradient` is a dict with keys:\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- n_clicks (number; default 0):\n    An integer that represents the number of times that this element\n    has been clicked on.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set\n    `border-radius`, `theme.defaultRadius` by default.\n\n- size (optional):\n    Controls button `height`, `font-size` and horizontal `padding`,\n    `'sm'` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- target_id (string; optional):\n    The id of target component containing text to copy to the\n    clipboard. The inner text of the `children` prop will be copied to\n    the clipboard.  If none, then the text from the  `value` prop will\n    be copied.\n\n- timeout (number; default 1000):\n    Copied status timeout in ms, `1000` by default.\n\n- triggerCopy (boolean; default False):\n    Set to True to trigger copy in a callback - will auto-reset to\n    False after copy.\n\n- value (string; default ''):\n    Value to be copied to clipboard.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n#### CustomCopyButton\n\n- children (boolean | number | string | dict | list; optional):\n    Function that receives {copied, copy} and returns a component  See\n    https://www.dash-mantine-components.com/functions-as-props.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- timeout (number; default 1000):\n    Copied status timeout in ms, `1000` by default.\n\n- value (string; required):\n    Value to be copied to clipboard."
  },
  {
    "name": "An Introduction to Charts",
    "description": "Getting started with chart components.",
    "endpoint": "/components/chartsintro",
    "package": "dash_mantine_components",
    "category": "Charts",
    "content": "\n\n## An Introduction to Charts  \nGetting started with chart components.  \nCategory: Charts  \n\n### CSS Extensions\n\nAs of DMC 1.2.0, Chart component styles are bundled automatically, so you no longer need to include a separate CSS file.\nIf you're using an older version of DMC, refer to the [migration guide](/migration) for instructions on including optional stylesheets.\n\n### Based on recharts\n\nMost of the chart components are based on [recharts](https://recharts.org/) library. If you need advanced features that are not covered in dmc charts documentation, please refer to the [recharts documentation](https://recharts.org/en-US/api) for more information."
  },
  {
    "name": "AreaChart",
    "description": "Area chart component with stacked, percent and split variants.",
    "endpoint": "/components/areachart",
    "package": "dash_mantine_components",
    "category": "Charts",
    "content": "\n\n## AreaChart  \nArea chart component with stacked, percent and split variants.  \nCategory: Charts  \n\n### Introduction\n\nUse `AreaChart` component without `type` prop to render a regular area chart. In a regular area chart, each data series\nis plotted on its own and does not interact with other series.\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ndmc.AreaChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    series = [\n        {\"name\": \"Apples\", \"color\": \"indigo.6\"},\n        {\"name\": \"Oranges\", \"color\": \"blue.6\"},\n        {\"name\": \"Tomatoes\", \"color\": \"teal.6\"}\n    ],\n    curveType=\"linear\",\n    tickLine=\"xy\",\n    withGradient=False,\n    withXAxis=False,\n    withDots=False,\n)\n```\n\n### Data\nHere is the data imported for the examples on this page:\n\n```python\n\ndata = [\n  {\"date\": \"Mar 22\", \"Apples\": 2890, \"Oranges\": 2338, \"Tomatoes\": 2452},\n  {\"date\": \"Mar 23\", \"Apples\": 2756, \"Oranges\": 2103, \"Tomatoes\": 2402},\n  {\"date\": \"Mar 24\", \"Apples\": 3322, \"Oranges\": 986, \"Tomatoes\": 1821},\n  {\"date\": \"Mar 25\", \"Apples\": 3470, \"Oranges\": 2108, \"Tomatoes\": 2809},\n  {\"date\": \"Mar 26\", \"Apples\": 3129, \"Oranges\": 1726, \"Tomatoes\": 2290}\n]\n```\n\n### Stacked area chart\nSet type=\"stacked\" to render a stacked area chart. In this type of area chart stacking is applied along the vertical\naxis, allowing you to see the overall trend as well as the contribution of each individual series to the total.\n\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.AreaChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    type=\"stacked\",\n    series=[\n        {\"name\": \"Apples\", \"color\": \"indigo.6\"},\n        {\"name\": \"Oranges\", \"color\": \"blue.6\"},\n        {\"name\": \"Tomatoes\", \"color\": \"teal.6\"},\n    ],\n)\n```\n### Percent area chart\nSet type=\"percent\" to render a percent area chart. In this type of area chart the y-axis scale is always normalized to\n100%, making it easier to compare the contribution of each series in terms of percentages.\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.AreaChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    type=\"percent\",\n    series=[\n        {\"name\": \"Apples\", \"color\": \"indigo.6\"},\n        {\"name\": \"Oranges\", \"color\": \"blue.6\"},\n        {\"name\": \"Tomatoes\", \"color\": \"teal.6\"},\n    ],\n)\n```\n### Split area chart \nSet type=\"split\" to render a split area chart. In this type of area chart fill color is split into two colors, one for\npositive values and one for negative values. Split area chart supports only one data series.\n\n\n```python\nimport dash_mantine_components as dmc\n\ndata = [\n    {\"date\": \"Mar 22\", \"Apples\": 110},\n    {\"date\": \"Mar 23\", \"Apples\": 60},\n    {\"date\": \"Mar 24\", \"Apples\": -80},\n    {\"date\": \"Mar 25\", \"Apples\": 40},\n    {\"date\": \"Mar 26\", \"Apples\": -40},\n    {\"date\": \"Mar 27\", \"Apples\": 80},\n]\n\ncomponent = dmc.AreaChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    type=\"split\",\n    series=[\n        {\"name\": \"Apples\", \"color\": \"indigo.6\"},\n        {\"name\": \"Oranges\", \"color\": \"blue.6\"},\n        {\"name\": \"Tomatoes\", \"color\": \"teal.6\"},\n    ],\n)\n```\n### Split colors\nSet `splitColors` prop to an array of two colors to customize the fill color of split area chart. The first color is\nused for positive values and the second color for negative values. `splitColors` prop is ignored in other types of area charts.\n\n```python\nimport dash_mantine_components as dmc\n\ndata = [\n    {\"date\": \"Mar 22\", \"Apples\": 110},\n    {\"date\": \"Mar 23\", \"Apples\": 60},\n    {\"date\": \"Mar 24\", \"Apples\": -80},\n    {\"date\": \"Mar 25\", \"Apples\": 40},\n    {\"date\": \"Mar 26\", \"Apples\": -40},\n    {\"date\": \"Mar 27\", \"Apples\": 80},\n]\n\ncomponent = dmc.AreaChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    type=\"split\",\n    strokeWidth=1,\n    activeDotProps={\"r\": 2, \"strokeWidth\": 1},\n    series=[{\"name\": \"Apples\", \"color\": \"bright\"}],\n    splitColors=[\"violet\", \"orange\"],\n)\n```\n### Legend\nTo display chart legend, set `withLegend` prop. When one of the items in the legend is hovered, the corresponding data\nseries is highlighted in the chart.Tooltip\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.AreaChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    type=\"stacked\",\n    withLegend=True,\n    series=[\n        {\"name\": \"Apples\", \"color\": \"indigo.6\"},\n        {\"name\": \"Oranges\", \"color\": \"blue.6\"},\n        {\"name\": \"Tomatoes\", \"color\": \"teal.6\"},\n    ],\n)\n```\n### Legend position\nYou can pass props down to recharts Legend component with `legendProps` prop. For example, setting the following will\nrender the legend at the bottom of the chart and set its height to 50px:\n```python\nlegendProps={'verticalAlign': 'bottom', 'height': 50} \n```\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.AreaChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    type=\"stacked\",\n    withLegend=True,\n    legendProps={\"verticalAlign\": \"bottom\", \"height\": 50},\n    series=[\n        {\"name\": \"Apples\", \"color\": \"indigo.6\"},\n        {\"name\": \"Oranges\", \"color\": \"blue.6\"},\n        {\"name\": \"Tomatoes\", \"color\": \"teal.6\"},\n    ],\n)\n```\n### Series labels\nBy default, series `name` is used as a label. To change it, set `label` property in `series` object:\n\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.AreaChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    type=\"stacked\",\n    withLegend=True,\n    legendProps={\"verticalAlign\": \"bottom\"},\n    series=[\n        {\"name\": \"Apples\", \"label\": \"Apples sales\", \"color\": \"indigo.6\"},\n        {\"name\": \"Oranges\", \"label\": \"Oranges sales\", \"color\": \"blue.6\"},\n        {\"name\": \"Tomatoes\", \"label\": \"Tomatoes sales\", \"color\": \"teal.6\"},\n    ],\n)\n```\n### Connect nulls\nUse `connectNulls` prop to specify whether to connect a data point across null points. By default, `connectNulls` is true.\n\n\n```python\nimport dash_mantine_components as dmc\n\ndata = [\n  {\"date\": \"Mar 22\", \"Apples\": 110},\n  {\"date\": \"Mar 23\", \"Apples\": 60},\n  {\"date\": \"Mar 24\", \"Apples\": -80},\n  {\"date\": \"Mar 25\", \"Apples\": 40},\n  {\"date\": \"Mar 26\", \"Apples\": None},\n  {\"date\": \"Mar 27\", \"Apples\": 80}\n]\n\ndmc.AreaChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    connectNulls=True,\n    series=[{\"name\": \"Apples\", \"color\": \"indigo.6\"}],\n    curveType=\"linear\",\n)\n\n```\n### X and Y axis props\nUse `xAxisProps` and `yAxisProps` to pass props down to recharts `XAxis` and `YAxis` components. For example, these props can\nbe used to change orientation of axis:\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\n\ncomponent = dmc.AreaChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    type=\"stacked\",\n    tickLine=\"xy\",\n    yAxisProps={\"tickMargin\": 15, \"orientation\": \"right\"},\n    xAxisProps={\"tickMargin\": 15, \"orientation\": \"top\"},\n    series=[\n        {\"name\": \"Apples\", \"color\": \"indigo.6\"},\n        {\"name\": \"Oranges\", \"color\": \"blue.6\"},\n        {\"name\": \"Tomatoes\", \"color\": \"teal.6\"},\n    ],\n)\n```\n### Axis labels\nUse `xAxisLabel` and `yAxisLabel` props to display axis labels:\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.AreaChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    type=\"stacked\",\n    xAxisLabel=\"Date\",\n    yAxisLabel=\"Amount\",\n    series=[\n        {\"name\": \"Apples\", \"color\": \"indigo.6\"},\n        {\"name\": \"Oranges\", \"color\": \"blue.6\"},\n        {\"name\": \"Tomatoes\", \"color\": \"teal.6\"},\n    ],\n)\n```\n### X axis offset\nUse xAxisProps to set padding between the charts ends and the x-axis:\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.AreaChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    type=\"stacked\",\n    xAxisProps={\"padding\": {\"left\": 30, \"right\": 30}},\n    series=[\n        {\"name\": \"Apples\", \"color\": \"indigo.6\"},\n        {\"name\": \"Oranges\", \"color\": \"blue.6\"},\n        {\"name\": \"Tomatoes\", \"color\": \"teal.6\"},\n    ],\n)\n```\n### Y axis scale\nUse `yAxisProps` to change domain of the Y axis. For example, if you know that your data will always be in the range\nof 0 to 100, you can set domain to [0, 100]:\n\n```python\nimport dash_mantine_components as dmc\n\ndata = [\n    {\"date\": \"Mar 22\", \"Apples\": 50},\n    {\"date\": \"Mar 23\", \"Apples\": 60},\n    {\"date\": \"Mar 24\", \"Apples\": 40},\n    {\"date\": \"Mar 25\", \"Apples\": 30},\n    {\"date\": \"Mar 26\", \"Apples\": 0},\n    {\"date\": \"Mar 27\", \"Apples\": 20},\n    {\"date\": \"Mar 28\", \"Apples\": 20},\n    {\"date\": \"Mar 29\", \"Apples\": 10},\n]\n\ncomponent = dmc.AreaChart(\n    h=300,\n    dataKey=\"date\",\n    yAxisProps={\"domain\": [0, 100]},\n    data=data,\n    connectNulls=True,\n    series=[{\"name\": \"Apples\", \"color\": \"indigo.6\"}],\n)\n```\n### Right Y axis\n\nTo display additional Y axis on the right side of the chart, set `withRightYAxis` prop. You can pass props down to\nrecharts `YAxis` component with `rightYAxisProps` prop and assign a label to the right Y axis with `rightYAxisLabel` prop.\nNote that you need to bind data series to the right Y axis by setting `yAxisId` in the series object.\n\n```python\nimport dash_mantine_components as dmc\n\ndata = biaxial_data = [\n    {\"name\": \"Page A\", \"uv\": 4000, \"pv\": 2400},\n    {\"name\": \"Page B\", \"uv\": 3000, \"pv\": 1398},\n    {\"name\": \"Page C\", \"uv\": 2000, \"pv\": 9800},\n    {\"name\": \"Page D\", \"uv\": 2780, \"pv\": 3908},\n    {\"name\": \"Page E\", \"uv\": 1890, \"pv\": 4800},\n    {\"name\": \"Page F\", \"uv\": 2390, \"pv\": 3800},\n    {\"name\": \"Page G\", \"uv\": 3490, \"pv\": 4300},\n]\n\ncomponent = dmc.AreaChart(\n    h=300,\n    data=data,\n    dataKey=\"name\",\n    withRightYAxis=True,\n    yAxisLabel=\"uv\",\n    rightYAxisLabel=\"pv\",\n    series=[\n        {\"name\": \"uv\", \"color\": \"pink.6\"},\n        {\"name\": \"pv\", \"color\": \"cyan.6\", \"yAxisId\": \"right\"},\n    ],\n)\n```\n### Rotate x-axis labels\nTo rotate x-axis labels, set `xAxisProps.angle` to a number of degrees to rotate:\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.AreaChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    type=\"stacked\",\n    tickLine=\"xy\",\n    xAxisProps={\"angle\": -20},\n    series=[\n        {\"name\": \"Apples\", \"color\": \"indigo.6\"},\n        {\"name\": \"Oranges\", \"color\": \"blue.6\"},\n        {\"name\": \"Tomatoes\", \"color\": \"teal.6\"},\n    ],\n)\n```\n### Value formatter\nTo format values in the tooltip and axis ticks, use `valueFormatter` prop. It accepts a function that takes number `value`\nas an argument and returns formatted value:\n\n\n\nNote: This example uses custom JavaScript defined in the assets folder. Learn more in the \"Functions As Props\" section of this document.\n\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.AreaChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    type=\"stacked\",\n    tickLine=\"xy\",\n    valueFormatter={\"function\": \"formatNumberIntl\"},\n    series=[\n        {\"name\": \"Apples\", \"color\": \"indigo.6\"},\n        {\"name\": \"Oranges\", \"color\": \"blue.6\"},\n        {\"name\": \"Tomatoes\", \"color\": \"teal.6\"},\n    ],\n)\n```\n\n```javascript\nvar dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\n\ndmcfuncs.formatNumberIntl = (value) => {\n  return new Intl.NumberFormat('en-US').format(value);\n};\n```\n\n\n### Area color\nYou can reference colors from theme the same way as in other components, for example, `blue`, `red.5`, `orange.7`, etc. \nAny valid CSS color value is also accepted.\n\n\n```python\nimport dash_mantine_components as dmc\n\ndata = [\n  {\"date\": \"Mar 22\", \"Apples\": 110},\n  {\"date\": \"Mar 23\", \"Apples\": 60},\n  {\"date\": \"Mar 24\", \"Apples\": -80},\n  {\"date\": \"Mar 25\", \"Apples\": 40},\n  {\"date\": \"Mar 26\", \"Apples\": 60},\n  {\"date\": \"Mar 27\", \"Apples\": 80}\n]\n\ndmc.AreaChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    withGradient=True,\n    series=[{\"name\": \"Apples\", \"color\": \"orange.7\"}],\n)\n\n```\n\n### Change area color depending on color scheme\nYou can use CSS variables in color property. Learn more in the Theming section under [Colors.](/colors#colors-in-light-and-dark-mode)\n\nExample of area that is dark orange in light mode and lime in dark mode:\n\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.AreaChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    withGradient=True,\n    series=[{\"name\": \"Apples\", \"color\": \"var(--chart-color)\"}],\n)\n```\n\n```css\n:root {\n   --chart-color: var(--mantine-color-orange-8)\n}\n\n:root[data-mantine-color-scheme=\"dark\"] {\n  --chart-color: var(--mantine-color-lime-4);\n}\n```\n\n\n### Stroke dash array\nSet `strokeDasharray` prop to control the stroke dash array of the grid and cursor lines. The value represent the\nlengths of alternating dashes and gaps. For example, strokeDasharray=\"10 5\" will render a dashed line with 10px dashes\nand 5px gaps.\n\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.AreaChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    type=\"stacked\",\n    strokeDasharray=\"15 15\",\n    series=[\n        {\"name\": \"Apples\", \"color\": \"indigo.6\"},\n        {\"name\": \"Oranges\", \"color\": \"blue.6\"},\n        {\"name\": \"Tomatoes\", \"color\": \"teal.6\"},\n    ],\n)\n```\n### Grid and text colors\nUse `--chart-grid-color` and `--chart-text-color` to change colors of grid lines and text within the chart. \nWith CSS , you can change colors depending on color scheme.  Learn more in the Theming section under [Colors.](/colors#colors-in-light-and-dark-mode)\n\n\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.AreaChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    type=\"stacked\",\n    className=\"chart-grid-text-colors\",\n    series=[\n        {\"name\": \"Apples\", \"color\": \"indigo.6\"},\n        {\"name\": \"Oranges\", \"color\": \"blue.6\"},\n        {\"name\": \"Tomatoes\", \"color\": \"teal.6\"},\n    ],\n)\n```\n\n```css\n\n.chart-grid-text-colors {\n  --chart-grid-color: var(--mantine-color-blue-5);\n  --chart-text-color: var(--mantine-color-blue-8);\n}\n\n[data-mantine-color-scheme='dark'] .chart-grid-text-colors {\n  --chart-grid-color: var(--mantine-color-blue-3);\n  --chart-text-color: var(--mantine-color-blue-2);\n}\n```\n\nIf your application has only one color scheme, you can use `gridColor` and `textColor` props instead of CSS variables:\n\n```python\ndmc.AreaChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    type=\"stacked\",\n    gridColor=\"gray.5\",\n    textColor = \"gray.9\",\n    series=[\n        {\"name\": \"Apples\", \"color\": \"indigo.6\"},\n        {\"name\": \"Oranges\", \"color\": \"blue.6\"},\n        {\"name\": \"Tomatoes\", \"color\": \"teal.6\"},\n    ],\n)\n```\n\n### Tooltip animation\nBy default, tooltip animation is disabled. To enable it, set `tooltipAnimationDuration` prop to a number of\nmilliseconds to animate the tooltip position change.\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.AreaChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    type=\"stacked\",\n    tooltipAnimationDuration=200,\n    series=[\n        {\"name\": \"Apples\", \"color\": \"indigo.6\"},\n        {\"name\": \"Oranges\", \"color\": \"blue.6\"},\n        {\"name\": \"Tomatoes\", \"color\": \"teal.6\"},\n    ],\n)\n```\n### Area animation\nBy default, the Recharts data animation is disabled. To enable and customize the animation, use `areaProps` to pass properties to the Recharts `Area` component.\n\n```python\nfrom random import randint\nimport dash_mantine_components as dmc\nfrom dash import callback, Input, Output\n\ncomponent = dmc.Box(\n    [\n        dmc.Button(\"Update Chart\", id=\"btn-areachart-animation\"),\n        dmc.AreaChart(\n            id=\"areachart-animation\",\n            h=300,\n            dataKey=\"date\",\n            data=[{}],\n            tooltipAnimationDuration=500,\n            areaProps={\n                \"isAnimationActive\": True,\n                \"animationDuration\": 500,\n                \"animationEasing\": \"ease-in-out\",\n                \"animationBegin\": 500,\n            },\n            series=[\n                {\"name\": \"Apples\", \"color\": \"indigo.6\"},\n                {\"name\": \"Oranges\", \"color\": \"blue.6\"},\n                {\"name\": \"Tomatoes\", \"color\": \"teal.6\"},\n            ],\n        ),\n    ]\n)\n\n\n@callback(\n    Output(\"areachart-animation\", \"data\"), Input(\"btn-areachart-animation\", \"n_clicks\")\n)\ndef update(n):\n    return [\n        {\n            \"date\": \"Mar 22\",\n            \"Apples\": 2890,\n            \"Oranges\": 2338,\n            \"Tomatoes\": randint(1000, 4000),\n        },\n        {\n            \"date\": \"Mar 23\",\n            \"Apples\": 2756,\n            \"Oranges\": 2103,\n            \"Tomatoes\": randint(1000, 4000),\n        },\n        {\n            \"date\": \"Mar 24\",\n            \"Apples\": 3322,\n            \"Oranges\": 986,\n            \"Tomatoes\": randint(1000, 4000),\n        },\n        {\n            \"date\": \"Mar 25\",\n            \"Apples\": 3470,\n            \"Oranges\": 2108,\n            \"Tomatoes\": randint(1000, 4000),\n        },\n        {\n            \"date\": \"Mar 26\",\n            \"Apples\": 3129,\n            \"Oranges\": 1726,\n            \"Tomatoes\": randint(1000, 4000),\n        },\n    ]\n```\n### Units\nSet `unit` prop to render a unit label next to the y-axis ticks and tooltip values:\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.AreaChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    type=\"stacked\",\n    unit=\"$\",\n    series=[\n        {\"name\": \"Apples\", \"color\": \"indigo.6\"},\n        {\"name\": \"Oranges\", \"color\": \"blue.6\"},\n        {\"name\": \"Tomatoes\", \"color\": \"teal.6\"},\n    ],\n)\n```\n### Remove tooltip\nTo remove tooltip, set `withTooltip=False`. It also removes the cursor line and disables interactions with the chart.\n\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.AreaChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    type=\"stacked\",\n    withTooltip=False,\n    series=[\n        {\"name\": \"Apples\", \"color\": \"indigo.6\"},\n        {\"name\": \"Oranges\", \"color\": \"blue.6\"},\n        {\"name\": \"Tomatoes\", \"color\": \"teal.6\"},\n    ],\n)\n```\n### Customize dots\nUse `dotProps` to pass props down to recharts dot in regular state and `activeDotProps` to pass props down to recharts dot in active state (when cursor is over the current series).\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\n\ncomponent = dmc.AreaChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    type=\"stacked\",\n    dotProps={\"r\": 6, \"strokeWidth\": 2, \"stroke\": \"#fff\"},\n    activeDotProps={\"r\": 8, \"strokeWidth\": 1, \"fill\": \"#fff\"},\n    series=[\n        {\"name\": \"Apples\", \"color\": \"indigo.6\"},\n        {\"name\": \"Oranges\", \"color\": \"blue.6\"},\n        {\"name\": \"Tomatoes\", \"color\": \"teal.6\"},\n    ],\n)\n```\n### Stroke width\nUse `strokeWidth` prop to control the stroke width of all areas:\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ndmc.AreaChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    series=[\n        {\"name\": \"Apples\", \"color\": \"indigo.6\"},\n        {\"name\": \"Oranges\", \"color\": \"blue.6\"},\n        {\"name\": \"Tomatoes\", \"color\": \"teal.6\"}\n    ],\n    strokeWidth=2,\n)\n\n```\n\n### Fill opacity\nUse `fillOpacity` prop to control the fill opacity of all areas:\n\n```python\n\nimport dash_mantine_components as dmc\nfrom .data import data\n\ndmc.AreaChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    series=[\n        {\"name\": \"Apples\", \"color\": \"indigo.6\"},\n        {\"name\": \"Oranges\", \"color\": \"blue.6\"},\n        {\"name\": \"Tomatoes\", \"color\": \"teal.6\"}\n    ],\n    fillOpacity=\"0.2\",\n    withGradient=False,\n)\n```\n\n### Sync multiple AreaCharts\nYou can pass props down to recharts AreaChart component with `areaChartProps` prop. For example, setting the following \nwill sync tooltip of multiple `AreaChart` components with the same `syncId` prop.\n\n```python\nareaChartProps={\"syncId\": \"any-id\"}\n```\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.Stack(\n    [\n        dmc.Text(\"Apples sales:\"),\n        dmc.AreaChart(\n            h=180,\n            dataKey=\"date\",\n            data=data,\n            series=[{\"name\": \"Apples\", \"color\": \"indigo.6\"}],\n            areaChartProps={\"syncId\": \"groceries\"},\n        ),\n        dmc.Text(\"Tomatoes sales\"),\n        dmc.AreaChart(\n            h=180,\n            dataKey=\"date\",\n            data=data,\n            series=[{\"name\": \"Tomatoes\", \"color\": \"teal.6\"}],\n            areaChartProps={\"syncId\": \"groceries\"},\n        ),\n    ]\n)\n```\n### Vertical orientation\nSet orientation=\"vertical\" to render a vertical area chart:\n\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.AreaChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    type=\"stacked\",\n    orientation=\"vertical\",\n    series=[\n        {\"name\": \"Apples\", \"color\": \"indigo.6\"},\n        {\"name\": \"Oranges\", \"color\": \"blue.6\"},\n        {\"name\": \"Tomatoes\", \"color\": \"teal.6\"},\n    ],\n)\n```\n### Dashed area line\nSet `strokeDasharray` property in series to change line style to dashed:\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.AreaChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    type=\"stacked\",\n    strokeWidth=1,\n    dotProps={\"r\": 2},\n    activeDotProps={\"r\": 3, \"strokeWidth\": 1},\n    series=[\n        {\"name\": \"Apples\", \"color\": \"indigo.6\"},\n        {\"name\": \"Oranges\", \"color\": \"blue.6\"},\n        {\"name\": \"Tomatoes\", \"color\": \"teal.6\", \"strokeDasharray\": \"5 5\"},\n    ],\n)\n```\n### Reference lines\nUse `referenceLines` prop to render reference lines. Reference lines are always rendered behind the chart.\n\n```python\nimport dash_mantine_components as dmc\n\ndata = [\n    {\"date\": \"Mar 22\", \"Apples\": 50},\n    {\"date\": \"Mar 23\", \"Apples\": 60},\n    {\"date\": \"Mar 24\", \"Apples\": 40},\n    {\"date\": \"Mar 25\", \"Apples\": 30},\n    {\"date\": \"Mar 26\", \"Apples\": 0},\n    {\"date\": \"Mar 27\", \"Apples\": 20},\n    {\"date\": \"Mar 28\", \"Apples\": 20},\n    {\"date\": \"Mar 29\", \"Apples\": 10},\n]\n\n\ncomponent = dmc.AreaChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    yAxisProps={\"domain\": [0, 100]},\n    referenceLines=[\n        {\"y\": 40, \"label\": \"Average sales\", \"color\": \"red.6\"},\n        {\"x\": \"Mar 25\", \"label\": \"Report out\"},\n    ],\n    series=[{\"name\": \"Apples\", \"color\": \"indigo.6\"}],\n)\n```\n### clickData\nUse the `clickData` property in a callback to retrieve data from the most recent click event.\nTo get the name of the clicked series, use the `clickSeriesName` property.\n\n```python\nfrom dash import callback, Input, Output\nimport dash_mantine_components as dmc\nfrom .data import data\n\n\ncomponent = dmc.Group(\n    [\n        dmc.AreaChart(\n            id=\"figure-areachart\",\n            h=300,\n            dataKey=\"date\",\n            data=data,\n            type=\"stacked\",\n            series=[\n                {\"name\": \"Apples\", \"color\": \"indigo.6\"},\n                {\"name\": \"Oranges\", \"color\": \"blue.6\"},\n                {\"name\": \"Tomatoes\", \"color\": \"teal.6\"},\n            ],\n        ),\n        dmc.Text(id=\"clickdata-areachart1\"),\n        dmc.Text(id=\"clickdata-areachart2\"),\n    ]\n)\n\n\n@callback(\n    Output(\"clickdata-areachart1\", \"children\"),\n    Output(\"clickdata-areachart2\", \"children\"),\n    Input(\"figure-areachart\", \"clickData\"),\n    Input(\"figure-areachart\", \"clickSeriesName\"),\n)\ndef update(data, name):\n    return f\"clickData:  {data}\", f\"clickSeriesName: {name}\"\n```\n### hoverData\nUse the `hoverData` property in a callback to retrieve data from the most recent hover event.\nTo get the name of the hovered series, use the `hoverSeriesName` property.\n\n```python\nfrom dash import callback, Input, Output\nimport dash_mantine_components as dmc\nfrom .data import data\n\n\ncomponent = dmc.Group(\n    [\n        dmc.AreaChart(\n            id=\"figure-areachart-hover\",\n            h=300,\n            dataKey=\"date\",\n            data=data,\n            type=\"stacked\",\n            series=[\n                {\"name\": \"Apples\", \"color\": \"indigo.6\"},\n                {\"name\": \"Oranges\", \"color\": \"blue.6\"},\n                {\"name\": \"Tomatoes\", \"color\": \"teal.6\"},\n            ],\n        ),\n        dmc.Text(id=\"hoverdata-areachart1\"),\n        dmc.Text(id=\"hoverdata-areachart2\"),\n    ]\n)\n\n\n@callback(\n    Output(\"hoverdata-areachart1\", \"children\"),\n    Output(\"hoverdata-areachart2\", \"children\"),\n    Input(\"figure-areachart-hover\", \"hoverData\"),\n    Input(\"figure-areachart-hover\", \"hoverSeriesName\"),\n)\ndef update(data, name):\n    return f\"hoverData:  {data}\", f\"hoverSeriesName: {name}\"\n```\n### highlightHover\n\nSet `highlightHover=True` to highlight the series when hovered, mirroring the behavior of hovering over chart legend items.\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.AreaChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    type=\"stacked\",\n    series=[\n        {\"name\": \"Apples\", \"color\": \"indigo.6\"},\n        {\"name\": \"Oranges\", \"color\": \"blue.6\"},\n        {\"name\": \"Tomatoes\", \"color\": \"teal.6\"},\n    ],\n    highlightHover=True\n)\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n#### AreaChart selectors\n\n| Name            | Static selector                    | Description                                   |\n|:----------------|:----------------------------------|:----------------------------------------------|\n| root            | .mantine-AreaChart-root            | Root element                                  |\n| area            | .mantine-AreaChart-area            | Area of the chart                             |\n| axis            | .mantine-AreaChart-axis            | X and Y axis of the chart                     |\n| container       | .mantine-AreaChart-container       | Recharts ResponsiveContainer component        |\n| grid            | .mantine-AreaChart-grid            | Recharts CartesianGrid component              |\n| legend          | .mantine-AreaChart-legend          | Legend root element                           |\n| legendItem      | .mantine-AreaChart-legendItem      | Legend item representing data series          |\n| legendItemColor | .mantine-AreaChart-legendItemColor | Legend item color                             |\n| legendItemName  | .mantine-AreaChart-legendItemName  | Legend item name                              |\n| tooltip         | .mantine-AreaChart-tooltip         | Tooltip root element                          |\n| tooltipBody     | .mantine-AreaChart-tooltipBody     | Tooltip wrapper around all items              |\n| tooltipItem     | .mantine-AreaChart-tooltipItem     | Tooltip item representing data series         |\n| tooltipItemBody | .mantine-AreaChart-tooltipItemBody | Tooltip item wrapper around item color and name|\n| tooltipItemColor| .mantine-AreaChart-tooltipItemColor| Tooltip item color                            |\n| tooltipItemName | .mantine-AreaChart-tooltipItemName | Tooltip item name                             |\n| tooltipItemData | .mantine-AreaChart-tooltipItemData | Tooltip item data                             |\n| tooltipLabel    | .mantine-AreaChart-tooltipLabel    | Label of the tooltip                          |\n| referenceLine   | .mantine-AreaChart-referenceLine   | Reference line                                |\n| axisLabel       | .mantine-AreaChart-axisLabel       | X and Y axis labels                           |\n\n#### AreaChart CSS variables\n\n| Selector           | Variable             | Description                                      |\n|:-------------------|:---------------------|:-------------------------------------------------|\n| root               | --chart-grid-color   | Controls color of the grid and cursor lines      |\n|                    | --chart-text-color   | Controls color of the axis labels                |\n\n\n\n### Keyword Arguments\n#### AreaChart\n\n- children (a list of or a singular dash component, string or number; optional):\n    Additional components that are rendered inside recharts\n    `AreaChart` component.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- activeDotProps (dict; optional):\n    Props passed down to all active dots. Ignored if\n    `withDots={False}` is set.\n\n- areaChartProps (dict; optional):\n    Props passed down to recharts `AreaChart` component.\n\n- areaProps (dict; optional):\n    Props passed down to recharts `Area` component.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- clickData (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Click data.\n\n- clickSeriesName (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Name of the series that was clicked.\n\n- connectNulls (boolean; optional):\n    Determines whether points with `None` values should be connected,\n    `True` by default.\n\n- curveType (a value equal to: 'bump', 'linear', 'natural', 'monotone', 'step', 'stepBefore', 'stepAfter'; optional):\n    Type of the curve, `'monotone'` by default.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data (list of dicts; required):\n    Data used to display chart.\n\n    `data` is a list of dicts with keys:\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- dataKey (string; required):\n    Key of the `data` object for x-axis values.\n\n- dotProps (dict; optional):\n    Props passed down to all dots. Ignored if `withDots={False}` is\n    set.\n\n- fillOpacity (number; optional):\n    Controls fill opacity of all areas, `0.2` by default.\n\n- gridAxis (a value equal to: 'none', 'x', 'y', 'xy'; optional):\n    Specifies which lines should be displayed in the grid, `'x'` by\n    default.\n\n- gridColor (optional):\n    Color of the grid and cursor lines, by default depends on color\n    scheme.\n\n- gridProps (dict; optional):\n    Props passed down to the `CartesianGrid` component.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- highlightHover (boolean; optional):\n    Determines whether a hovered series is highlighted. False by\n    default. Mirrors the behaviour when hovering about chart legend\n    items.\n\n- hoverData (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Hover data.\n\n- hoverSeriesName (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Name of the series that is hovered.\n\n- legendProps (dict; optional):\n    Props passed down to the `Legend` component.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- orientation (a value equal to: 'horizontal', 'vertical'; optional):\n    Chart orientation, `'horizontal'` by default.\n\n- referenceLines (list of dicts; optional):\n    Reference lines that should be displayed on the chart.\n\n- rightYAxisLabel (boolean | number | string | dict | list; optional):\n    Props passed down to the YAxis recharts component rendered on the\n    right side.\n\n- rightYAxisProps (boolean | number | string | dict | list; optional):\n    Props passed down to the YAxis recharts component rendered on the\n    right side.\n\n- series (list of dicts; required):\n    An array of objects with `name` and `color` keys. Determines which\n    data should be consumed from the `data` array.\n\n    `series` is a list of dicts with keys:\n\n- splitColors (list of 2 elements: [, ]; optional):\n    A tuple of colors used when `type=\"split\"` is set, ignored in\n    all other cases. A tuple may include theme colors reference or any\n    valid CSS colors `['green.7', 'red.7']` by default.\n\n- splitOffset (number; optional):\n    Offset for the split gradient. By default, value is inferred from\n    `data` and `series` if possible. Must be generated from the data\n    array with `getSplitOffset` function.\n\n- strokeDasharray (string | number; optional):\n    Dash array for the grid lines and cursor, `'5 5'` by default.\n\n- strokeWidth (number; optional):\n    Stroke width for the chart areas, `2` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- textColor (optional):\n    Color of the text displayed inside the chart, `'dimmed'` by\n    default.\n\n- tickLine (a value equal to: 'none', 'x', 'y', 'xy'; optional):\n    Specifies which axis should have tick line, `'y'` by default.\n\n- tooltipAnimationDuration (number; optional):\n    Tooltip position animation duration in ms, `0` by default.\n\n- tooltipProps (dict; optional):\n    Props passed down to the `Tooltip` component.\n\n- type (a value equal to: 'default', 'stacked', 'percent', 'split'; optional):\n    Controls how chart areas are positioned relative to each other,\n    `'default'` by default.\n\n- unit (string; optional):\n    Unit displayed next to each tick in y-axis.\n\n- valueFormatter (boolean | number | string | dict | list; optional):\n    A function to format values on Y axis and inside the tooltip. See\n    https://www.dash-mantine-components.com/functions-as-props.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withDots (boolean; optional):\n    Determines whether dots should be displayed, `True` by default.\n\n- withGradient (boolean; optional):\n    Determines whether the chart area should be represented with a\n    gradient instead of the solid color, `False` by default.\n\n- withLegend (boolean; optional):\n    Determines whether chart legend should be displayed, `False` by\n    default.\n\n- withPointLabels (boolean; optional):\n    Determines whether each point should have associated label, False\n    by default.\n\n- withRightYAxis (boolean; optional):\n    Determines whether additional y-axis should be displayed on the\n    right side of the chart, False by default.\n\n- withTooltip (boolean; optional):\n    Determines whether chart tooltip should be displayed, `True` by\n    default.\n\n- withXAxis (boolean; optional):\n    Determines whether x-axis should be hidden, `True` by default.\n\n- withYAxis (boolean; optional):\n    Determines whether y-axis should be hidden, `True` by default.\n\n- xAxisLabel (string; optional):\n    A label to display below the x-axis.\n\n- xAxisProps (dict; optional):\n    Props passed down to the `XAxis` recharts component.\n\n- yAxisLabel (string; optional):\n    A label to display next to the y-axis.\n\n- yAxisProps (dict; optional):\n    Props passed down to the `YAxis` recharts component."
  },
  {
    "name": "BarChart",
    "description": "Use BarChart component without type prop to render a regular bar chart. In a regular bar chart, each data series is plotted on its own and does not interact with other series.",
    "endpoint": "/components/barchart",
    "package": "dash_mantine_components",
    "category": "Charts",
    "content": "\n\n## BarChart  \nUse BarChart component without type prop to render a regular bar chart. In a regular bar chart, each data series is plotted on its own and does not interact with other series.  \nCategory: Charts  \n\n### Introduction\n\n```python\n\nimport dash_mantine_components as dmc\nfrom .data import data\n\ndmc.BarChart(\n    h=300,\n    dataKey=\"month\",\n    data=data,\n    series=[\n        {\"name\": \"Smartphones\", \"color\": \"violet.6\"},\n        {\"name\": \"Laptops\", \"color\": \"blue.6\"},\n        {\"name\": \"Tablets\", \"color\": \"teal.6\"}\n    ],\n    tickLine=\"y\",\n    gridAxis=\"y\",\n    withXAxis=True,\n    withYAxis=True\n)\n\n```\n\n### Data\n\nHere is the data used in all the examples on this page:\n\n```python\ndata = [\n    {\"month\": \"January\", \"Smartphones\": 1200, \"Laptops\": 900, \"Tablets\": 200},\n    {\"month\": \"February\", \"Smartphones\": 1900, \"Laptops\": 1200, \"Tablets\": 400},\n    {\"month\": \"March\", \"Smartphones\": 400, \"Laptops\": 1000, \"Tablets\": 200},\n    {\"month\": \"April\", \"Smartphones\": 1000, \"Laptops\": 200, \"Tablets\": 800},\n    {\"month\": \"May\", \"Smartphones\": 800, \"Laptops\": 1400, \"Tablets\": 1200},\n    {\"month\": \"June\", \"Smartphones\": 750, \"Laptops\": 600, \"Tablets\": 1000}\n]\n```\n\n### Stacked bar chart\nSet type=\"stacked\" to render a stacked bar chart. In this type of bar chart stacking is applied along the vertical axis,\nallowing you to see the overall trend as well as the contribution of each individual series to the total.\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.BarChart(\n    h=300,\n    dataKey=\"month\",\n    data=data,\n    type=\"stacked\",\n    series=[\n        {\"name\": \"Smartphones\", \"color\": \"violet.6\"},\n        {\"name\": \"Laptops\", \"color\": \"blue.6\"},\n        {\"name\": \"Tablets\", \"color\": \"teal.6\"},\n    ],\n)\n```\n### Mixed stacked bar chart\n\nYou can control how series are stacked by setting `stackId` property in `series` dictionary:\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.BarChart(\n    h=300,\n    dataKey=\"month\",\n    data=data,\n    series=[\n        {\"name\": \"Smartphones\", \"color\": \"violet.6\", \"stackId\": \"a\"},\n        {\"name\": \"Laptops\", \"color\": \"blue.6\", \"stackId\": \"b\"},\n        {\"name\": \"Tablets\", \"color\": \"teal.6\", \"stackId\": \"b\"},\n    ],\n)\n```\n### Percent bar chart\nSet type=\"percent\" to render a percent bar chart. In this type of bar chart the y-axis scale is always normalized \nto 100%, making it easier to compare the contribution of each series in terms of percentages.\n\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.BarChart(\n    h=300,\n    dataKey=\"month\",\n    data=data,\n    type=\"percent\",\n    series=[\n        {\"name\": \"Smartphones\", \"color\": \"violet.6\"},\n        {\"name\": \"Laptops\", \"color\": \"blue.6\"},\n        {\"name\": \"Tablets\", \"color\": \"teal.6\"},\n    ],\n)\n```\n### Waterfall\n\nSet `type=\"waterfall\"` to render a waterfall bar chart. This chart type illustrates how an initial value is influenced\nby subsequent positive or negative values, with each bar starting where the previous one ended. Use the `color` prop\ninside data to color each bar individually. Note that the series color gets overwritten for this specific bar. Use the\n`standalone` prop inside data to decouple the bar from the flow.\n\n```python\nimport dash_mantine_components as dmc\n\ndata = [\n    {\"item\": \"TaxRate\", \"Effective tax rate in %\": 21, \"color\": \"blue\"},\n    {\"item\": \"Foreign inc.\", \"Effective tax rate in %\": -15.5, \"color\": \"teal\"},\n    {\"item\": \"Perm. diff.\", \"Effective tax rate in %\": -3, \"color\": \"teal\"},\n    {\"item\": \"Credits\", \"Effective tax rate in %\": -3, \"color\": \"teal\"},\n    {\"item\": \"Loss carryf.\", \"Effective tax rate in %\": -2, \"color\": \"teal\"},\n    {\"item\": \"Law changes\", \"Effective tax rate in %\": 2, \"color\": \"red\"},\n    {\"item\": \"Reven. adj.\", \"Effective tax rate in %\": 4, \"color\": \"red\"},\n    {\n        \"item\": \"ETR\",\n        \"Effective tax rate in %\": 3.5,\n        \"color\": \"blue\",\n        \"standalone\": True,\n    },\n]\n\ncomponent = dmc.BarChart(\n    h=300,\n    data=data,\n    dataKey=\"item\",\n    type=\"waterfall\",\n    series=[{\"name\": \"Effective tax rate in %\", \"color\": \"blue\"}],\n    withLegend=True,\n)\n```\n### SVG Pattern as bar fill\n\nYou can use SVG patterns as bar fill. To do so, set `fill` property in series object to a url of the SVG pattern.\n\nExample of using diagonal stripes and crosshatch patterns as bar fill:\n\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html, dcc\nfrom .data import data\n\n# Define patterns for custom colors\npattern_definitions = dcc.Markdown('''\n<svg>\n  <defs>\n    <pattern id=\"diagonalStripes\" patternUnits=\"userSpaceOnUse\" width=\"6\" height=\"8\" patternTransform=\"rotate(45)\">\n      <rect width=\"2\" height=\"8\" fill=\"rgba(0, 128, 128, 0.7)\"></rect>\n    </pattern>\n    <pattern id=\"crosshatch\" patternUnits=\"userSpaceOnUse\" width=\"8\" height=\"8\">\n      <path d=\"M 0 0 L 8 0 L 8 8 L 0 8 Z\" fill=\"none\" stroke=\"rgba(75, 0, 130, 0.7)\" strokeWidth=\"1\"></path>\n      <path d=\"M 0 0 L 8 8\" stroke=\"rgba(75, 0, 130, 0.7)\" strokeWidth=\"1\"></path>\n      <path d=\"M 8 0 L 0 8\" stroke=\"rgba(75, 0, 130, 0.7)\" strokeWidth=\"1\"></path>\n    </pattern>\n  </defs>\n</svg>\n''', dangerously_allow_html=True)\n\ncomponent = html.Div([\n    pattern_definitions,\n    dmc.BarChart(\n        h=300,\n        dataKey=\"month\",\n        data=data,\n        type=\"stacked\",\n        series=[\n            {\"name\": \"Smartphones\", \"color\": \"url(#crosshatch)\"},\n            {\"name\": \"Laptops\", \"color\": \"blue.6\"},\n            {\"name\": \"Tablets\", \"color\": \"url(#diagonalStripes)\"},\n        ],\n    )\n])\n```\n### Bar color based on value\nUse `getBarColor` prop to assign color based on `value`. `getBarColor` function is called with two arguments: `value`\nand `series` object. It should return a color string (theme color reference or any valid CSS color value).\n\nNote that color returned by `getBarColor` does not impact colors of the legend and tooltip.\n\n\nNote: This example uses custom JavaScript defined in the assets folder. Learn more in the \"Functions As Props\" section of this document.\n\n\n```python\n\nimport dash_mantine_components as dmc\n\ndata = [\n    {\"month\": \"January\", \"Smartphones\": 1200, \"Laptops\": 900, \"Tablets\": 200},\n    {\"month\": \"February\", \"Smartphones\": 1900, \"Laptops\": 1200, \"Tablets\": 400},\n    {\"month\": \"March\", \"Smartphones\": 400, \"Laptops\": 1000, \"Tablets\": 200},\n    {\"month\": \"April\", \"Smartphones\": 1000, \"Laptops\": 200, \"Tablets\": 800},\n    {\"month\": \"May\", \"Smartphones\": 800, \"Laptops\": 1400, \"Tablets\": 1200},\n    {\"month\": \"June\", \"Smartphones\": 750, \"Laptops\": 600, \"Tablets\": 1000},\n]\n\ncomponent = dmc.BarChart(\n    h=300,\n    data=data,\n    dataKey=\"month\",\n    series=[{\"name\": \"Laptops\", \"color\": \"gray.6\"}],\n    getBarColor={\"function\": \"barColor\"}\n)\n```\n\n```javascript\nvar dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\n\n// Highlights bars with value > 700 in teal, others in red\ndmcfuncs.barColor = (value) => {\n  return value > 700 ? 'teal.8' : 'red.8';\n};\n```\n\n\n\n### Legend\nTo display chart legend, set `withLegend` prop. When one of the items in the legend is hovered, the corresponding data\nseries is highlighted in the chart.\n\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.BarChart(\n    h=300,\n    dataKey=\"month\",\n    data=data,\n    withLegend=True,\n    series=[\n        {\"name\": \"Smartphones\", \"color\": \"violet.6\"},\n        {\"name\": \"Laptops\", \"color\": \"blue.6\"},\n        {\"name\": \"Tablets\", \"color\": \"teal.6\"},\n    ],\n)\n```\n### Legend position\nYou can pass props down to recharts `Legend` component with `legendProps` prop. For example, setting the following will\nrender the legend at the bottom of the chart and set its height to 50px.\n\n```python\nlegendProps={\"verticalAlign\": \"bottom\", \"height\": 50} \n```\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.BarChart(\n    h=300,\n    dataKey=\"month\",\n    data=data,\n    withLegend=True,\n    legendProps={\"verticalAlign\": \"bottom\", \"height\": 50},\n    series=[\n        {\"name\": \"Smartphones\", \"color\": \"violet.6\"},\n        {\"name\": \"Laptops\", \"color\": \"blue.6\"},\n        {\"name\": \"Tablets\", \"color\": \"teal.6\"},\n    ],\n)\n```\n### Series labels\nBy default, series `name` is used as a label. To change it, set `label` property in `series` object:\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.BarChart(\n    h=300,\n    dataKey=\"month\",\n    data=data,\n    type=\"stacked\",\n    withLegend=True,\n    legendProps={\"verticalAlign\": \"bottom\"},\n    series=[\n        {\"name\": \"Smartphones\", \"label\": \"Smartphones sales\", \"color\": \"violet.6\"},\n        {\"name\": \"Laptops\", \"label\": \"Laptops sales\", \"color\": \"blue.6\"},\n        {\"name\": \"Tablets\", \"label\": \"Tablets sales\", \"color\": \"teal.6\"},\n    ],\n)\n```\n### X and Y axis props\nUse `xAxisProps` and `yAxisProps` to pass props down to recharts `XAxis` and `YAxis` components. For example, these\nprops can be used to change orientation of axis:\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.BarChart(\n    h=300,\n    dataKey=\"month\",\n    data=data,\n    type=\"stacked\",\n    tickLine=\"xy\",\n    yAxisProps={\"tickMargin\": 15, \"orientation\": \"right\"},\n    xAxisProps={\"tickMargin\": 15, \"orientation\": \"top\"},\n    series=[\n        {\"name\": \"Smartphones\", \"color\": \"violet.6\"},\n        {\"name\": \"Laptops\", \"color\": \"blue.6\"},\n        {\"name\": \"Tablets\", \"color\": \"teal.6\"},\n    ],\n)\n```\n### Axis labels\nUse `xAxisLabel` and `yAxisLabel` props to display axis labels:\n\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.BarChart(\n    h=300,\n    dataKey=\"month\",\n    data=data,\n    type=\"stacked\",\n    xAxisLabel=\"Date\",\n    yAxisLabel=\"Amount\",\n    series=[\n        {\"name\": \"Smartphones\", \"color\": \"violet.6\"},\n        {\"name\": \"Laptops\", \"color\": \"blue.6\"},\n        {\"name\": \"Tablets\", \"color\": \"teal.6\"},\n    ],\n)\n```\n### X axis offset\nUse `xAxisProps` to set padding between the charts ends and the x-axis:\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.BarChart(\n    h=300,\n    dataKey=\"month\",\n    data=data,\n    type=\"stacked\",\n    xAxisProps={\"padding\": {\"left\": 30, \"right\": 30}},\n    series=[\n        {\"name\": \"Smartphones\", \"color\": \"violet.6\"},\n        {\"name\": \"Laptops\", \"color\": \"blue.6\"},\n        {\"name\": \"Tablets\", \"color\": \"teal.6\"},\n    ],\n)\n```\n### Y axis scale\nUse `yAxisProps` to change domain of the Y axis. For example, if you know that your data will always be in the range\nof 0 to 150, you can set domain to `[0, 150]`:\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.BarChart(\n    h=300,\n    dataKey=\"month\",\n    data=data,\n    yAxisProps={\"domain\": [0, 250]},\n    series=[\n        {\"name\": \"Smartphones\", \"color\": \"violet.6\"},\n        {\"name\": \"Laptops\", \"color\": \"blue.6\"},\n        {\"name\": \"Tablets\", \"color\": \"teal.6\"},\n    ],\n)\n```\n### Value formatter\nTo format values in the tooltip and axis ticks, use `valueFormat` prop. It accepts a function that takes number `value`\nas an argument and returns formatted value:\n\n\n\nNote: This example uses custom JavaScript defined in the assets folder. Learn more in the \"Functions As Props\" section of this document.\n\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.BarChart(\n    h=300,\n    data=data,\n    dataKey=\"month\",\n    series=[\n        {\"name\": \"Smartphones\", \"color\": \"violet.6\"},\n        {\"name\": \"Laptops\", \"color\": \"blue.6\"},\n        {\"name\": \"Tablets\", \"color\": \"teal.6\"},\n    ],\n    valueFormatter={\"function\": \"formatNumberIntl\"},\n)\n```\n\n```javascript\nvar dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\n\ndmcfuncs.formatNumberIntl = (value) => {\n  return new Intl.NumberFormat('en-US').format(value);\n};\n```\n\n\n### Area color\nYou can reference colors from theme the same way as in other components, for example, `blue`, `red.5`, `orange.7`, etc.\nAny valid CSS color value is also accepted.\n\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ndmc.BarChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    fillOpacity=0.5,\n    series=[{\"name\": \"Smartphones\", \"color\": \"orange.7\"}],\n)\n\n```\n\n\n### Change area color depending on color scheme\nYou can use CSS variables in color property. Learn more in the Theming section under [Colors.](/colors#colors-in-light-and-dark-mode)\n\nExample of bar area color that is dark orange in light mode and lime in dark mode:\n\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.BarChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    series=[{\"name\": \"Smartphones\", \"color\": \"var(--chart-color)\"}],\n)\n```\n\n```css\n:root {\n   --chart-color: var(--mantine-color-orange-8)\n}\n\n:root[data-mantine-color-scheme=\"dark\"] {\n  --chart-color: var(--mantine-color-lime-4);\n}\n```\n\n\n### Bar props\nYou can pass props down to recharts [Bar](https://recharts.org/en-US/api/Bar) component with `barProps` prop. `barProps` accepts an object with rechart props.\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.BarChart(\n    h=300,\n    dataKey=\"month\",\n    data=data,\n    orientation=\"vertical\",\n    yAxisProps={\"width\": 80},\n    barProps={\"radius\": 50},\n    series=[{\"name\": \"Smartphones\", \"color\": \"violet.6\"}],\n)\n```\n### Bar animation\nBy default, the Recharts data animation is disabled. To enable and customize the animation, use `barProps` to pass properties to the Recharts `Bar` component.\n\n\n```python\nfrom random import randint\n\nimport dash\nimport dash_mantine_components as dmc\nfrom dash import callback, Input, Output\n\ncomponent = dmc.Box(\n    [\n        dmc.Button(\"Update Chart\", id=\"btn-barchart-animation\"),\n        dmc.BarChart(\n            id=\"barchart-animation\",\n            h=300,\n            dataKey=\"month\",\n            data=[{}],\n            type=\"stacked\",\n            barProps={\"isAnimationActive\": True},\n            series=[\n                {\"name\": \"Smartphones\", \"color\": \"violet.6\"},\n                {\"name\": \"Laptops\", \"color\": \"blue.6\"},\n                {\"name\": \"Tablets\", \"color\": \"teal.6\"},\n            ],\n        ),\n    ]\n)\n\n\n@callback(\n    Output(\"barchart-animation\", \"data\"), Input(\"btn-barchart-animation\", \"n_clicks\")\n)\ndef update(n):\n    if n and n > 0:\n        return [\n            {\n                \"month\": month,\n                \"Smartphones\": randint(50, 300),\n                \"Laptops\": randint(30, 200),\n                \"Tablets\": randint(20, 150),\n            }\n            for month in [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\"]\n        ]\n    return dash.no_update\n```\n### Stroke dash array\nSet `strokeDasharray` prop to control the stroke dash array of the grid and cursor lines. The value represent the lengths of alternating dashes and gaps. For example, strokeDasharray=\"10 5\" will render a dashed line with 10px dashes and 5px gaps.\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.BarChart(\n    h=300,\n    dataKey=\"month\",\n    data=data,\n    type=\"stacked\",\n    strokeDasharray=\"15 15\",\n    series=[\n        {\"name\": \"Smartphones\", \"color\": \"violet.6\"},\n        {\"name\": \"Laptops\", \"color\": \"blue.6\"},\n        {\"name\": \"Tablets\", \"color\": \"teal.6\"},\n    ],\n)\n```\n### Grid and text colors\nUse `--chart-grid-color` and `--chart-text-color` to change colors of grid lines and text within the chart. \nWith CSS , you can change colors depending on color scheme.  Learn more in the Theming section under [Colors.](/colors#colors-in-light-and-dark-mode)\n\n\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.BarChart(\n    h=300,\n    dataKey=\"month\",\n    data=data,\n    type=\"stacked\",\n    className=\"chart-grid-text-colors\",\n    series=[\n        {\"name\": \"Smartphones\", \"color\": \"violet.6\"},\n        {\"name\": \"Laptops\", \"color\": \"blue.6\"},\n        {\"name\": \"Tablets\", \"color\": \"teal.6\"},\n    ],\n)\n```\n\n```css\n\n.chart-grid-text-colors {\n  --chart-grid-color: var(--mantine-color-blue-5);\n  --chart-text-color: var(--mantine-color-blue-8);\n}\n\n[data-mantine-color-scheme='dark'] .chart-grid-text-colors {\n  --chart-grid-color: var(--mantine-color-blue-3);\n  --chart-text-color: var(--mantine-color-blue-2);\n}\n```\n\nIf your application has only one color scheme, you can use `gridColor` and `textColor` props instead of CSS variables:\n\n```python\ndmc.BarChart(\n    h=300,\n    dataKey=\"month\",\n    data=data,\n    type=\"stacked\",\n    gridColor=\"gray.5\",\n    textColor = \"gray.9\",\n    series=[\n        {\"name\": \"Smartphones\", \"color\": \"violet.6\"},\n        {\"name\": \"Laptops\", \"color\": \"blue.6\"},\n        {\"name\": \"Tablets\", \"color\": \"teal.6\"},\n    ],\n)\n```\n\n### Tooltip animation\nBy default, tooltip animation is disabled. To enable it, set `tooltipAnimationDuration` prop to a number of milliseconds to animate the tooltip position change.\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.BarChart(\n    h=300,\n    dataKey=\"month\",\n    data=data,\n    tooltipAnimationDuration=200,\n    series=[\n        {\"name\": \"Smartphones\", \"color\": \"violet.6\"},\n        {\"name\": \"Laptops\", \"color\": \"blue.6\"},\n        {\"name\": \"Tablets\", \"color\": \"teal.6\"},\n    ],\n)\n```\n### Units\nSet `unit` prop to render a unit label next to the y-axis ticks and tooltip values:\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.BarChart(\n    h=300,\n    dataKey=\"month\",\n    data=data,\n    unit=\"$\",\n    series=[\n        {\"name\": \"Smartphones\", \"color\": \"violet.6\"},\n        {\"name\": \"Laptops\", \"color\": \"blue.6\"},\n        {\"name\": \"Tablets\", \"color\": \"teal.6\"},\n    ],\n)\n```\n### Remove tooltip\nTo remove tooltip, set `withTooltip=false`. It also removes the cursor line and disables interactions with the chart.\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.BarChart(\n    h=300,\n    dataKey=\"month\",\n    data=data,\n    withTooltip=False,\n    series=[\n        {\"name\": \"Smartphones\", \"color\": \"violet.6\"},\n        {\"name\": \"Laptops\", \"color\": \"blue.6\"},\n        {\"name\": \"Tablets\", \"color\": \"teal.6\"},\n    ],\n)\n```\n### Custom tooltip\nUse the `tooltipProps` `content` prop to  to pass custom tooltip renderer to recharts Tooltip component.  For example:\n```python\n tooltipProps={'content': {'functon': 'myFunction'}}\n```\n\n\nNote: This example uses custom JavaScript defined in the assets folder. Learn more in the \"Functions As Props\" section of this document.\n\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\n\ncomponent = dmc.BarChart(\n    h=300,\n    dataKey=\"month\",\n    data=data,\n    series=[\n        {\"name\": \"Smartphones\", \"color\": \"violet.6\"},\n        {\"name\": \"Laptops\", \"color\": \"blue.6\"},\n        {\"name\": \"Tablets\", \"color\": \"teal.6\"}\n    ],\n    tickLine=\"y\",\n    gridAxis=\"y\",\n    withXAxis=True,\n    withYAxis=True,\n    tooltipProps={\"content\":  {\"function\": \"chartTooltip\"}}\n)\n```\n\n```javascript\nvar dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\nvar dmc = window.dash_mantine_components;\n\ndmcfuncs.chartTooltip = ({ label, payload }) => {\n\n  if (!payload || payload.length === 0) return null;\n\n  return React.createElement(\n    dmc.Paper,\n    {\n      px: \"md\",\n      py: \"sm\",\n      withBorder: true,\n      shadow: \"md\",\n      radius: \"md\",\n    },\n    [\n      React.createElement(\n        dmc.Text,\n        {\n          key: \"tooltip-label\",\n          fw: 500,\n          mb: 5,\n        },\n        label\n      ),\n      ...payload.map((item, index) =>\n        React.createElement(\n          dmc.Text,\n          {\n            key: `item-${index}`,\n            c: item.color,\n            fz: \"sm\",\n          },\n          `${item.name}: ${item.value}`\n        )\n      ),\n    ]\n  );\n};\n```\n\n\n### Sync multiple BarCharts\nYou can pass props down to recharts [BarChart](https://recharts.org/en-US/api/BarChart) component with `barChartProps` \nprop. For example, setting  will sync tooltip of multiple BarChart components with the same `syncId` prop.\n\n```python\nbarChartProps={\"syncId\": \"any-id\"}\n```\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.Stack(\n    [\n        dmc.Text(\"Smartphone sales:\"),\n        dmc.BarChart(\n            h=180,\n            dataKey=\"month\",\n            data=data,\n            series=[{\"name\": \"Smartphones\", \"color\": \"violet.6\"}],\n            barChartProps={\"syncId\": \"tech\"},\n        ),\n        dmc.Text(\"Laptop sales\"),\n        dmc.BarChart(\n            h=180,\n            dataKey=\"month\",\n            data=data,\n            series=[{\"name\": \"Laptops\", \"color\": \"teal.6\"}],\n            barChartProps={\"syncId\": \"tech\"},\n        ),\n    ]\n)\n```\n### Vertical orientation\nSet orientation=\"vertical\" to render a vertical bar chart:\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.BarChart(\n    h=300,\n    dataKey=\"month\",\n    data=data,\n    type=\"stacked\",\n    orientation=\"vertical\",\n    series=[\n        {\"name\": \"Smartphones\", \"color\": \"violet.6\"},\n        {\"name\": \"Laptops\", \"color\": \"blue.6\"},\n        {\"name\": \"Tablets\", \"color\": \"teal.6\"},\n    ],\n)\n```\n### Reference lines\n\nUse `referenceLines` prop to render reference lines. Reference lines are always rendered behind the chart.\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.BarChart(\n    h=300,\n    dataKey=\"month\",\n    data=data,\n    withTooltip=False,\n    referenceLines=[\n        {\n            \"y\": 130,\n            \"color\": \"red.5\",\n            \"label\": \"Profit reached\",\n            \"labelPosition\": \"insideTopRight\",\n        }\n    ],\n    series=[\n        {\"name\": \"Smartphones\", \"color\": \"violet.6\"},\n        {\"name\": \"Laptops\", \"color\": \"blue.6\"},\n        {\"name\": \"Tablets\", \"color\": \"teal.6\"},\n    ],\n)\n```\n### Bar value label\nTo display value above each bar, set `withBarValueLabel=True`:\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.BarChart(\n    h=300,\n    dataKey=\"month\",\n    data=data,\n    withBarValueLabel=True,\n    withLegend=True,\n    withTooltip=False,\n    series=[\n        {\"name\": \"Smartphones\", \"color\": \"violet.6\"},\n        {\"name\": \"Laptops\", \"color\": \"blue.6\"},\n        {\"name\": \"Tablets\", \"color\": \"teal.6\"},\n    ],\n    valueFormatter={\"function\": \"formatNumberIntl\"},\n)\n```\n### Bar value label props\nYou can pass props down to [recharts LabelList](https://recharts.org/en-US/api/LabelList) component with `valueLabelProps` prop. \n\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.BarChart(\n    h=300,\n    dataKey=\"month\",\n    data=data,\n    withBarValueLabel=True,\n    valueLabelProps={\"position\": 'inside', \"fill\": 'white'},\n    withLegend=True,\n    withTooltip=False,\n    series=[\n        {\"name\": \"Smartphones\", \"color\": \"violet.6\"},\n        {\"name\": \"Laptops\", \"color\": \"blue.6\"},\n        {\"name\": \"Tablets\", \"color\": \"teal.6\"},\n    ],\n    valueFormatter={\"function\": \"formatNumberIntl\"},\n)\n```\n### clickData\nUse the `clickData` property in a callback to retrieve data from the most recent click event.\nTo get the name of the clicked series, use the `clickSeriesName` property.\n\n```python\nfrom dash import callback, Input, Output\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.Group(\n    [\n        dmc.BarChart(\n            id=\"figure-barchart\",\n            h=300,\n            dataKey=\"month\",\n            data=data,\n            type=\"stacked\",\n            series=[\n                {\"name\": \"Smartphones\", \"color\": \"violet.6\"},\n                {\"name\": \"Laptops\", \"color\": \"blue.6\"},\n                {\"name\": \"Tablets\", \"color\": \"teal.6\"},\n            ],\n            withLegend=True,\n            withTooltip=False,\n        ),\n        dmc.Text(id=\"clickdata-barchart1\"),\n        dmc.Text(id=\"clickdata-barchart2\"),\n    ]\n)\n\n@callback(\n    Output(\"clickdata-barchart1\", \"children\"),\n    Output(\"clickdata-barchart2\", \"children\"),\n    Input(\"figure-barchart\", \"clickData\"),\n    Input(\"figure-barchart\", \"clickSeriesName\"),\n)\ndef update(data, name):\n    return f\"clickData:  {data}\", f\"clickSeriesName: {name}\"\n```\n### hoverData\nUse the `hoverData` property in a callback to retrieve data from the most recent hover event.\nTo get the name of the hovered series, use the `hoverSeriesName` property.\n\n```python\nfrom dash import callback, Input, Output\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.Group(\n    [\n        dmc.BarChart(\n            id=\"figure-barchart-hover\",\n            h=300,\n            dataKey=\"month\",\n            data=data,\n            type=\"stacked\",\n            series=[\n                {\"name\": \"Smartphones\", \"color\": \"violet.6\"},\n                {\"name\": \"Laptops\", \"color\": \"blue.6\"},\n                {\"name\": \"Tablets\", \"color\": \"teal.6\"},\n            ],\n            withLegend=True,\n            withTooltip=False,\n        ),\n        dmc.Text(id=\"hoverdata-barchart1\"),\n        dmc.Text(id=\"hoverdata-barchart2\"),\n    ]\n)\n\n@callback(\n    Output(\"hoverdata-barchart1\", \"children\"),\n    Output(\"hoverdata-barchart2\", \"children\"),\n    Input(\"figure-barchart-hover\", \"hoverData\"),\n    Input(\"figure-barchart-hover\", \"hoverSeriesName\"),\n)\ndef update(data, name):\n    return f\"hoverData:  {data}\", f\"hoverSeriesName: {name}\"\n```\n### highlightHover\n\nSet `highlightHover=True` to highlight the series when hovered, mirroring the behavior of hovering over chart legend items.\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.BarChart(\n    h=300,\n    dataKey=\"month\",\n    data=data,\n    type=\"stacked\",\n    series=[\n        {\"name\": \"Smartphones\", \"color\": \"violet.6\"},\n        {\"name\": \"Laptops\", \"color\": \"blue.6\"},\n        {\"name\": \"Tablets\", \"color\": \"teal.6\"},\n    ],\n    withLegend=True,\n    withTooltip=False,\n    highlightHover=True\n)\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n#### BarChart selectors\n\n| Selector           | Static selector                   | Description                                      |\n|:-------------------|:---------------------------------|:-------------------------------------------------|\n| root               | .mantine-BarChart-root           | Root element                                    |\n| bar                | .mantine-BarChart-bar            | Bar of the chart                                |\n| axis               | .mantine-BarChart-axis           | X and Y axis of the chart                       |\n| container          | .mantine-BarChart-container      | Recharts ResponsiveContainer component          |\n| grid               | .mantine-BarChart-grid           | Recharts CartesianGrid component                |\n| legend             | .mantine-BarChart-legend         | Legend root element                             |\n| legendItem         | .mantine-BarChart-legendItem     | Legend item representing data series            |\n| legendItemColor    | .mantine-BarChart-legendItemColor| Legend item color                               |\n| legendItemName     | .mantine-BarChart-legendItemName | Legend item name                                |\n| tooltip            | .mantine-BarChart-tooltip        | Tooltip root element                            |\n| tooltipBody        | .mantine-BarChart-tooltipBody    | Tooltip wrapper around all items                |\n| tooltipItem        | .mantine-BarChart-tooltipItem    | Tooltip item representing data series           |\n| tooltipItemBody    | .mantine-BarChart-tooltipItemBody| Tooltip item wrapper around item color and name|\n| tooltipItemColor   | .mantine-BarChart-tooltipItemColor| Tooltip item color                             |\n| tooltipItemName    | .mantine-BarChart-tooltipItemName | Tooltip item name                              |\n| tooltipItemData    | .mantine-BarChart-tooltipItemData | Tooltip item data                              |\n| tooltipLabel       | .mantine-BarChart-tooltipLabel   | Label of the tooltip                            |\n| referenceLine      | .mantine-BarChart-referenceLine  | Reference line                                  |\n| axisLabel          | .mantine-BarChart-axisLabel      | X and Y axis labels                             |\n\n\n### BarChart CSS variables\n\n| Selector         | Variable             | Description                                      |\n|:-----------------|:---------------------|:-------------------------------------------------|\n| root             | --chart-grid-color   | Controls color of the grid and cursor lines      |\n|                  | --chart-text-color   | Controls color of the axis labels                |\n|                  | --chart-cursor-fill  | Controls fill color of the cursor line           |\n\n\n\n### Keyword Arguments\n#### BarChart\n\n- children (a list of or a singular dash component, string or number; optional):\n    Additional components that are rendered inside recharts `BarChart`\n    component.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- barChartProps (dict; optional):\n    Props passed down to recharts `BarChart` component.\n\n- barLabelColor (optional):\n    Controls color of the bar label, by default the value is\n    determined by the chart orientation.\n\n- barProps (dict; optional):\n    Props passed down to recharts `Bar` component.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- clickData (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Click data.\n\n- clickSeriesName (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Name of the series that was clicked.\n\n- cursorFill (optional):\n    Fill of hovered bar section, by default value is based on color\n    scheme.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data (list of dicts with strings as keys and values of type boolean | number | string | dict | list; required):\n    Data used to display chart.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- dataKey (string; required):\n    Key of the `data` object for x-axis values.\n\n- fillOpacity (number; optional):\n    Controls fill opacity of all bars, `1` by default.\n\n- getBarColor (boolean | number | string | dict | list; optional):\n    A function to assign dynamic bar color based on its value.\n    Accepts value and series returns MantineColor.  See\n    https://www.dash-mantine-components.com/functions-as-props.\n\n- gridAxis (a value equal to: 'none', 'x', 'y', 'xy'; optional):\n    Specifies which lines should be displayed in the grid, `'x'` by\n    default.\n\n- gridColor (optional):\n    Color of the grid and cursor lines, by default depends on color\n    scheme.\n\n- gridProps (dict; optional):\n    Props passed down to the `CartesianGrid` component.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- highlightHover (boolean; optional):\n    Determines whether a hovered series is highlighted. False by\n    default. Mirrors the behaviour when hovering about chart legend\n    items.\n\n- hoverData (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Hover data.\n\n- hoverSeriesName (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Name of the series that is hovered.\n\n- legendProps (dict; optional):\n    Props passed down to the `Legend` component.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- maxBarWidth (number; optional):\n    Maximum bar width in px.\n\n- minBarSize (number; optional):\n    Sets minimum height of the bar in px, `0` by default.\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- orientation (a value equal to: 'horizontal', 'vertical'; optional):\n    Chart orientation, `'horizontal'` by default.\n\n- referenceLines (list of dicts; optional):\n    Reference lines that should be displayed on the chart.\n\n- rightYAxisLabel (boolean | number | string | dict | list; optional):\n    Props passed down to the YAxis recharts component rendered on the\n    right side.\n\n- rightYAxisProps (boolean | number | string | dict | list; optional):\n    Props passed down to the YAxis recharts component rendered on the\n    right side.\n\n- series (list of dicts; required):\n    An array of objects with `name` and `color` keys. Determines which\n    data should be consumed from the `data` array.\n\n    `series` is a list of dicts with keys:\n\n- strokeDasharray (string | number; optional):\n    Dash array for the grid lines and cursor, `'5 5'` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- textColor (optional):\n    Color of the text displayed inside the chart, `'dimmed'` by\n    default.\n\n- tickLine (a value equal to: 'none', 'x', 'y', 'xy'; optional):\n    Specifies which axis should have tick line, `'y'` by default.\n\n- tooltipAnimationDuration (number; optional):\n    Tooltip position animation duration in ms, `0` by default.\n\n- tooltipProps (dict; optional):\n    Props passed down to the `Tooltip` component.\n\n- type (a value equal to: 'default', 'stacked', 'percent', 'waterfall'; optional):\n    Controls how bars are positioned relative to each other,\n    `'default'` by default.\n\n- unit (string; optional):\n    Unit displayed next to each tick in y-axis.\n\n- valueFormatter (boolean | number | string | dict | list; optional):\n    A function to format values on Y axis and inside the tooltip. See\n    https://www.dash-mantine-components.com/functions-as-props.\n\n- valueLabelProps (dict; optional):\n    Props passed down to recharts `LabelList` component. Can be an\n    object with props like \"position\" for valueLabel formatting.\n    Only relevant, if withBarValueLabel is True.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withBarValueLabel (boolean; optional):\n    Determines whether a label with bar value should be displayed on\n    top of each bar. On type=\"stacked\" or type=\"percent\",\n    additionally use withBarValueLabel to customize the label (e.g.\n    use {position: 'inside'} to move the labels inside each bar).\n    False by default.\n\n- withLegend (boolean; optional):\n    Determines whether chart legend should be displayed, `False` by\n    default.\n\n- withRightYAxis (boolean; optional):\n    Determines whether additional y-axis should be displayed on the\n    right side of the chart, False by default.\n\n- withTooltip (boolean; optional):\n    Determines whether chart tooltip should be displayed, `True` by\n    default.\n\n- withXAxis (boolean; optional):\n    Determines whether x-axis should be hidden, `True` by default.\n\n- withYAxis (boolean; optional):\n    Determines whether y-axis should be hidden, `True` by default.\n\n- xAxisLabel (string; optional):\n    A label to display below the x-axis.\n\n- xAxisProps (dict; optional):\n    Props passed down to the `XAxis` recharts component.\n\n- yAxisLabel (string; optional):\n    A label to display next to the y-axis.\n\n- yAxisProps (dict; optional):\n    Props passed down to the `YAxis` recharts component."
  },
  {
    "name": "BubbleChart",
    "description": "Bubble Chart component",
    "endpoint": "/components/bubblechart",
    "package": "dash_mantine_components",
    "category": "Charts",
    "content": "\n\n## BubbleChart  \nBubble Chart component  \nCategory: Charts  \n\n### Usage\n\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\n\ncomponent = dmc.BubbleChart(\n    gridColor=\"gray.5\",\n    textColor=\"gray.9\",\n    h=60,\n    data=data,\n    range=[16, 225],\n    label=\"Sales/hour\",\n    color=\"lime.6\",\n    dataKey={\"x\": \"hour\", \"y\": \"index\", \"z\": \"value\"}\n)\n```\n### Data\n\nHere is the data used in all the examples on this page:\n\n```python\ndata = [\n    {\"hour\": \"08:00\", \"index\": 1, \"value\": 150},\n    {\"hour\": \"10:00\", \"index\": 1, \"value\": 166},\n    {\"hour\": \"12:00\", \"index\": 1, \"value\": 170},\n    {\"hour\": \"14:00\", \"index\": 1, \"value\": 150},\n    {\"hour\": \"16:00\", \"index\": 1, \"value\": 200},\n    {\"hour\": \"18:00\", \"index\": 1, \"value\": 400},\n    {\"hour\": \"20:00\", \"index\": 1, \"value\": 100},\n    {\"hour\": \"22:00\", \"index\": 1, \"value\": 160},\n]\n```\n\n### Change color\n\nYou can reference colors from theme the same way as in other components, for example, `blue`, `red.5`, `orange.7`, etc. Any valid CSS color value is also accepted.\n\n### Change line color depending on color scheme\nYou can use CSS variables in color property. Learn more in the Theming section under [Colors.](/colors#colors-in-light-and-dark-mode)\n\nExample of line color that is dark orange in light mode and lime in dark mode:\n\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.BubbleChart(\n    h=60,\n    data=data,\n    range=[16, 225],\n    label=\"Sales/hour\",\n    color=\"var(--chart-color)\",\n    dataKey={\"x\": \"hour\", \"y\": \"index\", \"z\": \"value\"}\n)\n```\n\n```css\n:root {\n   --chart-color: var(--mantine-color-orange-8)\n}\n\n:root[data-mantine-color-scheme=\"dark\"] {\n  --chart-color: var(--mantine-color-lime-4);\n}\n```\n\n\n\n### Grid and text colors\nUse `--chart-grid-color` and `--chart-text-color` to change colors of grid lines and text within the chart. \nWith CSS , you can change colors depending on color scheme.  Learn more in the Theming section under [Colors.](/colors#colors-in-light-and-dark-mode)\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.BubbleChart(\n    h=60,\n    data=data,\n    range=[16, 225],\n    label=\"Sales/hour\",\n    className=\"chart-grid-text-colors\",\n    dataKey={\"x\": \"hour\", \"y\": \"index\", \"z\": \"value\"}\n)\n```\n\n```css\n\n.chart-grid-text-colors {\n  --chart-grid-color: var(--mantine-color-blue-5);\n  --chart-text-color: var(--mantine-color-blue-8);\n}\n\n[data-mantine-color-scheme='dark'] .chart-grid-text-colors {\n  --chart-grid-color: var(--mantine-color-blue-3);\n  --chart-text-color: var(--mantine-color-blue-2);\n}\n```\n\nIf your application has only one color scheme, you can use `gridColor` and `textColor` props instead of CSS variables:\n\n```python\ndmc.BubbleChart(\n    gridColor=\"gray.5\",\n    textColor=\"gray.9\",\n    h=60,\n    data=data,\n    range=[16, 225],\n    label=\"Sales/hour\",\n    color=\"lime.6\",\n    dataKey={\"x\": \"hour\", \"y\": \"index\", \"z\": \"value\"}\n)\n\n```\n\n\n\n### Value formatter\nTo format values in the tooltip and axis ticks, use `valueFormatter` prop. It accepts a function that takes number `value`\nas an argument and returns formatted value:\n\n\n\nNote: This example uses custom JavaScript defined in the assets folder. Learn more in the \"Functions As Props\" section of this document.\n\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.BubbleChart(\n    h=60,\n    data=data,\n    range=[16, 225],\n    label=\"Sales/hour\",\n    color=\"lime.6\",\n    dataKey={\"x\": \"hour\", \"y\": \"index\", \"z\": \"value\"},\n    valueFormatter={\"function\": \"formatUsd\"},\n)\n```\n\n```javascript\nvar dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\n\ndmcfuncs.formatUsd = function (value) {\n  return `${value.toFixed(2)} USD`;\n};\n```\n\n\n\n### Remove tooltip\nTo remove tooltip, set `withTooltip=False`. It also removes the cursor line and disables interactions with the chart.\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\n\ncomponent = dmc.BubbleChart(\n    gridColor=\"gray.5\",\n    textColor=\"gray.9\",\n    h=60,\n    data=data,\n    range=[16, 225],\n    label=\"Sales/hour\",\n    color=\"lime.6\",\n    dataKey={\"x\": \"hour\", \"y\": \"index\", \"z\": \"value\"},\n    withTooltip=False\n)\n```\n### clickData \n\nUse the `clickData` property in a callback to retrieve data from the most recent click event. \n\n```python\nfrom dash import callback, Input, Output\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.Group(\n    [\n        dmc.BubbleChart(\n            id=\"figure-bubblechart\",\n            gridColor=\"gray.5\",\n            textColor=\"gray.9\",\n            h=60,\n            data=data,\n            range=[16, 225],\n            label=\"Sales/hour\",\n            color=\"lime.6\",\n            dataKey={\"x\": \"hour\", \"y\": \"index\", \"z\": \"value\"}\n        ),\n        dmc.Text(id=\"clickdata-bubblechart\"),\n\n    ]\n)\n\n@callback(\n    Output(\"clickdata-bubblechart\", \"children\"),\n    Input(\"figure-bubblechart\", \"clickData\"),\n)\ndef update(data):\n    return f\"clickData:  {data}\"\n```\n### hoverData \n\nUse the `hoverData` property in a callback to retrieve data from the most recent hover event. \n\n```python\nfrom dash import callback, Input, Output\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.Group(\n    [\n        dmc.BubbleChart(\n            id=\"figure-bubblechart-hover\",\n            gridColor=\"gray.5\",\n            textColor=\"gray.9\",\n            h=60,\n            data=data,\n            range=[16, 225],\n            label=\"Sales/hour\",\n            color=\"lime.6\",\n            dataKey={\"x\": \"hour\", \"y\": \"index\", \"z\": \"value\"}\n        ),\n        dmc.Text(id=\"hoverdata-bubblechart\"),\n\n    ]\n)\n\n@callback(\n    Output(\"hoverdata-bubblechart\", \"children\"),\n    Input(\"figure-bubblechart-hover\", \"hoverData\"),\n)\ndef update(data):\n    return f\"hoverData:  {data}\"\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n#### BubbleChart selectors \n\n| Selector | Static selector              | Description                |\n|----------|------------------------------|----------------------------|\n| root     | .mantine-BubbleChart-root    | Root element               |\n| axis     | .mantine-BubbleChart-axis    | X and Y axis of the chart  |\n| tooltip  | .mantine-BubbleChart-tooltip | Tooltip root element       |\n\n\n#### BubbleChart CSS variables\n\n| Selector | Variable             | Description                                 |\n|----------|-----------------------|---------------------------------------------|\n| root     | --chart-grid-color    | Controls color of the grid and cursor lines |\n|          | --chart-text-color    | Controls color of the axis labels           |\n\n\n\n### Keyword Arguments\n#### BubbleChart\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- clickData (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Click data.\n\n- color (optional):\n    Color of the chart items. Key of `theme.colors` or any valid CSS\n    color, `blue.6` by default.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data (list of dicts with strings as keys and values of type boolean | number | string | dict | list; required):\n    Chart data.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- dataKey (dict; required):\n    Data keys for x, y and z axis.\n\n    `dataKey` is a dict with keys:\n\n- gridColor (optional):\n    Color of the grid and cursor lines, by default depends on color\n    scheme.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- hoverData (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Hover data.\n\n- label (string; optional):\n    Chart label displayed next to the x axis.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- range (list of 2 elements: [number, number]; required):\n    Z axis range.\n\n- scatterProps (dict; optional):\n    Props passed down to the `Scatter` component.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- textColor (optional):\n    Color of the text displayed inside the chart, `'dimmed'` by\n    default.\n\n- tooltipProps (dict; optional):\n    Props passed down to the `Tooltip` component.\n\n- valueFormatter (boolean | number | string | dict | list; optional):\n    A function to format values on Y axis and inside the tooltip. See\n    https://www.dash-mantine-components.com/functions-as-props.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withTooltip (boolean; optional):\n    Determines whether the tooltip should be displayed, `True` by\n    default.\n\n- xAxisProps (dict; optional):\n    Props passed down to the `XAxis` recharts component.\n\n- yAxisProps (dict; optional):\n    Props passed down to the `YAxis` recharts component.\n\n- zAxisProps (dict; optional):\n    Props passed down to the `ZAxis` recharts component."
  },
  {
    "name": "CompositeChart",
    "description": "Composed chart with support for Area, Bar and Line charts",
    "endpoint": "/components/compositechart",
    "package": "dash_mantine_components",
    "category": "Charts",
    "content": "\n\n## CompositeChart  \nComposed chart with support for Area, Bar and Line charts  \nCategory: Charts  \n\n### Introduction\n\n```python\n\nimport dash_mantine_components as dmc\nfrom .data import data\n\ndmc.CompositeChart(\n    h=300,\n    data=data,\n    dataKey=\"date\",\n    withLegend=True,\n    maxBarWidth=30,\n    series=[\n        {\"name\": \"Tomatoes\", \"color\": \"rgba(18, 120, 255, 0.2)\", \"type\": \"bar\"},\n        {\"name\": \"Apples\", \"color\": \"red.8\", \"type\": \"line\"},\n        {\"name\": \"Oranges\", \"color\": \"yellow.8\", \"type\": \"area\"},\n    ]\n)\n\n```\n\n### Data\n\nHere is the data used in all the examples on this page:\n\n```python\ndata = [\n    {\n        \"date\": \"Mar 22\",\n        \"Apples\": 2890,\n        \"Oranges\": 2338,\n        \"Tomatoes\": 2452,\n    },\n    {\n        \"date\": \"Mar 23\",\n        \"Apples\": 2756,\n        \"Oranges\": 2103,\n        \"Tomatoes\": 2402,\n    },\n    {\n        \"date\": \"Mar 24\",\n        \"Apples\": 3322,\n        \"Oranges\": 986,\n        \"Tomatoes\": 1821,\n    },\n    {\n        \"date\": \"Mar 25\",\n        \"Apples\": 3470,\n        \"Oranges\": 2108,\n        \"Tomatoes\": 2809,\n    },\n    {\n        \"date\": \"Mar 26\",\n        \"Apples\": 3129,\n        \"Oranges\": 1726,\n        \"Tomatoes\": 2290,\n    },\n]\n\n```\n\n\n### Legend\nTo display chart legend, set `withLegend` prop. When one of the items in the legend is hovered, the corresponding data\nseries is highlighted in the chart.\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.CompositeChart(\n    h=300,\n    data=data,\n    dataKey=\"date\",\n    withLegend=True,\n    maxBarWidth=30,\n    series=[\n        {\"name\": \"Tomatoes\", \"color\": \"rgba(18, 120, 255, 0.2)\", \"type\": \"bar\"},\n        {\"name\": \"Apples\", \"color\": \"red.8\", \"type\": \"line\"},\n        {\"name\": \"Oranges\", \"color\": \"yellow.8\", \"type\": \"area\"},\n    ]\n)\n```\n### Legend position\nYou can pass props down to recharts `Legend` component with `legendProps` prop. For example, setting the following will\nrender the legend at the bottom of the chart and set its height to 50px.\n\n```python\nlegendProps={\"verticalAlign\": \"bottom\", \"height\": 50} \n```\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.CompositeChart(\n    h=300,\n    data=data,\n    dataKey=\"date\",\n    withLegend=True,\n    maxBarWidth=30,\n    legendProps={\"verticalAlign\": \"bottom\", \"height\": 50},\n    series=[\n        {\"name\": \"Tomatoes\", \"color\": \"rgba(18, 120, 255, 0.2)\", \"type\": \"bar\"},\n        {\"name\": \"Apples\", \"color\": \"red.8\", \"type\": \"line\"},\n        {\"name\": \"Oranges\", \"color\": \"yellow.8\", \"type\": \"area\"},\n    ]\n)\n```\n### Series labels\nBy default, series `name` is used as a label. To change it, set `label` property in `series` object:\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.CompositeChart(\n    h=300,\n    data=data,\n    dataKey=\"date\",\n    withLegend=True,\n    legendProps={\"verticalAlign\": \"bottom\"},\n    maxBarWidth=30,\n    series=[\n        {\n            \"name\": \"Tomatoes\",\n            \"label\": \"Tomatoes sales\",\n            \"color\": \"rgba(18, 120, 255, 0.2)\",\n            \"type\": \"bar\",\n        },\n        {\n            \"name\": \"Apples\",\n            \"label\": \"Apples sales\",\n            \"color\": \"red.8\",\n            \"type\": \"line\",\n        },\n        {\n            \"name\": \"Oranges\",\n            \"label\": \"Oranges sales\",\n            \"color\": \"yellow.8\",\n            \"type\": \"area\",\n        },\n    ]\n)\n```\n### Points labels\n\nTo display labels on data points, set `withPointLabels=True`. This feature is supported only for Line and Area charts:\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.CompositeChart(\n    h=300,\n    data=data,\n    dataKey=\"date\",\n    withPointLabels=True,\n    withLegend=True,\n    maxBarWidth=30,\n    series=[\n        {\"name\": \"Tomatoes\", \"color\": \"rgba(18, 120, 255, 0.2)\", \"type\": \"bar\"},\n        {\"name\": \"Apples\", \"color\": \"red.8\", \"type\": \"line\"},\n        {\"name\": \"Oranges\", \"color\": \"yellow.8\", \"type\": \"area\"},\n    ]\n)\n```\n### X and Y axis props\nUse `xAxisProps` and `yAxisProps` to pass props down to recharts `XAxis` and `YAxis` components. For example, these\nprops can be used to change orientation of axis:\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.CompositeChart(\n    h=300,\n    data=data,\n    dataKey=\"date\",\n    tickLine=\"xy\",\n    yAxisProps={\"tickMargin\": 15, \"orientation\": \"right\"},\n    xAxisProps={\"tickMargin\": 15, \"orientation\": \"top\"},\n    series=[\n        {\"name\": \"Tomatoes\", \"color\": \"rgba(18, 120, 255, 0.2)\", \"type\": \"bar\"},\n        {\"name\": \"Apples\", \"color\": \"red.8\", \"type\": \"line\"},\n        {\"name\": \"Oranges\", \"color\": \"yellow.8\", \"type\": \"area\"},\n    ]\n)\n```\n### Axis labels\nUse `xAxisLabel` and `yAxisLabel` props to display axis labels:\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.BarChart(\n    h=300,\n    dataKey=\"month\",\n    data=data,\n    type=\"stacked\",\n    xAxisLabel=\"Date\",\n    yAxisLabel=\"Amount\",\n    series=[\n        {\"name\": \"Smartphones\", \"color\": \"violet.6\"},\n        {\"name\": \"Laptops\", \"color\": \"blue.6\"},\n        {\"name\": \"Tablets\", \"color\": \"teal.6\"},\n    ],\n)\n\ncomponent = dmc.CompositeChart(\n    h=300,\n    data=data,\n    dataKey=\"date\",\n    xAxisLabel=\"Date\",\n    yAxisLabel=\"Amount\",\n    maxBarWidth=30,\n    series=[\n        {\"name\": \"Tomatoes\", \"color\": \"rgba(18, 120, 255, 0.2)\", \"type\": \"bar\"},\n        {\"name\": \"Apples\", \"color\": \"red.8\", \"type\": \"line\"},\n        {\"name\": \"Oranges\", \"color\": \"yellow.8\", \"type\": \"area\"},\n    ]\n)\n```\n### X axis offset\nUse `xAxisProps` to set padding between the charts ends and the x-axis:\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.BarChart(\n    h=300,\n    dataKey=\"month\",\n    data=data,\n    type=\"stacked\",\n    xAxisProps={\"padding\": {\"left\": 30, \"right\": 30}},\n    series=[\n        {\"name\": \"Smartphones\", \"color\": \"violet.6\"},\n        {\"name\": \"Laptops\", \"color\": \"blue.6\"},\n        {\"name\": \"Tablets\", \"color\": \"teal.6\"},\n    ],\n)\n\ncomponent = dmc.CompositeChart(\n    h=300,\n    data=data,\n    dataKey=\"date\",\n    xAxisProps={\"padding\": {\"left\": 30, \"right\": 30}},\n    maxBarWidth=30,\n    series=[\n        {\"name\": \"Tomatoes\", \"color\": \"rgba(18, 120, 255, 0.2)\", \"type\": \"bar\"},\n        {\"name\": \"Apples\", \"color\": \"red.8\", \"type\": \"line\"},\n        {\"name\": \"Oranges\", \"color\": \"yellow.8\", \"type\": \"area\"},\n    ]\n)\n```\n### Y axis scale\nUse `yAxisProps` to change domain of the Y axis. For example, if you know that your data will always be in the range\nof 0 to 150, you can set domain to `[0, 150]`:\n\n```python\nimport dash_mantine_components as dmc\n\ndata = [\n    {\"date\": \"Mar 22\", \"Apples\": 50},\n    {\"date\": \"Mar 23\", \"Apples\": 60},\n    {\"date\": \"Mar 24\", \"Apples\": 40},\n    {\"date\": \"Mar 25\", \"Apples\": 30},\n    {\"date\": \"Mar 26\", \"Apples\": 0},\n    {\"date\": \"Mar 27\", \"Apples\": 20},\n    {\"date\": \"Mar 28\", \"Apples\": 20},\n    {\"date\": \"Mar 29\", \"Apples\": 10},\n]\n\ncomponent = dmc.CompositeChart(\n    h=300,\n    data=data,\n    dataKey=\"date\",\n    yAxisProps={\"domain\": [0, 100]},\n    withLegend=True,\n    maxBarWidth=30,\n    series=[\n        {\"name\": \"Apples\", \"color\": \"red.8\", \"type\": \"line\"},\n    ]\n)\n```\n### Chart color\n\nYou can reference colors from theme the same way as in other components, for example, `blue`, `red.5`, `orange.7`, etc. Any valid CSS color value is also accepted.\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.CompositeChart(\n    h=300,\n    data=data,\n    dataKey=\"date\",\n    withLegend=True,\n    maxBarWidth=30,\n    series=[\n        {\"name\": \"Apples\", \"color\": \"blue\", \"type\": \"line\"},\n    ]\n)\n```\n### Change chart color depending on color scheme\nYou can use CSS variables in color property. Learn more in the Theming section under [Colors.](/colors#colors-in-light-and-dark-mode)\n\nExample of line color that is dark orange in light mode and lime in dark mode:\n\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.CompositeChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    series=[{\"name\": \"Apples\", \"color\": \"var(--chart-color)\", \"type\": \"line\" }],\n)\n```\n\n```css\n:root {\n   --chart-color: var(--mantine-color-orange-8)\n}\n\n:root[data-mantine-color-scheme=\"dark\"] {\n  --chart-color: var(--mantine-color-lime-4);\n}\n```\n\n\n### Stroke dash array\nSet `strokeDasharray` prop to control the stroke dash array of the grid and cursor lines. The value represent the lengths of alternating dashes and gaps. For example, strokeDasharray=\"10 5\" will render a dashed line with 10px dashes and 5px gaps.\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.CompositeChart(\n    h=300,\n    data=data,\n    dataKey=\"date\",\n    strokeDasharray=\"15 15\",\n    maxBarWidth=30,\n    series=[\n        {\"name\": \"Tomatoes\", \"color\": \"rgba(18, 120, 255, 0.2)\", \"type\": \"bar\"},\n        {\"name\": \"Apples\", \"color\": \"red.8\", \"type\": \"line\"},\n        {\"name\": \"Oranges\", \"color\": \"yellow.8\", \"type\": \"area\"},\n    ]\n)\n```\n### Grid and text colors\nUse `--chart-grid-color` and `--chart-text-color` to change colors of grid lines and text within the chart. \nWith CSS , you can change colors depending on color scheme.  Learn more in the Theming section under [Colors.](/colors#colors-in-light-and-dark-mode)\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.CompositeChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    maxBarWidth=30,\n    className=\"chart-grid-text-colors\",\n    series=[\n        {\"name\": \"Tomatoes\", \"color\": \"rgba(18, 120, 255, 0.2)\", \"type\": \"bar\"},\n        {\"name\": \"Apples\", \"color\": \"red.8\", \"type\": \"line\"},\n        {\"name\": \"Oranges\", \"color\": \"yellow.8\", \"type\": \"area\"},\n    ]\n)\n```\n\n```css\n\n.chart-grid-text-colors {\n  --chart-grid-color: var(--mantine-color-blue-5);\n  --chart-text-color: var(--mantine-color-blue-8);\n}\n\n[data-mantine-color-scheme='dark'] .chart-grid-text-colors {\n  --chart-grid-color: var(--mantine-color-blue-3);\n  --chart-text-color: var(--mantine-color-blue-2);\n}\n```\n\nIf your application has only one color scheme, you can use `gridColor` and `textColor` props instead of CSS variables:\n\n```python\ndmc.CompositeChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    maxBarWidth=30,\n    gridColor=\"gray.5\",\n    textColor=\"gray.9\",\n    series=[\n        {\"name\": \"Tomatoes\", \"color\": \"rgba(18, 120, 255, 0.2)\", \"type\": \"bar\"},\n        {\"name\": \"Apples\", \"color\": \"red.8\", \"type\": \"line\"},\n        {\"name\": \"Oranges\", \"color\": \"yellow.8\", \"type\": \"area\"},\n    ]\n)\n\n```\n\n\n\n\n### Tooltip animation\nBy default, tooltip animation is disabled. To enable it, set `tooltipAnimationDuration` prop to a number of milliseconds to animate the tooltip position change.\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.CompositeChart(\n    h=300,\n    data=data,\n    dataKey=\"date\",\n    tooltipAnimationDuration=200,\n    maxBarWidth=30,\n    series=[\n        {\"name\": \"Tomatoes\", \"color\": \"rgba(18, 120, 255, 0.2)\", \"type\": \"bar\"},\n        {\"name\": \"Apples\", \"color\": \"red.8\", \"type\": \"line\"},\n        {\"name\": \"Oranges\", \"color\": \"yellow.8\", \"type\": \"area\"},\n    ]\n)\n```\n### Value formatter\nTo format values in the tooltip and axis ticks, use `valueFormatter` prop. It accepts a function that takes number `value`\nas an argument and returns formatted value:\n\n\n\nNote: This example uses custom JavaScript defined in the assets folder. Learn more in the \"Functions As Props\" section of this document.\n\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.CompositeChart(\n    h=300,\n    data=data,\n    dataKey=\"date\",\n    maxBarWidth=30,\n    valueFormatter={\"function\": \"formatNumberIntl\"},\n    series=[\n        {\"name\": \"Tomatoes\", \"color\": \"rgba(18, 120, 255, 0.2)\", \"type\": \"bar\"},\n        {\"name\": \"Apples\", \"color\": \"red.8\", \"type\": \"line\"},\n        {\"name\": \"Oranges\", \"color\": \"yellow.8\", \"type\": \"area\"},\n    ]\n)\n```\n\n```javascript\nvar dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\n\ndmcfuncs.formatNumberIntl = (value) => {\n  return new Intl.NumberFormat('en-US').format(value);\n};\n```\n\n\n### Units\nSet `unit` prop to render a unit label next to the y-axis ticks and tooltip values:\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.CompositeChart(\n    h=300,\n    data=data,\n    dataKey=\"date\",\n    unit=\"$\",\n    maxBarWidth=30,\n    series=[\n        {\"name\": \"Tomatoes\", \"color\": \"rgba(18, 120, 255, 0.2)\", \"type\": \"bar\"},\n        {\"name\": \"Apples\", \"color\": \"red.8\", \"type\": \"line\"},\n        {\"name\": \"Oranges\", \"color\": \"yellow.8\", \"type\": \"area\"},\n    ]\n)\n```\n### Remove tooltip\nTo remove tooltip, set `withTooltip=false`. It also removes the cursor line and disables interactions with the chart.\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.CompositeChart(\n    h=300,\n    data=data,\n    dataKey=\"date\",\n    withTooltip=False,\n    maxBarWidth=30,\n    series=[\n        {\"name\": \"Tomatoes\", \"color\": \"rgba(18, 120, 255, 0.2)\", \"type\": \"bar\"},\n        {\"name\": \"Apples\", \"color\": \"red.8\", \"type\": \"line\"},\n        {\"name\": \"Oranges\", \"color\": \"yellow.8\", \"type\": \"area\"},\n    ]\n)\n```\n### Custom tooltip\nUse the `tooltipProps` `content` prop to  to pass custom tooltip renderer to recharts Tooltip component.  For example:\n```python\n tooltipProps={'content': {'functon': 'myFunction'}}\n```\n\n\nNote: This example uses custom JavaScript defined in the assets folder. Learn more in the \"Functions As Props\" section of this document.\n\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.CompositeChart(\n    h=300,\n    data=data,\n    dataKey=\"date\",\n    tooltipProps={\"content\":  {\"function\": \"chartTooltip\"}},\n    maxBarWidth=30,\n    series=[\n        {\"name\": \"Tomatoes\", \"color\": \"rgba(18, 120, 255, 0.2)\", \"type\": \"bar\"},\n        {\"name\": \"Apples\", \"color\": \"red.8\", \"type\": \"line\"},\n        {\"name\": \"Oranges\", \"color\": \"yellow.8\", \"type\": \"area\"},\n    ]\n)\n```\n\n```javascript\nvar dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\nvar dmc = window.dash_mantine_components;\n\ndmcfuncs.chartTooltip = ({ label, payload }) => {\n\n  if (!payload || payload.length === 0) return null;\n\n  return React.createElement(\n    dmc.Paper,\n    {\n      px: \"md\",\n      py: \"sm\",\n      withBorder: true,\n      shadow: \"md\",\n      radius: \"md\",\n    },\n    [\n      React.createElement(\n        dmc.Text,\n        {\n          key: \"tooltip-label\",\n          fw: 500,\n          mb: 5,\n        },\n        label\n      ),\n      ...payload.map((item, index) =>\n        React.createElement(\n          dmc.Text,\n          {\n            key: `item-${index}`,\n            c: item.color,\n            fz: \"sm\",\n          },\n          `${item.name}: ${item.value}`\n        )\n      ),\n    ]\n  );\n};\n```\n\n\n\n### Customize dots\nUse `dotProps` to pass props down to recharts dot in regular state and `activeDotProps` to pass props down to recharts\ndot in active state (when cursor is over the current series).\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.CompositeChart(\n    h=300,\n    data=data,\n    dataKey=\"date\",\n    dotProps={\"r\": 6, \"strokeWidth\": 2, \"stroke\": \"#fff\"},\n    activeDotProps={\"r\": 8, \"strokeWidth\": 1, \"fill\": \"#fff\"},\n    maxBarWidth=30,\n    series=[\n        {\"name\": \"Tomatoes\", \"color\": \"rgba(18, 120, 255, 0.2)\", \"type\": \"bar\"},\n        {\"name\": \"Apples\", \"color\": \"red.8\", \"type\": \"line\"},\n        {\"name\": \"Oranges\", \"color\": \"yellow.8\", \"type\": \"area\"},\n    ]\n)\n```\n### Stroke width\nUse `strokeWidth` prop to control the stroke width of all areas/lines:\n\n\n\n### Sync multiple charts\nYou can pass props down to recharts [ComposedChart](https://recharts.org/en-US/api/ComposedChart) component with\n`composedChartProps` prop. For example, setting the following will sync tooltip of multiple `CompositeChart` components\nwith the same `syncId` prop.\n\n```python \ncomposedChartProps={\"syncId\": \"any-id\"}\n```\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.Stack(\n    [\n\n        dmc.Text(\"Apples sales:\", mb=\"md\", pl=\"md\"),\n        dmc.CompositeChart(\n            h=180,\n            data=data,\n            dataKey=\"date\",\n            series=[{\"name\": \"Apples\", \"color\": \"indigo.6\", \"type\": \"area\"}],\n            composedChartProps={\"syncId\": \"groceries\"}\n        ),\n        dmc.Text(\"Tomatoes sales:\", mb=\"md\", pl=\"md\", mt=\"xl\"),\n        dmc.CompositeChart(\n            h=180,\n            data=data,\n            dataKey=\"date\",\n            series=[{\"name\": \"Tomatoes\", \"color\": \"cyan.6\", \"type\": \"bar\"}],\n            composedChartProps={\"syncId\": \"groceries\"}\n        )\n    ]\n)\n```\n### Dashed lines\nSet `strokeDasharray` property in series to change line style to dashed:\n\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.CompositeChart(\n    h=300,\n    data=data,\n    dataKey=\"date\",\n    strokeWidth=1,\n    dotProps={\"r\": 2},\n    activeDotProps={\"r\": 3, \"strokeWidth\": 1},\n    maxBarWidth=30,\n    series=[\n        {\"name\": \"Tomatoes\", \"color\": \"rgba(18, 120, 255, 0.2)\", \"type\": \"bar\"},\n        {\"name\": \"Apples\", \"color\": \"red.8\", \"type\": \"line\", \"strokeDasharray\": \"5 5\"},\n        {\"name\": \"Oranges\", \"color\": \"yellow.8\", \"type\": \"area\", \"strokeDasharray\": \"5 5\"},\n    ]\n)\n```\n### Reference lines\n\nUse `referenceLines` prop to render reference lines. Reference lines are always rendered behind the chart.\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.CompositeChart(\n    h=300,\n    data=data,\n    dataKey=\"date\",\n    yAxisProps={\"domain\": [0, 100]},\n    referenceLines=[\n        {\"y\": 1200, \"label\": \"Average sales\", \"color\": \"red.6\"},\n        {\"x\": \"Mar 25\", \"label\": \"Report out\", \"color\": \"blue.7\"},\n    ],\n    maxBarWidth=30,\n    series=[\n        {\"name\": \"Tomatoes\", \"color\": \"rgba(18, 120, 255, 0.2)\", \"type\": \"bar\"},\n        {\"name\": \"Apples\", \"color\": \"red.8\", \"type\": \"line\"},\n    ]\n)\n```\n### clickData\nUse the `clickData` property in a callback to retrieve data from the most recent click event.\nTo get the name of the clicked series, use the `clickSeriesName` property.\n\n```python\nfrom dash import callback, Input, Output\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.Group(\n    [\n        dmc.CompositeChart(\n            id=\"figure-compositechart\",\n            h=300,\n            data=data,\n            dataKey=\"date\",\n            withLegend=True,\n            maxBarWidth=30,\n            series=[\n                {\"name\": \"Tomatoes\", \"color\": \"rgba(18, 120, 255, 0.2)\", \"type\": \"bar\"},\n                {\"name\": \"Apples\", \"color\": \"red.8\", \"type\": \"line\"},\n                {\"name\": \"Oranges\", \"color\": \"yellow.8\", \"type\": \"area\"},\n            ]\n        ),\n        dmc.Text(id=\"clickdata-compositechart1\"),\n        dmc.Text(id=\"clickdata-compositechart2\"),\n    ]\n)\n\n@callback(\n    Output(\"clickdata-compositechart1\", \"children\"),\n    Output(\"clickdata-compositechart2\", \"children\"),\n    Input(\"figure-compositechart\", \"clickData\"),\n    Input(\"figure-compositechart\", \"clickSeriesName\"),\n)\ndef update(data, name):\n    return f\"clickData:  {data}\", f\"clickSeriesName: {name}\"\n```\n### hoverData\nUse the `hoverData` property in a callback to retrieve data from the most recent hover event.\nTo get the name of the hovered series, use the `hoverSeriesName` property.\n\n```python\nfrom dash import callback, Input, Output\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.Group(\n    [\n        dmc.CompositeChart(\n            id=\"figure-compositechart-hover\",\n            h=300,\n            data=data,\n            dataKey=\"date\",\n            withLegend=True,\n            maxBarWidth=30,\n            series=[\n                {\"name\": \"Tomatoes\", \"color\": \"rgba(18, 120, 255, 0.2)\", \"type\": \"bar\"},\n                {\"name\": \"Apples\", \"color\": \"red.8\", \"type\": \"line\"},\n                {\"name\": \"Oranges\", \"color\": \"yellow.8\", \"type\": \"area\"},\n            ]\n        ),\n        dmc.Text(id=\"hoverdata-compositechart1\"),\n        dmc.Text(id=\"hoverdata-compositechart2\"),\n    ]\n)\n\n@callback(\n    Output(\"hoverdata-compositechart1\", \"children\"),\n    Output(\"hoverdata-compositechart2\", \"children\"),\n    Input(\"figure-compositechart-hover\", \"hoverData\"),\n    Input(\"figure-compositechart-hover\", \"hoverSeriesName\"),\n)\ndef update(data, name):\n    return f\"hoverData:  {data}\", f\"hoverSeriesName: {name}\"\n```\n### highlightHover\n\nSet `highlightHover=True` to highlight the series when hovered, mirroring the behavior of hovering over chart legend items.\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.CompositeChart(\n    h=300,\n    data=data,\n    dataKey=\"date\",\n    withLegend=True,\n    maxBarWidth=30,\n    series=[\n        {\"name\": \"Tomatoes\", \"color\": \"rgba(18, 120, 255, 0.2)\", \"type\": \"bar\"},\n        {\"name\": \"Apples\", \"color\": \"red.8\", \"type\": \"line\"},\n        {\"name\": \"Oranges\", \"color\": \"yellow.8\", \"type\": \"area\"},\n    ],\n    withTooltip=False,\n    highlightHover=True\n)\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n#### CompositeChart selectors \n\n| Selector           | Static selector                           | Description                                   |\n|--------------------|-------------------------------------------|-----------------------------------------------|\n| root               | .mantine-CompositeChart-root              | Root element                                  |\n| area               | .mantine-CompositeChart-area              | Area of the chart                             |\n| line               | .mantine-CompositeChart-line              | Line of the chart                             |\n| bar                | .mantine-CompositeChart-bar               | Bar of the chart                              |\n| axis               | .mantine-CompositeChart-axis              | X and Y axis of the chart                     |\n| container          | .mantine-CompositeChart-container         | Recharts ResponsiveContainer component        |\n| grid               | .mantine-CompositeChart-grid              | Recharts CartesianGrid component              |\n| legend             | .mantine-CompositeChart-legend            | Legend root element                           |\n| legendItem         | .mantine-CompositeChart-legendItem        | Legend item representing data series          |\n| legendItemColor    | .mantine-CompositeChart-legendItemColor   | Legend item color                             |\n| legendItemName     | .mantine-CompositeChart-legendItemName    | Legend item name                              |\n| tooltip            | .mantine-CompositeChart-tooltip           | Tooltip root element                          |\n| tooltipBody        | .mantine-CompositeChart-tooltipBody       | Tooltip wrapper around all items              |\n| tooltipItem        | .mantine-CompositeChart-tooltipItem       | Tooltip item representing data series         |\n| tooltipItemBody    | .mantine-CompositeChart-tooltipItemBody   | Tooltip item wrapper around item color and name |\n| tooltipItemColor   | .mantine-CompositeChart-tooltipItemColor  | Tooltip item color                            |\n| tooltipItemName    | .mantine-CompositeChart-tooltipItemName   | Tooltip item name                             |\n| tooltipItemData    | .mantine-CompositeChart-tooltipItemData   | Tooltip item data                             |\n| tooltipLabel       | .mantine-CompositeChart-tooltipLabel      | Label of the tooltip                          |\n| referenceLine      | .mantine-CompositeChart-referenceLine     | Reference line                                |\n| axisLabel          | .mantine-CompositeChart-axisLabel         | X and Y axis labels                           |\n\n\n### Composite CSS variables\n\n| Selector         | Variable             | Description                                      |\n|:-----------------|:---------------------|:-------------------------------------------------|\n| root             | --chart-grid-color   | Controls color of the grid and cursor lines      |\n|                  | --chart-text-color   | Controls color of the axis labels                |\n\n\n\n\n### Keyword Arguments\n#### CompositeChart\n\n- children (a list of or a singular dash component, string or number; optional):\n    Additional components that are rendered inside `Composite`\n    component.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- activeDotProps (boolean | number | string | dict | list; optional):\n    Props passed down to all active dots. Ignored if\n    `withDots={False}` is set.\n\n- areaProps (dict; optional):\n    Props passed down to recharts `Area` component.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- barProps (dict; optional):\n    Props passed down to recharts `Bar` component.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- clickData (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Click data for entire dataKey.\n\n- clickSeriesName (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Name of the series that was clicked.\n\n- composedChartProps (dict; optional):\n    Props passed down to recharts `Composite` component.\n\n- connectNulls (boolean; optional):\n    Determines whether points with `None` values should be connected,\n    `True` by default.\n\n- curveType (a value equal to: 'bump', 'linear', 'natural', 'monotone', 'step', 'stepBefore', 'stepAfter'; optional):\n    Controls how curve of lines and area series are displayed,\n    `'montone'` by default.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data (list of dicts with strings as keys and values of type boolean | number | string | dict | list; required):\n    Data used to display chart.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- dataKey (string; required):\n    Key of the `data` object for x-axis values.\n\n- dotProps (boolean | number | string | dict | list; optional):\n    Props passed down to all dots. Ignored if `withDots={False}` is\n    set.\n\n- gridAxis (a value equal to: 'none', 'x', 'y', 'xy'; optional):\n    Specifies which lines should be displayed in the grid, `'x'` by\n    default.\n\n- gridColor (optional):\n    Color of the grid and cursor lines, by default depends on color\n    scheme.\n\n- gridProps (dict; optional):\n    Props passed down to the `CartesianGrid` component.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- highlightHover (boolean; optional):\n    Determines whether a hovered series is highlighted. False by\n    default. Mirrors the behaviour when hovering about chart legend\n    items.\n\n- hoverData (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Hover data for entire dataKey.\n\n- hoverSeriesName (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Name of the series that is hovered.\n\n- legendProps (dict; optional):\n    Props passed down to the `Legend` component.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- lineProps (dict; optional):\n    Props passed down to recharts `Line` component.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- maxBarWidth (number; optional):\n    Maximum bar width in px.\n\n- minBarSize (number; optional):\n    Sets minimum height of the bar in px, `0` by default.\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- referenceLines (list of dicts; optional):\n    Reference lines that should be displayed on the chart.\n\n- rightYAxisLabel (boolean | number | string | dict | list; optional):\n    Props passed down to the YAxis recharts component rendered on the\n    right side.\n\n- rightYAxisProps (boolean | number | string | dict | list; optional):\n    Props passed down to the YAxis recharts component rendered on the\n    right side.\n\n- series (list of dicts; required):\n    An array of objects with `name`, `color` and `type` keys.\n    Determines which data should be consumed from the `data` array.\n\n    `series` is a list of dicts with keys:\n\n- strokeDasharray (string | number; optional):\n    Dash array for the grid lines and cursor, `'5 5'` by default.\n\n- strokeWidth (number; optional):\n    Stroke width for the chart lines, `2` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- textColor (optional):\n    Color of the text displayed inside the chart, `'dimmed'` by\n    default.\n\n- tickLine (a value equal to: 'none', 'x', 'y', 'xy'; optional):\n    Specifies which axis should have tick line, `'y'` by default.\n\n- tooltipAnimationDuration (number; optional):\n    Tooltip position animation duration in ms, `0` by default.\n\n- tooltipProps (dict; optional):\n    Props passed down to the `Tooltip` component.\n\n- unit (string; optional):\n    Unit displayed next to each tick in y-axis.\n\n- valueFormatter (boolean | number | string | dict | list; optional):\n    A function to format values on Y axis and inside the tooltip. See\n    https://www.dash-mantine-components.com/functions-as-props.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withBarValueLabel (boolean; optional):\n    Determines whether a label with bar value should be displayed on\n    top of each bar, incompatible with `type=\"stacked\"` and\n    `type=\"percent\"`, `False` by default.\n\n- withDots (boolean; optional):\n    Determines whether dots should be displayed, `True` by default.\n\n- withLegend (boolean; optional):\n    Determines whether chart legend should be displayed, `False` by\n    default.\n\n- withPointLabels (boolean; optional):\n    Determines whether a label with value should be displayed on top\n    of a curve, This feature is supported only for Line and Area\n    series.\n\n- withRightYAxis (boolean; optional):\n    Determines whether additional y-axis should be displayed on the\n    right side of the chart, False by default.\n\n- withTooltip (boolean; optional):\n    Determines whether chart tooltip should be displayed, `True` by\n    default.\n\n- withXAxis (boolean; optional):\n    Determines whether x-axis should be hidden, `True` by default.\n\n- withYAxis (boolean; optional):\n    Determines whether y-axis should be hidden, `True` by default.\n\n- xAxisLabel (string; optional):\n    A label to display below the x-axis.\n\n- xAxisProps (dict; optional):\n    Props passed down to the `XAxis` recharts component.\n\n- yAxisLabel (string; optional):\n    A label to display next to the y-axis.\n\n- yAxisProps (dict; optional):\n    Props passed down to the `YAxis` recharts component."
  },
  {
    "name": "DonutChart",
    "description": "Donut chart component",
    "endpoint": "/components/donutchart",
    "package": "dash_mantine_components",
    "category": "Charts",
    "content": "\n\n## DonutChart  \nDonut chart component  \nCategory: Charts  \n\n### Usage\n\n`DonutChart` is based on [PieChart recharts component](https://recharts.org/en-US/api/PieChart):\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.DonutChart(data=data)\n```\n### Data\n\nHere is the data imported for the examples on this page:\n\n```python\n\ndata = [\n  { \"name\": \"USA\", \"value\": 400, \"color\": \"indigo.6\" },\n  { \"name\": \"India\", \"value\": 300, \"color\": \"yellow.6\" },\n  { \"name\": \"Japan\", \"value\": 100, \"color\": \"teal.6\" },\n  { \"name\": \"Other\", \"value\": 200, \"color\": \"gray.6\" }\n]\n\n```\n    \n\n### Segments labels\n\nSet `withLabels` prop to display labels next to each segment:\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ndmc.DonutChart(\n    data=data,   \n    withLabels=True,\n    withLabelsLine=True\n)\n```\n\n### Size and thickness \n\nSet `size` prop to control width and height of the chart. Note that if `withLabels` prop is set, the chart height is\nautomatically increased by 80px to make room for labels. You can override this behavior by setting `h` style prop.\n\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ndmc.DonutChart(\n    data=data,\n    size=160,\n    thickness=30\n)\n```\n\n\n### Padding angle \n\nUse `paddingAngle` prop to control the space between segments:\n\n```python\n\nimport dash_mantine_components as dmc\nfrom .data import data\n\ndmc.DonutChart(\n    data=data,\n    paddingAngle=30,\n)\n```\n\n\n### Segment color\n\nYou can reference colors from theme the same way as in other components, for example, `blue`, `red.5`, `orange.7`, etc. \nAny valid CSS color value is also accepted.\n\n```python\nimport dash_mantine_components as dmc\n\ndata = [\n    {\"name\": \"USA\", \"value\": 400, \"color\": \"blue\"},\n    {\"name\": \"Other\", \"value\": 200, \"color\": \"gray.6\"},\n]\n\ncomponent = dmc.DonutChart(data=data)\n```\n### Tooltip data source\n\nBy default, the tooltip displays data for all segments when hovered over any segment. To display data only for the hovered segment, set tooltipDataSource=\"segment\":\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html\nfrom .data import data\n\ncomponent = dmc.Group(\n    [\n        html.Div(\n            [\n                dmc.Text(\n                    \"Data only for hovered segment\", fz=\"xs\", mb=\"sm\", ta=\"center\"\n                ),\n                dmc.DonutChart(\n                    data=data,\n                    withTooltip=True,\n                    tooltipDataSource=\"segment\",\n                    mx=\"auto\",\n                ),\n            ]\n        ),\n        html.Div(\n            [\n                dmc.Text(\"Data only for all segments\", fz=\"xs\", mb=\"sm\", ta=\"center\"),\n                dmc.DonutChart(\n                    data=data,\n                    withTooltip=True,\n                    mx=\"auto\",\n                ),\n            ]\n        ),\n    ],\n    gap=50,\n)\n```\n### Without tooltip\n\nTo remove the tooltip, set `withTooltip=False`:\n\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.DonutChart(data=data, withTooltip=False)\n```\n### Chart label\n\nTo display a label in the center of the chart, use `chartLabel` prop. It accepts a string or a number:\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.DonutChart(data=data, chartLabel=\"Users by country\")\n```\n### Start and end angle\n\nUse `startAngle` and `endAngle` props to control the start and end angle of the chart. For example, to display a\nhalf-circle chart, set `startAngle=180` and `endAngle=0`:\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.DonutChart(data=data, startAngle=180, endAngle=0)\n```\n### Segments stroke\n\nUse `strokeWidth` prop to control the width of the stroke around each segment.\n\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ndmc.DonutChart(\n    data=data,\n    strokeWidth=1.8  \n)\n```\n\nTo change color of the stroke, use `strokeColor` prop. You can reference colors from theme the same way as in other\ncomponents, for example, `blue`, `red.5`, `orange.7`, etc. Any valid CSS color value is also accepted.\n\n```python\ndmc.DonutChart(\n    data=data,\n    strokeColor=\"red.5\"\n)\n```\n\nBy default, segments stroke color is the same as the background color of the body element\n(`--mantine-color-body` CSS variable). If you want to change it depending on the color scheme, define CSS variable\nand pass it to the `strokeColor` prop:\n\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.DonutChart(data=data, strokeColor=\"var(--card-bg)\")\n```\n```css\n.root {\n  --card-bg: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));\n\n  background-color: var(--card-bg);\n  padding: var(--mantine-spacing-md);\n  border-radius: var(--mantine-radius-md);\n}\n\n```\n\n\n### Donut animation\nBy default, the Recharts data animation is disabled. To enable and customize the animation, use `pieProps` to pass properties to the Recharts `Pie` component.\n\n\n```python\nfrom random import randint\nimport dash_mantine_components as dmc\nfrom dash import callback, Input, Output\n\n\ndef get_data(values):\n    return [\n        {\"name\": \"A\", \"value\": values[0], \"color\": \"indigo.6\"},\n        {\"name\": \"B\", \"value\": values[1], \"color\": \"yellow.6\"},\n        {\"name\": \"C\", \"value\": values[2], \"color\": \"teal.6\"},\n        {\"name\": \"C\", \"value\": values[3], \"color\": \"gray.6\"},\n    ]\n\n\ncomponent = dmc.Box(\n    [\n        dmc.Button(\"Update Chart\", id=\"btn-donutchart-animation\", n_clicks=0, mb=\"md\"),\n        dmc.DonutChart(\n            id=\"donutchart-animation\",\n            data=get_data([100, 0, 0, 0]),\n            pieProps={\"isAnimationActive\": True},\n        ),\n    ]\n)\n\n\n@callback(\n    Output(\"donutchart-animation\", \"data\"),\n    Input(\"btn-donutchart-animation\", \"n_clicks\"),\n)\ndef update(n):\n    if n % 2 == 0:\n        return get_data([400, 300, 600, 100])\n    return get_data([100, 0, 0, 0])\n```\n### clickData\nUse the `clickData` property in a callback to retrieve data from the most recent click event. To get the name of the\nclicked series, use the `clickSeriesName` property.\n```python\nfrom dash import callback, Input, Output\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.Stack(\n    [\n        dmc.DonutChart(id=\"figure-donutchart\", data=data, withTooltip=False),\n        dmc.Text(id=\"clickdata-donutchart1\"),\n        dmc.Text(id=\"clickdata-donutchart2\"),\n    ]\n)\n\n\n\n@callback(\n    Output(\"clickdata-donutchart1\", \"children\"),\n    Output(\"clickdata-donutchart2\", \"children\"),\n    Input(\"figure-donutchart\", \"clickData\"),\n    Input(\"figure-donutchart\", \"clickSeriesName\"),\n)\ndef update(data, name):\n    return f\"clickData:  {data}\", f\"clickSeriesName: {name}\"\n```\n### hoverData\nUse the `hoverData` property in a callback to retrieve data from the most recent hover event. To get the name of the \nhovered series, use the `hoverSeriesName` property.\n\n```python\nfrom dash import callback, Input, Output\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.Stack(\n    [\n        dmc.DonutChart(id=\"figure-donutchart-hover\", data=data, withTooltip=False),\n        dmc.Text(id=\"hoverdata-donutchart1\"),\n        dmc.Text(id=\"hoverdata-donutchart2\"),\n    ]\n)\n\n\n@callback(\n    Output(\"hoverdata-donutchart1\", \"children\"),\n    Output(\"hoverdata-donutchart2\", \"children\"),\n    Input(\"figure-donutchart-hover\", \"hoverData\"),\n    Input(\"figure-donutchart-hover\", \"hoverSeriesName\"),\n)\ndef update(data, name):\n    return f\"hoverData:  {data}\", f\"hoverSeriesName: {name}\"\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n#### DonutChart selectors\n\n| Selector    | Static selector              | Description                             |\n|:------------|:-----------------------------|:----------------------------------------|\n| root        | .mantine-DonutChart-root    | Root element                            |\n| label       | .mantine-DonutChart-label   | Chart label, controlled by chartLabel prop |\n\n#### DonutChart CSS variables\n\n| Selector         | Variable               | Description                              |\n|:-----------------|:-----------------------|:-----------------------------------------|\n| root             | --chart-labels-color   | Controls color of the chart labels       |\n|                  | --chart-size           | Controls size of the chart               |\n|                  | --chart-stroke-color   | Controls color of the chart stroke       |\n\n\n### Keyword Arguments\n#### DonutChart\n\n- children (a list of or a singular dash component, string or number; optional):\n    Additional elements rendered inside `PieChart` component.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- chartLabel (string | number; optional):\n    Chart label, displayed in the center of the chart.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- clickData (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Click data.\n\n- clickSeriesName (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Name of the series that was clicked.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data (list of dicts; required):\n    Data used to render chart.\n\n    `data` is a list of dicts with keys:\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- endAngle (number; optional):\n    Controls angle at which charts ends, `360` by default. Set to `0`\n    to render the chart as semicircle.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- hoverData (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Hover data.\n\n- hoverSeriesName (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Name of the series that is hovered.\n\n- labelColor (optional):\n    Controls text color of all labels, by default depends on color\n    scheme.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- paddingAngle (number; optional):\n    Controls padding between segments, `0` by default.\n\n- pieChartProps (dict; optional):\n    Props passed down to recharts `PieChart` component.\n\n- pieProps (dict; optional):\n    Props passed down to recharts `Pie` component.\n\n- size (number; optional):\n    Controls chart width and height, height is increased by 40 if\n    `withLabels` prop is set. Cannot be less than `thickness`. `80` by\n    default.\n\n- startAngle (number; optional):\n    Controls angle at which chart starts, `0` by default. Set to `180`\n    to render the chart as semicircle.\n\n- strokeColor (optional):\n    Controls color of the segments stroke, by default depends on color\n    scheme.\n\n- strokeWidth (number; optional):\n    Controls width of segments stroke, `1` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- thickness (number; optional):\n    Controls thickness of the chart segments, `20` by default.\n\n- tooltipAnimationDuration (number; optional):\n    Tooltip animation duration in ms, `0` by default.\n\n- tooltipDataSource (a value equal to: 'segment', 'all'; optional):\n    Determines which data is displayed in the tooltip. `'all'` –\n    display all values, `'segment'` – display only hovered segment.\n    `'all'` by default.\n\n- tooltipProps (dict; optional):\n    Props passed down to `Tooltip` recharts component.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withLabels (boolean; optional):\n    Determines whether each segment should have associated label,\n    `False` by default.\n\n- withLabelsLine (boolean; optional):\n    Determines whether segments labels should have lines that connect\n    the segment with the label, `True` by default.\n\n- withTooltip (boolean; optional):\n    Determines whether the tooltip should be displayed when one of the\n    section is hovered, `True` by default."
  },
  {
    "name": "LineChart",
    "description": "Line chart component",
    "endpoint": "/components/linechart",
    "package": "dash_mantine_components",
    "category": "Charts",
    "content": "\n\n## LineChart  \nLine chart component  \nCategory: Charts  \n\n### Introduction\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ndmc.LineChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    series = [\n        {\"name\": \"Apples\", \"color\": \"indigo.6\"},\n        {\"name\": \"Oranges\", \"color\": \"blue.6\"},\n        {\"name\": \"Tomatoes\", \"color\": \"teal.6\"}\n    ],\n    curveType=\"linear\",\n    tickLine=\"xy\",\n    withXAxis=False,\n    withDots=False,\n)\n```\n\n\n### Data\nHere is the data imported for the examples on this page:\n\n```python\n\ndata = [\n  {\"date\": \"Mar 22\", \"Apples\": 2890, \"Oranges\": 2338, \"Tomatoes\": 2452},\n  {\"date\": \"Mar 23\", \"Apples\": 2756, \"Oranges\": 2103, \"Tomatoes\": 2402},\n  {\"date\": \"Mar 24\", \"Apples\": 3322, \"Oranges\": 986, \"Tomatoes\": 1821},\n  {\"date\": \"Mar 25\", \"Apples\": 3470, \"Oranges\": 2108, \"Tomatoes\": 2809},\n  {\"date\": \"Mar 26\", \"Apples\": 3129, \"Oranges\": 1726, \"Tomatoes\": 2290}\n]\n```\n\n### Gradient type\nSet `type=\"gradient\"` to render a line chart with gradient fill. To customize gradient colors, use `gradientStops` prop.\nIt accepts an array of objects with `offset` and `color` properties. `offset` is a number between 0 and 100 that defines\nthe position of the color in the gradient, `color` is a reference to `theme.colors` or any valid CSS color.\n\n```python\nimport dash_mantine_components as dmc\n\n\ndata = [\n    {\"date\": \"Jan\", \"temperature\": -25},\n    {\"date\": \"Feb\", \"temperature\": -10},\n    {\"date\": \"Mar\", \"temperature\": 5},\n    {\"date\": \"Apr\", \"temperature\": 15},\n    {\"date\": \"May\", \"temperature\": 30},\n    {\"date\": \"Jun\", \"temperature\": 15},\n    {\"date\": \"Jul\", \"temperature\": 30},\n    {\"date\": \"Aug\", \"temperature\": 40},\n    {\"date\": \"Sep\", \"temperature\": 15},\n    {\"date\": \"Oct\", \"temperature\": 20},\n    {\"date\": \"Nov\", \"temperature\": 0},\n    {\"date\": \"Dec\", \"temperature\": -10},\n]\n\ncomponent = dmc.LineChart(\n    h=300,\n    data=data,\n    series=[{\"name\": \"temperature\", \"label\": \"Avg. Temperature\"}],\n    dataKey=\"date\",\n    type=\"gradient\",\n    valueFormatter={\"function\": \"celsiusLabel\"},\n    gradientStops=[\n        {\"offset\": 0, \"color\": \"red.6\"},\n        {\"offset\": 20, \"color\": \"orange.6\"},\n        {\"offset\": 40, \"color\": \"yellow.5\"},\n        {\"offset\": 70, \"color\": \"lime.5\"},\n        {\"offset\": 80, \"color\": \"cyan.5\"},\n        {\"offset\": 100, \"color\": \"blue.5\"},\n    ],\n    strokeWidth=5,\n    curveType=\"natural\",\n    yAxisProps={\"domain\": [-25, 40]},\n    p=\"lg\"\n)\n```\n### Value formatter\nTo format values in the tooltip and axis ticks, use `valueFormatter` prop. It accepts a function that takes number `value`\nas an argument and returns formatted value:\n\n\n\nNote: This example uses custom JavaScript defined in the assets folder. Learn more in the \"Functions As Props\" section of this document.\n\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.LineChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    valueFormatter={\"function\": \"formatNumberIntl\"},\n    series=[\n        {\"name\": \"Apples\", \"color\": \"indigo.6\"},\n        {\"name\": \"Oranges\", \"color\": \"blue.6\"},\n        {\"name\": \"Tomatoes\", \"color\": \"teal.6\"},\n    ],\n)\n```\n\n```javascript\nvar dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\n\ndmcfuncs.formatNumberIntl = (value) => {\n  return new Intl.NumberFormat('en-US').format(value);\n};\n```\n\n\n### Legend\nTo display chart legend, set `withLegend` prop. When one of the items in the legend is hovered, the corresponding data\nseries is highlighted in the chart.\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.LineChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    withLegend=True,\n    series=[\n        {\"name\": \"Apples\", \"color\": \"indigo.6\"},\n        {\"name\": \"Oranges\", \"color\": \"blue.6\"},\n        {\"name\": \"Tomatoes\", \"color\": \"teal.6\"},\n    ],\n)\n```\n### Legend position\nYou can pass props down to recharts Legend component with `legendProps` prop. For example, setting the following will\nrender the legend at the bottom of the chart and set its height to 50px:\n```python\nlegendProps={'verticalAlign': 'bottom', 'height': 50} \n```\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.LineChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    withLegend=True,\n    legendProps={\"verticalAlign\": \"bottom\", \"height\": 50},\n    series=[\n        {\"name\": \"Apples\", \"color\": \"indigo.6\"},\n        {\"name\": \"Oranges\", \"color\": \"blue.6\"},\n        {\"name\": \"Tomatoes\", \"color\": \"teal.6\"},\n    ],\n)\n```\n### Series labels\nBy default, series `name` is used as a label. To change it, set `label` property in `series` object:\n\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.LineChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    withLegend=True,\n    legendProps={\"verticalAlign\": \"bottom\"},\n    series=[\n        {\"name\": \"Apples\", \"label\": \"Apples sales\", \"color\": \"indigo.6\"},\n        {\"name\": \"Oranges\", \"label\": \"Oranges sales\", \"color\": \"blue.6\"},\n        {\"name\": \"Tomatoes\", \"label\": \"Tomatoes sales\", \"color\": \"teal.6\"},\n    ],\n)\n```\n### Connect nulls\nUse `connectNulls` prop to specify whether to connect a data point across null points. By default, `connectNulls` is true.\n\n\n```python\nimport dash_mantine_components as dmc\n\ndata = [\n  {\"date\": \"Mar 22\", \"Apples\": 110},\n  {\"date\": \"Mar 23\", \"Apples\": 60},\n  {\"date\": \"Mar 24\", \"Apples\": -80},\n  {\"date\": \"Mar 25\", \"Apples\": 40},\n  {\"date\": \"Mar 26\", \"Apples\": None},\n  {\"date\": \"Mar 27\", \"Apples\": 80}\n]\n\ndmc.LineChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    connectNulls=True,\n    series=[{\"name\": \"Apples\", \"color\": \"indigo.6\"}],\n    curveType=\"linear\",\n)\n\n```\n\n### X and Y axis props\nUse `xAxisProps` and `yAxisProps` to pass props down to recharts `XAxis` and `YAxis` components. For example, these props can\nbe used to change orientation of axis:\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\n\ncomponent = dmc.LineChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    tickLine=\"xy\",\n    yAxisProps={\"tickMargin\": 15, \"orientation\": \"right\"},\n    xAxisProps={\"tickMargin\": 15, \"orientation\": \"top\"},\n    series=[\n        {\"name\": \"Apples\", \"color\": \"indigo.6\"},\n        {\"name\": \"Oranges\", \"color\": \"blue.6\"},\n        {\"name\": \"Tomatoes\", \"color\": \"teal.6\"},\n    ],\n)\n```\n### Axis labels\nUse `xAxisLabel` and `yAxisLabel` props to display axis labels:\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.LineChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    xAxisLabel=\"Date\",\n    yAxisLabel=\"Amount\",\n    series=[\n        {\"name\": \"Apples\", \"color\": \"indigo.6\"},\n        {\"name\": \"Oranges\", \"color\": \"blue.6\"},\n        {\"name\": \"Tomatoes\", \"color\": \"teal.6\"},\n    ],\n)\n```\n### X axis offset\nUse xAxisProps to set padding between the charts ends and the x-axis:\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.LineChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    xAxisProps={\"padding\": {\"left\": 30, \"right\": 30}},\n    series=[\n        {\"name\": \"Apples\", \"color\": \"indigo.6\"},\n        {\"name\": \"Oranges\", \"color\": \"blue.6\"},\n        {\"name\": \"Tomatoes\", \"color\": \"teal.6\"},\n    ],\n)\n```\n### Y axis scale\nUse `yAxisProps` to change domain of the Y axis. For example, if you know that your data will always be in the range\nof 0 to 100, you can set domain to `[0, 100]`:\n\n```python\nimport dash_mantine_components as dmc\n\ndata = [\n    {\"date\": \"Mar 22\", \"Apples\": 50},\n    {\"date\": \"Mar 23\", \"Apples\": 60},\n    {\"date\": \"Mar 24\", \"Apples\": 40},\n    {\"date\": \"Mar 25\", \"Apples\": 30},\n    {\"date\": \"Mar 26\", \"Apples\": 0},\n    {\"date\": \"Mar 27\", \"Apples\": 20},\n    {\"date\": \"Mar 28\", \"Apples\": 20},\n    {\"date\": \"Mar 29\", \"Apples\": 10},\n]\n\ncomponent = dmc.LineChart(\n    h=300,\n    dataKey=\"date\",\n    yAxisProps={\"domain\": [0, 100]},\n    data=data,\n    connectNulls=True,\n    series=[{\"name\": \"Apples\", \"color\": \"indigo.6\"}],\n)\n```\n### Right Y axis\nTo display additional Y axis on the right side of the chart, set `withRightYAxis` prop. You can pass props down to\nrecharts `YAxis` component with `rightYAxisProps` prop and assign a label to the right Y axis with `rightYAxisLabel` prop.\nNote that you need to bind data series to the right Y axis by setting `yAxisId` in the series object.\n\n\n```python\nimport dash_mantine_components as dmc\n\ndata = biaxial_data = [\n    {\"name\": \"Page A\", \"uv\": 4000, \"pv\": 2400},\n    {\"name\": \"Page B\", \"uv\": 3000, \"pv\": 1398},\n    {\"name\": \"Page C\", \"uv\": 2000, \"pv\": 9800},\n    {\"name\": \"Page D\", \"uv\": 2780, \"pv\": 3908},\n    {\"name\": \"Page E\", \"uv\": 1890, \"pv\": 4800},\n    {\"name\": \"Page F\", \"uv\": 2390, \"pv\": 3800},\n    {\"name\": \"Page G\", \"uv\": 3490, \"pv\": 4300},\n]\n\ncomponent = dmc.LineChart(\n    h=300,\n    data=data,\n    dataKey=\"name\",\n    withRightYAxis=True,\n    yAxisLabel=\"uv\",\n    rightYAxisLabel=\"pv\",\n    series=[\n        {\"name\": \"uv\", \"color\": \"pink.6\"},\n        {\"name\": \"pv\", \"color\": \"cyan.6\", \"yAxisId\": \"right\"},\n    ],\n)\n```\n### Rotate x-axis labels\nTo rotate x-axis labels, set `xAxisProps.angle` to a number of degrees to rotate:\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.LineChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    tickLine=\"xy\",\n    xAxisProps={\"angle\": -20},\n    series=[\n        {\"name\": \"Apples\", \"color\": \"indigo.6\"},\n        {\"name\": \"Oranges\", \"color\": \"blue.6\"},\n        {\"name\": \"Tomatoes\", \"color\": \"teal.6\"},\n    ],\n)\n```\n### Line color\nYou can reference colors from theme the same way as in other components, for example, `blue`, `red.5`, `orange.7`, etc. \nAny valid CSS color value is also accepted.\n\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.LineChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    series=[{\"name\": \"Apples\", \"color\": \"orange.7\"}],\n)\n```\n### Change line color depending on color scheme\nYou can use CSS variables in color property. Learn more in the Theming section under [Colors.](/colors#colors-in-light-and-dark-mode)\n\nExample of line color that is dark orange in light mode and lime in dark mode:\n\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.LineChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    series=[{\"name\": \"Apples\", \"color\": \"var(--chart-color)\"}],\n)\n```\n\n```css\n:root {\n   --chart-color: var(--mantine-color-orange-8)\n}\n\n:root[data-mantine-color-scheme=\"dark\"] {\n  --chart-color: var(--mantine-color-lime-4);\n}\n```\n\n\n\n### Stroke dash array\nSet `strokeDasharray` prop to control the stroke dash array of the grid and cursor lines. The value represent the\nlengths of alternating dashes and gaps. For example, strokeDasharray=\"10 5\" will render a dashed line with 10px dashes\nand 5px gaps.\n\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.LineChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    strokeDasharray=\"15 15\",\n    series=[\n        {\"name\": \"Apples\", \"color\": \"indigo.6\"},\n        {\"name\": \"Oranges\", \"color\": \"blue.6\"},\n        {\"name\": \"Tomatoes\", \"color\": \"teal.6\"},\n    ],\n)\n```\n### Grid and text colors\nUse `--chart-grid-color` and `--chart-text-color` to change colors of grid lines and text within the chart. \nWith CSS , you can change colors depending on color scheme.  Learn more in the Theming section under [Colors.](/colors#colors-in-light-and-dark-mode)\n\n\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\n\n\ncomponent = dmc.LineChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    className=\"chart-grid-text-colors\",\n    series=[\n        {\"name\": \"Apples\", \"color\": \"indigo.6\"},\n        {\"name\": \"Oranges\", \"color\": \"blue.6\"},\n        {\"name\": \"Tomatoes\", \"color\": \"teal.6\"},\n    ],\n)\n```\n\n```css\n\n.chart-grid-text-colors {\n  --chart-grid-color: var(--mantine-color-blue-5);\n  --chart-text-color: var(--mantine-color-blue-8);\n}\n\n[data-mantine-color-scheme='dark'] .chart-grid-text-colors {\n  --chart-grid-color: var(--mantine-color-blue-3);\n  --chart-text-color: var(--mantine-color-blue-2);\n}\n```\n\nIf your application has only one color scheme, you can use `gridColor` and `textColor` props instead of CSS variables:\n\n```python\ndmc.LineChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    gridColor=\"gray.5\",\n    textColor = \"gray.9\",\n    series=[\n        {\"name\": \"Apples\", \"color\": \"indigo.6\"},\n        {\"name\": \"Oranges\", \"color\": \"blue.6\"},\n        {\"name\": \"Tomatoes\", \"color\": \"teal.6\"},\n    ],\n)\n\n```\n\n### Tooltip animation\nBy default, tooltip animation is disabled. To enable it, set `tooltipAnimationDuration` prop to a number of\nmilliseconds to animate the tooltip position change.\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.LineChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    tooltipAnimationDuration=200,\n    series=[\n        {\"name\": \"Apples\", \"color\": \"indigo.6\"},\n        {\"name\": \"Oranges\", \"color\": \"blue.6\"},\n        {\"name\": \"Tomatoes\", \"color\": \"teal.6\"},\n    ],\n)\n```\n### Line animation\nBy default, the Recharts data animation is disabled. To enable and customize the animation, use `lineProps` to pass properties to the Recharts `Line` component.\n\n```python\nfrom random import randint\nimport dash_mantine_components as dmc\nfrom dash import callback, Input, Output\n\ncomponent = dmc.Box(\n    [\n        dmc.Button(\"Update Chart\", id=\"btn-linechart-animation\"),\n        dmc.LineChart(\n            id=\"linechart-animation\",\n            h=300,\n            dataKey=\"date\",\n            data=[{}],\n            tooltipAnimationDuration=500,\n            lineProps={\n                \"isAnimationActive\": True,\n                \"animationDuration\": 500,\n                \"animationEasing\": \"ease-in-out\",\n                \"animationBegin\": 500,\n            },\n            series=[\n                {\"name\": \"Apples\", \"color\": \"indigo.6\"},\n                {\"name\": \"Oranges\", \"color\": \"blue.6\"},\n                {\"name\": \"Tomatoes\", \"color\": \"teal.6\"},\n            ],\n        ),\n    ]\n)\n\n\n@callback(\n    Output(\"linechart-animation\", \"data\"), Input(\"btn-linechart-animation\", \"n_clicks\")\n)\ndef update(n):\n    return [\n        {\n            \"date\": \"Mar 22\",\n            \"Apples\": 2890,\n            \"Oranges\": 2338,\n            \"Tomatoes\": randint(1000, 4000),\n        },\n        {\n            \"date\": \"Mar 23\",\n            \"Apples\": 2756,\n            \"Oranges\": 2103,\n            \"Tomatoes\": randint(1000, 4000),\n        },\n        {\n            \"date\": \"Mar 24\",\n            \"Apples\": 3322,\n            \"Oranges\": 986,\n            \"Tomatoes\": randint(1000, 4000),\n        },\n        {\n            \"date\": \"Mar 25\",\n            \"Apples\": 3470,\n            \"Oranges\": 2108,\n            \"Tomatoes\": randint(1000, 4000),\n        },\n        {\n            \"date\": \"Mar 26\",\n            \"Apples\": 3129,\n            \"Oranges\": 1726,\n            \"Tomatoes\": randint(1000, 4000),\n        },\n    ]\n```\n### Units\nSet `unit` prop to render a unit label next to the y-axis ticks and tooltip values:\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.LineChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    unit=\"$\",\n    series=[\n        {\"name\": \"Apples\", \"color\": \"indigo.6\"},\n        {\"name\": \"Oranges\", \"color\": \"blue.6\"},\n        {\"name\": \"Tomatoes\", \"color\": \"teal.6\"},\n    ],\n)\n```\n### Remove tooltip\nTo remove tooltip, set `withTooltip=False`. It also removes the cursor line and disables interactions with the chart.\n\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.LineChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    withTooltip=False,\n    series=[\n        {\"name\": \"Apples\", \"color\": \"indigo.6\"},\n        {\"name\": \"Oranges\", \"color\": \"blue.6\"},\n        {\"name\": \"Tomatoes\", \"color\": \"teal.6\"},\n    ],\n)\n```\n### Custom tooltip\nUse the `tooltipProps` `content` prop to  to pass custom tooltip renderer to recharts Tooltip component.  For example:\n```python\n tooltipProps={'content': {'functon': 'myFunction'}}\n```\n\n\nNote: This example uses custom JavaScript defined in the assets folder. Learn more in the \"Functions As Props\" section of this document.\n\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.LineChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    series=[\n        {\"name\": \"Apples\", \"color\": \"indigo.6\"},\n        {\"name\": \"Oranges\", \"color\": \"blue.6\"},\n        {\"name\": \"Tomatoes\", \"color\": \"teal.6\"},\n    ],\n    tooltipProps={\"content\":  {\"function\": \"chartTooltip\"}}\n)\n```\n\n```javascript\nvar dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\nvar dmc = window.dash_mantine_components;\n\ndmcfuncs.chartTooltip = ({ label, payload }) => {\n\n  if (!payload || payload.length === 0) return null;\n\n  return React.createElement(\n    dmc.Paper,\n    {\n      px: \"md\",\n      py: \"sm\",\n      withBorder: true,\n      shadow: \"md\",\n      radius: \"md\",\n    },\n    [\n      React.createElement(\n        dmc.Text,\n        {\n          key: \"tooltip-label\",\n          fw: 500,\n          mb: 5,\n        },\n        label\n      ),\n      ...payload.map((item, index) =>\n        React.createElement(\n          dmc.Text,\n          {\n            key: `item-${index}`,\n            c: item.color,\n            fz: \"sm\",\n          },\n          `${item.name}: ${item.value}`\n        )\n      ),\n    ]\n  );\n};\n```\n\n\n### Customize dots\nUse `dotProps` to pass props down to recharts dot in regular state and `activeDotProps` to pass props down to recharts dot in active state (when cursor is over the current series).\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\n\ncomponent = dmc.LineChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    dotProps={\"r\": 6, \"strokeWidth\": 2, \"stroke\": \"#fff\"},\n    activeDotProps={\"r\": 8, \"strokeWidth\": 1, \"fill\": \"#fff\"},\n    series=[\n        {\"name\": \"Apples\", \"color\": \"indigo.6\"},\n        {\"name\": \"Oranges\", \"color\": \"blue.6\"},\n        {\"name\": \"Tomatoes\", \"color\": \"teal.6\"},\n    ],\n)\n```\n### Stroke width\nUse `strokeWidth` prop to control the stroke width of all areas:\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ndmc.LineChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    series=[\n        {\"name\": \"Apples\", \"color\": \"indigo.6\"},\n        {\"name\": \"Oranges\", \"color\": \"blue.6\"},\n        {\"name\": \"Tomatoes\", \"color\": \"teal.6\"}\n    ],\n    strokeWidth=2,\n)\n\n```\n\n### Sync multiple LineCharts\nYou can pass props down to recharts LineChart component with `lineChartProps` prop. For example, setting the following \nwill sync tooltip of multiple `LineChart` components with the same `syncId` prop.\n\n```python\nlineChartProps={\"syncId\": \"any-id\"}\n```\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.Stack(\n    [\n        dmc.Text(\"Apples sales:\"),\n        dmc.LineChart(\n            h=180,\n            dataKey=\"date\",\n            data=data,\n            series=[{\"name\": \"Apples\", \"color\": \"indigo.6\"}],\n            lineChartProps={\"syncId\": \"groceries\"},\n        ),\n        dmc.Text(\"Tomatoes sales\"),\n        dmc.LineChart(\n            h=180,\n            dataKey=\"date\",\n            data=data,\n            series=[{\"name\": \"Tomatoes\", \"color\": \"teal.6\"}],\n            lineChartProps={\"syncId\": \"groceries\"},\n        ),\n    ]\n)\n```\n### Vertical orientation\nSet orientation=\"vertical\" to render a vertical area chart:\n\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.LineChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    orientation=\"vertical\",\n    series=[\n        {\"name\": \"Apples\", \"color\": \"indigo.6\"},\n        {\"name\": \"Oranges\", \"color\": \"blue.6\"},\n        {\"name\": \"Tomatoes\", \"color\": \"teal.6\"},\n    ],\n)\n```\n### Dashed area line\nSet `strokeDasharray` property in series to change line style to dashed:\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.LineChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    strokeWidth=1,\n    dotProps={\"r\": 2},\n    activeDotProps={\"r\": 3, \"strokeWidth\": 1},\n    series=[\n        {\"name\": \"Apples\", \"color\": \"indigo.6\"},\n        {\"name\": \"Oranges\", \"color\": \"blue.6\"},\n        {\"name\": \"Tomatoes\", \"color\": \"teal.6\", \"strokeDasharray\": \"5 5\"},\n    ],\n)\n```\n### Reference lines\nUse `referenceLines` prop to render reference lines. Reference lines are always rendered behind the chart.\n\n```python\nimport dash_mantine_components as dmc\n\ndata = [\n    {\"date\": \"Mar 22\", \"Apples\": 50},\n    {\"date\": \"Mar 23\", \"Apples\": 60},\n    {\"date\": \"Mar 24\", \"Apples\": 40},\n    {\"date\": \"Mar 25\", \"Apples\": 30},\n    {\"date\": \"Mar 26\", \"Apples\": 0},\n    {\"date\": \"Mar 27\", \"Apples\": 20},\n    {\"date\": \"Mar 28\", \"Apples\": 20},\n    {\"date\": \"Mar 29\", \"Apples\": 10},\n]\n\n\ncomponent = dmc.LineChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    yAxisProps={\"domain\": [0, 100]},\n    referenceLines=[\n        {\"y\": 40, \"label\": \"Average sales\", \"color\": \"red.6\"},\n        {\"x\": \"Mar 25\", \"label\": \"Report out\"},\n    ],\n    series=[{\"name\": \"Apples\", \"color\": \"indigo.6\"}],\n)\n```\n### clickData\nUse the `clickData` property in a callback to retrieve data from the most recent click event.\nTo get the name of the clicked series, use the `clickSeriesName` property.\n\nNote: To enable `clickSeriesName` when clicking on the dots,  set `withTooltip=True`.\n\n```python\nfrom dash import callback, Input, Output\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.Group(\n    [\n        dmc.LineChart(\n            id=\"figure-linechart\",\n            h=300,\n            dataKey=\"date\",\n            data=data,\n            withLegend=True,\n            series=[\n                {\"name\": \"Apples\", \"color\": \"indigo.6\"},\n                {\"name\": \"Oranges\", \"color\": \"blue.6\"},\n                {\"name\": \"Tomatoes\", \"color\": \"teal.6\"},\n            ],\n            activeDotProps={\"r\": 8, \"strokeWidth\": 1, \"fill\": \"#fff\"},\n            strokeWidth=4\n        ),\n        dmc.Text(id=\"clickdata-linechart1\"),\n        dmc.Text(id=\"clickdata-linechart2\"),\n    ]\n)\n\n\n\n@callback(\n    Output(\"clickdata-linechart1\", \"children\"),\n    Output(\"clickdata-linechart2\", \"children\"),\n    Input(\"figure-linechart\", \"clickData\"),\n    Input(\"figure-linechart\", \"clickSeriesName\"),\n)\ndef update(data, name):\n    return f\"clickData:  {data}\", f\"clickSeriesName: {name}\"\n```\n### hoverData\nUse the `hoverData` property in a callback to retrieve data from the most recent hover event.\nTo get the name of the hovered series, use the `hoverSeriesName` property.\n\nNote: To enable `hoverSeriesName` when hovering on the dots,  set `withTooltip=True`.\n\n```python\nfrom dash import callback, Input, Output\nimport dash_mantine_components as dmc\nfrom .data import data\n\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.Group(\n    [\n        dmc.LineChart(\n            id=\"figure-linechart-hover\",\n            h=300,\n            dataKey=\"date\",\n            data=data,\n            series=[\n                {\"name\": \"Apples\", \"color\": \"indigo.6\"},\n                {\"name\": \"Oranges\", \"color\": \"blue.6\"},\n                {\"name\": \"Tomatoes\", \"color\": \"teal.6\"},\n            ],\n            activeDotProps={\"r\": 8, \"strokeWidth\": 1, \"fill\": \"#fff\"},\n            strokeWidth=4\n        ),\n        dmc.Text(id=\"hoverdata-linechart1\"),\n        dmc.Text(id=\"hoverdata-linechart2\"),\n    ]\n)\n\n\n@callback(\n    Output(\"hoverdata-linechart1\", \"children\"),\n    Output(\"hoverdata-linechart2\", \"children\"),\n    Input(\"figure-linechart-hover\", \"hoverData\"),\n    Input(\"figure-linechart-hover\", \"hoverSeriesName\"),\n)\ndef update(data, name):\n    return f\"hoverData:  {data}\", f\"hoverSeriesName: {name}\"\n```\n### highlightHover\n\nSet `highlightHover=True` to highlight the series when hovered, mirroring the behavior of hovering over chart legend items.\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.LineChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    series=[\n        {\"name\": \"Apples\", \"color\": \"indigo.6\"},\n        {\"name\": \"Oranges\", \"color\": \"blue.6\"},\n        {\"name\": \"Tomatoes\", \"color\": \"teal.6\"},\n    ],\n    withLegend=True,\n    highlightHover=True,\n    withTooltip=False,\n    strokeWidth=4\n)\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n#### LineChart selectors\n\n| Selector         | Static selector                    | Description                                      |\n|:-----------------|:----------------------------------|:-------------------------------------------------|\n| root             | .mantine-LineChart-root           | Root element                                    |\n| line             | .mantine-LineChart-line           | Line of the chart                               |\n| axis             | .mantine-LineChart-axis           | X and Y axis of the chart                       |\n| container        | .mantine-LineChart-container      | Recharts ResponsiveContainer component          |\n| grid             | .mantine-LineChart-grid           | Recharts CartesianGrid component                |\n| legend           | .mantine-LineChart-legend         | Legend root element                             |\n| legendItem       | .mantine-LineChart-legendItem     | Legend item representing data series            |\n| legendItemColor  | .mantine-LineChart-legendItemColor| Legend item color                               |\n| legendItemName   | .mantine-LineChart-legendItemName | Legend item name                                |\n| tooltip          | .mantine-LineChart-tooltip        | Tooltip root element                            |\n| tooltipBody      | .mantine-LineChart-tooltipBody    | Tooltip wrapper around all items                |\n| tooltipItem      | .mantine-LineChart-tooltipItem    | Tooltip item representing data series           |\n| tooltipItemBody  | .mantine-LineChart-tooltipItemBody| Tooltip item wrapper around item color and name|\n| tooltipItemColor | .mantine-LineChart-tooltipItemColor| Tooltip item color                             |\n| tooltipItemName  | .mantine-LineChart-tooltipItemName | Tooltip item name                              |\n| tooltipItemData  | .mantine-LineChart-tooltipItemData | Tooltip item data                              |\n| tooltipLabel     | .mantine-LineChart-tooltipLabel   | Label of the tooltip                            |\n| referenceLine    | .mantine-LineChart-referenceLine  | Reference line                                  |\n| axisLabel        | .mantine-LineChart-axisLabel      | X and Y axis labels                             |\n\n\n#### LineChart CSS variables\n\n| Selector         | Variable             | Description                                      |\n|:-----------------|:---------------------|:-------------------------------------------------|\n| root             | --chart-grid-color   | Controls color of the grid and cursor lines      |\n|                  | --chart-text-color   | Controls color of the axis labels                |\n\n\n\n### Keyword Arguments\n#### LineChart\n\n- children (a list of or a singular dash component, string or number; optional):\n    Additional components that are rendered inside recharts\n    `AreaChart` component.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- activeDotProps (boolean | number | string | dict | list; optional):\n    Props passed down to all active dots. Ignored if\n    `withDots={False}` is set.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- clickData (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Click data.\n\n- clickSeriesName (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Name of the series that was clicked.\n\n- connectNulls (boolean; optional):\n    Determines whether points with `None` values should be connected,\n    `True` by default.\n\n- curveType (a value equal to: 'bump', 'linear', 'natural', 'monotone', 'step', 'stepBefore', 'stepAfter'; optional):\n    Type of the curve, `'monotone'` by default.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data (list of dicts with strings as keys and values of type boolean | number | string | dict | list; required):\n    Data used to display chart.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- dataKey (string; required):\n    Key of the `data` object for x-axis values.\n\n- dotProps (boolean | number | string | dict | list; optional):\n    Props passed down to all dots. Ignored if `withDots={False}` is\n    set.\n\n- fillOpacity (number; optional):\n    Controls fill opacity of all lines, `1` by default.\n\n- gradientStops (list of dicts; optional):\n    Data used to generate gradient stops, [{ offset: 0, color: 'red'\n    }, { offset: 100, color: 'blue' }] by default.\n\n    `gradientStops` is a list of dicts with keys:\n\n- gridAxis (a value equal to: 'none', 'x', 'y', 'xy'; optional):\n    Specifies which lines should be displayed in the grid, `'x'` by\n    default.\n\n- gridColor (optional):\n    Color of the grid and cursor lines, by default depends on color\n    scheme.\n\n- gridProps (dict; optional):\n    Props passed down to the `CartesianGrid` component.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- highlightHover (boolean; optional):\n    Determines whether a hovered series is highlighted. False by\n    default. Mirrors the behaviour when hovering about chart legend\n    items.\n\n- hoverData (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Hover data.\n\n- hoverSeriesName (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Name of the series that is hovered.\n\n- legendProps (dict; optional):\n    Props passed down to the `Legend` component.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- lineChartProps (boolean | number | string | dict | list; optional):\n    Props passed down to recharts `LineChart` component.\n\n- lineProps (boolean | number | string | dict | list; optional):\n    Props passed down to recharts `Line` component.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- orientation (a value equal to: 'horizontal', 'vertical'; optional):\n    Chart orientation, `'horizontal'` by default.\n\n- referenceLines (list of dicts; optional):\n    Reference lines that should be displayed on the chart.\n\n- rightYAxisLabel (boolean | number | string | dict | list; optional):\n    Props passed down to the YAxis recharts component rendered on the\n    right side.\n\n- rightYAxisProps (boolean | number | string | dict | list; optional):\n    Props passed down to the YAxis recharts component rendered on the\n    right side.\n\n- series (list of dicts; required):\n    An array of objects with `name` and `color` keys. Determines which\n    data should be consumed from the `data` array.\n\n    `series` is a list of dicts with keys:\n\n- strokeDasharray (string | number; optional):\n    Dash array for the grid lines and cursor, `'5 5'` by default.\n\n- strokeWidth (number; optional):\n    Stroke width for the chart lines, `2` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- textColor (optional):\n    Color of the text displayed inside the chart, `'dimmed'` by\n    default.\n\n- tickLine (a value equal to: 'none', 'x', 'y', 'xy'; optional):\n    Specifies which axis should have tick line, `'y'` by default.\n\n- tooltipAnimationDuration (number; optional):\n    Tooltip position animation duration in ms, `0` by default.\n\n- tooltipProps (dict; optional):\n    Props passed down to the `Tooltip` component.\n\n- type (a value equal to: 'default', 'gradient'; optional):\n    Controls styles of the line 'default' | 'gradient'.   'default' by\n    default.\n\n- unit (string; optional):\n    Unit displayed next to each tick in y-axis.\n\n- valueFormatter (boolean | number | string | dict | list; optional):\n    A function to format values on Y axis and inside the tooltip. See\n    https://www.dash-mantine-components.com/functions-as-props.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withDots (boolean; optional):\n    Determines whether dots should be displayed, `True` by default.\n\n- withLegend (boolean; optional):\n    Determines whether chart legend should be displayed, `False` by\n    default.\n\n- withPointLabels (boolean; optional):\n    Determines whether each point should have associated label, False\n    by default.\n\n- withRightYAxis (boolean; optional):\n    Determines whether additional y-axis should be displayed on the\n    right side of the chart, False by default.\n\n- withTooltip (boolean; optional):\n    Determines whether chart tooltip should be displayed, `True` by\n    default.\n\n- withXAxis (boolean; optional):\n    Determines whether x-axis should be hidden, `True` by default.\n\n- withYAxis (boolean; optional):\n    Determines whether y-axis should be hidden, `True` by default.\n\n- xAxisLabel (string; optional):\n    A label to display below the x-axis.\n\n- xAxisProps (dict; optional):\n    Props passed down to the `XAxis` recharts component.\n\n- yAxisLabel (string; optional):\n    A label to display next to the y-axis.\n\n- yAxisProps (dict; optional):\n    Props passed down to the `YAxis` recharts component."
  },
  {
    "name": "PieChart",
    "description": "Pie chart component",
    "endpoint": "/components/piechart",
    "package": "dash_mantine_components",
    "category": "Charts",
    "content": "\n\n## PieChart  \nPie chart component  \nCategory: Charts  \n\n### Introduction\n\nPieChart is based on [PieChart recharts](https://recharts.org/en-US/api/PieChart) component:\n\n### Usage\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.PieChart(data=data)\n```\n### Data\nHere is the data imported for the examples on this page:\n\n```python\n\ndata = [\n  { \"name\": \"USA\", \"value\": 400, \"color\": \"indigo.6\" },\n  { \"name\": \"India\", \"value\": 300, \"color\": \"yellow.6\" },\n  { \"name\": \"Japan\", \"value\": 100, \"color\": \"teal.6\" },\n  { \"name\": \"Other\", \"value\": 200, \"color\": \"gray.6\" }\n]\n```\n\n### Segment labels\n\nSet `withLabels` prop to display labels next to each segment. Use `labelPosition` prop to control the position of labels\nrelative to the corresponding segment. Note that if your chart has a lot of segments and labelPosition=\"inside\" is\nset, labels might overlap. In this case, use labelPosition=\"outside\".\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ndmc.PieChart(\n    data=data,\n    withLabelsLine=True,\n    labelsPosition=\"inside\",\n    labelsType=\"percent\",\n    withLabels=True,\n)\n```\n\n### Size\n\nSet `size` prop to control width and height of the chart. Note that if `withLabels` and labelPosition=\"outside\" prop\nare set, the chart height is automatically increased by 80px to make room for labels. You can override this behavior\nby setting `h` and `w` style prop.\n\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ndmc.PieChart(\n    data=data,\n    size=275  \n)\n```\n### Segment color\n\nYou can reference colors from theme the same way as in other components, for example, `blue`, `red.5`, `orange.7`, etc. \nAny valid CSS color value is also accepted.\n\n```python\nimport dash_mantine_components as dmc\n\ndata = [\n    {\"name\": \"USA\", \"value\": 400, \"color\": \"blue\"},\n    {\"name\": \"Other\", \"value\": 200, \"color\": \"gray.6\"},\n]\n\ncomponent = dmc.PieChart(data=data)\n```\n### Enable Tooltip\n\nTo enable the tooltip, set `withTooltip` prop:\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.PieChart(data=data, withTooltip=True)\n```\n### Tooltip data source\n\nBy default, the tooltip displays data for all segments when hovered over any segment. To display data only for the hovered segment, set tooltipDataSource=\"segment\":\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html\nfrom .data import data\n\ncomponent = dmc.Group(\n    [\n        html.Div(\n            [\n                dmc.Text(\n                    \"Data only for hovered segment\", fz=\"xs\", mb=\"sm\", ta=\"center\"\n                ),\n                dmc.PieChart(\n                    data=data,\n                    withTooltip=True,\n                    tooltipDataSource=\"segment\",\n                    mx=\"auto\",\n                ),\n            ]\n        ),\n        html.Div(\n            [\n                dmc.Text(\"Data only for all segments\", fz=\"xs\", mb=\"sm\", ta=\"center\"),\n                dmc.PieChart(\n                    data=data,\n                    withTooltip=True,\n                    mx=\"auto\",\n                ),\n            ]\n        ),\n    ],\n    gap=50,\n)\n```\n### Start and end angle\n\nUse `startAngle` and `endAngle` props to control the start and end angle of the chart. For example, to display a\nhalf-circle chart, set `startAngle=180` and `endAngle=0`:\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.PieChart(data=data, startAngle=180, endAngle=0)\n```\n### Segments stroke\n\nUse `strokeWidth` prop to control the width of the stroke around each segment.\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ndmc.PieChart(\n    data=data,\n    strokeWidth=1\n)\n```\n\nTo change color of the stroke, use `strokeColor` prop. You can reference colors from theme the same way as in other\ncomponents, for example, `blue`, `red.5`, `orange.7`, etc. Any valid CSS color value is also accepted.\n\n```python\ndmc.PieChart(\n    data=data,\n    strokeWidth=1.8,\n    strokeColor=\"red.5\"\n)\n```\n\nBy default, segments stroke color is the same as the background color of the body element\n(`--mantine-color-body` CSS variable). If you want to change it depending on the color scheme, define CSS variable\nand pass it to the `strokeColor` prop:\n\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.PieChart(data=data, strokeColor=\"var(--card-bg)\")\n```\n```css\n.root {\n  --card-bg: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));\n\n  background-color: var(--card-bg);\n  padding: var(--mantine-spacing-md);\n  border-radius: var(--mantine-radius-md);\n}\n\n```\n\n\n\n### Pie animation\nBy default, the Recharts data animation is disabled. To enable and customize the animation, use `pieProps` to pass properties to the Recharts `Pie` component.\n\n\n```python\nfrom random import randint\nimport dash_mantine_components as dmc\nfrom dash import callback, Input, Output\n\n\ndef get_data(values):\n    return [\n        {\"name\": \"A\", \"value\": values[0], \"color\": \"indigo.6\"},\n        {\"name\": \"B\", \"value\": values[1], \"color\": \"yellow.6\"},\n        {\"name\": \"C\", \"value\": values[2], \"color\": \"teal.6\"},\n        {\"name\": \"C\", \"value\": values[3], \"color\": \"gray.6\"},\n    ]\n\n\ncomponent = dmc.Box(\n    [\n        dmc.Button(\"Update Chart\", id=\"btn-piechart-animation\", n_clicks=0, mb=\"md\"),\n        dmc.PieChart(\n            id=\"piechart-animation\",\n            data=get_data([100, 0, 0, 0]),\n            pieProps={\"isAnimationActive\": True},\n        ),\n    ]\n)\n\n\n@callback(\n    Output(\"piechart-animation\", \"data\"), Input(\"btn-piechart-animation\", \"n_clicks\")\n)\ndef update(n):\n    if n % 2 == 0:\n        return get_data([400, 300, 600, 100])\n    return get_data([100, 0, 0, 0])\n```\n### clickData\nUse the `clickData` property in a callback to retrieve data from the most recent click event. To get the name of the\nclicked series, use the `clickSeriesName` property.\n```python\nfrom dash import callback, Input, Output\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.Stack(\n    [\n        dmc.PieChart(\n            id=\"figure-piechart\",\n            data=data,\n        ),\n        dmc.Text(id=\"clickdata-piechart1\"),\n        dmc.Text(id=\"clickdata-piechart2\"),\n    ]\n)\n\n\n@callback(\n    Output(\"clickdata-piechart1\", \"children\"),\n    Output(\"clickdata-piechart2\", \"children\"),\n    Input(\"figure-piechart\", \"clickData\"),\n    Input(\"figure-piechart\", \"clickSeriesName\"),\n)\ndef update(data, name):\n    return f\"clickData:  {data}\", f\"clickSeriesName: {name}\"\n```\n### hoverData\nUse the `hoverData` property in a callback to retrieve data from the most recent hover event. To get the name of the \nhovered series, use the `hoverSeriesName` property.\n\n```python\nfrom dash import callback, Input, Output\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.Stack(\n    [\n        dmc.PieChart(\n            id=\"figure-piechart-hover\",\n            data=data,\n        ),\n        dmc.Text(id=\"hoverdata-piechart1\"),\n        dmc.Text(id=\"hoverdata-piechart2\"),\n    ]\n)\n\n\n@callback(\n    Output(\"hoverdata-piechart1\", \"children\"),\n    Output(\"hoverdata-piechart2\", \"children\"),\n    Input(\"figure-piechart-hover\", \"hoverData\"),\n    Input(\"figure-piechart-hover\", \"hoverSeriesName\"),\n)\ndef update(data, name):\n    return f\"hoverData:  {data}\", f\"hoverSeriesName: {name}\"\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n#### PieChart selectors\n\n| Selector    | Static selector           | Description                             |\n|:------------|:--------------------------|:----------------------------------------|\n| root        | .mantine-PieChart-root    | Root element                            |\n\n\n#### PieChart CSS variables\n\n| Selector         | Variable               | Description                              |\n|:-----------------|:-----------------------|:-----------------------------------------|\n| root             | --chart-labels-color   | Controls color of the chart labels       |\n|                  | --chart-size           | Controls size of the chart               |\n|                  | --chart-stroke-color   | Controls color of the chart stroke       |\n\n\n### Keyword Arguments\n#### PieChart\n\n- children (a list of or a singular dash component, string or number; optional):\n    Additional elements rendered inside `PieChart` component.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- clickData (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Click data.\n\n- clickSeriesName (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Name of the series that was clicked.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data (list of dicts; required):\n    Data used to render chart.\n\n    `data` is a list of dicts with keys:\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- endAngle (number; optional):\n    Controls angle at which charts ends, `360` by default. Set to `0`\n    to render the chart as semicircle.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- hoverData (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Hover data.\n\n- hoverSeriesName (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Name of the series that is hovered.\n\n- labelColor (optional):\n    Controls text color of all labels, white by default.\n\n- labelsPosition (a value equal to: 'inside', 'outside'; optional):\n    Controls labels position relative to the segment, `'outside'` by\n    default.\n\n- labelsType (a value equal to: 'percent', 'value'; optional):\n    Type of labels to display, `'value'` by default.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- paddingAngle (number; optional):\n    Controls padding between segments, `0` by default.\n\n- pieChartProps (dict; optional):\n    Props passed down to recharts `PieChart` component.\n\n- pieProps (boolean | number | string | dict | list; optional):\n    Props passed down to recharts `Pie` component.\n\n- size (number; optional):\n    Controls chart width and height, height is increased by 40 if\n    `withLabels` prop is set. Cannot be less than `thickness`. `80` by\n    default.\n\n- startAngle (number; optional):\n    Controls angle at which chart starts, `0` by default. Set to `180`\n    to render the chart as semicircle.\n\n- strokeColor (optional):\n    Controls color of the segments stroke, by default depends on color\n    scheme.\n\n- strokeWidth (number; optional):\n    Controls width of segments stroke, `1` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- tooltipAnimationDuration (number; optional):\n    Tooltip animation duration in ms, `0` by default.\n\n- tooltipDataSource (a value equal to: 'segment', 'all'; optional):\n    Determines which data is displayed in the tooltip. `'all'` –\n    display all values, `'segment'` – display only hovered segment.\n    `'all'` by default.\n\n- tooltipProps (boolean | number | string | dict | list; optional):\n    Props passed down to `Tooltip` recharts component.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withLabels (boolean; optional):\n    Determines whether each segment should have associated label,\n    `False` by default.\n\n- withLabelsLine (boolean; optional):\n    Determines whether segments labels should have lines that connect\n    the segment with the label, `True` by default.\n\n- withTooltip (boolean; optional):\n    Determines whether the tooltip should be displayed when one of the\n    section is hovered, `True` by default."
  },
  {
    "name": "RadarChart",
    "description": "Radar chart component",
    "endpoint": "/components/radarchart",
    "package": "dash_mantine_components",
    "category": "Charts",
    "content": "\n\n## RadarChart  \nRadar chart component  \nCategory: Charts  \n\n### Usage\n\nRadarChart is based on recharts [RadarChart](https://recharts.org/en-US/api/RadarChart) component:\n\n```python\nimport dash_mantine_components as dmc\n\ndata = [\n    {\"product\": \"Apples\", \"sales\": 120},\n    {\"product\": \"Oranges\", \"sales\": 98},\n    {\"product\": \"Tomatoes\", \"sales\": 86},\n    {\"product\": \"Grapes\", \"sales\": 99},\n    {\"product\": \"Bananas\", \"sales\": 85},\n    {\"product\": \"Lemons\", \"sales\": 65},\n]\n\n\ncomponent = dmc.RadarChart(\n    h=300,\n    data=data,\n    dataKey=\"product\",\n    withPolarRadiusAxis=True,\n    series=[{\"name\": \"sales\", \"color\": \"blue.4\", \"opacity\": 0.2}],\n)\n```\n### Multiple series \n\nYou can display multiple series on the same radar chart:\n\n```python\nimport dash_mantine_components as dmc\n\ndata = [\n    {\"product\": \"Apples\", \"sales_january\": 120, \"sales_february\": 100},\n    {\"product\": \"Oranges\", \"sales_january\": 98, \"sales_february\": 90},\n    {\"product\": \"Tomatoes\", \"sales_january\": 86, \"sales_february\": 70},\n    {\"product\": \"Grapes\", \"sales_january\": 99, \"sales_february\": 80},\n    {\"product\": \"Bananas\", \"sales_january\": 85, \"sales_february\": 120},\n    {\"product\": \"Lemons\", \"sales_january\": 65, \"sales_february\": 150},\n]\n\ncomponent = dmc.RadarChart(\n    h=300,\n    data=data,\n    dataKey=\"product\",\n    withPolarRadiusAxis=True,\n    series=[\n        {\"name\": \"sales_january\", \"color\": \"lime.4\", \"opacity\": 0.1},\n        {\"name\": \"sales_february\", \"color\": \"cyan.4\", \"opacity\": 0.1},\n    ],\n)\n```\n### Change Color\n\nYou can reference colors from theme the same way as in other components, for example, `blue`, `red.5`, `orange.7`, etc. Any valid CSS color value is also accepted.\n\n```python\nimport dash_mantine_components as dmc\n\ndata = [\n    {\"product\": \"Apples\", \"sales\": 120},\n    {\"product\": \"Oranges\", \"sales\": 98},\n    {\"product\": \"Tomatoes\", \"sales\": 86},\n    {\"product\": \"Grapes\", \"sales\": 99},\n    {\"product\": \"Bananas\", \"sales\": 85},\n    {\"product\": \"Lemons\", \"sales\": 65},\n]\n\ncomponent = dmc.RadarChart(\n    h=300,\n    data=data,\n    dataKey=\"product\",\n    series=[{\"name\": \"sales\", \"color\": \"green\", \"strokeColor\": \"blue\"}],\n)\n```\n### Hide/show chart parts\n\n\n```python\nimport dash_mantine_components as dmc\n\ndata = [\n  {\"product\": \"Apples\", \"sales_january\": 120, \"sales_february\": 100},\n  {\"product\": \"Oranges\", \"sales_january\": 98, \"sales_february\": 90},\n  {\"product\": \"Tomatoes\", \"sales_january\": 86, \"sales_february\": 70},\n  {\"product\": \"Grapes\", \"sales_january\": 99, \"sales_february\": 80},\n  {\"product\": \"Bananas\", \"sales_january\": 85, \"sales_february\": 120},\n  {\"product\": \"Lemons\", \"sales_january\": 65, \"sales_february\": 150}\n]\n\ncomponent = dmc.RadarChart(\n    h=300,\n    data=data,    dataKey=\"product\",\n\n    series=[\n      {\"name\": \"sales_january\", \"color\": \"lime.4\", \"opacity\": 0.1},\n      {\"name\": \"sales_february\", \"color\": \"cyan.4\", \"opacity\": 0.1}\n    ],\n    withPolarGrid=True,\n    withPolarAngleAxis=False,\n    withPolarRadiusAxis=True,\n)\n\n\n```\n\n\n### Rechart props\n\nTo pass props down to the underlying recharts components, use the following props:\n- `radarProps` passed props to [RadarChart](https://recharts.org/en-US/api/RadarChart) component\n- `radarChartProps` passed props to [RadarChart](https://recharts.org/en-US/api/RadarChart) component\n- `polarGridProps` passed props to [PolarGrid](https://recharts.org/en-US/api/PolarGrid) component\n- `polarAngleAxisProps` passed props to [PolarAngleAxis](https://recharts.org/en-US/api/PolarAngleAxis) component\n- `polarRadiusAxisProps` passed props to [PolarRadiusAxis](https://recharts.org/en-US/api/PolarRadiusAxis) component\n\nExample of passing props down to PolarRadiusAxis component:\n\n```python\nimport dash_mantine_components as dmc\n\n\ndata = [\n    {\"product\": \"Apples\", \"sales_january\": 120, \"sales_february\": 100},\n    {\"product\": \"Oranges\", \"sales_january\": 98, \"sales_february\": 90},\n    {\"product\": \"Tomatoes\", \"sales_january\": 86, \"sales_february\": 70},\n    {\"product\": \"Grapes\", \"sales_january\": 99, \"sales_february\": 80},\n    {\"product\": \"Bananas\", \"sales_january\": 85, \"sales_february\": 120},\n    {\"product\": \"Lemons\", \"sales_january\": 65, \"sales_february\": 150},\n]\n\ncomponent = dmc.RadarChart(\n    h=300,\n    data=data,\n    dataKey=\"product\",\n    withPolarRadiusAxis=True,\n    polarRadiusAxisProps={\"angle\": 30},\n    series=[\n        {\"name\": \"sales_january\", \"color\": \"lime.4\", \"opacity\": 0.1},\n        {\"name\": \"sales_february\", \"color\": \"cyan.4\", \"opacity\": 0.1},\n    ],\n)\n```\n### Radar animation\nBy default, the Recharts data animation is disabled. To enable and customize the animation, use `radarProps` to pass properties to the Recharts `Radar` component.\n\n\n```python\nfrom random import randint\nimport dash_mantine_components as dmc\nfrom dash import callback, Input, Output\n\ncomponent = dmc.Box(\n    [\n        dmc.Button(\"Update Chart\", id=\"btn-radarchart-animation\"),\n        dmc.RadarChart(\n            id=\"radarchart-animation\",\n            h=300,\n            data=[{}],\n            dataKey=\"product\",\n            withPolarRadiusAxis=True,\n            radarProps={\n                \"isAnimationActive\": True,\n            },\n            series=[{\"name\": \"sales\", \"color\": \"blue.4\", \"opacity\": 0.2}],\n        ),\n    ]\n)\n\n\n@callback(\n    Output(\"radarchart-animation\", \"data\"),\n    Input(\"btn-radarchart-animation\", \"n_clicks\"),\n)\ndef update(n):\n    return [\n        {\"product\": \"Apples\", \"sales\": randint(20, 100)},\n        {\"product\": \"Oranges\", \"sales\": randint(20, 100)},\n        {\"product\": \"Tomatoes\", \"sales\": randint(20, 100)},\n        {\"product\": \"Grapes\", \"sales\": randint(20, 100)},\n        {\"product\": \"Bananas\", \"sales\": randint(20, 100)},\n        {\"product\": \"Lemons\", \"sales\": randint(20, 100)},\n    ]\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n#### RadarChart selectors\n\n| Selector    | Static selector               | Description                                      |\n|:------------|:------------------------------|:-------------------------------------------------|\n| root        | .mantine-RadarChart-root      | Root element                                    |\n| container   | .mantine-RadarChart-container | Recharts ResponsiveContainer component          |\n\n\n#### RadarChart CSS variables\n\n| Selector         | Variable             | Description                                   |\n|:-----------------|:---------------------|:----------------------------------------------|\n| root             | --chart-grid-color   | Controls color of the chart grid              |\n|                  | --chart-text-color   | Controls color of all text elements in the chart|\n\n\n\n### Keyword Arguments\n#### RadarChart\n\n- children (a list of or a singular dash component, string or number; optional):\n    Additional components that are rendered inside recharts\n    `RadarChart` component.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- clickData (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Click data.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data (list of dicts with strings as keys and values of type boolean | number | string | dict | list; required):\n    Data used in the chart.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- dataKey (string; required):\n    Key of the `data` object for axis values.\n\n- gridColor (optional):\n    Controls color of the grid lines. By default, color depends on the\n    color scheme.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- legendProps (dict; optional):\n    Props passed down to recharts Legend component.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- polarAngleAxisProps (dict; optional):\n    Props passed down to recharts PolarAngleAxis component.\n\n- polarGridProps (dict; optional):\n    Props passed down to recharts PolarGrid component.\n\n- polarRadiusAxisProps (dict; optional):\n    Props passed down to recharts PolarRadiusAxis component.\n\n- radarChartProps (dict; optional):\n    Props passed down to recharts RadarChart component.\n\n- radarProps (boolean | number | string | dict | list; optional):\n    Props passed down to recharts Radar component in a dict.\n\n- series (list of dicts; required):\n    Determines which data should be consumed from the `data` array.\n\n    `series` is a list of dicts with keys:\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- textColor (optional):\n    Controls color of all text elements. By default, color depends on\n    the color scheme.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withLegend (boolean; optional):\n    Determines whether chart legend should be displayed, `False` by\n    default.\n\n- withPolarAngleAxis (boolean; optional):\n    Determines whether PolarAngleAxis component should be displayed,\n    `True` by default.\n\n- withPolarGrid (boolean; optional):\n    Determines whether PolarGrid component should be displayed, `True`\n    by default.\n\n- withPolarRadiusAxis (boolean; optional):\n    Determines whether PolarRadiusAxisProps component should be\n    displayed, `False` by default."
  },
  {
    "name": "ScatterChart",
    "description": "Scatter chart component",
    "endpoint": "/components/scatterchart",
    "package": "dash_mantine_components",
    "category": "Charts",
    "content": "\n\n## ScatterChart  \nScatter chart component  \nCategory: Charts  \n\n### Usage\n\nScaltterChart is based on recharts [ScatterChart](https://recharts.org/en-US/api/ScatterChart) component:\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data1\n\ncomponent = dmc.ScatterChart(\n    h=300,\n    data=data1,\n    dataKey={\"x\": \"age\", \"y\": \"BMI\"},\n    xAxisLabel=\"Age\",\n    yAxisLabel=\"BMI\",\n)\n```\n### Data\n\nThere are two datasets imported on this page.  A single series `data1` and a multiple series `data2`:\n\n```python\n\ndata1 = [\n    {\n        \"color\": \"blue.5\",\n        \"name\": \"Group 1\",\n        \"data\": [\n            {\"age\": 25, \"BMI\": 20},\n            {\"age\": 30, \"BMI\": 22},\n            {\"age\": 35, \"BMI\": 18},\n            {\"age\": 40, \"BMI\": 25},\n            {\"age\": 45, \"BMI\": 30},\n            {\"age\": 28, \"BMI\": 15},\n            {\"age\": 22, \"BMI\": 12},\n            {\"age\": 50, \"BMI\": 28},\n            {\"age\": 32, \"BMI\": 19},\n            {\"age\": 48, \"BMI\": 31},\n            {\"age\": 26, \"BMI\": 24},\n            {\"age\": 38, \"BMI\": 27},\n            {\"age\": 42, \"BMI\": 29},\n            {\"age\": 29, \"BMI\": 16},\n            {\"age\": 34, \"BMI\": 23},\n            {\"age\": 44, \"BMI\": 33},\n            {\"age\": 23, \"BMI\": 14},\n            {\"age\": 37, \"BMI\": 26},\n            {\"age\": 49, \"BMI\": 34},\n            {\"age\": 27, \"BMI\": 17},\n            {\"age\": 41, \"BMI\": 32},\n            {\"age\": 31, \"BMI\": 21},\n            {\"age\": 46, \"BMI\": 35},\n            {\"age\": 24, \"BMI\": 13},\n            {\"age\": 33, \"BMI\": 22},\n            {\"age\": 39, \"BMI\": 28},\n            {\"age\": 47, \"BMI\": 30},\n            {\"age\": 36, \"BMI\": 25},\n            {\"age\": 43, \"BMI\": 29},\n            {\"age\": 21, \"BMI\": 11}\n        ]\n    }\n]\n\n```\n\n```python\n\ndata2 = [\n    {\n        \"color\": \"blue.5\",\n        \"name\": \"Group 1\",\n        \"data\": [\n            {\"age\": 25, \"BMI\": 20},\n            {\"age\": 30, \"BMI\": 22},\n            {\"age\": 35, \"BMI\": 18},\n            {\"age\": 40, \"BMI\": 25},\n            {\"age\": 45, \"BMI\": 30},\n            {\"age\": 28, \"BMI\": 15},\n            {\"age\": 22, \"BMI\": 12},\n            {\"age\": 50, \"BMI\": 28},\n            {\"age\": 32, \"BMI\": 19},\n            {\"age\": 48, \"BMI\": 31},\n            {\"age\": 26, \"BMI\": 24},\n            {\"age\": 38, \"BMI\": 27},\n            {\"age\": 42, \"BMI\": 29},\n            {\"age\": 29, \"BMI\": 16},\n            {\"age\": 34, \"BMI\": 23},\n            {\"age\": 44, \"BMI\": 33},\n            {\"age\": 23, \"BMI\": 14},\n            {\"age\": 37, \"BMI\": 26},\n            {\"age\": 49, \"BMI\": 34},\n            {\"age\": 27, \"BMI\": 17},\n            {\"age\": 41, \"BMI\": 32},\n            {\"age\": 31, \"BMI\": 21},\n            {\"age\": 46, \"BMI\": 35},\n            {\"age\": 24, \"BMI\": 13},\n            {\"age\": 33, \"BMI\": 22},\n            {\"age\": 39, \"BMI\": 28},\n            {\"age\": 47, \"BMI\": 30},\n            {\"age\": 36, \"BMI\": 25},\n            {\"age\": 43, \"BMI\": 29},\n            {\"age\": 21, \"BMI\": 11}\n        ]\n    },\n    {\n        \"color\": \"red.5\",\n        \"name\": \"Group 2\",\n        \"data\": [\n            {\"age\": 26, \"BMI\": 21},\n            {\"age\": 31, \"BMI\": 24},\n            {\"age\": 37, \"BMI\": 19},\n            {\"age\": 42, \"BMI\": 27},\n            {\"age\": 29, \"BMI\": 32},\n            {\"age\": 35, \"BMI\": 18},\n            {\"age\": 40, \"BMI\": 23},\n            {\"age\": 45, \"BMI\": 30},\n            {\"age\": 27, \"BMI\": 15},\n            {\"age\": 33, \"BMI\": 20},\n            {\"age\": 38, \"BMI\": 25},\n            {\"age\": 43, \"BMI\": 29},\n            {\"age\": 30, \"BMI\": 16},\n            {\"age\": 36, \"BMI\": 22},\n            {\"age\": 41, \"BMI\": 28},\n            {\"age\": 46, \"BMI\": 33},\n            {\"age\": 28, \"BMI\": 17},\n            {\"age\": 34, \"BMI\": 22},\n            {\"age\": 39, \"BMI\": 26},\n            {\"age\": 44, \"BMI\": 31},\n            {\"age\": 32, \"BMI\": 18},\n            {\"age\": 38, \"BMI\": 23},\n            {\"age\": 43, \"BMI\": 28},\n            {\"age\": 48, \"BMI\": 35},\n            {\"age\": 25, \"BMI\": 14},\n            {\"age\": 31, \"BMI\": 20},\n            {\"age\": 36, \"BMI\": 25},\n            {\"age\": 41, \"BMI\": 30},\n            {\"age\": 29, \"BMI\": 16}\n        ]\n    }\n]\n\n```\n\n### Multiple Series\n\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data2\n\ncomponent = dmc.ScatterChart(\n    h=300,\n    data=data2,\n    dataKey={\"x\": \"age\", \"y\": \"BMI\"},\n    xAxisLabel=\"Age\",\n    yAxisLabel=\"BMI\",\n)\n```\n### Legend\nTo display chart legend, set `withLegend` prop. When one of the items in the legend is hovered, the corresponding data\nseries is highlighted in the chart.\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data2\n\ncomponent = dmc.ScatterChart(\n    h=300,\n    data=data2,\n    dataKey={\"x\": \"age\", \"y\": \"BMI\"},\n    xAxisLabel=\"Age\",\n    yAxisLabel=\"BMI\",\n    withLegend=True,\n)\n```\n### Legend position\nYou can pass props down to recharts Legend component with `legendProps` prop. For example, setting the following will\nrender the legend at the bottom of the chart and set its height to 50px:\n```python\nlegendProps={'verticalAlign': 'bottom', 'height': 50} \n```\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data2\n\ncomponent = dmc.ScatterChart(\n    h=300,\n    data=data2,\n    dataKey={\"x\": \"age\", \"y\": \"BMI\"},\n    xAxisLabel=\"Age\",\n    yAxisLabel=\"BMI\",\n    withLegend=True,\n    legendProps={\"verticalAlign\": \"bottom\", \"height\": 20},\n)\n```\n### X and Y axis props\nUse `xAxisProps` and `yAxisProps` to pass props down to recharts `XAxis` and `YAxis` components. For example, these props can\nbe used to change orientation of axis:\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data1\n\ncomponent = dmc.ScatterChart(\n    h=300,\n    data=data1,\n    dataKey={\"x\": \"age\", \"y\": \"BMI\"},\n    tickLine=\"xy\",\n    yAxisProps={\"tickMargin\": 15, \"orientation\": \"right\"},\n    xAxisProps={\"tickMargin\": 15, \"orientation\": \"top\"},\n)\n```\n### Point labels\nSet `pointLabels` prop to `x` or `y` to display labels on data points for the corresponding axis:\n\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data1\n\ncomponent = dmc.ScatterChart(\n    h=300,\n    data=data1,\n    dataKey={\"x\": \"age\", \"y\": \"BMI\"},\n    tickLine=\"xy\",\n    xAxisLabel=\"Age\",\n    yAxisLabel=\"BMI\",\n    pointLabels=\"x\",\n)\n```\n### Stroke dash array\nSet `strokeDasharray` prop to control the stroke dash array of the grid and cursor lines. The value represent the\nlengths of alternating dashes and gaps. For example, strokeDasharray=\"10 5\" will render a dashed line with 10px dashes\nand 5px gaps.\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data1\n\ncomponent = dmc.ScatterChart(\n    h=300,\n    data=data1,\n    dataKey={\"x\": \"age\", \"y\": \"BMI\"},\n    xAxisLabel=\"Age\",\n    yAxisLabel=\"BMI\",\n    strokeDasharray=\"15, 15\",\n)\n```\n### Grid and text colors\nUse `--chart-grid-color` and `--chart-text-color` to change colors of grid lines and text within the chart. \nWith CSS , you can change colors depending on color scheme.  Learn more in the Theming section under [Colors.](/colors#colors-in-light-and-dark-mode)\n\n\n\n```python\nimport dash_mantine_components as dmc\n\nfrom .data import data1\n\ncomponent = dmc.ScatterChart(\n    h=300,\n    data=data1,\n    dataKey={\"x\": \"age\", \"y\": \"BMI\"},\n    tickLine=\"xy\",\n    xAxisLabel=\"Age\",\n    yAxisLabel=\"BMI\",\n    className=\"chart-grid-text-colors\",\n)\n```\n\n```css\n\n.chart-grid-text-colors {\n  --chart-grid-color: var(--mantine-color-blue-5);\n  --chart-text-color: var(--mantine-color-blue-8);\n}\n\n[data-mantine-color-scheme='dark'] .chart-grid-text-colors {\n  --chart-grid-color: var(--mantine-color-blue-3);\n  --chart-text-color: var(--mantine-color-blue-2);\n}\n```\n\nIf your application has only one color scheme, you can use `gridColor` and `textColor` props instead of CSS variables:\n\n```python\n\ndmc.ScatterChart(\n    h=300,\n    data=data1,\n    dataKey={\"x\": \"age\", \"y\": \"BMI\"},\n    tickLine=\"xy\",\n    xAxisLabel=\"Age\",\n    yAxisLabel=\"BMI\",\n    gridColor=\"gray.5\",\n    textColor = \"gray.9\",\n)\n\n```\n\n### Units\nSet `unit` prop to render a unit label next to the y-axis ticks and tooltip values:\n\n```python\nimport dash_mantine_components as dmc\n\nspending_data = [\n    {\n        \"color\": \"cyan\",\n        \"name\": \"Average monthly spending\",\n        \"data\": [\n            {\"age\": a, \"average_monthly_spending\": b}\n            for a, b in zip(\n                [\n                    25,\n                    30,\n                    35,\n                    40,\n                    45,\n                    28,\n                    22,\n                    50,\n                    32,\n                    48,\n                    26,\n                    38,\n                    42,\n                    29,\n                    34,\n                    44,\n                    23,\n                    37,\n                    49,\n                    27,\n                    41,\n                    31,\n                    46,\n                    24,\n                    33,\n                    39,\n                    47,\n                    36,\n                    43,\n                    21,\n                ],\n                [\n                    1400,\n                    2100,\n                    1800,\n                    2400,\n                    2300,\n                    1600,\n                    1200,\n                    3200,\n                    1900,\n                    2700,\n                    1700,\n                    2200,\n                    2600,\n                    1500,\n                    2000,\n                    2500,\n                    1300,\n                    2100,\n                    2900,\n                    1600,\n                    2500,\n                    1800,\n                    2700,\n                    1400,\n                    2100,\n                    2400,\n                    2800,\n                    2200,\n                    2600,\n                    1100,\n                ],\n            )\n        ],\n    }\n]\n\ncomponent = dmc.ScatterChart(\n    h=300,\n    data=spending_data,\n    dataKey={\"x\": \"age\", \"y\": \"average_monthly_spending\"},\n    yAxisProps={\"domain\": [800, 3500]},\n    unit={\"y\": \"$\"},\n    labels={\"x\": \"Age\", \"y\": \"Spending\"},\n)\n```\n### Value formatter\n\nTo format values in the tooltip and axis ticks, use `valueFormatter` prop. It accepts a function that takes number value\nas an argument and returns formatted value.  Use two functions to format x and y values separately:\n\n\n\nNote: This example uses custom JavaScript defined in the assets folder. Learn more in the \"Functions As Props\" section of this document.\n\n\n```python\nimport dash_mantine_components as dmc\n\nspending_data = [\n    {\n        \"color\": \"cyan\",\n        \"name\": \"Average monthly spending\",\n        \"data\": [\n            {\"age\": a, \"average_monthly_spending\": b}\n            for a, b in zip(\n                [\n                    25,\n                    30,\n                    35,\n                    40,\n                    45,\n                    28,\n                    22,\n                    50,\n                    32,\n                    48,\n                    26,\n                    38,\n                    42,\n                    29,\n                    34,\n                    44,\n                    23,\n                    37,\n                    49,\n                    27,\n                    41,\n                    31,\n                    46,\n                    24,\n                    33,\n                    39,\n                    47,\n                    36,\n                    43,\n                    21,\n                ],\n                [\n                    1400,\n                    2100,\n                    1800,\n                    2400,\n                    2300,\n                    1600,\n                    1200,\n                    3200,\n                    1900,\n                    2700,\n                    1700,\n                    2200,\n                    2600,\n                    1500,\n                    2000,\n                    2500,\n                    1300,\n                    2100,\n                    2900,\n                    1600,\n                    2500,\n                    1800,\n                    2700,\n                    1400,\n                    2100,\n                    2400,\n                    2800,\n                    2200,\n                    2600,\n                    1100,\n                ],\n            )\n        ],\n    }\n]\n\ncomponent = dmc.ScatterChart(\n    h=300,\n    data=spending_data,\n    dataKey={\"x\": \"age\", \"y\": \"average_monthly_spending\"},\n    yAxisProps={\"domain\": [800, 3500]},\n    valueFormatter={\n        \"x\": {\"function\": \"formatYears\"},\n        \"y\": {\"function\": \"formatCurrency\"}\n    }\n)\n```\n\n```javascript\nvar dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\n\n\ndmcfuncs.formatCurrency = (value) => {\n  return `$${new Intl.NumberFormat('en-US').format(value)}`;\n};\n\n\ndmcfuncs.formatYears = (value) => {\n  return `${value} years`\n};\n```\n\n\n### Tooltip labels\nTo customize labels displayed in the tooltip, use `labels` prop:\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data1\n\ncomponent = dmc.ScatterChart(\n    h=350,\n    data=data1,\n    dataKey={\"x\": \"age\", \"y\": \"BMI\"},\n    xAxisLabel=\"Age\",\n    yAxisLabel=\"BMI\",\n    labels={\"x\": \"Age\", \"y\": \"Body Mass Index\"},\n)\n```\n### Custom tooltip\nUse the `tooltipProps` `content` prop to  to pass custom tooltip renderer to recharts Tooltip component.  For example:\n```python\n tooltipProps={'content': {'functon': 'myFunction'}}\n```\n\n\nNote: This example uses custom JavaScript defined in the assets folder. Learn more in the \"Functions As Props\" section of this document.\n\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data1\n\ncomponent = dmc.ScatterChart(\n    h=350,\n    data=data1,\n    dataKey={\"x\": \"age\", \"y\": \"BMI\"},\n    xAxisLabel=\"Age\",\n    yAxisLabel=\"BMI\",\n    tooltipProps={\"content\":  {\"function\": \"chartTooltip\"}}\n)\n```\n\n```javascript\nvar dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\nvar dmc = window.dash_mantine_components;\n\ndmcfuncs.chartTooltip = ({ label, payload }) => {\n\n  if (!payload || payload.length === 0) return null;\n\n  return React.createElement(\n    dmc.Paper,\n    {\n      px: \"md\",\n      py: \"sm\",\n      withBorder: true,\n      shadow: \"md\",\n      radius: \"md\",\n    },\n    [\n      React.createElement(\n        dmc.Text,\n        {\n          key: \"tooltip-label\",\n          fw: 500,\n          mb: 5,\n        },\n        label\n      ),\n      ...payload.map((item, index) =>\n        React.createElement(\n          dmc.Text,\n          {\n            key: `item-${index}`,\n            c: item.color,\n            fz: \"sm\",\n          },\n          `${item.name}: ${item.value}`\n        )\n      ),\n    ]\n  );\n};\n```\n\n### Remove tooltip\nTo remove tooltip, set `withTooltip=False`. It also removes the cursor line and disables interactions with the chart.\n\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data1\n\ncomponent = dmc.ScatterChart(\n    h=300,\n    data=data1,\n    dataKey={\"x\": \"age\", \"y\": \"BMI\"},\n    xAxisLabel=\"Age\",\n    yAxisLabel=\"BMI\",\n    withTooltip=False,\n)\n```\n### Tooltip animation\nBy default, tooltip animation is disabled. To enable it, set `tooltipAnimationDuration` prop to a number of\nmilliseconds to animate the tooltip position change.\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data1\n\ncomponent = dmc.ScatterChart(\n    h=300,\n    data=data1,\n    dataKey={\"x\": \"age\", \"y\": \"BMI\"},\n    xAxisLabel=\"Age\",\n    yAxisLabel=\"BMI\",\n    tooltipAnimationDuration=200,\n)\n```\n### Points animation\nBy default, the Recharts data animation is disabled. To enable and customize the animation, use `scatterProps` to pass properties to the Recharts `Scatter` component.\n\n```python\nfrom random import randint\nimport dash_mantine_components as dmc\nfrom dash import callback, Input, Output\n\ncomponent = dmc.Box(\n    [\n        dmc.Button(\"Update Chart\", id=\"btn-scatterchart-animation\"),\n        dmc.ScatterChart(\n            h=300,\n            data=[{\"color\": \"blue.5\", \"name\": \"Group 1\", \"data\": [{}]}],\n            scatterProps={\n                \"isAnimationActive\": True,\n                \"animationDuration\": 500,\n                \"animationEasing\": \"ease-in-out\",\n                \"animationBegin\": 500,\n            },\n            dataKey={\"x\": \"x\", \"y\": \"y\"},\n            xAxisLabel=\"X data\",\n            yAxisLabel=\"Y data\",\n            id=\"scatterchart-animation\",\n        ),\n    ]\n)\n\n\n@callback(\n    Output(\"scatterchart-animation\", \"data\"),\n    Input(\"btn-scatterchart-animation\", \"n_clicks\"),\n)\ndef update(n):\n    return [\n        {\n            \"color\": \"blue.5\",\n            \"name\": \"Group 1\",\n            \"data\": [\n                {\"x\": randint(1000, 4000), \"y\": randint(1000, 4000)} for _ in range(20)\n            ],\n        }\n    ]\n```\n### Reference lines\nUse `referenceLines` prop to render reference lines. Reference lines are always rendered behind the chart.\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data1\n\ncomponent = dmc.ScatterChart(\n    h=300,\n    data=data1,\n    dataKey={\"x\": \"age\", \"y\": \"BMI\"},\n    xAxisLabel=\"Age\",\n    yAxisLabel=\"BMI\",\n    referenceLines=[\n        {\"y\": 14, \"label\": \"Underweight ↓\", \"color\": \"red.7\"},\n        {\"y\": 19, \"label\": \"Normal weight\", \"color\": \"teal.7\"},\n        {\"y\": 30, \"label\": \"Overweight ↑\", \"color\": \"red.7\"},\n    ],\n)\n```\n### clickData\nUse the `clickData` property in a callback to retrieve data from the most recent click event. To get the name of the\nclicked series, use the `clickSeriesName` property.\n```python\nfrom dash import callback, Input, Output\nimport dash_mantine_components as dmc\nfrom .data import data2\n\ncomponent = dmc.Group(\n    [\n        dmc.ScatterChart(\n            id=\"figure-scatterchart\",\n            h=300,\n            data=data2,\n            dataKey={\"x\": \"age\", \"y\": \"BMI\"},\n            xAxisLabel=\"Age\",\n            yAxisLabel=\"BMI\",\n        ),\n        dmc.Text(id=\"clickdata-scatterchart1\"),\n        dmc.Text(id=\"clickdata-scatterchart2\"),\n    ]\n)\n\n@callback(\n    Output(\"clickdata-scatterchart1\", \"children\"),\n    Output(\"clickdata-scatterchart2\", \"children\"),\n    Input(\"figure-scatterchart\", \"clickData\"),\n    Input(\"figure-scatterchart\", \"clickSeriesName\"),\n)\ndef update(data, name):\n    return f\"clickData:  {data}\", f\"clickSeriesName: {name}\"\n```\n### hoverData\nUse the `hoverData` property in a callback to retrieve data from the most recent hover event. To get the name of the \nhovered series, use the `hoverSeriesName` property.\n\n```python\nfrom dash import callback, Input, Output\nimport dash_mantine_components as dmc\nfrom .data import data2\n\ncomponent = dmc.Group(\n    [\n        dmc.ScatterChart(\n            id=\"figure-scatterchart-hover\",\n            h=300,\n            data=data2,\n            dataKey={\"x\": \"age\", \"y\": \"BMI\"},\n            xAxisLabel=\"Age\",\n            yAxisLabel=\"BMI\",\n            withTooltip=False,\n        ),\n        dmc.Text(id=\"hoverdata-scatterchart1\"),\n        dmc.Text(id=\"hoverdata-scatterchart2\"),\n    ]\n)\n\n@callback(\n    Output(\"hoverdata-scatterchart1\", \"children\"),\n    Output(\"hoverdata-scatterchart2\", \"children\"),\n    Input(\"figure-scatterchart-hover\", \"hoverData\"),\n    Input(\"figure-scatterchart-hover\", \"hoverSeriesName\"),\n)\ndef update(data, name):\n    return f\"hoverData:  {data}\", f\"hoverSeriesName: {name}\"\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n#### ScatterChart selectors\n\n| Selector          | Static selector                  | Description                                     |\n|-------------------|---------------------------------|-------------------------------------------------|\n| root              | .mantine-ScatterChart-root      | Root element                                    |\n| scatter           | .mantine-ScatterChart-scatter   | Recharts Scatter component                      |\n| axis              | .mantine-ScatterChart-axis      | X and Y axis of the chart                       |\n| container         | .mantine-ScatterChart-container | Recharts ResponsiveContainer component          |\n| grid              | .mantine-ScatterChart-grid      | Recharts CartesianGrid component                |\n| legend            | .mantine-ScatterChart-legend    | Legend root element                             |\n| legendItem        | .mantine-ScatterChart-legendItem | Legend item representing data series          |\n| legendItemColor   | .mantine-ScatterChart-legendItemColor | Legend item color                        |\n| legendItemName    | .mantine-ScatterChart-legendItemName | Legend item name                          |\n| tooltip           | .mantine-ScatterChart-tooltip   | Tooltip root element                            |\n| tooltipBody       | .mantine-ScatterChart-tooltipBody | Tooltip wrapper around all items              |\n| tooltipItem       | .mantine-ScatterChart-tooltipItem | Tooltip item representing data series        |\n| tooltipItemBody   | .mantine-ScatterChart-tooltipItemBody | Tooltip item wrapper around item color and name |\n| tooltipItemColor  | .mantine-ScatterChart-tooltipItemColor | Tooltip item color                         |\n| tooltipItemName   | .mantine-ScatterChart-tooltipItemName | Tooltip item name                           |\n| tooltipItemData   | .mantine-ScatterChart-tooltipItemData | Tooltip item data                           |\n| tooltipLabel      | .mantine-ScatterChart-tooltipLabel | Label of the tooltip                           |\n| referenceLine     | .mantine-ScatterChart-referenceLine | Reference line                                 |\n| axisLabel         | .mantine-ScatterChart-axisLabel | X and Y axis labels                            |\n\n\n#### ScatterChart CSS variables\n| Selector       | Variable           | Description                              |\n|----------------|--------------------|------------------------------------------|\n| root           | --chart-grid-color | Controls color of the grid and cursor lines |\n|                | --chart-text-color | Controls color of the axis labels         |\n\n\n\n### Keyword Arguments\n#### ScatterChart\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- clickData (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Click data.\n\n- clickSeriesName (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Name of the series that was clicked.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data (list of dicts; required):\n    Data that is used to build the chart.\n\n    `data` is a list of dicts with keys:\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- dataKey (dict; required):\n    Keys that should be used to retrieve data from the data array on x\n    and y axis.\n\n    `dataKey` is a dict with keys:\n\n- gridAxis (a value equal to: 'none', 'x', 'y', 'xy'; optional):\n    Specifies which lines should be displayed in the grid, `'x'` by\n    default.\n\n- gridColor (optional):\n    Color of the grid and cursor lines, by default depends on color\n    scheme.\n\n- gridProps (dict; optional):\n    Props passed down to the `CartesianGrid` component.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- hoverData (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Hover data.\n\n- hoverSeriesName (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Name of the series that is hovered.\n\n- labels (dict; optional):\n    Labels that should be used instead of keys names in the tooltip.\n\n    `labels` is a dict with keys:\n\n- legendProps (dict; optional):\n    Props passed down to the `Legend` component.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- orientation (a value equal to: 'horizontal', 'vertical'; optional):\n    Chart orientation, `'horizontal'` by default.\n\n- pointLabels (a value equal to: 'x', 'y'; optional):\n    If set, displays labels next to points for the given axis.\n\n- referenceLines (list of dicts; optional):\n    Reference lines that should be displayed on the chart.\n\n- rightYAxisLabel (boolean | number | string | dict | list; optional):\n    Props passed down to the YAxis recharts component rendered on the\n    right side.\n\n- rightYAxisProps (boolean | number | string | dict | list; optional):\n    Props passed down to the YAxis recharts component rendered on the\n    right side.\n\n- scatterChartProps (dict; optional):\n    Props passed down to recharts `ScatterChart` component.\n\n- scatterProps (dict; optional):\n    Props passed down to recharts `Scatter` component.\n\n- strokeDasharray (string | number; optional):\n    Dash array for the grid lines and cursor, `'5 5'` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- textColor (optional):\n    Color of the text displayed inside the chart, `'dimmed'` by\n    default.\n\n- tickLine (a value equal to: 'none', 'x', 'y', 'xy'; optional):\n    Specifies which axis should have tick line, `'y'` by default.\n\n- tooltipAnimationDuration (number; optional):\n    Tooltip position animation duration in ms, `0` by default.\n\n- tooltipProps (dict; optional):\n    Props passed down to the `Tooltip` component.\n\n- unit (dict; optional):\n    Units displayed after value on axis and inside the tooltip.\n\n    `unit` is a dict with keys:\n\n- valueFormatter (boolean | number | string | dict | list; optional):\n    A function to format values on Y axis and inside the tooltip. See\n    https://www.dash-mantine-components.com/functions-as-props.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withLegend (boolean; optional):\n    Determines whether chart legend should be displayed, `False` by\n    default.\n\n- withRightYAxis (boolean; optional):\n    Determines whether additional y-axis should be displayed on the\n    right side of the chart, False by default.\n\n- withTooltip (boolean; optional):\n    Determines whether chart tooltip should be displayed, `True` by\n    default.\n\n- withXAxis (boolean; optional):\n    Determines whether x-axis should be hidden, `True` by default.\n\n- withYAxis (boolean; optional):\n    Determines whether y-axis should be hidden, `True` by default.\n\n- xAxisLabel (string; optional):\n    A label to display below the x-axis.\n\n- xAxisProps (dict; optional):\n    Props passed down to the `XAxis` recharts component.\n\n- yAxisLabel (string; optional):\n    A label to display next to the y-axis.\n\n- yAxisProps (dict; optional):\n    Props passed down to the `YAxis` recharts component."
  },
  {
    "name": "Sparkline",
    "description": "Simplified area chart to show trends",
    "endpoint": "/components/sparkline",
    "package": "dash_mantine_components",
    "category": "Charts",
    "content": "\n\n## Sparkline  \nSimplified area chart to show trends  \nCategory: Charts  \n\n### Introduction\n\nSparkline is a simplified version of AreaChart. It can be used to display a single series of data in a small space.\n\n### Trend Colors\n\nUse `trendColors` prop instead of `color` to change chart color depending on the trend. The prop accepts an object with `positive`, `negative` and `neutral` properties:\n\n- `positive` - color for positive trend (first value is less than the last value in data array)\n- `negative` - color for negative trend (first value is greater than the last value in data array)\n- `neutral` - color for neutral trend (first and last values are equal)\n\n`neutral` is optional, if not provided, the color will be the same as `positive`.\n\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html\n\npositive_trend = [10, 20, 40, 20, 40, 10, 50]\nnegative_trend = [50, 40, 20, 40, 20, 40, 10]\nneutral_trend = [10, 20, 40, 20, 40, 10, 50, 5, 10]\n\n\ndef make_sparkline(trend):\n    return dmc.Sparkline(\n        w=200,\n        h=60,\n        data=trend,\n        trendColors={\"positive\": \"teal.6\", \"negative\": \"red.6\", \"neutral\": \"gray.5\"},\n        fillOpacity=0.2,\n    )\n\n\ncomponent = dmc.Stack(\n    [\n        dmc.Text(\"Positive Trend\"),\n        make_sparkline(positive_trend),\n        dmc.Text(\"Negative Trend\", mt=\"md\"),\n        make_sparkline(negative_trend),\n        dmc.Text(\"Neutral Trend\", mt=\"md\"),\n        make_sparkline(neutral_trend),\n    ],\n    gap=\"md\",\n)\n```\n### Change area color depending on color scheme\nYou can use CSS variables in color property. Learn more in the Theming section under [Colors.](/colors#colors-in-light-and-dark-mode)\n\nExample of area color that is dark orange in light mode and lime in dark mode:\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Sparkline(w=200, h=60, data=[10, 20, 40, 20, 40, 10, 50], className=\"chart-color\")\n```\n\n```css\n:root {\n   --chart-color: var(--mantine-color-orange-8)\n}\n\n:root[data-mantine-color-scheme=\"dark\"] {\n  --chart-color: var(--mantine-color-lime-4);\n}\n```\n\n\n### Sparkline animation\nBy default, the Recharts data animation is disabled. To enable and customize the animation, use `areaProps` to pass properties to the Recharts `Area` component.\n\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import callback, Input, Output\n\ncomponent = dmc.Box(\n    [\n        dmc.Button(\"Update Chart\", id=\"btn-spark-animation\", n_clicks=0),\n        dmc.Sparkline(\n            w=200,\n            h=60,\n            data=[],\n            areaProps={\"isAnimationActive\": True},\n            color=\"blue\",\n            id=\"spark-animation\",\n        ),\n    ]\n)\n\n\n@callback(Output(\"spark-animation\", \"data\"), Input(\"btn-spark-animation\", \"n_clicks\"))\ndef update(n):\n    if n % 2 == 0:\n        return [10, 20, 40, 20, 40, 10, 50]\n    return [50, 10, 30, 10, 40, 50, 10]\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n#### Sparkline selectors\n\n| Selector    | Static selector         | Description                             |\n|:------------|:------------------------|:----------------------------------------|\n| root        | .mantine-Sparkline-root | Root element                            |\n\n\n#### Sparkline CSS variables\n\n| Selector         | Variable             | Description                        |\n|:-----------------|:---------------------|:-----------------------------------|\n| root             | --chart-color        | Controls stroke and fill colors    |\n\n\n### Keyword Arguments\n#### Sparkline\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- areaProps (dict; optional):\n    Props passed down to recharts `Area` component.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- color (optional):\n    Key of `theme.colors` or any valid CSS color, `theme.primaryColor`\n    by default.\n\n- connectNulls (boolean; optional):\n    Determines whether points with `None` values should be connected,\n    `True` by default.\n\n- curveType (a value equal to: 'bump', 'linear', 'natural', 'monotone', 'step', 'stepBefore', 'stepAfter'; optional):\n    Type of the curve, `'linear'` by default.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data (list of numbers; required):\n    Data used to render the chart.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- fillOpacity (number; optional):\n    Controls fill opacity of the area, `0.6` by default.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- strokeWidth (number; optional):\n    Area stroke width, `2` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- trendColors (dict; optional):\n    If set, `color` prop is ignored and chart color is determined by\n    the difference between first and last value.\n\n    `trendColors` is a dict with keys:\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withGradient (boolean; optional):\n    Determines whether the chart fill should be a gradient, `True` by\n    default."
  },
  {
    "name": "Autocomplete",
    "description": "Autocomplete user input with any list of options.",
    "endpoint": "/components/autocomplete",
    "package": "dash_mantine_components",
    "category": "Combobox",
    "content": "\n\n## Autocomplete  \nAutocomplete user input with any list of options.  \nCategory: Combobox  \n\n> Need users to select multiple items? See `MultiSelect` or `TagsInput`.\n\n\nUse `Autocomplete` component in the following cases:\n\n- You want to allow user to enter any value\n- You want to display suggestions to the user based on the input value\n- You want to preserve user input on blur if option was not selected from the dropdown\n- `value` and `label` of the option are the same.\n\n\n### Not a searchable select\n\n`Autocomplete` is not a searchable select, it is a text input with suggestions. Values are not enforced to be one of\nthe suggestions, user can type anything. If you need a searchable select, use `Select` component instead.\n To learn more about the differences between Autocomplete and Select, check [help center article](https://help.mantine.dev/q/select-autocomplete-difference).\n\n\n### Made with Combobox\n\n`Autocomplete` is built on top of [Combobox](https://mantine.dev/core/combobox/) and covers common use cases. If you need more advanced behavior or want to extend\nits functionality, you can create your own custom `Autocomplete` component.  See this [GitHub repository](https://github.com/AnnMarieW/dmc_custom_components) for custom DMC component examples.\n\n### Simple Example\n\n`Autocomplete` provides user a list of suggestions based on the input, however user is not limited to suggestions and can type anything.\n\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import Output, Input, html, callback\n\ncomponent = html.Div(\n    [\n        dmc.Autocomplete(\n            label=\"Your favorite library\",\n            placeholder=\"Pick value or enter anything\",\n            id=\"framework-autocomplete\",\n            data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n            mb=10,\n        ),\n        dmc.Text(id=\"autocomplete-value\"),\n    ]\n)\n\n\n@callback(Output(\"autocomplete-value\", \"children\"), Input(\"framework-autocomplete\", \"value\"))\ndef select_value(value):\n    return f\" You selected {value}\"\n```\n### Select first option on change\n\nSet the `selectFirstOptionOnChange` prop to automatically select the first option in the dropdown when the input value\nchanges. This feature allows users to type a value and immediately press Enter to select the first matching option,\nwithout needing to press the arrow down key first.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Autocomplete(\n    label=\"Select your favorite library\",\n    data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n    placeholder=\"Pick value or enter anything\",\n    selectFirstOptionOnChange=True,\n)\n```\n### autoSelectOnBlur\n\nSet `autoSelectOnBlur=True` to automatically select the highlighted option when the input loses focus. To see this\nfeature in action: select an option with up/down arrows, then click outside the input:\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Autocomplete(\n    label=\"Your favorite library\",\n    placeholder=\"Pick value or enter anything\",\n    data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n    autoSelectOnBlur=True,\n    clearable=True,\n)\n```\n### Data Format\n\n`Autoselect` `data` prop accepts data in one of the following formats:\n\n```python\ndata = [\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"]\n\n# or\n\ndata = [\n    {\"group\": \"US\", \"items\": [\"New York\", \"Seattle\"]},\n    {\"group\": \"Canada\", \"items\": [\"Montreal\", \"Vancouver\"]}\n]\n```\n\n### Options filtering\n\nBy default, `Autocomplete` filters options by checking if the option label contains input value. You can change this behavior \nwith `filter`. The filter function receives an object with the following properties as a single argument:\n - `options` – array of options or options groups, all options are in `{ value: string; label: string; disabled?: boolean }` format\n - `search` – current search query\n - `limit` – value of limit prop passed to `Autocomplete`\n\n\n\nNote: This example uses custom JavaScript defined in the assets folder. Learn more in the \"Functions As Props\" section of this document.\n\n\nExample of a custom filter function that matches options by words instead of letters sequence:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Autocomplete(\n    label=\"Your country\",\n    placeholder=\"Pick value or enter anything\",\n    data=[\n        \"Great Britain\",\n        \"Canada\",\n        \"United States\",\n    ],\n    filter={\"function\": \"filterCountries\"},\n)\n```\n\n```javascript\nvar dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\n\ndmcfuncs.filterCountries = function ({ options, search }) {\n  const queryWords = search.toLowerCase().trim().split(\" \");\n  return options.filter((option) => {\n    const words = option.label.toLowerCase().trim().split(\" \");\n    return queryWords.every((word) =>\n      words.some((labelWord) => labelWord.includes(word))\n    );\n  });\n};\n```\n\n\n### Sort options\n\nBy default, options are sorted by their position in the data array. You can change this behavior with `filter` function:\n\n\nNote: This example uses custom JavaScript defined in the assets folder. Learn more in the \"Functions As Props\" section of this document.\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Autocomplete(\n    label=\"Your favorite Python library\",\n    placeholder=\"Pick value or enter anything\",\n    data=[\n        \"4 – NumPy\",\n        \"1 – Pandas\",\n        \"3 – Scikit-learn\",\n        \"2 – Plotly\",\n    ],\n    filter={\"function\": \"filterPythonLibs\"},\n)\n```\n\n```javascript\nvar dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\n\ndmcfuncs.filterPythonLibs = function ({ options, search }) {\n  const query = search.toLowerCase().trim();\n  const result = options.filter((option) =>\n    option.label.toLowerCase().trim().includes(query)\n  );\n  result.sort((a, b) => a.label.localeCompare(b.label));\n  return result;\n};\n```\n\n\n### Large Data Sets\n\nThe best strategy for large data sets is to limit the number of options that are rendered at the same time. You can\ndo it with limit prop. \n\nNote that if you use a custom `filter` function, you need to implement your own logic to limit the number of options in filter\n\nExample of `Autocomplete` with 100 000 options, 10 options are rendered at the same time:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Autocomplete(\n    label=\"100,000 options\",\n    data=[f\"Option {i}\" for i in range(100000)],\n    placeholder=\"use limit to optimize performance\",\n    limit=10,\n)\n```\n### renderOption\n\n`renderOption` function allows you to customize option rendering.\n\n\nNote: This example uses custom JavaScript defined in the assets folder. Learn more in the \"Functions As Props\" section of this document.\n\n\n\n```python\n\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ncomponent = dmc.Autocomplete(\n    label=\"Select with renderOption\",\n    placeholder=\"Select text align\",\n    data=[\n      { \"value\": 'left', \"label\": 'left' },\n      { \"value\": 'center', \"label\": 'center' },\n      { \"value\": 'right', \"label\": 'right' },\n      { \"value\": 'justify', \"label\": 'justify' },\n    ],\n    renderOption={\"function\": \"renderOptionSelect\"},\n    clearable=True\n)\n```\n\n```javascript\nvar dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\nvar dmc = window.dash_mantine_components;\nvar iconify = window.dash_iconify;\n\n\ndmcfuncs.renderOptionSelect = function ({ option, checked }) {\n\n  const icons = {\n   left: React.createElement(iconify.DashIconify, { icon: \"mdi:format-align-left\", width: 24 }),\n   center: React.createElement(iconify.DashIconify, { icon: \"mdi:format-align-center\", width: 24 }),\n   right: React.createElement(iconify.DashIconify, { icon: \"mdi:format-align-right\", width: 24 }),\n   justify: React.createElement(iconify.DashIconify, { icon: \"mdi:format-align-justify\", width: 24 }),\n  };\n\n  const checkedIcon = React.createElement(iconify.DashIconify, {\n    icon: \"mdi:check\",\n    width: 24,\n  });\n\n  return React.createElement(\n    dmc.Group,\n    { flex: \"1\", gap: \"xs\" },\n    icons[option.value],\n    option.label,\n    checked ? checkedIcon : null\n  );\n};\n```\n\n\n### Nothing found message\n\n`Autocomplete` component does not support nothing found message. It is designed to accept any string as a value, so it\ndoes not make sense to show nothing found message. If you want to limit user input to suggestions, you can use\nsearchable `Select` component instead. To learn more about the differences between `Autocomplete` and `Select`, check this [help center article](https://help.mantine.dev/q/select-autocomplete-difference).\n\n\n### Scrollable dropdown\n\nBy default, the options list is wrapped with `ScrollArea.Autosize`. You can control dropdown max-height with \n`maxDropdownHeight` prop if you do not change the default settings.\n\nIf you want to use native scrollbars, set `withScrollArea=False`. Note that in this case, you will need to change \ndropdown styles with `Styles API`.\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Paper(\n    [\n        dmc.Autocomplete(\n            label=\"Scrollable dropdown\",\n            data=[f\"Option {i}\" for i in range(100)],\n            placeholder=\"Pick value or enter anything\",\n            maxDropdownHeight=300,\n        ),\n        dmc.Autocomplete(\n            label=\"With native scroll\",\n            data=[f\"Option {i}\" for i in range(100)],\n            placeholder=\"Pick value or enter anything\",\n            withScrollArea=False,\n            styles={\"dropdown\": {\"maxHeight\": 200, \"overflowY\": \"auto\"}},\n            mt=\"md\",\n        ),\n    ]\n)\n```\n### Group options\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Autocomplete(\n    data=[\n        {\n            \"group\": \"Data Analysis\",\n            \"items\": [\"Pandas\", \"NumPy\"],\n        },\n        {\n            \"group\": \"Deep Learning\",\n            \"items\": [\"TensorFlow\", \"PyTorch\"],\n        },\n    ],\n)\n```\n### Disabled options\n\nWhen option is disabled, it cannot be selected and is ignored in keyboard navigation.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Autocomplete(\n    label=\"Your favorite library:\",\n    data=[\n        {\"value\":\"Pandas\"},\n        {\"value\": \"NumPy\"},\n        {\"value\":\"TensorFlow\",  \"disabled\": True},\n        {\"value\":\"PyTorch\", \"disabled\": True}\n    ],\n)\n```\n### Combobox props\nYou can override `Combobox` props with `comboboxProps`. It is useful when you need to change some of the props that are\nnot exposed by `Autocomplete`, for example `withinPortal`:\n\n```python\ndmc.Autocomplete(comboboxProps={\"withinPortal\": False})\n```\n\n\n### Change dropdown z-index\n\n```python\ndmc.Autocomplete(comboboxProps={\"zIndex\": 1000})\n```\n\n### Inside Popover\n\nTo use `Autocomplete` inside popover, you need to set `withinPortal=False`:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Popover(\n    position=\"bottom\",\n    withArrow=True,\n    shadow=\"md\",\n    children=[\n        dmc.PopoverTarget(dmc.Button(\"Toggle Popover\")),\n        dmc.PopoverDropdown(\n            dmc.Autocomplete(\n                label=\"Your favorite library\",\n                placeholder=\"Pick value or enter anything\",\n                data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n                comboboxProps={\"withinPortal\": False},\n            )\n        ),\n    ],\n)\n```\n### Clearable\n\nSet `clearable` prop to display the clear button in the right section. The button is not displayed when:\n\n- The component does not have a value\n- The component is disabled\n- The component is read only\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Autocomplete(\n    label=\"Your favorite library:\",\n    data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n    value=\"Pandas\",\n    clearable=True,\n)\n```\n### Dropdown open in a callback\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import Output, Input, html, callback\n\ncomponent = html.Div(\n    [\n        dmc.Button(\"Toggle dropdown\", id=\"btn-autocomplete-opened\", n_clicks=0),\n        dmc.Autocomplete(\n            label=\"Select your favorite library\",\n            placeholder=\"Select value\",\n            id=\"autocomplete-opened\",\n            data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n            comboboxProps={\"position\": \"bottom\", \"middlewares\": {\"flip\": False, \"shift\": False}},\n            mb=10,\n        ),\n    ]\n)\n\n\n@callback(\n    Output(\"autocomplete-opened\", \"dropdownOpened\"), Input(\"btn-autocomplete-opened\", \"n_clicks\")\n)\ndef select_value(n):\n    if n % 2 == 0:\n        return False\n    return True\n```\n### Dropdown position\n\nBy default, the dropdown is displayed below the input if there is enough space; otherwise it is displayed above the\ninput. You can change this behavior by setting `position` and `middlewares` props, which are passed down to the\nunderlying `Popover` component.\n\nExample of dropdown that is always displayed above the input:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Autocomplete(\n    label=\"Your favorite library\",\n    placeholder=\"Pick value or enter anything\",\n    data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n    comboboxProps={\"position\": \"top\", \"middlewares\": {\"flip\": False, \"shift\": False}},\n)\n```\n### Dropdown width\n\nTo change dropdown width, set `width` prop in `comboboxProps`. By default, dropdown width is equal to the input width.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Autocomplete(\n    label=\"Your favorite library\",\n    placeholder=\"Pick value or enter anything\",\n    data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n    comboboxProps={\"position\": \"bottom-start\", \"width\": 200},\n)\n```\n### Dropdown offset\n\nTo change dropdown offset, set `offset` prop in `comboboxProps`:  \n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Autocomplete(\n    label=\"Your favorite library\",\n    placeholder=\"Pick value or enter anything\",\n    data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n    comboboxProps={\n        \"position\": \"bottom\",\n        \"middlewares\": {\"flip\": False, \"shift\": False},\n        \"offset\": 0,\n    },\n)\n```\n### Dropdown animation\nBy default, dropdown animations are disabled. To enable them, you can set `transitionProps`, which will be passed\ndown to the underlying `Transition` component.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Autocomplete(\n    label=\"Your favorite library\",\n    placeholder=\"Pick value or enter anything\",\n    data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n    comboboxProps={\"transitionProps\": {\"transition\": \"pop\", \"duration\": 200}},\n)\n```\n### Dropdown padding\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Paper(\n    [\n        dmc.Autocomplete(\n            label=\"Zero padding\",\n            data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n            placeholder=\"Pick value or enter anything\",\n            comboboxProps={\"dropdownPadding\": 0},\n        ),\n        dmc.Autocomplete(\n            label=\"10px padding\",\n            data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n            placeholder=\"Pick value or enter anything\",\n            comboboxProps={\"dropdownPadding\": 10},\n            mt=\"md\",\n        ),\n    ]\n)\n```\n### Dropdown shadow\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Autocomplete(\n    label=\"Your favorite library\",\n    placeholder=\"Pick value or enter anything\",\n    data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n    comboboxProps={\"shadow\": \"md\"},\n)\n```\n### Left and right sections\n\n`Autocomplete` supports `leftSection` and `rightSection` props. These sections are rendered with absolute position\ninside the input wrapper. You can use them to display icons, input controls or any other elements.\n\nYou can use the following props to control sections styles and content:\n\n- `rightSection`/`leftSection` – component to render on the corresponding side of input\n- `rightSectionWidth`/`leftSectionWidth` – controls width of the right section and padding on the corresponding side of the input. By default, it is controlled by component size prop.\n- `rightSectionPointerEvents`/`leftSectionPointerEvents` – controls pointer-events property of the section. If you want to render a non-interactive element, set it to none to pass clicks through to the input.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ncomponent = dmc.Paper(\n    [\n        dmc.Autocomplete(\n            label=\"Your favorite library\",\n            data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n            placeholder=\"Pick value or enter anythings\",\n            leftSectionPointerEvents=\"none\",\n            leftSection=DashIconify(icon=\"bi-book\"),\n        ),\n        dmc.Autocomplete(\n            label=\"Your favorite library\",\n            data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n            placeholder=\"Pick value or enter anything\",\n            rightSectionPointerEvents=\"none\",\n            rightSection=DashIconify(icon=\"bi-book\"),\n            mt=\"md\",\n        ),\n    ]\n)\n```\n### Input Props\n`Autocomplete` component supports `Input` and Input Wrapper components features and all input element props.\n`Autocomplete` documentation does not include all features supported by the component – see Input documentation to learn about all available features.\n\n\n### Read only\nSet `readOnly` to make the input read only. When readOnly is set, `Autocomplete` will not show suggestions and will not\ncall onChange function.\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Autocomplete(\n    label=\"Your favorite library:\",\n    data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n    readOnly=True,\n)\n```\n### Invalid State And Error\n\n\nNote: Dash adds some css by default which can lead you to see a red box when setting the `required` or `error` \nprop to True. Use the below css snippet to counteract it.\n\n```css\ninput:invalid {\n    outline: none !important;\n}\n```\n\nYou can let the user know if the selected value is invalid. In the example below, you will get an error message if you\nselect less than 2 currency pairs.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import Output, Input, callback\n\ncomponent = dmc.Autocomplete(\n    data=[\"USDINR\", \"EURUSD\", \"USDTWD\", \"USDJPY\"],\n    id=\"autocomplete-error\",\n    value=\"USDJPY\",\n)\n\n\n@callback(Output(\"autocomplete-error\", \"error\"), Input(\"autocomplete-error\", \"value\"))\ndef select_value(value):\n    return \"JPY is not allowed!\" if value == \"USDJPY\" else \"\"\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n### Autocomplete Selectors\n\n| Selector     | Static selector                        | Description                                              |\n|--------------|----------------------------------------|----------------------------------------------------------|\n| `wrapper`    | `.mantine-Autocomplete-wrapper`        | Root element of the Input                                |\n| `input`      | `.mantine-Autocomplete-input`          | Input element                                            |\n| `section`    | `.mantine-Autocomplete-section`        | Left and right sections                                  |\n| `root`       | `.mantine-Autocomplete-root`           | Root element                                             |\n| `label`      | `.mantine-Autocomplete-label`          | Label element                                            |\n| `required`   | `.mantine-Autocomplete-required`       | Required asterisk element, rendered inside label         |\n| `description`| `.mantine-Autocomplete-description`    | Description element                                      |\n| `error`      | `.mantine-Autocomplete-error`          | Error element                                            |\n| `dropdown`   | `.mantine-Autocomplete-dropdown`       | Dropdown root element                                    |\n| `options`    | `.mantine-Autocomplete-options`        | Options wrapper                                          |\n| `option`     | `.mantine-Autocomplete-option`         | Option                                                   |\n| `group`      | `.mantine-Autocomplete-group`          | Options group wrapper                                    |\n| `groupLabel` | `.mantine-Autocomplete-groupLabel`     | Options group label                                      |\n\n\n### Keyword Arguments\n#### Autocomplete\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- autoSelectOnBlur (boolean; optional):\n    If set, the highlighted option is selected when the input loses\n    focus @,default,`False`.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- clearButtonProps (dict; optional):\n    Props passed down to the clear button.\n\n    `clearButtonProps` is a dict with keys:\n\n- clearable (boolean; optional):\n    Determines whether the clear button should be displayed in the\n    right section when the component has value, `False` by default.\n\n- comboboxProps (dict; optional):\n    Props passed down to `Combobox` component.\n\n    `comboboxProps` is a dict with keys:\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data (list of strings; optional):\n    Data displayed in the dropdown.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- debounce (number | boolean; default False):\n    (boolean | number; default False): If True, changes to input will\n    be sent back to the Dash server only on enter or when losing\n    focus. If it's False, it will send the value back on every change.\n    If a number, it will not send anything back to the Dash server\n    until the user has stopped typing for that number of milliseconds.\n\n- description (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Description` component. If not set, description\n    is not rendered.\n\n- descriptionProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Description` component.\n\n- disabled (boolean; optional):\n    Sets `disabled` attribute on the `input` element.\n\n- dropdownOpened (boolean; optional):\n    Controlled dropdown opened state.\n\n- error (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Error` component. If not set, error is not\n    rendered.\n\n- errorProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Error` component.\n\n- filter (boolean | number | string | dict | list; optional):\n    A Function based on which items are filtered and sorted. See\n    https://www.dash-mantine-components.com/functions-as-props.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- inputProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input` component.\n\n- inputWrapperOrder (list of a value equal to: 'label', 'description', 'error', 'input's; optional):\n    Controls order of the elements, `['label', 'description', 'input',\n    'error']` by default.\n\n- label (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Label` component. If not set, label is not\n    rendered.\n\n- labelProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Label` component.\n\n- leftSection (a list of or a singular dash component, string or number; optional):\n    Content section rendered on the left side of the input.\n\n- leftSectionPointerEvents (a value equal to: 'auto', '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):\n    Sets `pointer-events` styles on the `leftSection` element,\n    `'none'` by default.\n\n- leftSectionProps (dict; optional):\n    Props passed down to the `leftSection` element.\n\n- leftSectionWidth (string | number; optional):\n    Left section width, used to set `width` of the section and input\n    `padding-left`, by default equals to the input height.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- limit (number; optional):\n    Maximum number of options displayed at a time, `Infinity` by\n    default.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- maxDropdownHeight (string | number; optional):\n    `max-height` of the dropdown, only applicable when\n    `withScrollArea` prop is `True`, `250` by default.\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- n_blur (number; default 0):\n    An integer that represents the number of times that this element\n    has lost focus.\n\n- n_submit (number; default 0):\n    An integer that represents the number of times that this element\n    has been submitted.\n\n- name (string; optional):\n    Name prop.\n\n- openOnFocus (boolean; optional):\n    If set, the dropdown opens when the input receives focus default\n    `True`.\n\n- persisted_props (list of strings; optional):\n    Properties whose user interactions will persist after refreshing\n    the component or the page. Since only `value` is allowed this prop\n    can normally be ignored.\n\n- persistence (string | number | boolean; optional):\n    Used to allow user interactions in this component to be persisted\n    when the component - or the page - is refreshed. If `persisted` is\n    truthy and hasn't changed from its previous value, a `value` that\n    the user has changed while using the app will keep that change, as\n    long as the new `value` also matches what was given originally.\n    Used in conjunction with `persistence_type`. Note:  The component\n    must have an `id` for persistence to work.\n\n- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):\n    Where persisted user changes will be stored: memory: only kept in\n    memory, reset on page refresh. local: window.localStorage, data is\n    kept after the browser quit. session: window.sessionStorage, data\n    is cleared once the browser quit.\n\n- placeholder (string; optional):\n    Placeholder.\n\n- pointer (boolean; optional):\n    Determines whether the input should have `cursor: pointer` style,\n    `False` by default.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set\n    `border-radius`, numbers are converted to rem,\n    `theme.defaultRadius` by default.\n\n- readOnly (boolean; optional):\n    Readonly.\n\n- renderOption (boolean | number | string | dict | list; optional):\n    A function to render content of the option, replaces the default\n    content of the option.  See\n    https://www.dash-mantine-components.com/functions-as-props.\n\n- required (boolean; optional):\n    Adds required attribute to the input and a red asterisk on the\n    right side of label, `False` by default.\n\n- rightSection (a list of or a singular dash component, string or number; optional):\n    Content section rendered on the right side of the input.\n\n- rightSectionPointerEvents (a value equal to: 'auto', '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):\n    Sets `pointer-events` styles on the `rightSection` element,\n    `'none'` by default.\n\n- rightSectionProps (dict; optional):\n    Props passed down to the `rightSection` element.\n\n- rightSectionWidth (string | number; optional):\n    Right section width, used to set `width` of the section and input\n    `padding-right`, by default equals to the input height.\n\n- scrollAreaProps (dict; optional):\n    Props passed down to the underlying `ScrollArea` component in the\n    dropdown.\n\n    `scrollAreaProps` is a dict with keys:\n\n- selectFirstOptionOnChange (boolean; optional):\n    Determines whether the first option should be selected when value\n    changes, `False` by default.\n\n- selectFirstOptionOnDropdownOpen (boolean; optional):\n    If set, the first option is selected when dropdown opens, `False`\n    by default.\n\n- size (optional):\n    Controls input `height` and horizontal `padding`, `'sm'` by\n    default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- value (string; default ''):\n    Controlled component value.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withAsterisk (boolean; optional):\n    Determines whether the required asterisk should be displayed.\n    Overrides `required` prop. Does not add required attribute to the\n    input. `False` by default.\n\n- withErrorStyles (boolean; optional):\n    Determines whether the input should have red border and red text\n    color when the `error` prop is set, `True` by default.\n\n- withScrollArea (boolean; optional):\n    Determines whether the options should be wrapped with\n    `ScrollArea.AutoSize`, `True` by default.\n\n- wrapperProps (dict; optional):\n    Props passed down to the root element.\n\n    `wrapperProps` is a dict with keys:"
  },
  {
    "name": "MultiSelect",
    "description": "MultiSelect enables users to select multiple options in a dropdown.",
    "endpoint": "/components/multiselect",
    "package": "dash_mantine_components",
    "category": "Combobox",
    "content": "\n\n## MultiSelect  \nMultiSelect enables users to select multiple options in a dropdown.  \nCategory: Combobox  \n\n### Made with Combobox\n\n`MultiSelect` is built on top of [Combobox](https://mantine.dev/core/combobox/) and covers common use cases. If you need more advanced behavior or want to extend\nits functionality, you can create your own custom `MultiSelect` component. See this [GitHub repository](https://github.com/AnnMarieW/dmc_custom_components) for custom DMC component examples.\n\n\n### Simple Example\n\nMultiSelect component allows user to pick any number of option from the given data.\nIf you would like users to be able to enter custom values, see `TagsInput`.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import Output, Input, html, callback\n\ncomponent = html.Div(\n    [\n        dmc.MultiSelect(\n            label=\"Select your favorite libraries\",\n            placeholder=\"Select all you like!\",\n            id=\"framework-multi-select\",\n            value=[\"pd\", \"torch\"],\n            data=[\n                {\"value\": \"pd\", \"label\": \"Pandas\"},\n                {\"value\": \"np\", \"label\": \"NumPy\"},\n                {\"value\": \"tf\", \"label\": \"TensorFlow\"},\n                {\"value\": \"torch\", \"label\": \"PyTorch\"},\n            ],\n            w=400,\n            mb=10,\n        ),\n        dmc.Text(id=\"multi-selected-value\"),\n    ]\n)\n\n\n@callback(\n    Output(\"multi-selected-value\", \"children\"), Input(\"framework-multi-select\", \"value\")\n)\ndef select_value(value):\n    return \", \".join(value)\n```\n### Data Format\n\nThe data can be provided as either:\n* an array of strings - use when label and value are same.\n* an array of dicts with `label` and `value` properties.\n* an array of dict with `group` and `items` as keys where items are one of the previous two types.\n\n```python\ndata = [\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"]\n\n# or\n\ndata = [\n    {\"value\": \"Pandas\", \"label\": \"Pandas\"},\n    {\"value\": \"NumPy\", \"label\": \"NumPy\"},\n    {\"value\": \"TensorFlow\", \"label\": \"TensorFlow\"},\n    {\"value\": \"PyTorch\", \"label\": \"PyTorch\"},\n]\n\n# or\n\ndata = [\n    {\"group\": \"Data Analysis\", \"items\": [\"Pandas\", \"NumPy\"]},\n    {\"group\": \"Deep Learning\", \"items\": [\"TensorFlow\", \"Pytorch\"]}\n]\n\n# or\n\ndata = [\n    {\n        \"group\": \"Data Analysis\",\n        \"items\": [\n            {\"value\": \"Pandas\", \"label\": \"Pandas\"},\n            {\"value\": \"NumPy\", \"label\": \"NumPy\"},\n        ],\n    },\n    {\n        \"group\": \"Deep Learning\",\n        \"items\": [\n            {\"value\": \"TensorFlow\", \"label\": \"TensorFlow\"},\n            {\"value\": \"PyTorch\", \"label\": \"PyTorch\"},\n        ],\n    },\n]\n```\n\n### Clearable\n\nSet `clearable` prop to display the clear button in the right section. The button is not displayed when:\n\n- The component does not have a value\n- The component is disabled\n- The component is read only\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.MultiSelect(\n    label=\"Select your favorite library\",\n    placeholder=\"Select all you like!\",\n    value=[\"Pandas\", \"TensorFlow\"],\n    data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n    clearable=True,\n    w=400,\n    mb=180,\n)\n```\n### Searchable\n\nSet `searchable` prop to allow filtering options by user input.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.MultiSelect(\n    label=\"Pick your favorite libraries\",\n    data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n    searchable=True,\n    w=400,\n)\n```\n### Nothing Found\n\nSet the `nothingFoundMessage` prop to display a given message when no options match the search query or there is \nno data available. If the `nothingFoundMessage` prop is not set, the `MultiSelect` dropdown will be hidden.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.MultiSelect(\n    label=\"Pick your favorite libraries\",\n    data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n    searchable=True,\n    nothingFoundMessage=\"Nothing found...\",\n    w=400,\n)\n```\n### Clear search on change\n\nSet the `clearSearchOnChange=False` to enable selecting multiple items using the same search query.\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.MultiSelect(\n    data=[\"aa\", \"ab\", \"ac\", \"ba\", \"bb\", \"bc\"],\n    value=[\"aa\"],\n    searchable=True,\n    clearSearchOnChange=False\n)\n```\n### Checked option icon\n\nSet `checkIconPosition` prop to `left` or `right` to control position of check icon in active option.\nTo remove the check icon, set `withCheckIcon=False`.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.MultiSelect(\n    label=\"Control check icon\",\n    data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n    value=[\"Pandas\", \"NumPy\"],\n    checkIconPosition=\"right\",\n    dropdownOpened=True,\n    w=400,\n    pb=150,\n    id=\"multi-select-check-icon\",\n    comboboxProps={\"withinPortal\": False}\n\n)\n```\n### Max Selected Values\n\nYou can limit the number of selected values with `maxValues` prop. This will not allow adding more values\nonce the limit is reached.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.MultiSelect(\n    label=\"Select your favorite\",\n    description=\"You can select a maximum of 3 frameworks.\",\n    data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n    maxValues=3,\n    w=400,\n)\n```\n### Hide selected options\n\nTo remove selected options from the list of available options, set `hidePickedOptions` prop:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.MultiSelect(\n    label=\"Select your favorite libraries\",\n    placeholder=\"Select all you like!\",\n    hidePickedOptions=True,\n    value=[\"Pandas\", \"TensorFlow\"],\n    data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n    w=400,\n    mb=140,\n    dropdownOpened=True,\n    comboboxProps={\"withinPortal\":False}\n)\n```\n### Large Data Sets\n\nThe best strategy for large data sets is to limit the number of options that are rendered at the same time. You can\ndo it with limit prop. \n\nExample of `MultiSelect` with 100 000 options, 10 options are rendered at the same time:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.MultiSelect(\n    label=\"100,000 options\",\n    data=[f\"Option {i}\" for i in range(100000)],\n    placeholder=\"use limit to optimize performance\",\n    limit=10,\n    searchable=True,\n    w=400,\n)\n```\n### renderOption\n\n`renderOption` function allows you to customize option rendering.\n\n\nNote: This example uses custom JavaScript defined in the assets folder. Learn more in the \"Functions As Props\" section of this document.\n\n\n```python\nimport dash_mantine_components as dmc\n\nusers_data = {\n    \"Emily Johnson\": {\n        \"image\": \"https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-7.png\",\n        \"email\": \"emily92@gmail.com\",\n    },\n    \"Ava Rodriguez\": {\n        \"image\": \"https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-8.png\",\n        \"email\": \"ava_rose@gmail.com\",\n    },\n    \"Olivia Chen\": {\n        \"image\": \"https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-4.png\",\n        \"email\": \"livvy_globe@gmail.com\",\n    },\n    \"Ethan Barnes\": {\n        \"image\": \"https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-1.png\",\n        \"email\": \"ethan_explorer@gmail.com\",\n    },\n    \"Mason Taylor\": {\n        \"image\": \"https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-2.png\",\n        \"email\": \"mason_musician@gmail.com\",\n    },\n}\n\ncomponent = dmc.MultiSelect(\n    data=list(users_data.keys()),\n    label=\"Employees of the month\",\n    placeholder=\"Search for employee\",\n    maxDropdownHeight=300,\n    searchable=True,\n    hidePickedOptions=True,\n    renderOption={\n        \"function\": \"renderUserOption\",\n        \"options\": {\"users\": users_data},\n    },\n)\n```\n\n```javascript\nvar dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\nvar dmc = window.dash_mantine_components;\n\ndmcfuncs.renderUserOption = function ({ option }, { users }) {\n  const user = users[option.value];\n\n  return React.createElement(\n    dmc.Group,\n    { gap: \"sm\" },\n    React.createElement(dmc.Avatar, {\n      key: \"avatar\",\n      src: user.image,\n      size: 36,\n      radius: \"xl\",\n    }),\n    React.createElement(\n      \"div\",\n      { key: \"text-block\" },\n      React.createElement(dmc.Text, { size: \"sm\", key: \"name\" }, option.value),\n      React.createElement(dmc.Text, {\n        size: \"xs\",\n        opacity: 0.5,\n        key: \"email\",\n        children: user.email,\n      })\n    )\n  );\n};\n```\n\n\n### Options filtering\n\nBy default, `MultiSelect` filters options by checking if the option label contains input value. You can change this behavior \nwith `filter`. The filter function receives an object with the following properties as a single argument:\n - `options` – array of options or options groups, all options are in `{ value: string; label: string; disabled?: boolean }` format\n - `search` – current search query\n - `limit` – value of limit prop passed to `Select`\n\n\n\nNote: This example uses custom JavaScript defined in the assets folder. Learn more in the \"Functions As Props\" section of this document.\n\n\nExample of a custom filter function that matches options by words instead of letters sequence:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.MultiSelect(\n    label=\"Your country\",\n    placeholder=\"Pick value\",\n    searchable=True,\n    data=[\n        \"Great Britain\",\n        \"Canada\",\n        \"United States\",\n    ],\n    filter={\"function\": \"filterCountries\"},\n)\n```\n\n```javascript\nvar dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\n\ndmcfuncs.filterCountries = function ({ options, search }) {\n  const queryWords = search.toLowerCase().trim().split(\" \");\n  return options.filter((option) => {\n    const words = option.label.toLowerCase().trim().split(\" \");\n    return queryWords.every((word) =>\n      words.some((labelWord) => labelWord.includes(word))\n    );\n  });\n};\n```\n\n\n### Sort options\n\nBy default, options are sorted by their position in the data array. You can change this behavior with `filter` function:\n\n\nNote: This example uses custom JavaScript defined in the assets folder. Learn more in the \"Functions As Props\" section of this document.\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.MultiSelect(\n    label=\"Your favorite Python library\",\n    placeholder=\"Pick value\",\n    searchable=True,\n    nothingFoundMessage=\"Nothing found...\",\n    data=[\n        \"4 – NumPy\",\n        \"1 – Pandas\",\n        \"3 – Scikit-learn\",\n        \"2 – Plotly\",\n    ],\n    filter={\"function\": \"filterPythonLibs\"},\n)\n```\n\n```javascript\nvar dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\n\ndmcfuncs.filterPythonLibs = function ({ options, search }) {\n  const query = search.toLowerCase().trim();\n  const result = options.filter((option) =>\n    option.label.toLowerCase().trim().includes(query)\n  );\n  result.sort((a, b) => a.label.localeCompare(b.label));\n  return result;\n};\n```\n\n\n\n\n### Scrollable dropdown\n\nBy default, the options list is wrapped with `ScrollArea.Autosize`. You can control dropdown max-height with \n`maxDropdownHeight` prop if you do not change the default settings.\n\nIf you want to use native scrollbars, set `withScrollArea=False`. Note that in this case, you will need to change \ndropdown styles with `Styles API`.\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Paper(\n    [\n        dmc.MultiSelect(\n            label=\"Scrollable dropdown\",\n            data=[f\"Option {i}\" for i in range(100)],\n            placeholder=\"Pick value\",\n            maxDropdownHeight=300,\n            w=400,\n        ),\n        dmc.MultiSelect(\n            label=\"With native scroll\",\n            data=[f\"Option {i}\" for i in range(100)],\n            placeholder=\"Pick value\",\n            withScrollArea=False,\n            styles={\"dropdown\": {\"maxHeight\": 200, \"overflowY\": \"auto\"}},\n            w=400,\n            mt=\"md\",\n        ),\n    ]\n)\n```\n### Grouping\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.MultiSelect(\n    data=[\n        {\n            \"group\": \"Data Analysis\",\n            \"items\": [\n                {\"value\": \"Pandas\", \"label\": \"Pandas\"},\n                {\"value\": \"NumPy\", \"label\": \"NumPy\"},\n            ],\n        },\n        {\n            \"group\": \"Deep Learning\",\n            \"items\": [\n                {\"value\": \"TensorFlow\", \"label\": \"TensorFlow\"},\n                {\"value\": \"PyTorch\", \"label\": \"PyTorch\"},\n            ],\n        },\n    ],\n    w=400,\n)\n```\n### Combobox props\nYou can override `Combobox` props with `comboboxProps`. It is useful when you need to change some of the props that are\nnot exposed by `MultiSelect`, for example `withinPortal`:\n\n```python\ndmc.MultiSelect(comboboxProps={\"withinPortal\": False})\n```\n\n\n### Change dropdown z-index\n\n\n```python\ndmc.MultiSelect(comboboxProps={\"zIndex\": 1000})\n```\n\n\n### Inside Popover\n\nTo use MultiSelect inside popover, you need to set `withinPortal=False`:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Popover(\n    width=300,\n    position=\"bottom\",\n    withArrow=True,\n    shadow=\"md\",\n    children=[\n        dmc.PopoverTarget(dmc.Button(\"Toggle Popover\")),\n        dmc.PopoverDropdown(\n            dmc.MultiSelect(\n                label=\"Your favorite libraries\",\n                placeholder=\"Pick values\",\n                data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n                comboboxProps={\"withinPortal\": False},\n            )\n        ),\n    ],\n)\n```\n### Dropdown open in a callback\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import Output, Input, html, callback\n\ncomponent = html.Div(\n    [\n        dmc.Button(\"Toggle dropdown\", id=\"btn-multi-select-opened\", n_clicks=0),\n        dmc.MultiSelect(\n            label=\"Select your favorite libraries\",\n            placeholder=\"Select all you like!\",\n            id=\"multi-select-opened\",\n            value=[\"pd\", \"torch\"],\n            data=[\n                {\"value\": \"pd\", \"label\": \"Pandas\"},\n                {\"value\": \"np\", \"label\": \"NumPy\"},\n                {\"value\": \"tf\", \"label\": \"TensorFlow\"},\n                {\"value\": \"torch\", \"label\": \"PyTorch\"},\n            ],\n            comboboxProps={\"position\": \"bottom\", \"middlewares\": {\"flip\": False, \"shift\": False}},\n            w=400,\n            mb=10,\n        ),\n    ]\n)\n\n\n@callback(\n    Output(\"multi-select-opened\", \"dropdownOpened\"),\n    Input(\"btn-multi-select-opened\", \"n_clicks\"),\n)\ndef select_value(n):\n    if n % 2 == 0:\n        return False\n    return True\n```\n### Dropdown position\n\nBy default, the dropdown is displayed below the input if there is enough space; otherwise it is displayed above the\ninput. You can change this behavior by setting `position` and `middlewares` props, which are passed down to the\nunderlying `Popover` component.\n\nExample of dropdown that is always displayed above the input:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.MultiSelect(\n    label=\"Your favorite libraries\",\n    placeholder=\"Pick values\",\n    data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n    comboboxProps={\"position\": \"top\", \"middlewares\": {\"flip\": False, \"shift\": False}},\n)\n```\n### Dropdown width\n\nTo change dropdown width, set `width` prop in `comboboxProps`. By default, dropdown width is equal to the input width.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.MultiSelect(\n    label=\"Your favorite libraries\",\n    placeholder=\"Pick values\",\n    data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n    comboboxProps={\"position\": \"bottom-start\", \"width\": 200},\n)\n```\n### Dropdown offset\n\nTo change dropdown offset, set `offset` prop in `comboboxProps`:  \n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.MultiSelect(\n    label=\"Your favorite libraries\",\n    placeholder=\"Pick values\",\n    data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n    comboboxProps={\n        \"position\": \"bottom\",\n        \"middlewares\": {\"flip\": False, \"shift\": False},\n        \"offset\": 0,\n    },\n)\n```\n### Dropdown animation\nBy default, dropdown animations are disabled. To enable them, you can set `transitionProps`, which will be passed\ndown to the underlying `Transition` component.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.MultiSelect(\n    label=\"Your favorite libraries\",\n    placeholder=\"Pick values\",\n    data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n    comboboxProps={\"transitionProps\": {\"transition\": \"pop\", \"duration\": 200}},\n)\n```\n### Dropdown padding\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Paper(\n    [\n        dmc.MultiSelect(\n            label=\"Zero padding\",\n            data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n            placeholder=\"Pick value\",\n            comboboxProps={\"dropdownPadding\": 0},\n            w=400,\n        ),\n        dmc.MultiSelect(\n            label=\"10px padding\",\n            data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n            placeholder=\"Pick value\",\n            comboboxProps={\"dropdownPadding\": 10},\n            w=400,\n            mt=\"md\",\n        ),\n    ]\n)\n```\n### Dropdown shadow\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.MultiSelect(\n    label=\"Your favorite libraries\",\n    placeholder=\"Pick values\",\n    data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n    comboboxProps={\"shadow\": \"md\"},\n)\n```\n### Left and right sections\n\n`MultiSelect` supports `leftSection` and `rightSection` props. These sections are rendered with absolute position\ninside the input wrapper. You can use them to display icons, input controls or any other elements.\n\nYou can use the following props to control sections styles and content:\n\n- `rightSection`/`leftSection` – component to render on the corresponding side of input\n- `rightSectionWidth`/`leftSectionWidth` – controls width of the right section and padding on the corresponding side of the input. By default, it is controlled by component size prop.\n- `rightSectionPointerEvents`/`leftSectionPointerEvents` – controls pointer-events property of the section. If you want to render a non-interactive element, set it to none to pass clicks through to the input.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ncomponent = dmc.Paper(\n    [\n        dmc.MultiSelect(\n            label=\"Your favorite libraries\",\n            data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n            placeholder=\"Pick values\",\n            leftSectionPointerEvents=\"none\",\n            leftSection=DashIconify(icon=\"bi-book\"),\n            w=400,\n        ),\n        dmc.MultiSelect(\n            label=\"Your favorite libraries\",\n            data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n            placeholder=\"Pick values\",\n            rightSectionPointerEvents=\"none\",\n            rightSection=DashIconify(icon=\"bi-book\"),\n            w=400,\n            mt=\"md\",\n        ),\n    ]\n)\n```\n### Invalid State And Error\n\nYou can let the user know if the selected value is invalid. In the example below, you will get an error message if you\nselect less than 2 currency pairs.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import Output, Input, callback\n\ncomponent = dmc.MultiSelect(\n    data=[\"USDINR\", \"EURUSD\", \"USDTWD\", \"USDJPY\"],\n    id=\"multi-select-error\",\n    value=[\"USDJPY\"],\n    w=400,\n)\n\n\n@callback(Output(\"multi-select-error\", \"error\"), Input(\"multi-select-error\", \"value\"))\ndef select_value(value):\n    return \"Select at least 2.\" if len(value) < 2 else \"\"\n```\n### Input Props\n`MultiSelect` component supports `Input` and Input Wrapper components features and all input element props.\n`MultiSelect` documentation does not include all features supported by the component – see Input documentation to learn about all available features.\n\n \n### Removing placeholder after values selected\n\n`MultiSelect` component uses placeholder to indicate that there are values available for selection. It is different\nfrom `Select` component where placeholder is removed when value is selected – user can select only one value.\n\nYou can use CSS to remove the placeholder in the `MultiSelect` component when values are selected:\n\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ncomponent = dmc.Paper(\n    [\n        dmc.MultiSelect(\n            label=\"Default Placeholder\",\n            data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n            placeholder=\"Pick values\",\n            value=[\"Pandas\"],\n            w=400,\n        ),\n        dmc.MultiSelect(\n            label=\"Placeholder removed when values are selected\",\n            data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n            placeholder=\"Pick values\",\n            value=[\"Pandas\"],\n            className=\"dmc-docs-demo\",\n            w=400,\n            mt=\"md\",\n        ),\n    ]\n)\n```\n\n```css\n.dmc-docs-demo .mantine-MultiSelect-inputField {\n  &:not(:only-child)::placeholder {\n    color: transparent;\n  }\n}\n```\n\n\n### Dash 4 dcc.Dropdown\n\nThe Dash 4 [dcc.Dropdown](https://dash.plotly.com/dash-core-components/dropdown) supports some features that are not \navailable in DMC.  For example, virtualization, which renders only the visible options instead of the entire list. This improves performance and responsiveness when working \nwith large data sets. It also includes a search input and Select all / Deselect all buttons inside the dropdown menu.\nWhen `multi=True`, it displays a count of selected items, preventing the input from resizing as selections grow.\n\nThe `dmc.InputWrapper` can be used to add elements like `label`, `description`, and `error` to the `dcc.Dropdown`,\nmaking it consistent with the other DMC inputs. The `htmlFor` prop links the label to the component for focus and accessibility.\n\nTo style the `dcc.Dropdown` with a Mantine theme see the   [Dash 4 components](/dash4-components) section.\n\n```python\nfrom dash import dcc\nimport dash_mantine_components as dmc\n\ncomponent = dmc.InputWrapper(\n    dcc.Dropdown([f\"option {i}\" for i in range(100)],  value=[\"option 1\", \"option 2\", \"option 3\"], multi=True, id=\"dcc4-dropdown\"),\n    label=\"dcc.Dropdown with a dmc.InputWrapper\",\n    htmlFor=\"dcc4-dropdown\",\n    className=\"dmc\"  # styles with Mantine theme\n)\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n| Name        | Static selector                  | Description                                      |\n|:------------|:---------------------------------|:-------------------------------------------------|\n| wrapper     | .mantine-MultiSelect-wrapper     | Root element of the Input                        |\n| input       | .mantine-MultiSelect-input       | Input element                                    |\n| section     | .mantine-MultiSelect-section     | Left and right sections                          |\n| root        | .mantine-MultiSelect-root        | Root element                                     |\n| label       | .mantine-MultiSelect-label       | Label element                                    |\n| required    | .mantine-MultiSelect-required    | Required asterisk element, rendered inside label |\n| description | .mantine-MultiSelect-description | Description element                              |\n| error       | .mantine-MultiSelect-error       | Error element                                    |\n| dropdown    | .mantine-MultiSelect-dropdown    | Dropdown root element                            |\n| options     | .mantine-MultiSelect-options     | Options wrapper                                  |\n| option      | .mantine-MultiSelect-option      | Option                                           |\n| empty       | .mantine-MultiSelect-empty       | Nothing found message                            |\n| group       | .mantine-MultiSelect-group       | Options group wrapper                            |\n| groupLabel  | .mantine-MultiSelect-groupLabel  | Options group label                              |\n| pill        | .mantine-MultiSelect-pill        | Value pill                                       |\n| inputField  | .mantine-MultiSelect-inputField  | Input field                                      |\n| pillsList   | .mantine-MultiSelect-pillsList   | List of pills, also contains input field         |\n\n\n### Keyword Arguments\n#### MultiSelect\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- checkIconPosition (a value equal to: 'left', 'right'; optional):\n    Position of the check icon relative to the option label, `'left'`\n    by default.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- clearButtonProps (dict; optional):\n    Props passed down to the clear button.\n\n    `clearButtonProps` is a dict with keys:\n\n- clearSearchOnChange (boolean; optional):\n    Clear search value when item is selected. Default True.\n\n- clearable (boolean; optional):\n    Determines whether the clear button should be displayed in the\n    right section when the component has value, `False` by default.\n\n- comboboxProps (dict; optional):\n    Props passed down to `Combobox` component.\n\n    `comboboxProps` is a dict with keys:\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data (list of strings; optional):\n    Data used to generate options.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- debounce (number | boolean; default False):\n    (boolean | number; default False): If True, changes to input will\n    be sent back to the Dash server only on enter or when losing\n    focus. If it's False, it will send the value back on every change.\n    If a number, it will not send anything back to the Dash server\n    until the user has stopped typing for that number of milliseconds.\n\n- description (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Description` component. If not set, description\n    is not rendered.\n\n- descriptionProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Description` component.\n\n- disabled (boolean; optional):\n    Sets `disabled` attribute on the `input` element.\n\n- dropdownOpened (boolean; optional):\n    Controlled dropdown opened state.\n\n- error (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Error` component. If not set, error is not\n    rendered.\n\n- errorProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Error` component.\n\n- filter (boolean | number | string | dict | list; optional):\n    A Function based on which items are filtered and sorted. See\n    https://www.dash-mantine-components.com/functions-as-props.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- hiddenInputProps (dict; optional):\n    Props passed down to the hidden input.\n\n- hiddenInputValuesDivider (string; optional):\n    Divider used to separate values in the hidden input `value`\n    attribute, `','` by default.\n\n- hidePickedOptions (boolean; optional):\n    Determines whether picked options should be removed from the\n    options list, `False` by default.\n\n- inputProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input` component.\n\n- inputWrapperOrder (list of a value equal to: 'label', 'description', 'error', 'input's; optional):\n    Controls order of the elements, `['label', 'description', 'input',\n    'error']` by default.\n\n- label (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Label` component. If not set, label is not\n    rendered.\n\n- labelProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Label` component.\n\n- leftSection (a list of or a singular dash component, string or number; optional):\n    Content section rendered on the left side of the input.\n\n- leftSectionPointerEvents (a value equal to: 'auto', '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):\n    Sets `pointer-events` styles on the `leftSection` element,\n    `'none'` by default.\n\n- leftSectionProps (dict; optional):\n    Props passed down to the `leftSection` element.\n\n- leftSectionWidth (string | number; optional):\n    Left section width, used to set `width` of the section and input\n    `padding-left`, by default equals to the input height.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- limit (number; optional):\n    Maximum number of options displayed at a time, `Infinity` by\n    default.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- maxDropdownHeight (string | number; optional):\n    `max-height` of the dropdown, only applicable when\n    `withScrollArea` prop is `True`, `250` by default.\n\n- maxValues (number; optional):\n    Maximum number of values, `Infinity` by default.\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- n_blur (number; default 0):\n    An integer that represents the number of times that this element\n    has lost focus.\n\n- n_submit (number; default 0):\n    An integer that represents the number of times that this element\n    has been submitted.\n\n- name (string; optional):\n    Name prop.\n\n- nothingFoundMessage (a list of or a singular dash component, string or number; optional):\n    Message displayed when no option matched current search query,\n    only applicable when `searchable` prop is set.\n\n- openOnFocus (boolean; optional):\n    If set, the dropdown opens when the input receives focus default\n    `True`.\n\n- persisted_props (list of strings; optional):\n    Properties whose user interactions will persist after refreshing\n    the component or the page. Since only `value` is allowed this prop\n    can normally be ignored.\n\n- persistence (string | number | boolean; optional):\n    Used to allow user interactions in this component to be persisted\n    when the component - or the page - is refreshed. If `persisted` is\n    truthy and hasn't changed from its previous value, a `value` that\n    the user has changed while using the app will keep that change, as\n    long as the new `value` also matches what was given originally.\n    Used in conjunction with `persistence_type`. Note:  The component\n    must have an `id` for persistence to work.\n\n- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):\n    Where persisted user changes will be stored: memory: only kept in\n    memory, reset on page refresh. local: window.localStorage, data is\n    kept after the browser quit. session: window.sessionStorage, data\n    is cleared once the browser quit.\n\n- placeholder (string; optional):\n    Placeholder.\n\n- pointer (boolean; optional):\n    Determines whether the input should have `cursor: pointer` style,\n    `False` by default.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set\n    `border-radius`, numbers are converted to rem,\n    `theme.defaultRadius` by default.\n\n- readOnly (boolean; optional):\n    Readonly.\n\n- renderOption (boolean | number | string | dict | list; optional):\n    A function to render content of the option, replaces the default\n    content of the option.  See\n    https://www.dash-mantine-components.com/functions-as-props.\n\n- required (boolean; optional):\n    Adds required attribute to the input and a red asterisk on the\n    right side of label, `False` by default.\n\n- rightSection (a list of or a singular dash component, string or number; optional):\n    Content section rendered on the right side of the input.\n\n- rightSectionPointerEvents (a value equal to: 'auto', '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):\n    Sets `pointer-events` styles on the `rightSection` element,\n    `'none'` by default.\n\n- rightSectionProps (dict; optional):\n    Props passed down to the `rightSection` element.\n\n- rightSectionWidth (string | number; optional):\n    Right section width, used to set `width` of the section and input\n    `padding-right`, by default equals to the input height.\n\n- scrollAreaProps (dict; optional):\n    Props passed down to the underlying `ScrollArea` component in the\n    dropdown.\n\n    `scrollAreaProps` is a dict with keys:\n\n- searchValue (string; optional):\n    Controlled search value.\n\n- searchable (boolean; optional):\n    Determines whether the select should be searchable, `False` by\n    default.\n\n- selectFirstOptionOnChange (boolean; optional):\n    Determines whether the first option should be selected when value\n    changes, `False` by default.\n\n- selectFirstOptionOnDropdownOpen (boolean; optional):\n    If set, the first option is selected when dropdown opens, `False`\n    by default.\n\n- size (optional):\n    Controls input `height` and horizontal `padding`, `'sm'` by\n    default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- value (list of strings; optional):\n    Controlled component value.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withAlignedLabels (boolean; optional):\n    If set, unchecked labels are aligned with the checked one\n    @,default,`False`.\n\n- withAsterisk (boolean; optional):\n    Determines whether the required asterisk should be displayed.\n    Overrides `required` prop. Does not add required attribute to the\n    input. `False` by default.\n\n- withCheckIcon (boolean; optional):\n    Determines whether check icon should be displayed near the\n    selected option label, `True` by default.\n\n- withErrorStyles (boolean; optional):\n    Determines whether the input should have red border and red text\n    color when the `error` prop is set, `True` by default.\n\n- withScrollArea (boolean; optional):\n    Determines whether the options should be wrapped with\n    `ScrollArea.AutoSize`, `True` by default.\n\n- wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the root element."
  },
  {
    "name": "Select",
    "description": "Select enables users to select an option in a dropdown.",
    "endpoint": "/components/select",
    "package": "dash_mantine_components",
    "category": "Combobox",
    "content": "\n\n## Select  \nSelect enables users to select an option in a dropdown.  \nCategory: Combobox  \n\n> Need users to select multiple items? See `MultiSelect`.  Need users to type their own options? See `TagsInput` or `Autocomplete`\n\n### Made with Combobox\n\n`Select` is built on top of [Combobox](https://mantine.dev/core/combobox/) and covers common use cases. If you need more advanced behavior or want to extend\nits functionality, you can create your own custom `Select` component. See this [GitHub repository](https://github.com/AnnMarieW/dmc_custom_components) for custom DMC component examples.\n\n\n### Simple Example\n\n`Select` component allows user to pick one option from the given data. Unlike `Autocomplete`, `Select` does not allow entering custom values.\n\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import Output, Input, html, callback\n\ncomponent = html.Div(\n    [\n        dmc.Select(\n            label=\"Select your favorite library\",\n            placeholder=\"Select one\",\n            id=\"framework-select\",\n            value=\"pd\",\n            data=[\n                {\"value\": \"pd\", \"label\": \"Pandas\"},\n                {\"value\": \"np\", \"label\": \"NumPy\"},\n                {\"value\": \"tf\", \"label\": \"TensorFlow\"},\n                {\"value\": \"torch\", \"label\": \"PyTorch\"},\n            ],\n            w=200,\n            mb=10,\n        ),\n        dmc.Text(id=\"selected-value\"),\n    ]\n)\n\n\n@callback(Output(\"selected-value\", \"children\"), Input(\"framework-select\", \"value\"))\ndef select_value(value):\n    return f\" You selected {value}\"\n```\n### Data Format\n\nThe data can be provided as either:\n* an array of strings - use when label and value are same.\n* an array of dicts with `label` and `value` properties.\n* an array of dict with `group` and `items` as keys where items are one of the previous two types.\n\n```python\ndata = [\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"]\n\n# or\n\ndata = [\n    {\"value\": \"Pandas\", \"label\": \"Pandas\"},\n    {\"value\": \"NumPy\", \"label\": \"NumPy\"},\n    {\"value\": \"TensorFlow\", \"label\": \"TensorFlow\"},\n    {\"value\": \"PyTorch\", \"label\": \"PyTorch\"},\n]\n\n# or\n\ndata = [\n    {\"group\": \"Data Analysis\", \"items\": [\"Pandas\", \"NumPy\"]},\n    {\"group\": \"Deep Learning\", \"items\": [\"TensorFlow\", \"Pytorch\"]}\n]\n\n# or\n\ndata = [\n    {\n        \"group\": \"Data Analysis\",\n        \"items\": [\n            {\"value\": \"Pandas\", \"label\": \"Pandas\"},\n            {\"value\": \"NumPy\", \"label\": \"NumPy\"},\n        ],\n    },\n    {\n        \"group\": \"Deep Learning\",\n        \"items\": [\n            {\"value\": \"TensorFlow\", \"label\": \"TensorFlow\"},\n            {\"value\": \"PyTorch\", \"label\": \"PyTorch\"},\n        ],\n    },\n]\n```\n### autoSelectOnBlur\n\nSet `autoSelectOnBlur=True` to automatically select the highlighted option when the input loses focus. To see this\nfeature in action: select an option with up/down arrows, then click outside the input:\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Select(\n    label=\"Your favorite library:\",\n    data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n    placeholder=\"Pick value\",\n    autoSelectOnBlur=True,\n    w=400,\n)\n```\n### Searchable\n\nSet `searchable=True` to allow filtering options by user input.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Select(\n    data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n    searchable=True,\n    w=200,\n)\n```\n### clearSearchOnFocus\n\nWhen `clearSearchOnFocus=True` and the `Select` is in searchable mode, the search input will be cleared each time the\nfield gains focus.  This is useful when you want the user to start with an empty search box each time, without having \nto manually delete the existing text.\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Select(\n    data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n    value=\"Pandas\",\n    searchable=True,\n    clearSearchOnFocus=True,\n)\n```\n### Nothing Found\n\nSet the `nothingFoundMessage` prop to display a given message when no options match the search query or there is \nno data available. If the `nothingFoundMessage` prop is not set, the `MultiSelect` dropdown will be hidden.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Select(\n    label=\"Pick your favorite library\",\n    data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n    searchable=True,\n    nothingFoundMessage=\"Nothing found...\",\n    w=400,\n)\n```\n### Checked option icon\nSet `checkIconPosition` prop to left or right to control position of check icon in active option. To remove the \ncheck icon, set `withCheckIcon=False`.\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Select(\n    label=\"Control check icon\",\n    data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n    value=\"NumPy\",\n    checkIconPosition=\"right\",\n    dropdownOpened=True,\n    comboboxProps={\"withinPortal\":False},\n    w=200,\n    pb=150,\n    id=\"select-check-icon\",\n\n)\n```\n### Clearable\n\nSet `clearable` prop to enable clearing selected values.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Select(\n    data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n    value=\"Pandas\",\n    clearable=True,\n    w=200,\n)\n```\n### Allow deselect\n`allowDeselect` prop determines whether the value should be deselected when user clicks on the selected option. By \ndefault, `allowDeselect` is True:\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Paper(\n    [\n        dmc.Select(\n            label=\"Option cannot be deselected\",\n            data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n            placeholder=\"Pick value\",\n            value=\"Pandas\",\n            allowDeselect=False,\n            w=400,\n        ),\n        dmc.Select(\n            label=\"Option can be deselected\",\n            description=\"This is the default behavior, click 'Pandas' in the dropdown\",\n            data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n            placeholder=\"Pick value\",\n            value=\"Pandas\",\n            allowDeselect=True,\n            w=400,\n            mt=\"md\",\n        ),\n    ]\n)\n```\n### Large Data Sets\n\nThe best strategy for large data sets is to limit the number of options that are rendered at the same time. You can\ndo it with limit prop. \n\nNote that if you use a custom `filter` function, you need to implement your own logic to limit the number of options in filter\n\nExample of `Select` with 100 000 options, 10 options are rendered at the same time:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Select(\n    label=\"100,000 options\",\n    data=[f\"Option {i}\" for i in range(100000)],\n    placeholder=\"use limit to optimize performance\",\n    limit=10,\n    searchable=True,\n    w=400,\n)\n```\n### renderOption\n\n`renderOption` function allows you to customize option rendering.\n\n\nNote: This example uses custom JavaScript defined in the assets folder. Learn more in the \"Functions As Props\" section of this document.\n\n\n```python\n\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ncomponent = ([\n    dmc.Select(\n      label=\"Select with renderOption\",\n      placeholder=\"Select text align\",\n      data=[\n        { \"value\": 'left', \"label\": 'Left' },\n        { \"value\": 'center', \"label\": 'Center' },\n        { \"value\": 'right', \"label\": 'Right' },\n        { \"value\": 'justify', \"label\": 'Justify' },\n      ],\n      renderOption={\"function\": \"renderOptionSelect\"}\n    )\n\n])\n```\n\n```javascript\nvar dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\nvar dmc = window.dash_mantine_components;\nvar iconify = window.dash_iconify;\n\n\ndmcfuncs.renderOptionSelect = function ({ option, checked }) {\n\n  const icons = {\n   left: React.createElement(iconify.DashIconify, { icon: \"mdi:format-align-left\", width: 24 }),\n   center: React.createElement(iconify.DashIconify, { icon: \"mdi:format-align-center\", width: 24 }),\n   right: React.createElement(iconify.DashIconify, { icon: \"mdi:format-align-right\", width: 24 }),\n   justify: React.createElement(iconify.DashIconify, { icon: \"mdi:format-align-justify\", width: 24 }),\n  };\n\n  const checkedIcon = React.createElement(iconify.DashIconify, {\n    icon: \"mdi:check\",\n    width: 24,\n  });\n\n  return React.createElement(\n    dmc.Group,\n    { flex: \"1\", gap: \"xs\" },\n    icons[option.value],\n    option.label,\n    checked ? checkedIcon : null\n  );\n};\n```\n\n### Options filtering\n\nBy default, `Select` filters options by checking if the option label contains input value. You can change this behavior \nwith `filter`. The filter function receives an object with the following properties as a single argument:\n - `options` – array of options or options groups, all options are in `{ value: string; label: string; disabled?: boolean }` format\n - `search` – current search query\n - `limit` – value of limit prop passed to `Select`\n\n\n\nNote: This example uses custom JavaScript defined in the assets folder. Learn more in the \"Functions As Props\" section of this document.\n\n\nExample of a custom filter function that matches options by words instead of letters sequence:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Select(\n    label=\"Your country\",\n    placeholder=\"Pick value\",\n    searchable=True,\n    data=[\n        \"Great Britain\",\n        \"Canada\",\n        \"United States\",\n    ],\n    filter={\"function\": \"filterCountries\"},\n)\n```\n\n```javascript\nvar dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\n\ndmcfuncs.filterCountries = function ({ options, search }) {\n  const queryWords = search.toLowerCase().trim().split(\" \");\n  return options.filter((option) => {\n    const words = option.label.toLowerCase().trim().split(\" \");\n    return queryWords.every((word) =>\n      words.some((labelWord) => labelWord.includes(word))\n    );\n  });\n};\n```\n\n\n### Sort options\n\nBy default, options are sorted by their position in the data array. You can change this behavior with `filter` function:\n\n\nNote: This example uses custom JavaScript defined in the assets folder. Learn more in the \"Functions As Props\" section of this document.\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Select(\n    label=\"Your favorite Python library\",\n    placeholder=\"Pick value\",\n    searchable=True,\n    nothingFoundMessage=\"Nothing found...\",\n    data=[\n        \"4 – NumPy\",\n        \"1 – Pandas\",\n        \"3 – Scikit-learn\",\n        \"2 – Plotly\",\n    ],\n    filter={\"function\": \"filterPythonLibs\"},\n)\n```\n\n```javascript\nvar dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\n\ndmcfuncs.filterPythonLibs = function ({ options, search }) {\n  const query = search.toLowerCase().trim();\n  const result = options.filter((option) =>\n    option.label.toLowerCase().trim().includes(query)\n  );\n  result.sort((a, b) => a.label.localeCompare(b.label));\n  return result;\n};\n```\n\n\n\n### Scrollable dropdown\n\nBy default, the options list is wrapped with `ScrollArea.Autosize`. You can control dropdown max-height with \n`maxDropdownHeight` prop if you do not change the default settings.\n\nIf you want to use native scrollbars, set `withScrollArea=False`. Note that in this case, you will need to change \ndropdown styles with `Styles API`.\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Paper(\n    [\n        dmc.Select(\n            label=\"Scrollable dropdown\",\n            data=[f\"Option {i}\" for i in range(100)],\n            placeholder=\"Pick value\",\n            maxDropdownHeight=300,\n            w=400,\n        ),\n        dmc.Select(\n            label=\"With native scroll\",\n            data=[f\"Option {i}\" for i in range(100)],\n            placeholder=\"Pick value\",\n            withScrollArea=False,\n            styles={\"dropdown\": {\"maxHeight\": 200, \"overflowY\": \"auto\"}},\n            w=400,\n            mt=\"md\",\n        ),\n    ]\n)\n```\n### Grouping Items\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Select(\n    data=[\n        {\n            \"group\": \"Data Analysis\",\n            \"items\": [\n                {\"value\": \"Pandas\", \"label\": \"Pandas\"},\n                {\"value\": \"NumPy\", \"label\": \"NumPy\"},\n            ],\n        },\n        {\n            \"group\": \"Deep Learning\",\n            \"items\": [\n                {\"value\": \"TensorFlow\", \"label\": \"TensorFlow\"},\n                {\"value\": \"PyTorch\", \"label\": \"PyTorch\"},\n            ],\n        },\n    ],\n    w=400,\n)\n```\n### Combobox props\nYou can override `Combobox` props with `comboboxProps`. It is useful when you need to change some of the props that are\nnot exposed by `Select`, for example `withinPortal`:\n\n```python\ndmc.Select(comboboxProps={\"withinPortal\": False})\n```\n\n\n### Change dropdown z-index\n\n\n```python\ndmc.Select(comboboxProps={\"zIndex\": 1000})\n```\n\n### Inside Popover\n\nTo use `Select` inside popover, you need to set `withinPortal=False`:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Popover(\n    width=300,\n    position=\"bottom\",\n    withArrow=True,\n    shadow=\"md\",\n    children=[\n        dmc.PopoverTarget(dmc.Button(\"Toggle Popover\")),\n        dmc.PopoverDropdown(\n            dmc.Select(\n                label=\"Your favorite library\",\n                placeholder=\"Pick value\",\n                data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n                comboboxProps={\"withinPortal\": False},\n            )\n        ),\n    ],\n)\n```\n### Dropdown open in a callback\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import Output, Input, html, callback\n\ncomponent = html.Div(\n    [\n        dmc.Button(\"Toggle dropdown\", id=\"btn-select-opened\", n_clicks=0),\n        dmc.Select(\n            label=\"Select your favorite library\",\n            placeholder=\"Select value\",\n            id=\"select-opened\",\n            value=\"pd\",\n            data=[\n                {\"value\": \"pd\", \"label\": \"Pandas\"},\n                {\"value\": \"np\", \"label\": \"NumPy\"},\n                {\"value\": \"tf\", \"label\": \"TensorFlow\"},\n                {\"value\": \"torch\", \"label\": \"PyTorch\"},\n            ],\n            comboboxProps={\"position\": \"bottom\", \"middlewares\": {\"flip\": False, \"shift\": False}},\n            w=400,\n            mb=10,\n        ),\n    ]\n)\n\n\n@callback(\n    Output(\"select-opened\", \"dropdownOpened\"), Input(\"btn-select-opened\", \"n_clicks\")\n)\ndef select_value(n):\n    if n % 2 == 0:\n        return False\n    return True\n```\n### Dropdown position\n\nBy default, the dropdown is displayed below the input if there is enough space; otherwise it is displayed above the\ninput. You can change this behavior by setting `position` and `middlewares` props, which are passed down to the\nunderlying `Popover` component.\n\nExample of dropdown that is always displayed above the input:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Select(\n    label=\"Your favorite library\",\n    placeholder=\"Pick value\",\n    data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n    comboboxProps={\"position\": \"top\", \"middlewares\": {\"flip\": False, \"shift\": False}},\n)\n```\n### Dropdown width\n\nTo change dropdown width, set `width` prop in `comboboxProps`. By default, dropdown width is equal to the input width.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Select(\n    label=\"Your favorite library\",\n    placeholder=\"Pick value\",\n    data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n    comboboxProps={\"position\": \"bottom-start\", \"width\": 200},\n)\n```\n### Dropdown offset\n\nTo change dropdown offset, set `offset` prop in `comboboxProps`:  \n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Select(\n    label=\"Your favorite library\",\n    placeholder=\"Pick value\",\n    data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n    comboboxProps={\n        \"position\": \"bottom\",\n        \"middlewares\": {\"flip\": False, \"shift\": False},\n        \"offset\": 0,\n    },\n)\n```\n### Dropdown animation\nBy default, dropdown animations are disabled. To enable them, you can set `transitionProps`, which will be passed\ndown to the underlying `Transition` component.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Select(\n    label=\"Your favorite library\",\n    placeholder=\"Pick values\",\n    data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n    comboboxProps={\"transitionProps\": {\"transition\": \"pop\", \"duration\": 200}},\n)\n```\n### Dropdown padding\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Paper(\n    [\n        dmc.Select(\n            label=\"Zero padding\",\n            data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n            placeholder=\"Pick value\",\n            comboboxProps={\"dropdownPadding\": 0},\n            w=400,\n        ),\n        dmc.Select(\n            label=\"10px padding\",\n            data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n            placeholder=\"Pick value\",\n            comboboxProps={\"dropdownPadding\": 10},\n            w=400,\n            mt=\"md\",\n        ),\n    ]\n)\n```\n### Dropdown shadow\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Select(\n    label=\"Your favorite library\",\n    placeholder=\"Pick value\",\n    data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n    comboboxProps={\"shadow\": \"md\"},\n)\n```\n### Left and right sections\n\n`Select` supports `leftSection` and `rightSection` props. These sections are rendered with absolute position\ninside the input wrapper. You can use them to display icons, input controls or any other elements.\n\nYou can use the following props to control sections styles and content:\n\n- `rightSection`/`leftSection` – component to render on the corresponding side of input\n- `rightSectionWidth`/`leftSectionWidth` – controls width of the right section and padding on the corresponding side of the input. By default, it is controlled by component size prop.\n- `rightSectionPointerEvents`/`leftSectionPointerEvents` – controls pointer-events property of the section. If you want to render a non-interactive element, set it to none to pass clicks through to the input.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ncomponent = dmc.Paper(\n    [\n        dmc.Select(\n            label=\"Your favorite library\",\n            data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n            placeholder=\"Pick values\",\n            leftSectionPointerEvents=\"none\",\n            leftSection=DashIconify(icon=\"bi-book\"),\n            w=400,\n        ),\n        dmc.Select(\n            label=\"Your favorite library\",\n            data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n            placeholder=\"Pick values\",\n            rightSectionPointerEvents=\"none\",\n            rightSection=DashIconify(icon=\"bi-book\"),\n            w=400,\n            mt=\"md\",\n        ),\n    ]\n)\n```\n### Input Props\n`Select` component supports `Input` and Input Wrapper components features and all input element props.\n`Select` documentation does not include all features supported by the component – see Input documentation to learn about all available features.\n\n \n### Invalid State And Error\n\n\nNote: Dash adds some css by default which can lead you to see a red box when setting the `required` or `error` \nprop to True. Use the below css snippet to counteract it.\n\n```css\ninput:invalid {\n    outline: none !important;\n}\n```\n\nYou can let the user know if the selected value is invalid. In the example below, you will get an error message if you\nselect less than 2 currency pairs.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import Output, Input, callback\n\ncomponent = dmc.Select(\n    data=[\"USDINR\", \"EURUSD\", \"USDTWD\", \"USDJPY\"],\n    id=\"select-error\",\n    value=\"USDJPY\",\n    w=200,\n)\n\n\n@callback(Output(\"select-error\", \"error\"), Input(\"select-error\", \"value\"))\ndef select_value(value):\n    return \"JPY is not allowed!\" if value == \"USDJPY\" else \"\"\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n| Name        | Static selector             | Description                                      |\n|:------------|:----------------------------|:-------------------------------------------------|\n| wrapper     | .mantine-Select-wrapper     | Root element of the Input                        |\n| input       | .mantine-Select-input       | Input element                                    |\n| section     | .mantine-Select-section     | Left and right sections                          |\n| root        | .mantine-Select-root        | Root element                                     |\n| label       | .mantine-Select-label       | Label element                                    |\n| required    | .mantine-Select-required    | Required asterisk element, rendered inside label |\n| description | .mantine-Select-description | Description element                              |\n| error       | .mantine-Select-error       | Error element                                    |\n| dropdown    | .mantine-Select-dropdown    | Dropdown root element                            |\n| options     | .mantine-Select-options     | Options wrapper                                  |\n| option      | .mantine-Select-option      | Option                                           |\n| empty       | .mantine-Select-empty       | Nothing found message                            |\n| group       | .mantine-Select-group       | Options group wrapper                            |\n| groupLabel  | .mantine-Select-groupLabel  | Options group label                              |\n\n\n### Keyword Arguments\n#### Select\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- allowDeselect (boolean; optional):\n    Determines whether it should be possible to deselect value by\n    clicking on the selected option, `True` by default.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- autoSelectOnBlur (boolean; optional):\n    If set, the highlighted option is selected when the input loses\n    focus. default `False`.\n\n- checkIconPosition (a value equal to: 'left', 'right'; optional):\n    Position of the check icon relative to the option label, `'left'`\n    by default.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- clearButtonProps (dict; optional):\n    Props passed down to the clear button.\n\n    `clearButtonProps` is a dict with keys:\n\n- clearSearchOnFocus (boolean; default False):\n    Clears search value when dropdown is opened.  Ignored if\n    searchable=False.\n\n- clearable (boolean; optional):\n    Determines whether the clear button should be displayed in the\n    right section when the component has value, `False` by default.\n\n- comboboxProps (dict; optional):\n    Props passed down to `Combobox` component.\n\n    `comboboxProps` is a dict with keys:\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data (list of strings; optional):\n    Data used to generate options.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- debounce (number | boolean; default False):\n    (boolean | number; default False): If True, changes to input will\n    be sent back to the Dash server only on enter or when losing\n    focus. If it's False, it will send the value back on every change.\n    If a number, it will not send anything back to the Dash server\n    until the user has stopped typing for that number of milliseconds.\n\n- description (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Description` component. If not set, description\n    is not rendered.\n\n- descriptionProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Description` component.\n\n- disabled (boolean; optional):\n    Sets `disabled` attribute on the `input` element.\n\n- dropdownOpened (boolean; optional):\n    Controlled dropdown opened state.\n\n- error (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Error` component. If not set, error is not\n    rendered.\n\n- errorProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Error` component.\n\n- filter (boolean | number | string | dict | list; optional):\n    A Function based on which items are filtered and sorted. See\n    https://www.dash-mantine-components.com/functions-as-props.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- hiddenInputProps (dict; optional):\n    Props passed down to the hidden input.\n\n- inputProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input` component.\n\n- inputWrapperOrder (list of a value equal to: 'label', 'description', 'error', 'input's; optional):\n    Controls order of the elements, `['label', 'description', 'input',\n    'error']` by default.\n\n- label (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Label` component. If not set, label is not\n    rendered.\n\n- labelProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Label` component.\n\n- leftSection (a list of or a singular dash component, string or number; optional):\n    Content section rendered on the left side of the input.\n\n- leftSectionPointerEvents (a value equal to: 'auto', '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):\n    Sets `pointer-events` styles on the `leftSection` element,\n    `'none'` by default.\n\n- leftSectionProps (dict; optional):\n    Props passed down to the `leftSection` element.\n\n- leftSectionWidth (string | number; optional):\n    Left section width, used to set `width` of the section and input\n    `padding-left`, by default equals to the input height.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- limit (number; optional):\n    Maximum number of options displayed at a time, `Infinity` by\n    default.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- maxDropdownHeight (string | number; optional):\n    `max-height` of the dropdown, only applicable when\n    `withScrollArea` prop is `True`, `250` by default.\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- n_blur (number; default 0):\n    An integer that represents the number of times that this element\n    has lost focus.\n\n- n_submit (number; default 0):\n    An integer that represents the number of times that this element\n    has been submitted.\n\n- name (string; optional):\n    Name prop.\n\n- nothingFoundMessage (a list of or a singular dash component, string or number; optional):\n    Message displayed when no option matched current search query,\n    only applicable when `searchable` prop is set.\n\n- openOnFocus (boolean; optional):\n    If set, the dropdown opens when the input receives focus default\n    `True`.\n\n- persisted_props (list of strings; optional):\n    Properties whose user interactions will persist after refreshing\n    the component or the page. Since only `value` is allowed this prop\n    can normally be ignored.\n\n- persistence (string | number | boolean; optional):\n    Used to allow user interactions in this component to be persisted\n    when the component - or the page - is refreshed. If `persisted` is\n    truthy and hasn't changed from its previous value, a `value` that\n    the user has changed while using the app will keep that change, as\n    long as the new `value` also matches what was given originally.\n    Used in conjunction with `persistence_type`. Note:  The component\n    must have an `id` for persistence to work.\n\n- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):\n    Where persisted user changes will be stored: memory: only kept in\n    memory, reset on page refresh. local: window.localStorage, data is\n    kept after the browser quit. session: window.sessionStorage, data\n    is cleared once the browser quit.\n\n- placeholder (string; optional):\n    Placeholder.\n\n- pointer (boolean; optional):\n    Determines whether the input should have `cursor: pointer` style,\n    `False` by default.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set\n    `border-radius`, numbers are converted to rem,\n    `theme.defaultRadius` by default.\n\n- readOnly (boolean; optional):\n    Readonly.\n\n- renderOption (boolean | number | string | dict | list; optional):\n    A function to render content of the option, replaces the default\n    content of the option.  See\n    https://www.dash-mantine-components.com/functions-as-props.\n\n- required (boolean; optional):\n    Adds required attribute to the input and a red asterisk on the\n    right side of label, `False` by default.\n\n- rightSection (a list of or a singular dash component, string or number; optional):\n    Content section rendered on the right side of the input.\n\n- rightSectionPointerEvents (a value equal to: 'auto', '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):\n    Sets `pointer-events` styles on the `rightSection` element,\n    `'none'` by default.\n\n- rightSectionProps (dict; optional):\n    Props passed down to the `rightSection` element.\n\n- rightSectionWidth (string | number; optional):\n    Right section width, used to set `width` of the section and input\n    `padding-right`, by default equals to the input height.\n\n- scrollAreaProps (dict; optional):\n    Props passed down to the underlying `ScrollArea` component in the\n    dropdown.\n\n    `scrollAreaProps` is a dict with keys:\n\n- searchValue (string; optional):\n    Controlled search value.\n\n- searchable (boolean; optional):\n    Determines whether the select should be searchable, `False` by\n    default.\n\n- selectFirstOptionOnChange (boolean; optional):\n    Determines whether the first option should be selected when value\n    changes, `False` by default.\n\n- selectFirstOptionOnDropdownOpen (boolean; optional):\n    If set, the first option is selected when dropdown opens, `False`\n    by default.\n\n- size (optional):\n    Controls input `height` and horizontal `padding`, `'sm'` by\n    default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- value (string; optional):\n    Controlled component value.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withAlignedLabels (boolean; optional):\n    If set, unchecked labels are aligned with the checked one\n    @,default,`False`.\n\n- withAsterisk (boolean; optional):\n    Determines whether the required asterisk should be displayed.\n    Overrides `required` prop. Does not add required attribute to the\n    input. `False` by default.\n\n- withCheckIcon (boolean; optional):\n    Determines whether check icon should be displayed near the\n    selected option label, `True` by default.\n\n- withErrorStyles (boolean; optional):\n    Determines whether the input should have red border and red text\n    color when the `error` prop is set, `True` by default.\n\n- withScrollArea (boolean; optional):\n    Determines whether the options should be wrapped with\n    `ScrollArea.AutoSize`, `True` by default.\n\n- wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the root element."
  },
  {
    "name": "TagsInput",
    "description": "Capture a list of values from user with free input and suggestions",
    "endpoint": "/components/tagsinput",
    "package": "dash_mantine_components",
    "category": "Combobox",
    "content": "\n\n## TagsInput  \nCapture a list of values from user with free input and suggestions  \nCategory: Combobox  \n\n### Made with Combobox\n\n`TagsInput` is built on top of [Combobox](https://mantine.dev/core/combobox/) and covers common use cases. If you need more advanced behavior or want to extend\nits functionality, you can create your own custom `TagsInput` component.  See this [GitHub repository](https://github.com/AnnMarieW/dmc_custom_components) for custom DMC component examples.\n\n\n\n### Simple Example\n\n`TagsInput` provides a way to enter multiple values. It can be used with suggestions or without them.\n`TagsInput` is similar to MultiSelect, but it allows entering custom values.\n\nBy default, `enter key` and `,` will select the typed value.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import Output, Input, html, callback\n\ncomponent = html.Div(\n    [\n        dmc.TagsInput(\n            label=\"Select frameworks\",\n            placeholder=\"Select all you like!\",\n            id=\"framework-tags-input\",\n            value=[\"ng\", \"vue\"],\n            w=400,\n            mb=10,\n        ),\n        dmc.Text(id=\"tags-input-value\"),\n    ]\n)\n\n\n@callback(\n    Output(\"tags-input-value\", \"children\"), Input(\"framework-tags-input\", \"value\")\n)\ndef select_value(value):\n    return \", \".join(value)\n```\n### Data Format\n\nNote that the `data` format is different than components like `Select` and `Multi Select`.  See [Why can I not use value/label data structure with TagsInput?](https://help.mantine.dev/q/autocomplete-value-label)\n\n`TagsInput` `data` prop accepts data in one of the following formats:\n\n```python\ndata = [\"React\", \"Angular\", \"Svelte\", \"Vue\"]\n\n# or\n\ndata = [\n    {\"group\": \"Frontend\", \"items\": [\"React\", \"Angular\"]},\n    {\"group\": \"Backend\", \"items\": [\"Express\", \"Django\"]}\n]\n```\n\n### Clearable\n\nSet `clearable` prop to display the clear button in the right section. The button is not displayed when:\n\n* The component does not have a value\n* The component is disabled\n* The component is read only\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.TagsInput(\n    label=\"Press Enter to submit a tag\",\n    value=[\"React\"],\n    w=400,\n    clearable=True,\n)\n```\n### Max selected values\n\nYou can limit the number of selected values with `maxTags` prop. This will not allow adding more values once the limit is reached.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.TagsInput(\n    label=\"Select frameworks\",\n    description=\"You can select a maximum of 3 frameworks.\",\n    maxTags=3,\n    w=400,\n)\n```\n### Accept value on blur\nBy default, if the user types a value and blurs the input, the value is added to the list. You can change this behavior\nby setting `acceptValueOnBlur` to `False`. In this case, the value is added only when the user presses `Enter` or clicks\non a suggestion.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import Output, Input, html, callback\n\ncomponent = html.Div(\n    [\n        dmc.TagsInput(\n            label=\"Value is accepted on blur\",\n            placeholder=\"Select all you like!\",\n            id=\"framework-tags-input1\",\n            value=[\"Pandas\", \"NumPy\"],\n            w=400,\n            mb=10,\n        ),\n        dmc.Text(id=\"tags-input-value1\", mb=\"xl\"),\n        dmc.TagsInput(\n            label=\"Value IS NOT accepted on blur\",\n            placeholder=\"Select all you like!\",\n            id=\"framework-tags-input2\",\n            value=[\"Pandas\", \"NumPy\"],\n            acceptValueOnBlur=False,\n            w=400,\n            mb=10,\n        ),\n        dmc.Text(id=\"tags-input-value2\"),\n    ]\n)\n\n\n@callback(\n    Output(\"tags-input-value1\", \"children\"), Input(\"framework-tags-input1\", \"value\")\n)\ndef select_value(value):\n    return f\"You selected {value}\"\n\n\n@callback(\n    Output(\"tags-input-value2\", \"children\"), Input(\"framework-tags-input2\", \"value\")\n)\ndef select_value(value):\n    return f\"You selected {value}\"\n```\n### Allow duplicates\n\nBy default, `TagsInput` does not allow adding duplicate values, but you can change this behavior by setting `allowDuplicates` prop.\nValue is considered duplicate if it is already present in the `value` array, regardless of the case and trailing whitespace.\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.TagsInput(\n    label=\"Press Enter to submit a tag\",\n    placeholder=\"Duplicates are allowed\",\n    allowDuplicates=True,\n    w=400,\n)\n```\n### Split chars\n\nBy default, `TagsInput` splits values by comma (`,`), but you can change this behavior by setting `splitChars` prop to an array of strings.\nAll values from `splitChars` cannot be included in the final value. Values are also split on paste.\n\nExample of splitting by `,`, `|` and `space`:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.TagsInput(\n    label=\"Press Enter to submit a tag\",\n    placeholder=\"Enter tag\",\n    splitChars=[\",\", \" \", \"|\"],\n    w=400,\n)\n```\n### With suggestions\n\n`TagsInput` can be used with suggestions, it will render suggestions list under input and allow selecting suggestions \nwith keyboard or mouse. Note that user is not limited to suggestions, it is still possible to enter custom values. \nIf you want to allow values only from suggestions, use [MultiSelect](/components/multiselect) component instead.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.TagsInput(\n    w=400,\n    label=\"Press Enter to submit a tag\",\n    placeholder=\"Pick tag from list\",\n    data=[\"React\", \"Angular\", \"Svelte\"],\n)\n```\n### Grouping\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.TagsInput(\n    data=[\n        {\n            \"group\": \"Data Analysis\",\n            \"items\": [\n                {\"value\": \"Pandas\", \"label\": \"Pandas\"},\n                {\"value\": \"NumPy\", \"label\": \"NumPy\"},\n            ],\n        },\n        {\n            \"group\": \"Deep Learning\",\n            \"items\": [\n                {\"value\": \"TensorFlow\", \"label\": \"TensorFlow\"},\n                {\"value\": \"PyTorch\", \"label\": \"PyTorch\"},\n            ],\n        },\n    ],\n    w=400,\n)\n```\n### Large data sets\nThe best strategy for large data sets is to limit the number of options that are rendered at the same time. You can do\nit with `limit` prop. \n\nExample of `TagsInput` with 100 000 options, 5 options are rendered at the same time:\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.TagsInput(\n    label=\"100,000 options\",\n    data=[f\"Option {i}\" for i in range(100000)],\n    placeholder=\"use limit to optimize performance\",\n    limit=5,\n    w=400,\n)\n```\n### renderOption\n\n`renderOption` function allows you to customize option rendering.\n\n\nNote: This example uses custom JavaScript defined in the assets folder. Learn more in the \"Functions As Props\" section of this document.\n\n\n```python\nimport dash_mantine_components as dmc\n\ngroceries = {\n    \"Apples\": {\n        \"emoji\": \"🍎\",\n        \"description\": \"Crisp and juicy snacking delight\",\n    },\n    \"Bread\": {\n        \"emoji\": \"🍞\",\n        \"description\": \"Freshly baked daily essential\",\n    },\n    \"Bananas\": {\n        \"emoji\": \"🍌\",\n        \"description\": \"Perfect for a healthy breakfast\",\n    },\n    \"Eggs\": {\n        \"emoji\": \"🥚\",\n        \"description\": \"Versatile protein source for cooking\",\n    },\n    \"Broccoli\": {\n        \"emoji\": \"🥦\",\n        \"description\": \"Nutrient-rich green vegetable\",\n    },\n}\n\ncomponent = dmc.TagsInput(\n    label=\"Groceries\",\n    placeholder=\"Pick tag from list or type to add new\",\n    data=list(groceries.keys()),\n    maxDropdownHeight=300,\n    renderOption={\n        \"function\": \"renderGroceryOption\",\n        \"options\": {\"data\": groceries},\n    },\n)\n```\n\n```javascript\nvar dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\nvar dmc = window.dash_mantine_components;\n\ndmcfuncs.renderGroceryOption = function ({ option }, { data }) {\n  const item = data[option.value];\n\n  return React.createElement(\n    dmc.Group,\n    null,\n    React.createElement(\n      dmc.Text,\n      { span: true, fz: 24 },\n      item.emoji\n    ),\n    React.createElement(\n      \"div\",\n      null,\n      React.createElement(dmc.Text, { key: \"label\"}, option.value, ),\n      React.createElement(\n        dmc.Text,\n        { size: \"xs\", opacity: 0.5, key: \"description\" },\n        item.description\n      )\n    )\n  );\n};\n```\n\n\n### Options filtering\n\nBy default, `TagsInput` filters options by checking if the option label contains input value. You can change this behavior \nwith `filter`. The filter function receives an object with the following properties as a single argument:\n - `options` – array of options or options groups, all options are in `{ value: string; label: string; disabled?: boolean }` format\n - `search` – current search query\n - `limit` – value of limit prop passed to `Select`\n\n\n\nNote: This example uses custom JavaScript defined in the assets folder. Learn more in the \"Functions As Props\" section of this document.\n\n\nExample of a custom filter function that matches options by words instead of letters sequence:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.TagsInput(\n    label=\"What countries have you visited?\",\n    placeholder=\"Pick value or enter anything\",\n    data=[\n        \"Great Britain\",\n        \"Canada\",\n        \"United States\",\n    ],\n    filter={\"function\": \"filterCountries\"},\n)\n```\n\n```javascript\nvar dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\n\ndmcfuncs.filterCountries = function ({ options, search }) {\n  const queryWords = search.toLowerCase().trim().split(\" \");\n  return options.filter((option) => {\n    const words = option.label.toLowerCase().trim().split(\" \");\n    return queryWords.every((word) =>\n      words.some((labelWord) => labelWord.includes(word))\n    );\n  });\n};\n```\n\n\n### Sort options\n\nBy default, options are sorted by their position in the data array. You can change this behavior with `filter` function:\n\n\nNote: This example uses custom JavaScript defined in the assets folder. Learn more in the \"Functions As Props\" section of this document.\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.TagsInput(\n    label=\"Your favorite Python library\",\n    placeholder=\"Pick value or enter anything\",\n    data=[\n        \"4 – NumPy\",\n        \"1 – Pandas\",\n        \"3 – Scikit-learn\",\n        \"2 – Plotly\",\n    ],\n    filter={\"function\": \"filterPythonLibs\"},\n)\n```\n\n```javascript\nvar dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\n\ndmcfuncs.filterPythonLibs = function ({ options, search }) {\n  const query = search.toLowerCase().trim();\n  const result = options.filter((option) =>\n    option.label.toLowerCase().trim().includes(query)\n  );\n  result.sort((a, b) => a.label.localeCompare(b.label));\n  return result;\n};\n```\n\n\n\n\n### Scrollable dropdown\n\nBy default, the options list is wrapped with `ScrollArea.Autosize`. You can control dropdown max-height with \n`maxDropdownHeight` prop if you do not change the default settings.\n\nIf you want to use native scrollbars, set `withScrollArea=False`. Note that in this case, you will need to change \ndropdown styles with `Styles API`.\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Paper(\n    [\n        dmc.TagsInput(\n            label=\"Scrollable dropdown\",\n            data=[f\"Option {i}\" for i in range(100)],\n            placeholder=\"Pick value\",\n            maxDropdownHeight=300,\n            w=400,\n        ),\n        dmc.TagsInput(\n            label=\"With native scroll\",\n            data=[f\"Option {i}\" for i in range(100)],\n            placeholder=\"Pick value\",\n            withScrollArea=False,\n            styles={\"dropdown\": {\"maxHeight\": 200, \"overflowY\": \"auto\"}},\n            w=400,\n            mt=\"md\",\n        ),\n    ]\n)\n```\n### Disabled options  \n\nWhen an option is disabled, it cannot be selected and is ignored in keyboard navigation. Note that user can still enter\ndisabled option as a value. If you want to prohibit certain values, use a callback to filter them out.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.TagsInput(\n    label=\"Enter tags\",\n    placeholder=\"Some tags are disabled\",\n    data = [\n        {\"value\": \"Pandas\"},\n        {\"value\": \"NumPy\"},\n        {\"value\": \"TensorFlow\", \"disabled\": True},\n        {\"value\": \"PyTorch\", \"disabled\": True},\n    ],\n    w=400,\n)\n```\n### Combobox props\nYou can override `Combobox` props with `comboboxProps`. It is useful when you need to change some of the props that are\nnot exposed by `TagsInput`, for example `withinPortal`:\n\n```python\ndmc.TagsInput(comboboxProps={\"withinPortal\": False})\n```\n\n\n### Change dropdown z-index\n\n```python\ndmc.TagsInput(comboboxProps={\"zIndex\": 1000})\n```\n\n### Inside Popover\n\nTo use `TagsInput` inside popover, you need to set `withinPortal=False`:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Popover(\n    width=300,\n    position=\"bottom\",\n    withArrow=True,\n    shadow=\"md\",\n    children=[\n        dmc.PopoverTarget(dmc.Button(\"Toggle Popover\")),\n        dmc.PopoverDropdown(\n            dmc.TagsInput(\n                label=\"Your favorite library\",\n                placeholder=\"Pick value\",\n                data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n                comboboxProps={\"withinPortal\": False},\n            )\n        ),\n    ],\n)\n```\n### Dropdown open in a callback\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import Output, Input, html, callback\n\ncomponent = html.Div(\n    [\n        dmc.Button(\"Toggle dropdown\", id=\"btn-tags-opened\", n_clicks=0),\n        dmc.TagsInput(\n            label=\"Select your favorite library\",\n            placeholder=\"Select value\",\n            id=\"tags-opened\",\n            value=[\"pd\"],\n            data=[\n                {\"value\": \"pd\", \"label\": \"Pandas\"},\n                {\"value\": \"np\", \"label\": \"NumPy\"},\n                {\"value\": \"tf\", \"label\": \"TensorFlow\"},\n                {\"value\": \"torch\", \"label\": \"PyTorch\"},\n            ],\n            w=400,\n            mb=10,\n        ),\n    ]\n)\n\n\n@callback(\n    Output(\"tags-opened\", \"dropdownOpened\"), Input(\"btn-tags-opened\", \"n_clicks\")\n)\ndef select_value(n):\n    if n % 2 == 0:\n        return False\n    return True\n```\n### Dropdown position\n\nBy default, the dropdown is displayed below the input if there is enough space; otherwise it is displayed above the\ninput. You can change this behavior by setting `position` and `middlewares` props, which are passed down to the\nunderlying `Popover` component.\n\nExample of dropdown that is always displayed above the input:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.TagsInput(\n    label=\"Your favorite library\",\n    placeholder=\"Pick value\",\n    data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n    comboboxProps={\"position\": \"top\", \"middlewares\": {\"flip\": False, \"shift\": False}},\n)\n```\n### Dropdown width\n\nTo change dropdown width, set `width` prop in `comboboxProps`. By default, dropdown width is equal to the input width.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.TagsInput(\n    label=\"Your favorite library\",\n    placeholder=\"Pick value\",\n    data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n    comboboxProps={\"position\": \"bottom-start\", \"width\": 200},\n)\n```\n### Dropdown offset\n\nTo change dropdown offset, set `offset` prop in `comboboxProps`:  \n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.TagsInput(\n    label=\"Your favorite library\",\n    placeholder=\"Pick value\",\n    data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n    comboboxProps={\n        \"position\": \"bottom\",\n        \"middlewares\": {\"flip\": False, \"shift\": False},\n        \"offset\": 0,\n    },\n)\n```\n### Dropdown animation\nBy default, dropdown animations are disabled. To enable them, you can set `transitionProps`, which will be passed\ndown to the underlying `Transition` component.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.TagsInput(\n    label=\"Your favorite library\",\n    placeholder=\"Pick values\",\n    data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n    comboboxProps={\"transitionProps\": {\"transition\": \"pop\", \"duration\": 200}},\n)\n```\n### Dropdown padding\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Paper(\n    [\n        dmc.TagsInput(\n            label=\"Zero padding\",\n            data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n            placeholder=\"Pick value\",\n            comboboxProps={\"dropdownPadding\": 0},\n            w=400,\n        ),\n        dmc.TagsInput(\n            label=\"10px padding\",\n            data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n            placeholder=\"Pick value\",\n            comboboxProps={\"dropdownPadding\": 10},\n            w=400,\n            mt=\"md\",\n        ),\n    ]\n)\n```\n### Dropdown shadow\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.TagsInput(\n    label=\"Your favorite library\",\n    placeholder=\"Pick value\",\n    data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n    comboboxProps={\"shadow\": \"md\"},\n)\n```\n### Left and right sections\n\n`MultiSelect` supports `leftSection` and `rightSection` props. These sections are rendered with absolute position\ninside the input wrapper. You can use them to display icons, input controls or any other elements.\n\nYou can use the following props to control sections styles and content:\n\n- `rightSection`/`leftSection` – component to render on the corresponding side of input\n- `rightSectionWidth`/`leftSectionWidth` – controls width of the right section and padding on the corresponding side of the input. By default, it is controlled by component size prop.\n- `rightSectionPointerEvents`/`leftSectionPointerEvents` – controls pointer-events property of the section. If you want to render a non-interactive element, set it to none to pass clicks through to the input.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ncomponent = dmc.Paper(\n    [\n        dmc.TagsInput(\n            label=\"Your favorite library\",\n            data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n            placeholder=\"Pick values\",\n            leftSectionPointerEvents=\"none\",\n            leftSection=DashIconify(icon=\"bi-book\"),\n            w=400,\n        ),\n        dmc.TagsInput(\n            label=\"Your favorite library\",\n            data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n            placeholder=\"Pick values\",\n            rightSectionPointerEvents=\"none\",\n            rightSection=DashIconify(icon=\"bi-book\"),\n            w=400,\n            mt=\"md\",\n        ),\n    ]\n)\n```\n### Input Props\n`TagsInput` component supports `Input` and Input Wrapper components features and all input element props.\n`TagsInput` documentation does not include all features supported by the component – see Input documentation to learn about all available features.\n\n \n### Read only\nSet `readOnly` to make the input read only. When `readOnly` is set, `TagsInput` will not show suggestions and value\ncannot be updated by the user entering data in the input.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.TagsInput(\n    label=\"Read only\",\n    placeholder=\"Enter tag\",\n    readOnly=True,\n    value=[\"First\", \"Second\"],\n    w=400,\n)\n```\n### Disabled\nSet `disabled` to disable the input. When `disabled` is set, user cannot interact with the input and `TagsInput` will not show suggestions.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.TagsInput(\n    label=\"Disabled\",\n    disabled=True,\n    value=[\"First\", \"Second\"],\n    w=400,\n)\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\nRefer to the Mantine TagsInput Style API [interactive demo](https://mantine.dev/core/tags-input/#styles-api) for help in identifying each selector.\n\n\n| Name        | Static selector                | Description                                      |\n|:------------|:-------------------------------|:-------------------------------------------------|\n| wrapper     | .mantine-TagsInput-wrapper     | Root element of the Input                        |\n| input       | .mantine-TagsInput-input       | Input element                                    |\n| section     | .mantine-TagsInput-section     | Left and right sections                          |\n| root        | .mantine-TagsInput-root        | Root element                                     |\n| label       | .mantine-TagsInput-label       | Label element                                    |\n| required    | .mantine-TagsInput-required    | Required asterisk element, rendered inside label |\n| description | .mantine-TagsInput-description | Description element                              |\n| error       | .mantine-TagsInput-error       | Error element                                    |\n| dropdown    | .mantine-TagsInput-dropdown    | Dropdown root element                            |\n| options     | .mantine-TagsInput-options     | Options wrapper                                  |\n| option      | .mantine-TagsInput-option      | Option                                           |\n| empty       | .mantine-TagsInput-empty       | Nothing found message                            |\n| group       | .mantine-TagsInput-group       | Options group wrapper                            |\n| groupLabel  | .mantine-TagsInput-groupLabel  | Options group label                              |\n| pill        | .mantine-TagsInput-pill        | Value pill                                       |\n| inputField  | .mantine-TagsInput-inputField  | Input field                                      |\n| pillsList   | .mantine-TagsInput-pillsList   | List of pills, also contains input field         |\n\n\n### Keyword Arguments\n#### TagsInput\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- acceptValueOnBlur (boolean; optional):\n    Determines whether the value typed in by the user but not\n    submitted should be accepted when the input is blurred, True by\n    default.\n\n- allowDuplicates (boolean; optional):\n    Determines whether duplicate tags are allowed, `False` by default.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- clearButtonProps (dict; optional):\n    Props passed down to the clear button.\n\n    `clearButtonProps` is a dict with keys:\n\n- clearable (boolean; optional):\n    Determines whether the clear button should be displayed in the\n    right section when the component has value, `False` by default.\n\n- comboboxProps (dict; optional):\n    Props passed down to `Combobox` component.\n\n    `comboboxProps` is a dict with keys:\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data (list of strings; optional):\n    Data displayed in the dropdown.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- description (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Description` component. If not set, description\n    is not rendered.\n\n- descriptionProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Description` component.\n\n- disabled (boolean; optional):\n    Sets `disabled` attribute on the `input` element.\n\n- dropdownOpened (boolean; optional):\n    Controlled dropdown opened state.\n\n- error (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Error` component. If not set, error is not\n    rendered.\n\n- errorProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Error` component.\n\n- filter (boolean | number | string | dict | list; optional):\n    A Function based on which items are filtered and sorted. See\n    https://www.dash-mantine-components.com/functions-as-props.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- hiddenInputProps (dict; optional):\n    Props passed down to the hidden input.\n\n- hiddenInputValuesDivider (string; optional):\n    Divider used to separate values in the hidden input `value`\n    attribute, `','` by default.\n\n- inputProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input` component.\n\n- inputWrapperOrder (list of a value equal to: 'label', 'description', 'error', 'input's; optional):\n    Controls order of the elements, `['label', 'description', 'input',\n    'error']` by default.\n\n- label (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Label` component. If not set, label is not\n    rendered.\n\n- labelProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Label` component.\n\n- leftSection (a list of or a singular dash component, string or number; optional):\n    Content section rendered on the left side of the input.\n\n- leftSectionPointerEvents (a value equal to: 'auto', '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):\n    Sets `pointer-events` styles on the `leftSection` element,\n    `'none'` by default.\n\n- leftSectionProps (dict; optional):\n    Props passed down to the `leftSection` element.\n\n- leftSectionWidth (string | number; optional):\n    Left section width, used to set `width` of the section and input\n    `padding-left`, by default equals to the input height.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- limit (number; optional):\n    Maximum number of options displayed at a time, `Infinity` by\n    default.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- maxDropdownHeight (string | number; optional):\n    `max-height` of the dropdown, only applicable when\n    `withScrollArea` prop is `True`, `250` by default.\n\n- maxTags (number; optional):\n    Maximum number of tags, `Infinity` by default.\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- name (string; optional):\n    Name prop.\n\n- openOnFocus (boolean; optional):\n    If set, the dropdown opens when the input receives focus default\n    `True`.\n\n- persisted_props (list of strings; optional):\n    Properties whose user interactions will persist after refreshing\n    the component or the page. Since only `value` is allowed this prop\n    can normally be ignored.\n\n- persistence (string | number | boolean; optional):\n    Used to allow user interactions in this component to be persisted\n    when the component - or the page - is refreshed. If `persisted` is\n    truthy and hasn't changed from its previous value, a `value` that\n    the user has changed while using the app will keep that change, as\n    long as the new `value` also matches what was given originally.\n    Used in conjunction with `persistence_type`. Note:  The component\n    must have an `id` for persistence to work.\n\n- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):\n    Where persisted user changes will be stored: memory: only kept in\n    memory, reset on page refresh. local: window.localStorage, data is\n    kept after the browser quit. session: window.sessionStorage, data\n    is cleared once the browser quit.\n\n- placeholder (string; optional):\n    Placeholder.\n\n- pointer (boolean; optional):\n    Determines whether the input should have `cursor: pointer` style,\n    `False` by default.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set\n    `border-radius`, numbers are converted to rem,\n    `theme.defaultRadius` by default.\n\n- readOnly (boolean; optional):\n    Readonly.\n\n- renderOption (boolean | number | string | dict | list; optional):\n    A function to render content of the option, replaces the default\n    content of the option.  See\n    https://www.dash-mantine-components.com/functions-as-props.\n\n- required (boolean; optional):\n    Adds required attribute to the input and a red asterisk on the\n    right side of label, `False` by default.\n\n- rightSection (a list of or a singular dash component, string or number; optional):\n    Content section rendered on the right side of the input.\n\n- rightSectionPointerEvents (a value equal to: 'auto', '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):\n    Sets `pointer-events` styles on the `rightSection` element,\n    `'none'` by default.\n\n- rightSectionProps (dict; optional):\n    Props passed down to the `rightSection` element.\n\n- rightSectionWidth (string | number; optional):\n    Right section width, used to set `width` of the section and input\n    `padding-right`, by default equals to the input height.\n\n- scrollAreaProps (dict; optional):\n    Props passed down to the underlying `ScrollArea` component in the\n    dropdown.\n\n    `scrollAreaProps` is a dict with keys:\n\n- searchValue (string; optional):\n    Controlled search value.\n\n- selectFirstOptionOnChange (boolean; optional):\n    Determines whether the first option should be selected when value\n    changes, `False` by default.\n\n- selectFirstOptionOnDropdownOpen (boolean; optional):\n    If set, the first option is selected when dropdown opens, `False`\n    by default.\n\n- size (optional):\n    Controls input `height` and horizontal `padding`, `'sm'` by\n    default.\n\n- splitChars (list of strings; optional):\n    Characters that should trigger tags split, `[',']` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- value (list of strings; optional):\n    Controlled component value.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withAsterisk (boolean; optional):\n    Determines whether the required asterisk should be displayed.\n    Overrides `required` prop. Does not add required attribute to the\n    input. `False` by default.\n\n- withErrorStyles (boolean; optional):\n    Determines whether the input should have red border and red text\n    color when the `error` prop is set, `True` by default.\n\n- withScrollArea (boolean; optional):\n    Determines whether the options should be wrapped with\n    `ScrollArea.AutoSize`, `True` by default.\n\n- wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the root element."
  },
  {
    "name": "Custom DMC Components",
    "description": "Create advanced custom Dash components with MantineHooks and MantineCore",
    "endpoint": "/custom-dmc-components",
    "package": "dash_mantine_components",
    "category": "Dash",
    "content": "\n\n## Custom DMC Components  \nCreate advanced custom Dash components with MantineHooks and MantineCore  \nCategory: Dash  \n\n*New in dash-mantine-components 2.5.0*\n\nYou can now build custom Dash components that use Mantine the same way Dash Mantine Components does.\n\nPreviously, custom components built with the standard Dash component template had to bundle their own copy of Mantine.\nBecause of this, they could not access the `MantineProvider` used by DMC, which meant themes, styles, and context did\nnot work as expected.\n\nDMC now exports `MantineHooks` and `MantineCore`, allowing custom components to use the same Mantine hooks, utilities,\nand context as the built-in components. This enables a wide range of custom components, such as building advanced `Select`\nor `MultiSelect` on top of Mantine’s [Combobox](https://mantine.dev/core/combobox/), while keeping theme and behavior consistent inside a Dash app.\n\nFor examples and step-by-step instructions, see the custom DMC components in this [GitHub repository](https://github.com/AnnMarieW/dmc_custom_components)."
  },
  {
    "name": "Dash 4 Components",
    "description": "How to style Dash 4 Core Components with a Mantine theme",
    "endpoint": "/dash4-components",
    "category": "Dash",
    "content": "\n\n## Dash 4 Components  \nHow to style Dash 4 Core Components with a Mantine theme  \nCategory: Dash  \n\nDash 4 completely redesigned its core components for a consistent look and feel and added many new features. For a full \noverview of what changed, see the [Dash 4 release post](https://community.plotly.com/t/dash-core-components-gets-a-design-driven-refresh-with-dash-4/96322).\n\nIt's usually best to  stick with DMC components for a consistent design and UI. But some new DCC components such as `dcc.Dropdown` \nand the `dcc.Slider` include features you won’t find in DMC so you might want to mix them in. \n\nThis section shows how to style Dash 4 components to match a Mantine theme in light and dark mode.\n\n### Dash 4 Accent Color\n\nThe accent for Dash 4 components is controlled by a CSS variable so it's easy to change. The value can be any valid CSS color.\n\nThis example changes the default purple color to your Mantine primary color:\n\n```python\nstyle={\n    \"--Dash-Fill-Interactive-Strong\": \"var(--mantine-primary-color-filled)\"\n}\n```\n\n\n### Dark Mode Support\n\nDash 4 components do not include built-in dark mode support. You can enable light and dark mode by mapping Dash CSS\nvariables to Mantine theme variables.  The following is the CSS used in these docs.\n\nAdd the following CSS to `assets/`:\n\n```css\n.dmc {\n    --Dash-Stroke-Strong: var(--mantine-color-default-border);\n    --Dash-Stroke-Weak: var(--mantine-color-disabled);\n    --Dash-Fill-Interactive-Strong: var(--mantine-primary-color-filled);\n    --Dash-Fill-Inverse-Strong: var(--mantine-color-body);\n    --Dash-Text-Primary: var(--mantine-color-text);\n    --Dash-Text-Strong: var(--mantine-color-text);\n    --Dash-Text-Disabled: var(--mantine-color-dimmed);\n    --Dash-Text-Weak: var(--mantine-color-dimmed);\n}\n\n:root[data-mantine-color-scheme=\"dark\"] .dmc {\n    --Dash-Fill-Inverse-Strong: var(--mantine-color-dark-6);\n    --Dash-Fill-Weak: rgba(255, 255, 255, 0.06);\n    --Dash-Fill-Primary-Hover: rgba(255, 255, 255, 0.08);\n    --Dash-Fill-Primary-Active: rgba(255, 255, 255, 0.12);\n    --Dash-Fill-Disabled: rgba(255, 255, 255, 0.15);\n}\n```\n\nWrap your app layout with  `dmc` class:\n\n```python\napp.layout = dmc.MantineProvider(\n    dmc.Container(\n        [...],\n        className=\"dmc\"\n    )\n)\n```\n\nDash 4 components inside this container will follow the Mantine color scheme and update automatically when the theme changes. \n\n> Toggle the theme switch in the header to see the examples below update between light and dark mode.\n\n\n\n\n\n### Example 1: dcc.Dropdown\n\nThis example shows how a [dcc.Dropdown](https://dash.plotly.com/dash-core-components/dropdown) works well with other DMC inputs in grids or forms.\n\nThe Dash 4 `dcc.Dropdown` supports virtualization, which renders only the visible options instead of the entire list.\nThis improves performance and responsiveness when working with large data sets.  The dropdown menu also includes a built-in\nsearch input. \n\nFor MultiSelect (set `multi=True`) the menu also includes  Select all and Deselect all buttons. When multiple \nitems are selected, it displays a count of selected items, preventing the input from resizing as selections grow.\n\nThe `dmc.InputWrapper` is used to add elements like `label`, `description`, and `error` to the `dcc.Dropdown`,\nmaking it consistent with the other DMC inputs. The `htmlFor` prop links the label to the component for focus and accessibility.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import dcc\n\ncomponent = dmc.Card([\n    dmc.SimpleGrid(\n        [\n            dmc.InputWrapper(\n                dcc.Dropdown([f\"option {i}\" for i in range(100)],  value=[\"option 1\", \"option 2\", \"option 3\"], multi=True, id=\"dcc-dropdown\"),\n                label=\"dcc.Dropdown\",\n                htmlFor=\"dcc-dropdown\"\n            ),\n            dmc.NumberInput(\n                label=\"dmc.NumberInput\",\n                value=30712,\n                thousandSeparator=True,\n                prefix=\"$ \",\n\n            ),\n            dmc.DatePickerInput(label=\"dmc.DatePickerInput\", value=\"2025-12-05\"),\n        ],\n        cols={\"base\": 1, \"md\": 3},\n    ),\n    ],\n    withBorder=True,\n    shadow=\"sm\",\n    radius=\"md\",\n    className=\"dmc\"  # applies Mantine styles\n)\n```\n### Example 2: dcc.Slider\n\nThe [dcc.Slider](https://dash.plotly.com/dash-core-components/slider) and `dcc.RangeSlider` includes optional numeric\ninput fields and automatic mark generation based on range and width.  There is also an option for a vertical slider.\n\nThis example shows the `dcc.RandeSlider` styled with a Mantine theme.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import dcc\n\ncomponent = dcc.RangeSlider(0, 200, value=[50, 150], className=\"dmc\")\n```\n### Migrating to Dash v4\n\nAll component props remain unchanged, so upgrading should not introduce errors. You may notice layout and style differences due to the redesign.\n\nCustom CSS written for Dash 3 components will not apply to Dash 4. The components were fully rewritten, so selectors have changed. Start with the styling approach shown here and customize as needed for your app."
  },
  {
    "name": "Dash Ag Grid",
    "description": "Build high-performance, interactive data tables with Dash AG Grid and Dash Mantine Components. Learn how to apply light and dark grid themes and use DMC components as custom cell renderers and editors.",
    "endpoint": "/dash-ag-grid",
    "package": "dash_mantine_components",
    "category": "Dash",
    "content": "\n\n## Dash Ag Grid  \nBuild high-performance, interactive data tables with Dash AG Grid and Dash Mantine Components. Learn how to apply light and dark grid themes and use DMC components as custom cell renderers and editors.  \nCategory: Dash  \n\n### Dash AG Grid quickstart\n\nIf you're new to Dash AG Grid, check out the [official Dash AG Grid documentation](https://dash.plotly.com/dash-ag-grid) for detailed information.\n\nHere are just some of the features enabled by default in the quickstart example below:\n\n* Built-in theme pairs well with the Mantine default theme\n* Columns are resizable (drag the column header edges)\n* Rows are sortable (click header; shift-click for multi-sort)\n* Smooth row animations during filtering and sorting\n* Boolean values are rendered as checkboxes\n* Columns can be reordered by dragging\n* Columns can be pinned to either side of the grid\n\n\n\n### Quickstart Demo\n\n```bash\npip install dash-ag-grid\n\n```\n\n---\n\n```python\nimport dash_mantine_components as dmc\nimport dash_ag_grid as dag\nimport pandas as pd\nfrom dash import Dash\n\ndf = pd.read_csv(\"https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/space-mission-data.csv\")\n\napp = Dash()\n\ncomponent = dag.AgGrid(\n    rowData=df.to_dict(\"records\"),\n    columnDefs=[{\"field\": i} for i in df.columns],\n)\n\napp.layout=dmc.MantineProvider(component)\n\napp.run(debug=True)\n\n\n```\n\n\n### Explore More Grid Features\n\nBe sure to check out the [Dash AG Grid documentation](https://dash.plotly.com/dash-ag-grid) for even more features, such as:\n\n- Column: resizing, reordering, pinning, spanning, and grouping.\n- Row: sorting, selection (including with checkboxes), reordering, dragging, spanning, pinned rows, and full width rows.\n- Data Manipulation and Display: pagination, cell data types with automatic inference, custom filtering, and cell editing,  value getters and formatters, conditional formatting, and CSV data export.\n- Layout and Styling:  themes (Alpine, Material, Quartz) with light/dark options, customizable themes, and conditional styling for various elements. Custom icons and more.\n- Other Features: tooltips in cells and headers, keyboard navigation, accessibility support, and localization. \n- Enterprise Features:  All the above features are free in AG Grid Community.  Additional advanced features are available with an AG Grid Enterprise licence.\n\nThe next sections show how to apply AG Grid themes that match your Mantine light or dark theme, and how to use DMC\ncomponents as custom cell renderers and editors. \n\n\n### Theming: Light and Dark Mode\n\n#### Dash AG Grid ≥ v33\n\nDash AG Grid v33+ introduced a new theming API that makes it much easier to style the grid.\n\nMore details and examples are available in the [dash-ag-grid documentation](https://dash.plotly.com/dash-ag-grid/styling-themes).\nIf you are upgrading from an earlier version, see the [migration guide](https://dash.plotly.com/dash-ag-grid/migration-guide).\n\nIn earlier versions of dash-ag-grid, the grid theme was set using the `className` prop. Switching between light and\ndark mode typically required updating `className` in a callback, which caused the grid to re-render and often resulted\nin visible lag.\n\nWith v33+, the same built-in themes are still available, but they are applied through the new `theme` API instead\nof `className`. Theme values can be customized using any valid CSS values, and using CSS variables works well for light and\ndark mode support.  See also the [Ag Grid documentation](https://www.ag-grid.com/react-data-grid/theming-colors/) for more information.\n\nBelow are two simple examples.\n\nExample 1: No callback\n\nThis example uses a built-in light theme and applies Mantine CSS variables for background and text colors. When the app \ntheme changes, the grid updates automatically. No callback is required.\n\n```python\n# dash-ag-grid >= 33.3.3\nimport dash_ag_grid as dag\nimport pandas as pd\n\ndf = pd.read_csv(\"https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv\")\n\ntheme =  {\n    \"function\": (\n        \"themeQuartz.withParams({\"        \n           \"backgroundColor: 'var(--mantine-color-body)', \"\n           \"foregroundColor: 'var(--mantine-color-text)', \"\n        \"})\"\n    )\n}\n\ncomponent = dag.AgGrid(\n    rowData=df.to_dict(\"records\"),\n    columnDefs=[{\"field\": i} for i in [\"athlete\", \"country\", \"sport\", \"year\"]],\n    defaultColDef={\"flex\": 1, \"filter\": True},\n    dashGridOptions={\n        \"theme\": theme,\n        \"rowSelection\": {\"mode\": \"multiRow\"}\n    },\n)\n```\nExample 2: Callback to switch built-in theme\n\nBecause the first example is based on a light theme, some elements such as scrollbars may not appear correctly in dark mode.\n\nThis example switches between the light and dark variants of the built-in Quartz theme. It also demonstrates additional\ncustomization using the `theme` prop to set fonts and accent colors.\n\n```python\n# dash-ag-grid >= 33.3.3\nimport dash_ag_grid as dag\nfrom dash import clientside_callback, Input, Output, html\nimport pandas as pd\n\ndf = pd.read_csv(\"https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv\")\n\ntheme =  {\n    \"function\": (\n        \"themeQuartz.withParams({\"        \n        \"accentColor: 'var(--mantine-primary-color-filled)', \"\n        \"fontFamily: 'var(--mantine-font-family)', \"\n        \"headerFontWeight: 'bold'\"\n        \"})\"\n    )\n}\n\ncomponent = html.Div([\n    dag.AgGrid(\n        id=\"theme-color-scheme33\",\n        rowData=df.to_dict(\"records\"),\n        columnDefs=[{\"field\": i} for i in [\"athlete\", \"country\", \"sport\", \"year\"]],\n        defaultColDef={\"flex\": 1, \"filter\": True},\n        dashGridOptions={\n            \"theme\": theme,\n            \"rowSelection\": {\"mode\": \"multiRow\"}\n        },\n    ),\n    html.Div(id=\"dummy-output\")\n])\n\n\nclientside_callback(\n    \"\"\"\n    (switchOn) => {\n       document.documentElement.setAttribute('data-ag-theme-mode', switchOn ? 'dark' : 'light');  \n       return window.dash_clientside.no_update;        \n    }\n    \"\"\",\n    Output(\"dummy-output\", \"children\"),\n    Input(\"docs-color-scheme-switch\", \"checked\"),\n)\n```\n#### Dash AG Grid < v33\n\nBefore dash-ag-grid v33, the grid theme was set using the `className` prop. Four built-in themes were available, each with light and dark variants.\n\nFor example, to apply the Alpine theme:\n\n* Light mode: `className=\"ag-theme-alpine\"` (default)\n* Dark mode: `className=\"ag-theme-alpine-dark\"`\n\nSwitching between light and dark mode required updating the `className` prop in a callback.\n\nFor more details on available themes and customization options, see the [Dash AG Grid styling guide](https://dash.plotly.com/dash-ag-grid/styling-themes) or the [AG Grid v31.3 theme documentation](https://www.ag-grid.com/archive/31.3.0/react-data-grid/themes/).\n\nHere is an example of the callback:\n\n```python\n# Example for dash-ag-grid<=33.0.0\nimport dash_ag_grid as dag\nimport pandas as pd\nfrom dash import callback, Input, Output\n\ndf = pd.read_csv(\"https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/space-mission-data.csv\")\n\ncomponent = dag.AgGrid(\n    rowData=df.to_dict(\"records\"),\n    columnDefs=[{\"field\": i} for i in df.columns],\n    id=\"theme-switch-dag31\"\n)\n\n@callback(\n    Output(\"theme-switch-dag31\", \"className\"),\n    Input(\"docs-color-scheme-switch\", \"checked\")\n)\ndef update_theme(switch_on):\n    return \"ag-theme-alpine-dark\" if switch_on else \"ag-theme-alpine\"\n```\n\n###  Custom Cell Renderers with DMC\n\nFor an introduction to [dash-ag-grid Cell Renderers](https://dash.plotly.com/dash-ag-grid/cell-renderer-components) refer to the dash documentation.\n\nA cell renderer is a JavaScript function that returns a component to customize the cell content, rather\nthan displaying simple text.  You can use DMC components as custom cell renderers.\n\nKey concepts:\n\n* Define the cell renderer function in a `.js` file in  `/assets/` under `window.dashAgGridComponentFunctions` namespace. Dash registers these components with the grid.\n* Set `cellRenderer` to the function name.\n* Pass extra props to the function with `cellRendererParams`.\n\n\n```js\nvar dagcomponentfuncs = window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {};\n\ndagcomponentfuncs.MyFunction = function (props) {\n   // define your cell renderer here\n}\n```\n\n\n\nWant help writing these custom cell render functions? See [Using AI to Generate Functions](/functions-as-props#using-ai-to-generate-javascript-functions) for how to describe the logic in plain English or Python and convert it to JavaScript.\n\n\n\n#### Example 1:  Card\n\nThis example displays grid data in a DMC `Card` in cells. The card layout is defined in a `.js` file in the `/assets` folder, with\nthe function named `DMC_Card`.\n\n\n```python\n\nfrom dash import callback, Input, Output\nimport dash_ag_grid as dag\nimport pandas as pd\n\ndata = {\n    \"stats\": [\"Revenue\", \"EBITDA\", \"Net Income\"],\n    \"results\": ['$13,120,000','$1,117,000', '$788,000'],\n    \"change\": [10.1, -22.1, 18.6],\n    'comments': ['Enter your comments here...', '', '']\n}\ndf = pd.DataFrame(data)\n\ncolumnDefs = [\n    {\n        \"headerName\": \"\",\n        \"cellRenderer\": \"DMC_Card\",\n    },\n    {\n        \"field\": \"comments\",\n        \"editable\": True,\n        \"cellEditorPopup\": True,\n        \"cellEditor\": \"agLargeTextCellEditor\",\n        \"flex\": 1\n    },\n]\n\ncomponent = dag.AgGrid(\n    columnDefs=columnDefs,\n    rowData=df.to_dict(\"records\"),\n    dashGridOptions={\"rowHeight\": 120},\n    id=\"dag-dmc-card-grid\",\n)\n\n\n@callback(\n    Output(\"dag-dmc-card-grid\", \"className\"),\n    Input(\"docs-color-scheme-switch\", \"computedColorScheme\")\n)\ndef update_theme(color):\n    return \"ag-theme-alpine-dark\" if color==\"dark\" else \"ag-theme-alpine\"\n```\n\n```javascript\n\nvar dagcomponentfuncs = window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {};\n\ndagcomponentfuncs.DMC_Card = function (props) {\n    return React.createElement(\n        window.dash_mantine_components.Card,\n        {\n            withBorder: true,\n            m: 4,\n        },\n        React.createElement(\n            window.dash_mantine_components.Text,\n            {c:\"dimmed\", tt: \"uppercase\", fw:700},\n            props.data.stats\n        ),\n        React.createElement(\n            window.dash_mantine_components.Text,\n            {size: \"lg\"},\n            props.data.results\n        ),\n        React.createElement(\n            window.dash_mantine_components.Text,\n            {size: \"sm\", c: (props.data.change > 0) ? \"green\" : \"red\"},\n            props.data.change + \"%\"\n        )\n    );\n};\n```\n\n\n\n\n#### Example 2: Buttons\n\nThis example shows how to place interactive buttons inside grid cells. The `DMC_Button` is defined in a `.js` file in\n`/assets` is used in the `cellRenderer` prop. You can pass `Button` props (color, icon, variant, etc.) using \n`cellRendererParams` per column.\n\nHere’s an example for the `\"buy\"` column:\n\n```python\ncolumnDefs = [\n    {\n        \"field\": \"buy\",\n        \"cellRenderer\": \"DMC_Button\",\n        \"cellRendererParams\": {\n            \"variant\": \"outline\",\n            \"leftIcon\": \"ic:baseline-shopping-cart\",\n            \"color\": \"green\",\n            \"radius\": \"xl\"\n        },\n    },\n    #  other columns...\n\n]\n\n\n```\n\n\n```python\n\nimport json\nimport dash_ag_grid as dag\nfrom dash import html, dcc, Input, Output, callback\nimport pandas as pd\nimport dash_mantine_components as dmc\nimport dash_iconify\n\ndata = {\n    \"ticker\": [\"AAPL\", \"MSFT\", \"AMZN\", \"GOOGL\"],\n    \"company\": [\"Apple\", \"Microsoft\", \"Amazon\", \"Alphabet\"],\n    \"price\": [154.99, 268.65, 100.47, 96.75],\n    \"buy\": [\"Buy\" for _ in range(4)],\n    \"sell\": [\"Sell\" for _ in range(4)],\n    \"watch\": [\"Watch\" for _ in range(4)],\n}\ndf = pd.DataFrame(data)\n\ncolumnDefs = [\n    {\n        \"headerName\": \"Stock Ticker\",\n        \"field\": \"ticker\",\n        \"minWidth\": 100\n    },\n    {\"headerName\": \"Company\", \"field\": \"company\", \"filter\": True, \"minWidth\": 50},\n    {\n        \"headerName\": \"Last Close Price\",\n        \"type\": \"rightAligned\",\n        \"field\": \"price\",\n        \"valueFormatter\": {\"function\": \"\"\"d3.format(\"($,.2f\")(params.value)\"\"\"},\n        \"minWidth\": 100\n    },\n    {\n        \"field\": \"buy\",\n        \"cellRenderer\": \"DMC_Button\",\n        \"cellRendererParams\": {\n            \"variant\": \"outline\",\n            \"leftIcon\": \"ic:baseline-shopping-cart\",\n            \"color\": \"green\",\n            \"radius\": \"xl\"\n        },\n        \"minWidth\": 100\n    },\n    {\n        \"field\": \"sell\",\n        \"cellRenderer\": \"DMC_Button\",\n        \"cellRendererParams\": {\n            \"variant\": \"outline\",\n            \"leftIcon\": \"ic:baseline-shopping-cart\",\n            \"color\": \"red\",\n            \"radius\": \"xl\"\n        },\n        \"minWidth\": 100\n    },\n    {\n        \"field\": \"watch\",\n        \"cellRenderer\": \"DMC_Button\",\n        \"cellRendererParams\": {\n            \"rightIcon\": \"ph:eye\",\n        },\n        \"minWidth\": 100\n    },\n]\n\ncomponent = html.Div(\n    [\n        dag.AgGrid(\n            id=\"dag-dmc-btn-grid\",\n            columnDefs=columnDefs,\n            rowData=df.to_dict(\"records\"),\n            columnSize=\"autoSize\",\n        ),\n        dmc.Text(id=\"dag-dmc-btn-value-changed\"),\n    ],\n)\n\n\n@callback(\n    Output(\"dag-dmc-btn-value-changed\", \"children\"),\n    Input(\"dag-dmc-btn-grid\", \"cellRendererData\"),\n)\ndef showChange(n):\n    return json.dumps(n)\n\n\n@callback(\n    Output(\"dag-dmc-btn-grid\", \"className\"),\n    Input(\"docs-color-scheme-switch\", \"computedColorScheme\")\n)\ndef update_theme(color):\n    return \"ag-theme-alpine-dark\" if color==\"dark\" else \"ag-theme-alpine\"\n```\n\n```javascript\n\nvar dagcomponentfuncs = window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {};\n\ndagcomponentfuncs.DMC_Button = function (props) {\n    const {setData, data} = props;\n\n    function onClick() {\n        setData();\n    }\n    let leftIcon, rightIcon;\n    if (props.leftIcon) {\n        leftIcon = React.createElement(window.dash_iconify.DashIconify, {\n            icon: props.leftIcon,\n        });\n    }\n    if (props.rightIcon) {\n        rightIcon = React.createElement(window.dash_iconify.DashIconify, {\n            icon: props.rightIcon,\n        });\n    }\n    return React.createElement(\n        window.dash_mantine_components.Button,\n        {\n            onClick,\n            variant: props.variant,\n            color: props.color,\n            leftSection: leftIcon,\n            rightSection: rightIcon,\n            radius: props.radius,\n            style: {\n                margin: props.margin,\n                display: 'flex',\n                justifyContent: 'center',\n                alignItems: 'center',\n            },\n        },\n        props.value\n    );\n};\n```\n\n\n\n###  Custom Cell editors with DMC\n\nDash AG Grid includes several [built-in cell editors](https://dash.plotly.com/dash-ag-grid/provided-cell-editors), such as:\n- Text Cell Editor\n- Large Text Cell Editor\n- Select Cell Editor\n- Rich Select Cell Editor (AG Grid Enterprise)\n- Number Cell Editor\n- Date Cell Editor\n- Checkbox Cell Editor\n\nThese editors are easy to use and require no extra JavaScript. But if you need more control or want to use DMC components\nas cell editors, you can create a custom cell editor.\n\nThe example below uses a generic editor function that works with any DMC component. Just copy the `.js` file into your app’s `/assets` folder to use it.\n(Thanks to Dash community member [@BSd3v](https://github.com/BSd3v) for creating this!)\n\nThen in your dash app you can pass a component written in Python to the function using the `cellEditorParams` prop:\n\n```python\ncolumnDefs = [\n    {\n        'cellEditor': {'function': 'AllFunctionalComponentEditors'},\n        \"cellEditorParams\": {\n            \"component\": dmc.Select(data=[\"A\", \"B\", \"C\"])\n        }\n    },\n    \n]\n```\n\n\n#### Example: DatePickerInput, TagsInput, Select \n\nThis example shows how to use the following DMC components as custom cell editors:\n\n* `dmc.DatePickerInput`\n* `dmc.TagsInput`\n* `dmc.Select`\n\nNote: Set `cellEditorPopup=True` for any editor that displays dropdowns, popovers, or calendars. This prevents clipping inside the grid.\n\n\n\n```python\nfrom dash import callback, Input, Output\nimport dash_mantine_components as dmc\nimport dash_ag_grid as dag\nimport pandas as pd\n\nnow = \"2025-12-30\"\n\ndf = pd.DataFrame({\n    'Column 1': [1, 2, 3, 4, 5, 6],\n    'DatePickerInput': [now, now, now, now, now, now],\n    'TagsInput': [['A']] * 6,  # Note TagsInput values must be a list\n    'Select': ['A', 'B', 'C', 'A', 'B', 'C']\n})\n\ncolumnDefs = [\n    { \"field\": \"Column 1\", \"headerName\": \"id\", \"maxWidth\": 50},\n    {\n        \"field\": \"DatePickerInput\",\n        'cellEditor': {'function': 'AllFunctionalComponentEditors'},\n        'cellEditorParams': {'component': dmc.DatePickerInput(valueFormat=\"YYYY-MM-DD\")},\n        'cellEditorPopup': True,\n    },\n    {\n        \"field\": \"TagsInput\",\n        'cellEditor': {'function': 'AllFunctionalComponentEditors'},\n        'cellEditorParams': {'component': dmc.TagsInput(data=[\"A\", \"B\", \"C\"])},\n        'cellEditorPopup': True,\n        \"flex\": 1\n    },\n    {\n        \"field\": \"Select\",\n        'cellEditor': {'function': 'AllFunctionalComponentEditors'},\n        'cellEditorParams': {'component': dmc.Select(data=[\"A\", \"B\", \"C\"])},\n        'cellEditorPopup': True,\n        \"flex\": 1\n    },\n]\n\n\ncomponent = dag.AgGrid(\n    id='dag-dmc-cell-editor',\n    columnDefs=columnDefs,\n    rowData=df.to_dict('records'),\n    defaultColDef={'editable': True, \"minWidth\": 150},\n    dashGridOptions={'singleClickEdit': True}\n)\n\n\n@callback(\n    Output(\"dag-dmc-cell-editor\", \"className\"),\n    Input(\"docs-color-scheme-switch\", \"computedColorScheme\")\n)\ndef update_theme(color):\n    return \"ag-theme-alpine-dark\" if color==\"dark\" else \"ag-theme-alpine\"\n```\n\n```javascript\nvar dagfuncs = (window.dashAgGridFunctions = window.dashAgGridFunctions || {});\n\nconst {useRef, createElement, useEffect, useCallback, forwardRef, useMemo} = React\n\n// Use this with DMC components\ndagfuncs.AllFunctionalComponentEditors = forwardRef(({ value, ...params }, ref) => {\n    const comp = params.colDef.cellEditorParams.component;\n    const node = useRef(params.api.getRowNode(params.node.id));\n    const newValue = useRef(value);\n    const escaped = useRef(null);\n    const editorRef = useRef(null);\n\n    const handleStop = ({ event, ...params }) => {\n        setTimeout(() => {\n            if (!escaped.current) {\n                node.current.setDataValue(params.column.colId, newValue.current);\n            }\n        }, 1);\n    };\n\n    if (params.colDef.cellEditorPopup) {\n        comp['props']['style'] = { ...comp.props?.style, width: params.column.actualWidth - 2 };\n    }\n\n    const setProps = (propsToSet) => {\n        if ('value' in propsToSet) {\n            newValue.current = propsToSet.value;\n        }\n    };\n\n    const handleKeyDown = ({ key, ...event }) => {\n        if (key == \"Escape\") {\n            escaped.current = true;\n        }\n    };\n\n    useEffect(() => {\n        params.api.addEventListener('cellEditingStopped', handleStop);\n        document.addEventListener('keydown', handleKeyDown);\n        params.colDef.suppressKeyboardEvent = (params) => params.editing && params.event.key != 'Tab';\n        return () => {\n            document.removeEventListener('keydown', handleKeyDown);\n            delete params.colDef.suppressKeyboardEvent;\n            params.api.removeEventListener('cellEditingStopped', handleStop);\n        };\n    }, []);\n\n    useEffect(() => {\n        if (editorRef.current) {\n            if (editorRef.current.querySelector('input')) {\n                editorRef.current.querySelector('input').focus();\n            } else {\n                editorRef.current.focus()\n            }\n        }\n    }, [editorRef.current]);\n\n    const el = useMemo(() =>\n        createElement(\n            'div',\n            { ref: editorRef, tabIndex: 0 },\n            createElement(window[comp['namespace']][comp['type']], { ...comp.props, setProps, value })\n        ),\n    []);\n\n    return el;\n});\n```"
  },
  {
    "name": "Dash Iconify",
    "description": "Add icons to your dash apps the simplest and the most efficient way.",
    "endpoint": "/dash-iconify",
    "package": "dash_mantine_components",
    "category": "Dash",
    "content": "\n\n## Dash Iconify  \nAdd icons to your dash apps the simplest and the most efficient way.  \nCategory: Dash  \n\n### Why Use This?\n\nDashIconify fetches only the icons you need. You can use icons from over 100 icon sets without loading all of them.\nSearch [here](https://icon-sets.iconify.design/) for the desired icon and use DashIconify to use that in your dash app.\n\n[Source Code](https://github.com/snehilvj/dash-iconify)\n\n### Installation\n\n```bash\npip install dash-iconify\n```\n\n```bash\npoetry add dash-iconify\n```\n\n### Simple Usage\n\nDashIconify component can be customized with `width`, `height`, `rotate` and `flip` props.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ncomponent = dmc.Group(\n    [\n        DashIconify(icon=\"ion:logo-github\", width=30, rotate=1, flip=\"horizontal\"),\n        DashIconify(icon=\"flat-ui:settings\", width=30),\n        DashIconify(\n            icon=\"feather:info\",\n            color=dmc.DEFAULT_THEME[\"colors\"][\"yellow\"][5],\n            width=30,\n        ),\n    ]\n)\n```\n### Usage With DMC\n\nAlthough dash-iconify can be used with any dash components library, be it, dash-mantine-components, dash-core-components\nor dash-bootstrap-components, DMC provides direct hooks for adding icons to enhance the look and feel of your apps.\n\n```python\nfrom datetime import date\n\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ncomponent = dmc.Group(\n    [\n        dmc.DatePickerInput(\n            value=date.today(), leftSection=DashIconify(icon=\"clarity:date-line\")\n        ),\n        dmc.Alert(\n            icon=DashIconify(icon=\"radix-icons:cross-circled\"),\n            children=\"There seems to be an error!\",\n            color=\"red\",\n        ),\n        dmc.Button(\n            \"Open Settings\",\n            leftSection=DashIconify(icon=\"carbon:settings-check\", width=20),\n        ),\n    ]\n)\n```"
  },
  {
    "name": "Dash Loading States",
    "endpoint": "/dash-loading",
    "description": "Learn how to show loading states in Dash apps using DMC components like Loader, Skeleton, and LoadingOverlay. Includes integration with dcc.Loading and examples of custom CSS-based spinners.",
    "dmc": false,
    "category": "Dash",
    "content": "\n\n## Dash Loading States  \nLearn how to show loading states in Dash apps using DMC components like Loader, Skeleton, and LoadingOverlay. Includes integration with dcc.Loading and examples of custom CSS-based spinners.  \nCategory: Dash  \n\n### DMC Loading components\n\nDMC has several components that are often used to indicate a component's loading state:\n\n- [Loader](/components/loader): A basic visual spinner (oval, bars, or dots) for simple loading states. Can be customized with size, color, and type.\n\n- [LoadingOverlay](/components/loadingoverlay): Overlays a parent element with a loader, disabling user interaction to indicate a loading state, commonly used for forms.\n- [Progress](/components/progress): A progress bar that shows task status and completion percentage. Customizable with value, color, label, and sections.\n- [Button](/components/button) and [ActionIcon](/components/actionicon) (`loading` prop): Integrates a `Loader` into buttons and icons.  Disables Button while `loading=True`.\n- [Skeleton](/components/skeleton): Creates placeholders resembling content layout to give users a preview while loading, reducing perceived wait time.\n\n\n### With dcc.Loading\n\nFor greater control over when the DMC loading components are displayed and for how long, use the `dcc.Loading` component from\n`dash-core-components`. DMC components such as `Skeleton`, `Loader`, `LoadingOverlay` can be displayed in the `custom_spinner` prop.\n\nYou can configure options such as:  \n\n- `delay_show`: Specifies the wait time before displaying the loading component. This helps prevent flickering for fast-loading content.  \n- `delay_hide`: Defines how long the loading component remains visible after loading completes, creating a smoother transition between the placeholder and final content.  \n- `target_components`: Determines which components trigger the loader to display. This makes the loading effect triggered only by specific components rather than  being triggered by any of the children.\n\nRefer to the [Dash Documentation](https://dash.plotly.com/dash-core-components/loading) for more details.\n\nHere is an example of `delay_hide` prop in `dcc.Loading` to prevent the `Skeleton` from showing for a very short time.\n\n```python\nimport time\nimport dash_mantine_components as dmc\nfrom dash import  Input, Output,  html, callback, dcc\n\ncomponent = html.Div(\n    [\n        dcc.Loading(\n            children=html.Div([\n                dmc.Text(\"Initial data\", id=\"dccloading-div\"),\n                dmc.Text(\"The data only takes 200ms to update, but `delay_hide` is set to 1000ms to prevent flashing.\")\n            ]),\n            delay_hide=1000,\n            custom_spinner = dmc.Skeleton(\n                visible=True,\n                h=\"100%\"\n            ),\n        ),\n        dmc.Button(\"Update!\", id=\"dccloading-button\"),\n    ]\n)\n\n@callback(\n    Output(\"dccloading-div\", \"children\"),\n    Input(\"dccloading-button\", \"n_clicks\"),\n    prevent_initial_call=True\n)\ndef update_graph(n):\n    time.sleep(.2)\n    return f\"Data updated {n} times\"\n```\n### Custom CSS Loaders Using data-dash-is-loading\n\n\nDash automatically adds the attribute `data-dash-is-loading=\"true\"` to components that are being updated in a callback.\nYou can use this attribute to apply custom loading indicators using CSS — no extra Python code or spinner components needed!\n\n\n#### Basic Example\n\nYou can hide a component’s content and display a custom loader using just CSS:\n\n```css\n/* Hide the content while it's loading */\n[data-dash-is-loading=\"true\"] {\n    visibility: hidden;\n    position: relative;\n}\n\n/* Show a loader */\n[data-dash-is-loading=\"true\"]::before {\n    content: \"Loading...\";\n    visibility: visible;\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n}\n```\n\n\nIn your Dash layout:\n\n```python\ndmc.Text(id=\"output-id\", className=\"my-output\")\n```\n\nIn your `assets/style.css`:\n\n```css\n.my-output[data-dash-is-loading=\"true\"]::before {\n    /* Custom loader styles */\n}\n```\n\nNow, whenever `output-id` is being updated by a callback, your custom loader will appear in place of the original content.\n\n### Example with 3 custom spinners\n\nThis example has 3 custom spinner defined in the `.css` file in `/assets`.  The different loaders are applied to the\ncomponent based on the `className`.\n\n\n\n```python\nfrom dash import  Input, Output, callback\nimport dash_mantine_components as dmc\nimport time\n\n\ncomponent = dmc.Stack([\n    dmc.Title(\" Dash Spinner Loader Showcase\", order=2),\n\n    dmc.Card([\n        dmc.Select(\n            label=\"Pulse Loader\",\n            placeholder=\"Choose an option...\",\n            data=[\"A\", \"B\", \"C\"],\n            id=\"dash-is-loading-input-1\"\n        ),\n        dmc.Text(id=\"dash-is-loading-output-1\", className=\"output-example-loading\",  py=\"lg\")\n    ],\n        className=\"pulse-loader\",\n        withBorder=True\n    ),\n\n    dmc.Card([\n        dmc.Select(\n            label=\"Ring Loader\",\n            placeholder=\"Choose an option...\",\n            data=[\"A\", \"B\", \"C\"],\n            id=\"dash-is-loading-input-2\"\n        ),\n        dmc.Text(id=\"dash-is-loading-output-2\", className=\"output-example-loading\", py=\"lg\")\n    ], className=\"ring-loader\", withBorder=True),\n\n    dmc.Card([\n        dmc.Select(\n            label=\"Bounce Loader\",\n            placeholder=\"Choose an option...\",\n            data=[\"A\", \"B\", \"C\"],\n            id=\"dash-is-loading-input-3\"\n        ),\n        dmc.Text(id=\"dash-is-loading-output-3\", className=\"output-example-loading\",  py=\"xl\")\n    ], className=\"bounce-loader\"),\n\n\n])\n\n@callback(Output(\"dash-is-loading-output-1\", \"children\"), Input(\"dash-is-loading-input-1\", \"value\"))\ndef update_output1(value):\n    time.sleep(2)\n    return f\"You selected: {value}\"\n\n\n@callback(Output(\"dash-is-loading-output-2\", \"children\"), Input(\"dash-is-loading-input-2\", \"value\"))\ndef update_output2(value):\n    time.sleep(2)\n    return f\"You selected: {value}\"\n\n\n@callback(Output(\"dash-is-loading-output-3\", \"children\"), Input(\"dash-is-loading-input-3\", \"value\"))\ndef update_output3(value):\n    time.sleep(2)\n    return f\"You selected: {value}\"\n```\n\n```css\n\n/* Output Base Hidden + Loader Target */\n*[data-dash-is-loading=\"true\"] {\n    visibility: hidden;\n    position: relative;\n}\n*[data-dash-is-loading=\"true\"]::before {\n    visibility: visible;\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);  /* centers the spinner */\n    content: \"\";\n}\n\n/* pulse loader */\n.pulse-loader .output-example-loading[data-dash-is-loading=\"true\"]::before {\n    content: \"\";\n    width: 20px;\n    height: 20px;\n    border-radius: 50%;\n    background-color: var(--mantine-color-blue-filled);\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%) scale(0.95);\n    animation: pulseAnim 1s infinite ease-in-out;\n    visibility: visible;\n}\n\n@keyframes pulseAnim {\n    0% { transform: translate(-50%, -50%) scale(0.95); opacity: 1; }\n    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.6; }\n    100% { transform: translate(-50%, -50%) scale(0.95); opacity: 1; }\n}\n\n/* Loader: Ring */\n.ring-loader .output-example-loading[data-dash-is-loading=\"true\"]::before {\n    content: \"\";\n    width: 40px;\n    height: 40px;\n    border: 4px solid #f3f3f3;\n    border-top: 4px solid var(--mantine-color-green-filled);\n    border-radius: 50%;\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%) rotate(0deg);\n    animation: ringSpin 1s linear infinite;\n    visibility: visible;\n}\n\n@keyframes ringSpin {\n    0% { transform: translate(-50%, -50%) rotate(0deg); }\n    100% { transform: translate(-50%, -50%) rotate(360deg); }\n}\n\n\n\n/* Loader: Bounce Dots */\n.bounce-loader .output-example-loading[data-dash-is-loading=\"true\"]::before {\n    content: \"\";\n    display: inline-block;\n    width: 60px;\n    height: 16px;\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n}\n\n.bounce-loader .output-example-loading[data-dash-is-loading=\"true\"]::before {\n    background: transparent;\n}\n\n.bounce-loader .output-example-loading[data-dash-is-loading=\"true\"]::before {\n    content: \"● ● ●\";\n    color: var(--mantine-color-orange-filled);\n    font-size: 22px;\n    letter-spacing: 6px;\n    animation: dotBounce 1.2s infinite ease-in-out;\n}\n\n/* Animation for Dots */\n@keyframes dotBounce {\n    0%, 80%, 100% {\n        opacity: 0.2;\n        transform: translate(-50%, -50%) scale(0.8);\n    }\n    40% {\n        opacity: 1;\n        transform: translate(-50%, -50%) scale(1.2);\n    }\n}\n```"
  },
  {
    "name": "Functions as Props",
    "endpoint": "/functions-as-props",
    "description": "Introduction to using JavaScript functions with Dash Mantine Components",
    "dmc": false,
    "category": "Dash",
    "content": "\n\n## Functions as Props  \nIntroduction to using JavaScript functions with Dash Mantine Components  \nCategory: Dash  \n\n### How Function Props Work\n\nIn JavaScript libraries like [Mantine](https://mantine.dev), some component props accept functions — for example, to\ndynamically format a value, render custom content, or control behavior. Here is an example of formating the label of the `Slider`\n\n**In Mantine**\n```js\n<Slider label={(value) => `${value} °C`}  />\n```\n\nHowever, in a Dash app, you can’t pass a function to the component because functions don't serialize over the network.\n\nTo support this safely, Dash Mantine Components allows you to pass named references to JavaScript functions instead.\n\nYou write your function in a `.js` file in the `/assets` folder, and refer to it by name in Python:\n\n**app.py**\n```python\ndmc.Slider(label={\"function\": \"celsiusLabel\"}, value=40)\n```\n\n**assets/formatCelsius.js**\n```js\nvar dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\n\ndmcfuncs.celsiusLabel = function(value) {\n  return `${value} °C`;\n};\n```\n\nDMC knows how to call this function in the browser for props like `label`.\n\n\n### Example: Formatting a Slider label\n\nSee more examples in the [Slider section](/components/slider) section.\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Slider(label={\"function\": \"celsiusLabel\"}, value=40, labelAlwaysOn=True)\n```\n\n```javascript\n\nvar dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\n\ndmcfuncs.celsiusLabel = (value) => `${value} °C`;\n```\n\n\n\n### Function Props in Mantine Components\n\nNot all Mantine props accept functions — only specific ones are designed to.\n\nHere are some examples:\n\n* `Slider`: `label`\n* `Select`: `renderOption`\n* `BarChart`: `getBarColor`\n* `ScatterChart`: `valueFormat`\n\nFor a full list of supported function props in Dash Mantine Components, see the table at the bottom of this page.\n\nEach function must match the structure expected by Mantine. To learn what arguments each one receives — and how they’re\nused — refer to the [Mantine documentation](https://mantine.dev). You’ll also find complete working examples in the relevant sections of the DMC docs.\n\n\n\n\n\n\n### Passing Extra Options\n\nYou can pass extra options from Python to customize how the JavaScript function behaves.\n\nIn this example, the same function can be used to format the label using either Celsius or Fahrenheit.\n\n.py\n```python\ndmc.Slider(\n    label={\n        \"function\": \"formatTemperature\",\n        \"options\": {\"unit\": \"F\"}\n    },\n    # other props\n)\n```\n\n.js\n```js\nvar dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\n\ndmcfuncs.formatTemperature = function (value, { unit }) {\n  if (unit === \"F\") {\n    return `${(value * 9 / 5 + 32).toFixed(1)} °F`;\n  }\n  return `${value.toFixed(1)} °C`;\n};\n```\n\n###  Returning a Component\n\nIts also possible to return React components.  To do this:\n\n- Use `React.createElement()` (no JSX).\n- access DMC components by using  `window.dash_mantine_components`.\n- If you've imported other component libraries in your Dash app, you can use them too. For example  `window.dash_iconify`, `window.dash_core_components`, etc.\n\nSee examples of including icons in the dropdown data in the `Select` section of the docs.\n\n### Example: Components and passing extra options\n\nThis example shows\n  - Returning a component.  Note the dropdown data is formated as a `Badge`.\n  - Passing extra options to the JavaScript function.  The colors for each badge are passed to the function from the dash app.\n\n\n```python\nimport dash_mantine_components as dmc\n\n\ncolors = {\n    \"Pandas\": \"grape\",\n    \"NumPy\": \"blue\",\n    \"Matplotlib\": \"teal\",\n    \"Plotly\": \"violet\",\n}\n\ncomponent = dmc.Select(\n    label=\"Choose a library\",\n    placeholder=\"Pick one\",\n    data=list(colors.keys()),\n    renderOption={\n        \"function\": \"renderBadge\",\n        \"options\": {\"colors\": colors},\n    },\n)\n```\n\n```javascript\nvar dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\nvar dmc = window.dash_mantine_components;\n\ndmcfuncs.renderBadge = function ({option}, {colors}) {\n  return React.createElement(\n    dmc.Badge,\n    {\n      color: colors[option.value] || \"gray\",\n      variant: \"light\",\n      radius: \"sm\",\n    },\n    option.value\n  );\n};\n```\n\n\n\n\n### Using Other JavaScript Libraries\nYou can use third-party JavaScript libraries inside your Dash functions — as long as you include them correctly in your app.\n\nHere is an example of including the `dayjs` library as an external script:\n\n```python\napp = Dash(exteral_scripts=[\"https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/dayjs.min.js\"])\n```\n\n.js\n```json\nvar dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\n\ndmcfuncs.excludeDate = function(dateStr) {\n   const date = dayjs(dateStr, \"YYYY-MM-DD\");\n   return date.isValid() && date.day() !== 5;\n}\n```\n\n### Use AI to Help Write JavaScript\n\nMost Dash users are more comfortable writing Python than JavaScript. You can use AI tools like ChatGPT to generate the\nJavaScript functions needed for Dash Mantine Components.\n\nWhile it's possible to describe the logic in plain English, in practice, writing the function in Python and asking the \nAI to translate it tends to produce more accurate and usable results. It gives the model a clear structure and avoids\nambiguity, especially for functions with conditions, formatting rules, or custom output.\n\n#### Prompt Template\nWhen asking AI to generate a function:\n\n1. State the function name.\n2. Mention it’s for Dash Mantine Components.\n3. Ask it to assign the function to dmcfuncs.functionName.\n4. Provide the Python logic (or natural language)\n5. Always include this global header:\n    ```\n    var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\n    ```\n6. If the function returns a component, mention:\n   - Use `React.createElement`\n   - Don’t use JSX\n   - Use `window.dash_mantine_components`\n\n\n#### Example 1:  Simple function\n\nAI Prompt:\n\n> Write a JavaScript function for Dash Mantine Components named `formatUsd`. Assign it to `dmcfuncs.formatUsd`. In Python, the function would be:\n>\n> ```python\n> def formatUsd(value):\n     return f\"${value:,.2f}\"\n> ```\n\nAI Output:\n\n```js\nvar dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\n\ndmcfuncs.formatUsd = function (value) {\n  return `$${new Intl.NumberFormat(\"en-US\", { minimumFractionDigits: 2 }).format(value)}`;\n};\n```\n\n\n\n#### Example 2 Function with options\n\nAI Prompt:\n\n> Write a JavaScript function for Dash Mantine Components named `formatTemp`. Assign it to `dmcfuncs.formatTemp`. In Python, the function would be:\n> ```python\n> def formatTemp(value, unit=\"C\"):\n>    if unit == \"F\":\n>        return f\"{value * 9 / 5 + 32:.1f} °F\"\n>    return f\"{value:.1f} °C\"\n>```\n\nAI Output:\n\n```js\nvar dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\n\ndmcfuncs.formatTemp = function (value, { unit }) {\n  if (unit === \"F\") {\n    return `${(value * 9 / 5 + 32).toFixed(1)} °F`;\n  }\n  return `${value.toFixed(1)} °C`;\n};\n```\n\n---\n\n#### Example 3: Return a Component\n\n\nAI Prompt\n\n> Write a JavaScript function for Dash Mantine Components named `renderBadge`. Assign it to `dmcfuncs.renderBadge`. \n> This function returns a React component. Use `React.createElement`. Do not use JSX. Use `dmc = window.dash_mantine_components`.\n> In Python, the function would be:\n\n> ```python\n> def renderBadge(option):\n>    return dmc.Badge(\n>        option[\"value\"],\n>        color= \"red\" if option[\"value\"] == \"A\" else \"blue\",\n>        variant=\"light\",\n>        radius=\"sm\"        \n>    )\n> ```\n\n\nAI Output\n\n```js\nvar dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\nvar dmc = window.dash_mantine_components;\n\ndmcfuncs.renderBadge = function ({ option }) {\n  return React.createElement(\n    dmc.Badge,\n    {\n      color: option.value === \"A\" ? \"red\" : \"blue\",\n      variant: \"light\",\n      radius: \"sm\"\n    },\n    option.value\n  );\n};\n\n```\n\nSupported props in V2\n\nThe following props support JavaScript functions in Dash Mantine Components version >=2.0.0.\nIf there’s a Mantine prop you’d like to see added, feel free to [open an issue on GitHub.](https://github.com/snehilvj/dash-mantine-components/issues)\n\n| Component        | Props                                     |\n|------------------|-------------------------------------------|\n| Slider           | label, scale                              |\n| RangeSlider      | label, scale                              |\n| Select           | renderOption, filter                      |\n| MultiSelect      | renderOption, filter                      |\n| TagsInput        | renderOption, filter                      |\n| DatePickerInput  | disabledDates                             |\n| DateInput        | disabledDates                             |\n| DateTimePicker   | disabledDates                             |\n| MonthPickerInput | disabledDates                             |\n| YearPickerInput  | disabledDates                             |\n| BarChart         | getBarColor, valueFormatter, tooltipProps |\n| AreaChart        | valueFormatter, tooltipProps              |\n| LineChart        | valueFormatter, tooltipProps              |\n| CompositeChart   | valueFormatter, tooltipProps              |\n| BubbleChart      | valueFormatter, tooltipProps              |\n| ScatterChart     | valueFormatter, tooltipProps              |\n\n\n\n\n\nAdditional Supported props in V2.1.0\n\n\n| Component        | Props                                                             |\n|------------------|-------------------------------------------------------------------|\n| AutoComplete     | renderOption, filter                                              |\n| DatePickerInput  | getYearControlProps, getMonthControlProps, getDayProps, renderDay |\n| DateInput        | getYearControlProps, getMonthControlProps, getDayProps, renderDay |\n| DateTimePicker   | getYearControlProps, getMonthControlProps, getDayProps, renderDay |\n| MonthPickerInput | getYearControlProps, getMonthControlProps                         |\n| YearPickerInput  | getYearControlProps                                               |\n| Tree             | renderNode                                                        |\n\n\nAdditional Supported props in V2.4.0\n\n| Component                                                                 | Props                                              |\n| ------------------------------------------------------------------------- | -------------------------------------------------- |\n| AreaChart, BarChart, BubbleChart, CompositeChart, LineChart, ScatterChart | xAxisProps, yAxisProps, gridProps, rightYAxisProps |\n| BubbleChart                                                               | zAxisProps                                         |"
  },
  {
    "name": "debounce prop",
    "endpoint": "/debounce",
    "description": "Learn how to use the debounce prop in Dash Mantine Components to control when input values update. Reduce callback load and improve performance in text inputs, dropdowns, pickers, and more.",
    "category": "Dash",
    "content": "\n\n## debounce prop  \nLearn how to use the debounce prop in Dash Mantine Components to control when input values update. Reduce callback load and improve performance in text inputs, dropdowns, pickers, and more.  \nCategory: Dash  \n\n### About the debounce prop\n\n\nThe `debounce` prop delays the update of a component's value until the user stops interacting, reducing callback\nfrequency for inputs.\n\n\nTo control how often the input's value is updated while the user is typing, use the `debounce` prop:\n\n- `debounce=False` Is the default and it will update as the user interacts with the input.\n- Set `debounce=True` to update the value only when the user finishes typing and moves focus away (i.e. on blur).\n- Set `debounce=<milliseconds>` to update the value after a specified delay from the user's last keystroke. For example,\n`debounce=300` will wait 300 milliseconds after the user stops typing before updating the value.\n\n\n####  debounce=False\n```python\nimport dash_mantine_components as dmc\nfrom dash import callback, Input, Output\n\n\ncomponent = dmc.Group(\n    gap=50,\n    children=[\n        dmc.TimePicker(label=\"Enter a time\", id=\"timepicker-usage\"),\n        dmc.Text(id=\"out-timepicker\")\n    ],\n)\n\n@callback(\n    Output(\"out-timepicker\", \"children\"),\n    Input(\"timepicker-usage\", \"value\")\n)\ndef update(value):\n    return f\"You entered: {value}\"\n```\n####  debounce=True\n```python\nimport dash_mantine_components as dmc\nfrom dash import callback, Input, Output\n\n\ncomponent = dmc.Group(\n    gap=50,\n    children=[\n        dmc.TimePicker(\n            label=\"Enter a time\",\n            debounce=True,\n            id=\"timepicker-debounce\"\n        ),\n        dmc.Text(id=\"out-timepicker-debounce\")\n    ],\n)\n\n@callback(\n    Output(\"out-timepicker-debounce\", \"children\"),\n    Input(\"timepicker-debounce\", \"value\")\n)\ndef update(value):\n    return f\"You entered: {value}\"\n```\n#### debounce=1000\n```python\nimport dash_mantine_components as dmc\nfrom dash import callback, Input, Output\n\n\ncomponent = dmc.Group(\n    gap=50,\n    children=[\n        dmc.TimePicker(\n            label=\"Enter a time\",\n            debounce=1000,\n            id=\"timepicker-debounce-ms\"\n        ),\n        dmc.Text(id=\"out-timepicker-debounce-ms\")\n    ],\n)\n\n@callback(\n    Output(\"out-timepicker-debounce-ms\", \"children\"),\n    Input(\"timepicker-debounce-ms\", \"value\")\n)\ndef update(value):\n    return f\"You entered: {value}\"\n```\n### Example with TextInput\n\nThis example uses `debounce=True`.  Note that the comments are updated only after the user has\nfinished entering data.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import  callback, Input, Output\n\ncomponent = dmc.Stack(\n\n    [\n        dmc.TextInput(\n            id=\"debounce-text\",\n            label=\"Enter your comments\",\n            debounce=True\n        ),\n        dmc.Text(id=\"debounce-text-output\"),\n    ],\n)\n\n\n@callback(\n    Output(\"debounce-text-output\", \"children\"),\n    Input(\"debounce-text\", \"value\"),\n)\ndef update_output(comments):\n    if not comments:\n        return \"\"\n    return f\"Thank you for your feedback: {comments}\"\n```\n### Supported Components\nThe `debounce` prop is supported by many DMC input components, including:\n\n- TextInput\n\n- Textarea\n\n- NumberInput\n\n- PasswordInput\n\n- JsonInput\n\n- Select, MultiSelect, Autocomplete\n\n- DateInput, DateTimePicker, DatePickerInput\n\n- MonthPickerInput, YearPickerInput, TimeInput, TimePicker\n\n- RichTextEditor\n\n\nFor the `Slider` and `RangeSlider`  use [updatemode](/components/slider#update-mode)\n\n### Usage Tips\n\n- Use `debounce=True` for forms where you only care about the final value after the user finishes typing, for example, email fields, names, comments.\n\n- Use `debounce=300` or higher for search boxes or filters that trigger live updates (for example,  querying a table or filtering a plot). This prevents the app from firing a callback on every keystroke and keeps things responsive.\n\n- Combine with `n_submit` or `n_blur` if you want finer control over when inputs send updates."
  },
  {
    "name": "persistence props",
    "endpoint": "/persistence",
    "description": "Dash Mantine Components support Dash’s built-in persistence system, allowing component values to be retained across page reloads, tabs, or user sessions — without writing extra callbacks.",
    "category": "Dash",
    "content": "\n\n## persistence props  \nDash Mantine Components support Dash’s built-in persistence system, allowing component values to be retained across page reloads, tabs, or user sessions — without writing extra callbacks.  \nCategory: Dash  \n\n### Overview: Persistence in Dash\n\nWhen a user interacts with a component (like typing in a `TextInput` or selecting a `Date`), its value is\nstored in local memory (or optionally, in localStorage or sessionStorage). If the user refreshes the page, navigates\naway and returns, or reopens the tab, that value can be restored automatically.\n\nThis helps maintain app state with minimal effort.\n\n### How to Enable Persistence\n\nYou can enable persistence on any supported component by setting these props:\n\n```python\npersistence=True\npersisted_props=[\"value\"]  # or other prop(s) to persist. Typically use the default.\npersistence_type=\"local\"   # \"local\", \"session\", or \"memory\" (default is \"local\")\nid=\"component-id\"  # required for persistence to work\n```\n\n### Example: Persistent TextInput\nTry typing something in each box, then refresh the browser to see which one remembers your input.\n    \n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Stack(\n    [\n        dmc.TextInput(\n            id=\"persisted-input\", # id required-  persistence only works on components with an id\n            label=\"With persistence\",\n            placeholder=\"This will stick\",\n            persistence=True,\n        ),\n        dmc.TextInput(\n            id=\"non-persisted-input\",\n            label=\"Without persistence\",\n            placeholder=\"This will reset\",\n        ),\n    ],\n)\n```\n### Important Notes\n\n* In DMC, the `persisted_prop` is already set with an appropriate default for each component, so you don’t need to specify it.\n* An `id` is required — persistence will not work without one.\n* Due to [an open issue in Dash](https://github.com/plotly/dash/issues/3147), persistence does not work if your layout is simply a list of components. The layout must be a single component (or a function returning one).\n\nThis **does work**:\n\n```python\napp.layout = dmc.MantineProvider(\n    dmc.Container([\n        dmc.Select(id=\"select\", data=[\"A\", \"B\", \"C\"], persistence=True)\n    ])\n)\n```\n\nThis **will not work**:\n\n```python\napp.layout = dmc.MantineProvider(\n    [\n        dmc.Select(id=\"select\", data=[\"A\", \"B\", \"C\"], persistence=True)\n    ]\n)\n```\n\n### Supported DMC Components\n\nPersistence is available for all stateful inputs in DMC — including:\n\n* `TextInput`, `Textarea`, `PasswordInput`, `NumberInput`\n* `Select`, `MultiSelect`, `TagsInput`\n* `Checkbox`, `RadioGroup`, `Switch`\n* `DateInput`, `DateTimePicker`, `TimeInput`, etc.\n\nTo check if a specific component supports persistence, look for the `persistence`, `persisted_props`, and\n`persistence_type` props in the Keyword Arguments section of its documentation.\n\n\n\n### Reference\n\nFor more details see the [Persistence section in the Dash documentation.](https://dash.plotly.com/persistence)\n\n- `persistence` (boolean | string | number; optional): Any truthy value will enable persistence for this component. Persistence is keyed to the combination of component id and this persistence value, so if this value changes you will see different persisted settings. For example, perhaps you have dropdowns for country and city, and you know that your users want to see the same country pre-filled as the last time they used your app - you can just set persistence=True on the country dropdown. But for the city they would like to see the same one as the last time they chose that country - just set persistence=country_name (where country_name is the value of the chosen country) on the city dropdown and we'll save one preferred city for each country.\n\n- `persistence_type` ('local', 'session', or 'memory'; default 'local'): Where persisted user changes will be stored:\n\n  - `memory`: only kept in memory, reset on page refresh. This is useful for example if you have a tabbed app, that deletes the component when a different tab is active, and you want changes persisted as you switch tabs but not after reloading the app.\n  - `local`: uses window.localStorage. This is the default, and keeps the data indefinitely within that browser on that computer.\n  - `session`: uses window.sessionStorage. Like 'local' the data is kept when you reload the page, but cleared when you close the browser or open the app in a new browser tab.\n\n- `persistence_props` (list of strings; optional): These are the props whose values will persist. Typically this defaults to all user-editable props, which in many cases is just one (ie 'value'). dash-table has many props users can edit, and all of them except 'data' are included here by default. Sometimes only a part of a prop is saved; this happens with table headers, which are only part of the columns prop. The corresponding persistence_props value is 'columns.name'."
  },
  {
    "name": "Accordion",
    "description": "Use the Accordion and AccordionX components to toggle between hiding and showing large amount of content.",
    "endpoint": "/components/accordion",
    "package": "dash_mantine_components",
    "category": "Data Display",
    "content": "\n\n## Accordion  \nUse the Accordion and AccordionX components to toggle between hiding and showing large amount of content.  \nCategory: Data Display  \n\n### Introduction\n\n### Multiple Items\n\nSet `multiple=True` to enable opening multiple items.\n\n```python\nimport dash_mantine_components as dmc\n\ndmc.Accordion(\n    children=[...],\n    multiple=True\n)\n```\n\n### Custom Accordion Label\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html\n\ncharacters_list = [\n    {\n        \"id\": \"bender\",\n        \"image\": \"https://img.icons8.com/clouds/256/000000/futurama-bender.png\",\n        \"label\": \"Bender Bending Rodríguez\",\n        \"description\": \"Fascinated with cooking, though has no sense of taste\",\n        \"content\": \"Bender Bending Rodríguez, (born September 4, 2996), designated Bending Unit 22, and commonly \"\n        \"known as Bender, is a bending unit created by a division of MomCorp in Tijuana, Mexico, \"\n        \"and his serial number is 2716057. His mugshot id number is 01473. He is Fry's best friend.\",\n    },\n    {\n        \"id\": \"carol\",\n        \"image\": \"https://img.icons8.com/clouds/256/000000/futurama-mom.png\",\n        \"label\": \"Carol Miller\",\n        \"description\": \"One of the richest people on Earth\",\n        \"content\": \"Carol Miller (born January 30, 2880), better known as Mom, is the evil chief executive officer \"\n        \"and shareholder of 99.7% of Momcorp, one of the largest industrial conglomerates in the universe \"\n        \"and the source of most of Earth's robots. She is also one of the main antagonists of the Futurama \"\n        \"series.\",\n    },\n    {\n        \"id\": \"homer\",\n        \"image\": \"https://img.icons8.com/clouds/256/000000/homer-simpson.png\",\n        \"label\": \"Homer Simpson\",\n        \"description\": \"Overweight, lazy, and often ignorant\",\n        \"content\": \"Homer Jay Simpson (born May 12) is the main protagonist and one of the five main characters of \"\n        \"The Simpsons series(or show). He is the spouse of Marge Simpson and father of Bart, \"\n        \"Lisa and Maggie Simpson.\",\n    },\n]\n\n\ndef create_accordion_label(label, image, description):\n    return dmc.AccordionControl(\n        dmc.Group(\n            [\n                dmc.Avatar(src=image, radius=\"xl\", size=\"lg\"),\n                html.Div(\n                    [\n                        dmc.Text(label),\n                        dmc.Text(description, size=\"sm\", fw=400, c=\"dimmed\"),\n                    ]\n                ),\n            ]\n        )\n    )\n\n\ndef create_accordion_content(content):\n    return dmc.AccordionPanel(dmc.Text(content, size=\"sm\"))\n\n\ncomponent = dmc.Accordion(\n    chevronPosition=\"right\",\n    variant=\"contained\",\n    children=[\n        dmc.AccordionItem(\n            [\n                create_accordion_label(\n                    character[\"label\"], character[\"image\"], character[\"description\"]\n                ),\n                create_accordion_content(character[\"content\"]),\n            ],\n            value=character[\"id\"],\n        )\n        for character in characters_list\n    ],\n)\n```\n### Customizing chevron\n\nYou can use [dash-iconify](/dash-iconify) to change the chevron icon.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ndmc.Accordion(\n    chevron=DashIconify(icon=\"ant-design:plus-outlined\"),\n    disableChevronRotation=True,\n    children=[...]\n)\n```\n\n### With icons\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ncomponent = dmc.Accordion(\n    disableChevronRotation=True,\n    children=[\n        dmc.AccordionItem(\n            [\n                dmc.AccordionControl(\n                    \"Personal Information\",\n                    icon=DashIconify(\n                        icon=\"tabler:user\",\n                        color=\"var(--mantine-color-blue-6)\",\n                        width=20,\n                    ),\n                ),\n                dmc.AccordionPanel(\"some content\"),\n            ],\n            value=\"info\",\n        ),\n        dmc.AccordionItem(\n            [\n                dmc.AccordionControl(\n                    \"Shipping Address\",\n                    icon=DashIconify(\n                        icon=\"tabler:map-pin\",\n                        color= \"var(--mantine-color-red-6)\",\n                        width=20,\n                    ),\n                ),\n                dmc.AccordionPanel(\"some content\"),\n            ],\n            value=\"addr\",\n        ),\n        dmc.AccordionItem(\n            [\n                dmc.AccordionControl(\n                    \"Confirmation\",\n                    icon=DashIconify(\n                        icon=\"tabler:circle-check\",\n                        color= \"var(--mantine-color-green-6)\",\n                        width=20,\n                    ),\n                ),\n                dmc.AccordionPanel(\"some content\"),\n            ],\n            value=\"focus\",\n        ),\n    ],\n)\n```\n### Change transition\n\n```python\nimport dash_mantine_components as dmc\n\ndmc.Accordion(\n    children=[...],\n    transitionDuration=1000\n)\n```\n\n### Default opened items\n\nProvide a default value using the `value` prop.\n\n```python\nimport dash_mantine_components as dmc\n\ndmc.Accordion(\n    children=[...],\n    value=\"flexibility\"\n)\n```\n\nIf `multiple` is `True`, then value will be a list:\n\n```python\nimport dash_mantine_components as dmc\n\ndmc.Accordion(\n    children=[...],\n    value=[\"flexibility\", ]\n)\n```\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Accordion(\n    value=[\"flexibility\"],\n    multiple=True,\n    children=[\n        dmc.AccordionItem(\n            [\n                dmc.AccordionControl(\"Customization\"),\n                dmc.AccordionPanel(\n                    \"Colors, fonts, shadows and many other parts are customizable to fit your design needs\"\n                ),\n            ],\n            value=\"customization\",\n        ),\n        dmc.AccordionItem(\n            [\n                dmc.AccordionControl(\"Flexibility\"),\n                dmc.AccordionPanel(\n                    \"Configure temp appearance and behavior with vast amount of settings or overwrite any part of \"\n                    \"component styles \"\n                ),\n            ],\n            value=\"flexibility\",\n        ),\n    ],\n)\n```\n### Callbacks and State Management\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import Output, Input, html, callback\n\ncomponent = html.Div(\n    children=[\n        dmc.Accordion(\n            id=\"accordion-simple\",\n            value=\"customization\",\n            children=[\n                dmc.AccordionItem(\n                    [\n                        dmc.AccordionControl(\"Customization\"),\n                        dmc.AccordionPanel(\n                            \"Colors, fonts, shadows and many other parts are customizable to fit your design needs\"\n                        ),\n                    ],\n                    value=\"customization\",\n                ),\n                dmc.AccordionItem(\n                    [\n                        dmc.AccordionControl(\"Flexibility\"),\n                        dmc.AccordionPanel(\n                            \"Configure temp appearance and behavior with vast amount of settings or overwrite any \"\n                            \"part of component styles \"\n                        ),\n                    ],\n                    value=\"flexibility\",\n                ),\n            ],\n        ),\n        dmc.Text(id=\"accordion-state\", mt=10),\n    ]\n)\n\n\n@callback(Output(\"accordion-state\", \"children\"), Input(\"accordion-simple\", \"value\"))\ndef show_state(value):\n    return value\n```\n### Compose control\n\nYou can add any additional elements that will be displayed next to `AccordionControl`, for example, you can add `ActionIcon` or `Menu`.\n This enables interaction with the element without affecting the opening or closing of the accordion item. In this\nexample, try clicking the heart icon.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import Output, Input, html, callback, MATCH\nfrom dash_iconify import DashIconify\n\n\ndef make_control(text, action_id):\n    return dmc.Flex(\n        [\n            dmc.AccordionControl(text),\n            dmc.ActionIcon(\n                children=DashIconify(icon=\"tabler:heart\"),\n                color=\"yellow\",\n                variant=\"default\",\n                n_clicks=0,\n                id={\"index\": action_id},\n            ),\n        ],\n        justify=\"space-between\",\n    )\n\n\ncomponent = dmc.Accordion(\n    id=\"accordion-compose-controls\",\n    chevronPosition=\"left\",\n    children=[\n        dmc.AccordionItem(\n            [\n                make_control(f\"Item {i}\", f\"action-{i}\"),\n                dmc.AccordionPanel(f\"Content for AccordionItem {i}\"),\n            ],\n            value=f\"item-{i}\",\n        )\n        for i in range(5)\n    ],\n)\n\n\n@callback(Output({\"index\": MATCH}, \"variant\"), Input({\"index\": MATCH}, \"n_clicks\"))\ndef update_heart(n):\n    if n % 2 == 0:\n        return \"default\"\n    return \"filled\"\n```\n### Disabled Item\n\nSet `disabled=True` in dmc.AccordionControl to disable it. \n\n```python\nimport dash_mantine_components as dmc\n\ndmc.AccordionControl(children=[...], disabled=True)\n```\n\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n\n#### Accordion selectors\n\n| Selector   | Static selector                | Description                                    |\n|------------|---------------------------------|------------------------------------------------|\n| root       | .mantine-Accordion-root         | Root element                                   |\n| item       | .mantine-Accordion-item         | Accordion.Item root element                    |\n| control    | .mantine-Accordion-control      | Accordion.Control root element                 |\n| chevron    | .mantine-Accordion-chevron      | Accordion.Control chevron container element    |\n| label      | .mantine-Accordion-label        | Accordion.Control label                        |\n| icon       | .mantine-Accordion-icon         | Accordion.Control icon                         |\n| itemTitle  | .mantine-Accordion-itemTitle    | Accordion.Control title (h2-h6) tag            |\n| panel      | .mantine-Accordion-panel        | Accordion.Panel root element                   |\n| content    | .mantine-Accordion-content      | Wrapper element of Accordion.Panel children    |\n\n\n#### Accordion CSS variables\n\n| Selector | Variable                        | Description                                                    |\n|----------|----------------------------------|----------------------------------------------------------------|\n| root     | --accordion-chevron-size         | Controls chevron container element width and min-width          |\n|          | --accordion-radius               | Controls border-radius in various elements, depending on variant |\n|          | --accordion-transition-duration  | Controls all animations' transition-duration                    |\n\n\n#### Accordion data attributes\n\n| Selector      | Attribute               | Condition               | Value                                   |\n|---------------|-------------------------|-------------------------|-----------------------------------------|\n| item, control | data-active              | Item is active (opened)  | –                                       |\n| control       | data-chevron-position    | –                       | Value of `chevronPosition` prop on Accordion |\n\n\n\n\n### Keyword Arguments\n#### Accordion\n\n- children (a list of or a singular dash component, string or number; required):\n    Accordion content.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- chevron (a list of or a singular dash component, string or number; optional):\n    Custom chevron icon that will be used in all items.\n\n- chevronIconSize (string | number; optional):\n    Size of the default chevron icon. Ignored when `chevron` prop is\n    set. default `16`.\n\n- chevronPosition (a value equal to: 'left', 'right'; optional):\n    Position of the chevron relative to the item label, `right` by\n    default.\n\n- chevronSize (string | number; optional):\n    Size of the chevron icon container, `24` by default.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- disableChevronRotation (boolean; optional):\n    Determines whether chevron rotation should be disabled, `False` by\n    default.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- loop (boolean; optional):\n    Determines whether arrow key presses should loop though items\n    (first to last and last to first), `True` by default.\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- multiple (boolean; optional):\n    Determines whether multiple items can be opened at a time, `False`\n    by default.\n\n- order (a value equal to: 2, 3, 4, 5, 6; optional):\n    Heading order, has no effect on visuals.\n\n- persisted_props (list of strings; optional):\n    Properties whose user interactions will persist after refreshing\n    the component or the page. Since only `value` is allowed this prop\n    can normally be ignored.\n\n- persistence (string | number | boolean; optional):\n    Used to allow user interactions in this component to be persisted\n    when the component - or the page - is refreshed. If `persisted` is\n    truthy and hasn't changed from its previous value, a `value` that\n    the user has changed while using the app will keep that change, as\n    long as the new `value` also matches what was given originally.\n    Used in conjunction with `persistence_type`. Note:  The component\n    must have an `id` for persistence to work.\n\n- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):\n    Where persisted user changes will be stored: memory: only kept in\n    memory, reset on page refresh. local: window.localStorage, data is\n    kept after the browser quit. session: window.sessionStorage, data\n    is cleared once the browser quit.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set border-radius.\n    Numbers are converted to rem. `theme.defaultRadius` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- transitionDuration (number; optional):\n    Transition duration in ms, `200` by default.\n\n- value (string | list of strings; optional):\n    Value for controlled component.\n\n- variant (a value equal to: 'default', 'contained', 'filled', 'separated'; optional):\n    Controls visuals.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n#### AccordionControl\n\n- children (a list of or a singular dash component, string or number; optional):\n    Control label.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- chevron (a list of or a singular dash component, string or number; optional):\n    Custom chevron icon.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- disabled (boolean; optional):\n    Disables control button.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- icon (a list of or a singular dash component, string or number; optional):\n    Icon displayed next to the label.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n#### AccordionItem\n\n- children (a list of or a singular dash component, string or number; optional):\n    Content.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- value (string; required):\n    Value that is used to manage accordion state.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n#### AccordionPanel\n\n- children (a list of or a singular dash component, string or number; optional):\n    Content.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`."
  },
  {
    "name": "Avatar",
    "description": "Use Avatar to display user profile pictures. It supports images, icons, or letters. Use AvatarGroup to display stack Avatar components.",
    "endpoint": "/components/avatar",
    "package": "dash_mantine_components",
    "category": "Data Display",
    "content": "\n\n## Avatar  \nUse Avatar to display user profile pictures. It supports images, icons, or letters. Use AvatarGroup to display stack Avatar components.  \nCategory: Data Display  \n\n### Simple Usage\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ncomponent = dmc.Group(\n    children=[\n        dmc.Avatar(\n            src=\"https://avatars.githubusercontent.com/u/91216500?v=4\", radius=\"xl\"\n        ),\n        # default placeholder\n        dmc.Avatar(radius=\"xl\"),\n        # initials\n        dmc.Avatar(\"MK\", color=\"cyan\", radius=\"xl\"),\n        # icon\n        dmc.Avatar(DashIconify(icon=\"radix-icons:star\"), color=\"blue\", radius=\"xl\"),\n    ],\n)\n```\n### Initials\nTo display initials instead of the default placeholder, set name prop to the name of the person, for example,\n`name='John Doe'`. If the name is set, you can use `color='initials'` to generate color based on the name:\n\n```python\nimport dash_mantine_components as dmc\n\n\n\nnames = [\n    \"John Doe\",\n    \"Jane Mol\",\n    \"Alex Lump\",\n    \"Sarah Condor\",\n    \"Mike Johnson\",\n    \"Kate Kok\",\n    \"Tom Smith\",\n]\n\navatars = [dmc.Avatar(name=name, color=\"initials\") for name in names]\n\ncomponent = dmc.Group(avatars)\n```\n### Allowed initials colors\nBy default, all colors from the default theme are allowed for initials, you can restrict them by providing \n`allowedInitialsColors` prop with an array of colors. Note that the default colors array does not include custom\ncolors defined in the theme, you need to provide them manually if needed.\n\n```python\nimport dash_mantine_components as dmc\n\nnames = [\n    \"John Doe\",\n    \"Jane Mol\",\n    \"Alex Lump\",\n    \"Sarah Condor\",\n    \"Mike Johnson\",\n    \"Kate Kok\",\n    \"Tom Smith\",\n]\n\ncomponent = dmc.Group(\n    [\n        dmc.Avatar(name=n, color=\"initials\", allowedInitialsColors=[\"blue\", \"red\"])\n        for n in names\n    ]\n)\n```\n### Size, Radius and Variant\n\nControl Avatar's height and width with `size` prop and border-radius with `radius` prop. Both props have\npredefined values: xs, sm, md, lg, xl. Alternatively, a number can be used to set radius or size in px.\n\nYou can also use `variant` to style the Avatar.\n\n```python\nimport dash_mantine_components as dmc\n\ndmc.Avatar(src=\"/assets/avatar.jpeg\", size=\"sm\"),\ndmc.Avatar(src=\"/assets/avatar.jpeg\"),\ndmc.Avatar(src=\"/assets/avatar.jpeg\", size=50, radius=\"xl\"),\ndmc.Avatar(src=\"/assets/avatar.jpeg\", size=\"xl\", radius=20),\ndmc.Avatar(src=\"/assets/avatar.jpeg\", size=\"xl\", variant=\"outline\"),\n```\n\n### Avatar Group\n\nUse AvatarGroup to stack Avatar components.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ncomponent = dmc.AvatarGroup(\n    children=[\n        dmc.Avatar(\n            src=\"https://avatars.githubusercontent.com/u/91216500?v=4\", radius=\"xl\"\n        ),\n        dmc.Avatar(\n            src=\"https://avatars.githubusercontent.com/u/24227892?v=4\", radius=\"xl\"\n        ),\n        dmc.Avatar(radius=\"xl\"),\n        dmc.Avatar(\"MK\", color=\"cyan\", radius=\"xl\"),\n        dmc.Avatar(DashIconify(icon=\"radix-icons:star\"), color=\"blue\", radius=\"xl\"),\n    ],\n)\n```\n### Avatar link with tooltip\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html\n\ncomponent = html.A(\n    dmc.Tooltip(\n        dmc.Avatar(\n            src=\"https://e7.pngegg.com/pngimages/799/987/png-clipart-computer-icons-avatar-icon-design-avatar-heroes\"\n            \"-computer-wallpaper-thumbnail.png\",\n            size=\"lg\",\n            radius=\"xl\",\n        ),\n        label=\"Snehil Vijay\",\n        position=\"bottom\",\n    ),\n    href=\"https://www.linkedin.com/in/snehilvj/\",\n    target=\"_blank\",\n)\n```\n### Dynamically created AvatarGroup\n\nHere's an example of a dynamically created AvatarGroup from GitHub contributors to DMC library.\n\n```python\nfrom os import environ\n\nimport dash_mantine_components as dmc\nimport requests\n\n\ndef create_contributors_list():\n    resp = requests.get(\n        \"https://api.github.com/repos/snehilvj/dash-mantine-components/contributors\",\n        headers={\"authorization\": f\"token {environ['CONTRIB_TOKEN']}\"},\n    )\n    contributors = resp.json()\n\n    children = []\n    for user in contributors:\n        avatar = dmc.Avatar(src=user[\"avatar_url\"], radius=\"xl\")\n        children.append(avatar)\n\n    return dmc.AvatarGroup(children, id=\"avatar-group\")\n\n\ncomponent = create_contributors_list() if \"CONTRIB_TOKEN\" in environ else None\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n| Name            | Static selector                 | Description                                               |\n|:----------------|:--------------------------------|:----------------------------------------------------------|\n| root            | .mantine-Avatar-root            | Root element                                              |\n| image           | .mantine-Avatar-image           | `img` element                                             |\n| placeholder     | .mantine-Avatar-placeholder     | Placeholder element, rendered when image cannot be loaded |\n\n\n### Keyword Arguments\n#### Avatar\n\n- children (a list of or a singular dash component, string or number; optional):\n    Avatar placeholder, displayed when `src={None}` or when the image\n    cannot be loaded.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- allowedInitialsColors (list; optional):\n    An array of colors that can be used for autogenerated initials. By\n    default, all default Mantine colors can be used except gray and\n    dark.\n\n- alt (string; optional):\n    Image `alt` attribute, also used as `title` attribute for\n    placeholder.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- autoContrast (boolean; optional):\n    Determines whether text color with filled variant should depend on\n    `background-color`. If luminosity of the `color` prop is less than\n    `theme.luminosityThreshold`, then `theme.white` will be used for\n    text color, otherwise `theme.black`. Overrides\n    `theme.autoContrast`.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- color (optional):\n    Key of `theme.colors` or any valid CSS color, default value is\n    `theme.primaryColor`.  Set to \"initials\" to auto generate color\n    based on `name`.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- gradient (dict; optional):\n    Gradient configuration used when `variant=\"gradient\"`, default\n    value is `theme.defaultGradient`.\n\n    `gradient` is a dict with keys:\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- imageProps (dict; optional):\n    `img` tag attributes.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- name (string; optional):\n    Name of the user. When src is not set, used to display initials\n    and to generate color when color=\"initials\" is set.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set border-radius,\n    `'100%'` by default.\n\n- size (number; optional):\n    Width and height of the avatar, numbers are converted to rem,\n    `'md'` by default.\n\n- src (string; optional):\n    Image url, if the image cannot be loaded or `src={None}`, then\n    placeholder is displayed instead.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n#### AvatarGroup\n\n- children (a list of or a singular dash component, string or number; optional):\n    <Avatar /> components.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- spacing (number; optional):\n    Negative space between Avatar components, `'sm'` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`."
  },
  {
    "name": "Badge",
    "description": "Use Badges to show indicators, numerical or otherwise.",
    "endpoint": "/components/badge",
    "package": "dash_mantine_components",
    "category": "Data Display",
    "content": "\n\n## Badge  \nUse Badges to show indicators, numerical or otherwise.  \nCategory: Data Display  \n\n### Introduction\n\n### Variants\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Group(\n    [\n        dmc.Badge(\"Default light badge\"),\n        dmc.Badge(\"Dot badge\", variant=\"dot\"),\n        dmc.Badge(\"Outline badge\", variant=\"outline\"),\n        dmc.Badge(\"Filled badge\", variant=\"filled\"),\n    ]\n)\n```\n### Colors\n\n```python\nimport dash_mantine_components as dmc\n\ndmc.Badge(\"Orange\", color=\"orange\")\n```\n\n### Gradient variant\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Group(\n    children=[\n        dmc.Badge(\n            \"Indigo cyan\",\n            variant=\"gradient\",\n            gradient={\"from\": \"indigo\", \"to\": \"cyan\"},\n        ),\n        dmc.Badge(\n            \"Lime green\",\n            variant=\"gradient\",\n            gradient={\"from\": \"teal\", \"to\": \"lime\", \"deg\": 105},\n        ),\n        dmc.Badge(\n            \"Teal blue\",\n            variant=\"gradient\",\n            gradient={\"from\": \"teal\", \"to\": \"blue\", \"deg\": 60},\n        ),\n        dmc.Badge(\n            \"Orange red\",\n            variant=\"gradient\",\n            gradient={\"from\": \"orange\", \"to\": \"red\"},\n        ),\n        dmc.Badge(\n            \"Grape pink\",\n            variant=\"gradient\",\n            gradient={\"from\": \"grape\", \"to\": \"pink\", \"deg\": 35},\n        ),\n    ]\n)\n```\n### Size\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Group(\n    [\n        dmc.Badge(\"Sale\", size=\"xs\"),\n        dmc.Badge(\"Sale\", size=\"sm\"),\n        dmc.Badge(\"Sale\", size=\"md\"),\n        dmc.Badge(\"Sale\", size=\"lg\"),\n        dmc.Badge(\"Sale\", size=\"xl\"),\n    ]\n)\n```\n### Radius\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Group(\n    [\n        dmc.Badge(\"Sale\", radius=\"xs\"),\n        dmc.Badge(\"Sale\", radius=\"sm\"),\n        dmc.Badge(\"Sale\", radius=\"md\"),\n        dmc.Badge(\"Sale\", radius=\"lg\"),\n        dmc.Badge(\"Sale\", radius=\"xl\"),\n    ]\n)\n```\n### Rounded\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Group(\n    [\n        dmc.Badge(1, size=\"xs\", circle=True),\n        dmc.Badge(7, size=\"sm\", circle=True),\n        dmc.Badge(9, size=\"md\", circle=True),\n        dmc.Badge(3, size=\"lg\", circle=True),\n        dmc.Badge(8, size=\"xl\", circle=True),\n    ]\n)\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n| Name         | Static selector             | Description             |\n|:-------------|:----------------------------|:------------------------|\n| root         | .mantine-Badge-root         | Root element            |\n| label        | .mantine-Badge-label        | Badge children          |\n| section      | .mantine-Badge-section      | Left and right sections |\n\n\n### Keyword Arguments\n#### Badge\n\n- children (a list of or a singular dash component, string or number; optional):\n    Main badge content.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- autoContrast (boolean; optional):\n    Determines whether text color with filled variant should depend on\n    `background-color`. If luminosity of the `color` prop is less than\n    `theme.luminosityThreshold`, then `theme.white` will be used for\n    text color, otherwise `theme.black`. Overrides\n    `theme.autoContrast`.\n\n- circle (boolean; optional):\n    If set, badge `min-width` becomes equal to its `height` and\n    horizontal padding is removed.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- color (optional):\n    Key of `theme.colors` or any valid CSS color, `theme.primaryColor`\n    by default.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- fullWidth (boolean; optional):\n    Determines whether Badge should take 100% of its parent width,\n    `False` by default.\n\n- gradient (dict; optional):\n    Gradient configuration used when `variant=\"gradient\"`, default\n    value is `theme.defaultGradient`.\n\n    `gradient` is a dict with keys:\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- leftSection (a list of or a singular dash component, string or number; optional):\n    Content displayed on the left side of the badge label.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set\n    `border-radius`, `'xl'` by default.\n\n- rightSection (a list of or a singular dash component, string or number; optional):\n    Content displayed on the right side of the badge label.\n\n- size (optional):\n    Controls `font-size`, `height` and horizontal `padding`, `'md'` by\n    default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`."
  },
  {
    "name": "Card",
    "description": "Use Card component to hold anything from images to headlines, supporting text, buttons, lists, etc. in a contained unit.",
    "endpoint": "/components/card",
    "package": "dash_mantine_components",
    "category": "Data Display",
    "content": "\n\n## Card  \nUse Card component to hold anything from images to headlines, supporting text, buttons, lists, etc. in a contained unit.  \nCategory: Data Display  \n\n### Simple Example \n\nCard component is a wrapper around Paper component with styles for CardSection component.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Card(\n    children=[\n        dmc.CardSection(\n            dmc.Image(\n                src=\"https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-8.png\",\n                h=160,\n                alt=\"Norway\",\n            )\n        ),\n        dmc.Group(\n            [\n                dmc.Text(\"Norway Fjord Adventures\", fw=500),\n                dmc.Badge(\"On Sale\", color=\"pink\"),\n            ],\n            justify=\"space-between\",\n            mt=\"md\",\n            mb=\"xs\",\n        ),\n        dmc.Text(\n            \"With Fjord Tours you can explore more of the magical fjord landscapes with tours and activities on and \"\n            \"around the fjords of Norway\",\n            size=\"sm\",\n            c=\"dimmed\",\n        ),\n        dmc.Button(\n            \"Book classic tour now\",\n            color=\"blue\",\n            fullWidth=True,\n            mt=\"md\",\n            radius=\"md\",\n        ),\n    ],\n    withBorder=True,\n    shadow=\"sm\",\n    radius=\"md\",\n    w=350,\n)\n```\n### Card Section\n\nCardSection is a special component that is used to remove Card padding from its children while other elements still have horizontal spacing. CardSection works the following way:\n\n1. If component is a first child in Card then it has negative top, left and right margins.\n2. If it is a last child in Card then it has negative bottom, left and right margins.\n3. If it is in the middle then only left and right margins will be negative.\n\n##### Border and Padding in CardSection\n\n`withBorder` property will add top and bottom border to CardSection depending on its position relative to other content and sections.\n`inheritPadding` property will add the same left and right padding to CardSection as set in Card component.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\nurls = [\n    \"https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-1.png\",\n    \"https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-2.png\",\n    \"https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-3.png\",\n]\n\nimages = [dmc.Image(radius=\"sm\", src=url) for url in urls]\n\ncomponent = dmc.Card(\n    children=[\n        dmc.CardSection(\n            dmc.Group(\n                children=[\n                    dmc.Text(\"Review Pictures\", fw=500),\n                    dmc.ActionIcon(\n                        DashIconify(icon=\"carbon:overflow-menu-horizontal\"),\n                        color=\"gray\",\n                        variant=\"transparent\",\n                    ),\n                ],\n                justify=\"space-between\",\n            ),\n            withBorder=True,\n            inheritPadding=True,\n            py=\"xs\",\n        ),\n        dmc.Text(\n            children=[\n                dmc.Text(\n                    \"200+ images uploaded\",\n                    c=\"blue\",\n                    style={\"display\": \"inline\"},\n                ),\n                \" since last visit, review them to select which one should be added to your gallery\",\n            ],\n            mt=\"sm\",\n            c=\"dimmed\",\n            size=\"sm\",\n        ),\n        dmc.CardSection(\n            dmc.Image(\n                src=\"https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-4.png\",\n                mt=\"sm\",\n            ),\n        ),\n        dmc.CardSection(\n            children=[\n                dmc.SimpleGrid(cols=3, children=[i for i in images]),\n            ],\n            inheritPadding=True,\n            mt=\"sm\",\n            pb=\"md\",\n        ),\n    ],\n    withBorder=True,\n    shadow=\"sm\",\n    radius=\"md\",\n    w=350,\n)\n```\n### Styles API\n\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n| Name    | Static selector       | Description                 |\n|:--------|:----------------------|:----------------------------|\n| root    | .mantine-Card-root    | Root element                |\n| section | .mantine-Card-section | `Card.Section` root element |\n\n\n### Keyword Arguments\n#### Card\n\n- children (a list of or a singular dash component, string or number; optional):\n    Card content.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- padding (number; optional):\n    Controls `padding`, key of `theme.spacing` or any valid CSS value,\n    `'md'` by default.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set border-radius,\n    numbers are converted to rem, `theme.defaultRadius` by default.\n\n- shadow (optional):\n    Key of `theme.shadows` or any valid CSS value to set `box-shadow`,\n    `none` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withBorder (boolean; optional):\n    Determines whether the card should have border, border color\n    depends on color scheme, `False` by default.\n#### CardSection\n\n- children (a list of or a singular dash component, string or number; optional):\n    Content.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- inheritPadding (boolean; optional):\n    Determines whether the section should inherit padding from the\n    parent `Card`, `False` by default.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withBorder (boolean; optional):\n    Determines whether the section should have a border, `False` by\n    default."
  },
  {
    "name": "Carousel",
    "description": "Use the Carousel component to cycle through elements like a slideshow.",
    "endpoint": "/components/carousel",
    "package": "dash_mantine_components",
    "category": "Data Display",
    "content": "\n\n## Carousel  \nUse the Carousel component to cycle through elements like a slideshow.  \nCategory: Data Display  \n\n### CSS Extensions\n\nAs of DMC 1.2.0, `Carousel` component styles are bundled automatically, so you no longer need to include a separate CSS file.\nIf you're using an older version of DMC, refer to the [migration guide](/migration) for instructions on including optional stylesheets.\n\n\n\n### Simple Example\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Carousel(\n    [\n        dmc.CarouselSlide(dmc.Center(\"Slide-1\", bg=\"blue\", c=\"white\", p=60)),\n        dmc.CarouselSlide(dmc.Center(\"Slide-2\", bg=\"blue\", c=\"white\", p=60)),\n        dmc.CarouselSlide(dmc.Center(\"Slide-3\", bg=\"blue\", c=\"white\", p=60)),\n    ],\n    id=\"carousel-simple\",\n)\n```\n### Options\n\n\n### Size and Gap\n\nSet `slideSize` and `slideGap` on `Carousel` component to control size and gap of every slide:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Carousel(\n    [\n        dmc.CarouselSlide(dmc.Center(f\"Slide {i}\", bg=\"blue\", c=\"white\", h=\"100%\"))\n        for i in range(1, 7)\n    ],\n    id=\"carousel-size\",\n    withIndicators=True,\n    height=200,\n    slideSize=\"33.3333%\",\n    slideGap=\"md\",\n    emblaOptions = {\"loop\": True, \"align\": \"start\", \"slidesToScroll\": 3},\n)\n```\n### Responsive styles\n\n`slideSize` and `slideGap` props work the same way as `style` props, you can pass an object with values for different breakpoints:\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Carousel(\n    [\n        dmc.CarouselSlide(\n            dmc.Center(f\"Slide {i}\", ta=\"center\", bg=\"blue\", c=\"white\", h=\"100%\")\n        )\n        for i in range(1, 7)\n    ],\n    id=\"carousel-responsive\",\n    withIndicators=True,\n    height=200,\n    slideSize={\"base\": \"100%\", \"sm\": \"50%\", \"md\": \"33.333333%\"},\n    slideGap={\"base\": 0, \"sm\": \"md\"},\n    emblaOptions = {\"loop\": True, \"align\": \"start\"},\n)\n```\n### Drag free\n\n`dragFree` will disable slides snap points – user will be able to stop dragging at any position:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Carousel(\n    [\n        dmc.CarouselSlide(\n            dmc.Center(f\"Slide {i}\", ta=\"center\", bg=\"blue\", c=\"white\", h=\"100%\")\n        )\n        for i in range(1, 7)\n    ],\n    id=\"carousel-drag-free\",\n    withIndicators=True,\n    height=200,\n    slideGap=\"md\",\n    emblaOptions = {\"loop\": True, \"align\": \"start\", \"dragFree\": True},\n)\n```\n### Vertical orientation\n\nCarousel with `orientation=\"vertical\"` requires `height` prop to be set:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Carousel(\n    [\n        dmc.CarouselSlide(\n            dmc.Center(f\"Slide {i}\", ta=\"center\", bg=\"blue\", c=\"white\", h=\"100%\")\n        )\n        for i in range(1, 7)\n    ],\n    id=\"carousel-vertical\",\n    orientation=\"vertical\",\n    withIndicators=True,\n    height=200,\n    emblaOptions={\"loop\": True},\n)\n```\n### Controls icons\nYou can replace default next/previous controls icons with any component:\n\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ncomponent = dmc.Carousel(\n    [\n        dmc.CarouselSlide(\n            dmc.Center(f\"Slide {i}\", ta=\"center\", bg=\"blue\", c=\"white\", h=\"100%\")\n        )\n        for i in range(1, 7)\n    ],\n    id=\"carousel-controls_icons\",\n    withIndicators=True,\n    height=180,\n    nextControlIcon=DashIconify(icon=\"bi:arrow-right-circle-fill\", width=30),\n    previousControlIcon=DashIconify(icon=\"bi:arrow-left-circle-fill\", width=30),\n    emblaOptions = {\"loop\": True},\n)\n```\n### Autoscroll\nEnable autoscroll by setting `autoScroll=True` or by passing in a `dict` with options. Refer to [Embla Carousel Auto Scroll Options](https://www.embla-carousel.com/plugins/auto-scroll/#options) to learn more.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Carousel(\n    [\n        dmc.CarouselSlide(dmc.Center(\"Slide-1\", bg=\"blue\", c=\"white\", p=60)),\n        dmc.CarouselSlide(dmc.Center(\"Slide-2\", bg=\"blue\", c=\"white\", p=60)),\n        dmc.CarouselSlide(dmc.Center(\"Slide-3\", bg=\"blue\", c=\"white\", p=60)),\n    ],\n    id=\"carousel-autoscroll\",\n    emblaOptions={\"loop\": True},\n    autoScroll=True,\n)\n```\n### Autoplay\nEnable autoplay by setting `autoplay=True` or by passing in a `dict` with options. Refer to [Embla Carousel Autoplay Options](https://www.embla-carousel.com/plugins/autoplay/#options) to learn more.\n\n```python\nimport dash\nimport dash_mantine_components as dmc\nfrom dash import html, callback, Input, Output\n\ncomponent = html.Div([\n    dmc.Carousel(\n        [\n            dmc.CarouselSlide(dmc.Center(\"Slide-1\", bg=\"blue\", c=\"white\", p=60)),\n            dmc.CarouselSlide(dmc.Center(\"Slide-2\", bg=\"blue\", c=\"white\", p=60)),\n            dmc.CarouselSlide(dmc.Center(\"Slide-3\", bg=\"blue\", c=\"white\", p=60)),\n        ],\n        id=\"carousel-autoplay\",\n        mt=\"sm\",\n        emblaOptions={\"loop\": True},\n        autoplay=True,  # Default delay is 4000ms\n    )\n])\n```\nHere’s an example of passing props to the Embla component. In this example, the `delay` is set to 2000ms, and autoplay pauses when hovering over a slide:\n\n```python\nautoplay={\"delay\": 2000, \"stopOnMouseEnter\": True, \"stopOnInteraction\":False}\n\n```\n\n### Carousel Styles API\n\nCarousel supports Styles API, you can add styles to any inner element of the component with `classNames` prop. Refer to the  [Styles API documentation](/styles-api) to learn more.\n\n### Carousel Indicator styles\nThis example styles the indicators to emphasize the active slide.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Carousel(\n    [\n        dmc.CarouselSlide(dmc.Center(f\"Slide {i}\", bg=\"blue\", c=\"white\", h=\"100%\"))\n        for i in range(1, 4)\n    ],\n    id=\"carousel-indicator-styles\",\n    withIndicators=True,\n    height=200,\n    emblaOptions = {\"loop\": True},\n    classNames={\"indicator\": \"dmc-indicator\"},\n)\n```\nPut the following in a .css file in the `assets` folder:\n\n```css\n.dmc-indicator {\n  width: 12px;\n  height: 4px;\n  transition: width 250ms ease;\n\n  &[data-active] {\n    width: 40px;\n  }\n}\n```\n\n### Hide inactive controls\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Carousel(\n    [\n        dmc.CarouselSlide(dmc.Center(f\"Slide {i}\", bg=\"blue\", c=\"white\", h=\"100%\"))\n        for i in range(1, 4)\n    ],\n    id=\"carousel-hide-inactive-controls\",\n    height=200,\n    classNames={\"control\": \"dmc-control\"},\n)\n```\nPut the following in a .css file in the `assets` folder:\n\n```css\n.dmc-control {\n  &[data-inactive] {\n    opacity: 0;\n    cursor: default;\n  }\n}\n```\n\n### Show controls on hover\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Carousel(\n    [\n        dmc.CarouselSlide(dmc.Center(f\"Slide {i}\", bg=\"blue\", c=\"white\", h=\"100%\"))\n        for i in range(1, 4)\n    ],\n    id=\"carousel-show-controls-on-hover\",\n    height=200,\n    classNames={\"controls\": \"dmc-controls\", \"root\": \"dmc-root\"},\n)\n```\nPut the following in a .css file in the `assets` folder:\n```css\n\n.dmc-controls {\n  transition: opacity 150ms ease;\n  opacity: 0;\n}\n\n.dmc-root {\n  &:hover {\n    .dmc-controls {\n      opacity: 1;\n    }\n  }\n}\n```\n\n### Set initial slide\n\nTo set the initial slide to display, use the index number of the slide.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import Input, Output, callback, no_update\n\ncomponent = dmc.Paper(\n    [\n        dmc.Select(\n            label=\"Set initial slide\",\n            data=[str(i) for i in range(6)],\n            value=\"0\",\n            id=\"carousel-input\",\n            mb=10,\n        ),\n        dmc.Carousel(\n            [\n                dmc.CarouselSlide(\n                    dmc.Center(\n                        f\"Slide {i}\", ta=\"center\", bg=\"blue\", c=\"white\", h=\"100%\"\n                    )\n                )\n                for i in range(6)\n            ],\n            id=\"carousel-initial\",\n            height=200,\n            emblaOptions = {\"loop\": True, \"align\": \"start\"},\n        ),\n    ]\n)\n\n\n@callback(\n    Output(\"carousel-initial\", \"initialSlide\"),\n    Input(\"carousel-input\", \"value\"),\n)\ndef go_to_slide(value):\n    return int(value)\n```\n### Container queries\nTo use container queries instead of media queries, set `type=\"container\"`. With container queries, slides size and gap \nwill be adjusted based on the container width, not the viewport width.\n\nNote that, when using container queries, `slideSize` and `slideGap` props cannot reference `theme.breakpoints` values \nin keys. It is required to use exact `px` or `em` values.\n\nTo see how the slides size and gap changes, resize the root element of the demo with the resize handle located at the\nbottom right corner of the demo:\n\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html\n\ncomponent = html.Div(\n    # Wrapper div is added for demonstration purposes only,\n    #  It is not required in real projects\n    dmc.Carousel(\n        [\n            dmc.CarouselSlide(dmc.Center(\"Slide-1\", bg=\"blue\", c=\"white\", p=60)),\n            dmc.CarouselSlide(dmc.Center(\"Slide-2\", bg=\"blue\", c=\"white\", p=60)),\n            dmc.CarouselSlide(dmc.Center(\"Slide-3\", bg=\"blue\", c=\"white\", p=60)),\n        ],\n        id=\"carousel-container\",\n        type=\"container\",\n        slideSize = {\"base\": '100%', '300px': '50%', '500px': '33.333333%'},\n        slideGap = {\"base\": 0, '300px': 'md', '500px': 'lg'},\n        emblaOptions = {\"loop\": True, \"align\": \"start\"},\n    ),\n    style={\n        \"resize\": 'horizontal',\n        \"overflow\": 'hidden',\n        \"maxWidth\": '100%',\n        \"minWidth\": 250,\n        \"padding\": 10,\n      }\n)\n```\n### Active prop for callbacks\n\nThe `active` prop represents the index of the currently displayed slide and can be used to trigger Dash callbacks. Note\nthat this prop is read-only. To set the initially displayed slide, use the `initialSlide` prop instead.\n\n\n### Example Image Carousel\n\n```python\nimport dash_mantine_components as dmc\n\nimages = [\n    \"https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-1.png\",\n    \"https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-2.png\",\n    \"https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-3.png\",\n    \"https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-4.png\",\n    \"https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-5.png\",\n]\n\ncomponent = dmc.Carousel(\n    [dmc.CarouselSlide(dmc.Image(\"Slide 1\", src=image)) for image in images],\n    id=\"carousel-images\",\n    withIndicators=True,\n    w=400,\n)\n```\n### Example Card Carousel\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html\n\ndata = [\n    {\n        \"image\": \"https://images.unsplash.com/photo-1508193638397-1c4234db14d8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80\",\n        \"title\": \"Best forests to visit in North America\",\n        \"category\": \"NATURE\",\n    },\n    {\n        \"image\": \"https://images.unsplash.com/photo-1559494007-9f5847c49d94?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80\",\n        \"title\": \"Hawaii beaches review: better than you think\",\n        \"category\": \"BEACH\",\n    },\n    {\n        \"image\": \"https://images.unsplash.com/photo-1608481337062-4093bf3ed404?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80\",\n        \"title\": \"Mountains at night: 12 best locations to enjoy the view\",\n        \"category\": \"NATURE\",\n    },\n    {\n        \"image\": \"https://images.unsplash.com/photo-1510798831971-661eb04b3739?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80\",\n        \"title\": \"Best places to visit this winter\",\n        \"category\": \"TOURISM\",\n    },\n    {\n        \"image\": \"https://images.unsplash.com/photo-1582721478779-0ae163c05a60?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80\",\n        \"title\": \"Active volcanos reviews: travel at your own risk\",\n        \"category\": \"NATURE\",\n    },\n]\n\n\ndef make_card(image, title, category):\n    return dmc.Paper(\n        [\n            html.Div(\n                [\n                    dmc.Text(category, c=\"white\", opacity=0.7, fw=700),\n                    dmc.Title(title, lh=1.2, order=3, mt=\"xs\", fw=900, c=\"white\"),\n                ]\n            ),\n            dmc.Button(\"Read Article\", variant=\"white\", color=\"dark\"),\n        ],\n        shadow=\"md\",\n        p=\"xl\",\n        radius=\"md\",\n        style={\n            \"backgroundImage\": f\"url({image})\",\n            \"height\": 440,\n            \"display\": \"flex\",\n            \"flexDirection\": \"column\",\n            \"justifyContent\": \"space-between\",\n            \"alignItems\": \"flex-start\",\n            \"backgroundSize\": \"cover\",\n            \"backgroundPosition\": \"center\",\n        },\n    )\n\n\ncomponent = dmc.Carousel(\n    [dmc.CarouselSlide(make_card(d[\"image\"], d[\"title\"], d[\"category\"])) for d in data],\n    id=\"carousel-cards\",\n    w=400,\n    emblaOptions={\"loop\": True, \"align\": \"start\"},\n)\n```\n### Limitation: Carousel in Tabs\n\nWhen a Carousel is placed inside a tab, it may not render correctly. For more details, refer to [GitHub Issue #299]((https://github.com/snehilvj/dash-mantine-components/issues/299). \nAs a workaround, you can update the carousel within the tabs using a callback.\n\nBe sure to give a unique id to each carousel in the app.\n\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html, Input, Output, callback\n\n\ndef make_carousel(id):\n    return dmc.Carousel(\n        emblaOptions={\"loop\": True},\n        withIndicators=True,\n        children=[\n            dmc.CarouselSlide(\n                dmc.Center(\n                    slide,\n                    bg=\"blue\",\n                    c=\"white\",\n                    p=60,\n                )\n            )\n            for slide in [\"Slide 1\", \"Slide 2\", \"Slide 3\"]\n        ],\n        id=id,\n    )\n\n\ncomponent = html.Div(\n    [\n        dmc.Tabs(\n            [\n                dmc.TabsList(\n                    [\n                        dmc.TabsTab(\"Tab one\", value=\"1\"),\n                        dmc.TabsTab(\"Tab two\", value=\"2\"),\n                    ]\n                ),\n            ],\n            id=\"tabs-carousel-example\",\n            value=\"1\",\n        ),\n        html.Div(id=\"tabs-carousel-content\", style={\"paddingTop\": 10}),\n    ]\n)\n\n\n@callback(\n    Output(\"tabs-carousel-content\", \"children\"), Input(\"tabs-carousel-example\", \"value\")\n)\ndef render_content(active):\n    if active == \"1\":\n        return [dmc.Text(\"Tab One selected\", my=10), make_carousel(\"carousel-tab1\")]\n    else:\n        return [dmc.Text(\"Tab Two selected\", my=10), make_carousel(\"carousel-tab2\")]\n```\n### Limitation: draggable and speed Props\nAs of DMC v0.14.7, the `draggable` and `speed` props no longer work because Embla Carousel v8 has removed them. These props\nwill be removed in DMC v1.0.0\n\n\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n\n#### Carousel selectors\n\n| Selector   | Static selector              | Description                                              |\n|------------|------------------------------|----------------------------------------------------------|\n| root       | .mantine-Carousel-root       | Root element                                             |\n| slide      | .mantine-Carousel-slide      | Carousel.Slide root element                              |\n| container  | .mantine-Carousel-container  | Slides container                                         |\n| viewport   | .mantine-Carousel-viewport   | Main element, contains slides container and all controls |\n| controls   | .mantine-Carousel-controls   | Next/previous controls container                         |\n| control    | .mantine-Carousel-control    | Next/previous control                                    |\n| indicators | .mantine-Carousel-indicators | Indicators container                                     |\n| indicator  | .mantine-Carousel-indicator  | Indicator button                                         |\n\n#### Carousel CSS variables\n\n| Selector | Variable                   | Description                                                |\n|----------|----------------------------|------------------------------------------------------------|\n| root     | --carousel-control-size    | Controls `width` and `height` of the next/previous buttons |\n| root     | --carousel-controls-offset | Controls offsets of the next/previous buttons              |\n| root     | --carousel-height          | Controls height of the carousel                            |\n\n#### Carousel data attributes\n\n| Selector   | Attribute                    | Condition                                | Value                        |\n|------------|------------------------------|------------------------------------------|------------------------------|\n| root       | data-orientation             | –                                        | Value of `orientation` prop  |\n| root       | data-include-gap-in-size     | `includeGapInSize` prop is set           | –                            |\n| control    | data-inactive                | No previous/next slides are available    | –                            |\n| indicator  | data-active                  | Associated slide is active               | –                            |\n\n\n\n\n### Keyword Arguments\n#### Carousel\n\n- children (a list of or a singular dash component, string or number; optional):\n    <Carousel.Slide /> components.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- active (number; default 0):\n    The index of the current slide. Read only.  Use initialSlide to\n    set the current slide.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- autoScroll (boolean; optional):\n    Enables autoScroll with optional configuration.\n\n- autoplay (boolean; optional):\n    Enables autoplay with optional configuration.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- controlSize (string | number; optional):\n    Controls size of the next and previous controls, `26` by default.\n\n- controlsOffset (number; optional):\n    Controls position of the next and previous controls, key of\n    `theme.spacing` or any valid CSS value, `'sm'` by default.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- emblaOptions (dict; optional):\n    options to pass to the embla component.\n\n- height (string | number; optional):\n    Slides container `height`, required for vertical orientation.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- includeGapInSize (boolean; optional):\n    Determines whether gap between slides should be treated as part of\n    the slide size, `True` by default.\n\n- initialSlide (number; default 0):\n    Index of initial slide.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- nextControlIcon (a list of or a singular dash component, string or number; optional):\n    Icon of the next control.\n\n- orientation (a value equal to: 'horizontal', 'vertical'; optional):\n    Carousel orientation, `'horizontal'` by default.\n\n- previousControlIcon (a list of or a singular dash component, string or number; optional):\n    Icon of the previous control.\n\n- slideGap (number; optional):\n    Key of theme.spacing or number to set gap between slides.\n\n- slideSize (string | number; optional):\n    Controls slide width based on viewport width, `'100%'` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- type (a value equal to: 'media', 'container'; optional):\n    Determines typeof of queries that are used for responsive styles,\n    'media' by default.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withControls (boolean; optional):\n    Determines whether next/previous controls should be displayed,\n    True by default.\n\n- withIndicators (boolean; optional):\n    Determines whether indicators should be displayed, `False` by\n    default.\n\n- withKeyboardEvents (boolean; optional):\n    Determines whether arrow key should switch slides, `True` by\n    default.\n#### CarouselSlide\n\n- children (a list of or a singular dash component, string or number; optional):\n    Content.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`."
  },
  {
    "name": "Image",
    "description": "DMC alternative for html.Img with placeholder for loading and error states.",
    "endpoint": "/components/image",
    "package": "dash_mantine_components",
    "category": "Data Display",
    "content": "\n\n## Image  \nDMC alternative for html.Img with placeholder for loading and error states.  \nCategory: Data Display  \n\n### Simple Example\n`Image` is a wrapper for HTML `img` with minimal styles. By default, the image will take 100% of parent width. The \nimage size can be controlled with `w` and `h` style props.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Image(\n    radius=\"md\",\n    src=\"https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-7.png\",\n)\n```\n### Image height\n\nIn most case, you will need to set image height to prevent layout jumps when image is loading. You can do so with `h` [style](/style-props) props.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Image(\n    radius=\"md\",\n    h=200,\n    src=\"https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-10.png\",\n)\n```\n### Image fit\nBy default the image has `object-fit: cover` style - it will resize to cover parent element. To change this behavior,\nset `w=\"auto\"` and `fit=\"contain\"` props.\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Image(\n    radius=\"md\",\n    h=200,\n    w=\"auto\",\n    fit=\"contain\",\n    src=\"https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-9.png\",\n)\n```\n### Placeholder\n\nSet `fallbackSrc` prop to display fallback image when image fails to load:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Image(\n    radius=\"md\",\n    src=None,\n    h=200,\n    fallbackSrc=\"https://placehold.co/600x400?text=Placeholder\",\n)\n```\n### Background Image\n\nUse BackgroundImage component when you need to display image below any content. Component sets background-image to \ngiven `src`, background-size to cover and background-position to center.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html\n\ncomponent = html.Div(\n    style={\"width\": 300},\n    children=dmc.BackgroundImage(\n        src=\"https://images.unsplash.com/photo-1419242902214-272b3f66ee7a?ixlib=rb-1.2.1&ixid\"\n        \"=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=720&q=80\",\n        children=[\n            dmc.Center(\n                p=\"md\",\n                children=[\n                    dmc.Text(\n                        \"BackgroundImage component can be used to add any content on image. It is used for cards, \"\n                        \"hero headers and similar components\",\n                        c=\"yellow\",\n                    )\n                ],\n            )\n        ],\n    ),\n)\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n\n#### Image Selectors\n\n| Selector | Static selector       | Description  |\n| -------- | --------------------- | ------------ |\n| root     | `.mantine-Image-root` | Root element |\n\n\n\n#### Image CSS Variables\n\n| Selector | Variable             | Description                       |\n| -------- | -------------------- | --------------------------------- |\n| root     | `--image-object-fit` | Controls `object-fit` property    |\n| root     | `--image-radius`     | Controls `border-radius` property |\n\n\n\n#### Image Data Attributes\n\n| Selector | Attribute       | Condition            |\n| -------- | --------------- | -------------------- |\n| root     | `data-fallback` | Image failed to load |\n\n\n\n### Keyword Arguments\n#### Image\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- alt (string; optional):\n    Image alt text, used as title for placeholder if image was not\n    loaded.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- fallbackSrc (string; optional):\n    Image url that will be used as a fallback in case `src` prop is\n    not set or image cannot be loaded.\n\n- fit (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'none', 'contain', 'cover', 'fill', 'scale-down'; optional):\n    Controls `object-fit` style, `'cover'` by default.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set\n    `border-radius`, `0` by default.\n\n- src (boolean | number | string | dict | list; optional):\n    Image url.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n#### BackgroundImage\n\n- children (a list of or a singular dash component, string or number; optional):\n    Content.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set border-radius,\n    numbers are converted to rem, `0` by default.\n\n- src (string; required):\n    Image url.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`."
  },
  {
    "name": "Indicator",
    "description": "Use Indicator to display element at the corner of another element",
    "endpoint": "/components/indicator",
    "package": "dash_mantine_components",
    "category": "Data Display",
    "content": "\n\n## Indicator  \nUse Indicator to display element at the corner of another element  \nCategory: Data Display  \n\n### Introduction\n\nUse Indicator to display element at the corner of another element.\n\n### Inline\n\nWhen the target element has a fixed width, set `inline` prop to add `display: inline-block;` styles to Indicator container.\nAlternatively, you can set width and height with `style` prop if you still want the root element to keep `display: block`.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Indicator(\n    dmc.Avatar(\n        size=\"lg\",\n        radius=\"sm\",\n        src=\"https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-2.png\",\n    ),\n    inline=True,\n    size=16,\n    label=\"New\",\n)\n```\n### Offset\n\nSet `offset` to change indicator position. It is useful when Indicator component is used with children that have border-radius:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Indicator(\n    dmc.Avatar(\n        size=\"lg\",\n        radius=\"xl\",\n        src=\"https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-3.png\",\n    ),\n    inline=True,\n    offset=7,\n    position=\"bottom-end\",\n    color=\"red\",\n    withBorder=True,\n    size=16,\n)\n```\n### Processing Animation\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Indicator(\n    dmc.Avatar(\n        size=\"lg\",\n        radius=\"sm\",\n        src=\"https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-4.png\",\n    ),\n    inline=True,\n    color=\"red\",\n    size=12,\n    processing=True,\n)\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n| Name      | Static selector              | Description       |\n|:----------|:-----------------------------|:------------------|\n| root      | .mantine-Indicator-root      | Root element      |\n| indicator | .mantine-Indicator-indicator | Indicator element |\n\n\n### Keyword Arguments\n#### Indicator\n\n- children (a list of or a singular dash component, string or number; optional):\n    Content.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- autoContrast (boolean; optional):\n    Determines whether text color should depend on `background-color`.\n    If luminosity of the `color` prop is less than\n    `theme.luminosityThreshold`, then `theme.white` will be used for\n    text color, otherwise `theme.black`. Overrides\n    `theme.autoContrast`.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- color (optional):\n    Key of `theme.colors` or any valid CSS color value,\n    `theme.primaryColor` by default.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- disabled (boolean; optional):\n    When Indicator is disabled it renders children only.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- inline (boolean; optional):\n    Determines whether the indicator container should be an inline\n    element, `False` by default.\n\n- label (a list of or a singular dash component, string or number; optional):\n    Label rendered inside the indicator, for example, notification\n    count.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- offset (number; optional):\n    Indicator offset relative to the target element, usually used for\n    elements with border-radius, equals to `size` by default.\n\n- position (a value equal to: 'top-center', 'top-end', 'top-start', 'bottom-center', 'bottom-end', 'bottom-start', 'middle-center', 'middle-end', 'middle-start'; optional):\n    Indicator position relative to the target element, `'top-end'` by\n    default.\n\n- processing (boolean; optional):\n    Determines whether the indicator should have processing animation,\n    `False` by default.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set\n    `border-radius`, `100` by default.\n\n- size (string | number; optional):\n    Indicator width and height, `10` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withBorder (boolean; optional):\n    Determines whether the indicator should have a border (color of\n    the border is the same as the body element), `False` by default.\n\n- zIndex (string | number; optional):\n    Indicator z-index, `200` by default."
  },
  {
    "name": "Kbd",
    "description": "Use Kbd to show keyboard shortcuts, etc.",
    "endpoint": "/components/kbd",
    "package": "dash_mantine_components",
    "category": "Data Display",
    "content": "\n\n## Kbd  \nUse Kbd to show keyboard shortcuts, etc.  \nCategory: Data Display  \n\n### Simple Example\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html\n\ncomponent = html.Div([dmc.Kbd(\"⌘\"), \" + \", dmc.Kbd(\"shift\"), \" + \", dmc.Kbd(\"M\")])\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n| Name        | Static selector   | Description                                      |\n|:------------|:------------------|:-------------------------------------------------|\n| root        | .mantine-Kbd-root | Root element                                     |\n\n\n### Keyword Arguments\n#### Kbd\n\n- children (a list of or a singular dash component, string or number; optional):\n    Keyboard key.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- size (optional):\n    Controls font-size and padding, `'sm'` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`."
  },
  {
    "name": "NumberFormatter",
    "description": "Use the NumberFormatter component to format number with thousands/decimal separators and suffix/prefix",
    "endpoint": "/components/number-formatter",
    "package": "dash_mantine_components",
    "category": "Data Display",
    "content": "\n\n## NumberFormatter  \nUse the NumberFormatter component to format number with thousands/decimal separators and suffix/prefix  \nCategory: Data Display  \n\n### Simple Example\n\nUse `NumberFormatter` to format numbers. It supports the same formatting related props as `NumberInput` component.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.NumberFormatter(prefix=\"$ \", value=1000000, thousandSeparator=True)\n```\n### Prefix and suffix\n\nSet `prefix` and `suffix` props to add given string to the start or end of the value:\n\n```python\nfrom dash import html\nimport dash_mantine_components as dmc\n\ncomponent = html.Div([\n    html.Div([\"With prefix: \", dmc.NumberFormatter(value=100, prefix=\"$\")]),\n    html.Div([\"With suffix: \", dmc.NumberFormatter(value=100, suffix=\" RUB\")]),\n])\n```\n### Keyword Arguments\n#### NumberFormatter\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- allowNegative (boolean; optional):\n    Determines whether negative values are allowed, `True` by default.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- decimalScale (number; optional):\n    Limits the number of digits that are displayed after the decimal\n    point, by default there is no limit.\n\n- decimalSeparator (string; optional):\n    Character used as a decimal separator, `'.'` by default.\n\n- fixedDecimalScale (boolean; optional):\n    If set, 0s are added after `decimalSeparator` to match given\n    `decimalScale`. `False` by default.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- prefix (string; optional):\n    Prefix added before the value.\n\n- suffix (string; optional):\n    Suffix added after the value.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- thousandSeparator (string | boolean; optional):\n    A character used to separate thousands, `','` by default.\n\n- thousandsGroupStyle (a value equal to: 'none', 'thousand', 'lakh', 'wan'; optional):\n    Defines the thousand grouping style.\n\n- value (string | number; optional):\n    Value to format."
  },
  {
    "name": "Spoiler",
    "description": "Use the Spoiler component to hide long sections of content.",
    "endpoint": "/components/spoiler",
    "package": "dash_mantine_components",
    "category": "Data Display",
    "content": "\n\n## Spoiler  \nUse the Spoiler component to hide long sections of content.  \nCategory: Data Display  \n\n### Simple Example\n\nUse Spoiler to hide long sections of content. Pass `maxHeight` prop to control the point at which content will be\nhidden under the spoiler and control to show/hide extra appears. If content height is less than `maxHeight`, spoiler\nwill just render children.\n\nProps `hideLabel` and `showLabel` are required - they are used as spoiler toggle button label in corresponding state.\n\n```python\nimport dash_mantine_components as dmc\n\n# very long string\ntext = \"\"\n\ncomponent = dmc.Spoiler(\n    showLabel=\"Show more\",\n    hideLabel=\"Hide\",\n    maxHeight=50,\n    children=[dmc.Text(text)],\n)\n```\n\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n| Name    | Static selector          | Description                                    |\n|:--------|:-------------------------|:-----------------------------------------------|\n| root    | .mantine-Spoiler-root    | Root element                                   |\n| content | .mantine-Spoiler-content | Wraps content to set max-height and transition |\n| control | .mantine-Spoiler-control | Show/hide content control                      |\n\n\n### Keyword Arguments\n#### Spoiler\n\n- children (a list of or a singular dash component, string or number; optional):\n    Content.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- expanded (boolean; default False):\n    Controlled expanded state value.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- hideLabel (a list of or a singular dash component, string or number; required):\n    Label for close spoiler action.\n\n- initialState (boolean; optional):\n    Initial spoiler state, True to wrap content in spoiler, False to\n    show content without spoiler, opened state is updated on mount.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- maxHeight (number; optional):\n    Maximum height of the visible content, when this point is reached\n    spoiler appears, `100` by default.\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- showLabel (a list of or a singular dash component, string or number; required):\n    Label for open spoiler action.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- transitionDuration (number; optional):\n    Spoiler reveal transition duration in ms, set 0 or None to turn\n    off animation, `200` by default.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`."
  },
  {
    "name": "ThemeIcon",
    "description": "Use ThemeIcon component to render icon inside element with theme colors.",
    "endpoint": "/components/themeicon",
    "package": "dash_mantine_components",
    "category": "Data Display",
    "content": "\n\n## ThemeIcon  \nUse ThemeIcon component to render icon inside element with theme colors.  \nCategory: Data Display  \n\n### Usage\n\nThemeIcon can be customized by setting its variant, size, radius and color.\n\n\n### Colors\n\nThemeIcon supports all colors from Mantine's theme colors.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ncolors = [\n    \"gray\",\n    \"red\",\n    \"pink\",\n    \"grape\",\n    \"violet\",\n    \"indigo\",\n    \"blue\",\n    \"lime\",\n    \"yellow\",\n    \"orange\",\n]\n\ncomponent = dmc.Stack(\n    gap=\"xs\",\n    children=[\n        dmc.Group(\n            [\n                dmc.ThemeIcon(\n                    DashIconify(icon=\"tabler:photo\", width=20),\n                    variant=variant,\n                    color=color,\n                )\n                for color in colors\n            ],\n            justify=\"center\",\n        )\n        for variant in [\"outline\", \"light\", \"filled\"]\n    ],\n)\n```\n### Gradient Variant\n\nTo use gradient as ThemeIcon background:\n\n* set `variant` prop to \"gradient\"\n* set `gradient` prop to `{ \"from\": \"color-from\", \"to\": \"color-to\", \"deg\": 135}`, where\n\n* `color-from` and `color-to` are colors from Mantine's theme colors.\n* `deg` is linear gradient deg.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ncomponent = dmc.Group(\n    children=[\n        dmc.ThemeIcon(\n            DashIconify(icon=\"tabler:photo\", width=20),\n            variant=\"gradient\",\n            gradient={\"from\": \"indigo\", \"to\": \"cyan\"},\n            size=\"lg\",\n        ),\n        dmc.ThemeIcon(\n            DashIconify(icon=\"tabler:photo\", width=20),\n            variant=\"gradient\",\n            gradient={\"from\": \"teal\", \"to\": \"lime\", \"deg\": 105},\n            size=\"lg\",\n        ),\n        dmc.ThemeIcon(\n            DashIconify(icon=\"tabler:photo\", width=20),\n            variant=\"gradient\",\n            gradient={\"from\": \"teal\", \"to\": \"blue\", \"deg\": 60},\n            size=\"lg\",\n        ),\n        dmc.ThemeIcon(\n            DashIconify(icon=\"tabler:photo\", width=20),\n            variant=\"gradient\",\n            gradient={\"from\": \"orange\", \"to\": \"red\"},\n            size=\"lg\",\n        ),\n        dmc.ThemeIcon(\n            DashIconify(icon=\"tabler:photo\", width=20),\n            variant=\"gradient\",\n            gradient={\"from\": \"grape\", \"to\": \"pink\", \"deg\": 35},\n            size=\"lg\",\n        ),\n    ]\n)\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n| Name        | Static selector         | Description                                      |\n|:------------|:------------------------|:-------------------------------------------------|\n| root        | .mantine-ThemeIcon-root | Root element                                     |\n\n\n### Keyword Arguments\n#### ThemeIcon\n\n- children (a list of or a singular dash component, string or number; optional):\n    Icon displayed inside the component.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- autoContrast (boolean; optional):\n    Determines whether button text color with filled variant should\n    depend on `background-color`. If luminosity of the `color` prop is\n    less than `theme.luminosityThreshold`, then `theme.white` will be\n    used for text color, otherwise `theme.black`. Overrides\n    `theme.autoContrast`.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- color (optional):\n    Key of `theme.colors` or any valid CSS color. Default value is\n    `theme.primaryColor`.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- gradient (dict; optional):\n    Gradient data used when `variant=\"gradient\"`, default value is\n    `theme.defaultGradient`.\n\n    `gradient` is a dict with keys:\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set border-radius.\n    Numbers are converted to rem. `theme.defaultRadius` by default.\n\n- size (number; optional):\n    Controls width and height of the button. Numbers are converted to\n    rem. `'md'` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`."
  },
  {
    "name": "Timeline",
    "description": "Use the Timeline and TimelineItem components to display a list of events in chronological order.",
    "endpoint": "/components/timeline",
    "package": "dash_mantine_components",
    "category": "Data Display",
    "content": "\n\n## Timeline  \nUse the Timeline and TimelineItem components to display a list of events in chronological order.  \nCategory: Data Display  \n\n### Introduction\n\n### Usage\n\nControl timeline appearance with the following props:\n\n- `active` - index of current active element, all elements before this index will be highlighted with color\n- `color` - color from theme that should be used to highlight active items, defaults to theme.primaryColor\n- `lineWidth` - controls line width and bullet border\n- `bulletSize` - bullet width, height and border-radius\n- `align` - defines line and bullets position relative to content, also sets textAlign\n\n```python\nimport dash_mantine_components as dmc\n\n\ncomponent = dmc.Timeline(\n    active=1,\n    bulletSize=15,\n    lineWidth=2,\n    children=[\n        dmc.TimelineItem(\n            title=\"New Branch\",\n            children=[\n                dmc.Text(\n                    [\n                        \"You've created new branch \",\n                        dmc.Anchor(\"fix-notification\", href=\"#\", size=\"sm\"),\n                        \" from master\",\n                    ],\n                    c=\"dimmed\",\n                    size=\"sm\",\n                ),\n            ],\n        ),\n        dmc.TimelineItem(\n            title=\"Commits\",\n            children=[\n                dmc.Text(\n                    [\n                        \"You've pushed 23 commits to \",\n                        dmc.Anchor(\"fix-notification\", href=\"#\", size=\"sm\"),\n                    ],\n                    c=\"dimmed\",\n                    size=\"sm\",\n                ),\n            ],\n        ),\n        dmc.TimelineItem(\n            title=\"Pull Request\",\n            lineVariant=\"dashed\",\n            children=[\n                dmc.Text(\n                    [\n                        \"You've submitted a pull request \",\n                        dmc.Anchor(\n                            \"Fix incorrect notification message (#178)\",\n                            href=\"#\",\n                            size=\"sm\",\n                        ),\n                    ],\n                    c=\"dimmed\",\n                    size=\"sm\",\n                ),\n            ],\n        ),\n        dmc.TimelineItem(\n            [\n                dmc.Text(\n                    [\n                        dmc.Anchor(\n                            \"AnnMarieW\",\n                            href=\"https://github.com/AnnMarieW\",\n                            size=\"sm\",\n                        ),\n                        \" left a comment on your pull request\",\n                    ],\n                    c=\"dimmed\",\n                    size=\"sm\",\n                ),\n            ],\n            title=\"Code Review\",\n        ),\n    ],\n)\n```\n### Components in Bullets\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ncomponent = dmc.Timeline(\n    children=[\n        dmc.TimelineItem(\n            title=\"Default bullet\",\n            children=dmc.Text(\"Default bullet without anything\", c=\"dimmed\", size=\"sm\")\n        ),\n        dmc.TimelineItem(\n            title=\"Avatar\",\n            bullet=dmc.Avatar(\n                size=22,\n                radius=\"xl\",\n                src=\"https://avatars.githubusercontent.com/u/91216500?v=4\"\n            ),\n            children=dmc.Text(\"Timeline bullet as avatar image\", c=\"dimmed\", size=\"sm\")\n        ),\n        dmc.TimelineItem(\n            title=\"Icon\",\n            bullet=DashIconify(icon=\"tabler:sun\", width=13),\n            children=dmc.Text(\"Timeline bullet as icon\", c=\"dimmed\", size=\"sm\")\n        ),\n        dmc.TimelineItem(\n            title=\"ThemeIcon\",\n            bullet=dmc.ThemeIcon(\n                size=22,\n                variant=\"gradient\",\n                gradient={\"from\": \"lime\", \"to\": \"cyan\"},\n                radius=\"xl\",\n                children=DashIconify(icon=\"tabler:video\", width=13)\n            ),\n            children=dmc.Text(\"Timeline bullet as ThemeIcon component\", c=\"dimmed\", size=\"sm\")\n        )\n    ],\n    bulletSize=24\n)\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n#### Timeline Selectors\n\n| Selector     | Static selector               | Description                               |\n|-------------|-------------------------------|-------------------------------------------|\n| root        | .mantine-Timeline-root        | Root element                             |\n| item        | .mantine-Timeline-item        | Item root element                        |\n| itemBody    | .mantine-Timeline-itemBody    | Item body, wraps title and content       |\n| itemTitle   | .mantine-Timeline-itemTitle   | Item title, controlled by `title` prop   |\n| itemContent | .mantine-Timeline-itemContent | Item content, controlled by `children` prop |\n| itemBullet  | .mantine-Timeline-itemBullet  | Item bullet                              |\n\n#### Timeline CSS Variables\n\n| Selector | Variable          | Description                                 |\n|----------|------------------|---------------------------------------------|\n| root     | --tl-bullet-size | Controls bullet width and height           |\n|          | --tl-color       | Controls active bullet and line colors     |\n|          | --tl-icon-color  | Controls icon color                        |\n|          | --tl-line-width  | Controls width of the line between bullets |\n|          | --tl-radius      | Controls bullet border-radius              |\n\n#### Timeline Data Attributes\n\n| Selector        | Attribute       | Condition                                    |\n|----------------|----------------|----------------------------------------------|\n| item, itemBullet | data-active    | Item index is `<=` Timeline `active` prop   |\n| item           | data-line-active | Item index is `<` Timeline `active` prop    |\n\n\n### Keyword Arguments\n#### Timeline\n\n- children (a list of or a singular dash component, string or number; optional):\n    `Timeline.Item` components.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- active (number; optional):\n    Index of active element.\n\n- align (a value equal to: 'left', 'right'; optional):\n    Controls how the content is positioned relative to the bullet,\n    `'left'` by default.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- autoContrast (boolean; optional):\n    Determines whether icon color should depend on `background-color`.\n    If luminosity of the `color` prop is less than\n    `theme.luminosityThreshold`, then `theme.white` will be used for\n    text color, otherwise `theme.black`. Overrides\n    `theme.autoContrast`.\n\n- bulletSize (string | number; optional):\n    Controls size of the bullet, `20` by default.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- color (optional):\n    Key of `theme.colors` or any valid CSS color to control active\n    item colors, `theme.primaryColor` by default.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- lineWidth (string | number; optional):\n    Control width of the line.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set\n    `border-radius`, numbers are converted to rem, `'xl'` by default.\n\n- reverseActive (boolean; optional):\n    Determines whether the active items direction should be reversed\n    without reversing items order, `False` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n#### TimelineItem\n\n- children (a list of or a singular dash component, string or number; optional):\n    Content displayed below the title.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- bullet (a list of or a singular dash component, string or number; optional):\n    React node that should be rendered inside the bullet – icon,\n    image, avatar, etc. By default, large white dot is displayed.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- lineVariant (a value equal to: 'dashed', 'dotted', 'solid'; optional):\n    Controls line border style, `'solid'` by default.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set\n    `border-radius`, numbers are converted to rem, `'xl'` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- title (a list of or a singular dash component, string or number; optional):\n    Item title, displayed next to the bullet.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`."
  },
  {
    "name": "Date Pickers Overview",
    "endpoint": "/datepickers-overview",
    "description": "This guide gives an overview of Date and Time components available in Dash Mantine components.",
    "package": "dash_mantine_components",
    "category": "Date Pickers",
    "order": 1,
    "content": "\n\n## Date Pickers Overview  \nThis guide gives an overview of Date and Time components available in Dash Mantine components.  \nCategory: Date Pickers  \n\nThe Mantine date pickers let users quickly navigate by months or years to select dates in the past or future.\n### DatePicker\n\n[DatePicker](/components/datepicker) allows users to select a date, date range, or multiple dates from a calendar.  It does not have an input field.  \n\nNote: Many `DatePicker` props (for example,  `minDate`, `maxDate`, `excludeDates`, `allowLevelChange`, `firstDayOfWeek`,\n`renderDay`) apply across other Mantine date and time picker components. Refer to the DatePicker section for details and example for these shared props.\n\n\n### DatePickerInput\n\n[DatePickerInput](/components/datepickerinput): Select single dates, multiple dates (`type=\"multiple\"`), or date \nranges (`type=\"range\"`). This option **does not** allow free text input.\n\n\n### DateInput\n\n[DateInput](/components/datepickerinput): Allows free form text input of dates, as well as selecting a date from a calendar.\n\n\n### MonthPickerInput\n\n[MonthPickerInput](/components/monthpickerinput): Use when only the month value is needed.\n\n\n### YearPickerInput\n[YearPickerInput](/components/yearpickerinput): Use when only the year value is needed.\n\n### TimeInput\n[TimeInput](/components/timeinput): is based on the native `input[type=\"time\"]` element and does not support most of\nadvanced features like choosing time format or custom dropdown with time select. If you need more features, use\n`TimePicker` component instead.\n\n### TimePicker\n[TimePicker](/components/timepicker): Advanced time selection with features like dropdowns for hours, minutes, seconds,\nand 12-hour/24-hour formats, and time pre-sets.\n\n\n### TimeGrid\n[TimeGrid](/components/timegrid)  captures time value from the user with a predefined set of options.\n\n### DateTimePicker\n[DateTimePicker](/components/): Selects both date and time from user.\n\n### CSS Extensions\n\nAs of DMC 1.2.0, Date component styles are bundled automatically, so you no longer need to include a separate CSS file.\nIf you're using an older version of DMC, refer to the [migration guide](/migration) for instructions on including optional stylesheets."
  },
  {
    "name": "DateInput",
    "description": "Free form date input",
    "endpoint": "/components/dateinput",
    "package": "dash_mantine_components",
    "category": "Date Pickers",
    "content": "\n\n## DateInput  \nFree form date input  \nCategory: Date Pickers  \n\n### DateInput props\n\nDateInput supports most of the [DatePicker](/components/datepicker) props, read through DatePicker\ndocumentation to learn about all component features that are not listed on this page.\n\n### Simple Example\n\nThis is a simple example of DateInput tied to a callback. You can type a date or select from the DatePicker\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import Input, Output, html, callback\n\ncomponent = html.Div(\n    [\n        dmc.DateInput(\n            id=\"dateinput2\",\n            label=\"Enter a date\",\n            description=\"You can type a date or select from the calendar\",\n            w=300,\n        ),\n        dmc.Space(h=10),\n        dmc.Text(id=\"selected-dateinput2\"),\n    ]\n)\n\n\n@callback(Output(\"selected-dateinput2\", \"children\"), Input(\"dateinput2\", \"value\"))\ndef update_output(d):\n    prefix = \"You entered: \"\n    if d:\n        return prefix + d\n    else:\n        return \"\"\n```\n### Value format\n\n\nUse `valueFormat` prop to change [dayjs format](https://day.js.org/docs/en/display/format) of value label displayed in the input field.\n\n```python\nfrom datetime import datetime\n\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Group(\n    gap=\"xl\",\n    children=[\n        dmc.DateInput(\n            value=datetime.now().date(),\n            valueFormat=\"ddd, MMM D YY\",\n            label=\"ddd, MMM D YY\",\n            w=250,\n        ),\n        dmc.DateInput(\n            value=datetime.now().date(),\n            valueFormat=\"MMMM DD, YY\",\n            label=\"MMMM DD, YY\",\n            w=250,\n        ),\n        dmc.DateInput(\n            value=datetime.now().date(),\n            valueFormat=\"DD-MM-YYYY\",\n            label=\"DD-MM-YYYY\",\n            w=250,\n        ),\n    ],\n)\n```\n### Clearable\n\nSet clearable prop to allow removing value from the input. Input will be cleared if user selects the same date in dropdown or clears input value.\n\nWhen `clearable=True`, a clear button in the right section is displayed. Note that if you set rightSection prop, clear button will not be displayed.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.DateInput(\n    clearable=True, label=\"Date input\", placeholder=\"Date Input\", w=250\n)\n```\n### Min and max date\n\nSet `minDate` and `maxDate` props to define min and max dates. If date that is after `maxDate` or before `minDate` is entered, then it will be considered invalid and input value will be reverted to last known valid date value.\n\n```python\nfrom datetime import datetime, timedelta\n\nimport dash_mantine_components as dmc\n\ncomponent = dmc.DateInput(\n    minDate=datetime.now(),\n    maxDate=datetime.now() + timedelta(days=7),\n    placeholder=\"Date input\",\n    label=\"Select valid date\",\n    w=250,\n)\n```\n### Input props\n\n### CSS Extensions\n\nAs of DMC 1.2.0, Date component styles are bundled automatically, so you no longer need to include a separate CSS file.\nIf you're using an older version of DMC, refer to the [migration guide](/migration) for instructions on including optional stylesheets.\n\n\n\n### Styles API\n\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n#### DateInput selectors\n\n| Selector                  | Static selector                                | Description                                                        |\n| ------------------------- | ---------------------------------------------- | ------------------------------------------------------------------ |\n| wrapper                   | `.mantine-DateInput-wrapper`                   | Root element of the Input                                          |\n| input                     | `.mantine-DateInput-input`                     | Input element                                                      |\n| section                   | `.mantine-DateInput-section`                   | Left and right sections                                            |\n| root                      | `.mantine-DateInput-root`                      | Root element                                                       |\n| label                     | `.mantine-DateInput-label`                     | Label element                                                      |\n| required                  | `.mantine-DateInput-required`                  | Required asterisk element, rendered inside label                   |\n| description               | `.mantine-DateInput-description`               | Description element                                                |\n| error                     | `.mantine-DateInput-error`                     | Error element                                                      |\n| calendarHeader            | `.mantine-DateInput-calendarHeader`            | Calendar header root element                                       |\n| calendarHeaderControl     | `.mantine-DateInput-calendarHeaderControl`     | Previous/next calendar header controls                             |\n| calendarHeaderControlIcon | `.mantine-DateInput-calendarHeaderControlIcon` | Icon of previous/next calendar header controls                     |\n| calendarHeaderLevel       | `.mantine-DateInput-calendarHeaderLevel`       | Level control (changes levels when clicked, month → year → decade) |\n| levelsGroup               | `.mantine-DateInput-levelsGroup`               | Group of months levels                                             |\n| yearsList                 | `.mantine-DateInput-yearsList`                 | Years list table element                                           |\n| yearsListRow              | `.mantine-DateInput-yearsListRow`              | Years list row element                                             |\n| yearsListCell             | `.mantine-DateInput-yearsListCell`             | Years list cell element                                            |\n| yearsListControl          | `.mantine-DateInput-yearsListControl`          | Button used to pick months and years                               |\n| monthsList                | `.mantine-DateInput-monthsList`                | Months list table element                                          |\n| monthsListRow             | `.mantine-DateInput-monthsListRow`             | Months list row element                                            |\n| monthsListCell            | `.mantine-DateInput-monthsListCell`            | Months list cell element                                           |\n| monthsListControl         | `.mantine-DateInput-monthsListControl`         | Button used to pick months and years                               |\n| monthThead                | `.mantine-DateInput-monthThead`                | `thead` element of month table                                     |\n| monthRow                  | `.mantine-DateInput-monthRow`                  | `tr` element of month table                                        |\n| monthTbody                | `.mantine-DateInput-monthTbody`                | `tbody` element of month table                                     |\n| monthCell                 | `.mantine-DateInput-monthCell`                 | `td` element of month table                                        |\n| month                     | `.mantine-DateInput-month`                     | Month table element                                                |\n| weekdaysRow               | `.mantine-DateInput-weekdaysRow`               | Weekdays `tr` element                                              |\n| weekday                   | `.mantine-DateInput-weekday`                   | Weekday `th` element                                               |\n| day                       | `.mantine-DateInput-day`                       | Month day control                                                  |\n| weekNumber                | `.mantine-DateInput-weekNumber`                | Week number `td` element                                           |\n| datePickerRoot            | `.mantine-DateInput-datePickerRoot`            | Date picker root element, contains calendar and presets            |\n| presetsList               | `.mantine-DateInput-presetsList`               | Presets wrapper element                                            |\n| presetButton              | `.mantine-DateInput-presetButton`              | Preset button                                                      |\n\n\n\n#### DateInput data attributes\n\n| Selector              | Attribute             | Condition                                                             | Value                                                  |\n| --------------------- | --------------------- | --------------------------------------------------------------------- | ------------------------------------------------------ |\n| calendarHeaderControl | `data-direction`      | –                                                                     | `\"previous\"` or `\"next\"` depending on the control type |\n| calendarHeaderControl | `data-disabled`       | Control is disabled for any reason                                    | –                                                      |\n| monthCell             | `data-with-spacing`   | `withCellSpacing` prop is set                                         | –                                                      |\n| day                   | `data-today`          | Date is the same as `new Date()`                                      | –                                                      |\n| day                   | `data-hidden`         | Day is outside of current month and `hideOutsideDates` is set         | –                                                      |\n| day                   | `data-disabled`       | Day disabled by one of the props (`excludeDate`, `getDayProps`, etc.) | –                                                      |\n| day                   | `data-weekend`        | Day is weekend                                                        | –                                                      |\n| day                   | `data-outside`        | Day is outside of the current month                                   | –                                                      |\n| day                   | `data-selected`       | Day is selected                                                       | –                                                      |\n| day                   | `data-in-range`       | Day is in range selection                                             | –                                                      |\n| day                   | `data-first-in-range` | Day is first in range selection                                       | –                                                      |\n| day                   | `data-last-in-range`  | Day is last in range selection                                        | –                                                      |\n\n\n\n### Keyword Arguments\n#### DateInput\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- allowDeselect (boolean; optional):\n    Determines whether value can be deselected when the user clicks on\n    the selected date in the calendar (only when clearable prop is\n    set), defaults to True if clearable prop is set, False otherwise.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- ariaLabels (dict; optional):\n    aria-label attributes for controls on different levels.\n\n    `ariaLabels` is a dict with keys:\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- clearButtonProps (dict; optional):\n    Props added to clear button.\n\n    `clearButtonProps` is a dict with keys:\n\n- clearable (boolean; optional):\n    Determines whether input value can be cleared, adds clear button\n    to right section, False by default.\n\n- columnsToScroll (number; optional):\n    Number of columns to scroll when user clicks next/prev buttons,\n    defaults to numberOfColumns.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- debounce (number | boolean; default False):\n    (boolean | number; default False): If True, changes to input will\n    be sent back to the Dash server only on enter or when losing\n    focus. If it's False, it will send the value back on every change.\n    If a number, it will not send anything back to the Dash server\n    until the user has stopped typing for that number of milliseconds.\n\n- decadeLabelFormat (string; optional):\n    dayjs label format to display decade label or a function that\n    returns decade label based on date value, defaults to \"YYYY\".\n\n- description (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Description` component. If not set, description\n    is not rendered.\n\n- descriptionProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Description` component.\n\n- disabled (boolean; optional):\n    Sets `disabled` attribute on the `input` element.\n\n- disabledDates (boolean | number | string | dict | list; optional):\n    Specifies days that should be disabled.  Either a list of dates or\n    a function. See\n    https://www.dash-mantine-components.com/functions-as-props.\n\n- error (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Error` component. If not set, error is not\n    rendered.\n\n- errorProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Error` component.\n\n- firstDayOfWeek (a value equal to: 0, 1, 2, 3, 4, 5, 6; optional):\n    number 0-6, 0 – Sunday, 6 – Saturday, defaults to 1 – Monday.\n\n- fixOnBlur (boolean; optional):\n    Determines whether input value should be reverted to last known\n    valid value on blur, True by default.\n\n- getDayProps (boolean | number | string | dict | list; optional):\n    A function that passes props down Day component  based on date.\n    (See https://www.dash-mantine-components.com/functions-as-props).\n\n- getMonthControlProps (boolean | number | string | dict | list; optional):\n    A function that passes props down month picker control based on\n    date. (See\n    https://www.dash-mantine-components.com/functions-as-props).\n\n- getYearControlProps (boolean | number | string | dict | list; optional):\n    A function that passes props down to year picker control based on\n    date. (See\n    https://www.dash-mantine-components.com/functions-as-props).\n\n- hasNextLevel (boolean; optional):\n    Determines whether next level button should be enabled, defaults\n    to True.\n\n- headerControlsOrder (list of a value equal to: 'level', 'next', 'previous's; optional):\n    Controls order, `['previous', 'level', 'next']`` by default.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- hideOutsideDates (boolean; optional):\n    Determines whether outside dates should be hidden, defaults to\n    False.\n\n- hideWeekdays (boolean; optional):\n    Determines whether weekdays row should be hidden, defaults to\n    False.\n\n- highlightToday (boolean; optional):\n    Determines whether today should be highlighted with a border,\n    False by default.\n\n- inputProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input` component.\n\n- inputWrapperOrder (list of a value equal to: 'label', 'description', 'error', 'input's; optional):\n    Controls order of the elements, `['label', 'description', 'input',\n    'error']` by default.\n\n- label (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Label` component. If not set, label is not\n    rendered.\n\n- labelProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Label` component.\n\n- leftSection (a list of or a singular dash component, string or number; optional):\n    Content section rendered on the left side of the input.\n\n- leftSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'auto', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):\n    Sets `pointer-events` styles on the `leftSection` element,\n    `'none'` by default.\n\n- leftSectionProps (dict; optional):\n    Props passed down to the `leftSection` element.\n\n- leftSectionWidth (string | number; optional):\n    Left section width, used to set `width` of the section and input\n    `padding-left`, by default equals to the input height.\n\n- level (a value equal to: 'month', 'year', 'decade'; optional):\n    Current level displayed to the user (decade, year, month), used\n    for controlled component.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- maxDate (string; optional):\n    Maximum possible date.\n\n- maxLevel (a value equal to: 'month', 'year', 'decade'; optional):\n    Max level that user can go up to (decade, year, month), defaults\n    to decade.\n\n- minDate (string; optional):\n    Minimum possible date.\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- monthLabelFormat (string; optional):\n    dayjs label format to display month label or a function that\n    returns month label based on month value, defaults to \"MMMM\n    YYYY\".\n\n- monthsListFormat (string; optional):\n    dayjs format for months list.\n\n- n_blur (number; default 0):\n    An integer that represents the number of times that this element\n    has lost focus.\n\n- n_submit (number; default 0):\n    An integer that represents the number of times that this element\n    has been submitted.\n\n- name (string; optional):\n    Name prop.\n\n- nextDisabled (boolean; optional):\n    Determines whether next control should be disabled, defaults to\n    True.\n\n- nextIcon (a list of or a singular dash component, string or number; optional):\n    Change next icon.\n\n- nextLabel (string; optional):\n    aria-label for next button.\n\n- numberOfColumns (number; optional):\n    Number of columns to render next to each other.\n\n- persisted_props (list of strings; optional):\n    Properties whose user interactions will persist after refreshing\n    the component or the page. Since only `value` is allowed this prop\n    can normally be ignored.\n\n- persistence (string | number | boolean; optional):\n    Used to allow user interactions in this component to be persisted\n    when the component - or the page - is refreshed. If `persisted` is\n    truthy and hasn't changed from its previous value, a `value` that\n    the user has changed while using the app will keep that change, as\n    long as the new `value` also matches what was given originally.\n    Used in conjunction with `persistence_type`. Note:  The component\n    must have an `id` for persistence to work.\n\n- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):\n    Where persisted user changes will be stored: memory: only kept in\n    memory, reset on page refresh. local: window.localStorage, data is\n    kept after the browser quit. session: window.sessionStorage, data\n    is cleared once the browser quit.\n\n- placeholder (string; optional):\n    Placeholder.\n\n- pointer (boolean; optional):\n    Determines whether the input should have `cursor: pointer` style,\n    `False` by default.\n\n- popoverProps (dict; optional):\n    Props added to Popover component.\n\n    `popoverProps` is a dict with keys:\n\n- previousDisabled (boolean; optional):\n    Determines whether previous control should be disabled, defaults\n    to True.\n\n- previousIcon (a list of or a singular dash component, string or number; optional):\n    Change previous icon.\n\n- previousLabel (string; optional):\n    aria-label for previous button.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set\n    `border-radius`, numbers are converted to rem,\n    `theme.defaultRadius` by default.\n\n- readOnly (boolean; optional):\n    Readonly.\n\n- renderDay (boolean | number | string | dict | list; optional):\n    A function that controls day value rendering. (See\n    https://www.dash-mantine-components.com/functions-as-props).\n\n- required (boolean; optional):\n    Adds required attribute to the input and a red asterisk on the\n    right side of label, `False` by default.\n\n- rightSection (a list of or a singular dash component, string or number; optional):\n    Content section rendered on the right side of the input.\n\n- rightSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'auto', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):\n    Sets `pointer-events` styles on the `rightSection` element,\n    `'none'` by default.\n\n- rightSectionProps (dict; optional):\n    Props passed down to the `rightSection` element.\n\n- rightSectionWidth (string | number; optional):\n    Right section width, used to set `width` of the section and input\n    `padding-right`, by default equals to the input height.\n\n- size (a value equal to: 'xs', 'sm', 'md', 'lg', 'xl'; optional):\n    Component size.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- value (string; optional):\n    Value for controlled component.\n\n- valueFormat (string; optional):\n    Dayjs format to display input value, \"MMMM D, YYYY\" by default.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- weekdayFormat (string; optional):\n    dayjs format for weekdays names, defaults to \"dd\".\n\n- weekendDays (list of a value equal to: 0, 1, 2, 3, 4, 5, 6s; optional):\n    Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday,\n    defaults to value defined in DatesProvider.\n\n- withAsterisk (boolean; optional):\n    Determines whether the required asterisk should be displayed.\n    Overrides `required` prop. Does not add required attribute to the\n    input. `False` by default.\n\n- withCellSpacing (boolean; optional):\n    Determines whether controls should be separated by spacing, True\n    by default.\n\n- withErrorStyles (boolean; optional):\n    Determines whether the input should have red border and red text\n    color when the `error` prop is set, `True` by default.\n\n- withNext (boolean; optional):\n    Determines whether next control should be rendered, defaults to\n    True.\n\n- withPrevious (boolean; optional):\n    Determines whether previous control should be rendered, defaults\n    to True.\n\n- withWeekNumbers (boolean; optional):\n    Determines whether week numbers should be displayed, False by\n    default.\n\n- wrapperProps (dict; optional):\n    Props passed down to the root element.\n\n    `wrapperProps` is a dict with keys:\n\n- yearLabelFormat (string; optional):\n    dayjs label format to display year label or a function that\n    returns year label based on year value, defaults to \"YYYY\".\n\n- yearsListFormat (string; optional):\n    dayjs format for years list, `'YYYY'` by default."
  },
  {
    "name": "DatePicker",
    "description": "Inline date, multiple dates and dates range picker",
    "endpoint": "/components/datepicker",
    "package": "dash_mantine_components",
    "category": "Date Pickers",
    "content": "\n\n## DatePicker  \nInline date, multiple dates and dates range picker  \nCategory: Date Pickers  \n\n> Looking for a date picker with an input field and a dropdown calendar? Try `DateInput` or `DatePickerInput`.\n\n### Simple Example\n\nThis is a simple example of `DatePicker` with a callback. Use a string in the format 'YYYY-MM-DD'.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import Input, Output, html, callback\n\n\ncomponent = dmc.Stack([\n    dmc.DatePicker(id=\"date-picker\"),\n    dmc.Text(id=\"selected-date-picker\", mt=10),\n], align=\"center\")\n\n\n@callback(\n    Output(\"selected-date-picker\", \"children\"), Input(\"date-picker\", \"value\")\n)\ndef update_output(d):\n    return f\"You selected {d}\"\n```\n### Allow deselect\nSet `allowDeselect` to allow user to deselect current selected date by clicking on it. `allowDeselect` is disregarded\nwhen `type` prop is `range` or `multiple`. When date is deselected the value is None.\n\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import Input, Output, html, callback\n\n\ncomponent = dmc.Stack([\n    dmc.DatePicker(\n        id=\"date-picker-allow-deselect\",\n        allowDeselect=True\n    ),\n    dmc.Text(id=\"date-picker-out-allow-deselect\"),\n\n], align=\"center\")\n\n\n@callback(\n    Output(\"date-picker-out-allow-deselect\", \"children\"), Input(\"date-picker-allow-deselect\", \"value\")\n)\ndef update_output(d):\n    return f\"You selected {d}\"\n```\n### Multiple dates\nSet `type=\"multiple\"` to allow user to pick multiple dates.  Note that value must be a list.\n\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import Input, Output, html, callback\n\n\ncomponent = dmc.Stack([\n    dmc.DatePicker(\n        id=\"date-picker-multiple\",\n        value=[],\n        type=\"multiple\"\n    ),\n    dmc.Text(id=\"date-picker-out-multiple\"),\n\n], align=\"center\")\n\n\n@callback(\n    Output(\"date-picker-out-multiple\", \"children\"), Input(\"date-picker-multiple\", \"value\")\n)\ndef update_output(d):\n    return f\"You selected {str(d)}\"\n```\n### Dates range\nSet `type=\"range\"` to allow user to pick dates range. Note that value must be a list.\n\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import Input, Output, html, callback\n\n\ncomponent = dmc.Stack([\n    dmc.DatePicker(\n        id=\"date-picker-range\",\n        value=[],\n        type=\"range\"\n    ),\n    dmc.Text(id=\"date-picker-out-range\"),\n\n], align=\"center\")\n\n\n@callback(\n    Output(\"date-picker-out-range\", \"children\"), Input(\"date-picker-range\", \"value\")\n)\ndef update_output(d):\n    return f\"You selected {str(d)}\"\n```\n### Single date in range\nBy default, it is not allowed to select single date as range – when user clicks the same date second time it is\ndeselected. To change this behavior set `allowSingleDateInRange=True` prop. `allowSingleDateInRange` is ignored \nwhen type prop is not range.\n\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import Input, Output, html, callback\n\n\ncomponent = dmc.Stack([\n    dmc.DatePicker(\n        id=\"date-picker-range-s\",\n        value=[],\n        type=\"range\",\n        allowSingleDateInRange=True\n    ),\n    dmc.Text(id=\"date-picker-out-range-s\"),\n\n], align=\"center\")\n\n\n@callback(\n    Output(\"date-picker-out-range-s\", \"children\"), Input(\"date-picker-range-s\", \"value\")\n)\ndef update_output(d):\n    return f\"You selected {str(d)}\"\n```\n### Presets\nUse `presets` prop to add custom date presets. Presets are displayed next to the calendar:\n\n```python\nfrom datetime import date, timedelta\nfrom dateutil.relativedelta import relativedelta\nimport dash_mantine_components as dmc\n\n\ntoday = date.today()\n\ncomponent = dmc.Center(\n    dmc.DatePicker(\n        presets=[\n            {\n                \"value\": (today - timedelta(days=1)).isoformat(),\n                \"label\": \"Yesterday\",\n            },\n            {\n                \"value\": today.isoformat(),\n                \"label\": \"Today\",\n            },\n            {\n                \"value\": (today + timedelta(days=1)).isoformat(),\n                \"label\": \"Tomorrow\",\n            },\n            {\n                \"value\": (today + relativedelta(months=1)).isoformat(),\n                \"label\": \"Next month\",\n            },\n            {\n                \"value\": (today + relativedelta(years=1)).isoformat(),\n                \"label\": \"Next year\",\n            },\n            {\n                \"value\": (today - relativedelta(months=1)).isoformat(),\n                \"label\": \"Last month\",\n            },\n            {\n                \"value\": (today - relativedelta(years=1)).isoformat(),\n                \"label\": \"Last year\",\n            },\n        ]\n    )\n)\n```\nTo use `presets` with `type=\"range\"`, define value a tuple of two dates:\n\n```python\nfrom datetime import date, timedelta\nfrom dateutil.relativedelta import relativedelta\nimport dash_mantine_components as dmc\n\n\ntoday = date.today()\n\ncomponent = dmc.Center(\n    dmc.DatePicker(\n        type=\"range\",\n        presets=[\n            {\n                \"value\": [\n                    (today - timedelta(days=2)).isoformat(),\n                    today.isoformat(),\n                ],\n                \"label\": \"Last two days\",\n            },\n            {\n                \"value\": [\n                    (today - timedelta(days=7)).isoformat(),\n                    today.isoformat(),\n                ],\n                \"label\": \"Last 7 days\",\n            },\n            {\n                \"value\": [\n                    today.replace(day=1).isoformat(),\n                    today.isoformat(),\n                ],\n                \"label\": \"This month\",\n            },\n            {\n                \"value\": [\n                    (today - relativedelta(months=1)).replace(day=1).isoformat(),\n                    (today.replace(day=1) - timedelta(days=1)).isoformat(),\n                ],\n                \"label\": \"Last month\",\n            },\n            {\n                \"value\": [\n                    date(today.year - 1, 1, 1).isoformat(),\n                    date(today.year - 1, 12, 31).isoformat(),\n                ],\n                \"label\": \"Last year\",\n            },\n        ],\n    )\n)\n```\n### Default date\n\nUse `defaultDate` prop to set date value that will be used to determine which year should be displayed initially. For \nexample to display 2015 February month set `defaultDate=\"2015-02-01\"`. If value is not specified, then defaultDate will\nuse today's date. Day, minutes and seconds are ignored in provided date, only year and month data is used – you can \nspecify any date value.\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Center(\n    dmc.DatePicker(defaultDate=\"2015-02-01\")\n)\n```\n### Level\nSet `level` prop to configure initial level that will be displayed:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Group([\n    dmc.DatePicker(level=\"decade\"),\n    dmc.DatePicker(level=\"year\")\n], justify=\"center\")\n```\n### Hide outside dates\nSet `hideOutsideDates=True` to remove all dates that do not belong to the current month:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Center(\n    dmc.DatePicker(hideOutsideDates=True)\n)\n```\n### Display week numbers\nSet `withWeekNumbers=True` to display week numbers:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Center(\n    dmc.DatePicker(withWeekNumbers=True)\n)\n```\n### First day of week\nSet `firstDayOfWeek` prop to configure first day of week. The prop accepts number from 0 to 6, where 0 is Sunday and 6\nis Saturday. Default value is 1 – Monday. You can also configure this option for all components with `DatesProvider`.\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Group([\n    dmc.DatePicker(firstDayOfWeek=0),\n    dmc.DatePicker(firstDayOfWeek=6)\n], justify=\"center\", gap=\"xl\")\n```\n### Hide weekdays\nSet `hideWeekdays=True` to hide weekdays names:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Center(\n    dmc.DatePicker(hideWeekdays=True)\n)\n```\n### Weekend days\nUse `weekendDays` prop to configure weekend days. The prop accepts an array of numbers from 0 to 6, where 0 is\nSunday and 6 is Saturday. Default value is `[0, 6]` – Saturday and Sunday. You can also configure this option for\nall components with DatesProvider.\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Center(\n    dmc.DatePicker(weekendDays=[1,2])\n)\n```\n### Min and max date\nSet `minDate` and `maxDate` props to define min and max dates. If previous/next page is not available then \ncorresponding control will be disabled.\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Center(\n    dmc.DatePicker(\n        minDate=\"2025-05-10\",\n        maxDate = \"2025-05-25\"\n    )\n)\n```\n### Change header controls order\nUse `headerControlsOrder` prop to change order of header controls. The prop accepts a list of 'next' | 'previous' | 'level'.\nNote that each control can be used only once in the list.\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.DatePicker(\n    value=\"2025-02-01\",\n    headerControlsOrder = ['level', 'previous', 'next'],\n    styles = {\n        \"calendarHeaderLevel\": {\n            \"justifyContent\": 'flex-start',\n            \"paddingInlineStart\": 8,\n        },\n    }\n)\n```\n### Add props to year and month control\n\n\nNote: This example uses custom JavaScript defined in the assets folder. Learn more in the \"Functions As Props\" section of this document.\n  \n\nYou can add props to year, month and day controls with `getYearControlProps`, `getMonthControlProps` and `getDayProps`\nfunctions. All functions accept date as single argument, props returned from the function will be added to\nyear/month/day control. For example, it can be used to disable specific control or add styles:\n\n\n```python\n\nimport dash_mantine_components as dmc\n\n# Adding dayjs as external script to make it available to the function\n# app = Dash(external_scripts=[\"https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/dayjs.min.js\"])\n\ncomponent = dmc.DatePicker(\n    defaultDate=\"2025-06-01\",\n    getDayProps={\"function\": \"highlightFriday13\"},\n    getYearControlProps={\"function\": \"yearControlProps\"},\n    getMonthControlProps={\"function\": \"monthControlProps\"},\n    my=\"lg\"\n)\n```\n\n```javascript\nvar dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\n\n// dayjs is loaded globally via Dash external_scripts.\n// For details, see DatesProvider docs: https://www.dash-mantine-components.com/components/datesprovider\nvar dayjs = window.dayjs;\n\ndmcfuncs.highlightFriday13 = function (dateStr) {\n  const d = dayjs(dateStr);\n\n  if (d.day() === 5 && d.date() === 13) {\n    return {\n      style: {\n        backgroundColor: 'var(--mantine-color-red-filled)',\n        color: 'var(--mantine-color-white)',\n      },\n    };\n  }\n\n  return {};\n};\n\ndmcfuncs.yearControlProps = function (dateStr) {\n  const d = dayjs(dateStr);\n  const currentYear = new Date().getFullYear();\n\n  if (d.year() === currentYear) {\n    return {\n      style: {\n        color: 'var(--mantine-color-blue-filled)',\n        fontWeight: 700,\n      },\n    };\n  }\n\n  if (d.year() === currentYear + 1) {\n    return { disabled: true };\n  }\n\n  return {};\n};\n\ndmcfuncs.monthControlProps = function (dateStr) {\n  const d = dayjs(dateStr);\n\n  if (d.month() === 1) {\n    return {\n      style: {\n        color: 'var(--mantine-color-blue-filled)',\n        fontWeight: 700,\n      },\n    };\n  }\n\n  if (d.month() === 5) {\n    return { disabled: true };\n  }\n\n  return {};\n};\n```\n\n\n### Render day function\n\n\nNote: This example uses custom JavaScript defined in the assets folder. Learn more in the \"Functions As Props\" section of this document.\n  \n\nYou can customize day rendering with renderDay prop. For example, it can be used to add `Indicator` to certain days.\n\n\n```python\nfrom dash import Dash\nimport dash_mantine_components as dmc\n\n\n# Adding dayjs as external script to make it available to the function\n# app = Dash(external_scripts=[\"https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/dayjs.min.js\"])\n\n\ncomponent = dmc.DatePicker(\n    id=\"custom-day-render\",\n    renderDay={\"function\": \"highlightSixteenthWithDot\"}\n)\n```\n\n```javascript\nvar dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\nvar dmc = window.dash_mantine_components;\nvar dayjs = window.dayjs;\n\ndmcfuncs.highlightSixteenthWithDot = function (dateStr) {\n  const day = dayjs(dateStr).date();\n\n  return React.createElement(\n    dmc.Indicator,\n    {\n      size: 9,\n      color: \"red\",\n      offset: -5,\n      disabled: day !== 16, // displays indicator only on the the 16th doy of the month\n    },\n    React.createElement(\"div\", null, day)\n  );\n};\n```\n\n\n### Disabled dates\n\n#### Example 1: A List of dates\nUse the `disabledDates` prop to pass a list of specific dates to disable. Dates must be strings in the YYYY-MM-DD format.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Center(\n    dmc.DatePicker(\n        value=\"2024-11-05\",\n        defaultDate=\"2024-11-01\",\n        disabledDates=[\"2024-11-06\", \"2024-11-07\",  \"2024-11-08\"],\n        m=\"lg\"\n    )\n)\n```\n#### Example 2: A Function\n\n\nNote: This example uses custom JavaScript defined in the assets folder. Learn more in the \"Functions As Props\" section of this document.\n  \n\nThe `disabledDates` prop accepts a function that receives a date string (in 'YYYY-MM-DD' format) and returns true if the date should be disabled.\n\nThis example uses [dayjs](https://day.js.org/) to simplify working with dates in JavaScript.\n\nTo use `dayjs` in your Dash app, load it as an external script:\n\n```python\napp = Dash(external_scripts=[\n    \"https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/dayjs.min.js\"\n])\n```\n\nHere, `dayjs(dateStr).day()` is used to check the day of the week. This is more reliable than manually parsing the date string and helps avoid common timezone issues.\n\nThe example below disables all dates except Fridays:\n\n\n```python\n\nimport dash_mantine_components as dmc\n\n# makes dayjs available\n#app = Dash(exteral_scripts=[\"https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/dayjs.min.js\"])\n\ncomponent = dmc.Center(\n    dmc.DatePicker(\n        value=\"2024-11-08\",\n        defaultDate=\"2024-11-01\",\n        disabledDates={\"function\": \"excludeDate\"},\n        m=\"lg\"\n    )\n)\n```\n\n```javascript\nvar dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\n\ndmcfuncs.excludeDate = function(dateStr) {\n   const date = dayjs(dateStr, \"YYYY-MM-DD\");\n   return date.isValid() && date.day() !== 5;\n}\n```\n\n\n### Number of columns\nSet `numberOfColumns` prop to define number of pickers that will be rendered side by side:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Center(\n    dmc.DatePicker(numberOfColumns=2)\n)\n```\n### Max level\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Group([\n    dmc.DatePicker(maxLevel=\"year\"),\n    dmc.DatePicker(maxLevel=\"month\")\n], justify=\"center\", gap=\"xl\")\n```\n### Change year and months controls format\nUse `yearsListFormat` and `monthsListFormat` props to change [dayjs](https://day.js.org/docs/en/display/format) format of year/month controls:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Center(\n    dmc.DatePicker(monthsListFormat=\"MM\", yearsListFormat=\"YY\")\n)\n```\n### Change label format\nUse `decadeLabelFormat`, `yearLabelFormat` and `monthLabelFormat` props to change  [dayjs](https://day.js.org/docs/en/display/format)\nformat of decade/year label:\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Center(\n    dmc.DatePicker(\n        decadeLabelFormat=\"YY\",\n        yearLabelFormat=\"YYYY [year]\",\n        monthLabelFormat=\"MM/YY\",\n    )\n)\n```\n### Localization\n\nFor information on setting locale, have a look at the [DatesProvider](/components/datesprovider) component.\n\n\n### CSS Extensions\n\nAs of DMC 1.2.0, Date component styles are bundled automatically, so you no longer need to include a separate CSS file.\nIf you're using an older version of DMC, refer to the [migration guide](/migration) for instructions on including optional stylesheets.\n\n\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n\n#### DatePicker Selectors\n\n| Selector                  | Static selector                                 | Description                                    |\n| ------------------------- | ----------------------------------------------- | ---------------------------------------------- |\n| calendarHeader            | `.mantine-DatePicker-calendarHeader`            | Calendar header root element                   |\n| calendarHeaderControl     | `.mantine-DatePicker-calendarHeaderControl`     | Previous/next calendar header controls         |\n| calendarHeaderControlIcon | `.mantine-DatePicker-calendarHeaderControlIcon` | Icon of previous/next calendar header controls |\n| calendarHeaderLevel       | `.mantine-DatePicker-calendarHeaderLevel`       | Level control (month → year → decade)          |\n| levelsGroup               | `.mantine-DatePicker-levelsGroup`               | Group of months levels                         |\n| yearsList                 | `.mantine-DatePicker-yearsList`                 | Years list table element                       |\n| yearsListRow              | `.mantine-DatePicker-yearsListRow`              | Years list row element                         |\n| yearsListCell             | `.mantine-DatePicker-yearsListCell`             | Years list cell element                        |\n| yearsListControl          | `.mantine-DatePicker-yearsListControl`          | Button used to pick months and years           |\n| monthsList                | `.mantine-DatePicker-monthsList`                | Months list table element                      |\n| monthsListRow             | `.mantine-DatePicker-monthsListRow`             | Months list row element                        |\n| monthsListCell            | `.mantine-DatePicker-monthsListCell`            | Months list cell element                       |\n| monthsListControl         | `.mantine-DatePicker-monthsListControl`         | Button used to pick months and years           |\n| monthThead                | `.mantine-DatePicker-monthThead`                | Thead element of month table                   |\n| monthRow                  | `.mantine-DatePicker-monthRow`                  | TR element of month table                      |\n| monthTbody                | `.mantine-DatePicker-monthTbody`                | Tbody element of month table                   |\n| monthCell                 | `.mantine-DatePicker-monthCell`                 | TD element of month table                      |\n| month                     | `.mantine-DatePicker-month`                     | Month table element                            |\n| weekdaysRow               | `.mantine-DatePicker-weekdaysRow`               | Weekdays TR element                            |\n| weekday                   | `.mantine-DatePicker-weekday`                   | Weekday TH element                             |\n| day                       | `.mantine-DatePicker-day`                       | Month day control                              |\n| weekNumber                | `.mantine-DatePicker-weekNumber`                | Week number TD element                         |\n\n\n\n#### DatePicker Data Attributes\n\n| Selector              | Attribute             | Condition                                    | Value                    |\n| --------------------- | --------------------- | -------------------------------------------- | ------------------------ |\n| calendarHeaderControl | `data-direction`      | –                                            | `\"previous\"` or `\"next\"` |\n| calendarHeaderControl | `data-disabled`       | Control is disabled                          | –                        |\n| monthCell             | `data-with-spacing`   | `withCellSpacing` prop is set                | –                        |\n| day                   | `data-today`          | Date is today (`new Date()`)                 | –                        |\n| day                   | `data-hidden`         | Outside current month and `hideOutsideDates` | –                        |\n| day                   | `data-disabled`       | Disabled by props (e.g., `excludeDate`)      | –                        |\n| day                   | `data-weekend`        | Day is weekend                               | –                        |\n| day                   | `data-outside`        | Day is outside of current month              | –                        |\n| day                   | `data-selected`       | Day is selected                              | –                        |\n| day                   | `data-in-range`       | Day is in selected range                     | –                        |\n| day                   | `data-first-in-range` | First day in selected range                  | –                        |\n| day                   | `data-last-in-range`  | Last day in selected range                   | –                        |\n\n\n\n### Keyword Arguments\n#### DatePicker\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- allowDeselect (boolean; optional):\n    Determines whether user can deselect the date by clicking on\n    selected item, applicable only when type=\"default\".\n\n- allowSingleDateInRange (boolean; optional):\n    Determines whether single year can be selected as range,\n    applicable only when type=\"range\".\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- ariaLabels (dict; optional):\n    aria-label attributes for controls on different levels.\n\n    `ariaLabels` is a dict with keys:\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- columnsToScroll (number; optional):\n    Number of columns to scroll when user clicks next/prev buttons,\n    defaults to numberOfColumns.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- decadeLabelFormat (string; optional):\n    dayjs label format to display decade label or a function that\n    returns decade label based on date value, defaults to \"YYYY\".\n\n- defaultDate (string; optional):\n    Initial displayed date.\n\n- disabledDates (list of strings; optional):\n    Specifies days that should be disabled.\n\n- firstDayOfWeek (a value equal to: 0, 1, 2, 3, 4, 5, 6; optional):\n    number 0-6, 0 – Sunday, 6 – Saturday, defaults to 1 – Monday.\n\n- getDayProps (boolean | number | string | dict | list; optional):\n    A function that passes props down Day component  based on date.\n    (See https://www.dash-mantine-components.com/functions-as-props).\n\n- getMonthControlProps (boolean | number | string | dict | list; optional):\n    A function that passes props down month picker control based on\n    date. (See\n    https://www.dash-mantine-components.com/functions-as-props).\n\n- getYearControlProps (boolean | number | string | dict | list; optional):\n    A function that passes props down to year picker control based on\n    date. (See\n    https://www.dash-mantine-components.com/functions-as-props).\n\n- hasNextLevel (boolean; optional):\n    Determines whether next level button should be enabled, defaults\n    to True.\n\n- headerControlsOrder (list of a value equal to: 'level', 'next', 'previous's; optional):\n    Controls order, `['previous', 'level', 'next']`` by default.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- hideOutsideDates (boolean; optional):\n    Determines whether outside dates should be hidden, defaults to\n    False.\n\n- hideWeekdays (boolean; optional):\n    Determines whether weekdays row should be hidden, defaults to\n    False.\n\n- level (a value equal to: 'month', 'year', 'decade'; optional):\n    Current level displayed to the user (decade, year, month), used\n    for controlled component.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- maxDate (string; optional):\n    Maximum possible date.\n\n- maxLevel (a value equal to: 'month', 'year', 'decade'; optional):\n    Max level that user can go up to (decade, year, month), defaults\n    to decade.\n\n- minDate (string; optional):\n    Minimum possible date.\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- monthLabelFormat (string; optional):\n    dayjs label format to display month label or a function that\n    returns month label based on month value, defaults to \"MMMM\n    YYYY\".\n\n- monthsListFormat (string; optional):\n    dayjs format for months list.\n\n- nextIcon (a list of or a singular dash component, string or number; optional):\n    Change next icon.\n\n- nextLabel (string; optional):\n    aria-label for next button.\n\n- numberOfColumns (number; optional):\n    Number of columns to render next to each other.\n\n- persisted_props (list of strings; optional):\n    Properties whose user interactions will persist after refreshing\n    the component or the page. Since only `value` is allowed this prop\n    can normally be ignored.\n\n- persistence (string | number | boolean; optional):\n    Used to allow user interactions in this component to be persisted\n    when the component - or the page - is refreshed. If `persisted` is\n    truthy and hasn't changed from its previous value, a `value` that\n    the user has changed while using the app will keep that change, as\n    long as the new `value` also matches what was given originally.\n    Used in conjunction with `persistence_type`. Note:  The component\n    must have an `id` for persistence to work.\n\n- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):\n    Where persisted user changes will be stored: memory: only kept in\n    memory, reset on page refresh. local: window.localStorage, data is\n    kept after the browser quit. session: window.sessionStorage, data\n    is cleared once the browser quit.\n\n- presets (list of dicts; optional):\n    Predefined values to pick from.\n\n    `presets` is a list of dicts with keys:\n\n- previousIcon (a list of or a singular dash component, string or number; optional):\n    Change previous icon.\n\n- previousLabel (string; optional):\n    aria-label for previous button.\n\n- renderDay (boolean | number | string | dict | list; optional):\n    A function that controls day value rendering. (See\n    https://www.dash-mantine-components.com/functions-as-props).\n\n- size (a value equal to: 'xs', 'sm', 'md', 'lg', 'xl'; optional):\n    Component size.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- type (a value equal to: 'default', 'multiple', 'range'; optional):\n    Picker type: range, multiple or default.\n\n- value (string | list of strings; optional):\n    Value for controlled component.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- weekdayFormat (string; optional):\n    dayjs format for weekdays names, defaults to \"dd\".\n\n- weekendDays (list of a value equal to: 0, 1, 2, 3, 4, 5, 6s; optional):\n    Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday,\n    defaults to value defined in DatesProvider.\n\n- withCellSpacing (boolean; optional):\n    Determines whether controls should be separated by spacing, True\n    by default.\n\n- withWeekNumbers (boolean; optional):\n    Determines whether week numbers should be displayed, False by\n    default.\n\n- yearLabelFormat (string; optional):\n    dayjs label format to display year label or a function that\n    returns year label based on year value, defaults to \"YYYY\".\n\n- yearsListFormat (string; optional):\n    dayjs format for years list, `'YYYY'` by default."
  },
  {
    "name": "DatePickerInput",
    "description": "Date, multiple dates and dates range picker input. Helps you easily switch between different months, years along with locale support.",
    "endpoint": "/components/datepickerinput",
    "package": "dash_mantine_components",
    "category": "Date Pickers",
    "content": "\n\n## DatePickerInput  \nDate, multiple dates and dates range picker input. Helps you easily switch between different months, years along with locale support.  \nCategory: Date Pickers  \n\n### Simple Example\n\nThis is a simple example of `DatePickerInput` tied to a callback. You can either use strings in a valid datetime format such\nas `YYYY-MM-DD` or use the date object from datetime library.\n\n> If you would like to enable the user to type a date manually into the input field, please use the `DateInput` component\n\n```python\nfrom datetime import datetime, date\n\nimport dash_mantine_components as dmc\nfrom dash import Input, Output, html, callback\nfrom dash.exceptions import PreventUpdate\n\ncomponent = html.Div(\n    [\n        dmc.DatePickerInput(\n            id=\"date-picker-input\",\n            label=\"Start Date\",\n            description=\"You can also provide a description\",\n            minDate=date(2020, 8, 5),\n            value=datetime.now().date(),  # or string in the format \"YYYY-MM-DD\"\n            w=250,\n        ),\n        dmc.Space(h=10),\n        dmc.Text(id=\"selected-date-input\"),\n    ]\n)\n\n\n@callback(\n    Output(\"selected-date-input\", \"children\"), Input(\"date-picker-input\", \"value\")\n)\ndef update_output(d):\n    prefix = \"You have selected: \"\n    if d:\n        return prefix + d\n    else:\n        raise PreventUpdate\n```\n### Multiple dates\n\nSet type=\"multiple\" to allow user to pick multiple dates.  Note that `value` is a list.\n\n```python\nfrom datetime import datetime, date, timedelta\n\nimport dash_mantine_components as dmc\nfrom dash import Input, Output, html, callback, no_update\n\n\ncomponent = html.Div(\n    [\n        dmc.DatePickerInput(\n            id=\"date-picker-input-multiple\",\n            label=\"Pick dates\",\n            description=\"Pick one or more dates\",\n            minDate=date(2020, 8, 5),\n            value=[datetime.now().date(), datetime.now().date() + timedelta(days=5)],\n            w=400,\n            type=\"multiple\",\n            placeholder=\"Pick dates\",\n            maw=300,\n            clearable=True,\n        ),\n        dmc.Space(h=10),\n        dmc.Text(id=\"selected-date-input-multiple\"),\n    ]\n)\n\n\n@callback(\n    Output(\"selected-date-input-multiple\", \"children\"),\n    Input(\"date-picker-input-multiple\", \"value\"),\n)\ndef update_output(dates):\n    prefix = \"You have selected: \"\n    if dates:\n        return prefix + \",   \".join(dates)\n    else:\n        return no_update\n```\n### Dates range\n\nSet type=\"range\" to allow user to pick dates range. Note that `value` is a list.\n\n```python\nfrom datetime import datetime, timedelta, date\n\nimport dash_mantine_components as dmc\nfrom dash import Input, Output, html, callback\nfrom dash.exceptions import PreventUpdate\n\ncomponent = html.Div(\n    [\n        dmc.DatePickerInput(\n            id=\"date-input-range-picker\",\n            label=\"Date Range\",\n            description=\"Select a date range\",\n            minDate=date(2020, 8, 5),\n            type=\"range\",\n            value=[datetime.now().date(), datetime.now().date() + timedelta(days=5)],\n            maw=300,\n        ),\n        dmc.Space(h=10),\n        dmc.Text(id=\"selected-date-input-range-picker\"),\n    ]\n)\n\n\n@callback(\n    Output(\"selected-date-input-range-picker\", \"children\"),\n    Input(\"date-input-range-picker\", \"value\"),\n)\ndef update_output(dates):\n    prefix = \"You have selected from \"\n    if None not in dates:\n        return prefix + \"   to   \".join(dates)\n    else:\n        raise PreventUpdate\n```\n### Presets\n\nUse `presets` prop to add custom date presets. Presets are displayed next to the calendar:\n\n```python\nfrom datetime import date, timedelta\nfrom dateutil.relativedelta import relativedelta\nimport dash_mantine_components as dmc\n\n\ntoday = date.today()\n\ncomponent = dmc.DatePickerInput(\n    label=\"With presets\",\n    placeholder=\"Select date\",\n    presets=[\n        {\n            \"value\": (today - timedelta(days=1)).isoformat(),\n            \"label\": \"Yesterday\",\n        },\n        {\n            \"value\": today.isoformat(),\n            \"label\": \"Today\",\n        },\n        {\n            \"value\": (today + timedelta(days=1)).isoformat(),\n            \"label\": \"Tomorrow\",\n        },\n        {\n            \"value\": (today + relativedelta(months=1)).isoformat(),\n            \"label\": \"Next month\",\n        },\n        {\n            \"value\": (today + relativedelta(years=1)).isoformat(),\n            \"label\": \"Next year\",\n        },\n        {\n            \"value\": (today - relativedelta(months=1)).isoformat(),\n            \"label\": \"Last month\",\n        },\n        {\n            \"value\": (today - relativedelta(years=1)).isoformat(),\n            \"label\": \"Last year\",\n        },\n    ],\n    maw=200\n)\n```\nTo use `presets` with `type=\"range\"`, define value a tuple of two dates:\n\n```python\nfrom datetime import date, timedelta\nfrom dateutil.relativedelta import relativedelta\nimport dash_mantine_components as dmc\n\n\ntoday = date.today()\n\ncomponent = dmc.DatePickerInput(\n    type=\"range\",\n    label=\"With presets\",\n    placeholder=\"Select date\",\n    presets=[\n        {\n            \"value\": [\n                (today - timedelta(days=2)).isoformat(),\n                today.isoformat(),\n            ],\n            \"label\": \"Last two days\",\n        },\n        {\n            \"value\": [\n                (today - timedelta(days=7)).isoformat(),\n                today.isoformat(),\n            ],\n            \"label\": \"Last 7 days\",\n        },\n        {\n            \"value\": [\n                today.replace(day=1).isoformat(),\n                today.isoformat(),\n            ],\n            \"label\": \"This month\",\n        },\n        {\n            \"value\": [\n                (today - relativedelta(months=1)).replace(day=1).isoformat(),\n                (today.replace(day=1) - timedelta(days=1)).isoformat(),\n            ],\n            \"label\": \"Last month\",\n        },\n        {\n            \"value\": [\n                date(today.year - 1, 1, 1).isoformat(),\n                date(today.year - 1, 12, 31).isoformat(),\n            ],\n            \"label\": \"Last year\",\n        },\n    ],\n    maw=320\n)\n```\n### Open picker in modal\n\nBy default, `DatePickerInput` is rendered inside `Popover`. You can change that to `Modal` by setting `dropdownType=\"modal\"`\n\n```python\nfrom datetime import datetime\n\nimport dash_mantine_components as dmc\n\ncomponent = dmc.DatePickerInput(\n    value=datetime.now().date(),\n    dropdownType=\"modal\",\n    w=200,\n)\n```\n### Number of columns\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.DatePickerInput(w=250, type=\"range\", numberOfColumns=2)\n```\n### Value format\n\nUse `valueFormat` prop to change [dayjs format](https://day.js.org/docs/en/display/format) of value label.\n\n```python\nfrom datetime import datetime\n\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Group(\n    gap=\"xl\",\n    children=[\n        dmc.DatePickerInput(\n            value=datetime.now().date(),\n            valueFormat=\"ddd, MMM D YY\",\n            label=\"ddd, MMM D YY\",\n            w=200,\n        ),\n        dmc.DatePickerInput(\n            value=datetime.now().date(),\n            valueFormat=\"MMMM DD, YY\",\n            label=\"MMMM DD, YY\",\n            w=200,\n        ),\n        dmc.DatePickerInput(\n            value=datetime.now().date(),\n            valueFormat=\"DD-MM-YYYY\",\n            label=\"DD-MM-YYYY\",\n            w=200,\n        ),\n    ],\n)\n```\n### Clearable\n\nSet `clearable=True` prop to display clear button in the right section. Note that if you set `rightSection` prop, clear button will not be displayed.\n\n```python\nfrom datetime import datetime\n\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Stack(\n    [\n        dmc.DatePickerInput(\n            value=datetime.now().date(),\n            label=\"Date not clearable\",\n            w=200,\n        ),\n        dmc.DatePickerInput(\n            value=datetime.now().date(),\n            label=\"Date clearable\",\n            w=200,\n            clearable=True,\n        ),\n    ]\n)\n```\n### Error Display\n\nYou can convey errors in your date picker by setting the `error` prop. For instance, in the below example we try to\nconvey the user that it's a required field and the date can't be an odd date. Since it's a required field, we also\nset `clearable=False`.\n\n```python\nfrom datetime import datetime\n\nimport dash_mantine_components as dmc\nfrom dash import Output, Input, callback\n\ncomponent = dmc.DatePickerInput(\n    id=\"datepickerinput-error\",\n    value=datetime.now().date(),\n    label=\"Date\",\n    required=True,\n    clearable=False,\n    w=200,\n)\n\n\n@callback(Output(\"datepickerinput-error\", \"error\"), Input(\"datepickerinput-error\", \"value\"))\ndef datepicker_error(date):\n    day = datetime.strptime(date, \"%Y-%M-%d\").day\n    return \"Please select an even date.\" if day % 2 else \"\"\n```\n### Localization\n\nFor information on setting locale, have a look at the [DatesProvider](/components/datesprovider) component.\n\n\n### CSS Extensions\n\nAs of DMC 1.2.0, Date component styles are bundled automatically, so you no longer need to include a separate CSS file.\nIf you're using an older version of DMC, refer to the [migration guide](/migration) for instructions on including optional stylesheets.\n\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n\n#### DatePickerInput selectors\n\n| Selector                  | Static selector                                      | Description                                                        |\n| ------------------------- | ---------------------------------------------------- | ------------------------------------------------------------------ |\n| wrapper                   | `.mantine-DatePickerInput-wrapper`                   | Root element of the Input                                          |\n| input                     | `.mantine-DatePickerInput-input`                     | Input element                                                      |\n| section                   | `.mantine-DatePickerInput-section`                   | Left and right sections                                            |\n| root                      | `.mantine-DatePickerInput-root`                      | Root element                                                       |\n| label                     | `.mantine-DatePickerInput-label`                     | Label element                                                      |\n| required                  | `.mantine-DatePickerInput-required`                  | Required asterisk element, rendered inside label                   |\n| description               | `.mantine-DatePickerInput-description`               | Description element                                                |\n| error                     | `.mantine-DatePickerInput-error`                     | Error element                                                      |\n| calendarHeader            | `.mantine-DatePickerInput-calendarHeader`            | Calendar header root element                                       |\n| calendarHeaderControl     | `.mantine-DatePickerInput-calendarHeaderControl`     | Previous/next calendar header controls                             |\n| calendarHeaderControlIcon | `.mantine-DatePickerInput-calendarHeaderControlIcon` | Icon of previous/next calendar header controls                     |\n| calendarHeaderLevel       | `.mantine-DatePickerInput-calendarHeaderLevel`       | Level control (changes levels when clicked, month → year → decade) |\n| levelsGroup               | `.mantine-DatePickerInput-levelsGroup`               | Group of months levels                                             |\n| yearsList                 | `.mantine-DatePickerInput-yearsList`                 | Years list table element                                           |\n| yearsListRow              | `.mantine-DatePickerInput-yearsListRow`              | Years list row element                                             |\n| yearsListCell             | `.mantine-DatePickerInput-yearsListCell`             | Years list cell element                                            |\n| yearsListControl          | `.mantine-DatePickerInput-yearsListControl`          | Button used to pick months and years                               |\n| monthsList                | `.mantine-DatePickerInput-monthsList`                | Months list table element                                          |\n| monthsListRow             | `.mantine-DatePickerInput-monthsListRow`             | Months list row element                                            |\n| monthsListCell            | `.mantine-DatePickerInput-monthsListCell`            | Months list cell element                                           |\n| monthsListControl         | `.mantine-DatePickerInput-monthsListControl`         | Button used to pick months and years                               |\n| monthThead                | `.mantine-DatePickerInput-monthThead`                | `thead` element of month table                                     |\n| monthRow                  | `.mantine-DatePickerInput-monthRow`                  | `tr` element of month table                                        |\n| monthTbody                | `.mantine-DatePickerInput-monthTbody`                | `tbody` element of month table                                     |\n| monthCell                 | `.mantine-DatePickerInput-monthCell`                 | `td` element of month table                                        |\n| month                     | `.mantine-DatePickerInput-month`                     | Month table element                                                |\n| weekdaysRow               | `.mantine-DatePickerInput-weekdaysRow`               | Weekdays `tr` element                                              |\n| weekday                   | `.mantine-DatePickerInput-weekday`                   | Weekday `th` element                                               |\n| day                       | `.mantine-DatePickerInput-day`                       | Month day control                                                  |\n| weekNumber                | `.mantine-DatePickerInput-weekNumber`                | Week number `td` element                                           |\n| datePickerRoot            | `.mantine-DatePickerInput-datePickerRoot`            | Date picker root element, contains calendar and presets            |\n| presetsList               | `.mantine-DatePickerInput-presetsList`               | Presets wrapper element                                            |\n| presetButton              | `.mantine-DatePickerInput-presetButton`              | Preset button                                                      |\n| placeholder               | `.mantine-DatePickerInput-placeholder`               | Placeholder element                                                |\n\n\n\n#### DatePickerInput data attributes\n\n| Selector              | Attribute             | Condition                                                             | Value                                                  |\n| --------------------- | --------------------- | --------------------------------------------------------------------- | ------------------------------------------------------ |\n| calendarHeaderControl | `data-direction`      | –                                                                     | `\"previous\"` or `\"next\"` depending on the control type |\n| calendarHeaderControl | `data-disabled`       | Control is disabled for any reason                                    | –                                                      |\n| monthCell             | `data-with-spacing`   | `withCellSpacing` prop is set                                         | –                                                      |\n| day                   | `data-today`          | Date is the same as `new Date()`                                      | –                                                      |\n| day                   | `data-hidden`         | Day is outside of current month and `hideOutsideDates` is set         | –                                                      |\n| day                   | `data-disabled`       | Day disabled by one of the props (`excludeDate`, `getDayProps`, etc.) | –                                                      |\n| day                   | `data-weekend`        | Day is weekend                                                        | –                                                      |\n| day                   | `data-outside`        | Day is outside of the current month                                   | –                                                      |\n| day                   | `data-selected`       | Day is selected                                                       | –                                                      |\n| day                   | `data-in-range`       | Day is in range selection                                             | –                                                      |\n| day                   | `data-first-in-range` | Day is first in range selection                                       | –                                                      |\n| day                   | `data-last-in-range`  | Day is last in range selection                                        | –                                                      |\n\n\n### Keyword Arguments\n#### DatePickerInput\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- allowDeselect (boolean; optional):\n    Determines whether user can deselect the date by clicking on\n    selected item, applicable only when type=\"default\".\n\n- allowSingleDateInRange (boolean; optional):\n    Determines whether single year can be selected as range,\n    applicable only when type=\"range\".\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- ariaLabels (dict; optional):\n    aria-label attributes for controls on different levels.\n\n    `ariaLabels` is a dict with keys:\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- clearButtonProps (dict; optional):\n    Props passed down to clear button.\n\n    `clearButtonProps` is a dict with keys:\n\n- clearable (boolean; optional):\n    Determines whether input value can be cleared, adds clear button\n    to right section, False by default.\n\n- closeOnChange (boolean; optional):\n    Determines whether dropdown should be closed when date is\n    selected, not applicable when type=\"multiple\", True by default.\n\n- columnsToScroll (number; optional):\n    Number of columns to scroll when user clicks next/prev buttons,\n    defaults to numberOfColumns.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- debounce (number | boolean; default False):\n    (boolean | number; default False): If True, changes to input will\n    be sent back to the Dash server only on enter or when losing\n    focus. If it's False, it will send the value back on every change.\n    If a number, it will not send anything back to the Dash server\n    until the user has stopped typing for that number of milliseconds.\n\n- decadeLabelFormat (string; optional):\n    dayjs label format to display decade label or a function that\n    returns decade label based on date value, defaults to \"YYYY\".\n\n- defaultDate (string; optional):\n    Initial displayed date.\n\n- description (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Description` component. If not set, description\n    is not rendered.\n\n- descriptionProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Description` component.\n\n- disabled (boolean; optional):\n    Sets `disabled` attribute on the `input` element.\n\n- disabledDates (boolean | number | string | dict | list; optional):\n    Specifies days that should be disabled.  Either a list of dates or\n    a function. See\n    https://www.dash-mantine-components.com/functions-as-props.\n\n- dropdownType (a value equal to: 'popover', 'modal'; optional):\n    Type of dropdown, defaults to popover.\n\n- error (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Error` component. If not set, error is not\n    rendered.\n\n- errorProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Error` component.\n\n- firstDayOfWeek (a value equal to: 0, 1, 2, 3, 4, 5, 6; optional):\n    number 0-6, 0 – Sunday, 6 – Saturday, defaults to 1 – Monday.\n\n- getDayProps (boolean | number | string | dict | list; optional):\n    A function that passes props down Day component  based on date.\n    (See https://www.dash-mantine-components.com/functions-as-props).\n\n- getMonthControlProps (boolean | number | string | dict | list; optional):\n    A function that passes props down month picker control based on\n    date. (See\n    https://www.dash-mantine-components.com/functions-as-props).\n\n- getYearControlProps (boolean | number | string | dict | list; optional):\n    A function that passes props down to year picker control based on\n    date. (See\n    https://www.dash-mantine-components.com/functions-as-props).\n\n- hasNextLevel (boolean; optional):\n    Determines whether next level button should be enabled, defaults\n    to True.\n\n- headerControlsOrder (list of a value equal to: 'level', 'next', 'previous's; optional):\n    Controls order, `['previous', 'level', 'next']`` by default.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- hideOutsideDates (boolean; optional):\n    Determines whether outside dates should be hidden, defaults to\n    False.\n\n- hideWeekdays (boolean; optional):\n    Determines whether weekdays row should be hidden, defaults to\n    False.\n\n- highlightToday (boolean; optional):\n    Determines whether today should be highlighted with a border,\n    False by default.\n\n- inputProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input` component.\n\n- inputWrapperOrder (list of a value equal to: 'label', 'description', 'error', 'input's; optional):\n    Controls order of the elements, `['label', 'description', 'input',\n    'error']` by default.\n\n- label (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Label` component. If not set, label is not\n    rendered.\n\n- labelProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Label` component.\n\n- labelSeparator (string; optional):\n    Separator between range value.\n\n- leftSection (a list of or a singular dash component, string or number; optional):\n    Content section rendered on the left side of the input.\n\n- leftSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'auto', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):\n    Sets `pointer-events` styles on the `leftSection` element,\n    `'none'` by default.\n\n- leftSectionProps (dict; optional):\n    Props passed down to the `leftSection` element.\n\n- leftSectionWidth (string | number; optional):\n    Left section width, used to set `width` of the section and input\n    `padding-left`, by default equals to the input height.\n\n- level (a value equal to: 'month', 'year', 'decade'; optional):\n    Current level displayed to the user (decade, year, month), used\n    for controlled component.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- maxDate (string; optional):\n    Maximum possible date.\n\n- maxLevel (a value equal to: 'month', 'year', 'decade'; optional):\n    Max level that user can go up to (decade, year, month), defaults\n    to decade.\n\n- minDate (string; optional):\n    Minimum possible date.\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- modalProps (dict; optional):\n    Props passed down to Modal component.\n\n    `modalProps` is a dict with keys:\n\n- monthLabelFormat (string; optional):\n    dayjs label format to display month label or a function that\n    returns month label based on month value, defaults to \"MMMM\n    YYYY\".\n\n- monthsListFormat (string; optional):\n    dayjs format for months list.\n\n- n_submit (number; default 0):\n    An integer that represents the number of times that this element\n    has been submitted.\n\n- name (string; optional):\n    Name prop.\n\n- nextIcon (a list of or a singular dash component, string or number; optional):\n    Change next icon.\n\n- nextLabel (string; optional):\n    aria-label for next button.\n\n- numberOfColumns (number; optional):\n    Number of columns to render next to each other.\n\n- persisted_props (list of strings; optional):\n    Properties whose user interactions will persist after refreshing\n    the component or the page. Since only `value` is allowed this prop\n    can normally be ignored.\n\n- persistence (string | number | boolean; optional):\n    Used to allow user interactions in this component to be persisted\n    when the component - or the page - is refreshed. If `persisted` is\n    truthy and hasn't changed from its previous value, a `value` that\n    the user has changed while using the app will keep that change, as\n    long as the new `value` also matches what was given originally.\n    Used in conjunction with `persistence_type`. Note:  The component\n    must have an `id` for persistence to work.\n\n- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):\n    Where persisted user changes will be stored: memory: only kept in\n    memory, reset on page refresh. local: window.localStorage, data is\n    kept after the browser quit. session: window.sessionStorage, data\n    is cleared once the browser quit.\n\n- placeholder (string; optional):\n    Input placeholder.\n\n- pointer (boolean; optional):\n    Determines whether the input should have `cursor: pointer` style,\n    `False` by default.\n\n- popoverProps (dict; optional):\n    Props passed down to Popover component.\n\n    `popoverProps` is a dict with keys:\n\n- presets (list of dicts; optional):\n    Predefined values to pick from.\n\n    `presets` is a list of dicts with keys:\n\n- previousIcon (a list of or a singular dash component, string or number; optional):\n    Change previous icon.\n\n- previousLabel (string; optional):\n    aria-label for previous button.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set\n    `border-radius`, numbers are converted to rem,\n    `theme.defaultRadius` by default.\n\n- readOnly (boolean; optional):\n    Determines whether the user can modify the value.\n\n- renderDay (boolean | number | string | dict | list; optional):\n    A function that controls day value rendering. (See\n    https://www.dash-mantine-components.com/functions-as-props).\n\n- required (boolean; optional):\n    Adds required attribute to the input and a red asterisk on the\n    right side of label, `False` by default.\n\n- rightSection (a list of or a singular dash component, string or number; optional):\n    Content section rendered on the right side of the input.\n\n- rightSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'auto', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):\n    Sets `pointer-events` styles on the `rightSection` element,\n    `'none'` by default.\n\n- rightSectionProps (dict; optional):\n    Props passed down to the `rightSection` element.\n\n- rightSectionWidth (string | number; optional):\n    Right section width, used to set `width` of the section and input\n    `padding-right`, by default equals to the input height.\n\n- size (a value equal to: 'xs', 'sm', 'md', 'lg', 'xl'; optional):\n    Component size.\n\n- sortDates (boolean; optional):\n    Determines whether dates value should be sorted before onChange\n    call, only applicable when type=\"multiple\", True by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- type (a value equal to: 'default', 'multiple', 'range'; default 'default'):\n    Picker type: range, multiple or default.\n\n- value (string | list of strings; optional):\n    Value for controlled component.\n\n- valueFormat (string; optional):\n    Dayjs format to display input value, \"MMMM D, YYYY\" by default.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- weekdayFormat (string; optional):\n    dayjs format for weekdays names, defaults to \"dd\".\n\n- weekendDays (list of a value equal to: 0, 1, 2, 3, 4, 5, 6s; optional):\n    Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday,\n    defaults to value defined in DatesProvider.\n\n- withAsterisk (boolean; optional):\n    Determines whether the required asterisk should be displayed.\n    Overrides `required` prop. Does not add required attribute to the\n    input. `False` by default.\n\n- withCellSpacing (boolean; optional):\n    Determines whether controls should be separated by spacing, True\n    by default.\n\n- withErrorStyles (boolean; optional):\n    Determines whether the input should have red border and red text\n    color when the `error` prop is set, `True` by default.\n\n- withWeekNumbers (boolean; optional):\n    Determines whether week numbers should be displayed, False by\n    default.\n\n- wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the root element.\n\n- yearLabelFormat (string; optional):\n    dayjs label format to display year label or a function that\n    returns year label based on year value, defaults to \"YYYY\".\n\n- yearsListFormat (string; optional):\n    dayjs format for years list, `'YYYY'` by default."
  },
  {
    "name": "DateTimePicker",
    "description": "Capture datetime from the user",
    "endpoint": "/components/datetimepicker",
    "package": "dash_mantine_components",
    "category": "Date Pickers",
    "content": "\n\n## DateTimePicker  \nCapture datetime from the user  \nCategory: Date Pickers  \n\n### DatePicker props\n`DateTimePicker` supports most of the `DatePicker` props, read through [DatePicker](/components/datepicker) documentation to learn about all component features that are not listed on this page.\n\n### Simple Example\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import Input, Output, html, callback, no_update\n\n\ncomponent = html.Div(\n    [\n        dmc.DateTimePicker(\n            id=\"datetime-picker\",\n            label=\"Start Date and time\",\n            description=\"You can also provide a description\",\n            w=250,\n        ),\n        dmc.Space(h=10),\n        dmc.Text(id=\"selected-datetime\"),\n    ]\n)\n\n\n@callback(Output(\"selected-datetime\", \"children\"), Input(\"datetime-picker\", \"value\"))\ndef update_output(d):\n    return f\"You have selected {d}\"\n```\n### With Seconds\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.DateTimePicker(\n    label=\"Pick date and time\",\n    placeholder=\"Pick date and time\",\n    withSeconds=True,\n)\n```\n### Presets\n\nUse `presets` prop to add custom date presets. Presets are displayed next to the calendar:\n\n```python\nfrom datetime import datetime, timedelta\nfrom dateutil.relativedelta import relativedelta\nimport dash_mantine_components as dmc\n\n\nnow = datetime.now()\n\ncomponent = dmc.DateTimePicker(\n    label=\"Pick date and time\",\n    placeholder=\"Pick date and time\",\n    presets=[\n        {\n            \"value\": (now - timedelta(days=1)).isoformat(),\n            \"label\": \"Yesterday\",\n        },\n        {\n            \"value\": now.isoformat(),\n            \"label\": \"Today\",\n        },\n        {\n            \"value\": (now + timedelta(days=1)).isoformat(),\n            \"label\": \"Tomorrow\",\n        },\n        {\n            \"value\": (now + relativedelta(months=1)).isoformat(),\n            \"label\": \"Next month\",\n        },\n        {\n            \"value\": (now + relativedelta(years=1)).isoformat(),\n            \"label\": \"Next year\",\n        },\n        {\n            \"value\": (now - relativedelta(months=1)).isoformat(),\n            \"label\": \"Last month\",\n        },\n        {\n            \"value\": (now - relativedelta(years=1)).isoformat(),\n            \"label\": \"Last year\",\n        },\n    ]\n)\n```\n### TimePicker props\nYou can pass props down to the underlying [TimePicker](//components/timepicker) component with `timePickerProps` prop. Example of enabling \ndropdown and setting 12h format for time picker:\n\n```python\nfrom datetime import datetime\n\nimport dash_mantine_components as dmc\n\ncomponent = dmc.DateTimePicker(\n    label=\"Pick date and time\",\n    placeholder=\"Pick Date and time\",\n    timePickerProps={\n        \"withDropdown\": True,\n        \"popoverProps\": { \"withinPortal\": False },\n        \"format\": '12h',\n      }\n)\n```\n### Value format\n\nUse `valueFormat` prop to change [dayjs format](https://day.js.org/docs/en/display/format) of value label.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.DateTimePicker(\n    valueFormat=\"DD MMM YYYY hh:mm A\",\n    label=\"Pick date and time (Value Formatter)\",\n    placeholder=\"Pick date and time\",\n)\n```\n### Disabled state\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.DateTimePicker(\n    disabled=True,\n    label=\"Pick date and time (Disabled)\",\n    placeholder=\"Pick date and time\",\n)\n```\n### Input props\n\n### Clearable\n\nSet `clearable=True` prop to display clear button in the right section. Note that if you set `rightSection` prop, clear button will not be displayed.\n\n```python\nfrom datetime import datetime\n\nimport dash_mantine_components as dmc\n\ncomponent = dmc.DateTimePicker(\n    clearable=True,\n    value=\"2025-01-01\",\n    label=\"Pick date and time (clearable)\",\n    placeholder=\"Pick Date and time\",\n)\n```\n### Open picker in modal\n\nBy default, `DateTimePicker` is rendered inside `Popover`. You can change that to `Modal` by setting `dropdownType=\"modal\"`\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.DateTimePicker(\n    dropdownType=\"modal\",\n    label=\"Pick date and time (picker in modal)\",\n    placeholder=\"Pick date and time\",\n)\n```\n### CSS Extensions\n\nAs of DMC 1.2.0, Date component styles are bundled automatically, so you no longer need to include a separate CSS file.\nIf you're using an older version of DMC, refer to the [migration guide](/migration) for instructions on including optional stylesheets.\n\n\n\n\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n#### DateTimePicker selectors\n\n| Selector                    | Static selector                               | Description                                                 |\n|-----------------------------|-----------------------------------------------|-------------------------------------------------------------|\n| wrapper                     | .mantine-DateTimePicker-wrapper               | Root element of the Input                                   |\n| input                       | .mantine-DateTimePicker-input                 | Input element                                               |\n| section                     | .mantine-DateTimePicker-section               | Left and right sections                                     |\n| root                        | .mantine-DateTimePicker-root                  | Root element                                                |\n| label                       | .mantine-DateTimePicker-label                 | Label element                                               |\n| required                    | .mantine-DateTimePicker-required              | Required asterisk element, rendered inside label            |\n| description                 | .mantine-DateTimePicker-description           | Description element                                         |\n| error                       | .mantine-DateTimePicker-error                 | Error element                                               |\n| calendarHeader              | .mantine-DateTimePicker-calendarHeader        | Calendar header root element                                |\n| calendarHeaderControl       | .mantine-DateTimePicker-calendarHeaderControl | Previous/next calendar header controls                      |\n| calendarHeaderControlIcon   | .mantine-DateTimePicker-calendarHeaderControlIcon | Icon of previous/next calendar header controls           |\n| calendarHeaderLevel         | .mantine-DateTimePicker-calendarHeaderLevel   | Level control (changes levels when clicked, month -> year -> decade) |\n| levelsGroup                 | .mantine-DateTimePicker-levelsGroup           | Group of months levels                                      |\n| yearsList                   | .mantine-DateTimePicker-yearsList             | Years list table element                                    |\n| yearsListRow                | .mantine-DateTimePicker-yearsListRow          | Years list row element                                      |\n| yearsListCell               | .mantine-DateTimePicker-yearsListCell         | Years list cell element                                     |\n| yearsListControl            | .mantine-DateTimePicker-yearsListControl      | Button used to pick months and years                        |\n| monthsList                  | .mantine-DateTimePicker-monthsList            | Months list table element                                   |\n| monthsListRow               | .mantine-DateTimePicker-monthsListRow         | Months list row element                                     |\n| monthsListCell              | .mantine-DateTimePicker-monthsListCell        | Months list cell element                                    |\n| monthsListControl           | .mantine-DateTimePicker-monthsListControl     | Button used to pick months and years                        |\n| monthThead                  | .mantine-DateTimePicker-monthThead            | thead element of month table                                |\n| monthRow                    | .mantine-DateTimePicker-monthRow              | tr element of month table                                   |\n| monthTbody                  | .mantine-DateTimePicker-monthTbody            | tbody element of month table                                |\n| monthCell                   | .mantine-DateTimePicker-monthCell             | td element of month table                                   |\n| month                       | .mantine-DateTimePicker-month                 | Month table element                                         |\n| weekdaysRow                 | .mantine-DateTimePicker-weekdaysRow           | Weekdays tr element                                         |\n| weekday                     | .mantine-DateTimePicker-weekday               | Weekday th element                                          |\n| day                         | .mantine-DateTimePicker-day                   | Month day control                                           |\n| timeWrapper                 | .mantine-DateTimePicker-timeWrapper           | Wrapper around time input and submit button                 |\n| timeInput                   | .mantine-DateTimePicker-timeInput             | TimeInput                                                   |\n| submitButton                | .mantine-DateTimePicker-submitButton          | Submit button                                               |\n\n#### DateTimePicker data attributes\n\n| Selector              | Attribute          | Condition                                                | Value                                        |\n|-----------------------|--------------------|----------------------------------------------------------|----------------------------------------------|\n| calendarHeaderControl  | data-direction     | –                                                        | \"previous\" or \"next\" depending on the control type |\n| calendarHeaderControl  | data-disabled      | Control is disabled for any reason                        | –                                            |\n| monthCell             | data-with-spacing  | `withCellSpacing` prop is set                             | –                                            |\n| day                   | data-today         | Date is the same as `new Date()`                          | –                                            |\n| day                   | data-hidden        | Day is outside of current month and `hideOutsideDates` is set | –                                         |\n| day                   | data-disabled      | Day disabled by one of the props (`excludeDate`, `getDayProps`, etc.) | –                                      |\n| day                   | data-weekend       | Day is weekend                                            | –                                            |\n| day                   | data-outside       | Day is outside of the current month                       | –                                            |\n| day                   | data-selected      | Day is selected                                           | –                                            |\n| day                   | data-in-range      | Day is in range selection                                 | –                                            |\n| day                   | data-first-in-range| Day is first in range selection                           | –                                            |\n| day                   | data-last-in-range | Day is last in range selection                            | –                                            |\n\n\n\n### Keyword Arguments\n#### DateTimePicker\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- ariaLabels (dict; optional):\n    aria-label attributes for controls on different levels.\n\n    `ariaLabels` is a dict with keys:\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- clearButtonProps (dict; optional):\n    Props passed down to clear button.\n\n    `clearButtonProps` is a dict with keys:\n\n- clearable (boolean; optional):\n    Determines whether input value can be cleared, adds clear button\n    to right section, False by default.\n\n- columnsToScroll (number; optional):\n    Number of columns to scroll when user clicks next/prev buttons,\n    defaults to numberOfColumns.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- debounce (number; default 0):\n    Debounce time in ms.\n\n- decadeLabelFormat (string; optional):\n    dayjs label format to display decade label or a function that\n    returns decade label based on date value, defaults to \"YYYY\".\n\n- defaultDate (string; optional):\n    Initial displayed date.\n\n- description (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Description` component. If not set, description\n    is not rendered.\n\n- descriptionProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Description` component.\n\n- disabled (boolean; optional):\n    Sets `disabled` attribute on the `input` element.\n\n- disabledDates (boolean | number | string | dict | list; optional):\n    Specifies days that should be disabled.  Either a list of dates or\n    a function. See\n    https://www.dash-mantine-components.com/functions-as-props.\n\n- dropdownType (a value equal to: 'popover', 'modal'; optional):\n    Type of dropdown, defaults to popover.\n\n- error (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Error` component. If not set, error is not\n    rendered.\n\n- errorProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Error` component.\n\n- firstDayOfWeek (a value equal to: 0, 1, 2, 3, 4, 5, 6; optional):\n    number 0-6, 0 – Sunday, 6 – Saturday, defaults to 1 – Monday.\n\n- getDayProps (boolean | number | string | dict | list; optional):\n    A function that passes props down Day component  based on date.\n    (See https://www.dash-mantine-components.com/functions-as-props).\n\n- getMonthControlProps (boolean | number | string | dict | list; optional):\n    A function that passes props down month picker control based on\n    date. (See\n    https://www.dash-mantine-components.com/functions-as-props).\n\n- getYearControlProps (boolean | number | string | dict | list; optional):\n    A function that passes props down to year picker control based on\n    date. (See\n    https://www.dash-mantine-components.com/functions-as-props).\n\n- hasNextLevel (boolean; optional):\n    Determines whether next level button should be enabled, defaults\n    to True.\n\n- headerControlsOrder (list of a value equal to: 'level', 'next', 'previous's; optional):\n    Controls order, `['previous', 'level', 'next']`` by default.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- hideOutsideDates (boolean; optional):\n    Determines whether outside dates should be hidden, defaults to\n    False.\n\n- hideWeekdays (boolean; optional):\n    Determines whether weekdays row should be hidden, defaults to\n    False.\n\n- highlightToday (boolean; optional):\n    Determines whether today should be highlighted with a border,\n    False by default.\n\n- inputProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input` component.\n\n- inputWrapperOrder (list of a value equal to: 'label', 'description', 'error', 'input's; optional):\n    Controls order of the elements, `['label', 'description', 'input',\n    'error']` by default.\n\n- label (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Label` component. If not set, label is not\n    rendered.\n\n- labelProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Label` component.\n\n- labelSeparator (string; optional):\n    Separator between range value.\n\n- leftSection (a list of or a singular dash component, string or number; optional):\n    Content section rendered on the left side of the input.\n\n- leftSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'auto', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):\n    Sets `pointer-events` styles on the `leftSection` element,\n    `'none'` by default.\n\n- leftSectionProps (dict; optional):\n    Props passed down to the `leftSection` element.\n\n- leftSectionWidth (string | number; optional):\n    Left section width, used to set `width` of the section and input\n    `padding-left`, by default equals to the input height.\n\n- level (a value equal to: 'month', 'year', 'decade'; optional):\n    Current level displayed to the user (decade, year, month), used\n    for controlled component.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- maxDate (string; optional):\n    Maximum possible date.\n\n- minDate (string; optional):\n    Minimum possible date.\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- modalProps (dict; optional):\n    Props passed down to Modal component.\n\n    `modalProps` is a dict with keys:\n\n- monthLabelFormat (string; optional):\n    dayjs label format to display month label or a function that\n    returns month label based on month value, defaults to \"MMMM\n    YYYY\".\n\n- monthsListFormat (string; optional):\n    dayjs format for months list.\n\n- n_submit (number; default 0):\n    An integer that represents the number of times that this element\n    has been submitted.\n\n- name (string; optional):\n    Name prop.\n\n- nextIcon (a list of or a singular dash component, string or number; optional):\n    Change next icon.\n\n- nextLabel (string; optional):\n    aria-label for next button.\n\n- numberOfColumns (number; optional):\n    Number of columns to render next to each other.\n\n- persisted_props (list of strings; optional):\n    Properties whose user interactions will persist after refreshing\n    the component or the page. Since only `value` is allowed this prop\n    can normally be ignored.\n\n- persistence (string | number | boolean; optional):\n    Used to allow user interactions in this component to be persisted\n    when the component - or the page - is refreshed. If `persisted` is\n    truthy and hasn't changed from its previous value, a `value` that\n    the user has changed while using the app will keep that change, as\n    long as the new `value` also matches what was given originally.\n    Used in conjunction with `persistence_type`. Note:  The component\n    must have an `id` for persistence to work.\n\n- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):\n    Where persisted user changes will be stored: memory: only kept in\n    memory, reset on page refresh. local: window.localStorage, data is\n    kept after the browser quit. session: window.sessionStorage, data\n    is cleared once the browser quit.\n\n- placeholder (string; optional):\n    Input placeholder.\n\n- pointer (boolean; optional):\n    Determines whether the input should have `cursor: pointer` style,\n    `False` by default.\n\n- popoverProps (dict; optional):\n    Props passed down to Popover component.\n\n    `popoverProps` is a dict with keys:\n\n- presets (list of dicts; optional):\n    Predefined values to pick from.\n\n    `presets` is a list of dicts with keys:\n\n- previousIcon (a list of or a singular dash component, string or number; optional):\n    Change previous icon.\n\n- previousLabel (string; optional):\n    aria-label for previous button.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set\n    `border-radius`, numbers are converted to rem,\n    `theme.defaultRadius` by default.\n\n- readOnly (boolean; optional):\n    Determines whether the user can modify the value.\n\n- renderDay (boolean | number | string | dict | list; optional):\n    A function that controls day value rendering. (See\n    https://www.dash-mantine-components.com/functions-as-props).\n\n- required (boolean; optional):\n    Adds required attribute to the input and a red asterisk on the\n    right side of label, `False` by default.\n\n- rightSection (a list of or a singular dash component, string or number; optional):\n    Content section rendered on the right side of the input.\n\n- rightSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'auto', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):\n    Sets `pointer-events` styles on the `rightSection` element,\n    `'none'` by default.\n\n- rightSectionProps (dict; optional):\n    Props passed down to the `rightSection` element.\n\n- rightSectionWidth (string | number; optional):\n    Right section width, used to set `width` of the section and input\n    `padding-right`, by default equals to the input height.\n\n- size (a value equal to: 'xs', 'sm', 'md', 'lg', 'xl'; optional):\n    Component size.\n\n- sortDates (boolean; optional):\n    Determines whether dates value should be sorted before onChange\n    call, only applicable when type=\"multiple\", True by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- submitButtonProps (boolean | number | string | dict | list; optional):\n    Props passed down to the submit button.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- timePickerProps (dict; optional):\n    Props passed the TimePicker component.\n\n- value (string; optional):\n    Controlled component value.\n\n- valueFormat (string; optional):\n    Dayjs format to display input value, \"DD/MM/YYYY HH:mm\" by\n    default.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- weekdayFormat (string; optional):\n    dayjs format for weekdays names, defaults to \"dd\".\n\n- weekendDays (list of a value equal to: 0, 1, 2, 3, 4, 5, 6s; optional):\n    Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday,\n    defaults to value defined in DatesProvider.\n\n- withAsterisk (boolean; optional):\n    Determines whether the required asterisk should be displayed.\n    Overrides `required` prop. Does not add required attribute to the\n    input. `False` by default.\n\n- withCellSpacing (boolean; optional):\n    Determines whether controls should be separated by spacing, True\n    by default.\n\n- withErrorStyles (boolean; optional):\n    Determines whether the input should have red border and red text\n    color when the `error` prop is set, `True` by default.\n\n- withSeconds (boolean; optional):\n    Determines whether seconds input should be rendered.\n\n- withWeekNumbers (boolean; optional):\n    Determines whether week numbers should be displayed, False by\n    default.\n\n- wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the root element.\n\n- yearLabelFormat (string; optional):\n    dayjs label format to display year label or a function that\n    returns year label based on year value, defaults to \"YYYY\".\n\n- yearsListFormat (string; optional):\n    dayjs format for years list, `'YYYY'` by default."
  },
  {
    "name": "DatesProvider",
    "description": "DatesProvider component lets you set various settings that are shared across all date components.",
    "endpoint": "/components/datesprovider",
    "package": "dash_mantine_components",
    "category": "Date Pickers",
    "content": "\n\n## DatesProvider  \nDatesProvider component lets you set various settings that are shared across all date components.  \nCategory: Date Pickers  \n\n### Usage\n\nThe DatesProvider component lets you set various settings that are shared across all date components. DatesProvider supports the following settings:\n\n- `locale` – dayjs locale, note that you also need to import corresponding locale module from dayjs. Default value is en.\n- `firstDayOfWeek` – number from 0 to 6, where 0 is Sunday and 6 is Saturday. Default value is 1 – Monday.\n- `weekendDays` – an array of numbers from 0 to 6, where 0 is Sunday and 6 is Saturday. Default value is [0, 6] – Saturday and Sunday.\n- `consistentWeeks` – boolean, if true every month will have 6 weeks. Default value is false.\n\n\n\n### Locale\n\nDatePicker component uses [dayjs](https://day.js.org) behind the scenes. So you can easily customize locale by including\nrequired locale data and setting the `locale`. Make sure to include proper localization file from dayjs library.\n\n - [dayjs internationalization](https://day.js.org/docs/en/i18n/i18n)\n - [Loading locale in the browser](https://day.js.org/docs/en/installation/browser#cdn-resource)\n - [Supported locales](https://github.com/iamkun/dayjs/tree/dev/src/locale)\n\n```python\nfrom dash import Dash\nimport dash_mantine_components as dmc\n\nscripts = [\n    \"https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/dayjs.min.js\",      # dayjs  \n    \"https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/locale/fr.min.js\",  # french locale\n]\n\napp = Dash(external_scripts=scripts)\n```\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.DatesProvider(\n    children=dmc.Stack(\n        [\n            dmc.DatePickerInput(\n                w=250,\n                label=\"Sélectionner une date\",\n            ),\n            dmc.DatePickerInput(\n                w=250,\n                label=\"Sélectionner une autre date\",\n            ),\n        ]\n    ),\n    settings={\"locale\": \"fr\", \"firstDayOfWeek\": 0, \"weekendDays\": [0]},\n)\n```\n### Consistent weeks\nIf you want to avoid layout shifts, set `consistentWeeks=True` in `DatesProvider` settings. This will make sure that \nevery month has 6 weeks, even if outside days are not in the same month.\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.DatesProvider(\n    children=dmc.DatePickerInput(\n                h=400,\n                popoverProps={\n                    \"opened\": True,\n                    \"position\": \"bottom\",\n                    \"middlewares\":{ \"flip\": False, \"shift\": False }\n                }\n            ),\n    settings={\"consistentWeeks\": True},\n)\n```\n### Keyword Arguments\n\n#### DatesProvider\n\n- children (a list of or a singular dash component, string or number; optional)\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- settings (dict; required)\n\n    `settings` is a dict with keys:"
  },
  {
    "name": "MiniCalendar",
    "description": "Compact calendar to display a small number of days in a row",
    "endpoint": "/components/mini-calendar",
    "package": "dash_mantine_components",
    "category": "Date Pickers",
    "content": "\n\n## MiniCalendar  \nCompact calendar to display a small number of days in a row  \nCategory: Date Pickers  \n\n### Simple Example\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import callback, Input, Output\n\n\ncomponent = dmc.Stack([\n    dmc.MiniCalendar(\n        defaultDate=\"2025-01-02\",\n        value=\"2025-01-03\",\n        id=\"mini-calendar\"\n    ),\n    dmc.Text(id=\"mini-calendar-date\", m=\"md\")\n])\n\n@callback(\n    Output(\"mini-calendar-date\", \"children\"),\n    Input(\"mini-calendar\", \"value\"),\n)\ndef update(d):\n    return f\"You selected: {d}\"\n```\n### Number of days\n\nUse numberOfDays prop to control how many days are displayed at once. The default value is 7.\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.MiniCalendar(numberOfDays=5)\n```\n### getDayProps\n\n\nNote: This example uses custom JavaScript defined in the assets folder. Learn more in the \"Functions As Props\" section of this document.\n  \n\nUse `getDayProps` to add custom props to days, for example, assign styles to weekends:\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.MiniCalendar(\n    numberOfDays=8,\n    getDayProps={\"function\":\"weekendRed\"}\n)\n```\n\n```javascript\nvar dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\n\n// dayjs is loaded globally via Dash external_scripts.\n// For details, see DatesProvider docs: https://www.dash-mantine-components.com/components/datesprovider\nvar dayjs = window.dayjs;\n\ndmcfuncs.weekendRed = function (dateStr) {\n  const d = dayjs(dateStr);\n\n  if ([0, 6].includes(d.day())) {\n    return {\n      style: {\n        color: 'var(--mantine-color-red-8)',\n      },\n    };\n  }\n\n  return {};\n};\n```\n\n\n### Min and max dates\nUse `minDate` and `maxDate` props to limit date selection:\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.MiniCalendar(\n    numberOfDays=6,\n    defaultDate=\"2025-04-13\",\n    minDate = \"2025-04-14\",\n    maxDate = \"2025-04-24\",\n)\n```\n### Localization\nYou can change localization both on component level with locale prop and globally with [DatesProvider](/components/datesprovider).\n\n\n```python\nimport dash_mantine_components as dmc\n\n\ncomponent = dmc.DatesProvider(\n    dmc.MiniCalendar(locale=\"fr\", defaultDate=\"2025-04-01\"),\n    settings={\"locale\": \"fr\"}\n)\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\nHere’s your content reformatted as Markdown tables:\n\n#### MiniCalendar selectors\n\n| Selector  | Static selector                   | Description                                                                |\n| --------- | --------------------------------- | -------------------------------------------------------------------------- |\n| root      | `.mantine-MiniCalendar-root`      | Root element                                                               |\n| control   | `.mantine-MiniCalendar-control`   | Button in the dropdown which is used to select hours/minutes/seconds/am-pm |\n| days      | `.mantine-MiniCalendar-days`      | Days container                                                             |\n| day       | `.mantine-MiniCalendar-day`       | Single day element                                                         |\n| dayMonth  | `.mantine-MiniCalendar-dayMonth`  | Day element in month view                                                  |\n| dayNumber | `.mantine-MiniCalendar-dayNumber` | Day number element                                                         |\n\n---\n\n#### MiniCalendar CSS variables\n\n| Selector | Variable                    | Description                                       |\n| -------- | --------------------------- | ------------------------------------------------- |\n| root     | `--mini-calendar-font-size` | Controls size of all elements (based on em units) |\n\n---\n\n#### MiniCalendar data attributes\n\n| Selector | Attribute | Condition                                              | Value                |\n| -------- | --------- | ------------------------------------------------------ | -------------------- |\n| control  | disabled  | Next/previous range is after maxDate or before minDate | –                    |\n| control  | direction | –                                                      | `previous` or `next` |\n| day      | selected  | The day matches the value                              | –                    |\n| day      | disabled  | The day is before minDate or after maxDate             | –                    |\n\n---\n\n\n### Keyword Arguments\n#### MiniCalendar\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- date (string; optional):\n    Controlled component date value, start date of the interval.\n\n- defaultDate (string; optional):\n    Uncontrolled component default value, start date of the interval.\n\n- getDayProps (boolean | number | string | dict | list; optional):\n    A function that passes props down Day component  based on date.\n    (See https://www.dash-mantine-components.com/functions-as-props).\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- locale (string; optional):\n    dayjs locale used for formatting.\n\n- maxDate (string; optional):\n    Maximum date that can be selected, date object or date string in\n    `YYYY-MM-DD` format.\n\n- minDate (string; optional):\n    Minimum date that can be selected, date object or date string in\n    `YYYY-MM-DD` format.\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- monthLabelFormat (string; optional):\n    Dayjs format string for month label default `MMM`.\n\n- numberOfDays (number; optional):\n    Number of days to display in the calendar default 7.\n\n- persisted_props (list of strings; optional):\n    Properties whose user interactions will persist after refreshing\n    the component or the page. Since only `value` is allowed this prop\n    can normally be ignored.\n\n- persistence (string | number | boolean; optional):\n    Used to allow user interactions in this component to be persisted\n    when the component - or the page - is refreshed. If `persisted` is\n    truthy and hasn't changed from its previous value, a `value` that\n    the user has changed while using the app will keep that change, as\n    long as the new `value` also matches what was given originally.\n    Used in conjunction with `persistence_type`. Note:  The component\n    must have an `id` for persistence to work.\n\n- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):\n    Where persisted user changes will be stored: memory: only kept in\n    memory, reset on page refresh. local: window.localStorage, data is\n    kept after the browser quit. session: window.sessionStorage, data\n    is cleared once the browser quit.\n\n- size (a value equal to: 'xs', 'sm', 'md', 'lg', 'xl'; optional):\n    Component size default 'sm'.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- value (string; optional):\n    Selected date, controlled value.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`."
  },
  {
    "name": "MonthPickerInput",
    "description": "Month, multiple months and months range picker input",
    "endpoint": "/components/monthpickerinput",
    "package": "dash_mantine_components",
    "category": "Date Pickers",
    "content": "\n\n## MonthPickerInput  \nMonth, multiple months and months range picker input  \nCategory: Date Pickers  \n\n### Simple Example\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.MonthPickerInput(\n    label=\"Pick date\",\n    placeholder=\"Pick date\",\n)\n```\n### Multiple dates\n\nSet type=\"multiple\" to allow user to pick multiple months.  Note that `value` is a list.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.MonthPickerInput(\n    type=\"multiple\",\n    label=\"Pick multiple dates\",\n    placeholder=\"Pick dates\",\n)\n```\n### Dates range\n\nSet type=\"range\" to allow user to pick dates range. Note that `value` is a list.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.MonthPickerInput(\n    type=\"range\",\n    label=\"Pick dates range\",\n    placeholder=\"Pick dates range\",\n)\n```\n### Open picker in modal\n\nBy default, MonthPickerInput is rendered inside Popover. You can change that to Modal by setting dropdownType=\"modal\"\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.MonthPickerInput(\n    dropdownType=\"modal\",\n    label=\"Pick date (picker in modal)\",\n    placeholder=\"Pick date\",\n)\n```\n### Number of columns\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.MonthPickerInput(\n    label=\"Pick date\", placeholder=\"Pick date\", numberOfColumns=2\n)\n```\n### Value format\n\nUse `valueFormat` prop to change [dayjs format](https://day.js.org/docs/en/display/format) of value label.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.MonthPickerInput(\n    valueFormat=\"YYYY MMM\",\n    type=\"multiple\",\n    label=\"Pick month (Value Formatter)\",\n    placeholder=\"Pick month\",\n)\n```\n### Clearable\n\nSet `clearable=True` prop to display clear button in the right section. Note that if you set `rightSection` prop, clear button will not be displayed.\n\n```python\nfrom datetime import datetime\n\nimport dash_mantine_components as dmc\n\ncomponent = dmc.MonthPickerInput(\n    clearable=True,\n    value=datetime.now(),\n    label=\"Pick date (clearable)\",\n    placeholder=\"Pick Date\",\n)\n```\n### With Icon\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ncomponent = dmc.MonthPickerInput(\n    leftSection=DashIconify(icon=\"fa:calendar\"),\n    leftSectionPointerEvents=\"none\",\n    label=\"Pick date\",\n    placeholder=\"Pick date\",\n)\n```\n### Min and Max Date\n\n```python\nfrom datetime import datetime, timedelta\n\nimport dash_mantine_components as dmc\n\ncomponent = dmc.MonthPickerInput(\n    minDate=datetime(2022, 1, 1),\n    maxDate=datetime(2022, 8, 1),\n    value=datetime(2022, 1, 1),\n    placeholder=\"Date input\",\n    label=\"Select valid date\",\n    w=250,\n)\n```\n### CSS Extensions\n\nAs of DMC 1.2.0, Date component styles are bundled automatically, so you no longer need to include a separate CSS file.\nIf you're using an older version of DMC, refer to the [migration guide](/migration) for instructions on including optional stylesheets.\n\n\n\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n#### MonthPickerInput selectors\n\n| Selector                   | Static selector                                        | Description                                                           |\n| ---------------------------| ------------------------------------------------------ | --------------------------------------------------------------------- |\n| `wrapper`                  | `.mantine-MonthPickerInput-wrapper`                    | Root element of the Input                                              |\n| `input`                    | `.mantine-MonthPickerInput-input`                      | Input element                                                         |\n| `section`                  | `.mantine-MonthPickerInput-section`                    | Left and right sections                                                |\n| `root`                     | `.mantine-MonthPickerInput-root`                       | Root element                                                          |\n| `label`                    | `.mantine-MonthPickerInput-label`                      | Label element                                                         |\n| `required`                 | `.mantine-MonthPickerInput-required`                   | Required asterisk element, rendered inside label                       |\n| `description`              | `.mantine-MonthPickerInput-description`                | Description element                                                    |\n| `error`                    | `.mantine-MonthPickerInput-error`                      | Error element                                                         |\n| `calendarHeader`           | `.mantine-MonthPickerInput-calendarHeader`             | Calendar header root element                                           |\n| `calendarHeaderControl`     | `.mantine-MonthPickerInput-calendarHeaderControl`      | Previous/next calendar header controls                                 |\n| `calendarHeaderControlIcon` | `.mantine-MonthPickerInput-calendarHeaderControlIcon`  | Icon of previous/next calendar header controls                         |\n| `calendarHeaderLevel`       | `.mantine-MonthPickerInput-calendarHeaderLevel`        | Level control (changes levels when clicked, month -> year -> decade)   |\n| `levelsGroup`              | `.mantine-MonthPickerInput-levelsGroup`                | Group of decades levels                                                |\n| `yearsList`                | `.mantine-MonthPickerInput-yearsList`                  | Years list table element                                               |\n| `yearsListRow`             | `.mantine-MonthPickerInput-yearsListRow`               | Years list row element                                                 |\n| `yearsListCell`            | `.mantine-MonthPickerInput-yearsListCell`              | Years list cell element                                                |\n| `yearsListControl`         | `.mantine-MonthPickerInput-yearsListControl`           | Button used to pick months and years                                   |\n| `monthsList`               | `.mantine-MonthPickerInput-monthsList`                 | Years list table element                                               |\n| `monthsListRow`            | `.mantine-MonthPickerInput-monthsListRow`              | Years list row element                                                 |\n| `monthsListCell`           | `.mantine-MonthPickerInput-monthsListCell`             | Years list cell element                                                |\n| `monthsListControl`        | `.mantine-MonthPickerInput-monthsListControl`          | Button used to pick months and years                                   |\n| `placeholder`              | `.mantine-MonthPickerInput-placeholder`                | Placeholder element                                                    |\n\n#### MonthPickerInput data attributes\n\n| Selector              | Attribute      | Condition                           | Value                              |\n| --------------------- | -------------- | ----------------------------------- | ---------------------------------- |\n| `calendarHeaderControl`| `data-direction`| –                                   | \"previous\" or \"next\" depending on the control type |\n| `calendarHeaderControl`| `data-disabled`| Control is disabled for any reason  | –                                  |\n\n\n### Keyword Arguments\n#### MonthPickerInput\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- allowDeselect (boolean; optional):\n    Determines whether user can deselect the date by clicking on\n    selected item, applicable only when type=\"default\".\n\n- allowSingleDateInRange (boolean; optional):\n    Determines whether single year can be selected as range,\n    applicable only when type=\"range\".\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- ariaLabels (dict; optional):\n    aria-label attributes for controls on different levels.\n\n    `ariaLabels` is a dict with keys:\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- clearButtonProps (dict; optional):\n    Props passed down to clear button.\n\n    `clearButtonProps` is a dict with keys:\n\n- clearable (boolean; optional):\n    Determines whether input value can be cleared, adds clear button\n    to right section, False by default.\n\n- closeOnChange (boolean; optional):\n    Determines whether dropdown should be closed when date is\n    selected, not applicable when type=\"multiple\", True by default.\n\n- columnsToScroll (number; optional):\n    Number of columns to scroll when user clicks next/prev buttons,\n    defaults to numberOfColumns.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- debounce (number | boolean; default False):\n    Debounce time in ms.\n\n- decadeLabelFormat (string; optional):\n    dayjs label format to display decade label or a function that\n    returns decade label based on date value, defaults to \"YYYY\".\n\n- defaultDate (string; optional):\n    Initial displayed date.\n\n- description (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Description` component. If not set, description\n    is not rendered.\n\n- descriptionProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Description` component.\n\n- disabled (boolean; optional):\n    Sets `disabled` attribute on the `input` element.\n\n- dropdownType (a value equal to: 'popover', 'modal'; optional):\n    Type of dropdown, defaults to popover.\n\n- error (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Error` component. If not set, error is not\n    rendered.\n\n- errorProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Error` component.\n\n- firstDayOfWeek (a value equal to: 0, 1, 2, 3, 4, 5, 6; optional):\n    number 0-6, 0 – Sunday, 6 – Saturday, defaults to 1 – Monday.\n\n- getDayProps (boolean | number | string | dict | list; optional):\n    A function that passes props down Day component  based on date.\n    (See https://www.dash-mantine-components.com/functions-as-props).\n\n- getMonthControlProps (boolean | number | string | dict | list; optional):\n    A function that passes props down month picker control based on\n    date. (See\n    https://www.dash-mantine-components.com/functions-as-props).\n\n- getYearControlProps (boolean | number | string | dict | list; optional):\n    A function that passes props down to year picker control based on\n    date. (See\n    https://www.dash-mantine-components.com/functions-as-props).\n\n- hasNextLevel (boolean; optional):\n    Determines whether next level button should be enabled, defaults\n    to True.\n\n- headerControlsOrder (list of a value equal to: 'level', 'next', 'previous's; optional):\n    Controls order, `['previous', 'level', 'next']`` by default.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- hideOutsideDates (boolean; optional):\n    Determines whether outside dates should be hidden, defaults to\n    False.\n\n- hideWeekdays (boolean; optional):\n    Determines whether weekdays row should be hidden, defaults to\n    False.\n\n- inputProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input` component.\n\n- inputWrapperOrder (list of a value equal to: 'label', 'description', 'error', 'input's; optional):\n    Controls order of the elements, `['label', 'description', 'input',\n    'error']` by default.\n\n- label (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Label` component. If not set, label is not\n    rendered.\n\n- labelProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Label` component.\n\n- labelSeparator (string; optional):\n    Separator between range value.\n\n- leftSection (a list of or a singular dash component, string or number; optional):\n    Content section rendered on the left side of the input.\n\n- leftSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'auto', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):\n    Sets `pointer-events` styles on the `leftSection` element,\n    `'none'` by default.\n\n- leftSectionProps (dict; optional):\n    Props passed down to the `leftSection` element.\n\n- leftSectionWidth (string | number; optional):\n    Left section width, used to set `width` of the section and input\n    `padding-left`, by default equals to the input height.\n\n- level (a value equal to: 'year', 'decade'; optional):\n    Current level displayed to the user (decade, year), used for\n    controlled component.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- maxDate (string; optional):\n    Maximum possible date.\n\n- maxLevel (a value equal to: 'year', 'decade'; optional):\n    Max level that user can go up to (decade, year), defaults to\n    decade.\n\n- minDate (string; optional):\n    Minimum possible date.\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- modalProps (dict; optional):\n    Props passed down to Modal component.\n\n    `modalProps` is a dict with keys:\n\n- monthLabelFormat (string; optional):\n    dayjs label format to display month label or a function that\n    returns month label based on month value, defaults to \"MMMM\n    YYYY\".\n\n- monthsListFormat (string; optional):\n    dayjs format for months list.\n\n- n_submit (number; default 0):\n    An integer that represents the number of times that this element\n    has been submitted.\n\n- name (string; optional):\n    Name prop.\n\n- nextIcon (a list of or a singular dash component, string or number; optional):\n    Change next icon.\n\n- nextLabel (string; optional):\n    aria-label for next button.\n\n- numberOfColumns (number; optional):\n    Number of columns to render next to each other.\n\n- persisted_props (list of strings; optional):\n    Properties whose user interactions will persist after refreshing\n    the component or the page. Since only `value` is allowed this prop\n    can normally be ignored.\n\n- persistence (string | number | boolean; optional):\n    Used to allow user interactions in this component to be persisted\n    when the component - or the page - is refreshed. If `persisted` is\n    truthy and hasn't changed from its previous value, a `value` that\n    the user has changed while using the app will keep that change, as\n    long as the new `value` also matches what was given originally.\n    Used in conjunction with `persistence_type`. Note:  The component\n    must have an `id` for persistence to work.\n\n- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):\n    Where persisted user changes will be stored: memory: only kept in\n    memory, reset on page refresh. local: window.localStorage, data is\n    kept after the browser quit. session: window.sessionStorage, data\n    is cleared once the browser quit.\n\n- placeholder (string; optional):\n    Input placeholder.\n\n- pointer (boolean; optional):\n    Determines whether the input should have `cursor: pointer` style,\n    `False` by default.\n\n- popoverProps (dict; optional):\n    Props passed down to Popover component.\n\n    `popoverProps` is a dict with keys:\n\n- previousIcon (a list of or a singular dash component, string or number; optional):\n    Change previous icon.\n\n- previousLabel (string; optional):\n    aria-label for previous button.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set\n    `border-radius`, numbers are converted to rem,\n    `theme.defaultRadius` by default.\n\n- readOnly (boolean; optional):\n    Determines whether the user can modify the value.\n\n- renderDay (boolean | number | string | dict | list; optional):\n    A function that controls day value rendering. (See\n    https://www.dash-mantine-components.com/functions-as-props).\n\n- required (boolean; optional):\n    Adds required attribute to the input and a red asterisk on the\n    right side of label, `False` by default.\n\n- rightSection (a list of or a singular dash component, string or number; optional):\n    Content section rendered on the right side of the input.\n\n- rightSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'auto', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):\n    Sets `pointer-events` styles on the `rightSection` element,\n    `'none'` by default.\n\n- rightSectionProps (dict; optional):\n    Props passed down to the `rightSection` element.\n\n- rightSectionWidth (string | number; optional):\n    Right section width, used to set `width` of the section and input\n    `padding-right`, by default equals to the input height.\n\n- size (a value equal to: 'xs', 'sm', 'md', 'lg', 'xl'; optional):\n    Component size.\n\n- sortDates (boolean; optional):\n    Determines whether dates value should be sorted before onChange\n    call, only applicable when type=\"multiple\", True by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- type (a value equal to: 'default', 'multiple', 'range'; optional):\n    Picker type: range, multiple or default.\n\n- value (string | list of strings; optional):\n    Value for controlled component.\n\n- valueFormat (string; optional):\n    Dayjs format to display input value, \"MMMM D, YYYY\" by default.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- weekdayFormat (string; optional):\n    dayjs format for weekdays names, defaults to \"dd\".\n\n- weekendDays (list of a value equal to: 0, 1, 2, 3, 4, 5, 6s; optional):\n    Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday,\n    defaults to value defined in DatesProvider.\n\n- withAsterisk (boolean; optional):\n    Determines whether the required asterisk should be displayed.\n    Overrides `required` prop. Does not add required attribute to the\n    input. `False` by default.\n\n- withCellSpacing (boolean; optional):\n    Determines whether controls should be separated by spacing, True\n    by default.\n\n- withErrorStyles (boolean; optional):\n    Determines whether the input should have red border and red text\n    color when the `error` prop is set, `True` by default.\n\n- withWeekNumbers (boolean; optional):\n    Determines whether week numbers should be displayed, False by\n    default.\n\n- wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the root element.\n\n- yearLabelFormat (string; optional):\n    dayjs label format to display year label or a function that\n    returns year label based on year value, defaults to \"YYYY\".\n\n- yearsListFormat (string; optional):\n    dayjs format for years list, `'YYYY'` by default."
  },
  {
    "name": "TimeGrid",
    "description": "Captures time value from the user with a predefined set of options.",
    "endpoint": "/components/timegrid",
    "package": "dash_mantine_components",
    "category": "Date Pickers",
    "content": "\n\n## TimeGrid  \nCaptures time value from the user with a predefined set of options.  \nCategory: Date Pickers  \n\n### Simple Example\n\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import callback, Input, Output\n\ncomponent = dmc.Stack([\n    dmc.TimeGrid(\n        timeRangeData={\"startTime\": \"10:00\", \"endTime\": \"21:00\", \"interval\": \"01:00\"},\n        withSeconds=False,\n        simpleGridProps={\n            \"type\": \"container\",\n            \"cols\": {\"base\": 1, \"180px\": 2, \"320px\": 3},\n            \"spacing\": \"xs\",\n        },\n        value=\"10:00:00\",\n        id=\"time-grid\"\n    ),\n    dmc.Text(id=\"time-grid-out\")\n])\n\n@callback(\n    Output(\"time-grid-out\", \"children\"),\n    Input(\"time-grid\", \"value\")\n)\ndef update(value):\n    return f\"You selected: {value}\"\n```\n### format, withSeconds, size, radius\n\n### data prop\n`data` prop accepts an array of time values in 24-hour format. Values must be unique.\n\n```python\ndmc.TimeGrid(\n    data=['10:00', '12:00']\n)\n```\n\n### timeRangeData prop\n\nUse the `timeRangeData` prop to generate a range of times. It accepts a dictionary with `startTime`,\n`endTime`, and `interval` keys, where all values are strings in `hh:mm:ss` format. This overrides any values provided \ndirectly in the `data` prop.\n\n```python\ndmc.TimeGrid(\n    timeRangeData={\"startTime\": \"10:00\", \"endTime\": \"21:00\", \"interval\": \"01:00\"},\n)\n```\n\n### Min and max time\nSet `minTime` and `maxTime` props to limit available time range. Both props accept time values in 24-hour format:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.TimeGrid(\n    timeRangeData={\"startTime\": \"09:00\", \"endTime\": \"22:00\", \"interval\": \"01:00\"},\n    minTime=\"11:00\",\n    maxTime=\"18:00\",\n    withSeconds=False,\n)\n```\n### Disable time values\nYou can disable specific time values by providing an array of disabled values to the `disableTime` prop:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.TimeGrid(\n    timeRangeData={\"startTime\": \"09:00\", \"endTime\": \"11:45\", \"interval\": \"00:15\"},\n    disableTime = ['10:45', '11:00', '11:30']\n)\n```\n### Allow deselect\nSet `allowDeselect` prop to allow deselecting time value by clicking on the control with selected value:\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.TimeGrid(\n    timeRangeData={\"startTime\": \"09:00\", \"endTime\": \"12:00\", \"interval\": \"01:00\"},\n    value=\"11:00\",\n    allowDeselect=True\n)\n```\n### Change AM/PM Labels\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.TimeGrid(\n    timeRangeData={\"startTime\": \"09:00\", \"endTime\": \"22:00\", \"interval\": \"01:00\"},\n    format=\"12h\",\n    amPmLabels={\"am\": 'पूर्वाह्न', \"pm\": 'अपराह्न'}\n)\n```\n### Disabled\nSet `disabled` prop to disable all controls:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.TimeGrid(\n    timeRangeData={\"startTime\": \"09:00\", \"endTime\": \"22:00\", \"interval\": \"01:00\"},\n    disabled=True\n)\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n#### TimeGrid selectors\n\n| Selector   | Static selector                | Description               |\n| ---------- | ------------------------------ | ------------------------- |\n| root       | `.mantine-TimeGrid-root`       | Root element              |\n| control    | `.mantine-TimeGrid-control`    | Time grid control         |\n| simpleGrid | `.mantine-TimeGrid-simpleGrid` | SimpleGrid component root |\n\n\n\n#### TimeGrid CSS variables\n\n| Selector | Variable             | Description                                       |\n| -------- | -------------------- | ------------------------------------------------- |\n| root     | `--time-grid-fz`     | Controls `font-size` property of all controls     |\n| root     | `--time-grid-radius` | Controls `border-radius` property of all controls |\n\n\n\n#### TimeGrid data attributes\n\n| Selector | Attribute       | Condition                                                                                  |\n| -------- | --------------- | ------------------------------------------------------------------------------------------ |\n| control  | `data-active`   | Current component value is the same as control value                                       |\n| control  | `data-disabled` | Component is disabled by one of the props: `minTime`, `maxTime`, `disableTime`, `disabled` |\n\n\n\n### Keyword Arguments\n#### TimeGrid\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- allowDeselect (boolean; optional):\n    Determines whether the value can be deselected when the current\n    active option is clicked or activated with keyboard, `False` by\n    default.\n\n- amPmLabels (dict; optional):\n    Labels used for am/pm values, `{ am: 'AM', pm: 'PM' }` by default.\n\n    `amPmLabels` is a dict with keys:\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data (list of strings; optional):\n    Time data in 24h format to be displayed in the grid, for example\n    `['10:00', '18:30', '22:00']`. Time values must be unique.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- defaultValue (string; optional):\n    Uncontrolled component default value.\n\n- disableTime (list of strings; optional):\n    Array of time values to disable.\n\n- disabled (boolean; optional):\n    If set, all controls are disabled.\n\n- format (a value equal to: '12h', '24h'; optional):\n    Time format displayed in the grid, `'24h'` by default.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- maxTime (string; optional):\n    All controls after this time are disabled.\n\n- minTime (string; optional):\n    All controls before this time are disabled.\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- persisted_props (list of strings; optional):\n    Properties whose user interactions will persist after refreshing\n    the component or the page. Since only `value` is allowed this prop\n    can normally be ignored.\n\n- persistence (string | number | boolean; optional):\n    Used to allow user interactions in this component to be persisted\n    when the component - or the page - is refreshed. If `persisted` is\n    truthy and hasn't changed from its previous value, a `value` that\n    the user has changed while using the app will keep that change, as\n    long as the new `value` also matches what was given originally.\n    Used in conjunction with `persistence_type`. Note:  The component\n    must have an `id` for persistence to work.\n\n- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):\n    Where persisted user changes will be stored: memory: only kept in\n    memory, reset on page refresh. local: window.localStorage, data is\n    kept after the browser quit. session: window.sessionStorage, data\n    is cleared once the browser quit.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set\n    `border-radius`, `theme.defaultRadius` by default.\n\n- simpleGridProps (boolean | number | string | dict | list; optional):\n    Props passed down to the underlying `SimpleGrid` component, `{\n    cols: 3, spacing: 'xs' }` by default.\n\n- size (a value equal to: 'xs', 'sm', 'md', 'lg', 'xl'; optional):\n    Control `font-size` of controls, key of `theme.fontSizes` or any\n    valid CSS value, `'sm'` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- timeRangeData (dict; optional):\n    Generates a range of time values for the `data` prop. Accepts a\n    dictionary with `startTime`, `endTime`, and `interval` keys, where\n    all values are strings in `hh:mm:ss` format. This overrides any\n    values provided directly in the `data` prop.\n\n    `timeRangeData` is a dict with keys:\n\n- value (string; default ''):\n    Value for controlled component.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withSeconds (boolean; optional):\n    Determines whether the seconds part should be displayed, `False`\n    by default."
  },
  {
    "name": "TimeInput",
    "description": "Use the TimeInput component to capture time input from user.",
    "endpoint": "/components/timeinput",
    "package": "dash_mantine_components",
    "category": "Date Pickers",
    "content": "\n\n## TimeInput  \nUse the TimeInput component to capture time input from user.  \nCategory: Date Pickers  \n\n### Simple Example\n\nThis is a simple example of the TimeInput. You can enter a valid time string such as hh:mm:ss.\n\nUse the  `withSeconds` prop to display seconds.\n\n```python\nimport dash_mantine_components as dmc\nimport datetime\n\ncomponent = dmc.Group(\n    gap=50,\n    children=[\n        dmc.TimeInput(label=\"What time is it now?\"),\n        dmc.TimeInput(\n            label=\"What time is it now?\",\n            withSeconds=True,\n            value=\"23:15:45\",\n        ),\n    ],\n)\n```\n### TimePicker component\nTimeInput component is based on the native `input[type=\"time\"]` element and does not support most of advanced features\nlike choosing time format or custom dropdown with time select. If you need more features, use [TimePicker](/components/timepicker) \ncomponent instead.\n\n`TimeInput` features/limitations:\n\n- Native `input[type=\"time\"]` element\n- Native browser controls for time selection on mobile devices\n- Time format depends on the user's locale\n- Only native dropdown with hours/minutes/seconds, does not work in Firefox\n- Mobile Safari does not provide an option to select seconds\n\n\n### Input Props\n\nTimeInput supports all props from Input and InputWrapper components such as `radius`, `size`, `required`, etc.\n\n### With icon\n\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ncomponent = dmc.TimeInput(leftSection=DashIconify(icon=\"bi:clock\"))\n```\n### Invalid State And Error\n\nYou can display an error with a red border and add an error message.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Stack(\n    children=[\n        dmc.TimeInput(label=\"Enter Time:\", w=100, error=True),\n        dmc.TimeInput(\n            label=\"Enter Time:\",\n            w=150,\n            error=\"Enter a valid time\",\n            withSeconds=True,\n        ),\n    ],\n)\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n\n| Name        | Static selector                | Description                                      |\n|:------------|:-------------------------------|:-------------------------------------------------|\n| wrapper     | .mantine-TimeInput-wrapper     | Root element of the Input                        |\n| input       | .mantine-TimeInput-input       | Input element                                    |\n| section     | .mantine-TimeInput-section     | Left and right sections                          |\n| root        | .mantine-TimeInput-root        | Root element                                     |\n| label       | .mantine-TimeInput-label       | Label element                                    |\n| required    | .mantine-TimeInput-required    | Required asterisk element, rendered inside label |\n| description | .mantine-TimeInput-description | Description element                              |\n| error       | .mantine-TimeInput-error       | Error element                                    |\n\n\n### Keyword Arguments\n#### TimeInput\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- debounce (number | boolean; default False):\n    (boolean | number; default False): If True, changes to input will\n    be sent back to the Dash server only on enter or when losing\n    focus. If it's False, it will send the value back on every change.\n    If a number, it will not send anything back to the Dash server\n    until the user has stopped typing for that number of milliseconds.\n\n- description (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Description` component. If not set, description\n    is not rendered.\n\n- descriptionProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Description` component.\n\n- disabled (boolean; optional):\n    Sets `disabled` attribute on the `input` element.\n\n- error (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Error` component. If not set, error is not\n    rendered.\n\n- errorProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Error` component.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- inputProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input` component.\n\n- inputWrapperOrder (list of a value equal to: 'label', 'description', 'error', 'input's; optional):\n    Controls order of the elements, `['label', 'description', 'input',\n    'error']` by default.\n\n- label (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Label` component. If not set, label is not\n    rendered.\n\n- labelProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Label` component.\n\n- leftSection (a list of or a singular dash component, string or number; optional):\n    Content section rendered on the left side of the input.\n\n- leftSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'auto', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):\n    Sets `pointer-events` styles on the `leftSection` element,\n    `'none'` by default.\n\n- leftSectionProps (dict; optional):\n    Props passed down to the `leftSection` element.\n\n- leftSectionWidth (string | number; optional):\n    Left section width, used to set `width` of the section and input\n    `padding-left`, by default equals to the input height.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- maxTime (string; optional):\n    Maximum possible string time, if withSeconds is True, time should\n    be in format HH:mm:ss, otherwise HH:mm.\n\n- minTime (string; optional):\n    Minimum possible string time, if withSeconds is True, time should\n    be in format HH:mm:ss, otherwise HH:mm.\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- n_blur (number; default 0):\n    An integer that represents the number of times that this element\n    has lost focus.\n\n- n_submit (number; default 0):\n    An integer that represents the number of times that this element\n    has been submitted.\n\n- name (string; optional):\n    Name prop.\n\n- persisted_props (list of strings; optional):\n    Properties whose user interactions will persist after refreshing\n    the component or the page. Since only `value` is allowed this prop\n    can normally be ignored.\n\n- persistence (string | number | boolean; optional):\n    Used to allow user interactions in this component to be persisted\n    when the component - or the page - is refreshed. If `persisted` is\n    truthy and hasn't changed from its previous value, a `value` that\n    the user has changed while using the app will keep that change, as\n    long as the new `value` also matches what was given originally.\n    Used in conjunction with `persistence_type`. Note:  The component\n    must have an `id` for persistence to work.\n\n- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):\n    Where persisted user changes will be stored: memory: only kept in\n    memory, reset on page refresh. local: window.localStorage, data is\n    kept after the browser quit. session: window.sessionStorage, data\n    is cleared once the browser quit.\n\n- placeholder (string; optional):\n    Placeholder.\n\n- pointer (boolean; optional):\n    Determines whether the input should have `cursor: pointer` style,\n    `False` by default.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set\n    `border-radius`, numbers are converted to rem,\n    `theme.defaultRadius` by default.\n\n- readOnly (boolean; optional):\n    Readonly.\n\n- required (boolean; optional):\n    Adds required attribute to the input and a red asterisk on the\n    right side of label, `False` by default.\n\n- rightSection (a list of or a singular dash component, string or number; optional):\n    Content section rendered on the right side of the input.\n\n- rightSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'auto', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):\n    Sets `pointer-events` styles on the `rightSection` element,\n    `'none'` by default.\n\n- rightSectionProps (dict; optional):\n    Props passed down to the `rightSection` element.\n\n- rightSectionWidth (string | number; optional):\n    Right section width, used to set `width` of the section and input\n    `padding-right`, by default equals to the input height.\n\n- size (optional):\n    Controls input `height` and horizontal `padding`, `'sm'` by\n    default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- value (string; default ''):\n    Value for controlled component.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withAsterisk (boolean; optional):\n    Determines whether the required asterisk should be displayed.\n    Overrides `required` prop. Does not add required attribute to the\n    input. `False` by default.\n\n- withErrorStyles (boolean; optional):\n    Determines whether the input should have red border and red text\n    color when the `error` prop is set, `True` by default.\n\n- withSeconds (boolean; optional):\n    Determines whether seconds input should be rendered.\n\n- wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the root element."
  },
  {
    "name": "TimePicker",
    "description": "Use the TimeInput component to capture time input from user.",
    "endpoint": "/components/timepicker",
    "package": "dash_mantine_components",
    "category": "Date Pickers",
    "content": "\n\n## TimePicker  \nUse the TimeInput component to capture time input from user.  \nCategory: Date Pickers  \n\n### Usage\n\n`TimePicker` component is an alternative to [TimeInput](/components/timeinput) that offers more features, it supports \n24-hour and 12-hour formats, dropdown with hours, minutes and seconds, and more.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import callback, Input, Output\n\n\ncomponent = dmc.Group(\n    gap=50,\n    children=[\n        dmc.TimePicker(label=\"Enter a time\", id=\"timepicker-usage\"),\n        dmc.Text(id=\"out-timepicker\")\n    ],\n)\n\n@callback(\n    Output(\"out-timepicker\", \"children\"),\n    Input(\"timepicker-usage\", \"value\")\n)\ndef update(value):\n    return f\"You entered: {value}\"\n```\n### With callbacks\n\n`TimePicker` component value is a string in hh:mm:ss 24-hour format (for example 18:34:55). Empty string is used to\nrepresent no value. The `value` props is updated when the entered value is valid. The input value is considered valid\nin the following cases:\n\n- All inputs are empty. In this case the `value` will be  an empty string.\n- All inputs are filled. For example if `withSeconds` prop is set and the user entered 12:34:56, the value will be\n12:34:56. But if the user entered 12:34, `value` will not be updated because seconds value is missing.\n- If a complete, valid time has been entered, the value will update as the user changes any part of it (hours, minutes,\nor seconds). Each digit change will immediately reflect in the updated value.\n\n### Debounce\n\nTo control how often the input's value is updated while the user is typing, use the `debounce` prop:\n\n- Set `debounce=True` to update the value only when the user finishes typing and moves focus away (i.e. on blur).\n- Set `debounce=<milliseconds>` to update the value after a specified delay from the user's last keystroke. For example,\n`debounce=300` will wait 300 milliseconds after the user stops typing before updating the value.\n\n#### Example debounce=True\n```python\nimport dash_mantine_components as dmc\nfrom dash import callback, Input, Output\n\n\ncomponent = dmc.Group(\n    gap=50,\n    children=[\n        dmc.TimePicker(\n            label=\"Enter a time\",\n            debounce=True,\n            id=\"timepicker-debounce\"\n        ),\n        dmc.Text(id=\"out-timepicker-debounce\")\n    ],\n)\n\n@callback(\n    Output(\"out-timepicker-debounce\", \"children\"),\n    Input(\"timepicker-debounce\", \"value\")\n)\ndef update(value):\n    return f\"You entered: {value}\"\n```\n#### Example debounce=1000\n```python\nimport dash_mantine_components as dmc\nfrom dash import callback, Input, Output\n\n\ncomponent = dmc.Group(\n    gap=50,\n    children=[\n        dmc.TimePicker(\n            label=\"Enter a time\",\n            debounce=1000,\n            id=\"timepicker-debounce-ms\"\n        ),\n        dmc.Text(id=\"out-timepicker-debounce-ms\")\n    ],\n)\n\n@callback(\n    Output(\"out-timepicker-debounce-ms\", \"children\"),\n    Input(\"timepicker-debounce-ms\", \"value\")\n)\ndef update(value):\n    return f\"You entered: {value}\"\n```\n### With seconds\nSet `withSeconds` prop to enable seconds input. Note that if this prop is used, the value is not updated until all\ninputs are filled – it is not possible to enter only hours and minutes.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import callback, Input, Output\n\n\ncomponent = dmc.Group(\n    gap=50,\n    children=[\n        dmc.TimePicker(label=\"Enter a time\", withSeconds=True, id=\"timepicker-seconds\"),\n        dmc.Text(id=\"out-timepicker-seconds\")\n    ],\n)\n\n@callback(\n    Output(\"out-timepicker-seconds\", \"children\"),\n    Input(\"timepicker-seconds\", \"value\")\n)\ndef update(value):\n    return f\"You entered: {value}\"\n```\n### 12-hour format\nSet `format=\"12h\"` to use 12-hour format. Note that `value` is updated only when all inputs are filled including am/pm input.\n\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import callback, Input, Output\n\n\ncomponent = dmc.Group(\n    gap=50,\n    children=[\n        dmc.TimePicker(label=\"Enter a time\", format=\"12h\", id=\"timepicker-12\"),\n        dmc.Text(id=\"out-timepicker-12\")\n    ],\n)\n\n@callback(\n    Output(\"out-timepicker-12\", \"children\"),\n    Input(\"timepicker-12\", \"value\")\n)\ndef update(value):\n    return f\"You entered: {value}\"\n```\n### Change am/pm labels\nTo change am/pm labels use `amPmLabels` prop. Example of changing labels to Hindi:\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent =  dmc.TimePicker(\n    label=\"Enter a time\",\n    format=\"12h\",\n    amPmLabels={\"am\": 'पूर्वाह्न', \"pm\": 'अपराह्न'}\n)\n```\n### Min and max values\nSet `min` and `max` props to limit available time range:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent =  dmc.TimePicker(\n    label=\"Enter a time between 10:00 and 18:30\",\n    min=\"10:00\",\n    max=\"18:30\"\n)\n```\n### With dropdown\nSet `withDropdown` prop to display the dropdown with hours, minutes, seconds and am/pm selects. By default,\nthe dropdown is visible when one of the inputs is focused.\n\n```python\nimport dash_mantine_components as dmc\n\n\ncomponent = dmc.Group(\n    gap=50,\n    mb=60,\n    children=[\n        dmc.TimePicker(\n            label=\"Enter time (24h format)\",\n            withSeconds=True,\n            withDropdown=True\n        ),\n        dmc.TimePicker(\n            label=\"Enter time (12h format)\",\n            withSeconds=True,\n            withDropdown=True,\n            format=\"12h\"\n        ),\n    ],\n)\n```\n### Hours/minutes/seconds step\nUse `hoursStep`, `minutesStep` and `secondsStep` props to control step for each input. These props are used to control\nvalue by which the input is incremented or decremented when up/down arrow keys are pressed and to generate corresponding\nvalues range in the dropdown.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent =  dmc.TimePicker(\n    label=\"Enter a time\",\n    withSeconds=True,\n    withDropdown=True,\n    hoursStep=1,\n    minutesStep=5,\n    secondsStep=10\n)\n```\n### Time presets\nYou can define time presets with `presets` prop. Presets are displayed in the dropdown and can be selected by clicking\non them. Time values for presets should be in hh:mm:ss or hh:mm 24-hour time format. Presets display value is generated\nbased on `format`, `amPmLabels` and `withSeconds` props.\n\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import callback, Input, Output\n\n\ncomponent = dmc.TimePicker(\n    label=\"Enter a time\",\n    format=\"12h\",\n    withDropdown=True,\n    presets=['11:30', '15:45', '18:00', '20:15', '22:30']\n)\n```\n### Time presets groups\nTo group presets use a list of dictionaries with label and values keys:\n\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import callback, Input, Output\n\n\ncomponent = dmc.TimePicker(\n    label=\"Enter a time\",\n    withDropdown=True,\n    maxDropdownContentHeight=300,\n    presets = [\n        {\"label\": 'Morning', \"values\": ['06:00:00', '08:00:00', '10:00:00']},\n        {\"label\": 'Afternoon', \"values\": ['12:00:00', '14:00:00', '16:00:00']},\n        {\"label\": 'Evening', \"values\": ['18:00:00', '20:00:00', '22:00:00']},\n    ],\n    mb=120,\n)\n```\n### Time presets range\nUse the `timeRangePresets` prop to generate a range of times. It accepts a dictionary with `startTime`,\n`endTime`, and `interval` keys, where all values are strings in `hh:mm:ss` format. This overrides any values provided \ndirectly in the `presets` prop.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import callback, Input, Output\n\n\ncomponent = dmc.TimePicker(\n    label=\"Enter a time\",\n    format=\"12h\",\n    withDropdown=True,\n    timeRangePresets={\"startTime\": \"06:00:00\", \"endTime\": \"18:00:00\", \"interval\": \"01:30:00\"}\n)\n```\n### Dropdown position\nBy default, the dropdown is displayed below the input if there is enough space; otherwise it is displayed above the \ninput. You can change this behavior by setting `position` and `middlewares` props, which are passed down to the\nunderlying `Popover` component.\n\nExample of dropdown that is always displayed above the input:\n\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import callback, Input, Output\n\n\ncomponent = dmc.TimePicker(\n    label=\"Enter a time\",\n    withDropdown=True,\n    popoverProps={\n        \"position\": 'top-start',\n        \"middlewares\": {\"flip\": False, \"shift\": False },\n      }\n)\n```\n### Dropdown width\nTo change dropdown width, set `width` prop in `popoverProps`. By default, dropdown width is adjusted to fit all content.\nExample of dropdown width set to the input width:\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import callback, Input, Output\n\n\ncomponent = dmc.TimePicker(\n    label=\"Enter a time\",\n    withDropdown=True,\n    withSeconds=True,\n    format=\"12h\",\n    popoverProps={\"width\": \"target\"}\n)\n```\n### Clearable\nSet `clearable` prop to display a clear button in the right section of the input. The clear button is visible when at\nleast one of the fields has value.\n\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import callback, Input, Output\n\n\ncomponent = dmc.TimePicker(\n    label=\"Enter a time\",\n    withDropdown=True,\n    withSeconds=True,\n    clearable=True,\n    value=\"12:30:00\"\n)\n```\n### Disabled\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import callback, Input, Output\n\n\ncomponent = dmc.TimePicker(\n    label=\"Enter a time\",\n    disabled=True\n)\n```\n### Read only\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import callback, Input, Output\n\n\ncomponent = dmc.TimePicker(\n    label=\"Enter a time\",\n    readOnly=True,\n    value=\"12:30:00\"\n)\n```\n### Input Props\n\nTimeInput supports all props from Input and InputWrapper components such as `radius`, `size`, `required`, etc.\n\n### Invalid State And Error\n\nYou can display an error with a red border and add an error message.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Stack(\n    children=[\n        dmc.TimePicker(label=\"Enter Time:\", w=100, error=True),\n        dmc.TimePicker(\n            label=\"Enter Time:\",\n            w=150,\n            error=\"Enter a valid time\",\n            withSeconds=True,\n        ),\n    ],\n)\n```\n### Accessibility\n\nSet aria labels for hours, minutes, seconds and am/pm inputs and clear button with corresponding props:\n```python\n    dmc.TimePicker(\n      hoursInputLabel=\"Hours\",\n      minutesInputLabel=\"Minutes\",\n      secondsInputLabel=\"Seconds\",\n      amPmInputLabel=\"AM/PM\",\n      clearButtonProps={{ 'aria-label': 'Clear time' }}\n    \n  )\n```\n\n### Keyboard Interactions\n\n\n| Key          | Description                              |\n| ------------ | ---------------------------------------- |\n| `ArrowDown`  | Decrements current value by step         |\n| `ArrowUp`    | Increments current value by step         |\n| `Home`       | Sets current value to min possible value |\n| `End`        | Sets current value to max possible value |\n| `Backspace`  | Clears current value                     |\n| `ArrowRight` | Moves focus to the next input            |\n| `ArrowLeft`  | Moves focus to the previous input        |\n\n\n\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n     \n\n\n#### TimePicker Selectors\n\n| Selector          | Static selector                         | Description                                                       |\n| ----------------- | --------------------------------------- | ----------------------------------------------------------------- |\n| wrapper           | `.mantine-TimePicker-wrapper`           | Root element of the Input                                         |\n| input             | `.mantine-TimePicker-input`             | Input element                                                     |\n| section           | `.mantine-TimePicker-section`           | Left and right sections                                           |\n| root              | `.mantine-TimePicker-root`              | Root element                                                      |\n| label             | `.mantine-TimePicker-label`             | Label element                                                     |\n| required          | `.mantine-TimePicker-required`          | Required asterisk element, rendered inside label                  |\n| description       | `.mantine-TimePicker-description`       | Description element                                               |\n| error             | `.mantine-TimePicker-error`             | Error element                                                     |\n| control           | `.mantine-TimePicker-control`           | Button in the dropdown used to select hours/minutes/seconds/am-pm |\n| controlsList      | `.mantine-TimePicker-controlsList`      | List of buttons for hours/minutes/seconds/am-pm                   |\n| controlsListGroup | `.mantine-TimePicker-controlsListGroup` | Group of `controlsList`s                                          |\n| dropdown          | `.mantine-TimePicker-dropdown`          | Popover dropdown                                                  |\n| fieldsRoot        | `.mantine-TimePicker-fieldsRoot`        | Wrapper for all `fieldsGroup` elements                            |\n| fieldsGroup       | `.mantine-TimePicker-fieldsGroup`       | Wrapper for hours/minutes/seconds/am-pm fields                    |\n| field             | `.mantine-TimePicker-field`             | Hours/minutes/seconds/am-pm input field                           |\n| presetControl     | `.mantine-TimePicker-presetControl`     | Time preset button                                                |\n| presetsGroup      | `.mantine-TimePicker-presetsGroup`      | Wraps preset controls and label                                   |\n| presetsGroupLabel | `.mantine-TimePicker-presetsGroupLabel` | Label of the preset group                                         |\n| presetsRoot       | `.mantine-TimePicker-presetsRoot`       | Wrapper for all presets content                                   |\n| scrollarea        | `.mantine-TimePicker-scrollarea`        | Scroll area in the dropdown                                       |\n\n\n#### TimePicker CSS Variables\n\n| Selector | Variable              | Description                             |\n| -------- | --------------------- | --------------------------------------- |\n| dropdown | `--control-font-size` | Controls font-size of dropdown controls |\n\n\n\n### Keyword Arguments\n#### TimePicker\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- amPmInputLabel (string; optional):\n    `aria-label` of am/pm input.\n\n- amPmLabels (dict; optional):\n    Labels used for am/pm values, `{ am: 'AM', pm: 'PM' }` by default.\n\n    `amPmLabels` is a dict with keys:\n\n- amPmSelectProps (boolean | number | string | dict | list; optional):\n    Props passed down to am/pm select.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- clearButtonProps (boolean | number | string | dict | list; optional):\n    Props passed down to clear button.\n\n- clearable (boolean; optional):\n    Determines whether the clear button should be displayed, `False`\n    by default.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- debounce (number | boolean; default False):\n    (boolean | number; default False): If True, changes to input will\n    be sent back to the Dash server only on enter or when losing\n    focus. If it's False, it will send the value back on every change.\n    If a number, it will not send anything back to the Dash server\n    until the user has stopped typing for that number of milliseconds.\n\n- defaultValue (string; optional):\n    Uncontrolled component default value.\n\n- description (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Description` component. If not set, description\n    is not rendered.\n\n- descriptionProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Description` component.\n\n- disabled (boolean; optional):\n    If set, the component becomes disabled.\n\n- error (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Error` component. If not set, error is not\n    rendered.\n\n- errorProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Error` component.\n\n- form (string; optional):\n    `form` prop passed down to the hidden input.\n\n- format (a value equal to: '12h', '24h'; optional):\n    Time format, `'24h'` by default.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- hiddenInputProps (boolean | number | string | dict | list; optional):\n    Props passed down to the hidden input.\n\n- hoursInputLabel (string; optional):\n    `aria-label` of hours input.\n\n- hoursInputProps (boolean | number | string | dict | list; optional):\n    Props passed down to hours input.\n\n- hoursStep (number; optional):\n    Number by which hours are incremented/decremented, `1` by default.\n\n- inputProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input` component.\n\n- inputWrapperOrder (list of a value equal to: 'label', 'description', 'error', 'input's; optional):\n    Controls order of the elements, `['label', 'description', 'input',\n    'error']` by default.\n\n- label (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Label` component. If not set, label is not\n    rendered.\n\n- labelProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Label` component.\n\n- leftSection (a list of or a singular dash component, string or number; optional):\n    Content section rendered on the left side of the input.\n\n- leftSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'auto', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):\n    Sets `pointer-events` styles on the `leftSection` element,\n    `'none'` by default.\n\n- leftSectionProps (dict; optional):\n    Props passed down to the `leftSection` element.\n\n- leftSectionWidth (string | number; optional):\n    Left section width, used to set `width` of the section and input\n    `padding-left`, by default equals to the input height.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- max (string; optional):\n    Max possible time value in `hh:mm:ss` format.\n\n- maxDropdownContentHeight (number; optional):\n    Maximum height of the content displayed in the dropdown in px,\n    `200` by default.\n\n- min (string; optional):\n    Min possible time value in `hh:mm:ss` format.\n\n- minutesInputLabel (string; optional):\n    `aria-label` of minutes input.\n\n- minutesInputProps (boolean | number | string | dict | list; optional):\n    Props passed down to minutes input.\n\n- minutesStep (number; optional):\n    Number by which minutes are incremented/decremented, `1` by\n    default.\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- n_blur (number; default 0):\n    An integer that represents the number of times that this element\n    has lost focus.\n\n- n_submit (number; default 0):\n    An integer that represents the number of times that this element\n    has been submitted.\n\n- name (string; optional):\n    `name` prop passed down to the hidden input.\n\n- pasteSplit (dict; optional):\n    A function to transform paste values, by default time in 24h\n    format can be parsed on paste for example `23:34:22`.\n\n    `pasteSplit` is a dict with keys:\n\n- persisted_props (list of strings; optional):\n    Properties whose user interactions will persist after refreshing\n    the component or the page. Since only `value` is allowed this prop\n    can normally be ignored.\n\n- persistence (string | number | boolean; optional):\n    Used to allow user interactions in this component to be persisted\n    when the component - or the page - is refreshed. If `persisted` is\n    truthy and hasn't changed from its previous value, a `value` that\n    the user has changed while using the app will keep that change, as\n    long as the new `value` also matches what was given originally.\n    Used in conjunction with `persistence_type`. Note:  The component\n    must have an `id` for persistence to work.\n\n- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):\n    Where persisted user changes will be stored: memory: only kept in\n    memory, reset on page refresh. local: window.localStorage, data is\n    kept after the browser quit. session: window.sessionStorage, data\n    is cleared once the browser quit.\n\n- placeholder (string; optional):\n    Placeholder.\n\n- pointer (boolean; optional):\n    Determines whether the input should have `cursor: pointer` style,\n    `False` by default.\n\n- popoverProps (dict; optional):\n    Props passed down to `Popover` component.\n\n    `popoverProps` is a dict with keys:\n\n- presets (list of strings; optional):\n    Time presets to display in the dropdown.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set\n    `border-radius`, numbers are converted to rem,\n    `theme.defaultRadius` by default.\n\n- readOnly (boolean; optional):\n    If set, the value cannot be updated.\n\n- required (boolean; optional):\n    Adds required attribute to the input and a red asterisk on the\n    right side of label, `False` by default.\n\n- reverseTimeControlsList (boolean; optional):\n    If set, the time controls list are reversed, default `False`.\n\n- rightSection (a list of or a singular dash component, string or number; optional):\n    Content section rendered on the right side of the input.\n\n- rightSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'auto', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):\n    Sets `pointer-events` styles on the `rightSection` element,\n    `'none'` by default.\n\n- rightSectionProps (dict; optional):\n    Props passed down to the `rightSection` element.\n\n- rightSectionWidth (string | number; optional):\n    Right section width, used to set `width` of the section and input\n    `padding-right`, by default equals to the input height.\n\n- scrollAreaProps (boolean | number | string | dict | list; optional):\n    Props passed down to all underlying `ScrollArea` components.\n\n- secondsInputLabel (string; optional):\n    `aria-label` of seconds input.\n\n- secondsInputProps (boolean | number | string | dict | list; optional):\n    Props passed down to seconds input.\n\n- secondsStep (number; optional):\n    Number by which seconds are incremented/decremented, `1` by\n    default.\n\n- size (optional):\n    Controls input `height` and horizontal `padding`, `'sm'` by\n    default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- timeRangePresets (dict; optional):\n    Generates a range of time values for the `presets` prop. Accepts a\n    dictionary with `startTime`, `endTime`, and `interval` keys, where\n    all values are strings in `hh:mm:ss` format. This overrides any\n    values provided directly in the `presets` prop.\n\n    `timeRangePresets` is a dict with keys:\n\n- value (string; default ''):\n    Value for controlled component.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withAsterisk (boolean; optional):\n    Determines whether the required asterisk should be displayed.\n    Overrides `required` prop. Does not add required attribute to the\n    input. `False` by default.\n\n- withDropdown (boolean; optional):\n    Determines whether the dropdown with time controls list should be\n    visible when the input has focus, `False` by default.\n\n- withErrorStyles (boolean; optional):\n    Determines whether the input should have red border and red text\n    color when the `error` prop is set, `True` by default.\n\n- withSeconds (boolean; optional):\n    Determines whether the seconds input should be displayed, `False`\n    by default.\n\n- wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the root element."
  },
  {
    "name": "YearPickerInput",
    "description": "Year, multiple years and years range picker input",
    "endpoint": "/components/yearpickerinput",
    "package": "dash_mantine_components",
    "category": "Date Pickers",
    "content": "\n\n## YearPickerInput  \nYear, multiple years and years range picker input  \nCategory: Date Pickers  \n\n### Simple Example\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.YearPickerInput(\n    label=\"Pick date\",\n    placeholder=\"Pick date\",\n)\n```\n### Multiple dates\n\nSet type=\"multiple\" to allow user to pick multiple months.  Note that `value` is a list.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.YearPickerInput(\n    type=\"multiple\",\n    label=\"Pick multiple dates\",\n    placeholder=\"Pick dates\",\n)\n```\n### Dates range\n\nSet type=\"range\" to allow user to pick dates range. Note that `value` is a list.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.YearPickerInput(\n    type=\"range\",\n    label=\"Pick dates range\",\n    placeholder=\"Pick dates range\",\n)\n```\n### Open picker in modal\n\nBy default, YearPickerInput is rendered inside Popover. You can change that to Modal by setting dropdownType=\"modal\"\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.YearPickerInput(\n    dropdownType=\"modal\",\n    label=\"Pick date (picker in modal)\",\n    placeholder=\"Pick date\",\n)\n```\n### Number of columns\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.YearPickerInput(\n    label=\"Pick date\", placeholder=\"Pick date\", numberOfColumns=2\n)\n```\n### Value format\n\nUse `valueFormat` property to change the format of the date displayed in the date input field.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.YearPickerInput(\n    valueFormat=\"YY\",\n    type=\"multiple\",\n    label=\"Pick month (Value Formatter)\",\n    placeholder=\"Pick month\",\n)\n```\nUse `valueFormat` prop to change [dayjs format](https://day.js.org/docs/en/display/format) of value label.\n\n### Clearable\n\nSet `clearable=True` prop to display clear button in the right section. Note that if you set `rightSection` prop, clear button will not be displayed.\n\n```python\nfrom datetime import datetime\n\nimport dash_mantine_components as dmc\n\ncomponent = dmc.YearPickerInput(\n    clearable=True,\n    value=datetime.now(),\n    label=\"Pick date (clearable)\",\n    placeholder=\"Pick Date\",\n)\n```\n### With Icon\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ncomponent = dmc.YearPickerInput(\n    leftSection=DashIconify(icon=\"fa:calendar\"),\n    leftSectionPointerEvents=\"none\",\n    label=\"Pick date\",\n    placeholder=\"Pick date\",\n)\n```\n### Min and Max date\n\n```python\nfrom datetime import datetime, timedelta\n\nimport dash_mantine_components as dmc\n\ncomponent = dmc.YearPickerInput(\n    minDate=datetime(2021, 1, 1),\n    maxDate=datetime(2028, 1, 1),\n    value=datetime(2021, 1, 1),\n    placeholder=\"Date input\",\n    label=\"Select valid date\",\n    w=250,\n)\n```\n### CSS Extensions\n\nAs of DMC 1.2.0, Date component styles are bundled automatically, so you no longer need to include a separate CSS file.\nIf you're using an older version of DMC, refer to the [migration guide](/migration) for instructions on including optional stylesheets.\n\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n#### YearPickerInput selectors\n\n| Selector                   | Static selector                                      | Description                                                           |\n| ---------------------------| ---------------------------------------------------- | --------------------------------------------------------------------- |\n| `wrapper`                  | `.mantine-YearPickerInput-wrapper`                   | Root element of the Input                                              |\n| `input`                    | `.mantine-YearPickerInput-input`                     | Input element                                                         |\n| `section`                  | `.mantine-YearPickerInput-section`                   | Left and right sections                                                |\n| `root`                     | `.mantine-YearPickerInput-root`                      | Root element                                                          |\n| `label`                    | `.mantine-YearPickerInput-label`                     | Label element                                                         |\n| `required`                 | `.mantine-YearPickerInput-required`                  | Required asterisk element, rendered inside label                       |\n| `description`              | `.mantine-YearPickerInput-description`               | Description element                                                    |\n| `error`                    | `.mantine-YearPickerInput-error`                     | Error element                                                         |\n| `calendarHeader`           | `.mantine-YearPickerInput-calendarHeader`            | Calendar header root element                                           |\n| `calendarHeaderControl`     | `.mantine-YearPickerInput-calendarHeaderControl`     | Previous/next calendar header controls                                 |\n| `calendarHeaderControlIcon` | `.mantine-YearPickerInput-calendarHeaderControlIcon` | Icon of previous/next calendar header controls                         |\n| `calendarHeaderLevel`       | `.mantine-YearPickerInput-calendarHeaderLevel`       | Level control (changes levels when clicked, month -> year -> decade)   |\n| `levelsGroup`              | `.mantine-YearPickerInput-levelsGroup`               | Group of decades levels                                                |\n| `yearsList`                | `.mantine-YearPickerInput-yearsList`                 | Years list table element                                               |\n| `yearsListRow`             | `.mantine-YearPickerInput-yearsListRow`              | Years list row element                                                 |\n| `yearsListCell`            | `.mantine-YearPickerInput-yearsListCell`             | Years list cell element                                                |\n| `yearsListControl`         | `.mantine-YearPickerInput-yearsListControl`          | Button used to pick months and years                                   |\n| `placeholder`              | `.mantine-YearPickerInput-placeholder`               | Placeholder element                                                    |\n\n#### YearPickerInput data attributes\n\n| Selector              | Attribute      | Condition                           | Value                              |\n| --------------------- | -------------- | ----------------------------------- | ---------------------------------- |\n| `calendarHeaderControl`| `data-direction`| –                                   | \"previous\" or \"next\" depending on the control type |\n| `calendarHeaderControl`| `data-disabled`| Control is disabled for any reason  | –                                  |\n\n\n### Keyword Arguments\n#### YearPickerInput\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- allowDeselect (boolean; optional):\n    Determines whether user can deselect the date by clicking on\n    selected item, applicable only when type=\"default\".\n\n- allowSingleDateInRange (boolean; optional):\n    Determines whether single year can be selected as range,\n    applicable only when type=\"range\".\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- ariaLabels (dict; optional):\n    aria-label attributes for controls on different levels.\n\n    `ariaLabels` is a dict with keys:\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- clearButtonProps (dict; optional):\n    Props passed down to clear button.\n\n    `clearButtonProps` is a dict with keys:\n\n- clearable (boolean; optional):\n    Determines whether input value can be cleared, adds clear button\n    to right section, False by default.\n\n- closeOnChange (boolean; optional):\n    Determines whether dropdown should be closed when date is\n    selected, not applicable when type=\"multiple\", True by default.\n\n- columnsToScroll (number; optional):\n    Number of columns to scroll when user clicks next/prev buttons,\n    defaults to numberOfColumns.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- debounce (number; default 0):\n    Debounce time in ms.\n\n- decadeLabelFormat (string; optional):\n    dayjs label format to display decade label or a function that\n    returns decade label based on date value, defaults to \"YYYY\".\n\n- defaultDate (string; optional):\n    Initial displayed date.\n\n- description (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Description` component. If not set, description\n    is not rendered.\n\n- descriptionProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Description` component.\n\n- disabled (boolean; optional):\n    Sets `disabled` attribute on the `input` element.\n\n- dropdownType (a value equal to: 'popover', 'modal'; optional):\n    Type of dropdown, defaults to popover.\n\n- error (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Error` component. If not set, error is not\n    rendered.\n\n- errorProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Error` component.\n\n- getYearControlProps (boolean | number | string | dict | list; optional):\n    A function that passes props down to year picker control based on\n    date. (See\n    https://www.dash-mantine-components.com/functions-as-props).\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- inputProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input` component.\n\n- inputWrapperOrder (list of a value equal to: 'label', 'description', 'error', 'input's; optional):\n    Controls order of the elements, `['label', 'description', 'input',\n    'error']` by default.\n\n- label (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Label` component. If not set, label is not\n    rendered.\n\n- labelProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Label` component.\n\n- labelSeparator (string; optional):\n    Separator between range value.\n\n- leftSection (a list of or a singular dash component, string or number; optional):\n    Content section rendered on the left side of the input.\n\n- leftSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'auto', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):\n    Sets `pointer-events` styles on the `leftSection` element,\n    `'none'` by default.\n\n- leftSectionProps (dict; optional):\n    Props passed down to the `leftSection` element.\n\n- leftSectionWidth (string | number; optional):\n    Left section width, used to set `width` of the section and input\n    `padding-left`, by default equals to the input height.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- maxDate (string; optional):\n    Maximum possible date.\n\n- minDate (string; optional):\n    Minimum possible date.\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- modalProps (dict; optional):\n    Props passed down to Modal component.\n\n    `modalProps` is a dict with keys:\n\n- n_submit (number; default 0):\n    An integer that represents the number of times that this element\n    has been submitted.\n\n- name (string; optional):\n    Name prop.\n\n- numberOfColumns (number; optional):\n    Number of columns to render next to each other.\n\n- persisted_props (list of strings; optional):\n    Properties whose user interactions will persist after refreshing\n    the component or the page. Since only `value` is allowed this prop\n    can normally be ignored.\n\n- persistence (string | number | boolean; optional):\n    Used to allow user interactions in this component to be persisted\n    when the component - or the page - is refreshed. If `persisted` is\n    truthy and hasn't changed from its previous value, a `value` that\n    the user has changed while using the app will keep that change, as\n    long as the new `value` also matches what was given originally.\n    Used in conjunction with `persistence_type`. Note:  The component\n    must have an `id` for persistence to work.\n\n- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):\n    Where persisted user changes will be stored: memory: only kept in\n    memory, reset on page refresh. local: window.localStorage, data is\n    kept after the browser quit. session: window.sessionStorage, data\n    is cleared once the browser quit.\n\n- placeholder (string; optional):\n    Input placeholder.\n\n- pointer (boolean; optional):\n    Determines whether the input should have `cursor: pointer` style,\n    `False` by default.\n\n- popoverProps (dict; optional):\n    Props passed down to Popover component.\n\n    `popoverProps` is a dict with keys:\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set\n    `border-radius`, numbers are converted to rem,\n    `theme.defaultRadius` by default.\n\n- readOnly (boolean; optional):\n    Determines whether the user can modify the value.\n\n- required (boolean; optional):\n    Adds required attribute to the input and a red asterisk on the\n    right side of label, `False` by default.\n\n- rightSection (a list of or a singular dash component, string or number; optional):\n    Content section rendered on the right side of the input.\n\n- rightSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'auto', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):\n    Sets `pointer-events` styles on the `rightSection` element,\n    `'none'` by default.\n\n- rightSectionProps (dict; optional):\n    Props passed down to the `rightSection` element.\n\n- rightSectionWidth (string | number; optional):\n    Right section width, used to set `width` of the section and input\n    `padding-right`, by default equals to the input height.\n\n- size (a value equal to: 'xs', 'sm', 'md', 'lg', 'xl'; optional):\n    Component size.\n\n- sortDates (boolean; optional):\n    Determines whether dates value should be sorted before onChange\n    call, only applicable when type=\"multiple\", True by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- type (a value equal to: 'default', 'multiple', 'range'; optional):\n    Picker type: range, multiple or default.\n\n- value (string | list of strings; optional):\n    Value for controlled component.\n\n- valueFormat (string; optional):\n    Dayjs format to display input value, \"MMMM D, YYYY\" by default.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withAsterisk (boolean; optional):\n    Determines whether the required asterisk should be displayed.\n    Overrides `required` prop. Does not add required attribute to the\n    input. `False` by default.\n\n- withCellSpacing (boolean; optional):\n    Determines whether controls should be separated by spacing, True\n    by default.\n\n- withErrorStyles (boolean; optional):\n    Determines whether the input should have red border and red text\n    color when the `error` prop is set, `True` by default.\n\n- wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the root element.\n\n- yearsListFormat (string; optional):\n    dayjs format for years list, `'YYYY'` by default."
  },
  {
    "name": "Alert",
    "description": "Use Alerts to attract user attention with static messages.",
    "endpoint": "/components/alert",
    "package": "dash_mantine_components",
    "category": "Feedback",
    "content": "\n\n## Alert  \nUse Alerts to attract user attention with static messages.  \nCategory: Feedback  \n\n### Introduction\n\n### Simple Example\n\nCreate an alert with the main message (`children`), the `title`, and the `color`.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Alert(\n    \"Something happened! You made a mistake and there is no going back, your data was lost forever!\",\n    title=\"Simple Alert!\",\n)\n```\n### Colors\n\n```python\nimport dash_mantine_components as dmc\n\nmessage = \"Something happened! You made a mistake and there is no going back!\"\n\ncomponent = dmc.Stack(\n    children=[\n        dmc.Alert(message, title=\"Primary\", color=\"blue\"),\n        dmc.Alert(message, title=\"Secondary\", color=\"gray\"),\n        dmc.Alert(message, title=\"Success!\", color=\"green\"),\n        dmc.Alert(message, title=\"Warning!\", color=\"yellow\"),\n        dmc.Alert(message, title=\"Danger!\", color=\"red\"),\n        dmc.Alert(message, title=\"Info\", color=\"violet\"),\n    ],\n)\n```\n### Dismissible Alerts\n\nThe alerts can be closed either programmatically by toggling the `hide` property or by clicking on the close button on the alert if enabled with `withCloseButton=True`.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html, Output, Input, State, callback\n\ncomponent = html.Div(\n    [\n        dmc.Alert(\n            \"Something terrible happened! You made a mistake and there is no going back, your data was lost forever! \",\n            title=\"Bummer!\",\n            id=\"alert-dismiss\",\n            color=\"red\",\n            withCloseButton=True,\n        ),\n        dmc.Button(\"Toggle alert\", id=\"alert-button\", mt=20),\n    ]\n)\n\n\n@callback(\n    Output(\"alert-dismiss\", \"hide\"),\n    Input(\"alert-button\", \"n_clicks\"),\n    State(\"alert-dismiss\", \"hide\"),\n    prevent_initial_call=True,\n)\ndef alert(n_clicks, hide):\n    return not hide\n```\n### Automatic Dismissal\n\nThe alerts can also be timed out using the `duration` prop which accepts time in milliseconds.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html, Output, Input, callback\n\ncomponent = html.Div(\n    [\n        dmc.Alert(\n            \"This alert will dismiss itself after 3 seconds! \",\n            title=\"Auto Dismissing Alert!\",\n            id=\"alert-auto\",\n            color=\"violet\",\n            duration=3000,\n        ),\n        dmc.Button(\"Show alert\", id=\"alert-auto-button\", mt=20),\n    ]\n)\n\n\n@callback(\n    Output(\"alert-auto\", \"hide\"),\n    Input(\"alert-auto-button\", \"n_clicks\"),\n    prevent_initial_call=True,\n)\ndef alert_auto(n_clicks):\n    return False\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n| Name        | Static selector            | Description                                   |\n|:------------|:---------------------------|:----------------------------------------------|\n| root        | .mantine-Alert-root        | Root element                                  |\n| wrapper     | .mantine-Alert-wrapper     | Wraps body and icon                           |\n| body        | .mantine-Alert-body        | Body element, wraps title and message         |\n| title       | .mantine-Alert-title       | Title element, contains label and icon        |\n| label       | .mantine-Alert-label       | Title label                                   |\n| message     | .mantine-Alert-message     | Alert message, defined by children            |\n| icon        | .mantine-Alert-icon        | Icon wrapper                                  |\n| closeButton | .mantine-Alert-closeButton | Close button, defined by withCloseButton prop |\n\n\n### Keyword Arguments\n#### Alert\n\n- children (a list of or a singular dash component, string or number; optional)\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- autoContrast (boolean; optional):\n    Determines whether text color with filled variant should depend on\n    `background-color`. If luminosity of the `color` prop is less than\n    `theme.luminosityThreshold`, then `theme.white` will be used for\n    text color, otherwise `theme.black`. Overrides\n    `theme.autoContrast`.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- closeButtonLabel (string; optional):\n    Close button `aria-label`.\n\n- color (optional):\n    Key of `theme.colors` or any valid CSS color, default value is\n    `theme.primaryColor`.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- duration (number; optional):\n    Duration in milliseconds after which the Alert dismisses itself.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- hide (boolean; default False):\n    Whether to hide the alert.\n\n- icon (a list of or a singular dash component, string or number; optional):\n    Icon displayed next to the title.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set border-radius,\n    `theme.defaultRadius` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- title (a list of or a singular dash component, string or number; optional):\n    Alert title.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withCloseButton (boolean; optional):\n    Determines whether close button should be displayed, `False` by\n    default."
  },
  {
    "name": "Loader",
    "description": "Use Loader component to show loading state to the user.",
    "endpoint": "/components/loader",
    "package": "dash_mantine_components",
    "category": "Feedback",
    "content": "\n\n## Loader  \nUse Loader component to show loading state to the user.  \nCategory: Feedback  \n\n### Introduction\n\n### Simple Usage\nLoader component supports 3 types of loaders: `oval`, `bars` and `dots` by default. All loaders are animated with CSS for better performance.\n\nBy default, Loader will be rendered with theme.primaryColor. A Loader can be customized with `color`, `size`, and\n`type` props.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Loader(color=\"red\", size=\"md\", type=\"oval\")\n```\n### Button Example\nIn this example, the loader is shown while the callback is running.   Note that the button is disabled automatically when `loading=True`\nSee more examples in the Button section.\n\nThis examples uses the [running](https://dash.plotly.com/advanced-callbacks#updating-component-properties-when-a-callback-is-running)\nargument in a callback and requires dash>=2.16.\n\n\n```python\nimport time\n\nimport dash_mantine_components as dmc\nfrom dash import html, Input, Output, callback\n\ncomponent = html.Div([\n    dmc.Button(\"Compute\", id=\"load-btn\", loaderProps={\"type\": \"dots\"} ),\n    dmc.Text(id=\"load-output\"),\n])\n\n\n@callback(\n    Output(\"load-output\", \"children\"),\n    Input(\"load-btn\", \"n_clicks\"),\n    running=[(Output(\"load-btn\", \"loading\"), True, False)],\n)\ndef long_compute(n):\n    time.sleep(2)\n    return \"Done \" + str(time.time())\n```\n### children prop\n\n`Loader` supports children prop. If you pass anything to children, it will be rendered instead of the loader. This is \nuseful when you want to control Loader representation in components that use loaderProps, for example `Button` or `LoadingOverlay`.\n\nSee an example in the [Loading Overlay](/components/loadingoverlay) section,\n\n\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n#### Loader selectors\n\n| Name        | Static selector      | Description                                      |\n|:------------|:---------------------|:-------------------------------------------------|\n| root        | .mantine-Loader-root | Root element                                     |\n\n\n#### Loader CSS Variables\n\n| Selector | Variable         | Description                                                         |\n|----------|------------------|---------------------------------------------------------------------|\n| root     | --loader-size    | Controls loader size (usually width and height, in some cases only width) |\n|          | --loader-color   | Controls loader color                                              |\n\n\n\n### Keyword Arguments\n#### Loader\n\n- children (a list of or a singular dash component, string or number; optional):\n    Overrides default loader with given content.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- color (optional):\n    Key of `theme.colors` or any valid CSS color, default value is\n    `theme.primaryColor`.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- size (number; optional):\n    Controls `width` and `height` of the loader. `Loader` has\n    predefined `xs`-`xl` values. Numbers are converted to rem. Default\n    value is `'md'`.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- type (a value equal to: 'bars', 'dots', 'oval'; optional):\n    Loader type, key of `loaders` prop, default value is `'oval'`.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`."
  },
  {
    "name": "LoadingOverlay",
    "description": "Use LoadingOverlay component to disable user interactions and indicate loading state.",
    "endpoint": "/components/loadingoverlay",
    "package": "dash_mantine_components",
    "category": "Feedback",
    "content": "\n\n## LoadingOverlay  \nUse LoadingOverlay component to disable user interactions and indicate loading state.  \nCategory: Feedback  \n\n### Simple Usage\n\n`LoadingOverlay` renders an overlay with a loader over the parent element with relative position.\nIt is usually used to indicate loading state of forms.\n\n`LoadingOverlay` rendering is controlled by `visible` prop:\n\n```python\nimport time\n\nimport dash_mantine_components as dmc\nfrom dash import Output, Input, no_update, callback, clientside_callback\nfrom dash_iconify import DashIconify\n\ncomponent = dmc.Box(\n    children=[\n        dmc.Stack(\n            pos=\"relative\",\n            p=5,\n            w=300,\n            children=[\n                dmc.LoadingOverlay(\n                    visible=False,\n                    id=\"loading-overlay\",\n                    overlayProps={\"radius\": \"sm\", \"blur\": 2},\n                    zIndex=10,\n                ),\n                dmc.TextInput(\n                    label=\"Username\",\n                    placeholder=\"Your username\",\n                    leftSection=DashIconify(icon=\"radix-icons:person\"),\n                    id=\"dummy-text-box\",\n                ),\n                dmc.TextInput(\n                    label=\"Password\",\n                    placeholder=\"Your password\",\n                    leftSection=DashIconify(icon=\"radix-icons:lock-closed\"),\n                ),\n                dmc.Checkbox(\n                    label=\"Remember me\",\n                    checked=True,\n                ),\n                dmc.Button(\n                    \"Login\", id=\"load-button\", variant=\"outline\", fullWidth=True\n                ),\n            ],\n        ),\n    ]\n)\n\nclientside_callback(\n    \"\"\"\n    function updateLoadingState(n_clicks) {\n        return true\n    }\n    \"\"\",\n    Output(\"loading-overlay\", \"visible\", allow_duplicate=True),\n    Input(\"load-button\", \"n_clicks\"),\n    prevent_initial_call=True,\n)\n\n\n@callback(\n    Output(\"dummy-text-box\", \"children\"),\n    Output(\"loading-overlay\", \"visible\"),\n    Input(\"load-button\", \"n_clicks\"),\n    prevent_initial_call=True,\n)\ndef update(n_clicks):\n    time.sleep(3)\n    return no_update, False\n```\n### Loader Props\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Box(\n    [\n        dmc.LoadingOverlay(\n            loaderProps={\"type\": \"bars\", \"color\": \"red\", \"size\": \"lg\"},\n            overlayProps={\"radius\": \"sm\", \"blur\": 2},\n            visible=True,\n            zIndex=10,\n        ),\n        dmc.BackgroundImage(\n            dmc.Box(h=200, w=100),\n            src=\"https://images.unsplash.com/photo-1419242902214-272b3f66ee7a?ixlib=rb-1.2.1&ixid\"\n            \"=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=720&q=80\",\n        ),\n    ],\n    pos=\"relative\",\n)\n```\n### Custom LoadingOverlay\n\n`loaderProps` (dict) - Supports a key of \"variant\" with values of oval, bars, dots or custom as in this example, also custom supports a children key as in this dmc.Image with a custom .gif loading screen.\n\n```python\nimport dash_mantine_components as dmc\nimport random\n\n# Generate random data for the BarChart\ndata = [\n    {\n        \"month\": month,\n        \"Smartphones\": random.randint(50, 300),\n        \"Laptops\": random.randint(30, 200),\n        \"Tablets\": random.randint(20, 150),\n    }\n    for month in [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\"]\n]\n\ncomponent = dmc.Box(\n    children=[\n        dmc.Stack(\n            pos=\"relative\",\n            p=10,\n            children=[\n                dmc.LoadingOverlay(\n                    visible=True,\n                    id=\"custom-loading-overlay\",\n                    zIndex=10,\n                    loaderProps={\n                        \"variant\": \"custom\",\n                        \"children\": dmc.Image(\n                            h=150,\n                            radius=\"md\",\n                            src=\"/assets/custom_loadingoverlay.gif\",\n                        ),\n                    },\n                    overlayProps={\"radius\": \"sm\", \"blur\": 2},\n                ),\n                dmc.BarChart(\n                    h=300,\n                    dataKey=\"month\",\n                    data=data,\n                    type=\"stacked\",\n                    series=[\n                        {\"name\": \"Smartphones\", \"color\": \"violet.6\"},\n                        {\"name\": \"Laptops\", \"color\": \"blue.6\"},\n                        {\"name\": \"Tablets\", \"color\": \"teal.6\"},\n                    ],\n                ),\n            ],\n        ),\n    ]\n)\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n| Name    | Static selector                 | Description         |\n|:--------|:--------------------------------|:--------------------|\n| root    | .mantine-LoadingOverlay-root    | Root element        |\n| overlay | .mantine-LoadingOverlay-overlay | `Overlay` component |\n| loader  | .mantine-LoadingOverlay-loader  | `Loader` component  |\n\n\n### Keyword Arguments\n#### LoadingOverlay\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loaderProps (dict; optional):\n    Props passed down to `Loader` component.\n\n    `loaderProps` is a dict with keys:\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- overlayProps (dict; optional):\n    Props passed down to `Overlay` component.\n\n    `overlayProps` is a dict with keys:\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- transitionProps (dict; optional):\n    Props passed down to `Transition` component, `{ transition:\n    'fade', duration: 0 }` by default.\n\n    `transitionProps` is a dict with keys:\n\n- variant (string; optional):\n    variant.\n\n- visible (boolean; optional):\n    Determines whether the overlay should be visible, `False` by\n    default.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- zIndex (string | number; optional):\n    Controls overlay `z-index`, `400` by default."
  },
  {
    "name": "Notification",
    "description": "DMC has an excellent Notifications System, which can be used to generate client side notifications.",
    "endpoint": "/components/notification",
    "package": "dash_mantine_components",
    "category": "Feedback",
    "content": "\n\n## Notification  \nDMC has an excellent Notifications System, which can be used to generate client side notifications.  \nCategory: Feedback  \n\n### New NotificationContainer\n\nAs of DMC v2.0.0, notifications are handled by a single component:  `NotificationContainer`.\n\nThis replaces the previous `NotificationProvider`   +  `Notification` approach with one that is more aligned with \nMantine's implementation.\n\n\n### Getting Started\n\nAdd `NotificationContainer` to your layout:\n\n```python\napp.layout = dmc.MantineProvider([\n    dmc.NotificationContainer(id=\"notification-container\"),\n    # other components...\n])\n```\n\n* `NotificationContainer` must be placed inside a `MantineProvider`.\n* You should have only one `NotificationContainer` in your app; multiple containers will cause notifications to be duplicated.\n* In multi-page apps, place `NotificationContainer` in the top-level `app.layout`, not inside individual pages.\n* It is no longer necessary to use a separate output container (such as `html.Div`) as in versions prior to 2.0.\n\n### Migration Guide\n\nThe following components are deprecated and will be removed in a future release:\n\n* `NotificationProvider`\n* `Notification`\n\nSee the [Notification Migration Guide](/migration-notifications) for help updating your app.\n\n\n### Show Notifications\n\nTo display a notification, use the `sendNotifications` prop on the `NotificationContainer`.\nIt accepts a list of dictionaries, where each dict represents a notification.\n\n```python\n\ndmc.NotificationContainer(\n    id=\"notification-container\",\n    sendNotifications=[{\n        \"action\": \"show\",\n        \"id\": \"my-id\",\n        \"message\": \"This is a notification\",\n        # other props like title, color, icon, etc.\n    }]\n)\n```\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import Output, Input, html, callback, no_update\nfrom dash_iconify import DashIconify\n\n\ncomponent = html.Div([\n    # Place one NotificationContainer in app.layout)\n    dmc.Button(\"Show Notification\", id=\"notification-show\")\n\n])\n\n@callback(\n    Output(\"notification-container\", \"sendNotifications\"),\n    Input(\"notification-show\", \"n_clicks\"),\n    prevent_initial_call=True,\n)\ndef show(n_clicks):\n    if n_clicks is None:\n        return no_update\n    return [dict(\n        title=\"Hey there!\",\n        id=\"show-notify\",\n        action=\"show\",\n        message=\"Notifications in Dash, Awesome!\",\n        icon=DashIconify(icon=\"ic:round-celebration\"),\n    )]\n```\n### Update Notifications\n\nTo update notifications that were previously shown or queued, set `action=\"update\"` and include the`id` of the notifications to update:\n\n```python\nsendNotifications = [{\n    \"action\": \"update\",\n    \"id\": \"my-id\",\n    \"message\": \"My updated notification message\",\n    # other props to update\n}]\n```\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import Output, Input, html, ctx, callback, no_update\nfrom dash_iconify import DashIconify\n\ncomponent = html.Div(\n    [\n        dmc.Group(\n            [\n                dmc.Button(\n                    \"Load Data\",\n                    id=\"show-notifications\",\n                    n_clicks=0\n                ),\n                dmc.Button(\n                    \"Update\",\n                    id=\"update-notifications\",\n                    n_clicks=0\n                ),\n            ],\n        ),\n    ],\n)\n\n\n@callback(\n    Output(\"notification-container\", \"sendNotifications\",  allow_duplicate=True,),\n    Input(\"show-notifications\", \"n_clicks\"),\n    Input(\"update-notifications\", \"n_clicks\"),\n    prevent_initial_call=True,\n)\ndef notify(n1, n2):\n    button_id = ctx.triggered_id\n    if n1 and n1 > 0:\n        if \"show\" in button_id:\n            return [dict(\n                id=\"my-load-notification\",\n                title=\"Process initiated\",\n                message=\"The process has started.\",\n                loading=True,\n                color=\"orange\",\n                action=\"show\",\n                autoClose=False,\n            )]\n    if n2 and n2 > 0:\n        if \"update\" in button_id:\n            return [dict(\n                id=\"my-load-notification\",\n                title=\"Data loaded\",\n                message=\"Notification closing in 2 seconds\",\n                color=\"green\",\n                loading=False,\n                action=\"update\",\n                autoClose=2000,\n                icon=DashIconify(icon=\"akar-icons:circle-check\"),\n            )]\n    return no_update\n```\n### sendNotifications prop\n\nEach dictionary in `sendNotifications` can include:\n\n* `id` – notification ID used to update or remove notifications. A random ID is generated if not provided.\n* `action` – one of `\"show\"`, or `\"update\"`\n  \n    * `\"show\"` – adds a new notification or queues it if the limit is reached\n    * `\"update\"` – updates a notification previously shown or queued\n* `message` – required notification body \n* `position` – notification position. If not provided, the default from `NotificationContainer` is used.\n* `withBorder` – whether the notification should have a border\n* `withCloseButton` – whether the close button is visible\n* `autoClose` – timeout in milliseconds to automatically close the notification. Set to `False` to disable.\n* `color` -Controls notification line or icon color, key of `theme.colors` or any valid CSS color, `theme.primaryColor` by default.\n* `icon` - Notification icon, replaces color line.\n* `title` - Notification title, displayed before body.\n* `radius` -  Key of `theme.radius` or any valid CSS value to set `border-radius`, `theme.defaultRadius` by default\n*  `loading`- Replaces colored line or icon with Loader component.\n*  `className`, `style`, `loading`\n\n\n### Notification Position\nYou can set position per-notification in the `sendNotifications` dictionary. \n```python\nsendNotifications = [\n  {\n    \"action\": \"show\",\n    \"id\": \"my-id\",\n    \"message\": \"Positioned top-left\",\n    \"position\": \"top-left\"\n  }\n]\n```\n\nValid position values:\n\n* `\"top-left\"`\n* `\"top-right\"`\n* `\"top-center\"`\n* `\"bottom-left\"`\n* `\"bottom-right\"`\n* `\"bottom-center\"`\n\n```python\nimport dash\nimport dash_mantine_components as dmc\nfrom dash import callback, Output, Input\n\npositions = ['top-left', 'top-right', 'bottom-left', 'bottom-right', 'top-center', 'bottom-center']\n\ncomponent =  dmc.RadioGroup(\n    children=dmc.Group([dmc.Radio(p, value=p) for p in positions], my=10),\n    label=\"Select Notification position\",\n    value=None,\n    id=\"notification-position\"\n)\n\n@callback(\n    Output(\"notification-container\", \"sendNotifications\", allow_duplicate=True),\n    Input(\"notification-position\", \"value\"),\n    prevent_initial_call=True,\n)\ndef notify(value):\n    if value:\n        return [dict(\n            title=f\"Notification {value}\",\n            autoClose=True,\n            action=\"show\",\n            message=\"Hello World\",\n            color=\"red\",\n            position=value,\n        )]\n    return dash.no_update\n```\nYou can also set a default position in the `NotificationContainer`. \n\n```python\napp.layout = dmc.MantineProvider([\n    dmc.NotificationContainer(position=\"top-right\", id=\"notification-container\"),\n])\n```\n\n### Limit and queue\n\nTo limit the number of notifications displayed at once, use the `limit` prop:\n\n```python\ndmc.NotificationContainer(limit=5)\n```\n\nNotifications beyond the limit are added to the queue and shown when others are dismissed.\n\n```python\nfrom dash import Output, Input, callback, ctx, no_update\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Button(\"Show 10 notifications\", id=\"notify-btn\", n_clicks=0),\n\n\n@callback(\n    Output(\"notification-container\", \"sendNotifications\", allow_duplicate=True),\n    Input(\"notify-btn\", \"n_clicks\"),\n    prevent_initial_call=True\n)\ndef queue_notifications(n):\n    if n > 0:\n        return [\n            {\n                \"action\": \"show\",\n                \"title\": f\"Notification {i + 1}\",\n                \"message\": \"Most notifications are added to queue\",\n                \"autoClose\": 3000,\n                \"withCloseButton\": True,\n            }\n            for i in range(10)\n        ]\n    return no_update\n```\n### Hide Notifications\n\nUse the `hideNotifications` prop to remove notifications by `id` from the state and queue.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import Output, Input, html, ctx, callback, no_update\n\ncomponent = html.Div(\n    [\n        dmc.NotificationContainer(id=\"notification-container\"),\n        dmc.Group(\n            [\n                dmc.Button(\n                    \"Show\",\n                    id=\"notifications-show\",\n                    n_clicks=0\n                ),\n                dmc.Button(\n                    \"Hide\",\n                    id=\"notifications-hide\",\n                    n_clicks=0\n                ),\n            ],\n        ),\n    ],\n)\n\n\n@callback(\n    Output(\"notification-container\", \"sendNotifications\", allow_duplicate=True),\n    Output(\"notification-container\", \"hideNotifications\"),\n    Input(\"notifications-show\", \"n_clicks\"),\n    Input(\"notifications-hide\", \"n_clicks\"),\n    prevent_initial_call=True,\n)\ndef notify(n1, n2):\n    button_id = ctx.triggered_id\n    if n1 > 0:\n        if \"show\" in button_id:\n            return [dict(\n                id=\"show-hide\",\n                action=\"show\",\n                message=\"Notification Message\",\n                color=\"Red\",\n                autoClose=False,\n            )], no_update\n    if n2 > 0:\n        if \"hide\" in button_id:\n            return no_update, [\"show-hide\"]\n    return no_update\n```\n### clean and cleanQueue\n\nUse `cleanQueue` to remove all queued notifications, and `clean` to remove all notifications from both state and queue.\n\n```python\nfrom dash import callback, Input, Output, no_update\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Group(\n    justify=\"center\",\n    children=[\n        dmc.Button(\"Show 10 notifications\", id=\"show-btn\", n_clicks=0),\n        dmc.Button(\"Clean queue\", id=\"clean-queue-btn\", variant=\"default\", n_clicks=0),\n        dmc.Button(\"Clean all\", id=\"clean-all-btn\", variant=\"outline\", color=\"red\", n_clicks=0),\n    ]\n)\n\n\n@callback(\n    Output(\"notification-container\", \"sendNotifications\", allow_duplicate=True),\n    Input(\"show-btn\", \"n_clicks\"),\n    prevent_initial_call=True\n)\ndef show_notifications(n):\n    return [\n        {\n            \"action\": \"show\",\n            \"title\": f\"Notification {i + 1}\",\n            \"message\": \"Most notifications are added to queue\",\n            \"autoClose\": False,\n        }\n        for i in range(10)\n    ]\n\n\n@callback(\n    Output(\"notification-container\", \"cleanQueue\"),\n    Input(\"clean-queue-btn\", \"n_clicks\"),\n    prevent_initial_call=True\n)\ndef clean_queue(n):\n    if n > 0:\n        return True\n    return no_update\n\n\n@callback(\n    Output(\"notification-container\", \"clean\"),\n    Input(\"clean-all-btn\", \"n_clicks\"),\n    prevent_initial_call=True\n)\ndef clean_all(n):\n    if n > 0:\n        return True\n    return no_update\n```\n### autoClose\n\n```python\nfrom dash import Input, Output, callback, no_update\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Group(\n    justify=\"center\",\n    children=[\n        dmc.Button(\"Closes in 4 seconds\", id=\"default-close-btn\", n_clicks=0),\n        dmc.Button(\"Closes in 500ms\", id=\"short-close-btn\", n_clicks=0),\n        dmc.Button(\"Never closes automatically\", id=\"no-autoclose-btn\", n_clicks=0),\n      #  dmc.NotificationsContainer(id=\"notification-container\"),\n    ]\n)\n\n\n@callback(\n    Output(\"notification-container\", \"sendNotifications\", allow_duplicate=True),\n    Input(\"default-close-btn\", \"n_clicks\"),\n    prevent_initial_call=True\n)\ndef short_notification(n):\n    if n > 0:\n        return [{\n            \"action\": \"show\",\n            \"message\": \"I will close in 4 seconds (the default auto close)\",\n\n        }]\n    return no_update\n\n@callback(\n    Output(\"notification-container\", \"sendNotifications\", allow_duplicate=True),\n    Input(\"short-close-btn\", \"n_clicks\"),\n    prevent_initial_call=True\n)\ndef short_notification(n):\n    if n > 0:\n        return [{\n            \"action\": \"show\",\n            \"message\": \"I will close in 500ms\",\n            \"autoClose\": 500,\n        }]\n    return no_update\n\n\n@callback(\n    Output(\"notification-container\", \"sendNotifications\", allow_duplicate=True),\n    Input(\"no-autoclose-btn\", \"n_clicks\"),\n    prevent_initial_call=True\n)\ndef sticky_notification(n):\n    if n > 0:\n        return [{\n            \"action\": \"show\",\n            \"title\": \"I will never close\",\n            \"message\": \"unless you click X\",\n            \"color\": \"blue\",\n            \"autoClose\": False,\n            \"style\": {\"marginBottom\": 20}\n        }]\n    return no_update\n```\n### Use in Clientside Callbacks\n\n`NotificationContainer` exposes the underlying Mantine notifications API globally in JavaScript. You can access this\nin clientside callbacks using:\n\n```js\ndash_mantine_components.appNotifications\n```\n\nYou can use the the full [Mantine notifications API](https://mantine.dev/x/notifications/):\n\n- Show: `appNotifications.api.show({...})`\n\n- Update: `appNotifications.api.update({...})`\n\n- Hide: `appNotifications.api.hide(\"id\")`\n\n- Clean: `appNotifications.api.clean()`\n\n- Clean queue: `appNotifications.api.cleanQueue()`\n\n- View state: `appNotifications.store`\n\n\nThe example below demonstrates how to:\n\n* Show a notification from a clientside callback\n* Display the notification store in a `html.Pre` component\n* Clean all notifications on the client\n\n```python\nfrom dash import Dash, html, clientside_callback, Input, Output\nimport dash_mantine_components as dmc\n\n\ncomponent = html.Div([\n        dmc.Group([\n            dmc.Button(\"Show Notification\", id=\"api-show\"),\n            dmc.Button(\"Clean\", id=\"api-clean\", variant=\"outline\", color=\"red\"),\n            dmc.Button(\"View Store\", id=\"fetch-notification-store\", variant=\"default\"),\n        ]),\n        html.Pre(id=\"notification-store\", style={\"whiteSpace\": \"pre-wrap\", \"padding\": \"10px\"}),\n\n])\n\nclientside_callback(\n    \"\"\"(n) => {\n        if (n > 0) {\n            dash_mantine_components.appNotifications.api.show({\n                title: \"Client-side Notification\",\n                message: \"Triggered from clientside callback\",\n                color: \"blue\",\n                autoClose: false\n            });\n        }\n        return 0;\n    }\"\"\",\n    Output(\"api-show\", \"n_clicks\"),\n    Input(\"api-show\", \"n_clicks\"),\n    prevent_initial_call=True\n)\n\nclientside_callback(\n    \"\"\"() => {\n        dash_mantine_components.appNotifications.api.clean()\n        return null;\n    }\"\"\",\n    Output(\"api-clean\", \"n_clicks\"),\n    Input(\"api-clean\", \"n_clicks\"),\n    prevent_initial_call=True\n)\n\nclientside_callback(\n    \"\"\"() => {\n        return JSON.stringify(dash_mantine_components.appNotifications.store, null, 2)\n    }\"\"\",\n    Output(\"notification-store\", \"children\"),\n    Input(\"fetch-notification-store\", \"n_clicks\"),\n    prevent_initial_call=True\n)\n```\n### Notifications in Multi Page apps\n\nIn multi-page apps, define `NotificationContainer` in `app.layout`—even if notifications are triggered from other pages.\n\nThis ensures the container is always mounted and available, preventing errors when navigating between pages while notifications are active.\n\n### CSS Extensions\n\n\nAs of DMC 1.2.0, Notification component styles are bundled automatically, so you no longer need to include a separate CSS file.\nIf you're using an older version of DMC, refer to the [migration guide](/migration) for instructions on including optional stylesheets.\n\n\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n\n\n#### Notification Selectors\n\n\n| Selector    | Static Selector                     | Description                                            |\n| ----------- | ----------------------------------- | ------------------------------------------------------ |\n| root        | `.mantine-Notification-root`        | Root element                                           |\n| loader      | `.mantine-Notification-loader`      | Loader component, displayed only when `loading` is set |\n| icon        | `.mantine-Notification-icon`        | Icon component, displayed only when `icon` is set      |\n| body        | `.mantine-Notification-body`        | Notification body, contains all other elements         |\n| title       | `.mantine-Notification-title`       | Title element, displayed only when `title` is set      |\n| description | `.mantine-Notification-description` | Description displayed below the title                  |\n| closeButton | `.mantine-Notification-closeButton` | Close button element                                   |\n\n\n\n#### Notification CSS Variables\n\n| Selector | Variable                | Description                                    |\n| -------- | ----------------------- | ---------------------------------------------- |\n| root     | `--notification-radius` | Controls border-radius                         |\n| root     | `--notification-color`  | Controls icon color or notification line color |\n\n\n\n#### Notification Data Attributes\n\n| Selector    | Attribute          | Condition                |\n| ----------- | ------------------ | ------------------------ |\n| root        | `data-with-icon`   | `icon` prop is set       |\n| root        | `data-with-border` | `withBorder` prop is set |\n| description | `data-with-title`  | `title` prop is set      |\n\n\n\n\n#### Notifications Selectors\n| Selector      | Static Selector                         | Description                                      |\n|--------------|--------------------------------------|--------------------------------------------------|\n| `root`       | `.mantine-Notifications-root`      | Notifications container, contains all notifications |\n| `notification` | `.mantine-Notifications-notification` | Single notification |\n\n#### Notifications CSS Variables\n| Selector | Variable | Description |\n|----------|----------|-------------|\n| `root`   | `--notifications-container-width` | Controls notifications container max-width |\n| `root`   | `--notifications-z-index` | Controls notifications container z-index |\n\n\n\n### Keyword Arguments\n#### NotificationContainer\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- autoClose (number | boolean; optional):\n    Auto close timeout for all notifications in ms, `False` to disable\n    auto close, can be overwritten for individual notifications in\n    `notifications.show` function, `4000` by defualt.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- clean (boolean; optional):\n    Notifications API: removes all notifications from the\n    notifications state and queue.\n\n- cleanQueue (boolean; optional):\n    Notifications API: removes all notifications from the queue.\n\n- containerWidth (string | number; optional):\n    Notification width, cannot exceed 100%, `440` by default.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- hideNotifications (list of strings; optional):\n    Notifications (ids) to be removed  from state or queue.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- limit (number; optional):\n    Maximum number of notifications displayed at a time, other new\n    notifications will be added to queue, `5` by default.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- notificationMaxHeight (string | number; optional):\n    Notification `max-height`, used for transitions, `200` by default.\n\n- portalProps (dict; optional):\n    Props to pass down to the Portal when withinPortal is True.\n\n- position (a value equal to: 'top-left', 'top-right', 'bottom-left', 'bottom-right', 'top-center', 'bottom-center'; optional):\n    Notifications position, `'bottom-right'` by default.\n\n- sendNotifications (list of dicts; optional):\n    Notifications to show or update.\n\n    `sendNotifications` is a list of dicts with keys:\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- transitionDuration (number; optional):\n    Notification transition duration in ms, `250` by default.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withinPortal (boolean; optional):\n    Determines whether notifications container should be rendered\n    inside `Portal`, `True` by default.\n\n- zIndex (string | number; optional):\n    Notifications container z-index, `400` by default."
  },
  {
    "name": "Overlay",
    "description": "Overlays parent element with div element with any color and opacity",
    "endpoint": "/components/overlay",
    "package": "dash_mantine_components",
    "category": "Feedback",
    "content": "\n\n## Overlay  \nOverlays parent element with div element with any color and opacity  \nCategory: Feedback  \n\n### Usage\n\n`Overlay` takes 100% width and height of its parent container by default. When the `fixed=True` prop is set, it takes 100%\nwidth and height of the viewport instead.\n\nSet `color` and `backgroundOpacity` props to change `Overlay` background-color.\nNote that `backgroundOpacity` prop does not change CSS opacity property, it changes background-color. For example, \nif you set `color=\"#000\"` and `backgroundOpacity={0.85}` background-color will be `rgba(0, 0, 0, 0.85)`:\n\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import Dash, Input, Output, callback, html\n\n\ncomponent = dmc.Stack([\n        dmc.AspectRatio(\n            ratio=16/9,\n            maw=400,\n            mx=\"auto\",\n            pos=\"relative\",\n            children=[\n                html.Img(\n                    src=\"https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-1.png\",\n                    alt=\"Demo\",\n                ),\n                dmc.Overlay(\n                    id=\"overlay-usage\",\n                    color=\"#000\",\n                    backgroundOpacity=0.85,\n                    style={\"display\": \"block\"}  # Initially visible\n                )\n            ]\n        ),\n        dmc.Button(\n            \"Toggle overlay\",\n            id=\"overlay-toggle-button\",\n            mx=\"auto\",\n            mt=\"lg\",\n            n_clicks=0\n        )\n    ])\n\n\n@callback(\n    Output(\"overlay-usage\", \"style\"),\n    Input(\"overlay-toggle-button\", \"n_clicks\")\n)\ndef toggle_overlay(n_clicks):\n    if n_clicks %2 == 0:\n        return {\"display\": \"block\"}\n    return {\"display\": \"none\"}\n```\n### Gradient\nSet `gradient` prop to use `background-image` instead of `background-color`. When `gradient` prop is set, `color`\nand `backgroundOpacity` props are ignored.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import Dash, Input, Output, callback, html\n\n\ncomponent = dmc.Stack([\n        dmc.AspectRatio(\n            ratio=16/9,\n            maw=400,\n            mx=\"auto\",\n            pos=\"relative\",\n            children=[\n                html.Img(\n                    src=\"https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-7.png\",\n                    alt=\"Demo\",\n                ),\n                dmc.Overlay(\n                    id=\"overlay-gradient\",\n                    gradient=\"linear-gradient(145deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0) 100%)\",\n                    opacity=0.85,\n                    style={\"display\": \"block\"}  # Initially visible\n                )\n            ]\n        ),\n        dmc.Button(\n            \"Toggle overlay\",\n            id=\"overlay-toggle-button-gradient\",\n            mx=\"auto\",\n            mt=\"lg\",\n            n_clicks=0\n        )\n    ])\n\n\n@callback(\n    Output(\"overlay-gradient\", \"style\"),\n    Input(\"overlay-toggle-button-gradient\", \"n_clicks\")\n)\ndef toggle_overlay(n_clicks):\n    if n_clicks %2 == 0:\n        return {\"display\": \"block\"}\n    return {\"display\": \"none\"}\n```\n### Blur\nSet `blur` prop to add `backdrop-filter: blur({value})` styles. Note that `backdrop-filter` is not supported in all browsers.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import Dash, Input, Output, callback, html\n\n\ncomponent = dmc.Stack([\n        dmc.AspectRatio(\n            ratio=16/9,\n            maw=400,\n            mx=\"auto\",\n            pos=\"relative\",\n            children=[\n                html.Img(\n                    src=\"https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-1.png\",\n                    alt=\"Demo\",\n                ),\n                dmc.Overlay(\n                    id=\"overlay-blur\",\n                    color=\"#000\",\n                    backgroundOpacity=0.35,\n                    blur=0\n                )\n            ]\n        ),\n        dmc.Text(\"Set Blur:\"),\n        dmc.Slider(\n           id=\"overlay-blur-slider\",\n            min=0, max=15, value=5\n        )\n    ])\n\n\n@callback(\n    Output(\"overlay-blur\", \"blur\"),\n    Input(\"overlay-blur-slider\", \"value\")\n)\ndef toggle_overlay(v):\n    return v\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\nHere’s your content formatted as Markdown tables:\n\n#### Overlay selectors\n\n| Selector | Static selector       | Description  |\n| -------- | --------------------- | ------------ |\n| root     | `.mantine-Overlay-root` | Root element |\n\n---\n\n#### Overlay CSS variables\n\n| Selector | Variable          | Description               |\n| -------- | ----------------- | ------------------------- |\n| root     | `--overlay-bg`      | Controls background-color |\n| root     | `--overlay-filter`  | Controls backdrop-filter  |\n| root     | `--overlay-radius`  | Controls border-radius    |\n| root     | `--overlay-z-index` | Controls z-index          |\n\n---\n\n#### Overlay data attributes\n\n| Selector | Attribute   | Condition          |\n| -------- | ----------- | ------------------ |\n| root     | `data-center` | center prop is set |\n| root     | `data-fixed`  | fixed prop is set  |\n\nDo you want me to keep this as three separate tables (like above), or merge them into one big table with a \"Type\" column (`Selector / CSS variable / Data attribute`) for easier scanning?\n\n\n\n### Keyword Arguments\n#### Overlay\n\n- children (a list of or a singular dash component, string or number; optional):\n    Content inside overlay.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- backgroundOpacity (number; optional):\n    Controls overlay `background-color` opacity 0–1, disregarded when\n    `gradient` prop is set, `0.6` by default.\n\n- blur (string | number; optional):\n    Overlay background blur, `0` by default.\n\n- center (boolean; optional):\n    Determines whether content inside overlay should be vertically and\n    horizontally centered, `False` by default.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- color (optional):\n    Overlay `background-color`, `#000` by default.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- fixed (boolean; optional):\n    Determines whether overlay should have fixed position instead of\n    absolute, `False` by default.\n\n- gradient (string; optional):\n    Changes overlay to gradient. If set, `color` prop is ignored.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set border-radius,\n    `0` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- zIndex (string | number; optional):\n    Overlay z-index, `200` by default."
  },
  {
    "name": "Progress",
    "description": "Use the Progress component to give feedback to the user about the status of a task with label, sections, etc.",
    "endpoint": "/components/progress",
    "package": "dash_mantine_components",
    "category": "Feedback",
    "content": "\n\n## Progress  \nUse the Progress component to give feedback to the user about the status of a task with label, sections, etc.  \nCategory: Feedback  \n\n### Introduction\n\n### Simple Example\n\nProgress component has one required prop: `value` - filled bar width in %. You can change bar color by passing `color`\nprop (by default theme.primaryColor will be used).\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Progress(value=26, color=\"pink\")\n```\n### Size\n\n`size` controls progress bar height. Progress has predefined sizes: xs, sm, etc.\nAlternatively, you can use a number to set height in px.\n\n```python\nimport dash_mantine_components as dmc\n\ndmc.Progress(size=\"sm\")\n\ndmc.Progress(size=20)\n```\n\n### Radius\n\nRadius controls border-radius of body and filled part.\n\n```python\nimport dash_mantine_components as dmc\n\ndmc.Progress(radius=\"lg\")\n\ndmc.Progress(radius=10)\n```\n\n### Multiple sections\n\nMultiple sections can be displayed instead of just one single bar.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.ProgressRoot(\n    [\n        dmc.ProgressSection(dmc.ProgressLabel(\"Documents\"), value=33, color=\"cyan\"),\n        dmc.ProgressSection(dmc.ProgressLabel(\"Photos\"), value=28, color=\"pink\"),\n        dmc.ProgressSection(dmc.ProgressLabel(\"Others\"), value=15, color=\"orange\"),\n    ],\n    size=\"xl\",\n)\n```\n### Vertical orientation\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Group([\n    dmc.Progress(value=80, orientation=\"vertical\", h=200),\n\n    dmc.Progress(\n        value=60,\n        color=\"orange\",\n        size=\"xl\",\n        orientation=\"vertical\",\n        h=200,\n        animated=True\n    ),\n\n    dmc.ProgressRoot(\n        size=\"xl\",\n        autoContrast=True,\n        orientation=\"vertical\",\n        h=200,\n        children=[\n            dmc.ProgressSection(\n                value=40,\n                color=\"lime.4\",\n                children=dmc.ProgressLabel(\"Documents\")\n            ),\n            dmc.ProgressSection(\n                value=20,\n                color=\"yellow.4\",\n                children=dmc.ProgressLabel(\"Apps\")\n            ),\n            dmc.ProgressSection(\n                value=20,\n                color=\"cyan.7\",\n                children=dmc.ProgressLabel(\"Other\")\n            )\n        ]\n    )\n])\n```\n### With Tooltip\n\nUse the [Tooltip target](/components/tooltip#target) prop rather than using `ProgressSection` as Tooltip children.\n\n\n```python\nimport dash_mantine_components as dmc\n\n\ncomponent = dmc.Box(\n    [\n        dmc.ProgressRoot(\n            [\n                dmc.ProgressSection(\n                    dmc.ProgressLabel(\"Documents\"),\n                    value=33,\n                    color=\"cyan\",\n                    id=\"progress-section1\",\n                ),\n                dmc.ProgressSection(\n                    dmc.ProgressLabel(\"Photos\"),\n                    value=28,\n                    color=\"pink\",\n                    id=\"progress-section2\",\n                ),\n                dmc.ProgressSection(\n                    dmc.ProgressLabel(\"Others\"),\n                    value=15,\n                    color=\"orange\",\n                    id=\"progress-section3\",\n                ),\n            ],\n            size=\"40\",\n        ),\n        dmc.Tooltip(\n            target=\"#progress-section1\",\n            label=\"Documents – 33Gb\",\n        ),\n        dmc.Tooltip(\n            target=\"#progress-section2\",\n            label=\"Photos – 28Gb\",\n        ),\n        dmc.Tooltip(\n            target=\"#progress-section3\",\n            label=\"Other – 15Gb\",\n        ),\n    ]\n)\n```\n### With FloatingTooltip\n\nWhen using `FloatingTooltips`  set `boxWrapperProps={'display': 'contents'}` for best results:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.ProgressRoot(\n    [\n        dmc.FloatingTooltip(\n            dmc.ProgressSection(\n                dmc.ProgressLabel(\"Documents\"),\n                value=33,\n                color=\"cyan\",\n            ),\n            label=\"Documents – 33Gb\",\n            boxWrapperProps={\"display\": \"contents\"},\n        ),\n        dmc.FloatingTooltip(\n            dmc.ProgressSection(\n                dmc.ProgressLabel(\"Photos\"),\n                value=28,\n                color=\"pink\",\n            ),\n            label=\"Photos – 28Gb\",\n            boxWrapperProps={\"display\": \"contents\"},\n        ),\n        dmc.FloatingTooltip(\n            dmc.ProgressSection(\n                dmc.ProgressLabel(\"Other\"),\n                value=25,\n                color=\"orange\",\n            ),\n            label=\"Other – 15Gb\",\n            boxWrapperProps={\"display\": \"contents\"},\n        ),\n    ],\n    size=40,\n)\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n#### Progress selectors\n\n| Selector | Static selector | Description |\n|----------|----------------|-------------|\n| root | `.mantine-Progress-root` | Root element |\n| section | `.mantine-Progress-section` | `Progress.Section` root element |\n| label | `.mantine-Progress-label` | `Progress.Label` root element |\n\n#### Progress CSS variables\n\n| Selector | Variable | Description |\n|----------|----------|-------------|\n| root | `--progress-radius` | Controls `border-radius` of track and sections |\n| root | `--progress-size` | Controls height of progress bar |\n| root | `--progress-transition-duration` | Controls width `transition-duration` of progress bar |\n\n#### Progress data attributes\n\n| Selector | Attribute | Condition |\n|----------|-----------|-----------|\n| section | `data-striped` | `striped` or `animated` props are set |\n| section | `data-animated` | `animated` prop is set |\n\n\n\n### Keyword Arguments\n#### Progress\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- animated (boolean; optional):\n    Determines whether the sections stripes should be animated, if\n    set, `striped` prop is ignored, `False` by default.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- autoContrast (boolean; optional):\n    Determines whether label text color should depend on\n    `background-color`. If luminosity of the `color` prop is less than\n    `theme.luminosityThreshold`, then `theme.white` will be used for\n    text color, otherwise `theme.black`. Overrides\n    `theme.autoContrast`.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- color (optional):\n    Key of `theme.colors` or any valid CSS value, `theme.primaryColor`\n    by default.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- orientation (a value equal to: 'horizontal', 'vertical'; optional):\n    Controls orientation default `'horizontal'`.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set\n    `border-radius`, `theme.defaultRadius` by default.\n\n- size (number; optional):\n    Controls track height, `'md'` by default.\n\n- striped (boolean; optional):\n    Determines whether the section should have stipes, `False` by\n    default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- transitionDuration (number; optional):\n    Controls sections width transition duration, value is specified in\n    ms, `100` by default.\n\n- value (number; required):\n    Value of the progress.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`."
  },
  {
    "name": "RingProgress",
    "description": "Use the RingProgress component to give feedback to the user about the status of a task with label, sections, etc.",
    "endpoint": "/components/ringprogress",
    "package": "dash_mantine_components",
    "category": "Feedback",
    "content": "\n\n## RingProgress  \nUse the RingProgress component to give feedback to the user about the status of a task with label, sections, etc.  \nCategory: Feedback  \n\n### Simple Example\n\nSet `sections` prop to an array of:\n* `value` - number between 0 and 100 - amount of space filled by segment\n* `color` - segment color from theme or any other css color value\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Group(\n    [\n        dmc.RingProgress(\n            sections=[\n                {\"value\": 40, \"color\": \"cyan\"},\n                {\"value\": 15, \"color\": \"orange\"},\n                {\"value\": 15, \"color\": \"grape\"},\n            ]\n        ),\n        dmc.RingProgress(\n            sections=[\n                {\"value\": 40, \"color\": \"#68b5e8\"},\n                {\"value\": 15, \"color\": \"#6888e8\"},\n                {\"value\": 15, \"color\": \"#8468e8\"},\n            ]\n        ),\n    ]\n)\n```\n### Root Color\n\nUse `rootColor` property to change the root color.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.RingProgress(\n    sections=[\n        {\"value\": 40, \"color\": \"yellow\"},\n    ],\n    rootColor=\"red\",\n)\n```\n### Section Tooltips\n\nHover on the sections to see tooltips in action.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.RingProgress(\n    sections=[\n        {\"value\": 14, \"color\": \"yellow\", \"label\": \"Docs\", \"tooltip\": \"Docs - 14GB\"},\n        {\"value\": 17, \"color\": \"red\", \"label\": \"Apps\", \"tooltip\": \"Apps - 17GB\"},\n        {\"value\": 69, \"color\": \"violet\", \"label\": \"Other\", \"tooltip\": \"Other - 69GB\"},\n    ],\n)\n```\n### With label\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ncomponent = dmc.Group(\n    [\n        dmc.RingProgress(\n            id=\"ring-progress-label\",\n            sections=[{\"value\": 33, \"color\": \"indigo\"}],\n            label=dmc.Text(\"33%\", c=\"indigo\", ta=\"center\"),\n        ),\n        dmc.RingProgress(\n            id=\"ring-progress-label2\",\n            sections=[\n                {\"value\": 25, \"color\": \"indigo\"},\n                {\"value\": 15, \"color\": \"orange\"},\n            ],\n            label=dmc.Text(\"App data usage\", size=\"xs\", ta=\"center\"),\n        ),\n        dmc.RingProgress(\n            id=\"ring-progress-label3\",\n            sections=[{\"value\": 60, \"color\": \"green\"}, {\"value\": 5, \"color\": \"yellow\"}],\n            label=dmc.Center(\n                dmc.ActionIcon(\n                    color=\"teal\",\n                    variant=\"light\",\n                    radius=\"xl\",\n                    size=\"xl\",\n                    children=DashIconify(icon=\"tabler:check\", height=40),\n                )\n            ),\n        ),\n    ]\n)\n```\n### Size, Thickness And Rounded Caps\n\nUse `size`, `thickness`, `roundCaps` props to customize the component.\n\n```python\nimport dash_mantine_components as dmc\n\ndmc.RingProgress(\n    size=120,\n    thickness=12,\n    roundCaps=False,\n    sections=[\n        {\"value\": 40, \"color\": \"red\"},\n        {\"value\": 15, \"color\": \"yellow\"},\n        {\"value\": 15, \"color\": \"violet\"},\n    ],\n)\n```\n\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n| Name  | Static selector             | Description    |\n|:------|:----------------------------|:---------------|\n| root  | .mantine-RingProgress-root  | Root element   |\n| svg   | .mantine-RingProgress-svg   | svg element    |\n| curve | .mantine-RingProgress-curve | circle element |\n| label | .mantine-RingProgress-label | Label element  |\n\n\n### Keyword Arguments\n#### RingProgress\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- label (a list of or a singular dash component, string or number; optional):\n    Label displayed in the center of the ring.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- rootColor (optional):\n    Color of the root section, key of theme.colors or CSS color value.\n\n- roundCaps (boolean; optional):\n    Sets whether the edges of the progress circle are rounded.\n\n- sections (list of dicts; required):\n    Ring sections.\n\n    `sections` is a list of dicts with keys:\n\n- size (number; optional):\n    Width and height of the progress ring.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- thickness (number; optional):\n    Ring thickness.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`."
  },
  {
    "name": "SemiCircleProgress",
    "description": "Use the SemiCircleProgress component to represent progress with semi circle diagram",
    "endpoint": "/components/semicircleprogress",
    "package": "dash_mantine_components",
    "category": "Feedback",
    "content": "\n\n## SemiCircleProgress  \nUse the SemiCircleProgress component to represent progress with semi circle diagram  \nCategory: Feedback  \n\n### Usage\n\n### Simple Example\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.SemiCircleProgress(\n      fillDirection=\"left-to-right\",\n      orientation=\"up\",\n      filledSegmentColor=\"blue\",\n      size=200,\n      thickness=12,\n      value=40,\n      label=\"Label\"\n)\n```\n### Change empty segment color\n\nUse `emptySegmentColor` prop to change color of empty segment, it accepts key of theme colors or any valid CSS color value:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.SemiCircleProgress(\n    value=30, emptySegmentColor=\"var(--mantine-color-dimmed)\"\n)\n```\n### Change label position\nBy default, the `label` is displayed at the bottom of the component, you can change its position to center by using `labelPosition` prop:\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Stack([\n    dmc.SemiCircleProgress( value=30, label=\"Bottom\", mb=\"xl\"),\n    dmc.SemiCircleProgress(value=30, label=\"Center\", labelPosition=\"center\")\n])\n```\n### Filled segment transition\nBy default, transitions are disabled, to enable them, set `transitionDuration` prop to a number of milliseconds:\n\n\n```python\nimport random\nimport dash_mantine_components as dmc\nfrom dash import Input, Output, callback\n\ncomponent = dmc.Box([\n    dmc.SemiCircleProgress(value=30, transitionDuration=250, label=\"30%\", id=\"semi-circle-progress\"),\n    dmc.Button(\"Set random value\", mt=\"md\", ml=22, id=\"semi-circle-progress-btn\"),\n\n])\n\n@callback(\n    Output(\"semi-circle-progress\", \"value\"),\n    Output(\"semi-circle-progress\", \"label\"),\n    Input(\"semi-circle-progress-btn\", \"n_clicks\")\n)\ndef update(n):\n    number = random.randint(1, 100)\n    return number, f\"{number}%\"\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n#### Selectors\n\n| Selector       | Static Selector                       | Description                |\n|----------------|---------------------------------------|----------------------------|\n| `root`         | `.mantine-SemiCircleProgress-root`    | Root element               |\n| `svg`          | `.mantine-SemiCircleProgress-svg`     | Root SVG element           |\n| `emptySegment` | `.mantine-SemiCircleProgress-emptySegment` | Empty circle segment       |\n| `filledSegment`| `.mantine-SemiCircleProgress-filledSegment` | Filled circle segment      |\n| `label`        | `.mantine-SemiCircleProgress-label`   | Label element              |\n\n#### CSS Variables\n\n| Selector | Variable                      | Description                                                   |\n|----------|-------------------------------|---------------------------------------------------------------|\n| `root`   | `--scp-empty-segment-color`   | Color of the empty segment                                    |\n|          | `--scp-filled-segment-color`  | Color of the filled segment                                   |\n|          | `--scp-rotation`              | Transform styles of the SVG, controlled by `orientation` and `fillDirection` props |\n|          | `--scp-thickness`             | Controls `strokeWidth` of the circle                         |\n|          | `--scp-transition-duration`   | Controls transition duration of the filled segment           |\n\n#### Data Attributes\n\n| Selector | Attribute       | Value                         |\n|----------|-----------------|-------------------------------|\n| `label`  | `data-position` | Value of `labelPosition` prop |\n\n\n\n### Keyword Arguments\n#### SemiCircleProgress\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- emptySegmentColor (optional):\n    Key of `theme.colors` or any valid CSS color value, by default the\n    value is determined based on the color scheme value.\n\n- fillDirection (a value equal to: 'right-to-left', 'left-to-right'; optional):\n    Direction from which the circle is filled, `'left-to-right'` by\n    default.\n\n- filledSegmentColor (optional):\n    Key of `theme.colors` or any valid CSS color value,\n    `theme.primaryColor` by default.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- label (a list of or a singular dash component, string or number; optional):\n    Label rendered inside the circle.\n\n- labelPosition (a value equal to: 'bottom', 'center'; optional):\n    Label position relative to the circle center, `'bottom'` by\n    default.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- orientation (a value equal to: 'up', 'down'; optional):\n    Orientation of the circle, `'up'` by default.\n\n- size (number; optional):\n    Diameter of the svg in px, `200` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- thickness (number; optional):\n    Circle thickness in px, `12` by default.\n\n- transitionDuration (number; optional):\n    Transition duration of filled section styles changes in ms, `0` by\n    default.\n\n- value (number; required):\n    Progress value from `0` to `100`.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`."
  },
  {
    "name": "Skeleton",
    "description": "Use Skeleton component to disable user interactions and indicate loading state.",
    "endpoint": "/components/skeleton",
    "package": "dash_mantine_components",
    "category": "Feedback",
    "content": "\n\n## Skeleton  \nUse Skeleton component to disable user interactions and indicate loading state.  \nCategory: Feedback  \n\n### Simple Usage\n\nUse `Skeleton` to create a placeholder for loading content. `Skeleton` support the following props:\n\n- `height` - height - any valid CSS value\n- `width` - width - any valid CSS value\n- `radius` - key of `theme.radius` or any valid CSS value to set border-radius\n- `circle` - if true, width, height and border-radius will equal to value specified in `height` prop\n- `animate` - true by default, controls animation\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Box(\n    [\n        dmc.Skeleton(height=50,  circle=True, mb=\"xl\"),\n        dmc.Skeleton(height=8, radius=\"xl\"),\n        dmc.Skeleton(height=8, my=6),\n        dmc.Skeleton(height=8, w=\"70%\", radius=\"xl\"),\n    ],\n)\n```\n### Display Skeleton while loading\n\nThe `Seleton` will be visible while the children components are being updated by a Dash callback.\n\n```python\nimport time\n\nimport dash_mantine_components as dmc\nfrom dash import html, Output, Input, callback\n\nfrom lib.utils import create_graph\n\ncomponent = html.Div(\n    [\n        dmc.Skeleton(\n            visible=False,\n            children=html.Div(id=\"skeleton-graph-container\", children=create_graph()),\n            mb=10,\n        ),\n        dmc.Button(\"Click Me!\", id=\"graph-skeleton-button\"),\n    ]\n)\n\n\n@callback(\n    Output(\"skeleton-graph-container\", \"children\"),\n    Input(\"graph-skeleton-button\", \"n_clicks\"),\n)\ndef update_graph(n_clicks):\n    time.sleep(2)\n    return create_graph()\n```\n### Use with dcc.Loading\n\nFor greater control over when the `Skeleton` is displayed and for how long, use the `dcc.Loading` component from\n`dash-core-components`. Set the `Skeleton` in the `custom_spinner` prop and configure options such as:  \n\n- `delay_show`: Specifies the wait time before displaying the `Skeleton`. This helps prevent flickering for fast-loading content.  \n- `delay_hide`: Defines how long the `Skeleton` remains visible after loading completes, creating a smoother transition between the placeholder and final content.  \n- `target_components`: Determines which components trigger the `Skeleton` display. This allows fine-grained control,\nmaking the loading effect triggered only by specific components rather than automatically being triggered by any of the children.\n\nRefer to the [Dash Documentation](https://dash.plotly.com/dash-core-components/loading) for more details.\n\nHere is an example of `delay_hide` prop in `dcc.Loading` to prevent the `Skeleton` from showing for a very short time.\n\n```python\nimport time\nimport dash_mantine_components as dmc\nfrom dash import  Input, Output,  html, callback, dcc\n\ncomponent = html.Div(\n    [\n        dcc.Loading(\n            children=html.Div([\n                dmc.Text(\"Initial data\", id=\"dccloading-div\"),\n                dmc.Text(\"The data only takes 200ms to update, but `delay_hide` is set to 1000ms to prevent flashing.\")\n            ]),\n            delay_hide=1000,\n            custom_spinner = dmc.Skeleton(\n                visible=True,\n                h=\"100%\"\n            ),\n        ),\n        dmc.Button(\"Update!\", id=\"dccloading-button\"),\n    ]\n)\n\n@callback(\n    Output(\"dccloading-div\", \"children\"),\n    Input(\"dccloading-button\", \"n_clicks\"),\n    prevent_initial_call=True\n)\ndef update_graph(n):\n    time.sleep(.2)\n    return f\"Data updated {n} times\"\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n#### Skeleton Selectors\n\n| Selector | Static selector         | Description   |\n|----------|-------------------------|---------------|\n| root     | .mantine-Skeleton-root  | Root element  |\n\n#### Skeleton CSS Variables\n\n| Selector | Variable          | Description                      |\n|----------|------------------|----------------------------------|\n| root     | --skeleton-height | Controls skeleton height        |\n|          | --skeleton-width  | Controls skeleton width         |\n|          | --skeleton-radius | Controls skeleton border-radius |\n\n#### Skeleton Data Attributes\n\n| Selector | Attribute      | Condition               |\n|----------|--------------|-------------------------|\n| root     | data-visible | `visible` prop is set   |\n| root     | data-animate | `animate` prop is set   |\n\n\n\n### Keyword Arguments\n#### Skeleton\n\n- children (a list of or a singular dash component, string or number; optional):\n    Content.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- animate (boolean; optional):\n    Determines whether Skeleton should be animated, `True` by default.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- circle (boolean; optional):\n    If set, Skeleton `width` and `border-radius` are equal to its\n    `height`, `False` by default.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- height (string | number; optional):\n    Skeleton `height`, numbers are converted to rem, `auto` by\n    default.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set border-radius.\n    Numbers are converted to rem. `theme.defaultRadius` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visible (boolean; default True):\n    Determines whether Skeleton overlay should be displayed, `True` by\n    default.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- width (string | number; optional):\n    Skeleton `width`, numbers are converted to rem, `100%` by default,\n    ignored when `circle` prop is set."
  },
  {
    "name": "Checkbox",
    "description": "Use Checkbox component to capture boolean input from user.",
    "endpoint": "/components/checkbox",
    "package": "dash_mantine_components",
    "category": "Inputs",
    "content": "\n\n## Checkbox  \nUse Checkbox component to capture boolean input from user.  \nCategory: Inputs  \n\n### Introduction\n\n### Simple Usage\n\nUse the property `checked` in the callbacks.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html, Output, Input, callback\n\ncomponent = html.Div(\n    [\n        dmc.Checkbox(\n            id=\"checkbox-state\", label=\"I agree to sell my privacy\", checked=True, color=\"green\", mb=10\n        ),\n        dmc.Text(id=\"checkbox-output\"),\n    ]\n)\n\n\n@callback(Output(\"checkbox-output\", \"children\"), Input(\"checkbox-state\", \"checked\"))\ndef checkbox(checked):\n    return str(checked)\n```\n### States\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Stack([\n    dmc.Checkbox(checked=False, label=\"Default checkbox\"),\n    dmc.Checkbox(checked=False, indeterminate=True, label=\"Indeterminate checkbox\"),\n    dmc.Checkbox(checked=True, label=\"Checked checkbox\"),\n    dmc.Checkbox(checked=True, variant=\"outline\", label=\"Outline checked checkbox\"),\n    dmc.Checkbox(variant=\"outline\", indeterminate=True, label=\"Outline indeterminate checkbox\"),\n    dmc.Checkbox(disabled=True, label=\"Disabled checkbox\"),\n    dmc.Checkbox(disabled=True, checked=True, label=\"Disabled checked checkbox\"),\n    dmc.Checkbox(disabled=True, indeterminate=True, label=\"Disabled indeterminate checkbox\")\n])\n```\n### Change icons\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\n\ncomponent = dmc.Stack([\n    dmc.Checkbox(\n        label=\"Custom checked icon\",\n        checked=True,\n        icon=DashIconify(icon=\"ion:bag-check-sharp\"),\n        size=\"lg\",\n    ),\n    dmc.Checkbox(\n        label=\"Custom indeterminate icons\",\n        indeterminate=True,\n        indeterminateIcon=DashIconify(icon=\"mdi:dots-circle\", ),\n        size=\"lg\",\n    ),\n])\n```\n### Change icon color\n\nUse `iconColor` prop to change icon color. You can reference colors from theme.colors or use any valid CSS color:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Checkbox(\n    checked=True,\n    color=\"lime.4\",\n    iconColor=\"dark.8\",\n    size=\"md\",\n    label=\"Bright lime checkbox\"\n)\n```\n### Different Colors\n\nSet checkbox color using the `color` prop.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Stack(\n    children=[\n        dmc.Checkbox(label=\"I agree to sell my privacy\", color=\"green\", checked=True),\n        dmc.Checkbox(label=\"I agree to sell my privacy\", color=\"blue\", checked=True),\n        dmc.Checkbox(label=\"I agree to sell my privacy\", color=\"red\", checked=True),\n        dmc.Checkbox(label=\"I agree to sell my privacy\", color=\"orange\", checked=True),\n        dmc.Checkbox(label=\"I agree to sell my privacy\", color=\"pink\", checked=True),\n    ],\n)\n```\n### Different Sizes\n\nChoose from one of the following sizes: xs, sm, md, lg, xl.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Stack(\n    children=[\n        dmc.Checkbox(label=\"I agree to sell my privacy\", size=\"xs\", checked=True),\n        dmc.Checkbox(label=\"I agree to sell my privacy\", size=\"sm\", checked=True),\n        dmc.Checkbox(label=\"I agree to sell my privacy\", size=\"md\", checked=True),\n        dmc.Checkbox(label=\"I agree to sell my privacy\", size=\"lg\", checked=True),\n        dmc.Checkbox(label=\"I agree to sell my privacy\", size=\"xl\", checked=True),\n    ],\n)\n```\n### Add custom sizes\nUsing the [Styles API](/styles-api), you can add any number of custom sizes with `data-size` attribute.  Defining the checkbox \nsizes in the [theme object](/theme-object) in the `MantineProvider` makes them available to all `Checkbox` components in the app.\n\n - [Live Demo on PyCafe](https://py.cafe/dash.mantine.components/checkbox-custom-sizes-demo)  \n\n```python\ncomponent = dmc.Box([\n    dmc.Checkbox(\n        label=\"Extra small checkbox\",\n        size=\"xxs\",\n    ),\n    dmc.Checkbox(\n        label=\"Extra extra large checkbox\",\n        size=\"xxl\",\n        mt=\"md\"\n    ),\n])\n\napp.layout = dmc.MantineProvider(\n   children=component,\n    theme={\n        \"components\": {\n            \"Checkbox\": {\"classNames\": {\n                \"root\": \"checkbox-add-custom-sizes-root\",\n                \"label\": \"checkbox-add-custom-sizes-label\"}\n            }\n        }\n    }\n)\n```\nDefine the classes in a `.css` file in `/assets` folder\n\n```css\n.checkbox-add-custom-sizes-root {\n  --checkbox-size-xxl: 42px;\n  --checkbox-size-xxs: 14px;\n\n  &[data-size='xxl'] {\n    .checkbox-add-custom-sizes-label {\n      font-size: 22px;\n      line-height: 40px;\n    }\n  }\n\n  &[data-size='xxs'] {\n    .checkbox-add-custom-sizes-label {\n      font-size: 10px;\n      line-height: 14px;\n    }\n  }\n}\n```\n\n\n### Indeterminate state\n`Checkbox` supports indeterminate state. When `indeterminate=True` prop is set, `checked` prop is ignored (checkbox\nalways has checked styles)\n\n```python\nfrom dash import  html,  Input, Output,  callback, ALL, ctx\nimport dash_mantine_components as dmc\n\ninitial_values = [\n    {\"label\": \"Receive email notifications\", \"checked\": False},\n    {\"label\": \"Receive sms notifications\", \"checked\": True},\n    {\"label\": \"Receive push notifications\", \"checked\": False},\n]\n\ncomponent = html.Div([\n    dmc.Checkbox(\n        id=\"all-notifications\",\n        label=\"Receive all notifications\",\n        checked=False,\n        indeterminate=False\n    ),\n    html.Div([\n        dmc.Checkbox(\n            id={\"type\": \"notification-item\", \"index\": i},\n            label=item[\"label\"],\n            checked=item[\"checked\"],\n            style={\"marginTop\": \"5px\", \"marginLeft\": \"33px\"}\n        )\n        for i, item in enumerate(initial_values)\n    ])\n])\n\n\n\n@callback(\n    Output(\"all-notifications\", \"checked\"),\n    Output(\"all-notifications\", \"indeterminate\"),\n    Output({\"type\": \"notification-item\", \"index\": ALL}, \"checked\"),\n    Input(\"all-notifications\", \"checked\"),\n    Input({\"type\": \"notification-item\", \"index\": ALL}, \"checked\"),\n    prevent_initial_callback=True\n)\ndef update_main_checkbox(all_checked, checked_states):\n    # handle \"all\" checkbox\"\n    if ctx.triggered_id == 'all-notifications':\n        checked_states = [all_checked] * len(checked_states)\n\n    # handled individual check boxes\n    all_checked_states = all(checked_states)\n    indeterminate = any(checked_states) and not all_checked_states\n    return all_checked_states, indeterminate, checked_states\n```\n### Label with link\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Checkbox(\n    id=\"checkbox-simple\",\n    label=dmc.Text(\n        [\"I accept the \", dmc.Anchor(\"Terms and Conditions\", href=\"#\"), \".\"]\n    ),\n)\n```\n### Pointer cursor\nBy default, checkbox input and label have `cursor: default` (same as native `input[type='checkbox']`). To change cursor\nto pointer, set `cursorType` on `theme`:\n\n```python\n\napp.layout = dmc.MantineProvider(\n    theme = {\"cursorType\": \"pointer\"},\n    children={...}\n)\n```\n\n\n### Checkbox Group component\n\nUse CheckboxGroup component to create inputs with multiple checkbox elements and label, description, etc. You can use either\nthe dmc.Group or dmc.Stack to customize the orientation and spacing of checkbox elements.\n\nUse `value` property of the checkbox group in the callbacks.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html, Output, Input, callback\n\ncomponent = html.Div(\n    [\n        dmc.CheckboxGroup(\n            id=\"checkbox-group\",\n            label=\"Select your favorite library\",\n            description=\"This is anonymous\",\n            withAsterisk=True,\n            mb=10,\n            children=dmc.Group(\n                [\n                    dmc.Checkbox(label=\"Pandas\", value=\"pandas\"),\n                    dmc.Checkbox(label=\"Polars\", value=\"polars\"),\n                    dmc.Checkbox(label=\"Vaex\", value=\"vaex\"),\n                    dmc.Checkbox(label=\"Dask\", value=\"dask\"),\n                ],\n                mt=10,\n            ),\n            value=[\"pandas\", \"polars\"],\n        ),\n        dmc.Text(id=\"checkbox-group-output\"),\n    ]\n)\n\n\n@callback(Output(\"checkbox-group-output\", \"children\"), Input(\"checkbox-group\", \"value\"))\ndef checkbox(value):\n    return \", \".join(value) if value else None\n```\n### CheckboxIndicator component\n\n`CheckboxIndicator` looks exactly the same as `Checkbox` component, but it does not have any semantic meaning, it's \njust a visual representation of checkbox state. You can use it in any place where you need to display checkbox state \nwithout any interaction related to the indicator. For example, it is useful in cards based on buttons, trees, etc.\n\n> Note that CheckboxIndicator cannot be focused or selected with keyboard. It is not accessible and should not be used as a replacement for Checkbox component.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Group([\n    dmc.CheckboxIndicator(),\n    dmc.CheckboxIndicator(checked=True),\n    dmc.CheckboxIndicator(disabled=True),\n    dmc.CheckboxIndicator(disabled=True, checked=True)\n])\n```\n### CheckboxCard component\n`CheckboxCard` component can be used as a replacement for `Checkbox` to build custom cards/buttons/other things that\nwork as checkboxes. The root element of the component has `role=\"checkbox\"` attribute, it is accessible by default \nand supports the same keyboard interactions as `input[type=\"checkbox\"]`.\n\nNote - do not set the `checked` prop in the `CheckboxIndicator` component otherwise the `CheckboxIndicator` will not be updated.\n\n```python\nfrom dash import Input, Output, callback\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Box([\n        dmc.CheckboxCard(\n            id=\"checkbox-card\",\n            withBorder=True,\n            p=\"md\",\n            checked=True,\n            children=[\n                dmc.Center([\n                    dmc.CheckboxIndicator(),\n                    dmc.Text(\"CheckboxCard\", size=\"xl\", pl=\"sm\"),\n                ], inline=True),\n            ]\n        ),\n        dmc.Box(id=\"checkbox-card-out\"),\n    ], p=\"lg\")\n\n\n@callback(\n    Output(\"checkbox-card-out\", \"children\"),\n    Input(\"checkbox-card\", \"checked\")\n)\ndef update(checked):\n   return f\"Checked? {checked}\"\n```\n### CheckboxCard with CheckboxGroup\n\nYou can use `CheckboxCard` with `CheckboxGroup` the same way as `Checkbox` component.\n\nNote - do not set the `checked` prop in the `CheckboxIndicator` component otherwise the `CheckboxIndicator` will not be updated.\nThis example also shows how to add hover styles\n\n```python\n\nfrom dash import Input, Output, callback\nimport dash_mantine_components as dmc\n\ndef make_checkboxcard(label, description):\n    return dmc.CheckboxCard(\n        withBorder=True,\n        p=\"md\",\n        mt=\"md\",\n        className=\"checkboxcard-root\",\n        value=label,\n        children=[\n            dmc.Group([\n                dmc.CheckboxIndicator(),\n                dmc.Box([\n                    dmc.Text(label, lh=\"1.3\", fz=\"md\", fw=\"bold\" ),\n                    dmc.Text(description, size=\"sm\", c=\"dimmed\"),\n                ])\n            ], wrap=\"nowrap\", align=\"flex-start\"),\n        ]\n    )\n\n\ncomponent = dmc.Box([\n    dmc.CheckboxGroup(\n        id=\"checkbox-card-group\",\n        label= \"CheckboxGroup label\",\n        value=[\"CheckboxCard 1\"],\n        description=\"This is a CheckboxGroup description\",\n        children=[\n            make_checkboxcard(f\"CheckboxCard {i}\", f\"Checkbox description {i}\")\n            for i in range(1, 5)\n        ]\n    ),\n    dmc.Box(id=\"checkbox-card-group-out\"),\n], p=\"lg\")\n\n\n@callback(\n    Output(\"checkbox-card-group-out\", \"children\"),\n    Input(\"checkbox-card-group\", \"value\")\n)\ndef update(checked):\n   return f\"Checked? {checked}\"\n```\n\n```css\n/* used for both CheckboxCard and RadioCard*/\n.checkboxcard-root {\n    position: relative;\n    padding: var(--mantine-spacing-md);\n    transition: border-color 150ms ease;\n\n    &[data-checked] {\n        border-color: var(--mantine-primary-color-filled);\n    }\n}\n\n.checkboxcard-root:hover {\n    background-color: light-dark(\n            var(--mantine-color-gray-0),\n            var(--mantine-color-dark-6)\n    );\n}\n```\n\n\n### Example: Customize with Styles API\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent =  dmc.Checkbox(\n    classNames={\"root\": \"dmc-api-demo-root\"},\n    label=\"Checkbox button\",\n    w=180\n)\n```\n\n```css\n\n.dmc-api-demo-root {\n  border: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));\n  padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);\n  border-radius: var(--mantine-radius-md);\n  font-weight: 500;\n  cursor: pointer;\n\n  &[data-checked] {\n    background-color: var(--mantine-color-blue-filled);\n    border-color: var(--mantine-color-blue-filled);\n    color: var(--mantine-color-white);\n  }\n}\n```\n\n   \n\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n> Check the Mantine documentation to explore the available selectors.  The [interactive demo](https://mantine.dev/core/checkbox/#styles-api)\n> lets you hover over selectors to see which elements they correspond to.\n\n#### Checkbox Selectors\n\n| Selector       | Static selector              | Description                                             |\n|---------------|------------------------------|---------------------------------------------------------|\n| root          | .mantine-Checkbox-root       | Root element                                           |\n| input         | .mantine-Checkbox-input      | Input element (`input[type=\"checkbox\"]`)               |\n| icon          | .mantine-Checkbox-icon       | Checkbox icon, used to display checkmark and indeterminate state icon |\n| inner         | .mantine-Checkbox-inner      | Wrapper for icon and input                             |\n| body          | .mantine-Checkbox-body       | Input body, contains all other elements                |\n| labelWrapper  | .mantine-Checkbox-labelWrapper | Contains label, description, and error              |\n| label         | .mantine-Checkbox-label      | Label element                                          |\n| description   | .mantine-Checkbox-description | Description displayed below the label                 |\n| error         | .mantine-Checkbox-error      | Error message displayed below the label               |\n\n#### Checkbox CSS Variables\n\n| Selector | Variable              | Description                                |\n|----------|----------------------|--------------------------------------------|\n| root     | --checkbox-color     | Controls checked checkbox background-color |\n|          | --checkbox-radius    | Controls checkbox border-radius           |\n|          | --checkbox-size      | Controls checkbox width and height        |\n|          | --checkbox-icon-color | Controls checkbox icon color              |\n\n#### Checkbox Data Attributes\n\n| Selector | Attribute          | Condition                | Value                      |\n|----------|-------------------|-------------------------|----------------------------|\n| root     | data-checked      | `checked` prop is set   | –                          |\n| input    | data-error        | `error` prop is set     | –                          |\n| input    | data-indeterminate | `indeterminate` prop is set | –                     |\n| inner    | data-label-position | –                      | Value of `labelPosition` prop |\n\n#### CheckboxGroup Selectors\n\n| Selector    | Static selector               | Description                         |\n|------------|------------------------------|-------------------------------------|\n| root       | .mantine-CheckboxGroup-root  | Root element                       |\n| label      | .mantine-CheckboxGroup-label | Label element                      |\n| required   | .mantine-CheckboxGroup-required | Required asterisk element, rendered inside label |\n| description | .mantine-CheckboxGroup-description | Description element                |\n| error      | .mantine-CheckboxGroup-error | Error element                      |\n\n#### CheckboxIndicator Selectors\n\n| Selector   | Static selector                     | Description   |\n|------------|------------------------------------|---------------|\n| indicator  | .mantine-CheckboxIndicator-indicator | Root element  |\n| icon       | .mantine-CheckboxIndicator-icon   | Checkbox icon |\n\n#### CheckboxIndicator CSS Variables\n\n| Selector   | Variable            | Description                                |\n|------------|--------------------|--------------------------------------------|\n| indicator  | --checkbox-color   | Controls checked checkbox background-color |\n|            | --checkbox-radius  | Controls checkbox border-radius           |\n|            | --checkbox-size    | Controls checkbox width and height        |\n|            | --checkbox-icon-color | Controls checkbox icon color          |\n\n#### CheckboxIndicator Data Attributes\n\n| Selector   | Attribute     | Condition         |\n|------------|-------------|------------------|\n| indicator  | data-checked | `checked` prop is set |\n| indicator  | data-disabled | `disabled` prop is set |\n\n#### CheckboxCard Selectors\n\n| Selector | Static selector            | Description   |\n|----------|----------------------------|---------------|\n| card     | .mantine-CheckboxCard-card | Root element  |\n\n#### CheckboxCard CSS Variables\n\n| Selector | Variable      | Description                  |\n|----------|-------------|------------------------------|\n| card     | --card-radius | Controls card border-radius |\n\n#### CheckboxCard Data Attributes\n\n| Selector | Attribute       | Condition                  |\n|----------|----------------|----------------------------|\n| card     | data-checked    | `checked` prop is set      |\n| card     | data-with-border | `withBorder` prop is set  |\n\n\n### Keyword Arguments\n#### Checkbox\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- autoContrast (boolean; optional):\n    Determines whether icon color with filled variant should depend on\n    `background-color`. If luminosity of the `color` prop is less than\n    `theme.luminosityThreshold`, then `theme.white` will be used for\n    text color, otherwise `theme.black`. Overrides\n    `theme.autoContrast`.\n\n- checked (boolean; optional):\n    State of check box.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- color (optional):\n    Key of `theme.colors` or any valid CSS color to set input\n    background color in checked state, `theme.primaryColor` by\n    default.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- description (a list of or a singular dash component, string or number; optional):\n    Description displayed below the label.\n\n- disabled (boolean; optional):\n    Whether component is disabled.\n\n- error (a list of or a singular dash component, string or number; optional):\n    Error message displayed below the label.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- icon (a list of or a singular dash component, string or number; optional):\n    Icon.\n\n- iconColor (optional):\n    Key of `theme.colors` or any valid CSS color to set icon color, by\n    default value depends on `theme.autoContrast`.\n\n- indeterminate (boolean; optional):\n    Indeterminate state of the checkbox. If set, `checked` prop is\n    ignored.\n\n- indeterminateIcon (a list of or a singular dash component, string or number; optional):\n    Indeterminate icon.\n\n- label (a list of or a singular dash component, string or number; optional):\n    Content of the `label` associated with the checkbox.\n\n- labelPosition (a value equal to: 'left', 'right'; optional):\n    Position of the label relative to the input, `'right'` by default.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- persisted_props (list of strings; optional):\n    Properties whose user interactions will persist after refreshing\n    the component or the page. Since only `value` is allowed this prop\n    can normally be ignored.\n\n- persistence (string | number | boolean; optional):\n    Used to allow user interactions in this component to be persisted\n    when the component - or the page - is refreshed. If `persisted` is\n    truthy and hasn't changed from its previous value, a `value` that\n    the user has changed while using the app will keep that change, as\n    long as the new `value` also matches what was given originally.\n    Used in conjunction with `persistence_type`. Note:  The component\n    must have an `id` for persistence to work.\n\n- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):\n    Where persisted user changes will be stored: memory: only kept in\n    memory, reset on page refresh. local: window.localStorage, data is\n    kept after the browser quit. session: window.sessionStorage, data\n    is cleared once the browser quit.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set\n    `border-radius,` `theme.defaultRadius` by default.\n\n- size (optional):\n    Controls size of the component, `'sm'` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- value (string; optional):\n    To be used with checkbox group.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- wrapperProps (dict; optional):\n    Props passed down to the root element.\n\n    `wrapperProps` is a dict with keys:\n#### CheckboxGroup\n\n- children (a list of or a singular dash component, string or number; required):\n    `Checkbox` components and any other elements.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- description (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Description` component. If not set, description\n    is not rendered.\n\n- descriptionProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Description` component.\n\n- error (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Error` component. If not set, error is not\n    rendered.\n\n- errorProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Error` component.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- inputWrapperOrder (list of a value equal to: 'label', 'description', 'error', 'input's; optional):\n    Controls order of the elements, `['label', 'description', 'input',\n    'error']` by default.\n\n- label (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Label` component. If not set, label is not\n    rendered.\n\n- labelElement (a value equal to: 'label', 'div'; optional):\n    `Input.Label` root element, `'label'` by default.\n\n- labelProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Label` component.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- persisted_props (list of strings; optional):\n    Properties whose user interactions will persist after refreshing\n    the component or the page. Since only `value` is allowed this prop\n    can normally be ignored.\n\n- persistence (string | number | boolean; optional):\n    Used to allow user interactions in this component to be persisted\n    when the component - or the page - is refreshed. If `persisted` is\n    truthy and hasn't changed from its previous value, a `value` that\n    the user has changed while using the app will keep that change, as\n    long as the new `value` also matches what was given originally.\n    Used in conjunction with `persistence_type`. Note:  The component\n    must have an `id` for persistence to work.\n\n- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):\n    Where persisted user changes will be stored: memory: only kept in\n    memory, reset on page refresh. local: window.localStorage, data is\n    kept after the browser quit. session: window.sessionStorage, data\n    is cleared once the browser quit.\n\n- readOnly (boolean; optional):\n    If set, value cannot be changed.\n\n- required (boolean; optional):\n    Adds required attribute to the input and a red asterisk on the\n    right side of label, `False` by default.\n\n- size (optional):\n    Controls size of the `Input.Wrapper`, `'sm'` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- value (list of strings; optional):\n    Controlled component value.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withAsterisk (boolean; optional):\n    Determines whether the required asterisk should be displayed.\n    Overrides `required` prop. Does not add required attribute to the\n    input. `False` by default.\n\n- wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the root element (`Input.Wrapper` component).\n#### CheckboxIndicator\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- autoContrast (boolean; optional):\n    Determines whether icon color with filled variant should depend on\n    `background-color`. If luminosity of the `color` prop is less than\n    `theme.luminosityThreshold`, then `theme.white` will be used for\n    text color, otherwise `theme.black`. Overrides\n    `theme.autoContrast`.\n\n- checked (boolean; optional):\n    State of check box.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- color (optional):\n    Key of `theme.colors` or any valid CSS color to set input\n    background color in checked state, `theme.primaryColor` by\n    default.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- disabled (boolean; optional):\n    Whether component is disabled.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- icon (a list of or a singular dash component, string or number; optional):\n    Icon.\n\n- iconColor (optional):\n    Key of `theme.colors` or any valid CSS color to set icon color, by\n    default value depends on `theme.autoContrast`.\n\n- indeterminate (boolean; optional):\n    Indeterminate state of the checkbox. If set, `checked` prop is\n    ignored.\n\n- indeterminateIcon (a list of or a singular dash component, string or number; optional):\n    Indeterminate icon.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- persisted_props (list of strings; optional):\n    Properties whose user interactions will persist after refreshing\n    the component or the page. Since only `value` is allowed this prop\n    can normally be ignored.\n\n- persistence (string | number | boolean; optional):\n    Used to allow user interactions in this component to be persisted\n    when the component - or the page - is refreshed. If `persisted` is\n    truthy and hasn't changed from its previous value, a `value` that\n    the user has changed while using the app will keep that change, as\n    long as the new `value` also matches what was given originally.\n    Used in conjunction with `persistence_type`. Note:  The component\n    must have an `id` for persistence to work.\n\n- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):\n    Where persisted user changes will be stored: memory: only kept in\n    memory, reset on page refresh. local: window.localStorage, data is\n    kept after the browser quit. session: window.sessionStorage, data\n    is cleared once the browser quit.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set\n    `border-radius,` `theme.defaultRadius` by default.\n\n- size (optional):\n    Controls size of the component, `'sm'` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the root element.\n#### CheckboxCard\n\n- children (a list of or a singular dash component, string or number; optional):\n    CheckboxCard content.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- checked (boolean; optional):\n    State of check box.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- defaultChecked (boolean; optional):\n    Uncontrolled component default value.\n\n- disabled (boolean; optional):\n    Determines whether CheckboxCard is disabled and non-selectable.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- persisted_props (list of strings; optional):\n    Properties whose user interactions will persist after refreshing\n    the component or the page. Since only `value` is allowed this prop\n    can normally be ignored.\n\n- persistence (string | number | boolean; optional):\n    Used to allow user interactions in this component to be persisted\n    when the component - or the page - is refreshed. If `persisted` is\n    truthy and hasn't changed from its previous value, a `value` that\n    the user has changed while using the app will keep that change, as\n    long as the new `value` also matches what was given originally.\n    Used in conjunction with `persistence_type`. Note:  The component\n    must have an `id` for persistence to work.\n\n- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):\n    Where persisted user changes will be stored: memory: only kept in\n    memory, reset on page refresh. local: window.localStorage, data is\n    kept after the browser quit. session: window.sessionStorage, data\n    is cleared once the browser quit.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set\n    `border-radius,` `theme.defaultRadius` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- value (string; optional):\n    To be used with checkbox group.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withBorder (boolean; optional):\n    Determines whether the card should have border, `True` by default.\n\n- wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the root element."
  },
  {
    "name": "Chip",
    "description": "Use Chip to pick one or multiple values with inline controls",
    "endpoint": "/components/chip",
    "package": "dash_mantine_components",
    "category": "Inputs",
    "content": "\n\n## Chip  \nUse Chip to pick one or multiple values with inline controls  \nCategory: Inputs  \n\n### Introduction\n\n### Simple Usage\n\nFor a stand-alone `Chip`, use the `checked` property in callbacks.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import Output, Input, callback\n\n\ncomponent = dmc.Box(\n    [\n        dmc.Chip(\"Awesome chip\", checked=True, id=\"chip-state\"),\n        dmc.Text(id=\"chip-container\"),\n    ],\n    p=20,\n)\n\n\n@callback(Output(\"chip-container\", \"children\"), Input(\"chip-state\", \"checked\"))\ndef checkbox(checked):\n    return f\"The chip is selected: {checked}\"\n```\n### Change Checked Icon\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ncomponent = dmc.Chip(\n    \"Forbidden\",\n    icon=DashIconify(icon=\"bi-x-circle\"),\n    color=\"red\",\n    checked=True,\n    m=\"sm\",\n)\n```\n### States\n\n### Chip with Tooltip\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Tooltip(\n    label=\"chip tooltip\",\n    children=dmc.Chip(\"chip with tooltip\", checked=True),\n)\n```\n### ChipGroups like Radio Button\n\nIn this example, only a single chip can be selected, similar to a radio button. \n\n> Note:  The  `ChipGroup` `value` property type must be a string when `multiple=False`.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import callback, Input, Output\n\ncomponent = dmc.Box(\n    [\n        dmc.Group(\n            dmc.ChipGroup(\n                [\n                    dmc.Chip(\"Single chip\", value=\"a\"),\n                    dmc.Chip(\"Can be selected\", value=\"b\"),\n                    dmc.Chip(\"At a time\", value=\"c\"),\n                ],\n                multiple=False,\n                value=\"a\",\n                id=\"chipgroup-single\",\n            ),\n            justify=\"center\",\n        ),\n        dmc.Text(id=\"chipgroup-single-container\", ta=\"center\"),\n    ]\n)\n\n\n@callback(\n    Output(\"chipgroup-single-container\", \"children\"), Input(\"chipgroup-single\", \"value\")\n)\ndef checkbox(value):\n    return f\"You selected chip: {value}\"\n```\n### ChipGroups like Checklist\n\nIn this example,  multiple chips can be selected, similar to a checklist.  Set `multiple=True`\n\n> Note: The  `ChipGroup` `value` property type must be a list of strings when `multiple=True`.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import callback, Input, Output\n\ncomponent = dmc.Box(\n    [\n        dmc.Group(\n            dmc.ChipGroup(\n                [\n                    dmc.Chip(\"Multiple chips\", value=\"a\"),\n                    dmc.Chip(\"Can be selected\", value=\"b\"),\n                    dmc.Chip(\"At a time\", value=\"c\"),\n                ],\n                multiple=True,\n                value=[\"a\", \"b\"],\n                id=\"chipgroup-multi\",\n            ),\n            justify=\"center\",\n        ),\n        dmc.Text(id=\"chipgroup-multi-container\", ta=\"center\"),\n    ]\n)\n\n\n@callback(\n    Output(\"chipgroup-multi-container\", \"children\"), Input(\"chipgroup-multi\", \"value\")\n)\ndef checkbox(value):\n    return f\"Selected chips: {value}\"\n```\n### Deselect radio chip\n\nTo enable deselecting a radio chip, set `deselectable=True`\n\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import callback, Input, Output\n\ncomponent = dmc.Box(\n    [\n        dmc.Group(\n            dmc.ChipGroup(\n                [\n                    dmc.Chip(\"Single chip\", value=\"a\"),\n                    dmc.Chip(\"Can be selected\", value=\"b\"),\n                    dmc.Chip(\"At a time\", value=\"c\"),\n                ],\n                multiple=False,\n                value=\"a\",\n                deselectable=True,\n                id=\"chipgroup-deselect\",\n            ),\n            justify=\"center\",\n        ),\n        dmc.Text(id=\"chipgroup-deselect-container\", ta=\"center\"),\n    ]\n)\n\n\n@callback(\n    Output(\"chipgroup-deselect-container\", \"children\"), Input(\"chipgroup-deselect\", \"value\")\n)\ndef checkbox(value):\n    return f\"You selected chip: {value}\"\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n#### Chip Selectors\n\n| Selector    | Static selector              | Description                               |\n|-------------|------------------------------|-------------------------------------------|\n| root        | .mantine-Chip-root            | Root element                              |\n| checkIcon   | .mantine-Chip-checkIcon       | Check icon, visible when `checked` prop is true |\n| iconWrapper | .mantine-Chip-iconWrapper     | Wraps `checkIcon` for alignment           |\n| input       | .mantine-Chip-input           | Input element, hidden by default          |\n| label       | .mantine-Chip-label           | Input label, used as the chip body        |\n\n#### Chip CSS Variables\n\n| Selector | Variable                  | Description                                          |\n|----------|---------------------------|------------------------------------------------------|\n| root     | --chip-fz                  | Controls font-size                                   |\n|          | --chip-size                | Controls height                                      |\n|          | --chip-icon-size           | Controls width and height of the icon                |\n|          | --chip-padding             | Controls horizontal padding when chip is not checked |\n|          | --chip-checked-padding     | Controls horizontal padding when chip is checked     |\n|          | --chip-radius              | Controls border-radius                               |\n|          | --chip-bg                  | Controls background-color when chip is checked       |\n|          | --chip-hover               | Controls background-color when chip is checked and hovered |\n|          | --chip-color               | Controls color when chip is checked                  |\n|          | --chip-bd                  | Controls border when chip is checked                 |\n|          | --chip-spacing             | Controls spacing between check icon and label        |\n\n#### Chip Data Attributes\n\n| Selector | Attribute      | Condition                |\n|----------|----------------|--------------------------|\n| label    | data-checked    | Chip is checked          |\n| label    | data-disabled   | `disabled` prop is set   |\n\n\n\n\n### Keyword Arguments\n#### Chip\n\n- children (a list of or a singular dash component, string or number; required):\n    `label` element associated with the input.\n\n- id (string; optional):\n    Static id to connect input with the label, by default `id` is\n    randomly generated.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- autoContrast (boolean; optional):\n    Determines whether button text color with filled variant should\n    depend on `background-color`. If luminosity of the `color` prop is\n    less than `theme.luminosityThreshold`, then `theme.white` will be\n    used for text color, otherwise `theme.black`. Overrides\n    `theme.autoContrast`.\n\n- checked (boolean; optional):\n    Checked state for controlled component.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- color (optional):\n    Controls components colors based on `variant` prop. Key of\n    `theme.colors` or any valid CSS color. `theme.primaryColor` by\n    default.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- disabled (boolean; optional):\n    whether the component is disabled.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- icon (a list of or a singular dash component, string or number; optional):\n    Any element or component to replace default icon.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- persisted_props (list of strings; optional):\n    Properties whose user interactions will persist after refreshing\n    the component or the page. Since only `value` is allowed this prop\n    can normally be ignored.\n\n- persistence (string | number | boolean; optional):\n    Used to allow user interactions in this component to be persisted\n    when the component - or the page - is refreshed. If `persisted` is\n    truthy and hasn't changed from its previous value, a `value` that\n    the user has changed while using the app will keep that change, as\n    long as the new `value` also matches what was given originally.\n    Used in conjunction with `persistence_type`. Note:  The component\n    must have an `id` for persistence to work.\n\n- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):\n    Where persisted user changes will be stored: memory: only kept in\n    memory, reset on page refresh. local: window.localStorage, data is\n    kept after the browser quit. session: window.sessionStorage, data\n    is cleared once the browser quit.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set\n    `border-radius`, `'xl'` by default.\n\n- size (a value equal to: 'xs', 'sm', 'md', 'lg', 'xl'; optional):\n    Controls various properties related to component size, `'sm'` by\n    default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- type (a value equal to: 'radio', 'checkbox'; optional):\n    Chip input type, `'checkbox'` by default.\n\n- value (string; optional):\n    To be used with chip group.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- wrapperProps (dict; optional):\n    Props passed down to the root element.\n\n    `wrapperProps` is a dict with keys:\n#### ChipGroup\n\n- children (a list of or a singular dash component, string or number; optional):\n    `Chip` components and any other elements.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- deselectable (boolean; optional):\n    Allow to deselect Chip in Radio mode.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- multiple (boolean; optional):\n    Determines whether it is allowed to select multiple values,\n    `False` by default.\n\n- persisted_props (list of strings; optional):\n    Properties whose user interactions will persist after refreshing\n    the component or the page. Since only `value` is allowed this prop\n    can normally be ignored.\n\n- persistence (string | number | boolean; optional):\n    Used to allow user interactions in this component to be persisted\n    when the component - or the page - is refreshed. If `persisted` is\n    truthy and hasn't changed from its previous value, a `value` that\n    the user has changed while using the app will keep that change, as\n    long as the new `value` also matches what was given originally.\n    Used in conjunction with `persistence_type`. Note:  The component\n    must have an `id` for persistence to work.\n\n- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):\n    Where persisted user changes will be stored: memory: only kept in\n    memory, reset on page refresh. local: window.localStorage, data is\n    kept after the browser quit. session: window.sessionStorage, data\n    is cleared once the browser quit.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- value (string | list of strings; optional):\n    When using multiple=True, value must be a list."
  },
  {
    "name": "ColorInput",
    "description": "Capture color inputs from user.",
    "endpoint": "/components/colorinput",
    "package": "dash_mantine_components",
    "category": "Inputs",
    "content": "\n\n## ColorInput  \nCapture color inputs from user.  \nCategory: Inputs  \n\n### Simple Example\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import Output, Input, html, callback\n\ncomponent = html.Div(\n    [\n        dmc.ColorInput(id=\"color-input\", label=\"Your favorite color\", w=250),\n        dmc.Space(h=10),\n        dmc.Text(id=\"selected-color-input\"),\n    ]\n)\n\n\n@callback(Output(\"selected-color-input\", \"children\"), Input(\"color-input\", \"value\"))\ndef pick(color):\n    return f\"You selected: {color}\"\n```\n### Formats\nComponent supports hex, hexa, rgb, rgba, hsl and hsla color formats. Slider to change opacity is displayed only for hexa, rgba and hsla formats.\n\n### Disable free input\nTo disable free input set disallowInput prop.\n\n```python\nimport dash_mantine_components as dmc\n\n\ncomponent = dmc.ColorInput(\n    disallowInput=True, label=\"Your favorite color\", value=\"#e05e5e\", w=250\n)\n```\n### With swatches\nWith swatches\nYou can add any amount of predefined color swatches.  By default, there will be 10 swatches per row, you can change this with `swatchesPerRow` prop, like in ColorPicker component.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.ColorInput(\n    label=\"Your favorite color\",\n    value=\"#e05e5e\",\n    w=250,\n    format=\"hex\",\n    swatches=[\n        \"#25262b\",\n        \"#868e96\",\n        \"#fa5252\",\n        \"#e64980\",\n        \"#be4bdb\",\n        \"#7950f2\",\n        \"#4c6ef5\",\n        \"#228be6\",\n        \"#15aabf\",\n        \"#12b886\",\n        \"#40c057\",\n        \"#82c91e\",\n        \"#fab005\",\n        \"#fd7e14\",\n    ],\n)\n```\nIf you need to restrict color picking to certain colors – disable color picker and disallow free input:\n\n```python\nimport dash_mantine_components as dmc\n\ncolors = dmc.DEFAULT_THEME[\"colors\"]\n\ncomponent = dmc.ColorInput(\n    label=\"Your favorite color\",\n    value=\"#40c057\",\n    disallowInput=True,\n    w=250,\n    withPicker=False,\n    swatches=colors[\"red\"] + colors[\"green\"],\n)\n```\n### Remove or replace preview\nBy default, color preview will be rendered on the left side of the input, you can remove it using `withPreview=False` or replace with an icon.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ncomponent = dmc.Stack(\n    [\n        dmc.ColorInput(\n            label=\"Without preview\",\n            withPreview=False,\n            value=\"#40c057\",\n            w=250,\n        ),\n        dmc.ColorInput(\n            label=\"With icon\",\n            leftSection=DashIconify(icon=\"cil:paint\"),\n            withPreview=False,\n            w=250,\n            value=\"#40c057\",\n        ),\n    ]\n)\n```\n### Eye dropper\nSet `withEyeDropper` prop to display eye dropper icon in the right section. This feature depends on `EyeDropper` API, the eye dropper will not be rendered if the API is not supported.\n\n```python\nimport dash_mantine_components as dmc\n\n\ncomponent = dmc.ColorInput(\n    withEyeDropper=True, label=\"Pick any color from the page\", w=250\n)\n```\n### Input props\n\n### Accessibility\n#### Color picker focus\nColor picker is not focusable, users without mouse access can select color only by entering it into input manually. If you want to make component accessible do not disable free input.\n\n#### aria-label\nProvide `aria-labe`l in case you use component without label for screen reader support:\n\n```python\nimport dash_mantine_components as dmc\n\ndmc.ColorInput(value=\"#ffffff\")  # not ok, input is not labeled\ndmc.ColorInput(label=\"Pick color\") # ok, input and label is connected\ndmc.ColorInput(**{\"aria-label\": \"My input\"}) # ok, label is not visible but will be announced by screen readers\n```\n\n### StylesAPI\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n| Name              | Static selector                       | Description                                                         |\n|:------------------|:--------------------------------------|:--------------------------------------------------------------------|\n| wrapper           | .mantine-ColorInput-wrapper           | Root element                                                        |\n| input             | .mantine-ColorInput-input             | Input element                                                       |\n| section           | .mantine-ColorInput-section           | Left and right sections                                             |\n| root              | .mantine-ColorInput-root              | Root element                                                        |\n| label             | .mantine-ColorInput-label             | Label element                                                       |\n| required          | .mantine-ColorInput-required          | Required asterisk element, rendered inside label                    |\n| description       | .mantine-ColorInput-description       | Description element                                                 |\n| error             | .mantine-ColorInput-error             | Error element                                                       |\n| preview           | .mantine-ColorInput-preview           | Color preview, displayed only when `format` supports alpha channel  |\n| body              | .mantine-ColorInput-body              | Contains alpha/hue sliders and color preview                        |\n| slider            | .mantine-ColorInput-slider            | Alpha and hue sliders root                                          |\n| sliderOverlay     | .mantine-ColorInput-sliderOverlay     | Element used to display various overlays over hue and alpha sliders |\n| saturation        | .mantine-ColorInput-saturation        | Saturation picker                                                   |\n| saturationOverlay | .mantine-ColorInput-saturationOverlay | Element used to display various overlays over saturation picker     |\n| sliders           | .mantine-ColorInput-sliders           | Contains alpha and hue sliders                                      |\n| thumb             | .mantine-ColorInput-thumb             | Thumb of all sliders                                                |\n| swatch            | .mantine-ColorInput-swatch            | Color swatch                                                        |\n| swatches          | .mantine-ColorInput-swatches          | Color swatches list                                                 |\n| dropdown          | .mantine-ColorInput-dropdown          | Popover dropdown                                                    |\n| colorPreview      | .mantine-ColorInput-colorPreview      | Color swatch preview in input left section                          |\n| eyeDropperButton  | .mantine-ColorInput-eyeDropperButton  | Eye dropper button                                                  |\n| eyeDropperIcon    | .mantine-ColorInput-eyeDropperIcon    | Default eye dropper icon                                            |\n\n\n### Keyword Arguments\n#### ColorInput\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- closeOnColorSwatchClick (boolean; optional):\n    Determines whether the dropdown should be closed when one of the\n    color swatches is clicked, `False` by default.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- description (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Description` component. If not set, description\n    is not rendered.\n\n- descriptionProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Description` component.\n\n- disabled (boolean; optional):\n    Sets `disabled` attribute on the `input` element.\n\n- disallowInput (boolean; optional):\n    If input is not allowed, the user can only pick value with color\n    picker and swatches, `False` by default.\n\n- error (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Error` component. If not set, error is not\n    rendered.\n\n- errorProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Error` component.\n\n- eyeDropperButtonProps (dict; optional):\n    Props passed down to the eye dropper button.\n\n    `eyeDropperButtonProps` is a dict with keys:\n\n- eyeDropperIcon (a list of or a singular dash component, string or number; optional):\n    An icon to replace the default eye dropper icon.\n\n- fixOnBlur (boolean; optional):\n    Determines whether the input value should be reset to the last\n    known valid value when the input loses focus, `True` by default.\n\n- format (a value equal to: 'hex', 'hexa', 'rgba', 'rgb', 'hsl', 'hsla'; optional):\n    Color format, `'hex'` by default.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- inputProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input` component.\n\n- inputWrapperOrder (list of a value equal to: 'label', 'input', 'description', 'error's; optional):\n    Controls order of the elements, `['label', 'description', 'input',\n    'error']` by default.\n\n- label (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Label` component. If not set, label is not\n    rendered.\n\n- labelProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Label` component.\n\n- leftSection (a list of or a singular dash component, string or number; optional):\n    Content section rendered on the left side of the input.\n\n- leftSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'auto', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):\n    Sets `pointer-events` styles on the `leftSection` element,\n    `'none'` by default.\n\n- leftSectionProps (dict; optional):\n    Props passed down to the `leftSection` element.\n\n- leftSectionWidth (string | number; optional):\n    Left section width, used to set `width` of the section and input\n    `padding-left`, by default equals to the input height.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- name (string; optional):\n    Name prop.\n\n- persisted_props (list of strings; optional):\n    Properties whose user interactions will persist after refreshing\n    the component or the page. Since only `value` is allowed this prop\n    can normally be ignored.\n\n- persistence (string | number | boolean; optional):\n    Used to allow user interactions in this component to be persisted\n    when the component - or the page - is refreshed. If `persisted` is\n    truthy and hasn't changed from its previous value, a `value` that\n    the user has changed while using the app will keep that change, as\n    long as the new `value` also matches what was given originally.\n    Used in conjunction with `persistence_type`. Note:  The component\n    must have an `id` for persistence to work.\n\n- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):\n    Where persisted user changes will be stored: memory: only kept in\n    memory, reset on page refresh. local: window.localStorage, data is\n    kept after the browser quit. session: window.sessionStorage, data\n    is cleared once the browser quit.\n\n- placeholder (string; optional):\n    Placeholder.\n\n- pointer (boolean; optional):\n    Determines whether the input should have `cursor: pointer` style,\n    `False` by default.\n\n- popoverProps (dict; optional):\n    Props passed down to the `Popover` component.\n\n    `popoverProps` is a dict with keys:\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set\n    `border-radius`, numbers are converted to rem,\n    `theme.defaultRadius` by default.\n\n- readOnly (boolean; optional):\n    Readonly.\n\n- required (boolean; optional):\n    Adds required attribute to the input and a red asterisk on the\n    right side of label, `False` by default.\n\n- rightSection (a list of or a singular dash component, string or number; optional):\n    Content section rendered on the right side of the input.\n\n- rightSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'auto', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):\n    Sets `pointer-events` styles on the `rightSection` element,\n    `'none'` by default.\n\n- rightSectionProps (dict; optional):\n    Props passed down to the `rightSection` element.\n\n- rightSectionWidth (string | number; optional):\n    Right section width, used to set `width` of the section and input\n    `padding-right`, by default equals to the input height.\n\n- size (optional):\n    Controls input `height` and horizontal `padding`, `'sm'` by\n    default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- swatches (list of strings; optional):\n    An array of colors in one of the supported formats. Used to render\n    swatches list below the color picker.\n\n- swatchesPerRow (number; optional):\n    Number of swatches per row, `7` by default.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- value (string; optional):\n    Controlled component value.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withAsterisk (boolean; optional):\n    Determines whether the required asterisk should be displayed.\n    Overrides `required` prop. Does not add required attribute to the\n    input. `False` by default.\n\n- withErrorStyles (boolean; optional):\n    Determines whether the input should have red border and red text\n    color when the `error` prop is set, `True` by default.\n\n- withEyeDropper (boolean; optional):\n    Determines whether eye dropper button should be displayed in the\n    right section, `True` by default.\n\n- withPicker (boolean; optional):\n    Determines whether the color picker should be displayed, `True` by\n    default.\n\n- withPreview (boolean; optional):\n    Determines whether the preview color swatch should be displayed in\n    the left section of the input, `True` by default.\n\n- wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the root element."
  },
  {
    "name": "ColorPicker",
    "description": "Use Colorpicker for color inputs in various formats such as hex, rgb, hsl etc.",
    "endpoint": "/components/colorpicker",
    "package": "dash_mantine_components",
    "category": "Inputs",
    "content": "\n\n## ColorPicker  \nUse Colorpicker for color inputs in various formats such as hex, rgb, hsl etc.  \nCategory: Inputs  \n\n### Simple Example\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import Output, Input, html, callback\n\ncomponent = html.Div(\n    [\n        dmc.ColorPicker(id=\"color-picker\", format=\"rgba\", value=\"rgba(41, 96, 214, 1)\"),\n        dmc.Space(h=10),\n        dmc.Text(id=\"selected-color\"),\n    ]\n)\n\n\n@callback(Output(\"selected-color\", \"children\"), Input(\"color-picker\", \"value\"))\ndef pick(color):\n    return color\n```\n### Color Format\n\nComponent supports hex, rgb, rgba, hsl and hsla color formats. Slider to change opacity is displayed only for rgba\nand hsla formats.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html, Input, Output, callback\n\ncomponent = html.Div(\n    [\n        dmc.Group(\n            justify=\"space-between\",\n            children=[\n                dmc.ColorPicker(id=\"colorpicker-format\", format=\"hex\", value=\"#343353\"),\n                dmc.Select(\n                    id=\"format-select\",\n                    data=[\n                        {\"label\": fmt.upper(), \"value\": fmt}\n                        for fmt in [\"hex\", \"hexa\", \"rgb\", \"rgba\", \"hsl\", \"hsla\"]\n                    ],\n                    value=\"hex\",\n                ),\n            ],\n        ),\n        dmc.Space(h=10),\n        dmc.Text(id=\"selected-color-format\"),\n    ]\n)\n\n\n@callback(Output(\"colorpicker-format\", \"format\"), Input(\"format-select\", \"value\"))\ndef pick_format(value):\n    return value\n\n\n@callback(\n    Output(\"selected-color-format\", \"children\"), Input(\"colorpicker-format\", \"value\")\n)\ndef pick_color(color):\n    return color\n```\n### With Swatches\n\nYou can add any number of predefined swatches and also set the number of swatches per row.\n\n```python\nimport dash_mantine_components as dmc\n\n# fmt: off\nswatches = [\n    \"#25262b\", \"#868e96\", \"#fa5252\", \"#e64980\", \"#be4bdb\", \"#7950f2\", \"#4c6ef5\",\n    \"#228be6\", \"#15aabf\", \"#12b886\", \"#40c057\", \"#82c91e\", \"#fab005\", \"#fd7e14\"\n]\n# fmt: on\n\ncomponent = dmc.Group(\n    gap=40,\n    children=[\n        dmc.ColorPicker(swatches=swatches),\n        dmc.ColorPicker(swatches=swatches, swatchesPerRow=9),\n    ],\n)\n```\n### Without Picker\n\nTo display just the swatches and no picker, initialize the component with `withPicker=False`.\n\n```python\nimport dash_mantine_components as dmc\n\n# fmt: off\nswatches = [\n    \"#25262b\", \"#868e96\", \"#fa5252\", \"#e64980\", \"#be4bdb\", \"#7950f2\", \"#4c6ef5\",\n    \"#228be6\", \"#15aabf\", \"#12b886\", \"#40c057\", \"#82c91e\", \"#fab005\", \"#fd7e14\"\n]\n# fmt: on\n\ncomponent = dmc.ColorPicker(swatches=swatches, swatchesPerRow=7, withPicker=False)\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n| Name              | Static selector                        | Description                                                         |\n|:------------------|:---------------------------------------|:--------------------------------------------------------------------|\n| wrapper           | .mantine-ColorPicker-wrapper           | Root element                                                        |\n| preview           | .mantine-ColorPicker-preview           | Color preview, displayed only when `format` supports alpha channel  |\n| body              | .mantine-ColorPicker-body              | Contains alpha/hue sliders and color preview                        |\n| slider            | .mantine-ColorPicker-slider            | Alpha and hue sliders root                                          |\n| sliderOverlay     | .mantine-ColorPicker-sliderOverlay     | Element used to display various overlays over hue and alpha sliders |\n| saturation        | .mantine-ColorPicker-saturation        | Saturation picker                                                   |\n| saturationOverlay | .mantine-ColorPicker-saturationOverlay | Element used to display various overlays over saturation picker     |\n| sliders           | .mantine-ColorPicker-sliders           | Contains alpha and hue sliders                                      |\n| thumb             | .mantine-ColorPicker-thumb             | Thumb of all sliders                                                |\n| swatch            | .mantine-ColorPicker-swatch            | Color swatch                                                        |\n| swatches          | .mantine-ColorPicker-swatches          | Color swatches list                                                 |\n\n\n### Keyword Arguments\n#### ColorPicker\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- alphaLabel (string; optional):\n    Alpha slider `aria-label` prop.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- focusable (boolean; optional):\n    Determines whether interactive elements (sliders thumbs and\n    swatches) should be focusable, `True` by default.\n\n- format (a value equal to: 'hex', 'hexa', 'rgba', 'rgb', 'hsl', 'hsla'; optional):\n    Color format, `'hex'` by default.\n\n- fullWidth (boolean; optional):\n    Determines whether the component should take 100% width of its\n    container, `False` by default.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- hueLabel (string; optional):\n    Hue slider `aria-label` prop.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- persisted_props (list of strings; optional):\n    Properties whose user interactions will persist after refreshing\n    the component or the page. Since only `value` is allowed this prop\n    can normally be ignored.\n\n- persistence (string | number | boolean; optional):\n    Used to allow user interactions in this component to be persisted\n    when the component - or the page - is refreshed. If `persisted` is\n    truthy and hasn't changed from its previous value, a `value` that\n    the user has changed while using the app will keep that change, as\n    long as the new `value` also matches what was given originally.\n    Used in conjunction with `persistence_type`. Note:  The component\n    must have an `id` for persistence to work.\n\n- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):\n    Where persisted user changes will be stored: memory: only kept in\n    memory, reset on page refresh. local: window.localStorage, data is\n    kept after the browser quit. session: window.sessionStorage, data\n    is cleared once the browser quit.\n\n- saturationLabel (string; optional):\n    Saturation slider `aria-label` prop.\n\n- size (optional):\n    Controls size of hue, alpha and saturation sliders, `'md'` by\n    default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- swatches (list of strings; optional):\n    An array of colors in one of the supported formats. Used to render\n    swatches list below the color picker.\n\n- swatchesPerRow (number; optional):\n    Number of swatches per row, `7` by default.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- value (string; optional):\n    Controlled component value.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withPicker (boolean; optional):\n    Determines whether the color picker should be displayed, `True` by\n    default."
  },
  {
    "name": "Fieldset",
    "description": "Group related elements in a form.",
    "endpoint": "/components/fieldset",
    "package": "dash_mantine_components",
    "category": "Inputs",
    "content": "\n\n## Fieldset  \nGroup related elements in a form.  \nCategory: Inputs  \n\n### Introduction\n\n### Disabled State\n\nSet `disabled` prop to disable all inputs and buttons inside the fieldset:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Fieldset(\n    children=[\n        dmc.TextInput(label=\"Your name\", placeholder=\"Your name\"),\n        dmc.TextInput(label=\"Email\", placeholder=\"Email\"),\n        dmc.Group([dmc.Button(\"Send\")], justify=\"flex-end\"),\n    ],\n    legend=\"Personal information\",\n    disabled=True,\n)\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n#### Fieldset selectors\n\n| Selector | Static selector            | Description      |\n| -------- | -------------------------- | ---------------- |\n| `root`   | `.mantine-Fieldset-root`    | Root element     |\n| `legend` | `.mantine-Fieldset-legend`  | Legend element   |\n\n#### Fieldset CSS variables\n\n| Selector | Variable           | Description               |\n| -------- | ------------------ | ------------------------- |\n| `root`   | `--fieldset-radius` | Controls border-radius     |\n\n\n### Keyword Arguments\n#### TextInput\n\n- children (a list of or a singular dash component, string or number; optional)\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- disabled (boolean; optional):\n    disables all inputs and buttons inside the fieldset:.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- legend (a list of or a singular dash component, string or number; optional):\n    Fieldset legend.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set\n    `border-radius`, `theme.defaultRadius` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`."
  },
  {
    "name": "InputWrapper",
    "description": "Use InputWrapper to add label, description and error fields to custom inputs.",
    "endpoint": "/components/inputwrapper",
    "package": "dash_mantine_components",
    "category": "Inputs",
    "content": "\n\n## InputWrapper  \nUse InputWrapper to add label, description and error fields to custom inputs.  \nCategory: Inputs  \n\nThe `InputWrapper` component is built into all Dash Mantine input components, such as `TextInput`, `NumberInput`,\n`Select`, `Chip`, and `Textarea`(and more!) **You do not need to wrap these components with `InputWrapper` as it’s already included.**  \n\nUse `InputWrapper` when working with input components from other libraries, like `dash-core-components`, to ensure \nconsistent styling of input components in your app.  \n\n### Usage\n\n\n### Custom TreeInput component\n\nHere is an example of adding an `InputWapper` to the `Tree` component.\n\n```python\nimport dash_mantine_components as dmc\n\nfrom dash import Input, Output, callback\n\n\ncomponent =  dmc.InputWrapper(\n    id=\"tree-wrapper\",\n    label=\"Tree input\",\n    description=\"This is a tree input\",\n    inputWrapperOrder=[\"label\", \"description\", \"error\", \"input\"],\n    withAsterisk=True,\n    children=[\n        dmc.Tree(\n            id=\"tree\",\n            checkboxes=True,\n            data=[\n                {\n                    \"label\": \"root\",\n                    \"value\": \"value\",\n                    \"children\": [\n                        {\"label\": \"child 1\", \"value\": \"child_1\"},\n                        {\"label\": \"child 2\", \"value\": \"child_2\"},\n                    ],\n                }\n            ],\n        )\n    ],\n)\n\n@callback(\n    Output(\"tree-wrapper\", \"error\"),\n    Input(\"tree\", \"checked\"),\n)\ndef validate(checked):\n    tree_error = \"Select at least one\" if not checked else None\n    return tree_error\n```\n###  Avoid Unnecessary `InputWrapper` Usage  \n\nMost Mantine input components already include the `InputWrapper` internally, so you **should not** wrap them with `InputWrapper` yourself.  \n\nInstead, check the reference section for built-in props like `label`, `description`, and `error`, and use these props directly.\n\n**✅ Correct Usage: Use Component Props**\n```python\ndmc.Select(\n    label=\"My label\",\n    description=\"My description\"\n)\n```  \n\n**❌ Incorrect Usage: Avoid Wrapping with `InputWrapper`**\n```python\n# don't do this\ndmc.InputWrapper(\n    label=\"My label\",\n    description=\"My description\",\n    children=dmc.Select(...)  \n)\n```  \n\n### Accessibility\n\nNote that DMC input components with built-in `InputWrapper` are more accessible. For example, their labels\nare properly linked to inputs, making them screen-reader friendly and allowing users to focus the input by clicking\nthe label. This behavior does not apply when manually using `InputWrapper`.\n\nIt's possible to use the [htmlFor](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor) prop to\nlink the `InputWrapper` `label` prop to the input in the `children` prop .  However, it works only in certain components\nthat are accessible.  \n\n```python\nfrom dash import dcc\nimport dash_mantine_components as dmc\n# this is accessible  (but better to use a dmc input component instead)\ndmc.InputWrapper(\n    label=\"my-input\",\n    htmlFor=\"dcc-input\",\n    children=dcc.Input(id=\"dcc-input\")\n)\n\n# the dcc.Dropdown is not accessible\ndmc.InputWrapper(\n    label=\"my-input\",\n    htmlFor=\"dcc-dropdown\",\n    children=dcc.Dropdown(id=\"dcc-dropdown\")\n)\n\n\n```\n\n\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n#### Input Selectors\n\n| Selector  | Static selector            | Description                    |\n|-----------|---------------------------|--------------------------------|\n| wrapper   | .mantine-Input-wrapper     | Root element of the Input      |\n| input     | .mantine-Input-input       | Input element                  |\n| section   | .mantine-Input-section     | Left and right sections        |\n\n#### Input CSS Variables\n\n| Selector | Variable                              | Description |\n|----------|--------------------------------------|-------------|\n| wrapper  | --input-fz                           | Font size of the input element |\n|          | --input-height                       | Height or min-height of the input element (depends on multiline prop) |\n|          | --input-left-section-width           | Width of the left section |\n|          | --input-right-section-width          | Width of the right section |\n|          | --input-margin-bottom                | Margin-bottom of the input element, usually controlled by Input.Wrapper |\n|          | --input-margin-top                   | Margin-top of the input element, usually controlled by Input.Wrapper |\n|          | --input-padding-y                    | Padding-top and padding-bottom of the input element |\n|          | --input-radius                       | Border-radius of the input element |\n|          | --input-left-section-pointer-events  | Controls pointer-events of the left section |\n|          | --input-right-section-pointer-events | Controls pointer-events of the right section |\n\n#### Input Data Attributes\n\n| Selector       | Attribute               | Condition                           | Value  |\n|---------------|-------------------------|-------------------------------------|--------|\n| wrapper, input | data-error              | error prop is set                  | –      |\n| input         | data-disabled            | disabled prop is set               | –      |\n| wrapper       | data-with-right-section  | rightSection prop is set           | –      |\n| wrapper       | data-with-left-section   | leftSection prop is set            | –      |\n| wrapper       | data-multiline           | multiline prop is set              | –      |\n| wrapper       | data-pointer             | pointer prop is set                | –      |\n| section       | data-position            | –                                   | Section position: left or right |\n\n#### InputWrapper Selectors\n\n| Selector  | Static selector               | Description                                         |\n|-----------|--------------------------------|-----------------------------------------------------|\n| root      | .mantine-InputWrapper-root     | Root element                                       |\n| label     | .mantine-InputWrapper-label    | Label element                                      |\n| required  | .mantine-InputWrapper-required | Required asterisk element, rendered inside label   |\n| description | .mantine-InputWrapper-description | Description element                              |\n| error     | .mantine-InputWrapper-error    | Error element                                      |\n\n#### InputWrapper CSS Variables\n\n| Selector    | Variable                   | Description                           |\n|------------|----------------------------|---------------------------------------|\n| label      | --input-label-size         | Controls label font-size              |\n|            | --input-asterisk-color     | Controls label asterisk text color    |\n| error      | --input-error-size         | Controls error font-size              |\n| description | --input-description-size  | Controls description font-size        |\n\n\n\n### Keyword Arguments\n#### InputWrapper\n\n- children (a list of or a singular dash component, string or number; optional):\n    Input wrapper content.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- description (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Description` component. If not set, description\n    is not rendered.\n\n- descriptionProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Description` component.\n\n- error (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Error` component. If not set, error is not\n    rendered.\n\n- errorProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Error` component.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- htmlFor (string; optional):\n    Id of associated input.\n\n- inputWrapperOrder (list of a value equal to: 'label', 'input', 'description', 'error's; optional):\n    Controls order of the elements, `['label', 'description', 'input',\n    'error']` by default.\n\n- label (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Label` component. If not set, label is not\n    rendered.\n\n- labelElement (a value equal to: 'label', 'div'; optional):\n    `Input.Label` root element, `'label'` by default.\n\n- labelProps (dict; optional):\n    Props passed down to the `Input.Label` component.\n\n    `labelProps` is a dict with keys:\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- required (boolean; optional):\n    Adds required attribute to the input and a red asterisk on the\n    right side of label, `False` by default.\n\n- size (optional):\n    Controls size of `Input.Label`, `Input.Description` and\n    `Input.Error` components.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withAsterisk (boolean; optional):\n    Determines whether the required asterisk should be displayed.\n    Overrides `required` prop. Does not add required attribute to the\n    input. `False` by default."
  },
  {
    "name": "Inputs Overview",
    "endpoint": "/inputs-overview",
    "description": "This guide gives an overview of Input components available in Dash Mantine components.",
    "package": "dash_mantine_components",
    "category": "Inputs",
    "order": 1,
    "content": "\n\n## Inputs Overview  \nThis guide gives an overview of Input components available in Dash Mantine components.  \nCategory: Inputs  \n\n### Introduction to Mantine Inputs\n\nMantine Input components use a common base Input component giving all the inputs shared styles and features.  This helps\ngive your app a consistent design.\n\n### Use props to add labels and more\n\nInput components are made up of nested elements, so you can add things like labels, description, error message, icons and more with just a prop.\nHere is an example of the TextInput component:\n\n\n### Accessibility\nAll Mantine components, including inputs, are built with accessibility in mind, adhering to WAI-ARIA standards.\nThey provide features such as proper roles, ARIA attributes, semantic HTML, and full keyboard support out of the box,\nsimplifying the process of creating inclusive web apps.\n\n### Checkbox\n\n\n### Chip\n\n\n### ColorInput\n\n### ColorPicker\n\n\n### Fieldset\n\n\n### InputWrapper\n\nUse [InputWrapper](/components/inputwrapper) to add label, description and error fields to custom inputs.\n\n### JsonInput\n[JsonInput](/components/jsoninput) is based on `Textarea` component, it includes json validation logic and option to format input value on blur.\n\n\n### NumberInput\n\n\n### PasswordInput\n\n### PinInput\n\n\n### RadioGroup\n\n\n### Rating\n\n\n### RichTextEditor\n\n\n### SegmentedControl\n\n### Slider\n\n### RangeSlider\n\n\n### Switch\n\n\n:code: false\n\n### TextInput\n\n\n### TextArea\n\n\n### Dropdown (Select) components\n\nSee the Combobox section\n\n- [Select](/comonents/select): Single selection from a predefined list.\n- [MultiSelect](components/multiselect): Multiple selections from a predefined list.\n- [Autocomplete](components/autocomplete): Free text input with suggestions.\n- [TagsInput](components/tagsinput): Multiple value entry (tags) with free input and suggestions. \n\n\n### Date and Time components\n\nSee the Date Picker section"
  },
  {
    "name": "JsonInput",
    "description": "JsonInput is based on Textarea component, it includes json validation logic and option to format input value on blur.",
    "endpoint": "/components/jsoninput",
    "package": "dash_mantine_components",
    "category": "Inputs",
    "content": "\n\n## JsonInput  \nJsonInput is based on Textarea component, it includes json validation logic and option to format input value on blur.  \nCategory: Inputs  \n\n### Simple Example\n\nJsonInput is based on [Textarea](/components/textarea) component, it includes json validation logic and option to format input value on blur.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.JsonInput(\n    label=\"Your package.json\",\n    placeholder=\"Textarea will autosize to fit the content\",\n    validationError=\"Invalid JSON\",\n    formatOnBlur=True,\n    autosize=True,\n    minRows=4,\n)\n```\n### Styles API\n\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n| Name        | Static selector                | Description                                      |\n|:------------|:-------------------------------|:-------------------------------------------------|\n| wrapper     | .mantine-JsonInput-wrapper     | Root element of the Input                        |\n| input       | .mantine-JsonInput-input       | Input element                                    |\n| section     | .mantine-JsonInput-section     | Left and right sections                          |\n| root        | .mantine-JsonInput-root        | Root element                                     |\n| label       | .mantine-JsonInput-label       | Label element                                    |\n| required    | .mantine-JsonInput-required    | Required asterisk element, rendered inside label |\n| description | .mantine-JsonInput-description | Description element                              |\n| error       | .mantine-JsonInput-error       | Error element                                    |\n\n\n### Keyword Arguments\n#### JsonInput\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- autoComplete (string; default 'off'):\n    (string; default \"off\") Enables the browser to attempt\n    autocompletion based on user history.  For more information, see:\n    https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete.\n\n- autosize (boolean; optional):\n    Determines whether the textarea height should grow with its\n    content, `False` by default.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- debounce (number | boolean; default False):\n    (boolean | number; default False): If True, changes to input will\n    be sent back to the Dash server only on enter or when losing\n    focus. If it's False, it will send the value back on every change.\n    If a number, it will not send anything back to the Dash server\n    until the user has stopped typing for that number of milliseconds.\n\n- description (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Description` component. If not set, description\n    is not rendered.\n\n- descriptionProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Description` component.\n\n- disabled (boolean; optional):\n    Sets `disabled` attribute on the `input` element.\n\n- error (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Error` component. If not set, error is not\n    rendered.\n\n- errorProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Error` component.\n\n- formatOnBlur (boolean; optional):\n    Determines whether the value should be formatted on blur, `False`\n    by default.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- inputProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input` component.\n\n- inputWrapperOrder (list of a value equal to: 'label', 'input', 'description', 'error's; optional):\n    Controls order of the elements, `['label', 'description', 'input',\n    'error']` by default.\n\n- label (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Label` component. If not set, label is not\n    rendered.\n\n- labelProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Label` component.\n\n- leftSection (a list of or a singular dash component, string or number; optional):\n    Content section rendered on the left side of the input.\n\n- leftSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'none', 'auto', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):\n    Sets `pointer-events` styles on the `leftSection` element,\n    `'none'` by default.\n\n- leftSectionProps (dict; optional):\n    Props passed down to the `leftSection` element.\n\n- leftSectionWidth (string | number; optional):\n    Left section width, used to set `width` of the section and input\n    `padding-left`, by default equals to the input height.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- maxRows (number; optional):\n    Maximum rows for autosize textarea to grow, ignored if `autosize`\n    prop is not set.\n\n- minRows (number; optional):\n    Minimum rows of autosize textarea, ignored if `autosize` prop is\n    not set.\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- n_blur (number; default 0):\n    An integer that represents the number of times that this element\n    has lost focus.\n\n- n_submit (number; default 0):\n    An integer that represents the number of times that this element\n    has been submitted.\n\n- name (string; optional):\n    Name prop.\n\n- persisted_props (list of strings; optional):\n    Properties whose user interactions will persist after refreshing\n    the component or the page. Since only `value` is allowed this prop\n    can normally be ignored.\n\n- persistence (string | number | boolean; optional):\n    Used to allow user interactions in this component to be persisted\n    when the component - or the page - is refreshed. If `persisted` is\n    truthy and hasn't changed from its previous value, a `value` that\n    the user has changed while using the app will keep that change, as\n    long as the new `value` also matches what was given originally.\n    Used in conjunction with `persistence_type`. Note:  The component\n    must have an `id` for persistence to work.\n\n- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):\n    Where persisted user changes will be stored: memory: only kept in\n    memory, reset on page refresh. local: window.localStorage, data is\n    kept after the browser quit. session: window.sessionStorage, data\n    is cleared once the browser quit.\n\n- placeholder (string; optional):\n    Placeholder.\n\n- pointer (boolean; optional):\n    Determines whether the input should have `cursor: pointer` style,\n    `False` by default.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set\n    `border-radius`, numbers are converted to rem,\n    `theme.defaultRadius` by default.\n\n- readOnly (boolean; optional):\n    Readonly.\n\n- required (boolean; optional):\n    Adds required attribute to the input and a red asterisk on the\n    right side of label, `False` by default.\n\n- resize (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'none', 'block', 'inline', 'both', 'horizontal', 'vertical'; optional):\n    Controls `resize` CSS property, `'none'` by default.\n\n- rightSection (a list of or a singular dash component, string or number; optional):\n    Content section rendered on the right side of the input.\n\n- rightSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'none', 'auto', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):\n    Sets `pointer-events` styles on the `rightSection` element,\n    `'none'` by default.\n\n- rightSectionProps (dict; optional):\n    Props passed down to the `rightSection` element.\n\n- rightSectionWidth (string | number; optional):\n    Right section width, used to set `width` of the section and input\n    `padding-right`, by default equals to the input height.\n\n- size (optional):\n    Controls input `height` and horizontal `padding`, `'sm'` by\n    default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- validationError (a list of or a singular dash component, string or number; optional):\n    Error message displayed when value is not valid JSON.\n\n- value (string; default ''):\n    Value for controlled component.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withAsterisk (boolean; optional):\n    Determines whether the required asterisk should be displayed.\n    Overrides `required` prop. Does not add required attribute to the\n    input. `False` by default.\n\n- withErrorStyles (boolean; optional):\n    Determines whether the input should have red border and red text\n    color when the `error` prop is set, `True` by default.\n\n- wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the root element."
  },
  {
    "name": "NumberInput",
    "description": "Use NumberInput to provide a field for entering numbers in your app with ability to set min, max and step.",
    "endpoint": "/components/numberinput",
    "package": "dash_mantine_components",
    "category": "Inputs",
    "content": "\n\n## NumberInput  \nUse NumberInput to provide a field for entering numbers in your app with ability to set min, max and step.  \nCategory: Inputs  \n\n### Introduction\n\n### Value Type\n\nThe `value` prop in `NumberInput` can be either a string or a number. Generally, if the `value` can be represented as \na number (e.g., 55, 1.28, -100), it will be treated as a number. However, there are specific cases where the value \ncannot be represented as a number and is instead treated as a string:\n\n - Empty State: An empty state is represented as an empty string (`''`). **To clear the value in a callback, use `''` instead of `None`.**\n- Exceeding Safe Integer Limits: If the number is larger than [Number.MAX_SAFE_INTEGER](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER) \nor smaller than [Number.MIN_SAFE_INTEGER](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER),\nit will be represented as a string (e.g., '90071992547409910').\n- Multiple Zeros: Numbers that consist only of zeros or have trailing zeros are represented as strings (e.g., '0.', '0.0', '-0.00', etc.).\n\n\n### min and max\n\nSet `min` and `max` props to limit the input value:\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.NumberInput(\n    label=\"Enter value between 10 and 20\",\n    min=10,\n    max=20,\n    w=250,\n)\n```\n### Clamp behavior\nBy default, the `value` is clamped when the input is blurred. If you set `clampBehavior=\"strict\"`, it will not be\npossible to enter value outside of min/max range. Note that this option may cause issues if you have tight\n`min` and `max`, for example `min=10` and `max=20`. If you need to disable value clamping entirely, set `clampBehavior=\"none\"`.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.NumberInput(\n    label=\"You cannot enter number less than 0 or greater than 100\",\n    placeholder=\"You cannot enter number less than 0 or greater than 100\",\n    clampBehavior=\"strict\",\n    min=0,\n    max=100,\n    w=450,\n)\n```\n### Prefix and suffix\nSet `prefix` and `suffix` props to add given string to the start or end of the input value:\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Stack([\n    dmc.NumberInput(\n        label=\"With prefix\",\n        placeholder=\"Dollars\",\n        prefix=\"$\",\n        value=100,\n        w=250,\n        mb=\"md\"\n    ),\n    dmc.NumberInput(\n        label=\"With suffix\",\n        placeholder=\"Percent\",\n        suffix=\"%\",\n        value=100,\n        w=250,\n        mt=\"md\"\n    ),\n])\n```\n### Negative numbers\nBy default, negative numbers are allowed. Set `allowNegative=False` to allow only positive numbers.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.NumberInput(\n    label=\"Negative numbers are not allowed\",\n    placeholder=\"Do not enter negative numbers\",\n    allowNegative=False,\n    w=300,\n)\n```\n### Decimal numbers\nBy default, decimal numbers are allowed. Set `allowDecimal=False` to allow only integers.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.NumberInput(\n    label=\"Decimal numbers are not allowed\",\n    placeholder=\"Do not enter decimal numbers\",\n    allowDecimal=False,\n    w=250,\n)\n```\n### Decimal scale\n`decimalScale` controls how many decimal places are allowed:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Stack([\n    dmc.NumberInput(\n        label=\"You can enter only 2 digits after decimal point\",\n        placeholder=\"Do not enter more than 2 decimals\",\n        decimalScale=2,\n        w=250,\n        mb=\"md\"\n    ),\n    dmc.NumberInput(\n        label=\"Number input with decimal steps\",\n        value=0.05,\n        decimalScale=2,\n        min=-1,\n        step=0.05,\n        max=1,\n        w=250,\n        mt=\"md\"\n    )\n])\n```\n### Fixed decimal scale\nSet `fixedDecimalScale=True` to always display fixed number of decimal places:\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.NumberInput(\n    label=\"Always show 2 digits after decimal point\",\n    placeholder=\"Do not enter more than 2\",\n    decimalScale=2,\n    fixedDecimalScale=True,\n    value=2.2,\n    w=250,\n)\n```\n### Decimal separator\nSet `decimalSeparator` to change decimal separator character:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.NumberInput(\n    label=\"Custom decimal separator\",\n    decimalSeparator=\",\",\n    value=20.234,\n    w=250,\n)\n```\n### Thousand separator\nSet `thousandSeparator` prop to separate thousands with a character. You can control\ngrouping logic with `thousandsGroupStyle`, it accepts: `thousand`, `lakh`, `wan`, `none` values.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Stack([\n\n    dmc.NumberInput(\n        label=\"Thousands are separated with a comma\",\n        placeholder=\"Thousands are separated with a comma\",\n        thousandSeparator=\",\",\n        value=1_000_000,\n        w=400\n    ),\n\n    dmc.NumberInput(\n        label=\"Thousands are separated with a space\",\n        placeholder=\"Thousands are separated with a space\",\n        thousandSeparator=\" \",\n        value=1_000_000,\n        mt=\"md\",\n        w=400\n    )\n])\n```\n### Left and right sections\n\nYou can use DashIconify to add icon to the NumberInput.\n\n`NumberInput` supports `leftSection` and `rightSection` props. These sections are rendered with absolute position \ninside the input wrapper. You can use them to display icons, input controls or any other elements.\n\nYou can use the following props to control sections styles and content:\n\n- `rightSection/leftSection` – components to render on the corresponding side of input\n- `rightSectionWidth/leftSectionWidth` – controls width of the right section and padding on the corresponding side of the input. By default, it is controlled by component size prop.\n- `rightSectionPointerEvents/leftSectionPointerEvents` – controls pointer-events property of the section. If you want to render a non-interactive element, set it to none to pass clicks through to the input.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ncomponent = dmc.Stack([\n    dmc.NumberInput(\n        label=\"With left section\",\n        description=\"From 0 to infinity, in steps of 5\",\n        value=5,\n        min=0,\n        step=5,\n        leftSection=DashIconify(icon=\"fa6-solid:weight-scale\"),\n        w=250,\n    ),\n    dmc.NumberInput(\n        label=\"With right section\",\n        description=\"From 0 to infinity, in steps of 5\",\n        value=5,\n        min=0,\n        step=5,\n        rightSection=DashIconify(icon=\"fa6-solid:weight-scale\"),\n        w=250,\n    )\n])\n```\n### Increment/decrement on hold\n\nSet `stepHoldDelay` and `stepHoldInterval` props to define behavior when increment/decrement controls are clicked and \nheld.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.NumberInput(\n    label=\"Step on hold\",\n    description=\"Step the value when clicking and holding the arrows\",\n    stepHoldDelay=500,\n    stepHoldInterval=100,\n    value=0,\n    w=250,\n)\n```\n### Remove controls\n\nControls are not rendered in these cases:\n\n- `hideControls` prop is set to `True`\n- Input is disabled\n- `variant` prop is set to \"unstyled\"\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Stack(\n    [\n        dmc.NumberInput(label=\"By default controls are visible\", w=250),\n        dmc.NumberInput(\n            label=\"Hide controls\", hideControls=True, w=250\n        ),\n        dmc.NumberInput(\n            label=\"Disabled and hide controls\",\n            disabled=True,\n            hideControls=True,\n            w=250,\n        ),\n    ]\n)\n```\n### Disabled state\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.NumberInput(disabled=True, label=\"Disabled input\", placeholder=\"Disabled input\", p=\"lg\"),\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n#### NumberInput Selectors\n\n| Selector    | Static selector                | Description                                      |\n|-------------|--------------------------------|--------------------------------------------------|\n| wrapper     | .mantine-NumberInput-wrapper   | Root element of the Input                        |\n| input       | .mantine-NumberInput-input     | Input element                                    |\n| section     | .mantine-NumberInput-section   | Left and right sections                          |\n| root        | .mantine-NumberInput-root      | Root element                                     |\n| label       | .mantine-NumberInput-label     | Label element                                    |\n| required    | .mantine-NumberInput-required  | Required asterisk element, rendered inside label |\n| description | .mantine-NumberInput-description | Description element                              |\n| error       | .mantine-NumberInput-error     | Error element                                    |\n| controls    | .mantine-NumberInput-controls  | Increment and decrement buttons wrapper          |\n| control     | .mantine-NumberInput-control   | Increment and decrement buttons                  |\n\n#### NumberInput CSS Variables\n\n| Selector  | Variable            | Description                                 |\n|-----------|----------------------|---------------------------------------------|\n| controls  | --ni-chevron-size    | Controls width and height of the chevron icon |\n\n#### NumberInput Data Attributes\n\n| Selector | Attribute       | Value                               |\n|----------|------------------|-------------------------------------|\n| control  | data-direction   | \"up\" or \"down\" depending on control |\n\n\n\n### Keyword Arguments\n#### NumberInput\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- allowDecimal (boolean; optional):\n    Determines whether decimal values are allowed, `True` by default.\n\n- allowLeadingZeros (boolean; optional):\n    Determines whether leading zeros are allowed. If not set, leading\n    zeros are removed when the input is blurred. `False` by default.\n\n- allowNegative (boolean; optional):\n    Determines whether negative values are allowed, `True` by default.\n\n- allowedDecimalSeparators (list of strings; optional):\n    Characters which when pressed result in a decimal separator,\n    `['.']` by default.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- autoComplete (string; default 'off'):\n    (string; default \"off\") Enables the browser to attempt\n    autocompletion based on user history.  For more information, see:\n    https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete.\n\n- clampBehavior (a value equal to: 'none', 'strict', 'blur'; optional):\n    Controls how value is clamped, `strict` – user is not allowed to\n    enter values that are not in `[min, max]` range, `blur` – user is\n    allowed to enter any values, but the value is clamped when the\n    input loses focus (default behavior), `none` – lifts all\n    restrictions, `[min, max]` range is applied only for controls and\n    up/down keys.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- debounce (number | boolean; default False):\n    (boolean | number; default False): If True, changes to input will\n    be sent back to the Dash server only on enter or when losing\n    focus. If it's False, it will send the value back on every change.\n    If a number, it will not send anything back to the Dash server\n    until the user has stopped typing for that number of milliseconds.\n\n- decimalScale (number; optional):\n    Limits the number of digits that can be entered after the decimal\n    point.\n\n- decimalSeparator (string; optional):\n    Character used as a decimal separator, `'.'` by default.\n\n- description (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Description` component. If not set, description\n    is not rendered.\n\n- descriptionProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Description` component.\n\n- disabled (boolean; optional):\n    Sets disabled attribute on the input element.\n\n- error (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Error` component. If not set, error is not\n    rendered.\n\n- errorProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Error` component.\n\n- fixedDecimalScale (boolean; optional):\n    If set, 0s are added after `decimalSeparator` to match given\n    `decimalScale`. `False` by default.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- hideControls (boolean; optional):\n    Determines whether the up/down controls should be hidden, `False`\n    by default.\n\n- inputProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input` component.\n\n- inputWrapperOrder (list of a value equal to: 'label', 'input', 'description', 'error's; optional):\n    Controls order of the elements, `['label', 'description', 'input',\n    'error']` by default.\n\n- label (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Label` component. If not set, label is not\n    rendered.\n\n- labelProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Label` component.\n\n- leftSection (a list of or a singular dash component, string or number; optional):\n    Content section rendered on the left side of the input.\n\n- leftSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'none', 'auto', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):\n    Sets `pointer-events` styles on the `leftSection` element,\n    `'none'` by default.\n\n- leftSectionProps (dict; optional):\n    Props passed down to the `leftSection` element.\n\n- leftSectionWidth (string | number; optional):\n    Left section width, used to set `width` of the section and input\n    `padding-left`, by default equals to the input height.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- max (number; optional):\n    Maximum possible value.\n\n- min (number; optional):\n    Minimum possible value.\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- n_blur (number; default 0):\n    An integer that represents the number of times that this element\n    has lost focus.\n\n- n_submit (number; default 0):\n    An integer that represents the number of times that this element\n    has been submitted.\n\n- name (string; optional):\n    Name prop.\n\n- persisted_props (list of strings; optional):\n    Properties whose user interactions will persist after refreshing\n    the component or the page. Since only `value` is allowed this prop\n    can normally be ignored.\n\n- persistence (string | number | boolean; optional):\n    Used to allow user interactions in this component to be persisted\n    when the component - or the page - is refreshed. If `persisted` is\n    truthy and hasn't changed from its previous value, a `value` that\n    the user has changed while using the app will keep that change, as\n    long as the new `value` also matches what was given originally.\n    Used in conjunction with `persistence_type`. Note:  The component\n    must have an `id` for persistence to work.\n\n- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):\n    Where persisted user changes will be stored: memory: only kept in\n    memory, reset on page refresh. local: window.localStorage, data is\n    kept after the browser quit. session: window.sessionStorage, data\n    is cleared once the browser quit.\n\n- placeholder (string; optional):\n    Placeholder.\n\n- pointer (boolean; optional):\n    Determines whether the input should have `cursor: pointer` style,\n    `False` by default.\n\n- prefix (string; optional):\n    Prefix added before the input value.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set\n    `border-radius`, numbers are converted to rem,\n    `theme.defaultRadius` by default.\n\n- readOnly (boolean; optional):\n    Readonly.\n\n- required (boolean; optional):\n    Adds required attribute to the input and a red asterisk on the\n    right side of label, `False` by default.\n\n- rightSection (a list of or a singular dash component, string or number; optional):\n    Content section rendered on the right side of the input.\n\n- rightSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'none', 'auto', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):\n    Sets `pointer-events` styles on the `rightSection` element,\n    `'none'` by default.\n\n- rightSectionProps (dict; optional):\n    Props passed down to the `rightSection` element.\n\n- rightSectionWidth (string | number; optional):\n    Right section width, used to set `width` of the section and input\n    `padding-right`, by default equals to the input height.\n\n- size (optional):\n    Controls input `height` and horizontal `padding`, `'sm'` by\n    default.\n\n- startValue (number; optional):\n    Value set to the input when increment/decrement buttons are\n    clicked or up/down arrows pressed if the input is empty, `0` by\n    default.\n\n- step (number; optional):\n    Number by which value will be incremented/decremented with up/down\n    controls and keyboard arrows, `1` by default.\n\n- stepHoldDelay (number; optional):\n    Initial delay in milliseconds before stepping the value.\n\n- stepHoldInterval (number; optional):\n    Delay before stepping the value. Can be a number of milliseconds\n    or a function that receives the current step count and returns the\n    delay in milliseconds.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- suffix (string; optional):\n    Suffix added after the input value.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- thousandSeparator (string | boolean; optional):\n    A character used to separate thousands.\n\n- thousandsGroupStyle (a value equal to: 'none', 'thousand', 'lakh', 'wan'; optional):\n    Defines the thousand grouping style.\n\n- type (a value equal to: 'text', 'tel', 'password'; optional):\n    Controls input `type` attribute, `'text'` by default.\n\n- value (string | number; optional):\n    Controlled component value.\n\n- valueIsNumericString (boolean; optional):\n    If value is passed as string representation of numbers\n    (unformatted) and number is used in any format props like in\n    prefix or suffix in numeric format and format prop in pattern\n    format then this should be passed as `True`. `False` by default.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withAsterisk (boolean; optional):\n    Determines whether the required asterisk should be displayed.\n    Overrides `required` prop. Does not add required attribute to the\n    input. `False` by default.\n\n- withErrorStyles (boolean; optional):\n    Determines whether the input should have red border and red text\n    color when the `error` prop is set, `True` by default.\n\n- wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the root element."
  },
  {
    "name": "PasswordInput",
    "description": "Use PasswordInput to capture password from user with an option to toggle visibility.",
    "endpoint": "/components/passwordinput",
    "package": "dash_mantine_components",
    "category": "Inputs",
    "content": "\n\n## PasswordInput  \nUse PasswordInput to capture password from user with an option to toggle visibility.  \nCategory: Inputs  \n\n### Introduction\n\nUse PasswordInput when you need to capture password from user. Component provides an option to toggle password \nvisibility, if you do not want this feature, use [TextInput](/components/textinput) component with `type='password'`.\n\n### Invalid State and Error\n\nUse `error` prop to convey an error with an error message and a red border around the input.\n\nNote: Dash adds thick red outline to the input element with `:invalid` pseudo-class. This conflicts with Mantine. \nIn order to correct this, just add the following css to your app.\n\n```css\ninput:invalid {\n    outline: none !important;\n}\n```\n\n```python\nimport dash_mantine_components as dmc\n\n\ncomponent = dmc.Stack(\n    [\n        dmc.PasswordInput(\n            label=\"Your password\",\n            placeholder=\"Your password\",\n            w=250,\n            error=True,\n        ),\n        dmc.PasswordInput(\n            label=\"Your password\",\n            placeholder=\"Your password\",\n            w=250,\n            error=\"Invalid Password\",\n        ),\n    ],\n)\n```\n### Disabled State\n\nConvey disabled input with `disabled` prop.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.PasswordInput(\n    label=\"Password\",\n    placeholder=\"Your password\",\n    w=200,\n    disabled=True,\n)\n```\n### With Icon\n\nAdd icon to the left side of the input.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ncomponent = dmc.PasswordInput(\n    label=\"Your password:\",\n    w=250,\n    placeholder=\"Your password\",\n    leftSection=DashIconify(icon=\"bi:shield-lock\"),\n)\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n| Name             | Static selector                         | Description                                      |\n|:-----------------|:----------------------------------------|:-------------------------------------------------|\n| wrapper          | .mantine-PasswordInput-wrapper          | Root element of the Input                        |\n| input            | .mantine-PasswordInput-input            | Input element                                    |\n| section          | .mantine-PasswordInput-section          | Left and right sections                          |\n| root             | .mantine-PasswordInput-root             | Root element                                     |\n| label            | .mantine-PasswordInput-label            | Label element                                    |\n| required         | .mantine-PasswordInput-required         | Required asterisk element, rendered inside label |\n| description      | .mantine-PasswordInput-description      | Description element                              |\n| error            | .mantine-PasswordInput-error            | Error element                                    |\n| innerInput       | .mantine-PasswordInput-innerInput       | Actual input element                             |\n| visibilityToggle | .mantine-PasswordInput-visibilityToggle | Visibility toggle button                         |\n\n\n### Keyword Arguments\n#### PasswordInput\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- autoComplete (string; default 'off'):\n    (string; default \"off\") Enables the browser to attempt\n    autocompletion based on user history.  For more information, see:\n    https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- debounce (number | boolean; default False):\n    (boolean | number; default False): If True, changes to input will\n    be sent back to the Dash server only on enter or when losing\n    focus. If it's False, it will send the value back on every change.\n    If a number, it will not send anything back to the Dash server\n    until the user has stopped typing for that number of milliseconds.\n\n- description (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Description` component. If not set, description\n    is not rendered.\n\n- descriptionProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Description` component.\n\n- disabled (boolean; optional):\n    Sets `disabled` attribute on the `input` element.\n\n- error (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Error` component. If not set, error is not\n    rendered.\n\n- errorProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Error` component.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- inputProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input` component.\n\n- inputWrapperOrder (list of a value equal to: 'label', 'input', 'description', 'error's; optional):\n    Controls order of the elements, `['label', 'description', 'input',\n    'error']` by default.\n\n- label (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Label` component. If not set, label is not\n    rendered.\n\n- labelProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Label` component.\n\n- leftSection (a list of or a singular dash component, string or number; optional):\n    Content section rendered on the left side of the input.\n\n- leftSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'none', 'auto', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):\n    Sets `pointer-events` styles on the `leftSection` element,\n    `'none'` by default.\n\n- leftSectionProps (dict; optional):\n    Props passed down to the `leftSection` element.\n\n- leftSectionWidth (string | number; optional):\n    Left section width, used to set `width` of the section and input\n    `padding-left`, by default equals to the input height.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- n_blur (number; default 0):\n    An integer that represents the number of times that this element\n    has lost focus.\n\n- n_submit (number; default 0):\n    An integer that represents the number of times that this element\n    has been submitted.\n\n- name (string; optional):\n    Name prop.\n\n- persisted_props (list of strings; optional):\n    Properties whose user interactions will persist after refreshing\n    the component or the page. Since only `value` is allowed this prop\n    can normally be ignored.\n\n- persistence (string | number | boolean; optional):\n    Used to allow user interactions in this component to be persisted\n    when the component - or the page - is refreshed. If `persisted` is\n    truthy and hasn't changed from its previous value, a `value` that\n    the user has changed while using the app will keep that change, as\n    long as the new `value` also matches what was given originally.\n    Used in conjunction with `persistence_type`. Note:  The component\n    must have an `id` for persistence to work.\n\n- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):\n    Where persisted user changes will be stored: memory: only kept in\n    memory, reset on page refresh. local: window.localStorage, data is\n    kept after the browser quit. session: window.sessionStorage, data\n    is cleared once the browser quit.\n\n- placeholder (string; optional):\n    Placeholder.\n\n- pointer (boolean; optional):\n    Determines whether the input should have `cursor: pointer` style,\n    `False` by default.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set\n    `border-radius`, numbers are converted to rem,\n    `theme.defaultRadius` by default.\n\n- readOnly (boolean; optional):\n    Readonly.\n\n- required (boolean; optional):\n    Adds required attribute to the input and a red asterisk on the\n    right side of label, `False` by default.\n\n- rightSection (a list of or a singular dash component, string or number; optional):\n    Content section rendered on the right side of the input.\n\n- rightSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'none', 'auto', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):\n    Sets `pointer-events` styles on the `rightSection` element,\n    `'none'` by default.\n\n- rightSectionProps (dict; optional):\n    Props passed down to the `rightSection` element.\n\n- rightSectionWidth (string | number; optional):\n    Right section width, used to set `width` of the section and input\n    `padding-right`, by default equals to the input height.\n\n- size (optional):\n    Controls input `height` and horizontal `padding`, `'sm'` by\n    default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- value (string; default ''):\n    Input value for controlled component.\n\n- variant (string; optional):\n    variant.\n\n- visibilityToggleButtonProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the visibility toggle button.\n\n- visible (boolean; optional):\n    Determines whether input content should be visible.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withAsterisk (boolean; optional):\n    Determines whether the required asterisk should be displayed.\n    Overrides `required` prop. Does not add required attribute to the\n    input. `False` by default.\n\n- withErrorStyles (boolean; optional):\n    Determines whether the input should have red border and red text\n    color when the `error` prop is set, `True` by default.\n\n- wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the root element."
  },
  {
    "name": "PinInput",
    "description": "Capture pin code or one time password from the user.",
    "endpoint": "/components/pininput",
    "package": "dash_mantine_components",
    "category": "Inputs",
    "content": "\n\n## PinInput  \nCapture pin code or one time password from the user.  \nCategory: Inputs  \n\n### Usage\n\n### Length\n\nSet `length` prop to control number of rendered fields.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Group(dmc.PinInput(length=8), justify=\"center\")\n```\n### Type\n\nBy default, PinInput accepts letters and numbers. To allow numbers only, set `type=\"number\"`:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Group(dmc.PinInput(type=\"number\"), justify=\"center\")\n```\n### Placeholder\nSet `placeholder` to change placeholder of all fields. Note that it only accepts strings.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Group(dmc.PinInput(placeholder=\"⊡\"), justify=\"center\")\n```\n### Disabled state\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Group(dmc.PinInput(disabled=True), justify=\"center\")\n```\n### Error state\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Group(dmc.PinInput(error=True), justify=\"center\")\n```\n### Masked\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Group(dmc.PinInput(mask=True), justify=\"center\")\n```\n### One Time Code\n\nSome operating systems expose last received SMS code to be used by applications like your keyboard.\nIf the current form input asks for this code, your keyboard adapts and proposes the code as keyboard-suggestion.\nProp `oneTimeCode` makes your input setting `autocomplete=\"one-time-code\"` which allows using that feature.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Group(dmc.PinInput(oneTimeCode=True), justify=\"center\")\n```\n### Accessibility\n\nInputs do not have associated labels, set aria-label to make component visible to screen reader:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Group(\n    dmc.PinInput(oneTimeCode=True, **{\"aria-label\": \"One Time Code\"}), justify=\"center\"\n)\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n| Name     | Static selector            | Description        |\n|:---------|:---------------------------|:-------------------|\n| root     | .mantine-PinInput-root     | Root element       |\n| pinInput | .mantine-PinInput-pinInput | Input item wrapper |\n| input    | .mantine-PinInput-input    | Input element      |\n\n\n### Keyword Arguments\n#### PinInput\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- ariaLabel (string; optional):\n    `aria-label` for the inputs.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- autoFocus (boolean; optional):\n    If set, the first input is focused when component is mounted,\n    `False` by default.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- disabled (boolean; optional):\n    If set, `disabled` attribute is added to all inputs.\n\n- error (boolean; optional):\n    If set, adds error styles and `aria-invalid` attribute to all\n    inputs.\n\n- form (string; optional):\n    Hidden input `form` attribute.\n\n- gap (string | number; optional):\n    Key of `theme.spacing` or any valid CSS value to set `gap` between\n    inputs, numbers are converted to rem, `'md'` by default.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- inputMode (a value equal to: 'none', 'text', 'tel', 'email', 'search', 'url', 'numeric', 'decimal'; optional):\n    `inputmode` attribute, inferred from the `type` prop if not\n    specified.\n\n- inputType (optional):\n    Inputs `type` attribute, inferred from the `type` prop if not\n    specified.\n\n- length (number; optional):\n    Number of inputs, `4` by default.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- manageFocus (boolean; optional):\n    Determines whether focus should be moved automatically to the next\n    input once filled, `True` by default.\n\n- mask (boolean; optional):\n    Changes input type to `\"password\"`, `False` by default.\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- name (string; optional):\n    Hidden input `name` attribute.\n\n- oneTimeCode (boolean; optional):\n    Determines whether `autocomplete=\"one-time-code\"` attribute\n    should be set on all inputs, `True` by default.\n\n- persisted_props (list of strings; optional):\n    Properties whose user interactions will persist after refreshing\n    the component or the page. Since only `value` is allowed this prop\n    can normally be ignored.\n\n- persistence (string | number | boolean; optional):\n    Used to allow user interactions in this component to be persisted\n    when the component - or the page - is refreshed. If `persisted` is\n    truthy and hasn't changed from its previous value, a `value` that\n    the user has changed while using the app will keep that change, as\n    long as the new `value` also matches what was given originally.\n    Used in conjunction with `persistence_type`. Note:  The component\n    must have an `id` for persistence to work.\n\n- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):\n    Where persisted user changes will be stored: memory: only kept in\n    memory, reset on page refresh. local: window.localStorage, data is\n    kept after the browser quit. session: window.sessionStorage, data\n    is cleared once the browser quit.\n\n- placeholder (string; optional):\n    Inputs placeholder, `'○'` by default.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set\n    `border-radius`, numbers are converted to rem,\n    `theme.defaultRadius` by default.\n\n- readOnly (boolean; optional):\n    If set, the user cannot edit the value.\n\n- size (a value equal to: 'xs', 'sm', 'md', 'lg', 'xl'; optional):\n    Controls inputs `width` and `height`, `'sm'` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- type (a value equal to: 'number', 'alphanumeric'; optional):\n    Determines which values can be entered, `'alphanumeric'` by\n    default.\n\n- value (string; optional):\n    Controlled component value.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`."
  },
  {
    "name": "RadioGroup",
    "description": "RadioGroup component gives user radio inputs to allow only one selection from a small set of options.",
    "endpoint": "/components/radiogroup",
    "package": "dash_mantine_components",
    "category": "Inputs",
    "content": "\n\n## RadioGroup  \nRadioGroup component gives user radio inputs to allow only one selection from a small set of options.  \nCategory: Inputs  \n\n### Simple Usage\n\nUse the `value` prop for callbacks.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html, Output, Input, callback\n\ndata = [[\"react\", \"React\"], [\"ng\", \"Angular\"], [\"svelte\", \"Svelte\"], [\"vue\", \"Vue\"]]\n\ncomponent = html.Div(\n    [\n        dmc.RadioGroup(\n            children=dmc.Group([dmc.Radio(l, value=k) for k, l in data], my=10),\n            id=\"radiogroup-simple\",\n            value=\"react\",\n            label=\"Select your favorite framework/library\",\n            size=\"sm\",\n            mb=10,\n        ),\n        dmc.Text(id=\"radio-output\"),\n    ]\n)\n\n\n@callback(Output(\"radio-output\", \"children\"), Input(\"radiogroup-simple\", \"value\"))\ndef choose_framework(value):\n    return value\n```\n### Customizing Radio\n\nEach Radio item in a RadioGroup can be customized. The Radio component is a wrapper for input type radio.  Use Stack or Group to arrange multiple Radio items\n\n### Color\n\nIn a RadioGroup component, the color property can be customized at the individual Radio level.\n\n```python\nimport dash_mantine_components as dmc\n\ndata = [\n    [\"react\", \"React\", \"blue\"],\n    [\"ng\", \"Angular\", \"orange\"],\n    [\"svelte\", \"Svelte\", \"red\"],\n    [\"dash\", \"Dash\", \"green\"],\n]\n\ncomponent = dmc.RadioGroup(\n    children=dmc.Stack([dmc.Radio(l, value=k, color=c) for k, l, c in data]),\n    value=\"ng\",\n    size=\"sm\",\n)\n```\n### Size\n\nYou can set the size of all the Radio items by using the `size` prop in the RadioGroup component.  Use one of xs, sm, md, lg and xl.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html\n\ncomponent = html.Div(\n    [\n        dmc.RadioGroup(\n            children=dmc.Group(\n                [dmc.Radio(i, value=i) for i in [\"USA\", \"Canada\", \"France\"]], my=10\n            ),\n            value=\"USA\",\n            label=\"Size Example - small\",\n            size=\"sm\",\n            mt=10,\n        ),\n        dmc.RadioGroup(\n            children=dmc.Group(\n                [dmc.Radio(i, value=i) for i in [\"USA\", \"Canada\", \"France\"]], my=10\n            ),\n            value=\"USA\",\n            label=\"Size Example - large\",\n            size=\"lg\",\n            mt=30,\n        ),\n    ]\n)\n```\n### Group or Stack\n\nIn a RadioGroup component, the Radio items can be arranged by using the Group or Stack components.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html\n\ndata = [[\"react\", \"React\"], [\"ng\", \"Angular\"], [\"svelte\", \"Svelte\"], [\"vue\", \"Vue\"]]\n\ncomponent = html.Div(\n    [\n        dmc.RadioGroup(\n            children=dmc.Group([dmc.Radio(l, value=k) for k, l in data], my=10),\n            value=\"react\",\n            label=\"Select your favorite framework/library\",\n            size=\"sm\",\n            my=10,\n        ),\n        dmc.RadioGroup(\n            children=dmc.Stack([dmc.Radio(l, value=k) for k, l in data], my=10),\n            value=\"react\",\n            label=\"Select your favorite framework/library\",\n            size=\"sm\",\n            mt=10,\n        ),\n    ]\n)\n```\n### Deselectable RadioGroup\n\nTo enable deselecting a radio chip, set `deselectable=True`\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html\n\ndata = [[\"react\", \"React\"], [\"ng\", \"Angular\"], [\"svelte\", \"Svelte\"], [\"vue\", \"Vue\"]]\n\ncomponent = html.Div(\n    [\n        dmc.RadioGroup(\n            children=dmc.Group([dmc.Radio(l, value=k) for k, l in data], my=10),\n            value=\"react\",\n            label=\"Select your favorite framework/library\",\n            size=\"sm\",\n            my=10,\n            deselectable=True\n        ),\n\n    ]\n)\n```\n### RadioIndicator component\n\n`RadioIndicator` looks exactly the same as `Radio` component, but it does not have any semantic meaning, it's just a \nvisual representation of radio state. You can use it in any place where you need to display radio state without any \ninteraction related to the indicator. For example, it is useful in cards based on buttons, trees, etc.\n\n> Note that `RadioIndicator` cannot be focused or selected with keyboard. It is not accessible and should not be used as\na replacement for Radio component.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Group([\n    dmc.RadioIndicator(),\n    dmc.RadioIndicator(checked=True),\n    dmc.RadioIndicator(disabled=True),\n    dmc.RadioIndicator(disabled=True, checked=True)\n])\n```\n### RadioCard component\n\nRadioCard component can be used as a replacement for `Radio` to build custom cards/buttons/other things that work as\nradios. The root element of the component has `role=\"radio\"` attribute, it is accessible by default and supports the\nsame keyboard interactions as `input[type=\"radio\"]`.\n\n\n```python\nimport dash_mantine_components as dmc\n\n\ncomponent = dmc.RadioCard(\n    withBorder=True,\n    p=\"md\",\n    checked=True,\n    children=[\n        dmc.Center([\n            dmc.RadioIndicator(),\n            dmc.Text(\"RadioCard\", size=\"xl\", pl=\"sm\"),\n        ], inline=True),\n    ]\n)\n```\n### RadioCard with RadioGroup\n\nYou can use `RadioCard` with `RadioGroup` the same way as `Radio` component.\n\nNote - do not set the `checked` prop in the `RadioIndicator` component otherwise the `RadioIndicator` will not be updated.\nThis example also shows how to add hover styles\n\n```python\n\nfrom dash import  Input, Output, callback\nimport dash_mantine_components as dmc\n\ndef make_radiocard(label, description):\n    return dmc.RadioCard(\n        withBorder=True,\n        p=\"md\",\n        mt=\"md\",\n        className=\"checkboxcard-root\",\n        value=label,\n        children=[\n            dmc.Group([\n                dmc.RadioIndicator(),\n                dmc.Box([\n                    dmc.Text(label, lh=\"1.3\", fz=\"md\", fw=\"bold\" ),\n                    dmc.Text(description, size=\"sm\", c=\"dimmed\"),\n                ])\n            ], wrap=\"nowrap\", align=\"flex-start\"),\n        ]\n    )\n\n\ncomponent = dmc.Box([\n    dmc.RadioGroup(\n        id=\"radiocard-group\",\n        label= \"RadioGroup label\",\n        value=\"RadioCard 1\",\n        description=\"This is a RadioGroup description\",\n        deselectable=True,\n        children=[\n            make_radiocard(f\"RadioCard {i}\", f\"RadioCard description {i}\")\n            for i in range(1, 5)\n        ]\n    ),\n    dmc.Box(id=\"radio-group-out\"),\n])\n\n\n@callback(\n    Output(\"radiocard-group-out\", \"children\"),\n    Input(\"radiocard-group\", \"value\")\n)\ndef update(checked):\n   return f\"Selected: {checked}\"\n```\n\n```css\n/* used for both CheckboxCard and RadioCard*/\n.checkboxcard-root {\n    position: relative;\n    padding: var(--mantine-spacing-md);\n    transition: border-color 150ms ease;\n\n    &[data-checked] {\n        border-color: var(--mantine-primary-color-filled);\n    }\n}\n\n.checkboxcard-root:hover {\n    background-color: light-dark(\n            var(--mantine-color-gray-0),\n            var(--mantine-color-dark-6)\n    );\n}\n```\n\n\n\n### Styles API\n\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n#### Radio Selectors\n\n| Selector       | Static selector              | Description                           |\n|---------------|------------------------------|---------------------------------------|\n| root          | .mantine-Radio-root          | Root element                         |\n| radio         | .mantine-Radio-radio         | Input element (input[type=\"radio\"])  |\n| icon          | .mantine-Radio-icon          | Radio icon, used to display checked icon |\n| inner         | .mantine-Radio-inner         | Wrapper for icon and input           |\n| body          | .mantine-Radio-body          | Input body, contains all other elements |\n| labelWrapper  | .mantine-Radio-labelWrapper  | Contains label, description, and error |\n| label         | .mantine-Radio-label         | Label element                        |\n| description   | .mantine-Radio-description   | Description displayed below the label |\n| error         | .mantine-Radio-error         | Error message displayed below the label |\n\n#### Radio CSS Variables\n\n| Selector | Variable           | Description                                |\n|----------|-------------------|--------------------------------------------|\n| root     | --radio-color     | Controls checked radio background-color   |\n|          | --radio-radius    | Controls radio border-radius              |\n|          | --radio-size      | Controls radio width and height           |\n|          | --radio-icon-color | Controls radio icon color                 |\n|          | --radio-icon-size  | Controls radio icon width and height      |\n\n#### Radio Data Attributes\n\n| Selector | Attribute           | Condition         | Value |\n|----------|--------------------|------------------|-------|\n| radio    | data-error         | `error` prop is set | –     |\n| inner    | data-label-position | –                | Value of `labelPosition` prop |\n\n#### RadioGroup Selectors\n\n| Selector    | Static selector               | Description                         |\n|------------|------------------------------|-------------------------------------|\n| root       | .mantine-RadioGroup-root     | Root element                       |\n| label      | .mantine-RadioGroup-label    | Label element                      |\n| required   | .mantine-RadioGroup-required | Required asterisk element, rendered inside label |\n| description | .mantine-RadioGroup-description | Description element                |\n| error      | .mantine-RadioGroup-error    | Error element                      |\n\n#### RadioIndicator Selectors\n\n| Selector   | Static selector                   | Description   |\n|------------|----------------------------------|---------------|\n| indicator  | .mantine-RadioIndicator-indicator | Root element  |\n| icon       | .mantine-RadioIndicator-icon     | Radio icon    |\n\n#### RadioIndicator CSS Variables\n\n| Selector   | Variable           | Description                                |\n|------------|-------------------|--------------------------------------------|\n| indicator  | --radio-color     | Controls checked radio background-color   |\n|            | --radio-radius    | Controls radio border-radius              |\n|            | --radio-size      | Controls radio width and height           |\n|            | --radio-icon-color | Controls radio icon color                 |\n|            | --radio-icon-size  | Controls radio icon width and height      |\n\n#### RadioIndicator Data Attributes\n\n| Selector   | Attribute     | Condition         |\n|------------|-------------|------------------|\n| indicator  | data-checked | `checked` prop is set |\n| indicator  | data-disabled | `disabled` prop is set |\n\n#### RadioCard Selectors\n\n| Selector | Static selector          | Description   |\n|----------|--------------------------|---------------|\n| card     | .mantine-RadioCard-card  | Root element  |\n\n#### RadioCard CSS Variables\n\n| Selector | Variable      | Description                  |\n|----------|-------------|------------------------------|\n| card     | --card-radius | Controls card border-radius |\n\n#### RadioCard Data Attributes\n\n| Selector | Attribute       | Condition                  |\n|----------|----------------|----------------------------|\n| card     | data-checked    | `checked` prop is set      |\n| card     | data-with-border | `withBorder` prop is set  |\n\n\n### Keyword Arguments\n#### RadioGroup\n\n- children (a list of or a singular dash component, string or number; required):\n    `Radio` components and any other elements.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- description (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Description` component. If not set, description\n    is not rendered.\n\n- descriptionProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Description` component.\n\n- deselectable (boolean; optional):\n    Allow to deselect Chip in Radio mode.\n\n- error (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Error` component. If not set, error is not\n    rendered.\n\n- errorProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Error` component.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- inputWrapperOrder (list of a value equal to: 'label', 'input', 'description', 'error's; optional):\n    Controls order of the elements, `['label', 'description', 'input',\n    'error']` by default.\n\n- label (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Label` component. If not set, label is not\n    rendered.\n\n- labelElement (a value equal to: 'label', 'div'; optional):\n    `Input.Label` root element, `'label'` by default.\n\n- labelProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Label` component.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- name (string; optional):\n    `name` attribute of child radio inputs. By default, `name` is\n    generated randomly.\n\n- persisted_props (list of strings; optional):\n    Properties whose user interactions will persist after refreshing\n    the component or the page. Since only `value` is allowed this prop\n    can normally be ignored.\n\n- persistence (string | number | boolean; optional):\n    Used to allow user interactions in this component to be persisted\n    when the component - or the page - is refreshed. If `persisted` is\n    truthy and hasn't changed from its previous value, a `value` that\n    the user has changed while using the app will keep that change, as\n    long as the new `value` also matches what was given originally.\n    Used in conjunction with `persistence_type`. Note:  The component\n    must have an `id` for persistence to work.\n\n- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):\n    Where persisted user changes will be stored: memory: only kept in\n    memory, reset on page refresh. local: window.localStorage, data is\n    kept after the browser quit. session: window.sessionStorage, data\n    is cleared once the browser quit.\n\n- readOnly (boolean; optional):\n    If set, value cannot be changed.\n\n- required (boolean; optional):\n    Adds required attribute to the input and a red asterisk on the\n    right side of label, `False` by default.\n\n- size (a value equal to: 'xs', 'sm', 'md', 'lg', 'xl'; optional):\n    Controls size of the `Input.Wrapper`, `'sm'` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- value (string; optional):\n    Controlled component value.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withAsterisk (boolean; optional):\n    Determines whether the required asterisk should be displayed.\n    Overrides `required` prop. Does not add required attribute to the\n    input. `False` by default.\n\n- wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Wrapper`.\n#### Radio\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- autoContrast (boolean; optional):\n    Determines whether icon color with filled variant should depend on\n    `background-color`. If luminosity of the `color` prop is less than\n    `theme.luminosityThreshold`, then `theme.white` will be used for\n    text color, otherwise `theme.black`. Overrides\n    `theme.autoContrast`.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- color (optional):\n    Key of `theme.colors` or any valid CSS color to set input color in\n    checked state, `theme.primaryColor` by default.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- description (a list of or a singular dash component, string or number; optional):\n    Description displayed below the label.\n\n- disabled (boolean; optional):\n    Determines whether Radio disabled and non-selectable.\n\n- error (a list of or a singular dash component, string or number; optional):\n    Error displayed below the label.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- iconColor (optional):\n    Key of `theme.colors` or any valid CSS color to set icon color, by\n    default value depends on `theme.autoContrast`.\n\n- label (a list of or a singular dash component, string or number; optional):\n    Content of the `label` associated with the radio.\n\n- labelPosition (a value equal to: 'left', 'right'; optional):\n    Position of the label relative to the input, `'right'` by default.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- persisted_props (list of strings; optional):\n    Properties whose user interactions will persist after refreshing\n    the component or the page. Since only `value` is allowed this prop\n    can normally be ignored.\n\n- persistence (string | number | boolean; optional):\n    Used to allow user interactions in this component to be persisted\n    when the component - or the page - is refreshed. If `persisted` is\n    truthy and hasn't changed from its previous value, a `value` that\n    the user has changed while using the app will keep that change, as\n    long as the new `value` also matches what was given originally.\n    Used in conjunction with `persistence_type`. Note:  The component\n    must have an `id` for persistence to work.\n\n- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):\n    Where persisted user changes will be stored: memory: only kept in\n    memory, reset on page refresh. local: window.localStorage, data is\n    kept after the browser quit. session: window.sessionStorage, data\n    is cleared once the browser quit.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set\n    `border-radius,` \"xl\" by default.\n\n- size (a value equal to: 'xs', 'sm', 'md', 'lg', 'xl'; optional):\n    Controls size of the component, `'sm'` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- value (string; optional):\n    To be used with Radio group.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- wrapperProps (dict; optional):\n    Props passed down to the root element.\n\n    `wrapperProps` is a dict with keys:\n#### RadioIndicator\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- autoContrast (boolean; optional):\n    Determines whether icon color with filled variant should depend on\n    `background-color`. If luminosity of the `color` prop is less than\n    `theme.luminosityThreshold`, then `theme.white` will be used for\n    text color, otherwise `theme.black`. Overrides\n    `theme.autoContrast`.\n\n- checked (boolean; optional):\n    Determines whether the component should have checked styles.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- color (optional):\n    Key of `theme.colors` or any valid CSS color to set input color in\n    checked state, `theme.primaryColor` by default.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- disabled (boolean; optional):\n    Determines whether Radio disabled and non-selectable.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- iconColor (optional):\n    Key of `theme.colors` or any valid CSS color to set icon color, by\n    default value depends on `theme.autoContrast`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- persisted_props (list of strings; optional):\n    Properties whose user interactions will persist after refreshing\n    the component or the page. Since only `value` is allowed this prop\n    can normally be ignored.\n\n- persistence (string | number | boolean; optional):\n    Used to allow user interactions in this component to be persisted\n    when the component - or the page - is refreshed. If `persisted` is\n    truthy and hasn't changed from its previous value, a `value` that\n    the user has changed while using the app will keep that change, as\n    long as the new `value` also matches what was given originally.\n    Used in conjunction with `persistence_type`. Note:  The component\n    must have an `id` for persistence to work.\n\n- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):\n    Where persisted user changes will be stored: memory: only kept in\n    memory, reset on page refresh. local: window.localStorage, data is\n    kept after the browser quit. session: window.sessionStorage, data\n    is cleared once the browser quit.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set\n    `border-radius,` \"xl\" by default.\n\n- size (a value equal to: 'xs', 'sm', 'md', 'lg', 'xl'; optional):\n    Controls size of the component, `'sm'` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the root element.\n#### RadioCard\n\n- children (a list of or a singular dash component, string or number; optional):\n    RadioCard content.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- checked (boolean; optional):\n    Checked state.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- disabled (boolean; optional):\n    Determines whether RadioCard is disabled and non-selectable.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- name (string; optional):\n    Value used to associate all related radio cards, required for\n    accessibility if used outside of `Radio.Group`.\n\n- persisted_props (list of strings; optional):\n    Properties whose user interactions will persist after refreshing\n    the component or the page. Since only `value` is allowed this prop\n    can normally be ignored.\n\n- persistence (string | number | boolean; optional):\n    Used to allow user interactions in this component to be persisted\n    when the component - or the page - is refreshed. If `persisted` is\n    truthy and hasn't changed from its previous value, a `value` that\n    the user has changed while using the app will keep that change, as\n    long as the new `value` also matches what was given originally.\n    Used in conjunction with `persistence_type`. Note:  The component\n    must have an `id` for persistence to work.\n\n- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):\n    Where persisted user changes will be stored: memory: only kept in\n    memory, reset on page refresh. local: window.localStorage, data is\n    kept after the browser quit. session: window.sessionStorage, data\n    is cleared once the browser quit.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set\n    `border-radius,` \"xl\" by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- value (string; optional):\n    To be used with Radio group.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withBorder (boolean; optional):\n    Determines whether the card should have border, `True` by default.\n\n- wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the root element."
  },
  {
    "name": "Rating",
    "description": "Pick and display rating",
    "endpoint": "/components/rating",
    "package": "dash_mantine_components",
    "category": "Inputs",
    "content": "\n\n## Rating  \nPick and display rating  \nCategory: Inputs  \n\n### Introduction\n\n### Read only\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Group(\n    children=dmc.Rating(fractions=2, value=3.5, readOnly=True), justify=\"center\"\n)\n```\n### Fractions\n\n```python\nimport dash_mantine_components as dmc\n\n\ncomponent = dmc.Stack(\n    [\n        dmc.Group([dmc.Text(\"Fractions: 2\"), dmc.Rating(fractions=2, value=1)]),\n        dmc.Group([dmc.Text(\"Fractions: 3\"), dmc.Rating(fractions=3, value=2.3333)]),\n        dmc.Group([dmc.Text(\"Fractions: 4\"), dmc.Rating(fractions=4, value=3.75)]),\n    ]\n)\n```\n### Custom Symbol\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ncomponent = dmc.Rating(\n    value=1,\n    emptySymbol=DashIconify(icon=\"tabler:sun\"),\n    fullSymbol=DashIconify(icon=\"tabler:moon\"),\n)\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n| Name        | Static selector             | Description                                 |\n|:------------|:----------------------------|:--------------------------------------------|\n| root        | .mantine-Rating-root        | Root element                                |\n| starSymbol  | .mantine-Rating-starSymbol  | Default star icon                           |\n| input       | .mantine-Rating-input       | Item input, hidden by default               |\n| label       | .mantine-Rating-label       | Item label, used to display star icon       |\n| symbolBody  | .mantine-Rating-symbolBody  | Wrapper around star icon for centering      |\n| symbolGroup | .mantine-Rating-symbolGroup | Group of symbols, used to display fractions |\n\n\n### Keyword Arguments\n#### Rating\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- color (optional):\n    Key of `theme.colors` or any CSS color value, `'yellow'` by\n    default.\n\n- count (number; optional):\n    Number of controls, `5` by default.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- emptySymbol (a list of or a singular dash component, string or number; optional):\n    Icon displayed when the symbol is empty.\n\n- fractions (number; optional):\n    Number of fractions each item can be divided into, `1` by default.\n\n- fullSymbol (a list of or a singular dash component, string or number; optional):\n    Icon displayed when the symbol is full.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- highlightSelectedOnly (boolean; optional):\n    If set, only the selected symbol changes to full symbol when\n    selected, `False` by default.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- name (string; optional):\n    `name` attribute passed down to all inputs. By default, `name` is\n    generated randomly.\n\n- persisted_props (list of strings; optional):\n    Properties whose user interactions will persist after refreshing\n    the component or the page. Since only `value` is allowed this prop\n    can normally be ignored.\n\n- persistence (string | number | boolean; optional):\n    Used to allow user interactions in this component to be persisted\n    when the component - or the page - is refreshed. If `persisted` is\n    truthy and hasn't changed from its previous value, a `value` that\n    the user has changed while using the app will keep that change, as\n    long as the new `value` also matches what was given originally.\n    Used in conjunction with `persistence_type`. Note:  The component\n    must have an `id` for persistence to work.\n\n- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):\n    Where persisted user changes will be stored: memory: only kept in\n    memory, reset on page refresh. local: window.localStorage, data is\n    kept after the browser quit. session: window.sessionStorage, data\n    is cleared once the browser quit.\n\n- readOnly (boolean; optional):\n    If set, the user cannot interact with the component, `False` by\n    default.\n\n- size (number; optional):\n    Controls component size, `'sm'` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- value (number; default 0):\n    Value for controlled component.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`."
  },
  {
    "name": "RichTextEditor",
    "description": "A TipTab based rich text editor .",
    "endpoint": "/components/richtexteditor",
    "package": "dash_mantine_components",
    "category": "Inputs",
    "content": "\n\n## RichTextEditor  \nA TipTab based rich text editor .  \nCategory: Inputs  \n\n### Tiptap editor\nThe `RichTextEditor` component is built on top of the [Tiptap editor](https://tiptap.dev/api/editor)  For more information see the documentation on [tiptap.dev](https://tiptap.dev) website.\n\nTiptap version note:\n- DMC 2.4.1 uses Tiptap v3.14.0.\n- DMC 2.3.0–2.4.0 use Tiptap v3.3. There are no known breaking changes; however, review the migration guide\n for details.\n- DMC versions prior to 2.3.0 use Tiptap v2.9.\n  \n```python\nimport dash_mantine_components as dmc\n\ncontent = \"\"\"<h2 style=\"text-align: center;\">Welcome to Mantine rich text editor</h2><p><code>RichTextEditor</code> component focuses on usability and is designed to be as simple as possible to bring a familiar editing experience to regular users. <code>RichTextEditor</code> is based on <a href=\"https://tiptap.dev/\" rel=\"noopener noreferrer\" target=\"_blank\">Tiptap.dev</a> and supports all of its features:</p><ul><li>General text formatting: <strong>bold</strong>, <em>italic</em>, <u>underline</u>, <s>strike-through</s> </li><li>Headings (h1-h6)</li><li>Sub and super scripts (<sup>&lt;sup /&gt;</sup> and <sub>&lt;sub /&gt;</sub> tags)</li><li>Ordered and bullet lists</li><li>Text align&nbsp;</li><li>And all <a href=\"https://tiptap.dev/extensions\" target=\"_blank\" rel=\"noopener noreferrer\">other extensions</a></li></ul>\"\"\"\n\ncomponent = dmc.RichTextEditor(\n    html=content,\n    toolbar={\n        \"sticky\": True,\n        \"controlsGroups\": [\n            [\n                \"Bold\",\n                \"Italic\",\n                \"Underline\",\n                \"Strikethrough\",\n                \"ClearFormatting\",\n                \"Highlight\",\n                \"Code\",\n            ],\n            [\"H1\", \"H2\", \"H3\", \"H4\"],\n            [\n                \"Blockquote\",\n                \"Hr\",\n                \"BulletList\",\n                \"OrderedList\",\n                \"Subscript\",\n                \"Superscript\",\n            ],\n            [\"Link\", \"Unlink\"],\n            [\"AlignLeft\", \"AlignCenter\", \"AlignJustify\", \"AlignRight\"],\n            [\"Undo\", \"Redo\"],\n        ],\n    },\n)\n```\n### Editing Shortcuts:\n\n- Keyboard Shortcuts:  \n  - Utilize [Tiptap’s keyboard shortcuts](https://tiptap.dev/docs/editor/core-concepts/keyboard-shortcuts#text-formatting) for quick text formatting.   \n\n- Markdown Shortcuts:  \n  - Markdown-style formatting is supported. For example:  \n    - Use `#` followed by a space for headings.  \n    - Use `-` or `*` for bullet lists.  \n  - See the full list of [Markdown shortcuts](https://tiptap.dev/docs/examples/basics/markdown-shortcuts#page-title).\n\n### Tiptap Extensions  \n\nExtensions expand the capabilities of Tiptap in `RichTextEditor`. DMC provides a predefined set of extensions, all\nenabled by default. You can customize these as needed.\n\n Need an extension that’s not included? Open a [feature request on GitHub](https://github.com/snehilvj/dash-mantine-components/issues).\n We prioritize requests based on popularity and bundle size impact to keep DMC lightweight and efficient.\n\n#### Default Extensions\nBy default, all the available extensions are enabled:  \n\n```python\ndmc.RichTextEditor(       \n    extensions=[\n        {\"StarterKit\": {\"codeBlock\": False}},\n        \"CodeBlockLowlight\", # available in DMC >= 2.4.0\n        \"Superscript\",\n        \"Subscript\",\n        \"Highlight\",\n        \"Table\",\n        \"TableCell\",\n        \"TableHeader\",\n        \"TableRow\",\n        {\"TextAlign\": {\"types\": [\"heading\", \"paragraph\"]}},\n        {\"Placeholder\": {\"placeholder\": \"Write or paste content here...\"}},\n        \"Color\",\n        \"TextStyle\",\n        \"Image\",\n        # The following is available in DMC >= 2.3.0\n        \"BackgroundColor\",\n        \"FontFamily\",\n        \"FontSize\",\n        \"LineHeight\",\n        # The following is included in StarterKit in DMC >=2.3.0\n        # \"Underline\",\n        # \"Link\",\n    ]\n)\n```  \n\nThe `StarterKit` extension includes essential text-editing features such as:  \n\n- Text Formatting: `Text`, `Bold`, `Italic`, `Strike`, `Code`, `Underline`, `Link`\n- Headings & Lists: `Heading`, `OrderedList`, `BulletList`, `ListItem`  \n- Structural Elements: `Paragraph`, `Blockquote`, `CodeBlock`, `HardBreak`, `HorizontalRule`, `Document`  \n- Cursor & History Features: `Dropcursor`, `Gapcursor`, `History`  \n- Source Code editing: `SourceCode`\n\n#### Customizing Extensions\n\nYou can modify the enabled extensions by setting the `extensions` prop. This allows you to:  \n- Exclude features you don’t want  \n- Adjust settings for specific extensions  \n\nEach extension can be defined in two ways:  \n- As a string to use default settings (for example, `\"Color\"`)  \n- As a dictionary to specify configuration options (for example `{\"TextAlign\": {\"types\": [\"heading\", \"paragraph\"]}}`)  \n\n\nSome features require multiple extensions. For example:  \n- color formatting requires both `\"Color\"` and `\"TextStyle\"`.  \n- Tables require `\"Table\"`, `\"TableCell\"`, `\"TableHeader\"`, and `\"TableRow\"`.  \n\nAt a minimum, ensure that `\"StarterKit\"` is included:  \n```python\nextensions=[\"StarterKit\"]\n```  \nFor a full list of extensions and configuration options, refer to the [Tiptap documentation](https://tiptap.dev/docs/extensions).\n\n\n Note:  Setting the `extensions` prop replaces the default list, so if you exclude an extension, for example,\n`\"Image\"`, that feature will no longer be available.  Be sure to include all the features from the default extension that you need.\n\nHere are the default `extensions` for corresponding DMC versions.\n\n\n```python\n# RichTextEditor default extensions in dmc version V2.4.0\nextensions = [\n    { 'StarterKit': { 'codeBlock': False } },\n    'CodeBlockLowlight',\n    'Superscript',\n    'Subscript',\n    'Highlight',\n    'Table',\n    'TableCell',\n    'TableHeader',\n    'TableRow',\n    { 'Placeholder': { 'placeholder': 'Write or paste content here...' } },\n    { 'TextAlign': { 'types': ['heading', 'paragraph'] } },\n    'Color',\n    'TextStyle',\n    'BackgroundColor',\n    'FontFamily',\n    'FontSize',\n    'LineHeight',\n    'Image',\n]\n```\n\n```python\n# RichTextEditor default extensions in dmc version V2.3.0\nextensions = [\n    'StarterKit',\n    'Superscript',\n    'Subscript',\n    'Highlight',\n    'Table',\n    'TableCell',\n    'TableHeader',\n    'TableRow',\n    { 'Placeholder': { 'placeholder': 'Write or paste content here...' } },\n    { 'TextAlign': { 'types': ['heading', 'paragraph'] } },\n    'Color',\n    'TextStyle',\n    'BackgroundColor',\n    'FontFamily',\n    'FontSize',\n    'LineHeight',\n    'Image',\n]\n```\n\n```python\n\n# RichTextEditor default extensions in dmc version V1.1.0\nextensions = [\n    'StarterKit',\n    'Underline',\n    'Link',\n    'Superscript',\n    'Subscript',\n    'Highlight',\n    'Table',\n    'TableCell',\n    'TableHeader',\n    'TableRow',\n    {'Placeholder': {'placeholder': 'Write or paste content here...'}},\n    {'TextAlign': {'types': ['heading', 'paragraph']}},\n    'Color',\n    'TextStyle',\n    'Image',\n]\n```\n\n\n### Toolbar Controls \n\nCustomize the toolbar by grouping control icons using the `controlsGroups` parameter. Each nested list within\n`controlsGroups` represents a separate group of toolbar icons.\n\n Note that even if a toolbar icon is not included, features provided by enabled extensions can still be accessed\n through  keyboard shortcuts and Markdown syntax.\n\n```python\ndmc.RichTextEditor(\n    toolbar={           \n        \"controlsGroups\": [\n            [\n                \"Bold\",\n                \"Italic\",\n                \"Underline\",               \n            ], # First group (text formatting)\n            \n            [\"H1\", \"H2\", \"H3\", \"H4\"], # second group (headings)\n        ]\n    }     \n)\n```\nHere are the control icons available for use in the `toolbar`:\n\n**Controls included with StarterKit extension:**\n\n- H1\n- H2\n- H3\n- H4\n- H5\n- H6\n- BulletList\n- OrderedList\n- Bold\n- Italic\n- Strikethrough\n- ClearFormatting\n- Blockquote\n- Code\n- CodeBlock\n- Hr\n- Undo\n- Redo\n- SourceCode\n\nThe following is included by default in DMC >=2.3.0:\n- Link\n- Unlink\n- Underline\n\n**Controls that require TextAlign extension:**\n- AlignLeft\n- AlignRight\n- AlignCenter\n- AlignJustify\n\n**Controls that require both Color and TextStyle extensions:**\n- ColorPicker\n- Color\n- UnsetColor\n\n**Other controls with required extensions:**\n- Underline requires `Underline` extension in DMC <=2.3.0\n- Superscript requires `Superscript` extension\n- Subscript requires `Subscript` extension\n- Highlight requires `Highlight` extension\n\n\n### Typography styles\nBy default, `RichTextEditor` renders content with [TypographyStylesProvider](/components/typographystylesprovider) and\nsome additional styles. You can disable these styles by setting `withTypographyStyles=False`.  Then you can add your own \nCSS files, or style with the Styles API.\n\n\n```python\n dmc.RichTextEditor(       \n     withTypographyStyles=False\n)\n```\n\n### Placeholder\n\nTo use the placeholder or change the placeholder default text, include (at least) the following extensions:\n\n\n```python\nfrom dash import html\nimport dash_mantine_components as dmc\n\ncomponent = dmc.RichTextEditor(\n    extensions=[\n        \"StarterKit\",\n        {\"Placeholder\": {\"placeholder\": \"Write something...\"}},\n    ],\n)\n```\n### Text color\n\nYou can use the following toolbar controls to change text color:\n\n- `ColorPicker` – allows to pick colors from given predefined color swatches and with `ColorPicker` component\n- `Color` – allows to apply given color with one click\n- `UnsetColor` – clears color styles\n\n```python\nimport dash_mantine_components as dmc\n\ncolorpicker_colors = [\n    \"#25262b\",\n    \"#868e96\",\n    \"#fa5252\",\n    \"#e64980\",\n    \"#be4bdb\",\n    \"#7950f2\",\n    \"#4c6ef5\",\n    \"#228be6\",\n    \"#15aabf\",\n    \"#12b886\",\n    \"#40c057\",\n    \"#82c91e\",\n    \"#fab005\",\n    \"#fd7e14\",\n]\n\ncomponent = dmc.RichTextEditor(\n    html=\"Apply some colors to this text\",\n    extensions=[\n        \"StarterKit\",\n        \"Color\",\n        \"TextStyle\",  # required when using Color\n    ],\n    toolbar={\n        \"sticky\": True,\n        \"stickyOffset\": 60,\n        \"controlsGroups\": [\n            [\n                {\"ColorPicker\": {\"colors\": colorpicker_colors}},\n            ],\n            [\n                {\"Color\": {\"color\": \"red\"}},\n                {\"Color\": {\"color\": \"green\"}},\n                {\"Color\": {\"color\": \"blue\"}},\n            ],\n            [\"UnsetColor\"],\n        ],\n    },\n)\n```\n### Table\n\nThe tables will be styles with a Mantine theme. For more information refer to the [TypographyStylesProvider](/components/typographystylesprovider) section.\nYou can disable these styles by setting `withTypographyStyles=False`\n\nTo add controls in the toolbar for table features, see the Custom Controls section below.\n\n```python\nimport dash_mantine_components as dmc\n\ntable = \"\"\"\n    <table>\n      <tbody>\n        <tr>\n          <th>Name</th>\n          <th colspan=\"3\">Description</th>\n        </tr>\n        <tr>\n          <td>Cyndi Lauper</td>\n          <td>Singer</td>\n          <td>Songwriter</td>\n          <td>Actress</td>\n        </tr>\n        <tr>\n          <td>Bruce Springsteen</td>\n          <td>Singer</td>\n          <td>Songwriter</td>\n          <td>Actor</td>\n        </tr>\n      </tbody>\n    </table>\n\"\"\"\n\ncomponent = dmc.RichTextEditor(\n    html=table,\n    extensions=[\n        \"StarterKit\",\n        \"Table\",\n        \"TableCell\",\n        \"TableHeader\",\n        \"TableRow\",\n    ],\n)\n```\n### Image\n\n```python\nimport dash_mantine_components as dmc\n\ncontent = \"\"\"\n<p>This is a basic example of implementing images. Drag to re-order.</p>\n<img src=\"https://placehold.co/800x400\" />\n<img src=\"https://placehold.co/800x400/6A00F5/white\" />      \n\"\"\"\n\ncomponent = dmc.RichTextEditor(\n    html=content,\n    extensions=[\n        \"StarterKit\",\n        \"Image\",\n    ],\n)\n```\n### Code highlight  \n\n*New in V2.4.0*  \n\nTo use code highlight you will need to include at least the following extensions:\n\n\n```python\n dmc.RichTextEditor(       \n     extensions=[\n         {\"StarterKit\": {\"codeBlock\": False}},\n        \"CodeBlockLowlight\",         \n         # other needed extensions\n     ],\n)\n```\nNote:  You must set `{\"codeBlock\": False}` in the `StarterKit` configuration to prevent a conflict with the more\nadvanced `CodeBlockLowlight` extension. \n\nCurrent supported languages: \n  ts\n  js\n  python/ py \n  css\n  bash / shell  \n  text\n\nSet language to text to supress code highlighting.\n\nIf you would like other languages included, please [open a feature request on our GitHub.](https://github.com/snehilvj/dash-mantine-components/issues)\n\n\n```python\nimport dash_mantine_components as dmc\n\ncode_example = \"\"\"import dash_mantine_components as dmc\nfrom dash import Dash\n\napp = Dash()\n\napp.layout = dmc.MantineProvider(\n    dmc.Alert(\n       \"Welcome to Dash Mantine Components\",\n       title=\"Hello!\",\n       color=\"violet\",\n    )\n)\n\nif __name__ == \"__main__\":\n    app.run(debug=True)\"\"\"\n\ncomponent= dmc.RichTextEditor(\n    html=f\"<p>Regular paragraph</p><pre><code>{code_example}</code></pre>\",\n    extensions=[\n        {\"StarterKit\": { \"codeBlock\": False }},\n        \"CodeBlockLowlight\"\n    ],\n    toolbar={\n        \"controlsGroups\": [\n            [\n                \"Bold\",\n                \"Italic\",\n                \"Underline\",\n                \"Strikethrough\",\n                \"CodeBlock\"\n            ],\n        ],\n    },\n)\n```\n### Source code mode\n\nYou can use the `SourceCode` control to see and edit source code of editor content:\n\n```python\nimport dash_mantine_components as dmc\n\n\ncontent= '<p>Source code control example</p><p>New line with <strong>bold text</strong></p><p>New line with <em>italic</em> <em>text</em></p>'\n\ncomponent =dmc.RichTextEditor(\n    html=content,\n    toolbar={\n        \"sticky\": True,\n        \"controlsGroups\": [\n            [\"SourceCode\"],\n            [\n                \"Blockquote\",\n                \"Bold\",\n                \"Italic\",\n                \"Underline\",\n                \"Strikethrough\",\n                \"ClearFormatting\",\n                \"Highlight\",\n            ],\n        ],\n    },\n)\n```\n### Focus\n\n*New in V2.4.0*  \n\nUse the `focus` prop to control the editor's focus state.\n\n- `focus=True` - Focus the editor at the current cursor position\n- `focus=False` - Blur (remove focus from) the editor\n- `focus=\"start\"` - Focus at the start of the document\n- `focus=\"end\"` - Focus at the end of the document\n- `focus=10` - Focus at a specific position (character offset) Positive values start at the beginning of the document - negative values at the end.\n- `focus=\"all\"` - Focus and select all content\n\n**Example:**\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import  Input, Output, callback, ctx, no_update\n\ncomponent =  dmc.Box([\n    dmc.Group([\n        dmc.Button(\"Focus Start\", id=\"rte-btn-focus-start\"),\n        dmc.Button(\"Focus End\", id=\"rte-btn-focus-end\"),\n        dmc.Button(\"Blur\", id=\"rte-btn-blur\"),\n    ]),\n    dmc.RichTextEditor(\n        id=\"rte-focus\",\n        html=\"<p>Click the buttons to control focus.</p>\",\n    ),\n])\n\n\n@callback(\n    Output(\"rte-focus\", \"focus\"),\n    Input(\"rte-btn-focus-start\", \"n_clicks\"),\n    Input(\"rte-btn-focus-end\", \"n_clicks\"),\n    Input(\"rte-btn-blur\", \"n_clicks\"),\n    prevent_initial_call=True\n)\ndef control_focus(start, end, blur):\n    if not ctx.triggered:\n        return no_update\n\n    button_id = ctx.triggered_id\n    if button_id == \"rte-btn-focus-start\":\n        return \"start\"\n    elif button_id == \"rte-btn-focus-end\":\n        return \"end\"\n    elif button_id == \"rte-btn-blur\":\n        return False\n```\n### Editable \n\n*New in V2.4.0*  \n\nThe `editable` prop controls whether the editor content can be modified. When `editable=False`:\n- The editor becomes read-only\n- Users can still select and copy text\n- The toolbar is automatically hidden\n\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import  Input, Output, callback\n\ncomponent = dmc.Box([\n    dmc.Switch(\n        id=\"rte-toggle-editable\",\n        label=\"Editable\",\n        checked=True,\n    ),\n    dmc.RichTextEditor(\n        id=\"rte-editable\",\n        html=\"<p>This editor can be toggled between editable and read-only mode.</p>\",\n        editable=True,\n        toolbar={\n            \"controlsGroups\": [\n                [\n                    \"Bold\",\n                    \"Italic\",\n                    \"Underline\",\n                    \"Strikethrough\",\n                    \"CodeBlock\"\n                ],\n            ],\n        },\n    ),\n])\n\n@callback(\n    Output(\"rte-editable\", \"editable\"),\n    Input(\"rte-toggle-editable\", \"checked\"),\n)\ndef toggle_editable(checked):\n    return checked\n```\n### Sticky toolbar\nSet `sticky` prop on `RichTextEditor` `toolbar` prop to make toolbar sticky, control top property with `stickyOffset`. \nFor example, in the dmc docs website there is a header with 60px height, in this case we will need to set \n`stickyOffset=60` to make sticky position correctly with fixed positioned header element.\n\nNote the sticky toolbar as you scroll past the example below.\n\n\n### Subtle Variant  \n\n`variant=\"subtle\"` removes borders from the controls groups, makes controls larger and reduces spacing of the toolbar:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.RichTextEditor(\n    html=\"Subtle rich text editor variant\",\n    extensions=[\n        \"StarterKit\",\n        \"Highlight\",\n    ],\n    toolbar={\n        \"sticky\": True,\n        \"stickyOffset\": 60,\n        \"variant\": \"subtle\",\n        \"controlsGroups\": [\n            [\n                \"Bold\",\n                \"Italic\",\n                \"Underline\",\n                \"Strikethrough\",\n                \"ClearFormatting\",\n                \"Highlight\",\n                \"Code\",\n            ],\n        ],\n    },\n)\n```\n### Labels and localization\n`RichTextEditor` supports changing labels for all controls with labels prop:\n\n```python\nimport dash_mantine_components as dmc\n\n\ncolorpicker_colors = [\n    \"#25262b\",\n    \"#868e96\",\n    \"#fa5252\",\n    \"#e64980\",\n    \"#be4bdb\",\n    \"#7950f2\",\n    \"#4c6ef5\",\n]\n\ncomponent = dmc.RichTextEditor(\n    html=\"Custom button labels\",\n    toolbar={\n        \"sticky\": True,\n        \"stickyOffset\": 60,\n        \"controlsGroups\": [\n            [\n                \"Bold\",\n                \"Italic\",\n                \"Underline\",\n                \"Strikethrough\",\n                \"ClearFormatting\",\n                \"Highlight\",\n                \"Code\",\n            ],\n            [{\"ColorPicker\": {\"colors\": colorpicker_colors}}],\n            [\n                {\"Color\": {\"color\": \"red\"}},\n                {\"Color\": {\"color\": \"green\"}},\n                {\"Color\": {\"color\": \"blue\"}},\n            ],\n            [\"UnsetColor\"],\n        ],\n    },\n    labels={\n        \"boldControlLabel\": \"Make text bold\",\n        \"italicControlLabel\": \"Make text bold\",\n        \"colorPickerControlLabel\": \"Text color\", # label for control in toolbar\n        \"colorPickerColorLabel\": \"Color number: {color}\", # include color in label in the color swatch. Use f-string format\n        \"colorControlLabel\": \"Set Text color {color}\" # include color in label with f-string format\n        # ...other labels\n    },\n)\n```\nMost labels are used to add `aria-label` and `title` attributes to the toolbar controls.  Some labels support f-string\nformatting for dynamic values. If you do not provide all labels, then they will be merged with the default labels.\n\nHere are all available labels with their defaults:\n```python\ndefault_labels = {\n    # Controls labels\n    \"linkControlLabel\": \"Link\",\n    \"colorPickerControlLabel\": \"Text color\",\n    \"highlightControlLabel\": \"Highlight text\",\n    \"colorControlLabel\": \"Set text color {color}\",  # Use f-string format to include color in label\n    \"boldControlLabel\": \"Bold\",\n    \"italicControlLabel\": \"Italic\",\n    \"underlineControlLabel\": \"Underline\",\n    \"strikeControlLabel\": \"Strikethrough\",\n    \"clearFormattingControlLabel\": \"Clear formatting\",\n    \"unlinkControlLabel\": \"Remove link\",\n    \"bulletListControlLabel\": \"Bullet list\",\n    \"orderedListControlLabel\": \"Ordered list\",\n    \"h1ControlLabel\": \"Heading 1\",\n    \"h2ControlLabel\": \"Heading 2\",\n    \"h3ControlLabel\": \"Heading 3\",\n    \"h4ControlLabel\": \"Heading 4\",\n    \"h5ControlLabel\": \"Heading 5\",\n    \"h6ControlLabel\": \"Heading 6\",\n    \"blockquoteControlLabel\": \"Blockquote\",\n    \"alignLeftControlLabel\": \"Align text: left\",\n    \"alignCenterControlLabel\": \"Align text: center\",\n    \"alignRightControlLabel\": \"Align text: right\",\n    \"alignJustifyControlLabel\": \"Align text: justify\",\n    \"codeControlLabel\": \"Code\",\n    \"codeBlockControlLabel\": \"Code block\",\n    \"subscriptControlLabel\": \"Subscript\",\n    \"superscriptControlLabel\": \"Superscript\",\n    \"unsetColorControlLabel\": \"Unset color\",\n    \"hrControlLabel\": \"Horizontal line\",\n    \"undoControlLabel\": \"Undo\",\n    \"redoControlLabel\": \"Redo\",\n\n    # Task list\n    \"tasksControlLabel\": \"Task list\",\n    \"tasksSinkLabel\": \"Decrease task level\",\n    \"tasksLiftLabel\": \"Increase task level\",\n\n    # Link editor\n    \"linkEditorInputLabel\": \"Enter URL\",\n    \"linkEditorInputPlaceholder\": \"https://example.com/\",\n    \"linkEditorExternalLink\": \"Open link in a new tab\",\n    \"linkEditorInternalLink\": \"Open link in the same tab\",\n    \"linkEditorSave\": \"Save\",\n\n    # Color picker control\n    \"colorPickerCancel\": \"Cancel\",\n    \"colorPickerClear\": \"Clear color\",\n    \"colorPickerColorPicker\": \"Color picker\",\n    \"colorPickerPalette\": \"Color palette\",\n    \"colorPickerSave\": \"Save\",\n    \"colorPickerColorLabel\": \"Set Text color {color}\",  # Use f-string format to include color in color swatch label\n}\n```\n\n### JSON or HTML Content  \n\nThe editor supports content in either [JSON (ProseMirror) or HTML format](https://tiptap.dev/docs/editor/core-concepts/schema). You can specify the format using the `json`\nor `html` prop. If both props are set, `json` takes precedence.  \n\nNote: While users can type Markdown-style text into `RichTextEditor`, the component does not parse or render supplied text in Markdown\ncontent.  To render Markdown text, use the `dcc.Markdown` component instead.\n\n#### When to Use Each Format:  \n- **JSON (ProseMirror)**: Ideal for structured data storage (databases, APIs) or programmatic content manipulation (e.g., dynamically adding elements).  \n- **HTML**: Useful for direct rendering in a browser, email clients, or using with components like `dcc.Markdown`.  \n\nNote that the schema is very strict.  For example, if you use `This is <strong>important</strong>`, but don’t have any \n[extension](/components/richtexteditor#tiptap-extensions) that handles strong tags, you’ll only see `This is important` – without the bold formatting..\n\nFor details on the schema and ProseMirror format, see the [Tiptap documentation](https://tiptap.dev/docs/editor/core-concepts/schema).\n\nTry editing the content in this example to see the JSON and HTML format:\n```python\nfrom dash import Input, Output, html, callback\nimport dash_mantine_components as dmc\n\ncontent = \"\"\"<h2 style=\"text-align: center;\">Welcome to Mantine rich text editor</h2>\"\"\"\n\ncomponent = html.Div(\n    [\n        dmc.RichTextEditor(\n            html=content,\n            extensions=[\n                \"StarterKit\",\n            ],\n            toolbar={\n                \"controlsGroups\": [\n                    [\n                        \"Bold\",\n                        \"Italic\",\n                        \"Underline\",\n                        \"Strikethrough\",\n                    ],\n                ],\n            },\n            id=\"rte-content\",\n        ),\n        dmc.Text(\"html content:\", mt=\"lg\"),\n        dmc.Paper(id=\"rte-content-html\", withBorder=True, mb=\"lg\", p=\"md\"),\n        dmc.Text(\"json content:\"),\n        dmc.Paper(id=\"rte-content-json\", withBorder=True, p=\"md\"),\n    ]\n)\n\n\n@callback(Output(\"rte-content-html\", \"children\"), Input(\"rte-content\", \"html\"))\ndef update_content(content: str):\n    return f\"{content}\"\n\n\n@callback(Output(\"rte-content-json\", \"children\"), Input(\"rte-content\", \"json\"))\ndef update_content(content: str):\n    return f\"{content}\"\n```\n### Custom controls\nUse `CustomControl` in the `controlsGroups` to create create custom controls in the `toolbar`. Note that you will need \nto set `aria-label` attribute to make control visible for screen readers.\n\n\nTiptap version note:  \n\n- DMC 2.3.0 and later uses [Tiptap v3.3 commands](https://tiptap.dev/docs/editor/api/commands).\n- Older versions of DMC used [Tiptap v2.9 commands](https://v2.tiptap.dev/docs/editor/api/commands).\n\nUse the appropriate Tiptap documentation above to see the full list of editor commands available for your custom controls.\n\n\nNote: This example uses custom JavaScript defined in the assets folder. Learn more in the \"Functions As Props\" section of this document.\n\n\n#### Example: Insert content \n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ncomponent = dmc.RichTextEditor(\n    html= '<div>Click control to insert star emoji</div>',\n    toolbar = {\n        \"controlsGroups\": [\n            [\n                {\n                    \"CustomControl\": {\n                        \"aria-label\": \"Custom Button\",\n                        \"title\": \"Custom Button\",\n                        \"children\": DashIconify(icon=\"mdi:star\", width=20, height=20),\n                        \"onClick\": {\"function\": \"insertContent\", \"options\": \"⭐\"},\n                    },\n                },\n            ],\n        ],\n    },\n\n)\n```\n\n```javascript\nvar dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\n\ndmcfuncs.insertContent = ({editor}, options) => {\n    editor?.commands.insertContent(options)\n}\n```\n\n\n#### Example: Table controls \n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ntoolbar = {\n    \"sticky\": True,\n    \"controlsGroups\": [\n        [\n\n            {\n                \"CustomControl\": {\n                    \"aria-label\": \"Insert Table\",\n                    \"title\": \"Insert Table\",\n                    \"children\": [DashIconify(icon=\"mdi:table-plus\", width=20, height=20)],\n                    \"onClick\": {\"function\": \"insertTable\"},\n                },\n            },\n            {\n                \"CustomControl\": {\n                    \"aria-label\": \"Add Column Before\",\n                    \"title\": \"Add Column Before\",\n                    \"children\": [DashIconify(icon=\"mdi:table-column-plus-before\", width=20, height=20)],\n                    \"onClick\": {\"function\": \"addColumnBefore\"},\n                },\n            },\n            {\n                \"CustomControl\": {\n                    \"aria-label\": \"Delete Column\",\n                    \"title\": \"Delete Column\",\n                    \"children\": [DashIconify(icon=\"mdi:table-column-remove\", width=20, height=20)],\n                    \"onClick\": {\"function\": \"deleteColumn\"},\n                },\n            },\n        ],\n        [\n            \"Bold\",\n            \"Italic\",\n            \"Underline\",\n        ],\n    ],\n}\n\ncomponent = dmc.RichTextEditor(\n    html= '<div>Click controls to insert table, add column before, or delete column</div>',\n    toolbar = toolbar,\n    className=\"rte\"  # applies custom table styles to this component only\n)\n```\n\n```javascript\n\nvar dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\n\ndmcfuncs.insertTable = ({editor}) => {\n    editor?.chain().focus().insertTable({ rows: 5, cols: 3, withHeaderRow: true }).run()\n}\n\ndmcfuncs.addColumnBefore = ({editor}) => {\n    editor?.chain().focus().addColumnBefore().run()\n}\n\ndmcfuncs.deleteColumn= ({editor}) => {\n    editor?.chain().focus().deleteColumn().run()\n}\n```\n\n```css\n.rte :is(table, th, td) {\n    border: 1px solid var(--table-border-color);\n}\n```\n\n#### Example: Font size controls\n*New in V2.3.0* \n\n```python\n\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\n\ncomponent = dmc.RichTextEditor(\n    html=\"<p>Change font size with the controls!</p>\",\n    toolbar={\n        \"controlsGroups\": [\n            [\"H1\", \"H2\", \"H3\", \"H4\"],\n            [\n                {\n                    \"CustomControl\": {\n                        \"aria-label\": \"Increase font size\",\n                        \"title\": \"Increase font size\",\n                        \"children\": DashIconify(icon=\"mdi:format-font-size-increase\", width=16),\n                        \"onClick\": {\"function\": \"increaseFontSize\"},\n                    },\n                },\n                {\n                    \"CustomControl\": {\n                        \"aria-label\": \"Decrease font size\",\n                        \"title\": \"Decrease font size\",\n                        \"children\": DashIconify(icon=\"mdi:format-font-size-decrease\", width=16),\n                        \"onClick\": {\"function\": \"decreaseFontSize\"},\n                    },\n                },\n            ],\n         ],\n    },\n)\n```\n\n```javascript\nvar dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\n\nfunction changeFontSize(editor, delta) {\n  if (!editor) return;\n  const { from, to } = editor.state.selection;\n  let size = 16; // default\n\n  editor.state.doc.nodesBetween(from, to, (node) => {\n    if (node.isText) {\n      const mark = node.marks.find(m => m.type.name === \"textStyle\");\n      if (mark?.attrs.fontSize) {\n        size = parseInt(mark.attrs.fontSize, 10);\n      }\n    }\n  });\n\n  const newSize = Math.min(Math.max(size + delta, 8), 72) + \"px\";\n  editor.chain().focus().setFontSize(newSize).run();\n}\n\ndmcfuncs.increaseFontSize = ({ editor }) => changeFontSize(editor, 2);\ndmcfuncs.decreaseFontSize = ({ editor }) => changeFontSize(editor, -2);\n```\n\n\n### Selected text\n\nThe `selected` prop contains the currently selected text.  Note that it is text only and does not include any formatting.\n\n```python\nfrom dash import Input, Output, html, callback\nimport dash_mantine_components as dmc\n\ncomponent = html.Div(\n    [\n        dmc.RichTextEditor(\n            html=\"<p>Welcome to the editor.</p><p><strong>Select some text</strong></p>\",\n            extensions=[\n                \"StarterKit\",\n            ],\n            toolbar={\n                \"controlsGroups\": [\n                    [\n                        \"Bold\",\n                        \"Italic\",\n                        \"Underline\",\n                        \"Strikethrough\",\n                        \"Highlight\",\n                    ],\n                ]\n            },\n            id=\"rte\",\n        ),\n        dmc.Box(id=\"rte-selected\", mt=\"lg\"),\n    ]\n)\n\n\n@callback(Output(\"rte-selected\", \"children\"), Input(\"rte\", \"selected\"))\ndef update_content(content: str):\n    return f\"Your selected text: {content}\"\n```\n### Accessing the Editor Instance clientside\n\nThe `dash_mantine_components.getEditor(id)` function provides direct access to the underlying Tiptap editor instance \nin clientside callbacks. This allows you full access to the editor API including executing commands, inspecting\ncontent, and updating the editor state.  See the [Tiptap editor API](https://tiptap.dev/docs/editor/api/commands) for more details.\n\n\nThis returns the Tiptap editor instance for the specified component ID, or `undefined` if the editor doesn't exist:\n\n```javascript\nconst editor = dash_mantine_components.getEditor('editor-id');\n```\n\nThis example shows how to access the editor in a clientside callback and provide a word count of the content.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import Dash, Input, Output, clientside_callback\n\ncomponent = dmc.Box([\n    dmc.RichTextEditor(\n        id=\"get-editor-id\",\n        toolbar={\n                \"controlsGroups\": [\n                    [\n                        \"Bold\",\n                        \"Italic\",\n                        \"Underline\",\n                        \"Strikethrough\",\n                    ],\n                ],\n            },\n        html=\"<p>Try typing some text in this editor. Click the button below to see your character and word count.</p>\"\n    ),\n    dmc.Button(\"Get Stats\", id=\"btn-rte-stats\", n_clicks=0),\n    dmc.Box(id=\"stats\"),\n])\n\nclientside_callback(\n    \"\"\"\n    function(n_clicks) {\n        if (n_clicks > 0) {\n            const editor = dash_mantine_components.getEditor('get-editor-id');\n            if (editor) {\n                const text = editor.getText();\n                const chars = text.length;\n                const words = text.split(/\\\\s+/).filter(Boolean).length;\n                return `Characters: ${chars} | Words: ${words}`;\n            }\n        }\n        return dash_clientside.no_update;\n    }\n    \"\"\",\n    Output(\"stats\", \"children\"),\n    Input(\"btn-rte-stats\", \"n_clicks\"),\n)\n```\n### Debounce\n\nThe `debounce` prop controls how updates to the `html`, `json`, and `selected` props are triggered in the `RichTextEditor`.\n\nEnabling debounce helps prevent excessive callbacks by delaying updates until the user stops interacting. If set to\n`True`, updates occur only when the editor loses focus. Alternatively, you can specify a delay in milliseconds to\nfine-tune when updates should be sent.\n\n```python\ndmc.RichTextEditor(       \n     debounce=500   # # Delay updates by 500ms \n)\n```\n\n### Persistence\n\nDash provides built-in persistence props that allow components to retain their values across page reloads or app\nsessions. In `RichTextEditor`, this means the editor content can be saved and restored automatically.  \n\nThe following persistence-related props are available:  \n- `persistence` – Enables persistence (`True`, `\"local\"`, `\"session\"`, or `\"memory\"`).  \n- `persisted_props` – Specifies which props should be persisted.  By default it's  `[\"html, json\"]` \n- `persistence_type` – Defines where the data is stored (`\"local\"`, `\"session\"`, or `\"memory\"`).  \n\nFor more details on how Dash handles persistence, refer to the [Dash persistence documentation](https://dash.plotly.com/persistence).\n\n\nNotes:\n - The component must have an `id` for persistence to work.\n - If you want to set an initial value while also enabling persistence, set `persisted_props` to only the prop used for the initial value.\nFor example `persisted_props=['html']`.\n\n\n\n### CSS Extensions\n\nAs of DMC 1.2.0, RichTextEditor component styles are bundled automatically, so you no longer need to include a separate CSS file.\nIf you're using an older version of DMC, refer to the [migration guide](/migration) for instructions on including optional stylesheets.\n\n\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n#### RichTextEditor Selectors\n\n| Selector                         | Static Selector                                         | Description |\n|----------------------------------|------------------------------------------------------|-------------|\n| `root`                           | `.mantine-RichTextEditor-root`                        | Root element |\n| `toolbar`                        | `.mantine-RichTextEditor-toolbar`                     | Toolbar element |\n| `content`                        | `.mantine-RichTextEditor-content`                     | Content area |\n| `typographyStylesProvider`       | `.mantine-RichTextEditor-typographyStylesProvider`    | TypographyStylesProvider component, wraps content |\n| `control`                        | `.mantine-RichTextEditor-control`                     | `RichTextEditor.Control` root element, used as a base for all controls |\n| `controlIcon`                    | `.mantine-RichTextEditor-controlIcon`                 | Control icon element |\n| `controlsGroup`                  | `.mantine-RichTextEditor-controlsGroup`               | `RichTextEditor.ControlsGroup` component root |\n| `linkEditor`                     | `.mantine-RichTextEditor-linkEditor`                  | Link editor root element |\n| `linkEditorSave`                 | `.mantine-RichTextEditor-linkEditorSave`              | Link editor save button |\n| `linkEditorInput`                | `.mantine-RichTextEditor-linkEditorInput`             | Link editor URL input |\n| `linkEditorExternalControl`      | `.mantine-RichTextEditor-linkEditorExternalControl`   | Link editor external button |\n| `linkEditorDropdown`             | `.mantine-RichTextEditor-linkEditorDropdown`          | Link editor popover dropdown element |\n\n#### RichTextEditor Data Attributes\n\n| Selector  | Attribute     | Condition                 |\n|-----------|--------------|---------------------------|\n| `control` | `data-active` | Control is active        |\n\n\n### Keyword Arguments\n#### RichTextEditor\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- debounce (number | boolean; optional):\n    If True, changes will be sent back to Dash only when losing focus.\n    If False, data will be sent on every change. If a number, data\n    will be sent when the value has been stable for that number of\n    milliseconds.\n\n- editable (boolean; optional):\n    If True, the editor will be editable. True by default.\n\n- extensions (list; optional):\n    List of extensions to be loaded by the editor. Each item can be\n    either a string with the extension name (e.g. 'Color') or an\n    object with the extension name as key and options as value (e.g.\n    {'TextAlign': {'types': ['heading', 'paragraph']}}).\n    ['StarterKit', 'Underline', 'Link', 'Superscript', 'Subscript',\n    'Highlight', 'Table', 'TableCell', 'TableHeader', 'TableRow',\n    {'Placeholder': {'placeholder': 'Write or paste content\n    here...'}}, {'TextAlign': {'types': ['heading', 'paragraph']}},\n    'Color', 'TextStyle', 'Image'] by default.\n\n- focus (number | boolean; optional):\n    If True, the editor will be focused. If False, the editor will be\n    blurred. Can also be a string ('start', 'end', 'all') or number to\n    focus at a specific position. Positive values start at the\n    beginning of the document - negative values at the end.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- html (string; optional):\n    HTML string representation of the editor content. Affected by\n    debounce. If both json and html are provided, json takes\n    precedence.\n\n- json (dict; optional):\n    JSON object (ProseMirror) representation of the editor content.\n    Affected by debounce. If both json and html are provide, json\n    takes precedence.\n\n- labels (dict; optional):\n    Labels that are used in controls. If not set, default labels are\n    used.\n\n    `labels` is a dict with keys:\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- n_blur (number; optional):\n    An integer that represents the number of times that this element\n    has lost focus.\n\n- persisted_props (list of strings; optional):\n    Properties whose user interactions will persist after refreshing\n    the component or the page. Since only `value` is allowed this prop\n    can normally be ignored.\n\n- persistence (string | number | boolean; optional):\n    Used to allow user interactions in this component to be persisted\n    when the component - or the page - is refreshed. If `persisted` is\n    truthy and hasn't changed from its previous value, a `value` that\n    the user has changed while using the app will keep that change, as\n    long as the new `value` also matches what was given originally.\n    Used in conjunction with `persistence_type`. Note:  The component\n    must have an `id` for persistence to work.\n\n- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):\n    Where persisted user changes will be stored: memory: only kept in\n    memory, reset on page refresh. local: window.localStorage, data is\n    kept after the browser quit. session: window.sessionStorage, data\n    is cleared once the browser quit.\n\n- selected (string; optional):\n    Currently selected text. Affected by debounce.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- toolbar (dict; optional):\n    Toolbar property definition. Empty by default.\n\n    `toolbar` is a dict with keys:\n\n- variant (a value equal to: 'default', 'subtle'; optional):\n    Variant of the editor.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withCodeHighlightStyles (boolean; optional):\n    Determines whether code highlight styles should be added, True by\n    default.\n\n- withTypographyStyles (boolean; optional):\n    Determines whether typography styles should be added, True by\n    default."
  },
  {
    "name": "SegmentedControl",
    "description": "SegmentedControl is an alternative to RadioGroup and allows users to select an option from a small set of options.",
    "endpoint": "/components/segmentedcontrol",
    "package": "dash_mantine_components",
    "category": "Inputs",
    "content": "\n\n## SegmentedControl  \nSegmentedControl is an alternative to RadioGroup and allows users to select an option from a small set of options.  \nCategory: Inputs  \n\n### Simple Example\n\nSegmentedControl is usually used as an alternative to Tabs (to switch views) and RadioGroup (to capture user feedback\nlimited to certain options)\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import Output, Input, html, callback\n\ncomponent = html.Div(\n    [\n        dmc.SegmentedControl(\n            id=\"segmented\",\n            value=\"ng\",\n            data=[\n                {\"value\": \"react\", \"label\": \"React\"},\n                {\"value\": \"ng\", \"label\": \"Angular\"},\n                {\"value\": \"svelte\", \"label\": \"Svelte\"},\n                {\"value\": \"vue\", \"label\": \"Vue\"},\n            ],\n            mb=10,\n        ),\n        dmc.Text(id=\"segmented-value\"),\n    ]\n)\n\n\n@callback(Output(\"segmented-value\", \"children\"), Input(\"segmented\", \"value\"))\ndef select_value(value):\n    return value\n```\n### Data Prop\n\nThe data can be provided as either:\n* an array of strings - use when label and value are same.\n* an array of dicts with `label` and `value` properties (plus an optional `disabled` boolean).\n\n```python\ndata = [\"React\", \"Angular\", \"Svelte\", \"Vue\"]\n\n# or\n\ndata = [\n    {\"value\": \"React\", \"label\": \"React\"},\n    {\"value\": \"Angular\", \"label\": \"Angular\"},\n    {\"value\": \"Svelte\", \"label\": \"Svelte\", \"disabled\": True},\n    {\"value\": \"Vue\", \"label\": \"Vue\"},\n]\n```\n\n### Disabled\n\nTo disable the entire component, use the `disabled` prop. To disable a SegmentedControl item, use the array of objects data format and set `disabled = True` on the item that you want to disable. \n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Stack(\n    [\n        dmc.Text(\"Disabled control\"),\n        dmc.SegmentedControl(\n            disabled=True,\n            data=[\n                {\"value\": \"preview\", \"label\": \"Preview\"},\n                {\"value\": \"code\", \"label\": \"Code\"},\n                {\"value\": \"export\", \"label\": \"Export\"},\n            ],\n        ),\n        dmc.Text(\"Disabled option\"),\n        dmc.SegmentedControl(\n            data=[\n                {\"value\": \"preview\", \"label\": \"Preview\", \"disabled\": True},\n                {\"value\": \"code\", \"label\": \"Code\"},\n                {\"value\": \"export\", \"label\": \"Export\"},\n            ],\n        ),\n    ],\n    align=\"flex-start\",\n)\n```\n### Full Width and Orientation\n\nBy default, SegmentedControl will take only the amount of space that is required to render elements. Set `fullWidth` \nprop to make it block and take 100% width of its container. The orientation can be set via `orientation` prop.\n\n```python\nimport dash_mantine_components as dmc\n\ndmc.SegmentedControl(\n    orientation=\"horizontal\",\n    fullWidth=True,\n    data=[]\n)\n```\n\n### Sizes\n\nSegmentedControl supports 5 sizes: xs, sm, md, lg, xl. Size controls font-size and padding properties.\n\n```python\nimport dash_mantine_components as dmc\n\ndata = [\"Dash\", \"Mantine\", \"Bootstrap\", \"Core\"]\n\ncomponent = dmc.Stack(\n    [dmc.SegmentedControl(data=data, size=x) for x in [\"xs\", \"sm\", \"md\", \"lg\", \"xl\"]],\n    align=\"flex-start\",\n)\n```\n### Radius\n\nxs, sm, md, lg, xl radius values are defined in theme.radius. Alternatively, you can use a number to set radius in px.\n\n```python\nimport dash_mantine_components as dmc\n\ndata = [\"Dash\", \"Mantine\", \"Bootstrap\", \"Core\"]\n\ncomponent = dmc.Stack(\n    [dmc.SegmentedControl(data=data, radius=x) for x in [0, \"md\", \"lg\", 20]],\n    align=\"flex-start\",\n)\n```\n### Color\n\nBy default, SegmentedControl uses theme.white with shadow in light color scheme and theme.colors.dark[6] background \ncolor for active element. You can choose any color defined in theme.colors in case you need colored variant.\n\n```python\nimport dash_mantine_components as dmc\n\ndmc.SegmentedControl(\n    color=\"red\",\n    data = []\n)\n```\n\n### Transitions\nChange transition properties with:\n\n- `transitionDuration` – all transitions duration in ms (ignored if user prefers to reduce motion)\n- `transitionTimingFunction` – defaults to `theme.transitionTimingFunction`\n\n```python\nimport dash_mantine_components as dmc\n\ndata = [\"Dash\", \"Mantine\", \"Bootstrap\", \"Core\"]\n\ncomponent = dmc.Stack(\n    [\n        dmc.Text(\"No transition\"),\n        dmc.SegmentedControl(data=data, transitionDuration=0),\n        dmc.Text(\"500ms linear transition\"),\n        dmc.SegmentedControl(\n            data=data, transitionDuration=500, transitionTimingFunction=\"linear\"\n        ),\n    ],\n    align=\"flex-start\",\n)\n```\n### Components in label\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import Output, Input, html, callback\nfrom dash_iconify import DashIconify\n\ndata = [\n    [\"Preview\", \"tabler:eye\"],\n    [\"Code\", \"tabler:code\"],\n    [\"Export\", \"tabler:external-link\"],\n]\n\ncomponent = html.Div(\n    [\n        dmc.SegmentedControl(\n            id=\"segmented-with-react-nodes\",\n            value=\"Preview\",\n            data=[\n                {\n                    \"value\": v,\n                    \"label\": dmc.Center(\n                        [DashIconify(icon=icon, width=16), html.Span(v)],\n                        style={\"gap\": 10},\n                    ),\n                }\n                for v, icon in data\n            ],\n            mb=10,\n        ),\n        dmc.Text(id=\"segmented--value-data\"),\n    ]\n)\n\n\n@callback(\n    Output(\"segmented--value-data\", \"children\"),\n    Input(\"segmented-with-react-nodes\", \"value\"),\n)\ndef update_value(value):\n    return value\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n| Name       | Static selector                      | Description                                             |\n|:-----------|:-------------------------------------|:--------------------------------------------------------|\n| root       | .mantine-SegmentedControl-root       | Root element                                            |\n| control    | .mantine-SegmentedControl-control    | Wrapper element for input and label                     |\n| input      | .mantine-SegmentedControl-input      | Input element hidden by default                         |\n| label      | .mantine-SegmentedControl-label      | Label element associated with input                     |\n| indicator  | .mantine-SegmentedControl-indicator  | Floating indicator that moves between items             |\n| innerLabel | .mantine-SegmentedControl-innerLabel | Wrapper of label element children                       |\n\n\n### Keyword Arguments\n#### SegmentedControl\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- autoContrast (boolean; optional):\n    Determines whether text color should depend on `background-color`\n    of the indicator. If luminosity of the `color` prop is less than\n    `theme.luminosityThreshold`, then `theme.white` will be used.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- color (optional):\n    Key of `theme.colors` or any valid CSS color, changes color of\n    indicator, by default color is based on current color scheme.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data (list of strings; required):\n    Data based on which controls are rendered.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- disabled (boolean; optional):\n    Determines whether the component is disabled.\n\n- fullWidth (boolean; optional):\n    Determines whether the component should take 100% width of its\n    parent, `False` by default.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- name (string; optional):\n    Name of the radio group, by default random name is generated.\n\n- orientation (a value equal to: 'horizontal', 'vertical'; optional):\n    Determines in which orientation component id displayed,\n    `'horizontal'` by default.\n\n- persisted_props (list of strings; optional):\n    Properties whose user interactions will persist after refreshing\n    the component or the page. Since only `value` is allowed this prop\n    can normally be ignored.\n\n- persistence (string | number | boolean; optional):\n    Used to allow user interactions in this component to be persisted\n    when the component - or the page - is refreshed. If `persisted` is\n    truthy and hasn't changed from its previous value, a `value` that\n    the user has changed while using the app will keep that change, as\n    long as the new `value` also matches what was given originally.\n    Used in conjunction with `persistence_type`. Note:  The component\n    must have an `id` for persistence to work.\n\n- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):\n    Where persisted user changes will be stored: memory: only kept in\n    memory, reset on page refresh. local: window.localStorage, data is\n    kept after the browser quit. session: window.sessionStorage, data\n    is cleared once the browser quit.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set\n    `border-radius`, numbers are converted to rem,\n    `theme.defaultRadius` by default.\n\n- readOnly (boolean; optional):\n    Determines whether the value can be changed.\n\n- size (optional):\n    Controls `font-size`, `padding` and `height` properties, `'sm'` by\n    default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- transitionDuration (number; optional):\n    Indicator `transition-duration` in ms, set `0` to turn off\n    transitions, `200` by default.\n\n- transitionTimingFunction (string; optional):\n    Indicator `transition-timing-function` property, `ease` by\n    default.\n\n- value (string; optional):\n    Controlled component value.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withItemsBorders (boolean; optional):\n    Determines whether there should be borders between items, `True`\n    by default."
  },
  {
    "name": "Slider",
    "description": "Use Slider component to capture user feedback from a range of values.",
    "endpoint": "/components/slider",
    "package": "dash_mantine_components",
    "category": "Inputs",
    "content": "\n\n## Slider  \nUse Slider component to capture user feedback from a range of values.  \nCategory: Inputs  \n\n### Introduction\n\n### Simple Usage\n\nUse the `value` prop to get the value of the slider.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import callback, html, Output, Input\n\ncomponent = html.Div(\n    [\n        dmc.Slider(\n            id=\"slider-callback\",\n            value=26,\n            marks=[\n                {\"value\": 20, \"label\": \"20%\"},\n                {\"value\": 50, \"label\": \"50%\"},\n                {\"value\": 80, \"label\": \"80%\"},\n            ],\n            mb=35,\n        ),\n        dmc.Text(id=\"slider-output\"),\n    ]\n)\n\n\n@callback(Output(\"slider-output\", \"children\"), Input(\"slider-callback\", \"value\"))\ndef update_value(value):\n    return f\"You have selected: {value}\"\n```\n### Range Slider\n\nNote: The `RangeSlider` has a `minRange` prop that defaults to 10. Make sure `minRange` is not greater than the\nslider's maximum value, or the slider won't work properly.\n\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import callback, html, Output, Input\n\ncomponent = html.Div(\n    [\n        dmc.RangeSlider(\n            id=\"range-slider-callback\",\n            value=[26, 50],\n            marks=[\n                {\"value\": 20, \"label\": \"20%\"},\n                {\"value\": 50, \"label\": \"50%\"},\n                {\"value\": 80, \"label\": \"80%\"},\n            ],\n            mb=35,\n        ),\n        dmc.Text(id=\"range-slider-output\"),\n    ]\n)\n\n\n@callback(\n    Output(\"range-slider-output\", \"children\"), Input(\"range-slider-callback\", \"value\")\n)\ndef update_value(value):\n    return f\"You have selected: [{value[0]}, {value[1]}]\"\n```\n### minRange\n\nUse `minRange` prop to control minimum range between from and to values in `RangeSlider`. The default value is 10.\nThe example below shows how to use `minRange` prop to capture decimal values from the user:\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.RangeSlider(\n    minRange=0.2, min=0, max=1, step=0.0005, value=[0.1245, 0.5535]\n)\n```\n### Update Mode\n\nBy default, slider value is updated once the user has stopped dragging the handle. But it can be changed by changing\nthe `updatemode` to \"drag\" instead of \"mouseup\" (default).\n\nBelow is a slider with `updatemode` set to \"drag\", observe how the output text changes as you drag the slider handle.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import callback, html, Output, Input\n\ncomponent = html.Div(\n    [\n        dmc.Slider(\n            id=\"drag-slider\",\n            value=26,\n            updatemode=\"drag\",\n            marks=[\n                {\"value\": 20, \"label\": \"20%\"},\n                {\"value\": 50, \"label\": \"50%\"},\n                {\"value\": 80, \"label\": \"80%\"},\n            ],\n        ),\n        dmc.Space(h=35),\n        dmc.Text(id=\"drag-output\"),\n    ]\n)\n\n\n@callback(Output(\"drag-output\", \"children\"), Input(\"drag-slider\", \"value\"))\ndef update_value(value):\n    return f\"You have selected: {value}\"\n```\n### Control label\nTo change label behavior and appearance, set the following props:\n\n\n- `label` – set to `None` to disable the label. You can also provide a formatter function (via `{\"function\": \"...\"}`) to customize the label text. The function receives the `value` as its argument.\n- `labelAlwaysOn` – if `True` – label will always be displayed, by default label is visible only when user is dragging\n- `labelTransitionProps` – props passed down to the `Transition` component, can be used to customize label animation\n\n\nNote: This example uses custom JavaScript defined in the assets folder. Learn more in the \"Functions As Props\" section of this document.\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Stack([\n    dmc.Text(\"No label\", size=\"sm\"),\n    dmc.Slider(value=40, label=None),\n\n    dmc.Text(\"Label formatted with a function\", size=\"sm\", mt=\"xl\"),\n    dmc.Slider(\n        value=40,\n        label={\"function\": \"celsiusLabel\"}\n    ),\n\n    dmc.Text(\"Label always visible\", size=\"sm\", mt=\"xl\"),\n    dmc.Slider(value=40, labelAlwaysOn=True),\n\n    dmc.Text(\"Custom label transition\", size=\"sm\", mt=\"xl\"),\n    dmc.Slider(\n        value=40,\n        labelTransitionProps={\n            \"transition\": \"skew-down\",\n            \"duration\": 150,\n            \"timingFunction\": \"linear\"\n        }\n    ),\n])\n```\n\n```javascript\n\nvar dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\n\ndmcfuncs.celsiusLabel = (value) => `${value} °C`;\n```\n\n\n### Min, Max, and Step\n\nYou can set `min`, `max` and `step` values for `Slider` component. This will work even for negative and decimal values.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Slider(min=-10, max=10, step=0.5)\n```\nThe following example uses a function to format the `label`\n\n\nNote: This example uses custom JavaScript defined in the assets folder. Learn more in the \"Functions As Props\" section of this document.\n\n\n```python\n\nimport dash_mantine_components as dmc\n\nmarks = [\n    {\"value\": 0, \"label\": \"xs\"},\n    {\"value\": 25, \"label\": \"sm\"},\n    {\"value\": 50, \"label\": \"md\"},\n    {\"value\": 75, \"label\": \"lg\"},\n    {\"value\": 100, \"label\": \"xl\"},\n]\n\ncomponent = dmc.Container([\n    dmc.Text(\"Decimal step\"),\n    dmc.Slider(\n        value=0,\n        min=-10,\n        max=10,\n        step=0.1,\n        label={\"function\": \"formatDecimal\"},\n        styles={\"markLabel\": {\"display\": \"none\"}},\n    ),\n\n    dmc.Text(\"Step matched with marks\", mt=\"md\"),\n    dmc.Slider(\n        value=50,\n        step=25,\n        marks=marks,\n        label={\"function\": \"labelFromMarks\", \"options\": {\"marks\": marks}},\n        styles={\"markLabel\": {\"display\": \"none\"}},\n    ),\n], p=\"xl\")\n```\n\n```javascript\nvar dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\n\ndmcfuncs.formatDecimal = function (value) {\n  return value.toFixed(1);\n};\n\ndmcfuncs.labelFromMarks = function (value, { marks }) {\n  const match = marks.find(m => m.value === value);\n  return match ? match.label : null;\n};\n```\n\n\n### Domain\nBy default, min and max values define the possible range of values. `domain` prop allows setting the possible range\nof values independently of the min and max values:\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Slider(\n    domain=[0, 100],\n      min=10,\n      max=90,\n      value=25,\n      marks=[\n        { \"value\": 10, \"label\": 'min' },\n        { \"value\": 90, \"label\": 'max' },\n      ]\n)\n```\n### pushOnOverlap\n`pushOnOverlap` prop controls whether the thumbs should push each other when they overlap. By default, `pushOnOverlap`\nis `True`, if you want to disable this behavior, set it to `False`.\n\nExample of `pushOnOverlap=False`:\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.RangeSlider(\n    pushOnOverlap=False,\n    minRange=20,\n    value=[25, 65]\n)\n```\n### Marks\n\nAdd any number of marks to the Slider by setting `marks` prop to an array of objects.\n\n```python\nmarks = [\n  { \"value\": 20 },                          # displays mark on slider track\n  { \"value\": 40, \"label\": '40%' },          # adds mark label below slider track\n]\n```\n\n### Restrict selection to marks\nSetting `restrictToMarks=True` ensures that users can only select values matching the specific marks defined. This \nfeature is especially helpful when you have uneven or non-standard marks and want to ensure users can only pick \nfrom those specific points.\n\nNote: The `step` prop is ignored when `restrictToMarks=True`.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Stack(\n    [\n        # Slider\n        dmc.Slider(\n            restrictToMarks=True,\n            value=25,\n            marks=[{\"value\": index * 25} for index in range(5)],\n        ),\n        # RangeSlider\n        dmc.RangeSlider(\n            restrictToMarks=True,\n            value=[5, 15],\n            marks=[\n                {\"value\": 5},\n                {\"value\": 15},\n                {\"value\": 25},\n                {\"value\": 35},\n                {\"value\": 70},\n                {\"value\": 80},\n                {\"value\": 90},\n            ],\n        ),\n    ]\n)\n```\n### Disabled\n\n```python\nimport dash_mantine_components as dmc\n\n\ncomponent = dmc.Stack(\n    [\n        dmc.Slider(value=60, disabled=True),\n        dmc.RangeSlider(\n            mt=\"xl\",\n            mb=\"xl\",\n            value=[25, 75],\n            disabled=True,\n            marks=[\n                {\"value\": 0, \"label\": \"xs\"},\n                {\"value\": 25, \"label\": \"sm\"},\n                {\"value\": 50, \"label\": \"md\"},\n                {\"value\": 75, \"label\": \"lg\"},\n                {\"value\": 100, \"label\": \"xl\"},\n            ],\n        ),\n    ]\n)\n```\n### Thumb size\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Stack(\n    [\n        dmc.Text(\"Standard size\", size=\"sm\"),\n        dmc.Slider(value=40, label=None),\n        dmc.Text(\"Thumb size number\", size=\"sm\", mt=\"xl\"),\n        dmc.Slider(value=40, thumbSize=50),\n    ]\n)\n```\n### Thumb children\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ncomponent = [\n    dmc.Slider(\n        thumbChildren=DashIconify(icon=\"mdi:heart\", width=16),\n        color=\"red\",\n        label=None,\n        value=40,\n        thumbSize=26,\n        styles={\"thumb\": {\"borderWidth\": 2, \"padding\": 3}},\n    ),\n    dmc.RangeSlider(\n        mt=\"xl\",\n        styles={\"thumb\": {\"borderWidth\": 2, \"padding\": 3}},\n        color=\"red\",\n        label=None,\n        value=[20, 60],\n        thumbSize=26,\n        thumbChildren=[\n            DashIconify(icon=\"mdi:heart\", width=16),\n            DashIconify(icon=\"mdi:heart-broken\", width=16),\n        ],\n    ),\n]\n```\n### Scale\nYou can use the scale prop to represent the value on a different scale.\n\nIn the following demo, the value x represents the value 2^x. Increasing x by one increases the represented value by 2 to the power of x.\n\n\n\nNote: This example uses custom JavaScript defined in the assets folder. Learn more in the \"Functions As Props\" section of this document.\n\n\n\n### Inverted\nYou can invert the track by setting `inverted=True`:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Stack(\n    [\n        dmc.Slider(inverted=True, value=80),\n        dmc.RangeSlider(inverted=True, value=[40, 60], mt=\"xl\"),\n    ]\n)\n```\n### Dash 4 Slider and RangeSlider\n\nThe Dash 4 [`dcc.Slider`](https://dash.plotly.com/dash-core-components/slider) and `dcc.RangeSlider` components supports \nsome features that are not available in DMC, for example integrated numeric input fields and vertical sliders. To style\nthe `dcc.Slider` with a Mantine theme see the   [Dash 4 components](/dash4-components) section.\n\n### Styling the Slider\n\nThe `Slider` component can be fully customized using Mantine's Styles API. Each element of the `Slider` - from the\nthumb to the track markers - has its own unique selector that can be styled independently.\n\nTry the [interactive example](https://mantine.dev/core/slider/#styles-api) in the upstream Mantine documentation to see\nhow these selectors correspond to different parts of the Slider component. Below, you'll find a comprehensive reference\nof all available selectors, CSS variables, and data attributes.\n\nHere is an example:\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Slider(\n    value=79,\n    marks=[\n        {\"value\": 20, \"label\": \"20%\"},\n        {\"value\": 50, \"label\": \"50%\"},\n        {\"value\": 80, \"label\": \"80%\"},\n    ],\n    size=2,\n    classNames={\n        \"track\": \"dmc-slider-track\",\n        \"mark\": \"dmc-slider-mark\",\n        \"markLabel\": \"dmc-slider-markLabel\",\n        \"thumb\": \"dmc-slider-thumb\",\n    },\n)\n```\n\n```css\n\n.dmc-slider-track {\n  &::before {\n    background-color: light-dark(var(--mantine-color-blue-1), var(--mantine-color-dark-3));\n  }\n}\n\n.dmc-slider-mark {\n  width: 6px;\n  height: 6px;\n  border-radius: 6px;\n  transform: translateX(-3px) translateY(-2px);\n  border-color: light-dark(var(--mantine-color-blue-1), var(--mantine-color-dark-3));\n\n  &[data-filled] {\n    border-color: var(--mantine-color-blue-6);\n  }\n}\n\n.dmc-slider-markLabel {\n  font-size: var(--mantine-font-size-sm);\n  color: var(--mantine-color-green-5);\n  margin-bottom: 5px;\n  margin-top: 0;\n}\n\n.dmc-slider-thumb {\n  height: 16px;\n  width: 16px;\n  background-color: var(--mantine-color-green-5);\n  border-width: 1px;\n  box-shadow: var(--mantine-shadow-lg);\n}\n```\n\n\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n#### Slider selectors\n\n| Selector | Static selector | Description |\n|----------|----------------|-------------|\n| root | `.mantine-Slider-root` | Root element |\n| label | `.mantine-Slider-label` | Thumb label |\n| thumb | `.mantine-Slider-thumb` | Thumb element |\n| trackContainer | `.mantine-Slider-trackContainer` | Wraps track element |\n| track | `.mantine-Slider-track` | Slider track |\n| bar | `.mantine-Slider-bar` | Track filled part |\n| markWrapper | `.mantine-Slider-markWrapper` | Contains `mark` and `markLabel` elements |\n| mark | `.mantine-Slider-mark` | Mark displayed on track |\n| markLabel | `.mantine-Slider-markLabel` | Label of the associated mark, displayed below track |\n\n#### Slider CSS variables\n\n| Selector | Variable | Description |\n|----------|----------|-------------|\n| root | `--slider-size` | Controls track `height` |\n| root | `--slider-color` | Controls filled track, thumb and marks `background` |\n| root | `--slider-thumb-size` | Controls thumb `width` and `height` |\n| root | `--slider-radius` | Controls `border-radius` of track and thumb |\n\n#### Slider data attributes\n\n| Selector | Attribute | Condition |\n|----------|-----------|-----------|\n| trackContainer, track, bar, thumb, mark | `data-disabled` | `disabled` prop is set |\n| track, bar | `data-inverted` | `inverted` prop is set |\n| thumb | `data-dragging` | slider is being dragged |\n| mark | `data-filled` | mark position is less or equal slider value |\n\n\n\n### Keyword Arguments\n#### Slider\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- color (optional):\n    Key of `theme.colors` or any valid CSS color, controls color of\n    track and thumb, `theme.primaryColor` by default.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- disabled (boolean; optional):\n    Disables slider.\n\n- domain (list of 2 elements: [number, number]; optional):\n    Domain of the slider, defines the full range of possible values,\n    `[min, max]` by default.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- inverted (boolean; optional):\n    Determines whether track value representation should be inverted,\n    `False` by default.\n\n- label (a list of or a singular dash component, string or number; optional):\n    Function to generate label (See\n    https://www.dash-mantine-components.com/functions-as-props) or any\n    react node to render instead, set to None to disable label.\n\n- labelAlwaysOn (boolean; optional):\n    Determines whether the label should be visible when the slider is\n    not being dragged or hovered, `False` by default.\n\n- labelTransitionProps (dict; optional):\n    Props passed down to the `Transition` component, `{ transition:\n    'fade', duration: 0 }` by default.\n\n    `labelTransitionProps` is a dict with keys:\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- marks (list of dicts; optional):\n    Marks displayed on the track.\n\n    `marks` is a list of dicts with keys:\n\n- max (number; optional):\n    Maximum possible value, `100` by default.\n\n- min (number; optional):\n    Minimal possible value, `0` by default.\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- name (string; optional):\n    Hidden input name, use with uncontrolled component.\n\n- persisted_props (list of strings; optional):\n    Properties whose user interactions will persist after refreshing\n    the component or the page. Since only `value` is allowed this prop\n    can normally be ignored.\n\n- persistence (string | number | boolean; optional):\n    Used to allow user interactions in this component to be persisted\n    when the component - or the page - is refreshed. If `persisted` is\n    truthy and hasn't changed from its previous value, a `value` that\n    the user has changed while using the app will keep that change, as\n    long as the new `value` also matches what was given originally.\n    Used in conjunction with `persistence_type`. Note:  The component\n    must have an `id` for persistence to work.\n\n- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):\n    Where persisted user changes will be stored: memory: only kept in\n    memory, reset on page refresh. local: window.localStorage, data is\n    kept after the browser quit. session: window.sessionStorage, data\n    is cleared once the browser quit.\n\n- precision (number; optional):\n    Number of significant digits after the decimal point.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set\n    `border-radius`, numbers are converted to rem, `'xl'` by default.\n\n- restrictToMarks (boolean; optional):\n    Determines whether the selection should be only allowed from the\n    given marks array, False by default.\n\n- scale (boolean | number | string | dict | list; optional):\n    Function to generate scale (See\n    https://www.dash-mantine-components.com/functions-as-props) A\n    transformation function to change the scale of the slider.\n\n- showLabelOnHover (boolean; optional):\n    Determines whether the label should be displayed when the slider\n    is hovered, `True` by default.\n\n- size (number; optional):\n    Controls size of the track, `'md'` by default.\n\n- step (number; optional):\n    Number by which value will be incremented/decremented with thumb\n    drag and arrows, `1` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- thumbChildren (a list of or a singular dash component, string or number; optional):\n    Content rendered inside thumb.\n\n- thumbLabel (string; optional):\n    Thumb `aria-label`.\n\n- thumbSize (string | number; optional):\n    Thumb `width` and `height`, by default value is computed based on\n    `size` prop.\n\n- updatemode (a value equal to: 'mouseup', 'drag'; default 'mouseup'):\n    Determines when the component should update its value property. If\n    mouseup (the default) then the slider will only trigger its value\n    when the user has finished dragging the slider. If drag, then the\n    slider will update its value continuously as it is being dragged.\n\n- value (number; optional):\n    Controlled component value.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n#### RangeSlider\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- color (optional):\n    Key of `theme.colors` or any valid CSS color, controls color of\n    track and thumb, `theme.primaryColor` by default.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- disabled (boolean; optional):\n    Disables slider.\n\n- domain (list of 2 elements: [number, number]; optional):\n    Domain of the slider, defines the full range of possible values,\n    `[min, max]` by default.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- inverted (boolean; optional):\n    Determines whether track values representation should be inverted,\n    `False` by default.\n\n- label (a list of or a singular dash component, string or number; optional):\n    Function to generate label (See\n    https://www.dash-mantine-components.com/functions-as-props) or any\n    react node to render instead, set to None to disable label.\n\n- labelAlwaysOn (boolean; optional):\n    Determines whether the label should be visible when the slider is\n    not being dragged or hovered, `False` by default.\n\n- labelTransitionProps (dict; optional):\n    Props passed down to the `Transition` component, `{ transition:\n    'fade', duration: 0 }` by default.\n\n    `labelTransitionProps` is a dict with keys:\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- marks (list of dicts; optional):\n    Marks displayed on the track.\n\n    `marks` is a list of dicts with keys:\n\n- max (number; optional):\n    Maximum possible value, `100` by default.\n\n- maxRange (number; optional):\n    Maximum range interval, `Infinity` by default.\n\n- min (number; optional):\n    Minimal possible value, `0` by default.\n\n- minRange (number; optional):\n    Minimal range interval, `10` by default.\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- name (string; optional):\n    Hidden input name, use with uncontrolled component.\n\n- persisted_props (list of strings; optional):\n    Properties whose user interactions will persist after refreshing\n    the component or the page. Since only `value` is allowed this prop\n    can normally be ignored.\n\n- persistence (string | number | boolean; optional):\n    Used to allow user interactions in this component to be persisted\n    when the component - or the page - is refreshed. If `persisted` is\n    truthy and hasn't changed from its previous value, a `value` that\n    the user has changed while using the app will keep that change, as\n    long as the new `value` also matches what was given originally.\n    Used in conjunction with `persistence_type`. Note:  The component\n    must have an `id` for persistence to work.\n\n- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):\n    Where persisted user changes will be stored: memory: only kept in\n    memory, reset on page refresh. local: window.localStorage, data is\n    kept after the browser quit. session: window.sessionStorage, data\n    is cleared once the browser quit.\n\n- precision (number; optional):\n    Number of significant digits after the decimal point.\n\n- pushOnOverlap (boolean; optional):\n    Determines whether the other thumb should be pushed by the current\n    thumb dragging when minRange/maxRange is reached, True by default.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set\n    `border-radius`, numbers are converted to rem, `'xl'` by default.\n\n- restrictToMarks (boolean; optional):\n    Determines whether the selection should be only allowed from the\n    given marks array, False by default.\n\n- scale (boolean | number | string | dict | list; optional):\n    Function to generate scale (See\n    https://www.dash-mantine-components.com/functions-as-props) A\n    transformation function to change the scale of the slider.\n\n- showLabelOnHover (boolean; optional):\n    Determines whether the label should be displayed when the slider\n    is hovered, `True` by default.\n\n- size (number; optional):\n    Controls size of the track, `'md'` by default.\n\n- step (number; optional):\n    Number by which value will be incremented/decremented with thumb\n    drag and arrows, `1` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- thumbChildren (a list of or a singular dash component, string or number; optional):\n    Content rendered inside thumb.\n\n- thumbFromLabel (string; optional):\n    First thumb `aria-label`.\n\n- thumbSize (string | number; optional):\n    Thumb `width` and `height`, by default value is computed based on\n    `size` prop.\n\n- thumbToLabel (string; optional):\n    Second thumb `aria-label`.\n\n- updatemode (a value equal to: 'mouseup', 'drag'; default 'mouseup'):\n    Determines when the component should update its value property. If\n    mouseup (the default) then the Rangeslider will only trigger its\n    value when the user has finished dragging the Rangeslider. If\n    drag, then the Rangeslider will update its value continuously as\n    it is being dragged.\n\n- value (list of 2 elements: [number, number]; optional):\n    Controlled component value.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`."
  },
  {
    "name": "Switch",
    "description": "Use the Switch component to capture boolean input from user.",
    "endpoint": "/components/switch",
    "package": "dash_mantine_components",
    "category": "Inputs",
    "content": "\n\n## Switch  \nUse the Switch component to capture boolean input from user.  \nCategory: Inputs  \n\n### Introduction\n\n### Callbacks\n\nUse the property `checked` to use dmc.Switch in callbacks.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html, Output, Input, callback\n\ncomponent = html.Div(\n    [\n        dmc.Switch(id=\"switch-example\", label=\"Use default settings.\", checked=True),\n        dmc.Space(h=10),\n        dmc.Text(id=\"switch-settings\"),\n    ]\n)\n\n\n@callback(Output(\"switch-settings\", \"children\"), Input(\"switch-example\", \"checked\"))\ndef settings(checked):\n    return f\"Using {'default' if checked else 'custom'} settings\"\n```\n### Inner Labels\n\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Group(\n    [\n        dmc.Switch(onLabel=\"ON\", offLabel=\"OFF\", radius=\"xl\", size=x)\n        for x in [\"xs\", \"sm\", \"md\", \"lg\", \"xl\"]\n    ]\n)\n```\n### Radius and Size\n\nSet the radius and size of the Switch component using the `radius` and `size` prop respectively.\n\n```python\nimport dash_mantine_components as dmc\n\ndmc.Switch(\n    size=\"lg\",\n    radius=\"sm\",\n    label=\"Enable this option\",\n    checked=True\n)\n```\n\n### Icon Labels\n\nYou can also add icons in the switch labels.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ncomponent = dmc.Switch(\n    offLabel=DashIconify(icon=\"radix-icons:moon\", width=20),\n    onLabel=DashIconify(icon=\"radix-icons:sun\", width=20),\n    size=\"xl\",\n)\n```\n### Thumb Icon\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ncomponent = dmc.Switch(\n    thumbIcon=DashIconify(\n        icon=\"tabler:walk\", width=16, color= \"var(--mantine-color-teal-5)\"\n    ),\n    size=\"lg\",\n    color=\"teal\",\n    checked=True,\n)\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n| Name         | Static selector              | Description                                     |\n|:-------------|:-----------------------------|:------------------------------------------------|\n| root         | .mantine-Switch-root         | Root element                                    |\n| track        | .mantine-Switch-track        | Switch track, contains `thumb` and `trackLabel` |\n| trackLabel   | .mantine-Switch-trackLabel   | Label displayed inside `track`                  |\n| thumb        | .mantine-Switch-thumb        | Thumb displayed inside `track`                  |\n| input        | .mantine-Switch-input        | Input element, hidden by default                |\n| body         | .mantine-Switch-body         | Input body, contains all other elements         |\n| labelWrapper | .mantine-Switch-labelWrapper | Contains `label`, `description` and `error`     |\n| label        | .mantine-Switch-label        | Label element                                   |\n| description  | .mantine-Switch-description  | Description displayed below the label           |\n| error        | .mantine-Switch-error        | Error message displayed below the label         |\n\n\n### Keyword Arguments\n#### Switch\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- checked (boolean; optional):\n    State of check box.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- color (optional):\n    Key of `theme.colors` or any valid CSS color to set input color in\n    checked state, `theme.primaryColor` by default.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- description (a list of or a singular dash component, string or number; optional):\n    Description displayed below the label.\n\n- disabled (boolean; optional):\n    A checkbox can show it is currently unable to be interacted with.\n\n- error (a list of or a singular dash component, string or number; optional):\n    Error displayed below the label.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- label (a list of or a singular dash component, string or number; optional):\n    Content of the `label` associated with the radio.\n\n- labelPosition (a value equal to: 'left', 'right'; optional):\n    Position of the label relative to the input, `'right'` by default.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- offLabel (a list of or a singular dash component, string or number; optional):\n    Inner label when the `Switch` is in unchecked state.\n\n- onLabel (a list of or a singular dash component, string or number; optional):\n    Inner label when the `Switch` is in checked state.\n\n- persisted_props (list of strings; optional):\n    Properties whose user interactions will persist after refreshing\n    the component or the page. Since only `value` is allowed this prop\n    can normally be ignored.\n\n- persistence (string | number | boolean; optional):\n    Used to allow user interactions in this component to be persisted\n    when the component - or the page - is refreshed. If `persisted` is\n    truthy and hasn't changed from its previous value, a `value` that\n    the user has changed while using the app will keep that change, as\n    long as the new `value` also matches what was given originally.\n    Used in conjunction with `persistence_type`. Note:  The component\n    must have an `id` for persistence to work.\n\n- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):\n    Where persisted user changes will be stored: memory: only kept in\n    memory, reset on page refresh. local: window.localStorage, data is\n    kept after the browser quit. session: window.sessionStorage, data\n    is cleared once the browser quit.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set\n    `border-radius,` \"xl\" by default.\n\n- size (optional):\n    Controls size of all elements.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- thumbIcon (a list of or a singular dash component, string or number; optional):\n    Icon inside the thumb of the switch.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withThumbIndicator (boolean; optional):\n    If set, the indicator will be displayed inside thumb, `True` by\n    default.\n\n- wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the root element."
  },
  {
    "name": "TextInput",
    "description": "Use TextInput component to capture string input from user. Customize the input with label, description, error message etc.",
    "endpoint": "/components/textinput",
    "package": "dash_mantine_components",
    "category": "Inputs",
    "content": "\n\n## TextInput  \nUse TextInput component to capture string input from user. Customize the input with label, description, error message etc.  \nCategory: Inputs  \n\n### Introduction\n\n### Invalid State and Error\n\nUse `error` prop to convey an error with an error message and a red border around the input.\n\nNote: Dash adds thick red outline to the input element with `:invalid` pseudo-class. This conflicts with Mantine. \nIn order to correct this, just add the following css to your app.\n\n```css\ninput:invalid {\n    outline: none !important;\n}\n```\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Stack(\n    children=[\n        dmc.TextInput(label=\"Your Email:\", w=200, error=True),\n        dmc.TextInput(label=\"Your Email:\", w=200, error=\"Enter a valid email\"),\n    ],\n)\n```\n### Disabled State\n\nConvey disabled input with `disabled` prop.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.TextInput(label=\"Disabled Input\", w=200, disabled=True)\n```\n### With Icon\n\nAdd icon to the left side of the input.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ncomponent = dmc.TextInput(\n    label=\"Your Email\",\n    w=200,\n    placeholder=\"Your Email\",\n    leftSection=DashIconify(icon=\"ic:round-alternate-email\"),\n)\n```\n### With right section\n\nAdd icon or loading indicator to the right section of the input.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\n\ncomponent = dmc.Stack(\n    children=[\n        dmc.TextInput(\n            w=200,\n            placeholder=\"9876543210\",\n            rightSection=DashIconify(icon=\"emojione-v1:mobile-phone\"),\n        ),\n        dmc.TextInput(\n            w=200,\n            placeholder=\"9876543210\",\n            rightSection=dmc.Loader(size=\"xs\"),\n        ),\n    ],\n)\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n| Name        | Static selector                | Description                                      |\n|:------------|:-------------------------------|:-------------------------------------------------|\n| wrapper     | .mantine-TextInput-wrapper     | Root element of the Input                        |\n| input       | .mantine-TextInput-input       | Input element                                    |\n| section     | .mantine-TextInput-section     | Left and right sections                          |\n| root        | .mantine-TextInput-root        | Root element                                     |\n| label       | .mantine-TextInput-label       | Label element                                    |\n| required    | .mantine-TextInput-required    | Required asterisk element, rendered inside label |\n| description | .mantine-TextInput-description | Description element                              |\n| error       | .mantine-TextInput-error       | Error element                                    |\n\n\n### Keyword Arguments\n#### TextInput\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- autoComplete (string; default 'off'):\n    (string; default \"off\") Enables the browser to attempt\n    autocompletion based on user history.  For more information, see:\n    https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- debounce (number | boolean; default False):\n    (boolean | number; default False): If True, changes to input will\n    be sent back to the Dash server only on enter or when losing\n    focus. If it's False, it will send the value back on every change.\n    If a number, it will not send anything back to the Dash server\n    until the user has stopped typing for that number of milliseconds.\n\n- description (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Description` component. If not set, description\n    is not rendered.\n\n- descriptionProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Description` component.\n\n- disabled (boolean; optional):\n    Sets `disabled` attribute on the `input` element.\n\n- error (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Error` component. If not set, error is not\n    rendered.\n\n- errorProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Error` component.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- inputProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input` component.\n\n- inputWrapperOrder (list of a value equal to: 'label', 'input', 'description', 'error's; optional):\n    Controls order of the elements, `['label', 'description', 'input',\n    'error']` by default.\n\n- label (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Label` component. If not set, label is not\n    rendered.\n\n- labelProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Label` component.\n\n- leftSection (a list of or a singular dash component, string or number; optional):\n    Content section rendered on the left side of the input.\n\n- leftSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'none', 'auto', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):\n    Sets `pointer-events` styles on the `leftSection` element,\n    `'none'` by default.\n\n- leftSectionProps (dict; optional):\n    Props passed down to the `leftSection` element.\n\n- leftSectionWidth (string | number; optional):\n    Left section width, used to set `width` of the section and input\n    `padding-left`, by default equals to the input height.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- n_blur (number; default 0):\n    An integer that represents the number of times that this element\n    has lost focus.\n\n- n_submit (number; default 0):\n    An integer that represents the number of times that this element\n    has been submitted.\n\n- name (string; optional):\n    Name prop.\n\n- persisted_props (list of strings; optional):\n    Properties whose user interactions will persist after refreshing\n    the component or the page. Since only `value` is allowed this prop\n    can normally be ignored.\n\n- persistence (string | number | boolean; optional):\n    Used to allow user interactions in this component to be persisted\n    when the component - or the page - is refreshed. If `persisted` is\n    truthy and hasn't changed from its previous value, a `value` that\n    the user has changed while using the app will keep that change, as\n    long as the new `value` also matches what was given originally.\n    Used in conjunction with `persistence_type`. Note:  The component\n    must have an `id` for persistence to work.\n\n- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):\n    Where persisted user changes will be stored: memory: only kept in\n    memory, reset on page refresh. local: window.localStorage, data is\n    kept after the browser quit. session: window.sessionStorage, data\n    is cleared once the browser quit.\n\n- placeholder (string; optional):\n    Placeholder.\n\n- pointer (boolean; optional):\n    Determines whether the input should have `cursor: pointer` style,\n    `False` by default.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set\n    `border-radius`, numbers are converted to rem,\n    `theme.defaultRadius` by default.\n\n- readOnly (boolean; optional):\n    Readonly.\n\n- required (boolean; optional):\n    Adds required attribute to the input and a red asterisk on the\n    right side of label, `False` by default.\n\n- rightSection (a list of or a singular dash component, string or number; optional):\n    Content section rendered on the right side of the input.\n\n- rightSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'none', 'auto', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):\n    Sets `pointer-events` styles on the `rightSection` element,\n    `'none'` by default.\n\n- rightSectionProps (dict; optional):\n    Props passed down to the `rightSection` element.\n\n- rightSectionWidth (string | number; optional):\n    Right section width, used to set `width` of the section and input\n    `padding-right`, by default equals to the input height.\n\n- size (optional):\n    Controls input `height` and horizontal `padding`, `'sm'` by\n    default.\n\n- spellCheck (boolean; optional):\n    Spell check property.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- value (string; default ''):\n    Value for controlled input.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withAsterisk (boolean; optional):\n    Determines whether the required asterisk should be displayed.\n    Overrides `required` prop. Does not add required attribute to the\n    input. `False` by default.\n\n- withErrorStyles (boolean; optional):\n    Determines whether the input should have red border and red text\n    color when the `error` prop is set, `True` by default.\n\n- wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the root element."
  },
  {
    "name": "Textarea",
    "description": "Use Textarea component to capture string input in a text area with an auto-size variant. Customize the input with label, description, error message etc.",
    "endpoint": "/components/textarea",
    "package": "dash_mantine_components",
    "category": "Inputs",
    "content": "\n\n## Textarea  \nUse Textarea component to capture string input in a text area with an auto-size variant. Customize the input with label, description, error message etc.  \nCategory: Inputs  \n\n### Introduction\n\n### Autosize\n\nTextarea will grow until `maxRows` are reached or indefinitely if `maxRows` is not set.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Stack(\n    children=[\n        dmc.Textarea(\n            label=\"Autosize with no rows limit\",\n            placeholder=\"Autosize with no rows limit\",\n            w=500,\n            autosize=True,\n            minRows=2,\n        ),\n        dmc.Textarea(\n            label=\"Autosize with 4 rows max\",\n            placeholder=\"Autosize with 4 rows max\",\n            w=500,\n            autosize=True,\n            minRows=2,\n            maxRows=4,\n        ),\n    ],\n)\n```\n### Invalid State and Error\n\nUse `error` prop to convey an error with an error message and a red border around the input.\n\nNote: Dash adds thick red outline to the input element with `:invalid` pseudo-class. This conflicts with Mantine. \nIn order to correct this, just add the following css to your app.\n\n```css\ninput:invalid {\n    outline: none !important;\n}\n```\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Stack(\n    children=[\n        dmc.Textarea(label=\"Your message\", w=500, error=True),\n        dmc.Textarea(label=\"Your message\", w=500, error=\"Message can't be empty!\"),\n    ],\n)\n```\n### inputProps\n\nUse the `inputProps` dictionary to pass attributes directly to the underlying [`<input>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#attributes).\n\nIn this example, `maxLength` is used to limit the number of characters a user can enter.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Textarea(\n    inputProps={\"maxLength\": 3},\n    label=\"Enter text\",\n    description=\"Max length of 3 characters\",\n)\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n| Name        | Static selector               | Description                                      |\n|:------------|:------------------------------|:-------------------------------------------------|\n| wrapper     | .mantine-Textarea-wrapper     | Root element of the Input                        |\n| input       | .mantine-Textarea-input       | Input element                                    |\n| section     | .mantine-Textarea-section     | Left and right sections                          |\n| root        | .mantine-Textarea-root        | Root element                                     |\n| label       | .mantine-Textarea-label       | Label element                                    |\n| required    | .mantine-Textarea-required    | Required asterisk element, rendered inside label |\n| description | .mantine-Textarea-description | Description element                              |\n| error       | .mantine-Textarea-error       | Error element                                    |\n\n\n### Keyword Arguments\n#### Textarea\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- autoComplete (string; default 'off'):\n    (string; default \"off\") Enables the browser to attempt\n    autocompletion based on user history.  For more information, see:\n    https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete.\n\n- autosize (boolean; optional):\n    Determines whether the textarea height should grow with its\n    content, `False` by default.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- debounce (number | boolean; default False):\n    (boolean | number; default False): If True, changes to input will\n    be sent back to the Dash server only on enter or when losing\n    focus. If it's False, it will send the value back on every change.\n    If a number, it will not send anything back to the Dash server\n    until the user has stopped typing for that number of milliseconds.\n\n- description (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Description` component. If not set, description\n    is not rendered.\n\n- descriptionProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Description` component.\n\n- disabled (boolean; optional):\n    Sets `disabled` attribute on the `input` element.\n\n- error (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Error` component. If not set, error is not\n    rendered.\n\n- errorProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Error` component.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- inputProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input` component.\n\n- inputWrapperOrder (list of a value equal to: 'label', 'input', 'description', 'error's; optional):\n    Controls order of the elements, `['label', 'description', 'input',\n    'error']` by default.\n\n- label (a list of or a singular dash component, string or number; optional):\n    Contents of `Input.Label` component. If not set, label is not\n    rendered.\n\n- labelProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the `Input.Label` component.\n\n- leftSection (a list of or a singular dash component, string or number; optional):\n    Content section rendered on the left side of the input.\n\n- leftSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'none', 'auto', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):\n    Sets `pointer-events` styles on the `leftSection` element,\n    `'none'` by default.\n\n- leftSectionProps (dict; optional):\n    Props passed down to the `leftSection` element.\n\n- leftSectionWidth (string | number; optional):\n    Left section width, used to set `width` of the section and input\n    `padding-left`, by default equals to the input height.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- maxRows (number; optional):\n    Maximum rows for autosize textarea to grow, ignored if `autosize`\n    prop is not set.\n\n- minRows (number; optional):\n    Minimum rows of autosize textarea, ignored if `autosize` prop is\n    not set.\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- n_blur (number; default 0):\n    An integer that represents the number of times that this element\n    has lost focus.\n\n- n_submit (number; default 0):\n    An integer that represents the number of times that this element\n    has been submitted.\n\n- name (string; optional):\n    Name prop.\n\n- persisted_props (list of strings; optional):\n    Properties whose user interactions will persist after refreshing\n    the component or the page. Since only `value` is allowed this prop\n    can normally be ignored.\n\n- persistence (string | number | boolean; optional):\n    Used to allow user interactions in this component to be persisted\n    when the component - or the page - is refreshed. If `persisted` is\n    truthy and hasn't changed from its previous value, a `value` that\n    the user has changed while using the app will keep that change, as\n    long as the new `value` also matches what was given originally.\n    Used in conjunction with `persistence_type`. Note:  The component\n    must have an `id` for persistence to work.\n\n- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):\n    Where persisted user changes will be stored: memory: only kept in\n    memory, reset on page refresh. local: window.localStorage, data is\n    kept after the browser quit. session: window.sessionStorage, data\n    is cleared once the browser quit.\n\n- placeholder (string; optional):\n    Placeholder.\n\n- pointer (boolean; optional):\n    Determines whether the input should have `cursor: pointer` style,\n    `False` by default.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set\n    `border-radius`, numbers are converted to rem,\n    `theme.defaultRadius` by default.\n\n- readOnly (boolean; optional):\n    Readonly.\n\n- required (boolean; optional):\n    Adds required attribute to the input and a red asterisk on the\n    right side of label, `False` by default.\n\n- resize (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'none', 'block', 'inline', 'both', 'horizontal', 'vertical'; optional):\n    Controls `resize` CSS property, `'none'` by default.\n\n- rightSection (a list of or a singular dash component, string or number; optional):\n    Content section rendered on the right side of the input.\n\n- rightSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'none', 'auto', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):\n    Sets `pointer-events` styles on the `rightSection` element,\n    `'none'` by default.\n\n- rightSectionProps (dict; optional):\n    Props passed down to the `rightSection` element.\n\n- rightSectionWidth (string | number; optional):\n    Right section width, used to set `width` of the section and input\n    `padding-right`, by default equals to the input height.\n\n- size (optional):\n    Controls input `height` and horizontal `padding`, `'sm'` by\n    default.\n\n- spellCheck (boolean; optional):\n    Spell check property.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- value (string; default ''):\n    Content.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withAsterisk (boolean; optional):\n    Determines whether the required asterisk should be displayed.\n    Overrides `required` prop. Does not add required attribute to the\n    input. `False` by default.\n\n- withErrorStyles (boolean; optional):\n    Determines whether the input should have red border and red text\n    color when the `error` prop is set, `True` by default.\n\n- wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):\n    Props passed down to the root element."
  },
  {
    "name": "AppShell",
    "description": "Responsive shell for your application with header, navbar, aside and footer.",
    "endpoint": "/components/appshell",
    "package": "dash_mantine_components",
    "category": "Layout",
    "content": "\n\n## AppShell  \nResponsive shell for your application with header, navbar, aside and footer.  \nCategory: Layout  \n\n### Examples  \n\nSince `AppShell` components have fixed position, it is not possible to include live demos on this page.\n\n\nPlease see the code in the [dmc-docs GitHub](https://github.com/snehilvj/dmc-docs/tree/main/help_center/appshell).  The Appshell example apps are deployed on [Plotly Cloud](https://plotly.com/cloud/).\n\n \n1 Basic AppShell with Header and Navbar\n   - [View Code on GitHub](https://github.com/snehilvj/dmc-docs/tree/main/help_center/appshell/basic_appshell.py)  \n   - [Live Demo on Plotly Cloud](https://dmc-appshell-basic.plotly.app/)  \n\n```python\n\"\"\"\nBasic Appshell with header and  navbar that collapses on mobile.\n\"\"\"\n\nimport dash_mantine_components as dmc\nfrom dash import Dash, Input, Output, State, callback\n\napp = Dash()\n\nlogo = \"https://github.com/user-attachments/assets/c1ff143b-4365-4fd1-880f-3e97aab5c302\"\n\nlayout = dmc.AppShell(\n    [\n        dmc.AppShellHeader(\n            dmc.Group(\n                [\n                    dmc.Burger(id=\"burger\", size=\"sm\", hiddenFrom=\"sm\", opened=False),\n                    dmc.Image(src=logo, h=40, flex=0),\n                    dmc.Title(\"Demo App\", c=\"blue\"),\n                ],\n                h=\"100%\",\n                px=\"md\",\n            )\n        ),\n        dmc.AppShellNavbar(\n            id=\"navbar\",\n            children=[\n                \"Navbar\",\n                *[dmc.Skeleton(height=28, mt=\"sm\", animate=False) for _ in range(15)],\n            ],\n            p=\"md\",\n        ),\n        dmc.AppShellMain(\"Main\"),\n    ],\n    header={\"height\": 60},\n    padding=\"md\",\n    navbar={\n        \"width\": 300,\n        \"breakpoint\": \"sm\",\n        \"collapsed\": {\"mobile\": True},\n    },\n    id=\"appshell\",\n)\n\n\napp.layout = dmc.MantineProvider(layout)\n\n\n@callback(\n    Output(\"appshell\", \"navbar\"),\n    Input(\"burger\", \"opened\"),\n    State(\"appshell\", \"navbar\"),\n)\ndef navbar_is_open(opened, navbar):\n    navbar[\"collapsed\"] = {\"mobile\": not opened}\n    return navbar\n\n\nif __name__ == \"__main__\":\n    app.run(debug=True)\n```\n\n2 Responsive Width and Height\n   - [View Code on GitHub](https://github.com/snehilvj/dmc-docs/tree/main/help_center/appshell/responsive_sizes.py)  \n   - [Live Demo on Plotly Cloud](https://dmc-appshell-responsive-sizes.plotly.app/)  \n\n```python\n\"\"\"\nResponsive width and height\n\nApp shell with responsive navbar width and height\n\"\"\"\n\nimport dash_mantine_components as dmc\nfrom dash import Dash, Input, Output, State, callback\n\napp = Dash()\n\nlogo = \"https://github.com/user-attachments/assets/c1ff143b-4365-4fd1-880f-3e97aab5c302\"\n\nlayout = dmc.AppShell(\n    [\n        dmc.AppShellHeader(\n            dmc.Group(\n                [\n                    dmc.Burger(\n                        id=\"burger\",\n                        size=\"sm\",\n                        hiddenFrom=\"sm\",\n                        opened=False,\n                    ),\n                    dmc.Image(src=logo, h=40, flex=0),\n                    dmc.Title(\"Demo App\", c=\"blue\"),\n                ],\n                h=\"100%\",\n                px=\"md\",\n            )\n        ),\n        dmc.AppShellNavbar(\n            id=\"navbar\",\n            children=[\n                \"Navbar\",\n                *[dmc.Skeleton(height=28, mt=\"sm\", animate=False) for _ in range(15)],\n            ],\n            p=\"md\",\n        ),\n        dmc.AppShellMain(\"Main\"),\n    ],\n    header={\n        \"height\": {\"base\": 60, \"md\": 70, \"lg\": 80},\n    },\n    navbar={\n        \"width\": {\"base\": 200, \"md\": 300, \"lg\": 400},\n        \"breakpoint\": \"sm\",\n        \"collapsed\": {\"mobile\": True},\n    },\n    padding=\"md\",\n    id=\"appshell\",\n)\n\napp.layout = dmc.MantineProvider(layout)\n\n\n@callback(\n    Output(\"appshell\", \"navbar\"),\n    Input(\"burger\", \"opened\"),\n    State(\"appshell\", \"navbar\"),\n)\ndef toggle_navbar(opened, navbar):\n    navbar[\"collapsed\"] = {\"mobile\": not opened}\n    return navbar\n\n\nif __name__ == \"__main__\":\n    app.run(debug=True)\n```\n\n3 Mobile-Only Navbar\n   - Buttons in the header are displayed in the navbar on mobile.  \n   - [View Code on GitHub](https://github.com/snehilvj/dmc-docs/tree/main/help_center/appshell/mobile_navbar.py)  \n   - [Live Demo on Plotly Cloud](https://dmc-appshell-mobile-navbar.plotly.app/)  \n   \n```python\n\"\"\"\nMobile only navbar\n\nNavbar is only visible on mobile, links that are rendered in the header\non desktop are hidden on mobile in header and rendered in navbar instead.\n\"\"\"\n\nimport dash_mantine_components as dmc\nfrom dash import Dash, Input, Output, State, callback\n\napp = Dash()\n\nlogo = \"https://github.com/user-attachments/assets/c1ff143b-4365-4fd1-880f-3e97aab5c302\"\nbuttons = [\n    dmc.Button(\"Home\", variant=\"subtle\", color=\"gray\"),\n    dmc.Button(\"Blog\", variant=\"subtle\", color=\"gray\"),\n    dmc.Button(\"Contacts\", variant=\"subtle\", color=\"gray\"),\n    dmc.Button(\"Support\", variant=\"subtle\", color=\"gray\"),\n]\n\nlayout = dmc.AppShell(\n    [\n        dmc.AppShellHeader(\n            dmc.Group(\n                [\n                    dmc.Group(\n                        [\n                            dmc.Burger(\n                                id=\"burger\",\n                                size=\"sm\",\n                                hiddenFrom=\"sm\",\n                                opened=False,\n                            ),\n                            dmc.Image(src=logo, h=40, flex=0),\n                            dmc.Title(\"Demo App\", c=\"blue\"),\n                        ]\n                    ),\n                    dmc.Group(\n                        children=buttons,\n                        ml=\"xl\",\n                        gap=0,\n                        visibleFrom=\"sm\",\n                    ),\n                ],\n                justify=\"space-between\",\n                style={\"flex\": 1},\n                h=\"100%\",\n                px=\"md\",\n            ),\n        ),\n        dmc.AppShellNavbar(\n            id=\"navbar\",\n            children=buttons,\n            py=\"md\",\n            px=4,\n        ),\n        dmc.AppShellMain(\n            \"Navbar is only visible on mobile, links that are rendered in the header on desktop are hidden on mobile in header and rendered in navbar instead.\"\n        ),\n    ],\n    header={\"height\": 60},\n    navbar={\n        \"width\": 300,\n        \"breakpoint\": \"sm\",\n        \"collapsed\": {\"desktop\": True, \"mobile\": True},\n    },\n    padding=\"md\",\n    id=\"appshell\",\n)\n\napp.layout = dmc.MantineProvider(layout)\n\n\n@callback(\n    Output(\"appshell\", \"navbar\"),\n    Input(\"burger\", \"opened\"),\n    State(\"appshell\", \"navbar\"),\n)\ndef toggle_navbar(opened, navbar):\n    navbar[\"collapsed\"] = {\"mobile\": not opened, \"desktop\": True}\n    return navbar\n\n\nif __name__ == \"__main__\":\n    app.run(debug=True)\n```\n\n4 Collapsible Navbar on Desktop and Mobile\n   - [View Code on GitHub](https://github.com/snehilvj/dmc-docs/tree/main/help_center/appshell/responsive_sizes.py)  \n   - [Live Demo on Plotly Cloud](https://dmc-appshell-responsive-sizes.plotly.app/)  \n\n```python\n\"\"\"\nResponsive width and height\n\nApp shell with responsive navbar width and height\n\"\"\"\n\nimport dash_mantine_components as dmc\nfrom dash import Dash, Input, Output, State, callback\n\napp = Dash()\n\nlogo = \"https://github.com/user-attachments/assets/c1ff143b-4365-4fd1-880f-3e97aab5c302\"\n\nlayout = dmc.AppShell(\n    [\n        dmc.AppShellHeader(\n            dmc.Group(\n                [\n                    dmc.Burger(\n                        id=\"burger\",\n                        size=\"sm\",\n                        hiddenFrom=\"sm\",\n                        opened=False,\n                    ),\n                    dmc.Image(src=logo, h=40, flex=0),\n                    dmc.Title(\"Demo App\", c=\"blue\"),\n                ],\n                h=\"100%\",\n                px=\"md\",\n            )\n        ),\n        dmc.AppShellNavbar(\n            id=\"navbar\",\n            children=[\n                \"Navbar\",\n                *[dmc.Skeleton(height=28, mt=\"sm\", animate=False) for _ in range(15)],\n            ],\n            p=\"md\",\n        ),\n        dmc.AppShellMain(\"Main\"),\n    ],\n    header={\n        \"height\": {\"base\": 60, \"md\": 70, \"lg\": 80},\n    },\n    navbar={\n        \"width\": {\"base\": 200, \"md\": 300, \"lg\": 400},\n        \"breakpoint\": \"sm\",\n        \"collapsed\": {\"mobile\": True},\n    },\n    padding=\"md\",\n    id=\"appshell\",\n)\n\napp.layout = dmc.MantineProvider(layout)\n\n\n@callback(\n    Output(\"appshell\", \"navbar\"),\n    Input(\"burger\", \"opened\"),\n    State(\"appshell\", \"navbar\"),\n)\ndef toggle_navbar(opened, navbar):\n    navbar[\"collapsed\"] = {\"mobile\": not opened}\n    return navbar\n\n\nif __name__ == \"__main__\":\n    app.run(debug=True)\n```\n\n5 Full AppShell Layout\n   - Includes all elements: navbar, header, aside, and footer.  \n   - [View Code on GitHub](https://github.com/snehilvj/dmc-docs/tree/main/help_center/appshell/full_layout.py)  \n   - [Live Demo on Plotly Cloud](https://dmc-appshell-full-layout.plotly.app/) \n\n```python\n\"\"\"\nAppShell with all elements\n\nNavbar, header, aside and footer used together\n\"\"\"\n\nimport dash_mantine_components as dmc\nfrom dash import Dash, Input, Output, State, callback\n\napp = Dash()\n\nlogo = \"https://github.com/user-attachments/assets/c1ff143b-4365-4fd1-880f-3e97aab5c302\"\n\nlayout = dmc.AppShell(\n    [\n        dmc.AppShellHeader(\n            dmc.Group(\n                [\n                    dmc.Burger(\n                        id=\"burger\",\n                        size=\"sm\",\n                        hiddenFrom=\"sm\",\n                        opened=False,\n                    ),\n                    dmc.Image(src=logo, h=40, flex=0),\n                    dmc.Title(\"Demo App\", c=\"blue\"),\n                ],\n                h=\"100%\",\n                px=\"md\",\n            )\n        ),\n        dmc.AppShellNavbar(\n            id=\"navbar\",\n            children=[\n                \"Navbar\",\n                *[dmc.Skeleton(height=28, mt=\"sm\", animate=False) for _ in range(15)],\n            ],\n            p=\"md\",\n        ),\n        dmc.AppShellMain(\n            \"Aside is hidden on md breakpoint and cannot be opened when it is collapsed\"\n        ),\n        dmc.AppShellAside(\"Aside\", p=\"md\"),\n        dmc.AppShellFooter(\"Footer\", p=\"md\"),\n    ],\n    header={\"height\": 60},\n    footer={\"height\": 60},\n    navbar={\n        \"width\": 300,\n        \"breakpoint\": \"sm\",\n        \"collapsed\": {\"mobile\": True},\n    },\n    aside={\n        \"width\": 300,\n        \"breakpoint\": \"md\",\n        \"collapsed\": {\"desktop\": False, \"mobile\": True},\n    },\n    padding=\"md\",\n    id=\"appshell\",\n)\n\napp.layout = dmc.MantineProvider(layout)\n\n\n@callback(\n    Output(\"appshell\", \"navbar\"),\n    Input(\"burger\", \"opened\"),\n    State(\"appshell\", \"navbar\"),\n)\ndef toggle_navbar(opened, navbar):\n    navbar[\"collapsed\"] = {\"mobile\": not opened}\n    return navbar\n\n\nif __name__ == \"__main__\":\n    app.run(debug=True)\n```\n\n6 Scrollable Navbar with 60 Links\n   - [View Code on GitHub](https://github.com/snehilvj/dmc-docs/tree/main/help_center/appshell/navbar_scroll.py)  \n   - [Live Demo on Plotly CLoud](https://dmc-appshell-navbar-scroll.plotly.app/)   \n\n```python\n\"\"\"\nScrollable Navbar with 60 links\n\"\"\"\n\nimport dash_mantine_components as dmc\nfrom dash import Dash, Input, Output, State, callback\n\n\napp = Dash()\n\nlogo = \"https://github.com/user-attachments/assets/c1ff143b-4365-4fd1-880f-3e97aab5c302\"\n\nlayout = dmc.AppShell(\n    [\n        dmc.AppShellHeader(\n            dmc.Group(\n                [\n                    dmc.Burger(id=\"burger\", size=\"sm\", hiddenFrom=\"sm\", opened=False),\n                    dmc.Image(src=logo, h=40, flex=0),\n                    dmc.Title(\"Demo App\", c=\"blue\"),\n                ],\n                h=\"100%\",\n                px=\"md\",\n            )\n        ),\n        dmc.AppShellNavbar(\n            id=\"navbar\",\n            children=dmc.ScrollArea(\n                [\n                    \"60 links in a scrollable section\",\n                    *[\n                        dmc.Skeleton(height=28, mt=\"sm\", animate=False)\n                        for _ in range(60)\n                    ],\n                ]\n            ),\n            p=\"md\",\n        ),\n        dmc.AppShellMain(\"Main\"),\n    ],\n    header={\"height\": 60},\n    padding=\"md\",\n    navbar={\n        \"width\": 300,\n        \"breakpoint\": \"sm\",\n        \"collapsed\": {\"mobile\": True},\n    },\n    id=\"appshell\",\n)\n\n\napp.layout = dmc.MantineProvider(layout)\n\n\n@callback(\n    Output(\"appshell\", \"navbar\"),\n    Input(\"burger\", \"opened\"),\n    State(\"appshell\", \"navbar\"),\n)\ndef navbar_is_open(opened, navbar):\n    navbar[\"collapsed\"] = {\"mobile\": not opened}\n    return navbar\n\n\nif __name__ == \"__main__\":\n    app.run(debug=True)\n```\n\n7 Alternate AppShell Layout\n   - Navbar and aside are rendered on top of the header and footer.  \n   - [View Code on GitHub](https://github.com/snehilvj/dmc-docs/tree/main/help_center/appshell/alt_layout.py)  \n   - [Live Demo on Plotly Cloud](https://dmc-appshell-alt-layout.plotly.app/)    \n\n```python\n\"\"\"\nAlt Layout\nNavbar and Aside are rendered on top on Header and Footer\n\n\"\"\"\n\nimport dash_mantine_components as dmc\nfrom dash import Dash, Input, Output, State, callback\n\napp = Dash()\n\nlogo = \"https://github.com/user-attachments/assets/c1ff143b-4365-4fd1-880f-3e97aab5c302\"\n\nlayout = dmc.AppShell(\n    [\n        dmc.AppShellHeader(\n            dmc.Group(\n                [\n                    dmc.Burger(id=\"burger\", size=\"sm\", hiddenFrom=\"sm\", opened=False),\n                    dmc.Image(src=logo, h=40, flex=0),\n                    dmc.Title(\"Demo App\", c=\"blue\"),\n                ],\n                h=\"100%\",\n                px=\"md\",\n            )\n        ),\n        dmc.AppShellNavbar(\n            p=\"md\",\n            children=[\n                dmc.Group(\n                    [\n                        dmc.Burger(\n                            id=\"navbar-burger\", size=\"sm\", hiddenFrom=\"sm\", opened=False\n                        ),\n                        dmc.Text(\"Navbar\"),\n                    ]\n                ),\n                *[dmc.Skeleton(height=28, mt=\"sm\", animate=False) for _ in range(15)],\n            ],\n        ),\n        dmc.AppShellMain(\n            \"Alt layout – Navbar and Aside are rendered on top of Header and Footer\"\n        ),\n        dmc.AppShellAside(\"Aside\", p=\"md\"),\n        dmc.AppShellFooter(\"Footer\", p=\"md\"),\n    ],\n    layout=\"alt\",\n    header={\"height\": 60},\n    footer={\"height\": 60},\n    navbar={\n        \"width\": 300,\n        \"breakpoint\": \"sm\",\n        \"collapsed\": {\"mobile\": True},\n    },\n    aside={\n        \"width\": 300,\n        \"breakpoint\": \"md\",\n        \"collapsed\": {\"desktop\": False, \"mobile\": True},\n    },\n    padding=\"md\",\n    id=\"appshell\",\n)\n\napp.layout = dmc.MantineProvider(layout)\n\n\n@callback(\n    Output(\"appshell\", \"navbar\"),\n    Input(\"burger\", \"opened\"),\n    State(\"appshell\", \"navbar\"),\n)\ndef toggle_navbar(opened, navbar):\n    navbar[\"collapsed\"] = {\"mobile\": not opened}\n    return navbar\n\n\nif __name__ == \"__main__\":\n    app.run(debug=True)\n```\n\n8 AppShell with Theme Switch Component\n   - [View Code on GitHub](https://github.com/snehilvj/dmc-docs/tree/main/help_center/appshell/appshell_with_theme_switch.py)  \n   - [Live Demo on Plotly Cloud](https://dmc-appshell-with-theme-switch.plotly.app/)  \n\n```python\n\"\"\"\nBasic Appshell with header and  navbar that collapses on mobile.  Also includes a theme switch.\n\"\"\"\n\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\nfrom dash import Dash, Input, Output, State, callback, clientside_callback\n\napp = Dash()\n\nlogo = \"https://github.com/user-attachments/assets/c1ff143b-4365-4fd1-880f-3e97aab5c302\"\n\ntheme_toggle = dmc.Switch(\n    offLabel=DashIconify(\n        icon=\"radix-icons:sun\", width=15, color= \"var(--mantine-color-yellow-8)\"\n    ),\n    onLabel=DashIconify(\n        icon=\"radix-icons:moon\",\n        width=15,\n        color= \"var(--mantine-color-yellow-6)\",\n    ),\n    id=\"color-scheme-toggle\",\n    persistence=True,\n    color=\"grey\",\n)\n\nlayout = dmc.AppShell(\n    [\n        dmc.AppShellHeader(\n            dmc.Group(\n                [\n                    dmc.Group(\n                        [\n                            dmc.Burger(\n                                id=\"burger\",\n                                size=\"sm\",\n                                hiddenFrom=\"sm\",\n                                opened=False,\n                            ),\n                            dmc.Image(src=logo, h=40, flex=0),\n                            dmc.Title(\"Demo App\", c=\"blue\"),\n                        ]\n                    ),\n                    theme_toggle,\n                ],\n                justify=\"space-between\",\n                style={\"flex\": 1},\n                h=\"100%\",\n                px=\"md\",\n            ),\n        ),\n        dmc.AppShellNavbar(\n            id=\"navbar\",\n            children=[\n                \"Navbar\",\n                *[dmc.Skeleton(height=28, mt=\"sm\", animate=False) for _ in range(15)],\n            ],\n            p=\"md\",\n        ),\n        dmc.AppShellMain(\"Main\"),\n    ],\n    header={\"height\": 60},\n    padding=\"md\",\n    navbar={\n        \"width\": 300,\n        \"breakpoint\": \"sm\",\n        \"collapsed\": {\"mobile\": True},\n    },\n    id=\"appshell\",\n)\n\n\napp.layout = dmc.MantineProvider(layout)\n\n\n@callback(\n    Output(\"appshell\", \"navbar\"),\n    Input(\"burger\", \"opened\"),\n    State(\"appshell\", \"navbar\"),\n)\ndef navbar_is_open(opened, navbar):\n    navbar[\"collapsed\"] = {\"mobile\": not opened}\n    return navbar\n\n\nclientside_callback(\n    \"\"\" \n    (switchOn) => {\n       document.documentElement.setAttribute('data-mantine-color-scheme', switchOn ? 'dark' : 'light');  \n       return window.dash_clientside.no_update\n    }\n    \"\"\",\n    Output(\"color-scheme-toggle\", \"id\"),\n    Input(\"color-scheme-toggle\", \"checked\"),\n)\n\nif __name__ == \"__main__\":\n    app.run(debug=True)\n```\n\n### Basic usage\n\nAppShell is a layout component. It can be used to implement a common Header - Navbar - Footer - Aside layout pattern.\nAll AppShell components have `position: fixed` style - they are not scrolled with the page.\n\nThe documentation app that you are viewing uses AppShell with Header, Aside, and Navbar.\n\nThis is the code for the first example above for the basic app shell with header and navbar.  The navbar collapses on mobile.\n\n```python\n\nimport dash_mantine_components as dmc\nfrom dash import Dash, Input, Output, State, callback\n\napp = Dash()\n\nlogo = \"https://github.com/user-attachments/assets/c1ff143b-4365-4fd1-880f-3e97aab5c302\"\n\nlayout = dmc.AppShell(\n    [\n        dmc.AppShellHeader(\n            dmc.Group(\n                [\n                    dmc.Burger(id=\"burger\", size=\"sm\", hiddenFrom=\"sm\", opened=False),\n                    dmc.Image(src=logo, h=40),\n                    dmc.Title(\"Demo App\", c=\"blue\"),\n                ],\n                h=\"100%\",\n                px=\"md\",\n            )\n        ),\n        dmc.AppShellNavbar(\n            id=\"navbar\",\n            children=[\n                \"Navbar\",\n                *[dmc.Skeleton(height=28, mt=\"sm\", animate=False) for _ in range(15)],\n            ],\n            p=\"md\",\n        ),\n        dmc.AppShellMain(\"Main\"),\n    ],\n    header={\"height\": 60},\n    padding=\"md\",\n    navbar={\n        \"width\": 300,\n        \"breakpoint\": \"sm\",\n        \"collapsed\": {\"mobile\": True},\n    },\n    id=\"appshell\",\n)\n\n\napp.layout = dmc.MantineProvider(layout)\n\n\n@callback(\n    Output(\"appshell\", \"navbar\"),\n    Input(\"burger\", \"opened\"),\n    State(\"appshell\", \"navbar\"),\n)\ndef navbar_is_open(opened, navbar):\n    navbar[\"collapsed\"] = {\"mobile\": not opened}\n    return navbar\n\n\nif __name__ == \"__main__\":\n    app.run(debug=True)\n\n```\n\n### AppShell components\n\n* `AppShell` - root component, it is required to wrap all other components, used to configure layout properties\n* `AppShellHeader` - section rendered at the top of the page\n* `AppShellNavbar` - section rendered on the left side of the page\n* `AppShellAside` - section rendered on the right side of the page\n* `AppShellFooter` - section rendered at the bottom of the page\n* `AppShellMain` - main section rendered at the center of the page, has static position, all other sections are offset by its padding\n* `AppShellSection` - utility component that can be used to render group of content inside `AppShellNavbar` and `AppShellAside`\n\n### AppShell Configuration\n`AppShell` component accepts, `header`, `footer`, `navbar` and `aside` props to configure corresponding sections. It is \nrequired to set these props if you want to use corresponding components. For example, if you want to use `AppShellHeader`\ncomponent, you need to set `header` prop on the `AppShell` component.\n\n### header and footer properties\n\n`header` and `footer` configuration dictionaries are the same and have the following properties:\n\n- `height`: Height of the section: number, string or dict  with breakpoints as keys and height as value\n- `collapsed`: boolean; If section is collapsed it is hidden from the viewport and is not offset in `AppShellMain`\n- `offset`: boolean; Determines whether the section should be offset by the `AppShellMain`. For example, it is useful if you want to hide header based on the scroll position.\n\n### navbar and aside properties\n\n`navbar` and `aside` configuration dictionaries are the same as well and have the following properties:\n\n- `width`: Width of the section: number, string or dict with breakpoints as keys and width as value \n- `breakpoint`: Breakpoint at which section should switch to mobile mode. In mobile mode the section always has \n100% width and its collapsed state is controlled by the `collapsed.mobile` instead of `collapsed.desktop` \n- `collapsed`: Determines whether the section should be collapsed.  Example:  {\"desktop\": False; \"mobile\": True };\n\n### layout prop\n`layout` prop controls how `AppShellHeader` / `AppShellFooter` and `AppShellNavbar` / `AppShellAside` are positioned \nrelative to each other. It accepts `alt` and `default` values:\n\n- `alt` – `AppShellNavbar`/`AppShellAside` height is equal to viewport height, `AppShellHeader`/`AppShellFooter` width \nis equal to viewport width less the `AppShellNavbar` and `AppShellAside` width.  See example #7 above.\n\n- `default` – `AppShellNavbar`/`AppShellAside` height is equal to viewport height - `AppShellHeader`/ `AppShellFooter` \nheight, `AppShellHeader`/`AppShellFooter` width is equal to viewport width \n\n### height prop\n`height` property in `header` and `footer` configuration dicts works the following way:\n\n- If you pass a number, the value will be converted to rem and used as height at all viewport sizes.\n- To change height based on viewport width, use dict with breakpoints as keys and height as values. It works the same way as `style` props.\n\nExamples:\n```python\n# Height is a number, it will be converted to rem  and used as height at all viewport sizes\ndmc.AppShell(\n    children=[\n        dmc.AppShellHeader(\"Header\")\n        # ...\n     ],\n    header={\"height\": 48}    \n)\n```\n\n```python\n\n# Height is an dict with breakpoints:\n# - height is 48 when viewport width is < theme.breakpoints.sm\n# - height is 60 when viewport width is >= theme.breakpoints.sm and < theme.breakpoints.lg\n# - height is 76 when viewport width is >= theme.breakpoints.lg\ndmc.AppShell(\n    children=[\n       dmc.AppShellHeader(\"Header\")\n    ],\n    header={\"height\": {\"base\": 48, \"sm\": 60, \"lg\": 76}}    \n)\n```\n\n### Width configuration\n`width` property in `navbar` and `aside`  configuration dictionaries works the following way:\n\n- If you pass a number, the value will be converted to rem and used as width when the viewport is larger than breakpoint.\n- To change `width` based on viewport width, use dict with breakpoints as keys and width as values. It works the same way as `style` props. Note that width is always 100% when the viewport is smaller than breakpoint.\n\nExamples\n\n```python\n# Width is a number, it will be converted to rem and used as width when viewport is larger than theme.breakpoints.sm\ndmc.AppShell(\n    children=[\n        dmc.AppShellNavbar(\"Navbar\")\n        # ...\n     ],\n    navbar={\"width\": 48, \"breakpoint\": \"sm\"}    \n)\n```\n\n```python\n\n# Width is an object with breakpoints:\n# - width is 100% when viewport width is < theme.breakpoints.sm\n# - width is 200 when viewport width is >= theme.breakpoints.sm and < theme.breakpoints.lg\n# - width is 300 when viewport width is >= theme.breakpoints.lg\ndmc.AppShell(\n    children=[\n        dmc.AppShellNavbar(\"Navbar\")\n        # ...\n     ],\n    navbar={\"width\": {\"sm\": 200, \"lg\": 300 }, \"breakpoint\": 'sm' } \n)\n```\n\n### padding prop\n`padding` prop controls the padding of the `AppShellMain` component. It is important to use it instead of setting padding\non the `AppShellMain` directly because padding of the `AppShellMain` is also used to offset `AppShellHeader`, `AppShellNavbar`, `AppShellAside` and `AppShellFooter` components.\n\n`padding` prop works the same way as `style` props and accepts numbers, strings and dicts with breakpoints as keys and padding as values. You can reference theme.spacing values or use any valid CSS values.\n\n```python\n# Padding is always theme.spacing.md\ndmc.AppShell(\n   # content\n   padding=\"md\"\n)\n```\n\n\n```python\n\n# Padding is:\n# - 10 when viewport width is < theme.breakpoints.sm\n# - 15 when viewport width is >= theme.breakpoints.sm and < theme.breakpoints.lg\n# - theme.spacing.xl when viewport width is >= theme.breakpoints.lg\ndmc.AppShell(\n   # content\n   padding={\"base\": 10, \"sm\": 15, \"lg\": \"xl\" }\n)\n```\n### Collapsed navbar/aside configuration\n`navbar` and `aside` props have `collapsed` property. The property accepts an dict { mobile: boolean; desktop: boolean } which\nallows to configure collapsed state depending on the viewport width.\n\nSee example #4 above: Collapsible Navbar on Desktop and Mobile\n\n### withBorder prop\n`withBorder` prop is available on `AppShell` and associated sections: `AppShellHeader`, `AppShellNavbar`, `AppShellAside`\nand `AppShellFooter`. By default, `withBorder` prop is True – all components have a border on the side that is adjacent \nto the `AppShellMain` component. For example, `AppShellHeader` is located at the top of the page – it has a border on the\nbottom side, `AppShellNavbar` is located on the left side of the page – it has a border on the right side.\n\nTo remove the border from all components, set `withBorder=False` on the `AppShell`:\n\n```python\ndmc.AppShell(withBorder=False)\n```\n\nTo remove the border from a specific component, set `withBorder=False` on that component:\n\n```python\ndmc.AppShell(\n   children=[\n      dmc.AppShellHeader(withBorder=False)\n   ]\n)\n```\n\n\n\n### zIndex prop\n\n`zIndex` prop is available on AppShell and associated sections: `AppShellHeader`, `AppShellNavbar`, `AppShellAside` and `AppShellFooter`.\n\nBy default, all sections z-index is 200.\n\nTo change z-index of all sections, set `zIndex` prop on the AppShell:\n\n```python\nimport dash_mantine_components as dmc\n\ndmc.AppShell(\n    zIndex=100,\n    children=[\n        # content\n    ]\n)\n```\n\nTo change z-index of individual sections, set `zIndex` prop on each of them:\n\n```python\nimport dash_mantine_components as dmc\n\ndmc.AppShell(\n    children=[\n        dmc.AppShellHeader(\"Header\", zIndex=2000),\n        dmc.AppShellNavbar(\"Navbar\", zIndex=2000),\n    ]\n)\n```\n\n### Control transitions\nSet `transitionDuration` and `transitionTimingFunction` props on the `AppShell` to control transitions:\n\n```python\ndmc.AppShell(\n   transitionDuration=500,\n   transitionTimingFunction=\"ease\"   ,\n)\n```\n\n### disabled prop\nSet `disabled` prop on the `AppShell` to prevent all sections except `AppShellMain` from rendering. It is useful when \nyou want to hide the shell on some pages of your application.\n\n```python\ndmc.AppShell(disabled=True)\n```\n\n\n### Usage in docs\n\n```python\nimport dash_mantine_components as dmc\n\ndmc.AppShell(\n    [\n        dmc.AppShellHeader(\"Header\", px=25),\n        dmc.AppShellNavbar(\"Navbar\"),\n        dmc.AppShellAside(\"Aside\", withBorder=False),\n        dmc.AppShellMain(children=[...]),\n    ],\n    header={\"height\": 70},\n    padding=\"xl\",    \n    navbar={\n        \"width\": 300,\n        \"breakpoint\": \"sm\",\n        \"collapsed\": {\"mobile\": True},\n    },\n    aside={\n        \"width\": 300,\n        \"breakpoint\": \"xl\",\n        \"collapsed\": {\"desktop\": False, \"mobile\": True},\n    },\n)\n```\n\n\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n#### AppShell Selectors\n\n| Selector | Static selector            | Description                       |\n|----------|-----------------------------|-----------------------------------|\n| root     | .mantine-AppShell-root      | Root element (AppShell component) |\n| navbar   | .mantine-AppShell-navbar    | AppShell.Navbar root element      |\n| header   | .mantine-AppShell-header    | AppShell.Header root element      |\n| main     | .mantine-AppShell-main      | AppShell.Main root element        |\n| aside    | .mantine-AppShell-aside     | AppShell.Aside root element       |\n| footer   | .mantine-AppShell-footer    | AppShell.Footer root element      |\n| section  | .mantine-AppShell-section   | AppShell.Section root element     |\n\n#### AppShell CSS Variables\n\n| Selector | Variable                                 | Description                                   |\n|----------|------------------------------------------|-----------------------------------------------|\n| root     | --app-shell-transition-duration          | Controls transition duration of all children  |\n|          | --app-shell-transition-timing-function   | Controls transition timing function of all children |\n\n#### AppShell Data Attributes\n\n| Selector         | Attribute         | Condition                    | Value                                |\n|------------------|-------------------|------------------------------|--------------------------------------|\n| root             | data-resizing     | User is resizing the window  | –                                    |\n| root             | data-layout       | –                            | Value of the `layout` prop           |\n| root             | data-disabled     | `disabled` prop is set       | –                                    |\n| navbar, header, aside, footer | data-with-border | `withBorder` prop is set either on the AppShell or on the associated component | – |\n| section          | data-grow         | `grow` prop is set on the AppShell.Section | – |\n\n\n### Keyword Arguments\n### AppShell\n- children (a list of or a singular dash component, string or number; required):\n    Content.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- aside (dict; optional):\n    AppShell.Aside configuration, controls width, breakpoints and\n    collapsed state. Required if you use AppShell.Aside component.\n\n    `aside` is a dict with keys:\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- disabled (boolean; optional):\n    If set, Navbar, Aside, Header and Footer components be hidden.\n\n- footer (dict; optional):\n    AppShell.Footer configuration, controls height, offset and\n    collapsed state. Required if you use AppShell.Footer component.\n\n    `footer` is a dict with keys:\n\n- header (dict; optional):\n    AppShell.Header configuration, controls height, offset and\n    collapsed state. Required if you use AppShell.Header component.\n\n    `header` is a dict with keys:\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- layout (a value equal to: 'default', 'alt'; optional):\n    Determines how Navbar/Aside are arranged relative to\n    Header/Footer, `default` by default.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- mode (a value equal to: 'fixed', 'static'; optional):\n    Determines positioning mode of all sections default 'fixed'.\n\n- navbar (dict; optional):\n    AppShell.Navbar configuration, controls width, breakpoints and\n    collapsed state. Required if you use AppShell.Navbar component.\n\n    `navbar` is a dict with keys:\n\n- offsetScrollbars (boolean; optional):\n    Determines whether Header and Footer components should include\n    styles to offset scrollbars. Based on `react-remove-scroll`.\n    `True` by default.\n\n- padding (number; optional):\n    Controls padding of the main section, `0` by default. !important!:\n    use `padding` prop instead of `p`.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- transitionDuration (number; optional):\n    Duration of all transitions in ms, `200` by default.\n\n- transitionTimingFunction (optional):\n    Timing function of all transitions, `ease` by default.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withBorder (boolean; optional):\n    Determines whether associated components should have a border,\n    `True` by default.\n\n- zIndex (string | number; optional):\n    `z-index` of all associated elements, `200` by default.\n#### Navbar\n\n- children (a list of or a singular dash component, string or number; required):\n    Content.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withBorder (boolean; optional):\n    Determines whether component should have a border, overrides\n    `withBorder` prop on `AppShell` component.\n\n- zIndex (string | number; optional):\n    Component `z-index`, by default inherited from the `AppShell`.\n#### Header\n\n- children (a list of or a singular dash component, string or number; required):\n    Content.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withBorder (boolean; optional):\n    Determines whether component should have a border, overrides\n    `withBorder` prop on `AppShell` component.\n\n- zIndex (string | number; optional):\n    Component `z-index`, by default inherited from the `AppShell`.\n#### Aside\n\n- children (a list of or a singular dash component, string or number; required):\n    Content.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withBorder (boolean; optional):\n    Determines whether component should have a border, overrides\n    `withBorder` prop on `AppShell` component.\n\n- zIndex (string | number; optional):\n    Component `z-index`, by default inherited from the `AppShell`.\n#### Footer\n\n- children (a list of or a singular dash component, string or number; required):\n    Content.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withBorder (boolean; optional):\n    Determines whether component should have a border, overrides\n    `withBorder` prop on `AppShell` component.\n\n- zIndex (string | number; optional):\n    Component `z-index`, by default inherited from the `AppShell`.\n#### Section\n\n- children (a list of or a singular dash component, string or number; required):\n    Content.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- grow (boolean; optional):\n    Determines whether the section should take all available space,\n    `False` by default.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`."
  },
  {
    "name": "AspectRatio",
    "description": "Use the Aspect component to maintain responsive consistent width/height ratio.",
    "endpoint": "/components/aspectratio",
    "package": "dash_mantine_components",
    "category": "Layout",
    "content": "\n\n## AspectRatio  \nUse the Aspect component to maintain responsive consistent width/height ratio.  \nCategory: Layout  \n\n### Image \n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.AspectRatio(\n    dmc.Image(\n        src=\"https://www.nasa.gov/wp-content/uploads/2022/07/web_first_images_release.png\",\n        alt=\"Carina Nebula\",\n    ),\n    ratio=4/3,\n)\n```\n### Map embed\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html\n\ncomponent = dmc.AspectRatio(\n    html.Iframe(\n        src=\"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3025.3063874233135!2d-74.04668908358428!3d40.68924937933441!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25090129c363d%3A0x40c6a5770d25022b!2sStatue%20of%20Liberty%20National%20Monument!5e0!3m2!1sen!2sru!4v1644262070010!5m2!1sen!2sru\",\n        title=\"Google map\",\n    ),\n    ratio=16 / 9,\n)\n```\n### Video embed\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html\n\ncomponent = dmc.AspectRatio(\n    html.Iframe(\n        src=\"https://www.youtube.com/embed/KsTKREWoVC4\",\n        title=\"YouTube video player\",\n        allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen\",\n    ),\n    ratio=16 / 9,\n)\n```\n### Inside flex container\nBy default, `AspectRatio` does not have fixed width and height, it will take as much space as possible in a regular\ncontainer. To make it work inside flex container, you need to set `width` or `flex` property.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html\n\ncomponent = html.Div(\n    dmc.AspectRatio(\n        ratio=1,\n        style={\"flex\": \"0 0 100px\"},\n        children=[\n            dmc.Image(\n                src=\"https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-6.png\",\n                alt=\"Avatar\",\n            )\n        ],\n    ),\n    style={\"display\": \"flex\"},\n)\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n#### AspectRatio Selectors\n\n| Selector | Static selector                 | Description   |\n|----------|----------------------------------|---------------|\n| root     | .mantine-AspectRatio-root        | Root element  |\n\n---\n\n#### AspectRatio CSS Variables\n\n| Selector | Variable      | Description     |\n|----------|---------------|-----------------|\n| root     | --ar-ratio    | Aspect ratio    |\n\n\n\n\n### Keyword Arguments\n#### AspectRatio\n\n- children (a list of or a singular dash component, string or number; optional)\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- ratio (number; optional):\n    Aspect ratio, e.g. `16 / 9`, `4 / 3`, `1920 / 1080`, `1` by\n    default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`."
  },
  {
    "name": "Center",
    "description": "Use Center component to center content vertically and horizontally.",
    "endpoint": "/components/center",
    "package": "dash_mantine_components",
    "category": "Layout",
    "content": "\n\n## Center  \nUse Center component to center content vertically and horizontally.  \nCategory: Layout  \n\n### Simple Example\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Center(\n    style={\"height\": 200, \"width\": \"100%\"},\n    children=[\n        dmc.Badge(\"Free\", style={\"marginRight\": 5}),\n        dmc.Anchor(\"Click now!\", href=\"https://mantine.dev/\"),\n    ],\n)\n```\n### Inline\n\nTo use `Center` with inline elements set `inline` prop. For example, you can center link icon and label:\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ncomponent = dmc.Box(\n    dmc.Anchor(\n        href=\"https://mantine.dev\",\n        target=\"_blank\",\n        children=dmc.Center(\n            [\n                DashIconify(\n                    icon=\"tabler:arrow-left\",  # Use the Tabler Arrow Left icon\n                    width=12,\n                    height=12,\n                ),\n                dmc.Box(\"Back to Mantine website\", ml=5),\n            ],\n            inline=True,\n        ),\n    )\n)\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n| Name | Static selector    | Description  |\n|------|--------------------|--------------|\n| root | .mantine-Card-root | Root element |\n\n\n### Keyword Arguments\n#### Center\n\n- children (a list of or a singular dash component, string or number; optional)\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- inline (boolean; optional):\n    Determines whether `inline-flex` should be used instead of `flex`,\n    `False` by default.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`."
  },
  {
    "name": "Container",
    "description": "Container is the most basic layout element, it centers content horizontally and adds horizontal padding from theme.",
    "endpoint": "/components/container",
    "package": "dash_mantine_components",
    "category": "Layout",
    "content": "\n\n## Container  \nContainer is the most basic layout element, it centers content horizontally and adds horizontal padding from theme.  \nCategory: Layout  \n\n### Simple Example\n\nContainer is the most basic layout element, it centers content horizontally and adds horizontal padding from Mantine's \ntheme.\n\nComponent accepts these props:\n\n  * `size` – controls default max width \n  * `fluid` – overwrites size prop and sets max width to 100%\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html\n\nstyle = {\n    \"height\": 100,\n    \"border\": \"1px solid var(--mantine-color-blue-outline)\",\n    \"marginTop\": 20,\n    \"marginBottom\": 20,\n}\n\ncomponent = html.Div(\n    children=[\n        dmc.Container(\"Default container\", style=style),\n        dmc.Container(\n            \"xs container with xs horizontal padding\", size=\"xs\", px=\"xs\", style=style\n        ),\n        dmc.Container(\n            \"200px container with 0px horizontal padding\", size=200, px=0, style=style\n        ),\n    ]\n)\n```\n### Fluid\nSet `fluid` prop to make container fluid, it will take 100% of available width, it is the same as setting `size=\"100%\"`.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html\n\n\ncomponent = dmc.Container(\n    \"Fluid container has 100% max-width\",\n    fluid=True,\n    h=50,\n    bg=\"var(--mantine-color-blue-light)\"\n)\n```\n### Grid strategy\n\nStarting from 2.2.0, `Container` supports `strategy=\"grid\"` prop which enables more features.\n\nDifferences from the default `strategy=\"block\"`:\n\n- Uses `display: grid` instead of `display: block`\n- Does not include default inline padding\n- Does not set `max-width` on the root element (uses grid template columns instead)\n\nFeatures supported by `strategy=\"grid\"`:\n\n- Everything that is supported by `strategy=\"block\"`\n- Children with `data-breakout` attribute take the entire width of the container's parent element\n- Children with `data-container` inside `data-breakout` have the same width as the main grid column\n\nExample of using breakout feature:\n\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html\n\n\ncomponent = dmc.Container(\n    [\n        dmc.Box(\"Main Content\", bg=\"var(--mantine-color-indigo-light)\", h=50),\n        html.Div(\n            [\n                \"Breakout\",\n                html.Div(\n                    \"Container inside breakout\",\n                    style={\n                        \"backgroundColor\": \"var(--mantine-color-indigo-filled)\",\n                        \"color\": \"white\",\n                        \"height\": 50,\n                    },\n                    **{\"data-container\": \"\"}\n                ),\n            ],\n            style={\n                \"backgroundColor\": \"var(--mantine-color-indigo-light)\",\n                \"marginTop\": 16,\n            },\n            **{\"data-breakout\": \"\"}\n        ),\n    ],\n    size=500,\n    strategy=\"grid\",\n)\n```\n**Note — Adding custom HTML attributes to Dash components:**\n\n* For `dash-html-components`, you can add custom attributes using Python’s `**` unpacking syntax:\n\n  ```python\n  html.Div(**{\"data-breakout\": \"\"})\n  ```\n\n* For DMC components that support the [Styles API](/styles-api), use the `attributes` prop to pass attributes to elements of the component:\n\n  ```python\n  dmc.Paper(attributes={\"root\": \"data-breakout\"})\n  ```\n\n\n\n\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n#### Container Selectors\n\n| Selector | Static selector            | Description   |\n|----------|-----------------------------|---------------|\n| root     | .mantine-Container-root     | Root element  |\n\n\n#### Container CSS Variables\n\n| Selector | Variable          | Description               |\n|----------|-------------------|---------------------------|\n| root     | --container-size  | Controls container max-width |\n\n\n\n\n### Keyword Arguments\n#### Container\n\n- children (a list of or a singular dash component, string or number; optional)\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- fluid (boolean; optional):\n    Determines whether the container should take 100% of its parent\n    width. If set, `size` prop is ignored. `False` by default.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- size (number; optional):\n    Sets `max-width` of the container, value is not responsive – it is\n    the same for all screen sizes. Numbers are converted to rem.\n    Ignored when `fluid` prop is set. `'md'` by default.\n\n- strategy (a value equal to: 'block', 'grid'; optional):\n    Centering strategy. Default value: 'block'.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`."
  },
  {
    "name": "Flex",
    "description": "Use the Flex component to compose elements in a flex container.",
    "endpoint": "/components/flex",
    "package": "dash_mantine_components",
    "category": "Layout",
    "content": "\n\n## Flex  \nUse the Flex component to compose elements in a flex container.  \nCategory: Layout  \n\n### Introduction\n\n### Supported Props\n\n| Prop        | CSS Property     | Theme Key       |\n|-------------|------------------|-----------------|\n| gap         | gap              | theme.spacing   |\n| rowGap      | rowGap           | theme.spacing   |\n| columnGap   | columnGap        | theme.spacing   |\n| align       | alignItems       | –               |\n| justify     | justifyContent   | –               |\n| wrap        | flexWrap         | –               |\n| direction   | flexDirection    | –               |\n\n\n\n### Responsive Props\n\nFlex component props can have responsive values the same way as other style props:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Flex(\n    [\n        dmc.Button(\"Button 1\"),\n        dmc.Button(\"Button 2\"),\n        dmc.Button(\"Button 3\"),\n    ],\n    direction={\"base\": \"column\", \"sm\": \"row\"},\n    gap={\"base\": \"sm\", \"sm\": \"lg\"},\n    justify={\"sm\": \"center\"},\n)\n```\n### Comparison: Group, Stack, and Flex\n\n`Flex` component is an alternative to `Group` and `Stack`. \n`Flex` is more flexible, it allows creating both horizontal and vertical flexbox layouts, but requires more configuration.\n\n| Feature                    | Group | Stack | Flex |\n|----------------------------|-------|-------|------|\n| Direction                  | horizontal | vertical | both |\n| Equal width children       | ✅     | ❌    | ❌   |\n| flex-wrap support          | ✅     | ❌    | ✅   |\n| Responsive flexbox props   | ❌     | ❌    | ✅   |\n\n\n\n\n### Browser support\n`Flex` uses flexbox gap to add spacing between children. In older browsers, `Flex` children may not have spacing.\n\n\n\n\n### Styles API\n\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n\n| Name | Static selector    | Description  |\n|:-----|:-------------------|:-------------|\n| root | .mantine-Flex-root | Root element |\n\n\n### Keyword Arguments\n#### Flex\n\n- children (a list of or a singular dash component, string or number; optional)\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- align (dict; optional):\n    `align-items` CSS property. Supports dict for responsive values.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- columnGap (string | number | dict; optional):\n    theme.spacing key, `column-gap` CSS property, or dict for\n    responsive values.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- direction (dict; optional):\n    `flex-direction` CSS property. Supports dict for responsive\n    values.\n\n- gap (string | number | dict; optional):\n    theme.spacing key, `gap` CSS property, or dict for responsive\n    values.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- justify (dict; optional):\n    `justify-content` CSS property.  Supports dict for responsive\n    values.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- rowGap (string | number | dict; optional):\n    theme.spacing key, `row-gap` CSS property, or dict for responsive\n    values.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- wrap (dict; optional):\n    `flex-wrap` CSS property. Supports dict for responsive values."
  },
  {
    "name": "Grid",
    "description": "Responsive 12 columns grid system",
    "endpoint": "/components/grid",
    "package": "dash_mantine_components",
    "category": "Layout",
    "content": "\n\n## Grid  \nResponsive 12 columns grid system  \nCategory: Layout  \n\n### Usage\n\nUse Grid component to create layouts with a flexbox grid system.\n\n```python\nimport dash_mantine_components as dmc\n\nstyle = {\n    \"border\": f\"1px solid var(--mantine-primary-color-filled)\",\n    \"textAlign\": \"center\",\n}\n\ncomponent = dmc.Grid(\n    children=[\n        dmc.GridCol(dmc.Box(\"1\", style=style), span=6),\n        dmc.GridCol(dmc.Box(\"2\", style=style), span=3),\n        dmc.GridCol(dmc.Box(\"3\", style=style), span=3),\n    ],\n    gutter=\"xl\",\n)\n```\n### Columns span\n`The GridCol` `span` prop controls the ratio of column width to the total width of the row. By default, grid uses \n12 columns layout, so `span` prop can be any number from 1 to 12.\n\nExamples:\n```python\ndmc.GridCol(span=3)  # 3 / 12 = 25% of row width\ndmc.GridCol(span=4)  # 4 / 12 = 33% of row width\ndmc.GridCol(span=6)  # 6 / 12 = 50% of row width\ndmc.GridCol(span=12) # 12 / 12 = 100% of row width\n```\n`span` prop also supports dictionary syntax to change column width based on viewport width, it accepts `xs`, `sm`, `md`,\n`lg` and `xl` keys and values from 1 to 12. The syntax is the same as in `style` props.\n\nIn the following example `span={'base': 12, 'md': 6, 'lg': 3`}:\n\n- `base` – 12 / 12 = 100% of row width when viewport width is less than `md` breakpoint\n- `md` – 6 / 12 = 50% of row width when viewport width is between md and `lg` breakpoints\n- `lg` – 3 / 12 = 25% of row width when viewport width is greater than `lg` breakpoint\n\n\n```python\nimport dash_mantine_components as dmc\n\nstyle = {\n    \"border\": f\"1px solid var(--mantine-primary-color-filled)\",\n    \"textAlign\": \"center\",\n}\n\ncomponent = dmc.Grid(\n    children=[\n        dmc.GridCol(dmc.Box(\"1\", style=style), span={\"base\": 12, \"md\": 6, \"lg\":3}),\n        dmc.GridCol(dmc.Box(\"2\", style=style), span={\"base\": 12, \"md\": 6, \"lg\":3}),\n        dmc.GridCol(dmc.Box(\"3\", style=style), span={\"base\": 12, \"md\": 6, \"lg\":3}),\n        dmc.GridCol(dmc.Box(\"4\", style=style), span={\"base\": 12, \"md\": 6, \"lg\":3}),\n    ],\n)\n```\n### Gutter \n\nSet `gutter` prop to control spacing between columns. The prop works the same way as `style` props – you can reference\ntheme.spacing values with `xs`, `sm`, `md`, `lg` and `xl` strings and use dictionary syntax to change gutter based on\nviewport width.  You can also set gutter to a number to set spacing in px.\n\n```python\nimport dash_mantine_components as dmc\n\nstyle = {\n    \"border\": f\"1px solid var(--mantine-primary-color-filled)\",\n    \"textAlign\": \"center\",\n}\n\ncomponent = dmc.Grid(\n    children=[\n        dmc.GridCol(dmc.Box(\"1\", style=style), span=4),\n        dmc.GridCol(dmc.Box(\"2\", style=style), span=4),\n        dmc.GridCol(dmc.Box(\"3\", style=style), span=4),\n    ],\n    gutter={ \"base\": 5, \"xs\": \"md\", \"md\": \"xl\", \"xl\": 50 },\n)\n```\n### Grow\n\nSet `grow` prop on Grid to force last row to take 100% of container width.\n\n### Column Offset\n\nSet `offset` prop on `GridCol` component to add gaps to the grid. `offset` prop supports the same syntax as span\nprop: a number from 1 to 12 or a dictionary with `xs`, `sm`, `md`, `lg` and `xl` keys and values from 1 to 12.\n\n```python\nimport dash_mantine_components as dmc\n\nstyle = {\n    \"border\": f\"1px solid var(--mantine-primary-color-filled)\",\n    \"textAlign\": \"center\",\n}\n\ncomponent = dmc.Grid(\n    children=[\n        dmc.GridCol(dmc.Box(\"1\", style=style), span=3),\n        dmc.GridCol(dmc.Box(\"2\", style=style), span=3),\n        dmc.GridCol(dmc.Box(\"3\", style=style), span=3, offset=3),\n    ],\n    gutter=\"xl\",\n)\n```\n### Order\nSet the `order` prop on `GridCol` component to change the order of columns. `order` prop supports the same syntax as\n`span` prop: a number from 1 to 12 or a dictionary with `xs`, `sm`, `md`, `lg` and `xl` keys and values from 1 to 12.\n\n\n```python\nimport dash_mantine_components as dmc\n\nstyle = {\n    \"border\": f\"1px solid var(--mantine-primary-color-filled)\",\n    \"textAlign\": \"center\",\n}\n\ncomponent = dmc.Grid(\n    children=[\n        dmc.GridCol(dmc.Box(\"2\", style=style), span=3, order={\"base\": 2, \"sm\": 1, \"lg\": 3}),\n        dmc.GridCol(dmc.Box(\"3\", style=style), span=3, order={\"base\": 3, \"sm\": 2, \"lg\": 2}),\n        dmc.GridCol(dmc.Box(\"1\", style=style), span=3, order={\"base\": 1, \"sm\": 3, \"lg\": 1}),\n    ],\n)\n```\n### Multiple rows\n\nOnce children columns span and offset sum exceeds `columns` prop (defaults to 12), columns are placed on next row.\n\n```python\nimport dash_mantine_components as dmc\n\nstyle = {\n    \"border\": f\"1px solid var(--mantine-primary-color-filled)\",\n    \"textAlign\": \"center\",\n}\n\ncomponent = dmc.Grid(\n    children=[\n        dmc.GridCol(dmc.Box(\"1\", style=style), span=4),\n        dmc.GridCol(dmc.Box(\"2\", style=style), span=4),\n        dmc.GridCol(dmc.Box(\"3\", style=style), span=4),\n        dmc.GridCol(dmc.Box(\"4\", style=style), span=4),\n    ],\n    gutter=\"xl\",\n)\n```\n### Justify and Align\n\nSince grid is a flexbox container, you can control justify-content and align-items properties by using `justify` and \n`align` props respectively. Note the minimum height set on column 2 and 3.\n\n```python\nimport dash_mantine_components as dmc\n\ndmc.Grid(\n    children=[\n        dmc.GridCol(dmc.Box(\"1\"), span=4),\n        dmc.GridCol(dmc.Box(\"2\", style={\"minHeight\":80}), span=4),\n        dmc.GridCol(dmc.Box(\"3\", style={\"minHeight\":120}), span=4),\n    ],\n    justify=\"center\",\n    align=\"stretch\",\n\n)\n```\n\n### Auto Sized Columns\n\nAll columns in a row with `span` or a `breakpoint` of `auto` will have equal size, growing as much as they can to fill the row.\nIn this example, the second column takes up 50% of the row while the other two columns automatically resize to fill the remaining space.\n\n```python\nimport dash_mantine_components as dmc\n\nstyle = {\n    \"border\": f\"1px solid var(--mantine-primary-color-filled)\",\n    \"textAlign\": \"center\",\n}\n\ncomponent = dmc.Grid(\n    children=[\n        dmc.GridCol(dmc.Box(\"span=auto\", style=style), span=\"auto\"),\n        dmc.GridCol(dmc.Box(\"span=6\", style=style), span=6),\n        dmc.GridCol(dmc.Box(\"span=auto\", style=style), span=\"auto\"),\n    ],\n    gutter=\"xl\",\n)\n```\n### Fit Content\n\nIf you set `span` or a `breakpoint` to `content`, the column's size will automatically adjust to match the width of its content.\n\n```python\nimport dash_mantine_components as dmc\n\nstyle = {\n    \"border\": f\"1px solid var(--mantine-primary-color-filled)\",\n    \"textAlign\": \"center\",\n}\n\ncomponent = dmc.Grid(\n    children=[\n        dmc.GridCol(dmc.Box(\"content width\", style=style), span=\"content\"),\n        dmc.GridCol(dmc.Box(\"2\", style=style), span=6),\n    ],\n    gutter=\"xl\",\n)\n```\n### Change columns count\nBy default, grids uses 12 columns layout, you can change it by setting `columns` prop on `Grid` component. Note that\nin this case, columns span and offset will be calculated relative to this value.\n\nIn the following example, first column takes 50% with 12 span (12/24), second and third take 25% (6/24):\n\n\n```python\nimport dash_mantine_components as dmc\n\nstyle = {\n    \"border\": f\"1px solid var(--mantine-primary-color-filled)\",\n    \"textAlign\": \"center\",\n}\n\ncomponent = dmc.Grid(\n    children=[\n        dmc.GridCol(dmc.Box(\"1\", style=style), span=12),\n        dmc.GridCol(dmc.Box(\"2\", style=style), span=6),\n        dmc.GridCol(dmc.Box(\"3\", style=style), span=6),\n    ],\n    columns=24\n)\n```\n### Container queries\nTo use [container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries) instead \nof media queries, set `type='container'`. With container queries, all responsive values are adjusted based on the\ncontainer width, not the viewport width.\n\nNote that, when using container queries, it is also required to set `breakpoints` prop to the exact container width values.\n\nTo see how the grid changes, resize the root element of the demo with the resize handle located at the bottom right\ncorner of the demo:\n\n```python\nimport dash_mantine_components as dmc\n\nstyle = {\n    \"border\": f\"1px solid var(--mantine-primary-color-filled)\",\n    \"textAlign\": \"center\",\n}\n\ncomponent = dmc.Box(\n    # Wrapper div is added for demonstration purposes only,\n    # it is not required in real projects\n    dmc.Grid(\n        children=[\n            dmc.GridCol(dmc.Box(\"1\", style=style), span={\"base\": 12, \"md\": 6, \"lg\": 3}),\n            dmc.GridCol(dmc.Box(\"2\", style=style), span={\"base\": 12, \"md\": 6, \"lg\": 3}),\n            dmc.GridCol(dmc.Box(\"3\", style=style), span={\"base\": 12, \"md\": 6, \"lg\": 3}),\n            dmc.GridCol(dmc.Box(\"4\", style=style), span={\"base\": 12, \"md\": 6, \"lg\": 3}),\n        ],\n        gutter=\"xl\",\n        type=\"container\",\n        breakpoints={\n            \"xs\": \"100px\",\n            \"sm\": \"200px\",\n            \"md\": \"300px\",\n            \"lg\": \"400px\",\n            \"xl\": \"500px\",\n        },\n    ),\n    style={\"resize\": 'horizontal', \"overflow\": 'hidden', \"maxWidth\": '100%', \"margin\": 24 },\n)\n```\n### overflow: hidden\nBy default, `Grid` has `overflow: visible` style on the root element. In some cases you might want to change it to\n`overflow: hidden` to prevent negative margins from overflowing the grid container. For example, if you use `Grid` \nwithout parent container which has padding.\n\n```python\ndmc.Grid([\n    dmc.GridCol(\"1\", span=6),\n    dmc.GridCol(\"2\", span=6),\n], overflow=\"hidden\")\n```\n\n\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n#### Grid Selectors\n\n| Selector   | Static selector            | Description                              |\n|------------|-----------------------------|------------------------------------------|\n| container  | .mantine-Grid-container     | Container element, only used with `type=\"container\"` prop |\n| root       | .mantine-Grid-root          | Root element                             |\n| inner      | .mantine-Grid-inner         | Columns wrapper                          |\n| col        | .mantine-Grid-col           | `Grid.Col` root element                  |\n\n---\n\n#### Grid CSS Variables\n\n| Selector | Variable          | Description                      |\n|----------|-------------------|----------------------------------|\n| root     | --grid-overflow   | Controls `overflow` property     |\n|          | --grid-align      | Controls `align-items` property  |\n|          | --grid-justify    | Controls `justify-content` property |\n\n\n### Keyword Arguments\n#### Grid\n\n- children (a list of or a singular dash component, string or number; optional)\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- align (optional):\n    Sets `align-items`, `stretch` by default.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- breakpoints (dict; optional):\n    Breakpoints values, only applicable when `type=\"container\"` is\n    set, ignored when `type` is not set or `type=\"media\"` is set.\n\n    `breakpoints` is a dict with keys:\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- columns (number; optional):\n    Number of columns in each row, `12` by default.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- grow (boolean; optional):\n    Determines whether columns in the last row should expand to fill\n    all available space, `False` by default.\n\n- gutter (number; optional):\n    Gutter between columns, key of `theme.spacing` or any valid CSS\n    value, `'md'` by default.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- justify (optional):\n    Sets `justify-content`, `flex-start` by default.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- overflow (optional):\n    Sets `overflow` CSS property on the root element, `'visible'` by\n    default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- type (a value equal to: 'media', 'container'; optional):\n    Determines typeof of queries that are used for responsive styles,\n    `'media'` by default.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n#### GridCol\n\n- children (a list of or a singular dash component, string or number; optional)\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- offset (number; optional):\n    Column offset on the left side – number of columns that should be\n    left empty before this column.\n\n- order (number; optional):\n    Column order, can be used to reorder columns at different viewport\n    sizes.\n\n- span (number; optional):\n    Column span, `12` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`."
  },
  {
    "name": "Group",
    "description": "Use Group component to place components in a horizontal flex container.",
    "endpoint": "/components/group",
    "package": "dash_mantine_components",
    "category": "Layout",
    "content": "\n\n## Group  \nUse Group component to place components in a horizontal flex container.  \nCategory: Layout  \n\n### Usage\n\n### Align\n\nSince `Group` is a flexbox container, you can control `justify-content` and `align-items` properties by using `justify` \nand `align` props respectively. Note the minimum height set on component 2 and 3 in the example above.\n\n```python\n\nstyle = {\n    \"border\": f\"1px solid var(--mantine-primary-color-filled)\",\n    \"textAlign\": \"center\",\n    \"margin\": 2,\n    \"width\": 100\n}\n\ntarget = dmc.Grid(\n    children=[\n        dmc.Box(\"1\", style=style),\n        dmc.Box(\"2\", style={**style, \"minHeight\": 80}),\n        dmc.Box(\"3\", style={**style, \"minHeight\": 120}),\n    ],\n)\n```\n\n\n\n### preventGrowOverflow\n`preventGrowOverflow` prop allows you to control how `Group` children should behave when there is not enough space to\nfit them all on one line. By default, children are not allowed to take more space than (1 / children.length) * 100%\nof parent width (`preventGrowOverflow` is set to True). To change this behavior, set `preventGrowOverflow` to False and \nchildren will be allowed to grow and take as much space as they need.\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Box(\n    style={\"overflow\": \"hidden\"},\n    children=[\n        dmc.Box(\n            maw=500,\n            p=\"md\",\n            mx=\"auto\",\n            bg=\"var(--mantine-color-blue-light)\",\n            children=[\n                dmc.Text(\n                    size=\"sm\",\n                    mb=5,\n                    children=(\n                        \"preventGrowOverflow: true – each child width is always limited \"\n                        \"to 33% of parent width (since there are 3 children)\"\n                    ),\n                ),\n                dmc.Group(\n                    grow=True,\n                    wrap=\"nowrap\",\n                    children=[\n                        dmc.Button(\"First button\", variant=\"default\"),\n                        dmc.Button(\"Second button with large content\", variant=\"default\"),\n                        dmc.Button(\"Third button\", variant=\"default\"),\n                    ],\n                ),\n                dmc.Text(\n                    size=\"sm\",\n                    mb=5,\n                    mt=\"md\",\n                    children=(\n                        \"preventGrowOverflow: false – children will grow based on their \"\n                        \"content, they can take more than 33% of parent width\"\n                    ),\n                ),\n                dmc.Group(\n                    grow=True,\n                    preventGrowOverflow=False,\n                    wrap=\"nowrap\",\n                    children=[\n                        dmc.Button(\"First button\", variant=\"default\"),\n                        dmc.Button(\"Second button with large content\", variant=\"default\"),\n                        dmc.Button(\"Third button\", variant=\"default\"),\n                    ],\n                ),\n            ],\n        )\n    ],\n)\n```\n### Group children\n`Group` works correctly only with components. Strings, or numbers may have incorrect styles if `grow` prop is set:\n\n```python\n# don't do this\ndmc.Group([\n    \"Some text\",\n    dmc.Text(\"Some more text\"),\n    20,\n], grow=True)\n```\n\n### Browser support\n`Group` uses flexbox `gap` to add spacing between children. In older browsers, `Group` children may not have spacing.\n\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n#### Group Selectors\n\n| Selector | Static selector        | Description    |\n|----------|-------------------------|----------------|\n| root     | .mantine-Group-root     | Root element   |\n\n\n\n#### Group CSS Variables\n\n| Selector | Variable                 | Description                                                  |\n|----------|--------------------------|--------------------------------------------------------------|\n| root     | --group-align            | Controls `align-items` property                              |\n|          | --group-justify          | Controls `justify-content` property                          |\n|          | --group-gap              | Controls `gap` property                                      |\n|          | --group-wrap             | Controls `flex-wrap` property                                |\n|          | --group-child-width      | Controls max-width of child elements when `grow` and `preventGrowOverflow` are set |\n\n\n\n#### Group Data Attributes\n\n| Selector | Attribute   | Condition       |\n|----------|-------------|-----------------|\n| root     | data-grow   | `grow` prop is set |\n\n\n### Keyword Arguments\n#### Group\n\n- children (a list of or a singular dash component, string or number; optional)\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- align (optional):\n    Controls `align-items` CSS property, `'center'` by default.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- gap (string | number; optional):\n    Key of `theme.spacing` or any valid CSS value for `gap`, numbers\n    are converted to rem, `'md'` by default.\n\n- grow (boolean; optional):\n    Determines whether each child element should have `flex-grow: 1`\n    style, `False` by default.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- justify (optional):\n    Controls `justify-content` CSS property, `'flex-start'` by\n    default.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- preventGrowOverflow (boolean; optional):\n    Determines whether children should take only dedicated amount of\n    space (`max-width` style is set based on the number of children),\n    `True` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- wrap (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'nowrap', 'wrap', 'wrap-reverse'; optional):\n    Controls `flex-wrap` CSS property, `'wrap'` by default."
  },
  {
    "name": "Layout Overview",
    "endpoint": "/layout-overview",
    "description": "This guide gives an overview of layout components available in Dash Mantine components.",
    "package": "dash_mantine_components",
    "category": "Layout",
    "order": 1,
    "content": "\n\n## Layout Overview  \nThis guide gives an overview of layout components available in Dash Mantine components.  \nCategory: Layout  \n\n### SimpleGrid\nUse [SimpleGrid](/components/simplegrid) if you need columns with equal size. The `cols`, `spacing` and `verticalSpacing` props accepts dictionaries to set responsive values based on viewport width.\n\n\n### Grid\nUse [Grid](/components/grid) if you need columns with different sizes.   You can also set spans, spacing, offsets, and ordering and more.\n\n\n### Group\nUse [Group](/components/group) if you want to put items next to each other horizontally.\n\n### Stack\nUse [Stack](/components/stack) if you want to put items next to each other vertically\n\n\n### Flex\nUse [Flex](/components/flex) if you want to create both horizontal and vertical flexbox layouts. It's more flexible than `Group` and `Stack` but requires more configuration.\n\n\n### AspectRatio\nUse [AspectRatio](/components/aspectratio) to ensure that content always maintains a specific width-to-height ratio,\nno matter the screen size.  Great for images and videos.\n\n\n### Center\nUse [Center](/components/center) component to center content vertically and horizontally.\nThis example centers an icon with a link with the `inline` prop:\n\n\n### Container\nUse [Container](/components/container) to center content horizontally and add horizontal padding from theme. Good for limiting width and centering content on large screens.\n\n\n###  Box\n[Box](/components/box) is like an `html.Div` but also includes Mantine style props.\n\n\n### Paper\n\nUse [Paper](/components/paper) to group content visually like a card.  It includes props for background, padding, shadow, borders, and rounded corners.\n\n\n### AppShell\n\nThe [AppShell](/components/appshell) component is a layout component designed to create responsive and consistent app layouts.\nIt includes:\n- `AppShell` - root component, it is required to wrap all other components, used to configure layout properties\n- `AppShellHeader` - section rendered at the top of the page\n- `AppShellNavbar` - section rendered on the left side of the page\n- `AppShellAside` - section rendered on the right side of the page\n- `AppShellFooter` - section rendered at the bottom of the page\n- `AppShellMain` - main section rendered at the center of the page, has static position, all other sections are offset by its padding\n- `AppShellSection` - utility component that can be used to render group of content inside `AppShellNavbar` and `AppShellAside`\n\nThis DMC documentation app is built using `AppShell` components.\n\nSee the [AppShell](/components/appshell) docs for more info and examples:\n\n"
  },
  {
    "name": "SimpleGrid",
    "description": "Use SimpleGrid component to create a grid where each column takes equal width. You can use it to create responsive layouts.",
    "endpoint": "/components/simplegrid",
    "package": "dash_mantine_components",
    "category": "Layout",
    "content": "\n\n## SimpleGrid  \nUse SimpleGrid component to create a grid where each column takes equal width. You can use it to create responsive layouts.  \nCategory: Layout  \n\n### Usage\n\n`SimpleGrid` is a responsive grid system with equal-width columns. It uses CSS grid layout. If you need to set different\nwidths for columns, use `Grid` component instead.\n\n### spacing and verticalSpacing props\n`spacing` prop is used both for horizontal and vertical spacing if `verticalSpacing` is not set:\n\n```python\n\n# `spacing` is used for both horizontal and vertical spacing\ndmc.SimpleGrid(spacing=\"xl\")\n\n# `spacing` is used for horizontal spacing, `verticalSpacing` for vertical\ndmc.SimpleGrid(spacing=\"xl\", verticalSpacing=\"lg\")\n```\n\n### Responsive Props\n\n`cols`, `spacing` and `verticalSpacing` props support object notation for responsive values, \nit works the same way as [style props](/style-props): the object may have `base`, `xs`, `sm`, `md`, `lg` and `xl` key, \nand values from those keys will be applied according to current viewport width.\n\n`cols` prop can be understood from the below example as:\n\n- 1 column if viewport width is less than `sm` breakpoint\n- 2 columns if viewport width is between `sm` and `lg` breakpoints\n- 5 columns if viewport width is greater than `lg` breakpoint\n\nSame logic applies to `spacing` and `verticalSpacing` props.\n\nResize browser to see breakpoints behavior.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html\n\nstyle = {\n    \"border\": f\"1px solid var(--mantine-primary-color-filled)\",\n    \"textAlign\": \"center\",\n}\n\ncomponent = dmc.SimpleGrid(\n    cols={\"base\": 1, \"sm\": 2, \"lg\": 5},\n    spacing={\"base\": 10, \"sm\": \"xl\"},\n    verticalSpacing={\"base\": \"md\", \"sm\": \"xl\"},\n    children=[\n        html.Div(\"1\", style=style),\n        html.Div(\"2\", style=style),\n        html.Div(\"3\", style=style),\n        html.Div(\"4\", style=style),\n        html.Div(\"5\", style=style),\n    ],\n)\n```\n### Container queries\nTo use [container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries) instead\nof media queries, set `type='container'`. With container queries, grid columns and spacing will be adjusted based on the\ncontainer width, not the viewport width.\n\nNote that, when using container queries, `cols`, `spacing` and `verticalSpacing` props cannot reference `theme.breakpoints`\nvalues in keys. It is required to use exact `px` or `em` values.\n\nTo see how the grid changes, resize the root element of the demo with the resize handle located at the bottom right\ncorner of the demo:\n\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html\n\nstyle = {\n    \"border\": f\"1px solid var(--mantine-primary-color-filled)\",\n    \"textAlign\": \"center\",\n}\n\ncomponent = html.Div(\n    # Wrapper div is added for demonstration purposes only,\n    # it is not required in real projects\n    dmc.SimpleGrid(\n        type=\"container\",\n        cols={\"base\": 1, \"300px\": 2, \"500px\": 5},\n        spacing={\"base\": 10, \"300px\": \"xl\"},\n        children=[\n            html.Div(\"1\", style=style),\n            html.Div(\"2\", style=style),\n            html.Div(\"3\", style=style),\n            html.Div(\"4\", style=style),\n            html.Div(\"5\", style=style),\n        ],\n        p=\"xs\",\n    ),\n    style={\"resize\": \"horizontal\", \"overflow\": \"hidden\", \"maxWidth\": \"100%\"},\n)\n```\n### Styles API\n\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n| Name        | Static selector          | Description                                      |\n|:------------|:-------------------------|:-------------------------------------------------|\n| root        | .mantine-SimpleGrid-root | Root element                                     |\n\n\n### Keyword Arguments\n#### SimpleGrid\n\n- children (a list of or a singular dash component, string or number; optional)\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- cols (number; optional):\n    Number of columns, `1` by default.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- spacing (number; optional):\n    Spacing between columns, `'md'` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- type (a value equal to: 'media', 'container'; optional):\n    Determines typeof of queries that are used for responsive styles,\n    'media' by default.\n\n- variant (string; optional):\n    variant.\n\n- verticalSpacing (number; optional):\n    Spacing between rows, `'md'` by default.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`."
  },
  {
    "name": "Space",
    "description": "Use the Space component to add horizontal or vertical spacing from theme.",
    "endpoint": "/components/space",
    "package": "dash_mantine_components",
    "category": "Layout",
    "content": "\n\n## Space  \nUse the Space component to add horizontal or vertical spacing from theme.  \nCategory: Layout  \n\n### Simple Example\n\nSpace component can be customized with two props: `h` and `w`, shortcuts for height and width. These can take either \nvalues from Mantine's theme i.e. xs, sm, md, lg, xl or number.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html\n\ncomponent = html.Div(\n    [\n        dmc.Group([dmc.Badge(\"Badge 1\"), dmc.Badge(\"Badge 2\")]),\n        dmc.Space(h=\"xl\"),\n        dmc.Group([dmc.Badge(\"Badge 1\"), dmc.Space(w=\"lg\"), dmc.Badge(\"Badge 2\")]),\n        dmc.Space(h=30),\n        dmc.Group([dmc.Badge(\"Badge 1\"), dmc.Space(w=45), dmc.Badge(\"Badge 2\")]),\n    ]\n)\n```\n### Where to use\n\nIn most cases, you would want to use margin props instead of `Space` when working with Mantine components:\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html\n\nhtml.Div([\n    dmc.Text(\"First line\"),    \n    dmc.Text(\"Second line\", mt=\"md\"),    \n])\n```\n\nBut when you work with other components like `html` or `dcc`, you do not have access to Mantine's theme spacing,\nand you may want to use dmc.Space component:\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html\n\nhtml.Div([\n    html.P(\"First line\"),\n    dmc.Space(h=\"md\"),    \n    html.P(\"Second line\"),    \n])\n```\n\n\n### Keyword Arguments\n#### Space\n\n- children (a list of or a singular dash component, string or number; optional)\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`."
  },
  {
    "name": "Stack",
    "description": "Use Stack component to compose elements and components in a vertical flex container",
    "endpoint": "/components/stack",
    "package": "dash_mantine_components",
    "category": "Layout",
    "content": "\n\n## Stack  \nUse Stack component to compose elements and components in a vertical flex container  \nCategory: Layout  \n\n### Usage\n\n`Stack` is a vertical flex container. If you need a horizontal flex container, use `Group` component instead. If you\nneed to have full control over flex container properties, use `Flex` component.\n\nAdjust stack styles with `align`, `justify`, and `gap` props.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Stack(\n    [\n        dmc.Button(\"1\", variant=\"outline\"),\n        dmc.Button(\"2\", variant=\"outline\"),\n        dmc.Button(\"3\", variant=\"outline\"),\n    ],\n    align=\"center\",\n    gap=\"xl\",\n)\n```\n### Interactive Demo\n\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n#### Stack Selectors\n\n| Selector | Static selector        | Description    |\n|----------|-------------------------|----------------|\n| root     | .mantine-Stack-root     | Root element   |\n\n\n\n#### Stack CSS Variables\n\n| Selector | Variable         | Description                     |\n|----------|------------------|---------------------------------|\n| root     | --stack-align    | Controls `align-items` property |\n|          | --stack-justify  | Controls `justify-content` property |\n|          | --stack-gap      | Controls `gap` property         |\n\n\n\n### Keyword Arguments\n#### Stack\n\n- children (a list of or a singular dash component, string or number; optional)\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- align (optional):\n    Controls `align-items` CSS property, `'stretch'` by default.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- gap (string | number; optional):\n    Key of `theme.spacing` or any valid CSS value to set `gap`\n    property, numbers are converted to rem, `'md'` by default.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- justify (optional):\n    Controls `justify-content` CSS property, `'flex-start'` by\n    default.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`."
  },
  {
    "name": "Box",
    "description": "Base component for all Mantine components",
    "endpoint": "/components/box",
    "package": "dash_mantine_components",
    "category": "Miscellaneous",
    "content": "\n\n## Box  \nBase component for all Mantine components  \nCategory: Miscellaneous  \n\n### Usage\n\nThe `Box` component serves as a  base for all other components and can be used as a replacement for `html.Div` as a basic container.\n\nThe key advantage of using `Box` is its support for [Style Props](/style-props), allowing for cleaner, more readable styling directly within the component.\n\n### Example\nBoth examples below produce the same result:\n\n```python\n# Using html.Div\nhtml.Div(\n    [\n        # your content here\n    ],\n    style={\"marginTop\": 8, \"padding\": 24}\n)\n\n# Using dmc.Box with Style Props\ndmc.Box(\n    [\n        # your content here\n    ],\n    mt=8, p=24\n)\n\n```\n\n> Please see the [Style Props](/style-props) section for more information.\n\n\n\n\n### Keyword Arguments\n#### Box\n\n- children (a list of or a singular dash component, string or number; optional)\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`."
  },
  {
    "name": "Collapse",
    "description": "Use the Collapse component to animate presence with slide down/up transition",
    "endpoint": "/components/collapse",
    "package": "dash_mantine_components",
    "category": "Miscellaneous",
    "content": "\n\n## Collapse  \nUse the Collapse component to animate presence with slide down/up transition  \nCategory: Miscellaneous  \n\n### Simple Example\n\n\n```python\nfrom dash import callback, Input, Output\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Box([\n    dmc.Button(\"Toggle Content\", id=\"collapse-btn\", n_clicks=0),\n    dmc.Collapse(\n        children=dmc.Text(\"Hello World!\", my=\"lg\"),\n        opened=False,\n        id=\"collapse-simple\"\n    )\n])\n\n@callback(\n    Output(\"collapse-simple\", \"opened\"),\n    Input(\"collapse-btn\", \"n_clicks\"),\n)\ndef update(n):\n    if n % 2 == 0:\n        return False\n    return True\n```\n### Change transition\nSet following props to control transition:\n\n- `transitionDuration` – duration in ms\n- `transitionTimingFunction` – [CSS timing function](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function) (\"ease\", \"linear\", etc.), defaults to \"ease\"\n\n```python\nfrom dash import callback, Input, Output\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Box([\n    dmc.Button(\"Toggle Content\", id=\"collapse-transition-btn\", n_clicks=0),\n    dmc.Collapse(\n        children=dmc.Text(\"Hello World!\", my=\"lg\"),\n        opened=False,\n        transitionDuration=1000,\n        transitionTimingFunction=\"linear\",\n        id=\"collapse-transition\"\n    )\n])\n\n@callback(\n    Output(\"collapse-transition\", \"opened\"),\n    Input(\"collapse-transition-btn\", \"n_clicks\"),\n)\ndef update(n):\n    if n % 2 == 0:\n        return False\n    return True\n```\n### Nested Collapse components\n\n```python\nfrom dash import callback, Input, Output\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Box([\n    dmc.Button(\"Toggle Content\", id=\"collapse-root-btn\", n_clicks=0, mb=\"sm\", size=\"lg\"),\n    dmc.Collapse(\n        children=dmc.Box([\n            dmc.Text(\"Hello World!\", mt=\"lg\"),\n            dmc.Button(\n                \"Toggle Content\",\n                id=\"collapse-inner-btn\",\n                n_clicks=0,\n                variant=\"outline\",\n                size=\"sm\",\n                my=\"lg\",\n                ml=\"lg\"\n            ),\n            dmc.Collapse(children= dmc.Text(\"Hello Nested Worlds!\", ml=\"lg\"), id=\"collapse-inner\")\n        ]),\n        opened=False,\n        id=\"collapse-root\"\n    )\n])\n\n@callback(\n    Output(\"collapse-root\", \"opened\"),\n    Input(\"collapse-root-btn\", \"n_clicks\"),\n)\ndef update(n):\n    if n % 2 == 0:\n        return False\n    return True\n\n\n@callback(\n    Output(\"collapse-inner\", \"opened\"),\n    Input(\"collapse-inner-btn\", \"n_clicks\"),\n)\ndef update(n):\n    if n % 2 == 0:\n        return False\n    return True\n```\n### Keyword Arguments\n#### Collapse\n\n- children (a list of or a singular dash component, string or number; optional):\n    Content.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- animateOpacity (boolean; optional):\n    Determines whether opacity should be animated, `True` by default.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- keepMounted (boolean; optional):\n    Keep element in DOM when collapsed, useful for nested collapses.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- opened (boolean; default False):\n    Opened state.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- transitionDuration (number; optional):\n    Transition duration in ms, `200` by default.\n\n- transitionTimingFunction (string; optional):\n    Transition timing function, default value is `ease`.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`."
  },
  {
    "name": "Divider",
    "description": "Use Divider component as an alternative to html.Hr.",
    "endpoint": "/components/divider",
    "package": "dash_mantine_components",
    "category": "Miscellaneous",
    "content": "\n\n## Divider  \nUse Divider component as an alternative to html.Hr.  \nCategory: Miscellaneous  \n\n### Simple Example\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Stack(\n    children=[\n        dmc.Divider(variant=\"solid\"),\n        dmc.Divider(variant=\"dashed\"),\n        dmc.Divider(variant=\"dotted\"),\n    ],\n)\n```\n### With Label\n\nYou can provide `label` and `labelPosition` to customize dmc.Divider.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Stack(\n    [\n        dmc.Divider(label=\"Click on update button to refresh\"),\n        dmc.Divider(label=\"Divider with centered content\", labelPosition=\"center\"),\n        dmc.Divider(label=\"Divider with content on the right\", labelPosition=\"right\"),\n    ],\n)\n```\n### Different Sizes\n\nSet the `size` property to change the size of the divider.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Stack(\n    children=[\n        dmc.Divider(size=\"xs\"),\n        dmc.Divider(size=\"sm\"),\n        dmc.Divider(size=\"md\"),\n        dmc.Divider(size=\"lg\"),\n        dmc.Divider(size=\"xl\"),\n        dmc.Divider(size=10),\n    ],\n)\n```\n### Vertical Divider\n\nDivider can be used in vertical orientations by setting `orientation=\"vertical\"` and providing it some height.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Group(\n    [\n        dmc.Badge(\"Badge 1\"),\n        dmc.Divider(orientation=\"vertical\", style={\"height\": 20}),\n        dmc.Badge(\"Badge 2\"),\n        dmc.Divider(orientation=\"vertical\", style={\"height\": 20}),\n        dmc.Badge(\"Badge 3\"),\n    ]\n)\n```\n### With Color\n\nSet the Divider color from one of the colors of Mantine default theme using the `color` prop.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Divider(color=\"red\")\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n| Name  | Static selector        | Description   |\n|:------|:-----------------------|:--------------|\n| root  | .mantine-Divider-root  | Root element  |\n| label | .mantine-Divider-label | Label element |\n\n\n### Keyword Arguments\n#### Divider\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- color (optional):\n    Key of `theme.colors` or any valid CSS color value, by default\n    value depends on color scheme.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- label (a list of or a singular dash component, string or number; optional):\n    Divider label, visible only when `orientation` is `horizontal`.\n\n- labelPosition (a value equal to: 'left', 'right', 'center'; optional):\n    Controls label position, `'left'` by default.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- orientation (a value equal to: 'horizontal', 'vertical'; optional):\n    Controls orientation, `'horizontal'` by default.\n\n- size (number; optional):\n    Controls width/height (depends on orientation), `'xs'` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`."
  },
  {
    "name": "Paper",
    "description": "Render white or dark background depending on color scheme with Paper component with border, shadow, etc.",
    "endpoint": "/components/paper",
    "package": "dash_mantine_components",
    "category": "Miscellaneous",
    "content": "\n\n## Paper  \nRender white or dark background depending on color scheme with Paper component with border, shadow, etc.  \nCategory: Miscellaneous  \n\n### Introduction\n\nPaper component renders white (or theme.colors.dark[7] for dark theme) background with shadow, border-radius and\npadding from theme.\n\n### Shadow\n\n```python\nimport dash_mantine_components as dmc\n\ndmc.Paper(\n    children=[],\n    shadow=\"xs\",\n)\n```\n\n### Padding\n\n```python\nimport dash_mantine_components as dmc\n\ndmc.Paper(\n    children=[],\n    p=\"xs\", # or p=10 for padding of 10px\n)\n```\n\n### Radius\n\n```python\nimport dash_mantine_components as dmc\n\ndmc.Paper(\n    children=[],\n    radius=\"sm\", # or p=10 for border-radius of 10px\n)\n```\n\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n| Name | Static selector     | Description  |\n|:-----|:--------------------|:-------------|\n| root | .mantine-Paper-root | Root element |\n\n\n### Keyword Arguments\n#### Paper\n\n- children (a list of or a singular dash component, string or number; optional):\n    Content.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set border-radius,\n    numbers are converted to rem @,default,`theme.defaultRadius`.\n\n- shadow (optional):\n    Key of `theme.shadows` or any valid CSS value to set `box-shadow`.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withBorder (boolean; optional):\n    Adds border to the root element."
  },
  {
    "name": "ScrollArea",
    "description": "Use the ScrollArea component to customize scrollbars.",
    "endpoint": "/components/scrollarea",
    "package": "dash_mantine_components",
    "category": "Miscellaneous",
    "content": "\n\n## ScrollArea  \nUse the ScrollArea component to customize scrollbars.  \nCategory: Miscellaneous  \n\n### Introduction\n\nThe ScrollArea component supports the following props:\n\n- `type` defines scrollbars behavior:\n    - `hover` - scrollbars are visible on hover\n    - `scroll` - scrollbars are visible on scroll\n    - `auto` - similar to `overflow: auto` - scrollbars are always visible when the content is overflowing\n    - `always` - same as auto but scrollbars are always visible regardless of whether the content is overflowing\n    - `never` - scrollbars are always hidden\n- `offsetScrollbars` - offset scrollbars with padding\n    - x – adds padding to offset horizontal scrollbar only\n    - y – adds padding to offset vertical scrollbar only\n    - xy – adds padding to offset both scrollbars\n    - present – adds padding only when scrollbars are visible\n\n- `scrollbarSize` - scrollbar size, controls scrollbar and thumb width/height\n- `scrollHideDelay` - delay in ms to hide scrollbars, applicable only when type is hover or scroll\n- `overscrollBehavior` – controls overscroll-behavior of the viewport\n- `scrollTo` sets scroll position of the viewport\n\nThis example has a vertical scroll bar. \n\nThis is how the ScrollArea height and width is defined in the example above \n\n```python\n\nhtml.Div(\n    [\n        dmc.Title(\"Charizard (Pokémon)\", order=3),\n        dmc.ScrollArea(\n            h=250, w=350,\n            children = dmc.Paper(dmc.Text(text), withBorder=True),        \n        )\n    ]\n)\n```\n### Horizontal scrollbars\n\nThe horizontal scroll bar will be displayed when the content of the ScrollArea is wider than the ScrollArea.\n\n```python\nimport dash_mantine_components as dmc\n\nfrom docs.scrollarea.text import text\n\ncomponent = dmc.Center(\n    dmc.ScrollArea(\n        h=250,\n        w=350,\n        children=dmc.Paper(\n            [dmc.Title(\"Charizard (Pokémon)\", order=3), dmc.Text(text)], w=600\n        ),\n    ),\n)\n```\n### Disable horizontal scrollbars\nTo disable horizontal scrollbars set `scrollbars=\"y\"` prop:\n\n\n```python\nimport dash_mantine_components as dmc\n\nfrom docs.scrollarea.text import text\n\ncomponent = dmc.Center(\n    dmc.ScrollArea(\n        h=250,\n        w=350,\n        scrollbars=\"y\",\n        children=dmc.Paper(\n            [dmc.Title(\"Charizard (Pokémon)\", order=3), dmc.Text(text)], w=600\n        ),\n    ),\n)\n```\n### Scroll To\n\nThe `scrollTo` prop sets the scroll position of the viewport with the following options:\n\n  * `top` – The vertical position as pixels (number) or percentage (string) from '0%' to '100%'\n  * `left` – The horizontal position as pixels (number) or percentage (string) from '0%' to '100%'\n  * `behavior` – scroll behavior: `auto` (instant) or `smooth` (animated), `smooth` by default\n\nFor example:\n\n```python\n# Scroll to specific pixel positions\ndmc.ScrollArea(scrollTo={\"top\": 100, \"left\": 50})\n\n# Scroll to percentage positions\ndmc.ScrollArea(scrollTo={\"top\": \"25%\", \"left\": \"75%\"})\n\n# Mixed usage\ndmc.ScrollArea(scrollTo={\"top\": 200, \"left\": \"50%\", \"behavior\": \"auto\"})\n```\n\n---\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import callback, Input, Output, ctx\n\n\ncontent = [\n    dmc.Box([\n        dmc.Title(f\"Section {i}\", order=4, mt=\"sm\", id=f\"section-{i}\"),\n        dmc.Text(\"\"\"\n            Lorem ipsum, dolor sit amet consectetur adipisicing elit.\n            Dicta perspiciatis reiciendis voluptate eaque itaque quos.\n            Natus iure tenetur libero, reprehenderit ad, sequi, in aliquam eos\n            necessitatibus expedita delectus veniam culpa!            \n        \"\"\")\n    ])\n    for i in range(1, 11)\n]\n\ncomponent = dmc.Box([\n    dmc.ScrollArea(\n        content,\n        id=\"scrollArea\",\n        h=250, w=350,\n    ),\n    dmc.Group([\n        dmc.Button(\"Scroll to Top\", id=\"scrollto-top\"),\n        dmc.Button(\"Scroll to Middle\", id=\"scrollto-middle\"),\n        dmc.Button(\"Scroll to Bottom\", id=\"scrollto-bottom\"),\n    ], mt=\"lg\"),\n])\n\n\n@callback(\n    Output(\"scrollArea\", \"scrollTo\"),\n    Input(\"scrollto-top\", \"n_clicks\"),\n    Input(\"scrollto-middle\", \"n_clicks\"),\n    Input(\"scrollto-bottom\", \"n_clicks\"),\n)\ndef scroll_to(t, m, b):\n    if ctx.triggered_id == \"scrollto-middle\":\n        return {\"top\": \"50%\"}\n    if ctx.triggered_id == \"scrollto-bottom\":\n        return {\"top\": \"100%\"}\n    return {\"top\": 0}\n```\n### ScrollAreaAutosize\n\n`ScrollAreaAutosize` component allows to create scrollable containers when given max-height is reached.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import callback, Output, Input, ctx\n\nlorem = (\n    \"Lorem ipsum, dolor sit amet consectetur adipisicing elit. \"\n    \"Dicta perspiciatis reiciendis voluptate eaque itaque quos. \"\n    \"Natus iure tenetur libero, reprehenderit ad, sequi, in aliquam eos \"\n    \"necessitatibus expedita delectus veniam culpa!\"\n)\n\ncomponent = dmc.Stack(\n    [\n        dmc.ScrollAreaAutosize(mah=300, maw=400, p=\"sm\", id=\"scrollarea-autosize\"),\n        dmc.Group(\n            m=\"lg\",\n            children=[\n                dmc.Button(\n                    \"1 paragraph\",\n                    id=\"btn-1-paragraph\",\n                    color=\"red\",\n                ),\n                dmc.Button(\n                    \"4 paragraphs\",\n                    id=\"btn-4-paragraphs\",\n                ),\n            ],\n        ),\n    ]\n)\n\n\n@callback(\n    Output(\"scrollarea-autosize\", \"children\"),\n    Input(\"btn-1-paragraph\", \"n_clicks\"),\n    Input(\"btn-4-paragraphs\", \"n_clicks\"),\n)\ndef update_paragraphs(inc, dec):\n    if ctx.triggered_id == \"btn-1-paragraph\":\n        return dmc.Box(lorem, p=\"sm\")\n    return [dmc.Box(lorem, p=\"sm\") for _ in range(4)]\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n####  ScrollArea Selectors\n| Selector  | Static selector                 | Description                                       |\n| --------- | ------------------------------- | ------------------------------------------------- |\n| root      | `.mantine-ScrollArea-root`      | Root element                                      |\n| content   | `.mantine-ScrollArea-content`   | Wraps component children                          |\n| viewport  | `.mantine-ScrollArea-viewport`  | Main scrollable area                              |\n| scrollbar | `.mantine-ScrollArea-scrollbar` | Horizontal or vertical scrollbar root             |\n| thumb     | `.mantine-ScrollArea-thumb`     | Scrollbar thumb                                   |\n| corner    | `.mantine-ScrollArea-corner`    | Corner between horizontal and vertical scrollbars |\n\n\n\n#### ScrollArea CSS variables\n\n| Selector | Variable                     | Description    |\n|----------|------------------------------|----------------|\n| root     | `--scrollarea-scrollbar-size`   | Scrollbar size |\n\n\n#### ScrollArea data attributes\n\n| Selector         | Attribute          | Condition                          | Value                               |\n|------------------|--------------------|------------------------------------|-------------------------------------|\n| scrollbar, corner| `data-hidden`         | `type=\"never\"`                     | –                                   |\n| corner           | `data-hovered`        | One of the scrollbars is hovered   | –                                   |\n| scrollbar        | `data-orientation`    | –                                  | \"horizontal\" or \"vertical\" depending on scrollbar position |\n\n\n\n\n\n### Keyword Arguments\n#### ScrollArea\n\n- children (a list of or a singular dash component, string or number; optional):\n    Content.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- offsetScrollbars (boolean; optional):\n    Determines whether scrollbars should be offset with padding on\n    given axis, `False` by default.\n\n- overscrollBehavior (optional):\n    Defines `overscroll-behavior` of the viewport.\n    https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior.\n\n- scrollHideDelay (number; optional):\n    Scroll hide delay in ms, applicable only when type is set to\n    `hover` or `scroll`, `1000` by default.\n\n- scrollTo (dict; optional):\n    Scroll to a position in the scroll area.\n\n    `scrollTo` is a dict with keys:\n\n- scrollbarSize (string | number; optional):\n    Scrollbar size, any valid CSS value for width/height, numbers are\n    converted to rem, default value is 0.75rem.\n\n- scrollbars (boolean; optional):\n    Axis at which scrollbars must be rendered, `'xy'` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- type (a value equal to: 'auto', 'always', 'scroll', 'hover', 'never'; optional):\n    Defines scrollbars behavior, `hover` by default - `hover` –\n    scrollbars are visible when mouse is over the scroll area -\n    `scroll` – scrollbars are visible when the scroll area is scrolled\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`."
  },
  {
    "name": "VisuallyHidden",
    "description": "Hide element visually but keep it accessible for screen readers",
    "endpoint": "/components/visually-hidden",
    "package": "dash_mantine_components",
    "category": "Miscellaneous",
    "content": "\n\n## VisuallyHidden  \nHide element visually but keep it accessible for screen readers  \nCategory: Miscellaneous  \n\n### Usage\n\n\n`VisuallyHidden` is a utility component that hides content visually but leaves it available to screen readers.\n\nThis example uses it with the `ActionIcon` component:\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\n\ncomponent = dmc.ActionIcon([\n    DashIconify(icon=\"mdi:heart-outline\"),\n    dmc.VisuallyHidden(\"Like post\")\n], variant=\"outline\")\n```\n### Keyword Arguments\n\n\n#### VisuallyHidden\n\n- children (a list of or a singular dash component, string or number; optional):\n    Content.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`."
  },
  {
    "name": "Anchor",
    "description": "Use the Anchor component to add links with Mantine's theme styles.",
    "endpoint": "/components/anchor",
    "package": "dash_mantine_components",
    "category": "Navigation",
    "content": "\n\n## Anchor  \nUse the Anchor component to add links with Mantine's theme styles.  \nCategory: Navigation  \n\n### Simple Example\n\ndmc.Anchor is a wrapper around dmc.Text component and works similar to dcc.Link, so you can use it with multipage apps.\nIt takes the same props as dmc.Text.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Anchor(\n    \"Dash Mantine Components Announcement\",\n    href=\"https://community.plotly.com/t/dash-mantine-components/58414\",\n)\n```\n### Underline\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Group([\n    dmc.Anchor(\n        \"Underline always\",\n        href=\"https://www.dash-mantine-components.com/\",\n        target=\"_blank\",\n        underline = \"always\",\n    ),\n    dmc.Anchor(\n        \"Underline on hover\",\n        href=\"https://www.dash-mantine-components.com/\",\n        target=\"_blank\",\n        underline = \"hover\",\n    ),\n    dmc.Anchor(\n        \"Underline never\",\n        href=\"https://www.dash-mantine-components.com/\",\n        target=\"_blank\",\n        underline = \"never\",\n    ),\n    dmc.Anchor(\n        \"Underline not hover\",\n        href=\"https://www.dash-mantine-components.com/\",\n        target=\"_blank\",\n        underline = \"not-hover\",\n    ),\n\n])\n```\nYou can also configure underline prop for all Anchor components with default props:\n\n```python\ndmc.MantineProvider(    \n    theme={\n        \"components\": {\n            \"Anchor\": {\n                \"defaultProps\": {\n                    \"underline\": \"always\",\n                },\n            },\n        },\n    }\n)\n\n```\n\n### Text props\n\nText props\n`Anchor` components supports all `Text` component props. For example, you can use gradient variant:\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Anchor(\n    \"A link with pink to yellow gradient\",\n    href=\"#text-props\",\n    variant=\"gradient\",\n    gradient={\"from\": \"pink\", \"to\": \"yellow\"},\n    fw=500,\n    fz=\"lg\",\n)\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n#### Anchor selectors\n\n| Selector | Static selector | Description |\n|----------|----------------|-------------|\n| root     | .mantine-Anchor-root | Root element |\n\n#### Anchor CSS variables\n\n| Selector | Variable | Description |\n|----------|----------|-------------|\n| root     | --text-fz | Controls font-size property |\n| root     | --text-lh | Controls line-height property |\n| root     | --text-gradient | Text fill gradient |\n| root     | --text-line-clamp | Number of lines that should be visible |\n\n#### Anchor data attributes\n\n| Selector | Attribute | Condition | Value |\n|----------|-----------|-----------|-------|\n| root     | data-truncate | `truncate` prop is set | Value of `truncate` prop |\n| root     | data-line-clamp | `lineClamp` prop is a number | – |\n| root     | data-inline | `inline` prop is set | – |\n| root     | data-inherit | `inherit` prop is set | – |\n| root     | data-underline | – | Value of `underline` prop |\n\n\n### Keyword Arguments\n#### Anchor\n\n- children (a list of or a singular dash component, string or number; optional):\n    Content.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- anchorProps (dict; optional):\n    Props passed down to the `Anchor` component.\n\n    `anchorProps` is a dict with keys:\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- gradient (dict; optional):\n    Gradient configuration, ignored when `variant` is not `gradient`,\n    `theme.defaultGradient` by default.\n\n    `gradient` is a dict with keys:\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- href (string; required):\n    href.\n\n- inherit (boolean; optional):\n    Determines whether font properties should be inherited from the\n    parent, `False` by default.\n\n- inline (boolean; optional):\n    Sets `line-height` to 1 for centering, `False` by default.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- lineClamp (number; optional):\n    Number of lines after which Text will be truncated.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- refresh (boolean; optional):\n    Whether to refresh the page.\n\n- size (optional):\n    Controls `font-size` and `line-height`, `'md'` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- target (a value equal to: '_blank', '_self'; optional):\n    Target.\n\n- truncate (boolean; optional):\n    Side on which Text must be truncated, if `True`, text is truncated\n    from the start.\n\n- underline (a value equal to: 'always', 'hover', 'never'; optional):\n    Determines in which cases link should have `text-decoration:\n    underline` styles, `hover` by default.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`."
  },
  {
    "name": "Breadcrumbs",
    "description": "Breadcrumbs is a navigation component that is used to indicate current page's location within a navigational hierarchy.",
    "endpoint": "/components/breadcrumbs",
    "package": "dash_mantine_components",
    "category": "Navigation",
    "content": "\n\n## Breadcrumbs  \nBreadcrumbs is a navigation component that is used to indicate current page's location within a navigational hierarchy.  \nCategory: Navigation  \n\n### Simple Example\n\nBreadcrumbs accept any react nodes as children and places given separator (defaults to `/`) between them.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import dcc, html\n\ncomponent = html.Div(\n    [\n        # default separator\n        dmc.Breadcrumbs(\n            children=[\n                dcc.Link(\"Home\", href=\"/\"),\n                dcc.Link(\"Dash Mantine Components\", href=\"/\"),\n                dcc.Link(\"Breadcrumbs\", href=\"/components/breadcrumbs\"),\n            ],\n        ),\n        dmc.Space(h=20),\n        # separator provided\n        dmc.Breadcrumbs(\n            separator=\"→\",\n            children=[\n                dmc.Anchor(\"Home\", href=\"/\", underline=False),\n                dmc.Anchor(\"Dash Mantine Components\", href=\"/\", underline=False),\n                dmc.Anchor(\n                    \"Breadcrumbs\", href=\"/components/breadcrumbs\", underline=False\n                ),\n            ],\n        ),\n    ]\n)\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n| Name       | Static selector                 | Description                |\n|:-----------|:--------------------------------|:---------------------------|\n| root       | .mantine-Breadcrumbs-root       | Root element               |\n| breadcrumb | .mantine-Breadcrumbs-breadcrumb | Breadcrumb item wrapper    |\n| separator  | .mantine-Breadcrumbs-separator  | Separator between children |\n\n\n### Keyword Arguments\n#### Breadcrumbs\n\n- children (a list of or a singular dash component, string or number; required):\n    React nodes that should be separated with `separator`.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- separator (a list of or a singular dash component, string or number; optional):\n    Separator between children, `'/'` by default.\n\n- separatorMargin (string | number; optional):\n    Controls spacing between separator and breadcrumb, `'xs'` by\n    default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`."
  },
  {
    "name": "Burger",
    "description": "Open/close navigation button. Use the dmc.Burger component to toggle navigation menus.",
    "endpoint": "/components/burger",
    "package": "dash_mantine_components",
    "category": "Navigation",
    "content": "\n\n## Burger  \nOpen/close navigation button. Use the dmc.Burger component to toggle navigation menus.  \nCategory: Navigation  \n\n### Simple Example\n\nBurger component renders open/close menu button. If it's burger state is clicked, the `opened` property is set to `True`,\nand if it's cross state is clicked, the `opened` property is set to `False`.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import Input, Output, callback, html\n\ncomponent = html.Div(\n    [dmc.Burger(id=\"burger-button\", opened=False), dmc.Text(id=\"burger-state\", mt=\"md\")]\n)\n\n\n@callback(Output(\"burger-state\", \"children\"), Input(\"burger-button\", \"opened\"))\ndef is_open(opened):\n    return str(opened)\n```\n### Size and Line Size\n\nUse `size` prop to control the `Burger` width and height, numbers are converted to rem, 'md' by default.\nUse the `lineSize` prop to control height of lines, by default calculated based on `size` prop.  \n\n```python\ndmc.Burger(id=\"burger-button\", opened=False, lineSize=2, size=\"md\")\n```\n\n### Colors\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Group(\n    [\n        dmc.Burger(),\n        dmc.Burger(color=\"red\"),\n        dmc.Burger(color=\"green\"),\n    ]\n)\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n#### Burger Selectors\n\n| Selector | Static selector         | Description                           |\n|----------|--------------------------|---------------------------------------|\n| root     | .mantine-Burger-root     | Root element (button)                 |\n| burger   | .mantine-Burger-burger   | Inner element that contains burger lines |\n\n#### Burger CSS Variables\n\n| Selector | Variable                            | Description                                |\n|----------|-------------------------------------|--------------------------------------------|\n| root     | --burger-line-size                  | Controls height of lines                   |\n|          | --burger-color                      | Controls background-color of lines         |\n|          | --burger-size                       | Controls width and height of the button    |\n|          | --burger-transition-duration        | Controls transition-duration of lines      |\n|          | --burger-transition-timing-function | Controls transition-timing-function of lines |\n\n#### Burger Data Attributes\n\n| Selector | Attribute    | Condition          |\n|----------|--------------|--------------------|\n| burger   | data-opened  | `opened` prop is set |\n\n\n### Keyword Arguments\n#### Burger\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- color (optional):\n    Key of `theme.colors` of any valid CSS value, by default\n    `theme.white` in dark color scheme and `theme.black` in light.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- lineSize (number; optional):\n    Height of the burger lines.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- opened (boolean; default False):\n    State of the burger, when `True` burger is transformed into X,\n    `False` by default.\n\n- persisted_props (list of strings; optional):\n    Properties whose user interactions will persist after refreshing\n    the component or the page. Since only `value` is allowed this prop\n    can normally be ignored.\n\n- persistence (string | number | boolean; optional):\n    Used to allow user interactions in this component to be persisted\n    when the component - or the page - is refreshed. If `persisted` is\n    truthy and hasn't changed from its previous value, a `value` that\n    the user has changed while using the app will keep that change, as\n    long as the new `value` also matches what was given originally.\n    Used in conjunction with `persistence_type`. Note:  The component\n    must have an `id` for persistence to work.\n\n- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):\n    Where persisted user changes will be stored: memory: only kept in\n    memory, reset on page refresh. local: window.localStorage, data is\n    kept after the browser quit. session: window.sessionStorage, data\n    is cleared once the browser quit.\n\n- size (number; optional):\n    Controls burger `width` and `height`, numbers are converted to\n    rem, `'md'` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- transitionDuration (number; optional):\n    `transition-duration` property value in ms, `300` by default.\n\n- transitionTimingFunction (string; optional):\n    `transition-timing-function` property value, `'ease'` by default.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`."
  },
  {
    "name": "NavLink",
    "description": "A Navlink component.",
    "endpoint": "/components/navlink",
    "package": "dash_mantine_components",
    "category": "Navigation",
    "content": "\n\n## NavLink  \nA Navlink component.  \nCategory: Navigation  \n\n### Basic usage\n\nUse `NavLink`'s `n_clicks` property in callbacks, or you can set `href` to make it a link.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html\nfrom dash_iconify import DashIconify\n\n\ndef get_icon(icon):\n    return DashIconify(icon=icon, height=16)\n\n\ncomponent = html.Div(\n    [\n        dmc.NavLink(\n            label=\"With icon\",\n            leftSection=get_icon(icon=\"bi:house-door-fill\"),\n        ),\n        dmc.NavLink(\n            label=\"With right section\",\n            leftSection=get_icon(icon=\"tabler:gauge\"),\n            rightSection=get_icon(icon=\"tabler-chevron-right\"),\n        ),\n        dmc.NavLink(\n            label=\"Disabled\",\n            leftSection=get_icon(icon=\"tabler:circle-off\"),\n            disabled=True,\n        ),\n        dmc.NavLink(\n            label=\"With description\",\n            description=\"Additional information\",\n            leftSection=dmc.Badge(\n                \"3\", size=\"xs\", variant=\"filled\", color=\"red\", w=16, h=16, p=0\n            ),\n        ),\n        dmc.NavLink(\n            label=\"Active subtle\",\n            leftSection=get_icon(icon=\"tabler:activity\"),\n            rightSection=get_icon(icon=\"tabler-chevron-right\"),\n            variant=\"subtle\",\n            active=True,\n        ),\n        dmc.NavLink(\n            label=\"Active light\",\n            leftSection=get_icon(icon=\"tabler:activity\"),\n            rightSection=get_icon(icon=\"tabler-chevron-right\"),\n            active=True,\n        ),\n        dmc.NavLink(\n            label=\"Active filled\",\n            leftSection=get_icon(icon=\"tabler:activity\"),\n            rightSection=get_icon(icon=\"tabler-chevron-right\"),\n            variant=\"filled\",\n            active=True,\n        ),\n    ],\n    style={\"width\": 240},\n)\n```\n### Active styles\n\nSet `active` prop to add active styles to `NavLink`. You can customize active styles with `color` and `variant` properties.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ndmc.NavLink(\n    label=\"With right section\",\n    leftSection=DashIconify(icon=\"tabler:gauge\"),\n    active=True,\n    variant=\"filled\",\n    color=\"orange\",\n    id=\"navlink-interactive\",\n    rightSection=DashIconify(icon=\"tabler-chevron-right\"),\n),\n```\n\n### Setting Active prop based on URL\n\nThe `active` prop in `NavLink` controls whether a link is highlighted as active. It can be set manually (`True`/`False`)\nor automatically based on the current URL.  \n\n*New in dash-mantine-components > = 1.0.0*  \n\nNow, `active` can be set dynamically:  \n- `\"exact\"` → Active when the current pathname matches `href`.  \n- `\"partial\"` → Active when the current pathname starts with `href` (includes subpages).  \n\nExample:\n- User on `/page-1/subject-1` → The second and third links are active (since `\"partial\"` includes subpages).  \n- User on `/page-1` → Only the second link is active.  \n\n\n```python\nhtml.Div([\n    dmc.NavLink(label=\"Home\", href=\"/home\", active=\"exact\"),\n    dmc.NavLink(label=\"Page 1\", href=\"/page-1\", active=\"partial\"),\n    dmc.NavLink(label=\"Subject 1\", href=\"/page-1/subject-1\", active=\"exact\"),\n])\n```\nSee a complete example in Multi-Page App Example with Active Links section.  \n\n\n### Setting active prop in a callback\n\nUse a callback to set `active` prop if you are using dash-mantine-components<1.0.0\n\nThis example demonstrates how to use a callback to set the `active` prop of the `NavLink` when the user navigates to a different page. It uses the \"Dash Pages\" feature but can be adapted to any other page navigation system.\n\n```python\n# Create Navlinks (using dash.page_registry)\n[\n    dmc.NavLink(\n        label=f\"{page['name']}\",\n        href=page[\"relative_path\"],\n        id={\"type\": \"navlink\", \"index\": page[\"relative_path\"]},\n    )\n    for page in page_registry.values()\n]\n\n# ...\n\n# Callback (using the dcc.location provided by Dash Pages)\n@app.callback(Output({\"type\": \"navlink\", \"index\": ALL}, \"active\"), Input(\"_pages_location\", \"pathname\"))\ndef update_navlinks(pathname):\n    return [control[\"id\"][\"index\"] == pathname for control in callback_context.outputs_list]\n\n```\n\n### Nested NavLinks\n\nTo create nested links put dmc.NavLink as children of another dmc.NavLink.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html\nfrom dash_iconify import DashIconify\n\n\ndef get_icon(icon):\n    return DashIconify(icon=icon, height=16)\n\n\ncomponent = html.Div(\n    style={\"width\": 240},\n    children=[\n        dmc.NavLink(\n            label=\"First parent link\",\n            leftSection=get_icon(icon=\"tabler:gauge\"),\n            childrenOffset=28,\n            children=[\n                dmc.NavLink(label=\"First child link\"),\n                dmc.NavLink(label=\"Second child link\"),\n                dmc.NavLink(\n                    label=\"Nested parent link\",\n                    childrenOffset=28,\n                    children=[\n                        dmc.NavLink(label=\"First child link\"),\n                        dmc.NavLink(label=\"Second child link\"),\n                        dmc.NavLink(label=\"Third child link\"),\n                    ],\n                ),\n            ],\n        ),\n        dmc.NavLink(\n            label=\"Second parent link\",\n            leftSection=get_icon(icon=\"tabler:fingerprint\"),\n            childrenOffset=28,\n            opened=True,\n            children=[\n                dmc.NavLink(label=\"First child link\"),\n                dmc.NavLink(label=\"Second child link\"),\n                dmc.NavLink(label=\"Third child link\"),\n            ],\n        ),\n    ],\n)\n```\n### Multi-Page App Example with Active Links\nHere's a minimal multi-page app example using Pages. It demonstrates how `active=\"exact\"` and `active=\"partial\"`\nautomatically apply active styles based on the current URL\n\n```python\nimport dash\nimport dash_mantine_components as dmc\nfrom dash import Dash, html\n\napp = Dash(use_pages=True, pages_folder=\"\")\n\ndash.register_page(\"home\", path=\"/\", layout=html.Div(\"I'm home\"))\ndash.register_page(\"page1\", path=\"/page-1\", layout=html.Div(\"Info about page 1 subjects\"))\ndash.register_page(\"page1s1\", path=\"/page-1/sub-1\", layout=html.Div(\"page 1 subject 1\"))\ndash.register_page(\"page1s2\", path=\"/page-1/sub-2\", layout=html.Div(\"page 1 subject 2\"))\n\ncomponent = dmc.Box([\n    dmc.NavLink(label=\"home\", href=\"/\", active='exact'),\n    dmc.NavLink(\n            label=\"Page 1\",\n            childrenOffset=28,\n            href=\"/page-1\",\n            active='partial',\n            children=[\n                dmc.NavLink(label=\"Subject 1\", href=\"/page-1/sub-1\", active=\"exact\"),\n                dmc.NavLink(label=\"Subject 2\", href=\"/page-1/sub-2\", active=\"exact\"),\n            ],\n    ),\n    dmc.Divider(mb=\"lg\"),\n    dash.page_container\n])\n\n\napp.layout = dmc.MantineProvider([component])\n\nif __name__ == \"__main__\":\n    app.run(debug=True)\n\n```\n\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n| Name        | Static selector              | Description                                  |\n|:------------|:-----------------------------|:---------------------------------------------|\n| root        | .mantine-NavLink-root        | Root element                                 |\n| body        | .mantine-NavLink-body        | Contains label and description               |\n| section     | .mantine-NavLink-section     | Left and right sections                      |\n| label       | .mantine-NavLink-label       | NavLink label                                |\n| description | .mantine-NavLink-description | Dimmed description displayed below the label |\n| children    | .mantine-NavLink-children    | Wrapper around nested links                  |\n| chevron     | .mantine-NavLink-chevron     | Default chevron icon                         |\n| collapse    | .mantine-NavLink-collapse    | Nested links Collapse container              |\n\n\n### Keyword Arguments\n#### NavLink\n\n- children (a list of or a singular dash component, string or number; optional):\n    Child `NavLink` components.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- active (boolean; default False):\n    Controls whether the link is styled as active (default: `False`).\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- autoContrast (boolean; optional):\n    Determines whether button text color with filled variant should\n    depend on `background-color`. If luminosity of the `color` prop is\n    less than `theme.luminosityThreshold`, then `theme.white` will be\n    used for text color, otherwise `theme.black`. Overrides\n    `theme.autoContrast`.\n\n- childrenOffset (number; optional):\n    Key of `theme.spacing` or any valid CSS value to set collapsed\n    links `padding-left`, `'lg'` by default.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- color (optional):\n    Key of `theme.colors` of any valid CSS color to control active\n    styles, `theme.primaryColor` by default.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- description (a list of or a singular dash component, string or number; optional):\n    Link description, displayed below the label.\n\n- disableRightSectionRotation (boolean; optional):\n    If set, right section will not be rotated when collapse is opened,\n    `False` by default.\n\n- disabled (boolean; optional):\n    If set, disabled styles will be added to the root element, `False`\n    by default.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- href (string; optional):\n    href.\n\n- label (a list of or a singular dash component, string or number; optional):\n    Main link label.\n\n- leftSection (a list of or a singular dash component, string or number; optional):\n    Section displayed on the left side of the label.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- n_clicks (number; default 0):\n    An integer that represents the number of times that this element\n    has been clicked on.\n\n- noWrap (boolean; optional):\n    If set, label and description will not wrap to the next line,\n    `False` by default.\n\n- opened (boolean; default False):\n    Controlled nested items collapse state.\n\n- persisted_props (list of strings; optional):\n    Properties whose user interactions will persist after refreshing\n    the component or the page. Since only `value` is allowed this prop\n    can normally be ignored.\n\n- persistence (string | number | boolean; optional):\n    Used to allow user interactions in this component to be persisted\n    when the component - or the page - is refreshed. If `persisted` is\n    truthy and hasn't changed from its previous value, a `value` that\n    the user has changed while using the app will keep that change, as\n    long as the new `value` also matches what was given originally.\n    Used in conjunction with `persistence_type`. Note:  The component\n    must have an `id` for persistence to work.\n\n- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):\n    Where persisted user changes will be stored: memory: only kept in\n    memory, reset on page refresh. local: window.localStorage, data is\n    kept after the browser quit. session: window.sessionStorage, data\n    is cleared once the browser quit.\n\n- refresh (boolean; optional):\n    Whether to refresh the page.\n\n- rightSection (a list of or a singular dash component, string or number; optional):\n    Section displayed on the right side of the label.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- target (a value equal to: '_blank', '_self'; optional):\n    Target.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`."
  },
  {
    "name": "Pagination",
    "description": "Display active page and navigate between multiple pages",
    "endpoint": "/components/pagination",
    "package": "dash_mantine_components",
    "category": "Navigation",
    "content": "\n\n## Pagination  \nDisplay active page and navigate between multiple pages  \nCategory: Navigation  \n\n### Introduction\n\n### Siblings\n\nControl the number of active item siblings with `siblings` prop.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Stack(\n    [\n        dmc.Pagination(total=20, siblings=1, value=10),\n        dmc.Pagination(total=20, siblings=2, value=10, my=15),\n        dmc.Pagination(total=20, siblings=3, value=10),\n    ]\n)\n```\n### Boundaries\n\nControl the number of items displayed after previous(<) and before next(>) buttons with `boundaries` prop.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Stack(\n    [\n        dmc.Pagination(total=20, boundaries=1, value=10),\n        dmc.Pagination(total=20, boundaries=2, value=10, my=15),\n        dmc.Pagination(total=20, boundaries=3, value=10),\n    ]\n)\n```\n### Hide pages controls\nSet `withPages=False` to hide pages controls:\n\n\n```python\nfrom dash import  html, Output, Input, callback\nimport dash_mantine_components as dmc\n\n\nlimit = 10\ntotal = 145\ntotal_pages = (total + limit - 1) // limit\n\ncomponent = dmc.Group(\n    justify=\"flex-end\",\n    children=[\n        dmc.Text(id=\"message-withPages\", size=\"sm\"),\n        dmc.Pagination(id=\"pagination-withPages\", total=total_pages, value=1, withPages=False),\n    ],\n)\n\n\n@callback(\n    Output(\"message-withPages\", \"children\"),\n    Input(\"pagination-withPages\", \"value\"),\n)\ndef update_message(page):\n    start = limit * (page - 1) + 1\n    end = min(total, limit * page)\n    return f\"Showing {start} – {end} of {total}\"\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n| Name    | Static selector             | Description                                               |\n|:--------|:----------------------------|:----------------------------------------------------------|\n| root    | .mantine-Pagination-root    | Root element                                              |\n| control | .mantine-Pagination-control | Control element: items, next/previous, first/last buttons |\n| dots    | .mantine-Pagination-dots    | Dots icon wrapper                                         |\n\n\n### Keyword Arguments\n#### Pagination\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- autoContrast (boolean; optional):\n    Determines whether active item text color should depend on\n    `background-color` of the indicator. If luminosity of the `color`\n    prop is less than `theme.luminosityThreshold`, then `theme.white`\n    will be used for text color, otherwise `theme.black`. Overrides\n    `theme.autoContrast`.\n\n- boundaries (number; optional):\n    Number of elements visible on the left/right edges, `1` by\n    default.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- color (optional):\n    Key of `theme.colors`, active item color, `theme.primaryColor` by\n    default.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- disabled (boolean; optional):\n    Determines whether all controls should be disabled, `False` by\n    default.\n\n- gap (string | number; optional):\n    Key of `theme.spacing`, gap between controls, `8` by default.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- hideWithOnePage (boolean; optional):\n    Determines whether the pagination should be hidden when only one\n    page is available (total=1), False by default.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- persisted_props (list of strings; optional):\n    Properties whose user interactions will persist after refreshing\n    the component or the page. Since only `value` is allowed this prop\n    can normally be ignored.\n\n- persistence (string | number | boolean; optional):\n    Used to allow user interactions in this component to be persisted\n    when the component - or the page - is refreshed. If `persisted` is\n    truthy and hasn't changed from its previous value, a `value` that\n    the user has changed while using the app will keep that change, as\n    long as the new `value` also matches what was given originally.\n    Used in conjunction with `persistence_type`. Note:  The component\n    must have an `id` for persistence to work.\n\n- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):\n    Where persisted user changes will be stored: memory: only kept in\n    memory, reset on page refresh. local: window.localStorage, data is\n    kept after the browser quit. session: window.sessionStorage, data\n    is cleared once the browser quit.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set\n    `border-radius`, numbers are converted to rem,\n    `theme.defaultRadius` by default.\n\n- siblings (number; optional):\n    Number of siblings displayed on the left/right side of the\n    selected page, `1` by default.\n\n- size (number; optional):\n    `height` and `min-width` of controls, `'md'` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- total (number; required):\n    Total number of pages, must be an integer.\n\n- value (number; optional):\n    Active page for controlled component, must be an integer in [0,\n    total] interval.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withControls (boolean; optional):\n    Determines whether next/previous controls should be rendered, True\n    by default.\n\n- withEdges (boolean; optional):\n    Determines whether first/last controls should be rendered, False\n    by default.\n\n- withPages (boolean; optional):\n    Determines whether pages controls should be displayed, `True` by\n    default."
  },
  {
    "name": "Stepper",
    "description": "Use the Stepper, StepperStep and StepperCompleted components to display content divided into a steps sequence",
    "endpoint": "/components/stepper",
    "package": "dash_mantine_components",
    "category": "Navigation",
    "content": "\n\n## Stepper  \nUse the Stepper, StepperStep and StepperCompleted components to display content divided into a steps sequence  \nCategory: Navigation  \n\n### Basic usage\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html, Output, Input, State, ctx, callback\n\nmin_step = 0\nmax_step = 3\nactive = 1\n\ncomponent = html.Div(\n    [\n        dmc.Stepper(\n            id=\"stepper-basic-usage\",\n            active=active,\n            children=[\n                dmc.StepperStep(\n                    label=\"First step\",\n                    description=\"Create an account\",\n                    children=dmc.Text(\"Step 1 content: Create an account\", ta=\"center\"),\n                ),\n                dmc.StepperStep(\n                    label=\"Second step\",\n                    description=\"Verify email\",\n                    children=dmc.Text(\"Step 2 content: Verify email\", ta=\"center\"),\n                ),\n                dmc.StepperStep(\n                    label=\"Final step\",\n                    description=\"Get full access\",\n                    children=dmc.Text(\"Step 3 content: Get full access\", ta=\"center\"),\n                ),\n                dmc.StepperCompleted(\n                    children=dmc.Text(\n                        \"Completed, click back button to get to previous step\",\n                        ta=\"center\",\n                    )\n                ),\n            ],\n        ),\n        dmc.Group(\n            justify=\"center\",\n            mt=\"xl\",\n            children=[\n                dmc.Button(\"Back\", id=\"back-basic-usage\", variant=\"default\"),\n                dmc.Button(\"Next step\", id=\"next-basic-usage\"),\n            ],\n        ),\n    ]\n)\n\n\n@callback(\n    Output(\"stepper-basic-usage\", \"active\"),\n    Input(\"back-basic-usage\", \"n_clicks\"),\n    Input(\"next-basic-usage\", \"n_clicks\"),\n    State(\"stepper-basic-usage\", \"active\"),\n    prevent_initial_call=True,\n)\ndef update(back, next_, current):\n    button_id = ctx.triggered_id\n    step = current if current is not None else active\n    if button_id == \"back-basic-usage\":\n        step = step - 1 if step > min_step else step\n    else:\n        step = step + 1 if step < max_step else step\n    return step\n```\n### Color, radius and size\n\nYou can use any color from Mantine's theme colors. Colors can also be set on individual steps.\n\n```python\nimport dash_mantine_components as dmc\n\ndmc.Stepper(\n    active=1,\n    color=\"green\",\n    radius=\"lg\",\n    size=\"sm\", \n    children=[\n        dmc.StepperStep(label=\"First step\", description=\"Create an account\"),\n        dmc.StepperStep(label=\"Second step\", description=\"Verify email\"),\n    ],\n)\n```\n\nComponent size is controlled by two props: `size` and `iconSize`. `size` prop controls icon size, label and description font size.\n`iconSize` allows to overwrite icon size separately from other size values.\n\n```python\nimport dash_mantine_components as dmc\n\ndmc.Stepper(\n    active=1,\n    iconSize=42,\n    children=[\n        dmc.StepperStep(label=\"First step\", description=\"Create an account\"),\n        dmc.StepperStep(label=\"Second step\", description=\"Verify email\"),\n    ],\n)\n```\n\n### Loading state\n\nTo indicate loading state set `loading` prop on `Step` component, `Loader` will replace step icon.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html\n\ncomponent = html.Div(\n    [\n        dmc.Stepper(\n            active=1,\n            children=[\n                dmc.StepperStep(\n                    label=\"First step\",\n                    description=\"Create an account\",\n                    children=dmc.Text(\"Step 1 content: Create an account\", ta=\"center\"),\n                ),\n                dmc.StepperStep(\n                    label=\"Second step\",\n                    description=\"Verify email\",\n                    children=dmc.Text(\"Step 2 content: Verify email\", ta=\"center\"),\n                    loading=True,\n                ),\n                dmc.StepperStep(\n                    label=\"Final step\",\n                    description=\"Get full access\",\n                    children=dmc.Text(\"Step 3 content: Get full access\", ta=\"center\"),\n                ),\n            ],\n        ),\n    ]\n)\n```\n### Custom icons\n\nYou can replace step icon by setting `icon` prop on Step component. To change completed check icon set `completedIcon` on Stepper component.\nYou can also change completed icon for each step, for example, to indicate error state.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import callback, Output, Input, State, ctx\nfrom dash_iconify import DashIconify\n\nmin_step = 0\nmax_step = 3\nactive = 1\n\n\ndef get_icon(icon):\n    return DashIconify(icon=icon, height=20)\n\n\ncomponent = dmc.Container(\n    [\n        dmc.Stepper(\n            id=\"stepper-custom-icons\",\n            active=active,\n            children=[\n                dmc.StepperStep(\n                    label=\"First step\",\n                    description=\"Create an account\",\n                    icon=get_icon(icon=\"material-symbols:account-circle\"),\n                    progressIcon=get_icon(icon=\"material-symbols:account-circle\"),\n                    completedIcon=get_icon(icon=\"mdi:account-check\"),\n                    children=[\n                        dmc.Text(\"Step 1 content: Create an account\", ta=\"center\")\n                    ],\n                ),\n                dmc.StepperStep(\n                    label=\"Second step\",\n                    description=\"Verify email\",\n                    icon=get_icon(icon=\"ic:outline-email\"),\n                    progressIcon=get_icon(icon=\"ic:outline-email\"),\n                    completedIcon=get_icon(\n                        icon=\"material-symbols:mark-email-read-rounded\"\n                    ),\n                    children=[dmc.Text(\"Step 2 content: Verify email\", ta=\"center\")],\n                ),\n                dmc.StepperStep(\n                    label=\"Final step\",\n                    description=\"Get full access\",\n                    icon=get_icon(icon=\"material-symbols:lock-outline\"),\n                    progressIcon=get_icon(icon=\"material-symbols:lock-outline\"),\n                    completedIcon=get_icon(icon=\"material-symbols:lock-open-outline\"),\n                    children=[dmc.Text(\"Step 3 content: Get full access\", ta=\"center\")],\n                ),\n                dmc.StepperCompleted(\n                    children=[\n                        dmc.Text(\n                            \"Completed, click back button to get to previous step\",\n                            ta=\"center\",\n                        )\n                    ]\n                ),\n            ],\n        ),\n        dmc.Group(\n            justify=\"center\",\n            mt=\"xl\",\n            children=[\n                dmc.Button(\"Back\", id=\"back-custom-icons\", variant=\"default\"),\n                dmc.Button(\"Next step\", id=\"next-custom-icons\"),\n            ],\n        ),\n    ]\n)\n\n\n@callback(\n    Output(\"stepper-custom-icons\", \"active\"),\n    Input(\"back-custom-icons\", \"n_clicks\"),\n    Input(\"next-custom-icons\", \"n_clicks\"),\n    State(\"stepper-custom-icons\", \"active\"),\n    prevent_initial_call=True,\n)\ndef update_with_icons(back, next_, current):\n    button_id = ctx.triggered_id\n    step = current if current is not None else active\n    if button_id == \"back-custom-icons\":\n        step = step - 1 if step > min_step else step\n    else:\n        step = step + 1 if step < max_step else step\n    return step\n```\n### Vertical orientation\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Stepper(\n    active=1,\n    orientation=\"vertical\",\n    children=[\n        dmc.StepperStep(label=\"First step\", description=\"Create an account\"),\n        dmc.StepperStep(label=\"Second step\", description=\"Verify email\"),\n        dmc.StepperStep(label=\"Final step\", description=\"Get full access\"),\n    ],\n)\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n| Name                    | Static selector                          | Description                                   |\n|:------------------------|:-----------------------------------------|:----------------------------------------------|\n| root                    | .mantine-Stepper-root                    | Root element                                  |\n| steps                   | .mantine-Stepper-steps                   | Steps controls wrapper                        |\n| separator               | .mantine-Stepper-separator               | Separator line between step controls          |\n| verticalSeparator       | .mantine-Stepper-verticalSeparator       | Vertical separator line between step controls |\n| separatorActive         | .mantine-Stepper-separatorActive         | Separator active modifier                     |\n| verticalSeparatorActive | .mantine-Stepper-verticalSeparatorActive | Vertical separator active modifier            |\n| content                 | .mantine-Stepper-content                 | Current step content wrapper                  |\n| stepWrapper             | .mantine-Stepper-stepWrapper             | Wrapper for the step icon and separator       |\n| step                    | .mantine-Stepper-step                    | Step control button                           |\n| stepIcon                | .mantine-Stepper-stepIcon                | Step icon wrapper                             |\n| stepCompletedIcon       | .mantine-Stepper-stepCompletedIcon       | Completed step icon, rendered within stepIcon |\n| stepBody                | .mantine-Stepper-stepBody                | Contains stepLabel and stepDescription        |\n| stepLabel               | .mantine-Stepper-stepLabel               | Step label                                    |\n| stepDescription         | .mantine-Stepper-stepDescription         | Step description                              |\n| stepLoader              | .mantine-Stepper-stepLoader              | Step loader                                   |\n\n\n### Keyword Arguments\n#### Stepper\n\n- children (a list of or a singular dash component, string or number; optional)\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- active (number; required):\n    Index of the active step.\n\n- allowNextStepsSelect (boolean; optional):\n    Determines whether next steps can be selected, `True` by default\n    *.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- autoContrast (boolean; optional):\n    Determines whether icon color with filled variant should depend on\n    `background-color`. If luminosity of the `color` prop is less than\n    `theme.luminosityThreshold`, then `theme.white` will be used for\n    text color, otherwise `theme.black`. Overrides\n    `theme.autoContrast`.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- color (optional):\n    Key of `theme.colors` or any valid CSS color, controls colors of\n    active and progress steps, `theme.primaryColor` by default.\n\n- completedIcon (a list of or a singular dash component, string or number; optional):\n    Step icon displayed when step is completed, check icon by default.\n\n- contentPadding (number; optional):\n    Key of `theme.spacing` or any valid CSS value to set `padding-top`\n    of the content.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- icon (a list of or a singular dash component, string or number; optional):\n    Step icon, default value is step index + 1.\n\n- iconPosition (a value equal to: 'left', 'right'; optional):\n    Icon position relative to the step body, `'left'` by default.\n\n- iconSize (string | number; optional):\n    Controls size of the step icon, by default icon size is inferred\n    from `size` prop.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- orientation (a value equal to: 'vertical', 'horizontal'; optional):\n    Stepper orientation, `'horizontal'` by default.\n\n- progressIcon (a list of or a singular dash component, string or number; optional):\n    Step icon displayed when step is in progress, default value is\n    step index + 1.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set steps\n    border-radius, `\"xl\"` by default.\n\n- size (a value equal to: 'xs', 'sm', 'md', 'lg', 'xl'; optional):\n    Controls size of various Stepper elements.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- wrap (boolean; optional):\n    Determines whether steps should wrap to the next line if no space\n    is available, `True` by default.\n#### StepperStep\n\n- children (a list of or a singular dash component, string or number; optional)\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- allowStepClick (boolean; optional):\n    Set to False to disable clicks on step.\n\n- allowStepSelect (boolean; optional):\n    Should step selection be allowed.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- color (optional):\n    Key of `theme.colors`, by default controlled by Stepper component.\n\n- completedIcon (a list of or a singular dash component, string or number; optional):\n    Step icon displayed when step is completed.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- description (a list of or a singular dash component, string or number; optional):\n    Step description.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- icon (a list of or a singular dash component, string or number; optional):\n    Step icon, defaults to step index + 1 when rendered within\n    Stepper.\n\n- iconPosition (a value equal to: 'left', 'right'; optional):\n    Icon position relative to step body, controlled by Stepper\n    component.\n\n- iconSize (number; optional):\n    Icon wrapper size.\n\n- label (a list of or a singular dash component, string or number; optional):\n    Step label, render after icon.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading (boolean; optional):\n    Indicates loading state of the step.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- orientation (a value equal to: 'vertical', 'horizontal'; optional):\n    Component orientation.\n\n- progressIcon (a list of or a singular dash component, string or number; optional):\n    Step icon displayed when step is in progress.\n\n- state (a value equal to: 'stepInactive', 'stepProgress', 'stepCompleted'; optional):\n    Step state, controlled by Stepper component.\n\n- step (number; optional):\n    Step index, controlled by Stepper component *.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withIcon (boolean; optional):\n    Determines whether the icon should be displayed.\n#### StepperCompleted\n\n- children (a list of or a singular dash component, string or number; optional)"
  },
  {
    "name": "TableOfContents",
    "description": "Renders a list of headings on the page and tracks current heading visible in the viewport",
    "endpoint": "/components/table-of-contents",
    "package": "dash_mantine_components",
    "category": "Navigation",
    "content": "\n\n## TableOfContents  \nRenders a list of headings on the page and tracks current heading visible in the viewport  \nCategory: Navigation  \n\n### Usage\n\nUse the `TableOfContents` component to display a table of contents similar to the sidebar in these docs. The\ncomponent tracks scroll position and highlights current heading in the list.\n\nYou can set the style of the `TableOfContents` items (controls) with the `variant`, `color`, `size` and `radius` props:\n\n### Selector\n\n`TableOfContents` is based on Mantine’s [`use-scroll-spy`](https://mantine.dev/hooks/use-scroll-spy/) hook. The `selector`\nprop is passed directly to this hook.\n\nThe `selector` prop is a CSS selector string used to locate and observe heading elements in the DOM.\nThe default value is `'h1, h2, h3, h4, h5, h6'`.\n\n```python\ndmc.TableOfContents(\n    selector=\"h1, h2, h3, h4, h5, h6\",  # default\n)\n```\n\nThe selector can be scoped to a container and may use any valid CSS selector syntax, including `:is()`, class selectors, or IDs.\n\nFor example, the following selector matches `h2`, `h3`, and `h4` elements in the `AppShellMain` component, which has the class name `mantine-AppShell-main`:\n\n```python\ndmc.TableOfContents(\n    selector=\".mantine-AppShell-main :is(h2, h3, h4)\"\n)\n```\n\n### Controls\n\nThe `TableOfContents` items (controls) are rendered as HTML `<a>` elements.\nEach control’s `href` attribute is the id of a heading element, and its `children` are set to the heading\nelement’s `textContent`.\n\nThe active control (the currently visible heading) includes a `data-active=\"true\"` attribute, which can be used for styling or testing.\n\n### Depth offset\n\nUse the `minDepthToOffset` prop to control the minimum heading depth at which indentation is applied. By \ndefault, `minDepthToOffset` is 1, which means that first and second level headings will not be offset. Set it to 0 to\napply offset to all headings.\n\nTo control offset value in px, set `depthOffset` prop:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.TableOfContents(\n    selector=\".mantine-AppShell-main :is( h2, h3, h4)\",\n    variant=\"filled\",\n    color=\"blue\",\n    size=\"sm\",\n    radius=\"sm\",\n    minDepthToOffset=0,\n    depthOffset=40,\n    w=300\n)\n```\n### autoContrast  \n\n`TableOfContents` supports autoContrast prop and `theme.autoContrast`. If `autoContrast` is set either on `TableOfContents`\nor on `theme`, content color will be adjusted to have sufficient contrast with the value specified in color prop.\n\nNote that `autoContrast` feature works only if you use `color` prop to change background color. `autoContrast` works only with filled variant.\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.TableOfContents(\n    selector=\".mantine-AppShell-main :is( h2, h3, h4)\",\n    variant=\"filled\",\n    color=\"yellow.3\",\n    autoContrast=True,\n    size=\"sm\",\n    radius=\"sm\",\n    w=300\n)\n```\n### Reinitialize\n\nBy default, heading changes are not tracked automatically. If the content updates in a callback (for example, when switching\ntabs) you can trigger a refresh of the `TableOfContents` by setting `reinitialize=True` in a callback.\n\n\n```python\nfrom dash import Dash, html\nfrom dash import Input, Output, callback\nimport dash_mantine_components as dmc\n\napp = Dash()\n\n\ndef make_section(i, name):\n    return dmc.Box(\n        [\n            dmc.Title(children=f\"{name} {i}\", id=f\"section-{i}\", order=3),\n            dmc.Space(h=200),\n        ],\n        p=\"lg\",\n    )\n\n\napp.layout = dmc.MantineProvider(\n    dmc.AppShell(\n        dmc.AppShellMain(\n            [\n                dmc.Tabs(\n                    [\n                        dmc.TabsList(\n                            [\n                                dmc.TabsTab(\"Tab one\", value=\"1\"),\n                                dmc.TabsTab(\"Tab two\", value=\"2\"),\n                            ]\n                        ),\n                    ],\n                    value=\"1\",\n                    id=\"tabs\",\n                ),\n                dmc.Box(id=\"tabs-content\"),\n                dmc.AppShellAside(\n                    [\n                        dmc.Title(\"Table of Contents\", order=4, mt=60),\n                        dmc.ScrollArea(\n                            dmc.TableOfContents(\n                                selector=\"#tabs-content :is( h2, h3, h4)\", id=\"toc\"\n                            )\n                        ),\n                    ]\n                ),\n            ],\n            p=\"md\",\n        )\n    )\n)\n\n\n@callback(\n    Output(\"tabs-content\", \"children\"),\n    Output(\"toc\", \"reinitialize\"),\n    Input(\"tabs\", \"value\"),\n)\ndef render_content(active):\n    if active == \"1\":\n        return html.Div([make_section(i, \"Section\") for i in range(30)]), True\n    return html.Div([make_section(i, \"Topic\") for i in range(30)]), True\n\n\nif __name__ == \"__main__\":\n    app.run(debug=True)\n```\n    \n\n### target_id\n\nWith Dash 3+, you do not need to set `reinitialize` in a callback. Instead, set `target_id` to the `id` of a component\nthat is updated by callbacks, and the `TableOfContents` will refresh automatically when that update completes.\n\nUsing the example above, the callback can be simplified. No `reinitialize` output is required when `target_id` is set:\n\n\n```python\nfrom dash import Dash, html\nfrom dash import Input, Output, callback\nimport dash_mantine_components as dmc\n\napp = Dash()\n\n\ndef make_section(i, name):\n    return dmc.Box(\n        [\n            dmc.Title(children=f\"{name} {i}\", id=f\"section-{i}\", order=3),\n            dmc.Space(h=200),\n        ],\n        p=\"lg\",\n    )\n\n\napp.layout = dmc.MantineProvider(\n    dmc.AppShell(\n        dmc.AppShellMain(\n            [\n                dmc.Tabs(\n                    [\n                        dmc.TabsList(\n                            [\n                                dmc.TabsTab(\"Tab one\", value=\"1\"),\n                                dmc.TabsTab(\"Tab two\", value=\"2\"),\n                            ]\n                        ),\n                    ],\n                    value=\"1\",\n                    id=\"tabs\",\n                ),\n                dmc.Box(id=\"tabs-content\"),\n                dmc.AppShellAside(\n                    [\n                        dmc.Title(\"Table of Contents\", order=4, mt=60),\n                        dmc.ScrollArea(\n                            dmc.TableOfContents(\n                                target_id=\"tabs-content\",\n                                selector=\"#tabs-content :is( h2, h3, h4)\",\n                            )\n                        ),\n                    ]\n                ),\n            ],\n            p=\"md\",\n        )\n    )\n)\n\n\n@callback(\n    Output(\"tabs-content\", \"children\"),\n    Input(\"tabs\", \"value\"),\n)\ndef render_content(active):\n    if active == \"1\":\n        return html.Div([make_section(i, \"Section\") for i in range(30)])\n    return html.Div([make_section(i, \"Topic\") for i in range(30)])\n\n\nif __name__ == \"__main__\":\n    app.run(debug=True)\n```\n\nWhen using Dash Pages, `target_id` defaults to the page container id, so the table of contents is automatically\nrefreshed on each page change without any additional configuration.\n\n### Dash version support\n\n* Dash 3+: `target_id` is supported and replaces the `reinitialize` callback pattern.\n* Dash 2: Use the `reinitialize` prop in a callback as shown above.\n\n### scrollIntoViewOptions\n\n`scrollIntoViewOptions` prop controls how the page scrolls when a heading is clicked in the `TableOfContents`.\n\nThis prop is passed directly to the browser’s [`Element.scrollIntoView`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView)\nAPI and lets you customize the scrolling behavior and alignment of the target heading.\n\nFor example, you can enable smooth scrolling or control where the heading appears in the viewport:\n\n```python\ndmc.TableOfContents(\n    scrollIntoViewOptions={\n        \"behavior\": \"smooth\",\n        \"block\": \"start\",\n    }\n)\n```\n\n### Apps with fixed headers\n\n\nThis example shows how to handle scrolling when the app has a fixed header, such as when using `AppShellHeader`\n\n - The `scrollMarginTop` CSS property is applied to headings so that when a `TableOfContents` item is clicked, the heading is not hidden behind the header.\n - The `offset` prop is passed to the `useScrollSpy` hook to track the correct heading when the app has a fixed header.\n   Set it to the header height so the active item in the `TableOfContents` updates properly when scrolling.\n  \n\n```python\n\nimport dash\nfrom dash import Dash, html\nimport dash_mantine_components as dmc\n\n\napp = Dash(use_pages=True, pages_folder=\"\")\n\n\nlogo = \"https://github.com/user-attachments/assets/c1ff143b-4365-4fd1-880f-3e97aab5c302\"\n\n\ndef make_section(i, page):\n    return dmc.Box(\n        [\n            dmc.Title(\n                children=f\"{page} Title {i}\",\n                id=str(i),\n                order=3,\n                mb=30,\n                style={\"scrollMarginTop\": \"60px\"},\n            ),\n        ],\n        p=\"lg\",\n    )\n\n\nheader = dmc.AppShellHeader(\n    dmc.Group(\n        [\n            dmc.Image(src=logo, h=40, flex=0),\n            dmc.Title(\"Demo App\", c=\"blue\"),\n        ],\n        h=\"100%\",\n        px=\"md\",\n    )\n)\n\naside = dmc.AppShellAside(\n    children=dmc.ScrollArea(\n        dmc.Stack(\n            [\n                dmc.Title(\"Table of contents\", order=5, mt=50),\n                dmc.TableOfContents(\n                    variant=\"filled\",\n                    color=\"blue\",\n                    size=\"sm\",\n                    radius=\"sm\",\n                    selector=\"#appshellmain :is( h2, h3, h4, h5, h6)\",\n                    offset=60,\n                    id=\"toc\",\n                ),\n            ]\n        ),\n        type=\"never\",\n    ),\n    px=\"lg\",\n)\n\ndash.register_page(\n    \"home\",\n    path=\"/\",\n    layout=html.Div([make_section(i, \"home\") for i in range(30)]),\n)\ndash.register_page(\n    \"page1\",\n    path=\"/page-1\",\n    layout=html.Div([make_section(i, \"page1\") for i in range(30)]),\n)\n\napp.layout = dmc.MantineProvider(\n    children=dmc.AppShell(\n        [\n            header,\n            dmc.AppShellNavbar(\n                [\n                    dmc.Title(\"Page Links\", order=5),\n                    dmc.NavLink(label=\"Home\", href=\"/\", id=\"home\"),\n                    dmc.NavLink(label=\"Page 1\", href=\"/page-1\", id=\"page-1\"),\n                ],\n                p=\"md\",\n            ),\n            dmc.AppShellMain(html.Div(dash.page_container, id=\"appshellmain\")),\n            aside,\n        ],\n        navbar={\"width\": 200},\n        header={\"height\": 60},\n    ),\n)\n\n\nif __name__ == \"__main__\":\n    app.run(debug=True)\n```\n\n\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n\n#### TableOfContents selectors\n\n| Selector | Static selector                    | Description     |\n| -------- | ---------------------------------- | --------------- |\n| root     | `.mantine-TableOfContents-root`    | Root element    |\n| control  | `.mantine-TableOfContents-control` | Control element |\n\n\n\n#### TableOfContents CSS variables\n\n| Selector | Variable             | Description                                    |\n| -------- | -------------------- | ---------------------------------------------- |\n| root     | `--toc-bg`           | Background color of active control             |\n| root     | `--toc-color`        | Text color of active control                   |\n| root     | `--toc-depth-offset` | Offset between controls depending on depth     |\n| root     | `--toc-radius`       | Border-radius of control                       |\n| root     | `--toc-size`         | Controls font-size and padding of all elements |\n\n\n\n#### TableOfContents data attributes\n\n| Selector | Attribute     | Condition                                                      |\n| -------- | ------------- | -------------------------------------------------------------- |\n| control  | `data-active` | Associated heading is currently the best match in the viewport |\n\n### Keyword Arguments\n#### TableOfContents\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- autoContrast (boolean; optional):\n    Determines whether text color with filled variant should depend on\n    `background-color`. If luminosity of the `color` prop is less than\n    `theme.luminosityThreshold`, then `theme.white` will be used for\n    text color, otherwise `theme.black`. Overrides\n    `theme.autoContrast`.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- color (optional):\n    Active element color. Key of `theme.colors` or any valid CSS color\n    value, `theme.primaryColor` by default.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- depthOffset (string | number; optional):\n    Controls padding on the left side of control, multiplied by\n    (`depth` - `minDepthToOffset`), `20px` by default.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- minDepthToOffset (number; optional):\n    Minimum `depth` value that requires offset, `1` by default.\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- offset (number; optional):\n    Offset from the top of the viewport to use when determining the\n    active heading, 0 by default.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set\n    `border-radius`, `theme.defaultRadius` by default.\n\n- reinitialize (boolean; optional):\n    Forces a re-scan of headings for dynamic content. Can be triggered\n    in a callback.\n\n- scrollIntoViewOptions (dict; optional):\n    Set scrollIntoView options. {'behavior': 'auto' | 'instant' |\n    'smooth', 'block': 'center' | 'end' | 'nearest' | 'start',\n    'inline': 'center' | 'end' | 'nearest' | 'start'}.\n\n    `scrollIntoViewOptions` is a dict with keys:\n\n- selector (string; optional):\n    CSS Selector to get headings, 'h1, h2, h3, h4, h5, h6' by default.\n\n- size (string | number; optional):\n    Controls font-size and padding of all elements, `'md'` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- target_id (string; optional):\n    Component id to observe for loading completion (Dash >= 3 only).\n    Defaults to Dash Pages content container '_pages_content'. For\n    Dash 2 use reinitialize prop instead.\n\n- variant (a value equal to: 'none', 'light', 'filled'; optional):\n    Controls active element style, `'filled'` by default.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`."
  },
  {
    "name": "Tabs",
    "description": "Use the Tab and Tabs component to switch between views.",
    "endpoint": "/components/tabs",
    "package": "dash_mantine_components",
    "category": "Navigation",
    "content": "\n\n## Tabs  \nUse the Tab and Tabs component to switch between views.  \nCategory: Navigation  \n\n### Usage\n\n```python\nimport dash_mantine_components as dmc\n\ndmc.Tabs(\n    [\n        dmc.TabsList(\n            [\n                dmc.TabsTab(\"Gallery\", value=\"gallery\"),\n                dmc.TabsTab(\"Messages\", value=\"messages\"),\n                dmc.TabsTab(\"Settings\", value=\"settings\"),\n            ]\n        ),\n        dmc.TabsPanel(\"Gallery tab content\", value=\"gallery\"),\n        dmc.TabsPanel(\"Messages tab content\", value=\"messages\"),\n        dmc.TabsPanel(\"Settings tab content\", value=\"settings\"),\n    ],\n    color=\"red\", # default is blue\n    orientation=\"horizontal\", # or \"vertical\"\n    variant=\"default\", # or \"outline\" or \"pills\"\n    value=\"gallery\"\n)\n```\n\n### Variants\n\nUse the `variant` can be set to `\"default\"`,  `\"outline\"` or `\"pills\"`\n\n### Change colors\nTo change colors of all tabs, set `color` on `Tabs` component, to change color of the individual tab, set `color`\non `TabsTab`.\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Tabs(\n    color=\"teal\",\n    value=\"first\",\n    children=[\n        dmc.TabsList(\n            children=[\n                dmc.TabsTab(\"Teal tab\", value=\"first\"),\n                dmc.TabsTab(\"Blue tab\", value=\"second\", color=\"blue\"),\n            ]\n        ),\n        dmc.TabsPanel(\n            \"First tab color is teal, it gets this value from context\",\n            value=\"first\",\n            pt=\"xs\",\n        ),\n        dmc.TabsPanel(\n            \"Second tab color is blue, it gets this value from props, props have the priority and will override context value\",\n            value=\"second\",\n            pt=\"xs\",\n        ),\n    ],\n)\n```\n### Icons on right or left\n\nYou can use any dash component as icon and rightSection in dmc.TabsTab component.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ncomponent = dmc.Tabs(\n    [\n        dmc.TabsList(\n            [\n                dmc.TabsTab(\n                    \"Gallery\",\n                    leftSection=DashIconify(icon=\"tabler:photo\"),\n                    value=\"gallery\",\n                ),\n                dmc.TabsTab(\n                    \"Messages\",\n                    leftSection=DashIconify(icon=\"tabler:message\"),\n                    value=\"messages\",\n                ),\n                dmc.TabsTab(\n                    \"Settings\",\n                    leftSection=DashIconify(icon=\"tabler:settings\"),\n                    value=\"settings\",\n                ),\n            ]\n        ),\n    ],\n    value=\"messages\",\n)\n```\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ncomponent = dmc.Tabs(\n    [\n        dmc.TabsList(\n            [\n                dmc.TabsTab(\n                    \"Messages\",\n                    rightSection=dmc.Badge(\n                        \"6\", size=\"xs\", p=0, variant=\"filled\", circle=True\n                    ),\n                    value=\"messages\",\n                ),\n                dmc.TabsTab(\n                    \"Settings\",\n                    rightSection=DashIconify(icon=\"tabler:alert-circle\", width=16),\n                    value=\"settings\",\n                ),\n            ]\n        ),\n    ],\n    value=\"messages\",\n)\n```\n### Tabs Position\n\n`Tabs` controls position is controlled with `grow` and `justify` properties in `TabsList` component. If `grow` property \nis set to `True`, controls will take 100% of available space and `justify` property is ignored.\n\n```python\nimport dash_mantine_components as dmc\n\ndmc.Tabs(\n    children=[\n        dmc.TabsList(\n            justify=\"right\",\n            grow=False,\n            children=[...],\n        )\n        # tabs panel below\n    ]\n)\n```\n\n### Separated Tabs\n\nTo display tab on the opposite side, set `margin-left` to auto with `ml=\"auto\"` in `TabsTab` component.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Tabs(\n    [\n        dmc.TabsList(\n            [\n                dmc.TabsTab(\"Gallery\", value=\"gallery\"),\n                dmc.TabsTab(\"Messages\", value=\"messages\"),\n                dmc.TabsTab(\"Settings\", value=\"settings\", ml=\"auto\"),\n            ]\n        ),\n    ],\n    value=\"gallery\",\n)\n```\n### Inverted Tabs\n\nTo make tabs inverted, place `TabsPanel` components before `TabsList` and add `inverted=True` prop to `Tabs` component.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Tabs(\n    [\n        dmc.TabsPanel(\"Gallery tab content\", value=\"gallery\", pb=\"xs\"),\n        dmc.TabsPanel(\"Messages tab content\", value=\"messages\", pb=\"xs\"),\n        dmc.TabsPanel(\"Settings tab content\", value=\"settings\", pb=\"xs\"),\n        dmc.TabsList(\n            [\n                dmc.TabsTab(\"Gallery\", value=\"gallery\"),\n                dmc.TabsTab(\"Messages\", value=\"messages\"),\n                dmc.TabsTab(\"Settings\", value=\"settings\", ml=\"auto\"),\n            ]\n        ),\n    ],\n    value=\"gallery\",\n    inverted=True,\n)\n```\n### Vertical Tabs placement\n\nTo change placement of `TabsList` in vertical orientation, set `placement` prop in `Tabs`.\n\n### Disabled tabs\n\nSet `disabled=True` prop on `TabsTab` component to disable tab. Disabled tab cannot be activated with mouse or keyboard,\nand they will be skipped when user navigates with arrow keys:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Tabs(\n    [\n        dmc.TabsList(\n            [\n                dmc.TabsTab(\"Gallery\", value=\"gallery\"),\n                dmc.TabsTab(\"Messages\", value=\"messages\", disabled=True),\n                dmc.TabsTab(\"Settings\", value=\"settings\"),\n            ]\n        ),\n        dmc.TabsPanel(\"Gallery tab content\", value=\"gallery\"),\n        dmc.TabsPanel(\"Messages tab content\", value=\"messages\"),\n        dmc.TabsPanel(\"Settings tab content\", value=\"settings\"),\n    ],\n    value=\"gallery\"\n)\n```\n### Activation mode\nBy default, tabs are activated when user presses arrows keys or Home/End keys. To disable that set\n`activateTabWithKeyboard=False` on `Tabs` component.  \n\nThis can be useful if the tab content is updated in a long running callback.  Try clicking on a tab to focus, then\nnavigate to other tabs with arrow keys, or home/end keys:\n\n```python\nimport dash_mantine_components as dmc\n\ndmc.Tabs(\n    activateTabWithKeyboard=False,\n    children=[\n        # tabs content\n    ],    \n)\n```\n\n### Tab deactivation\nBy default, active tab cannot be deactivated. To allow that set `allowTabDeactivation=True` on Tabs component:\n\nTry clicking on the active tab to see the deactivated state:\n\n\n### Content As Callback\n\nAttach a callback to the Tabs `value` prop and update a container's `children` property in your callback.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import Input, Output, html, callback\n\nfrom lib.utils import create_graph\n\ncomponent = html.Div(\n    [\n        dmc.Tabs(\n            [\n                dmc.TabsList(\n                    [\n                        dmc.TabsTab(\"Tab one\", value=\"1\"),\n                        dmc.TabsTab(\"Tab two\", value=\"2\"),\n                    ]\n                ),\n            ],\n            id=\"tabs-example\",\n            value=\"1\",\n        ),\n        html.Div(id=\"tabs-content\", style={\"paddingTop\": 10}),\n    ]\n)\n\n\n@callback(Output(\"tabs-content\", \"children\"), Input(\"tabs-example\", \"value\"))\ndef render_content(active):\n    if active == \"1\":\n        return [dmc.Text(\"Tab One selected\", my=10), create_graph()]\n    else:\n        return [dmc.Text(\"Tab Two selected\", my=10), create_graph()]\n```\n### Content As Tab Children\n\nInstead of displaying the content through a callback, you can embed the content directly as the `children` property in\nthe Tab component.\n\n```python\nimport dash_mantine_components as dmc\n\nfrom lib.utils import create_graph\n\ncomponent = dmc.Tabs(\n    [\n        dmc.TabsList(\n            [\n                dmc.TabsTab(\"Tab one\", value=\"1\"),\n                dmc.TabsTab(\"Tab two\", value=\"2\"),\n                dmc.TabsTab(\"Tab three\", value=\"3\"),\n            ]\n        ),\n        dmc.TabsPanel(create_graph(), value=\"1\"),\n        dmc.TabsPanel(create_graph(), value=\"2\"),\n        dmc.TabsPanel(create_graph(), value=\"3\"),\n    ],\n    value=\"1\",\n)\n```\n### Styling the Tabs\n\n#### With Props  \n\nThis example demonstrates how to style tabs using only props, without requiring additional CSS files:  \n\n- **Variant**: Sets `variant=\"pills\"` to make the tabs resemble buttons.  \n- **Grow Prop**: Uses the `grow` prop on the `TabsList` component, causing the tabs to expand and fill the full width of the viewport.  \n- **Border**: Adds a border around the tabs with the `bd` prop. For more details, see the [Style Props](/style-props) section.  \n- **Border Color**: Sets the border color using the Mantine CSS variable `var(--mantine-color-default-border)`, ensuring a border color that works well in both light and dark modes. See the [Colors](/colors) section for more details.  \n- **Active Tab Color**: Sets the active tab color with `color=\"green.3\"`. This specifies a lighter shade of a built-in color. Mantine’s color palette includes 10 shades for each color, indexed from 0 (lightest) to 9 (darkest). Learn more in the [Colors](/colors) section.  \n- **Auto Contrast**: Enables `autoContrast=True` to automatically adjust the text color for better readability when using lighter or darker background colors. Additional details can be found in the [Colors](/colors) section.  \n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Tabs(\n    [\n        dmc.TabsList(\n            [\n                dmc.TabsTab(\"Gallery\", value=\"gallery\"),\n                dmc.TabsTab(\"Messages\", value=\"messages\"),\n                dmc.TabsTab(\"Settings\", value=\"settings\"),\n            ],\n            grow=True,\n            bd=\"1px solid var(--mantine-color-default-border)\"\n        ),\n        dmc.TabsPanel(\"Gallery tab content\", value=\"gallery\"),\n        dmc.TabsPanel(\"Messages tab content\", value=\"messages\"),\n        dmc.TabsPanel(\"Settings tab content\", value=\"settings\"),\n    ],\n    color=\"green.3\",\n    autoContrast=True,\n    variant=\"pills\",\n    value=\"gallery\",\n)\n```\n#### With Styles API  \n\nThis example demonstrates styling tabs using the Styles API, allowing for precise control over the appearance of each element in the tabs component. For more information, see the Styles API section below.  \n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Tabs(\n    [\n        dmc.TabsList(\n            [\n                dmc.TabsTab(\"Gallery\", value=\"gallery\"),\n                dmc.TabsTab(\"Messages\", value=\"messages\"),\n                dmc.TabsTab(\"Settings\", value=\"settings\"),\n            ],\n            grow=True\n        ),\n        dmc.TabsPanel(\"Gallery tab content\", value=\"gallery\"),\n        dmc.TabsPanel(\"Messages tab content\", value=\"messages\"),\n        dmc.TabsPanel(\"Settings tab content\", value=\"settings\"),\n    ],\n    value=\"gallery\",\n    classNames={\"tab\": \"dmc-tabs\"}\n)\n```\nPut the following in a `.css` file in the `/assets` folder\n\n```css\n.dmc-tabs {\n  position: relative;\n  border: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));\n  background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6));\n\n  &:first-of-type {\n    border-radius: 4px 0 0 4px;\n  }\n\n  &:last-of-type {\n    border-radius: 0 4px 4px 0;\n  }\n\n  & + & {\n    border-left-width: 0;\n  }\n\n  &:hover {\n    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5));\n  }\n\n  &[data-active] {\n    z-index: 1;\n    background-color: var(--mantine-color-blue-filled);\n    border-color: var(--mantine-color-blue-filled);\n    color: var(--mantine-color-white);\n\n    &:hover {\n      background-color: var(--mantine-color-blue-filled-hover);\n    }\n  }\n}\n\n```\n\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\nRefer to the Mantine Tabs Style API [interactive demo](https://mantine.dev/core/tabs/#styles-api) for help in identifying each selector.\n\n#### Tabs Selectors\n\n\n| Selector     | Static selector             | Description                              |\n|--------------|------------------------------|------------------------------------------|\n| root         | .mantine-Tabs-root           | Root element (Tabs component)            |\n| list         | .mantine-Tabs-list           | List of tabs (Tabs.List component)       |\n| panel        | .mantine-Tabs-panel          | Panel with tab content (Tabs.Panel component) |\n| tab          | .mantine-Tabs-tab            | Tab button (Tabs.Tab component)          |\n| tabLabel     | .mantine-Tabs-tabLabel       | Label of Tabs.Tab                        |\n| tabSection   | .mantine-Tabs-tabSection     | Left and right sections of Tabs.Tab      |\n\n\n\n#### Tabs CSS Variables\n\n| Selector | Variable        | Description                                                  |\n|----------|-----------------|--------------------------------------------------------------|\n| root     | --tabs-color    | Controls colors of Tabs.Tab, only applicable for `pills` or `default` variant |\n|          | --tabs-radius   | Controls Tabs.Tab border-radius                              |\n\n\n\n#### Tabs Data Attributes\n\n| Selector          | Attribute          | Condition                                 | Value                        |\n|-------------------|--------------------|-------------------------------------------|------------------------------|\n| root, tab, list, panel | data-orientation  | –                                         | Value of `orientation` prop |\n| root, tab, list   | data-placement     | `orientation` is \"vertical\" on Tabs component | Value of `placement` prop   |\n| tab, list         | data-inverted      | `inverted` prop is set on Tabs component  | –                            |\n| list              | data-grow          | `grow` prop is set on Tabs.List component | –                            |\n| tabSection        | data-position      | –                                         | Position of the section (left or right) |\n\n\n\n\n### Keyword Arguments\n#### Tabs\n\n- children (a list of or a singular dash component, string or number; required):\n    Tabs content.\n\n- id (string; optional):\n    Base id, used to generate ids to connect labels with controls,\n    generated randomly by default.\n\n- activateTabWithKeyboard (boolean; optional):\n    Determines whether tab should be activated with arrow key press,\n    `True` by default.\n\n- allowTabDeactivation (boolean; optional):\n    Determines whether tab can be deactivated, `False` by default.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- autoContrast (boolean; optional):\n    Determines whether active item text color should depend on\n    `background-color` of the indicator. If luminosity of the `color`\n    prop is less than `theme.luminosityThreshold`, then `theme.white`\n    will be used for text color, otherwise `theme.black`. Overrides\n    `theme.autoContrast`. Only applicable when `variant=\"pills\"`.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- color (optional):\n    Changes colors of `Tabs.Tab` components when variant is `pills` or\n    `default`, does nothing for other variants.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- inverted (boolean; optional):\n    Determines whether tabs should have inverted styles, `False` by\n    default.\n\n- keepMounted (boolean; optional):\n    If set to `False`, `Tabs.Panel` content will be unmounted when the\n    associated tab is not active, `True` by default.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- loop (boolean; optional):\n    Determines whether arrow key presses should loop though items\n    (first to last and last to first), `True` by default.\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- orientation (a value equal to: 'vertical', 'horizontal'; optional):\n    Tabs orientation, `'horizontal'` by default.\n\n- persisted_props (list of strings; optional):\n    Properties whose user interactions will persist after refreshing\n    the component or the page. Since only `value` is allowed this prop\n    can normally be ignored.\n\n- persistence (string | number | boolean; optional):\n    Used to allow user interactions in this component to be persisted\n    when the component - or the page - is refreshed. If `persisted` is\n    truthy and hasn't changed from its previous value, a `value` that\n    the user has changed while using the app will keep that change, as\n    long as the new `value` also matches what was given originally.\n    Used in conjunction with `persistence_type`. Note:  The component\n    must have an `id` for persistence to work.\n\n- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):\n    Where persisted user changes will be stored: memory: only kept in\n    memory, reset on page refresh. local: window.localStorage, data is\n    kept after the browser quit. session: window.sessionStorage, data\n    is cleared once the browser quit.\n\n- placement (a value equal to: 'left', 'right'; optional):\n    `Tabs.List` placement relative to `Tabs.Panel`, applicable only\n    when `orientation=\"vertical\"`, `'left'` by default.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set\n    `border-radius`, `theme.defaultRadius` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- value (string; optional):\n    Value for controlled component.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n#### TabsList\n\n- children (a list of or a singular dash component, string or number; required):\n    `Tabs.Tab` components.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- grow (boolean; optional):\n    Determines whether tabs should take all available space, `False`\n    by default.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- justify (optional):\n    Tabs alignment, `flex-start` by default.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n#### TabsPanel\n\n- children (a list of or a singular dash component, string or number; required):\n    Panel content.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- keepMounted (boolean; optional):\n    If set to `True`, the content will be kept mounted, even if\n    `keepMounted` is set `False` in the parent `Tabs` component.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- value (string; required):\n    Value of associated control.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n#### Tab\n\n- children (a list of or a singular dash component, string or number; optional):\n    Tab label.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- color (optional):\n    Key of `theme.colors` or any valid CSS color, controls control\n    color based on `variant`.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- disabled (boolean; optional):\n    Indicates disabled state.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- leftSection (a list of or a singular dash component, string or number; optional):\n    Content displayed on the left side of the label, for example,\n    icon.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- rightSection (a list of or a singular dash component, string or number; optional):\n    Content displayed on the right side of the label, for example,\n    icon.\n\n- size (string | number; optional):\n    Size passed from parent component.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- value (string; required):\n    Value of associated panel.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`."
  },
  {
    "name": "Tree",
    "description": "Display a Tree structure",
    "endpoint": "/components/tree",
    "package": "dash_mantine_components",
    "category": "Navigation",
    "content": "\n\n## Tree  \nDisplay a Tree structure  \nCategory: Navigation  \n\n### Simple Example\n\n`Tree` component is used to display hierarchical data. `Tree` component has minimal styling by default, you can\ncustomize styles with Styles API.\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.Tree(data=data)\n```\n### Data\n\nData passed to the `data` prop should follow these rules:\n\n- Data must be an array\n- Each item in the array represents a node in the tree\n- Each node must be a dictionary with value and label keys\n- Each node can have children key with an array of child nodes\n- The value of each node must be unique\n\n\n```python\n# ✅ Valid data, all values are unique\nvalid_data = [\n    {\n        \"value\": \"src\",\n        \"label\": \"src\",\n        \"children\": [\n            {\"value\": \"src/components\", \"label\": \"components\"},\n            {\"value\": \"src/hooks\", \"label\": \"hooks\"},\n        ],\n    },\n    {\"value\": \"package.json\", \"label\": \"package.json\"},\n]\n\n# ❌ Invalid data, values are not unique (components is used twice)\ninvalid_data = [\n    {\n        \"value\": \"src\",\n        \"label\": \"src\",\n        \"children\": [{\"value\": \"components\", \"label\": \"components\"}],\n    },\n    {\"value\": \"components\", \"label\": \"components\"},\n]\n\n```\n\n### Icon Side\n\nThe expanded and collapsed icons are on the left side of the label by default.  To move them to the right side, set `iconSide=\"right`\n\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.Tree(data=data, iconSide=\"right\")\n```\n### Remove Expanded Icon\n\nBy default the `Tree` includes a chevron to indicate expanded and collapsed nodes.  To remove the icons, set `expandedIcon=None`\n\n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.Tree(data=data, expandedIcon=None)\n```\n### Change Expanded Icon\n\nUse any icon in the `expandedIcon` prop.  If no `collapsedIcon` is set, the icon will be rotated to indicate the collapsed state.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\nfrom .data import data\n\ncomponent = dmc.Tree(\n    data=data,\n    expandedIcon=DashIconify(icon=\"fa6-solid:arrow-down\")\n)\n```\n### Change Expanded and Collapsed Icons\n\nWhen both the  `expandedIcon` and `collapsedIcon` props are set, the icons will not be rotated.\n\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\nfrom .data import data\n\ncomponent = dmc.Tree(\n    data=data,\n    expandedIcon=DashIconify(icon=\"fa6-regular:folder-open\"),\n    collapsedIcon=DashIconify(icon=\"fa6-solid:folder-plus\"),\n)\n```\n### Set Expanded state\n\nTo set the state of the nodes, use the `expanded` prop.  Note that leaf nodes can be included, but it will only change\nthe expanded/collapsed display of the nodes with children.\n\n\n```python\nimport json\nimport dash_mantine_components as dmc\nfrom dash import  callback, Input, Output\nfrom .data import data\n\ncomponent = dmc.Stack([\n    dmc.Tree(\n        data=data,\n        expanded=[\n            \"node_modules\",\n            \"node_modules/@mantine\",\n            \"node_modules/@mantine/form\",\n            \"node_modules/@mantine/form/index.d.ts\",\n        ],\n        id=\"tree-expanded\"\n    ),\n    dmc.CodeHighlight(id=\"expanded-nodes\", code=\"\", language=\"json\"),\n])\n\n\n@callback(\n    Output(\"expanded-nodes\", \"code\"),\n    Input(\"tree-expanded\", \"expanded\")\n)\ndef update(expanded):\n    return  json.dumps( expanded, indent=4)\n```\n### Expand or Collapse All\n\nExpand all will include all items of the `data` prop in the `expanded` prop.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import callback, Input, Output\nfrom .data import data\n\ncomponent = dmc.Box([\n    dmc.SegmentedControl(\n        id=\"tree-expand-all\",\n        data=[\"Expand All\", \"Collapse All\"],\n        value=\"Collapse All\",\n        mb=\"sm\"\n    ),\n\n    dmc.Tree(\n        data=data,\n        id=\"tree-all\"\n    )\n],p=\"lg\")\n\n@callback(\n    Output(\"tree-all\", \"expanded\"),\n    Input(\"tree-expand-all\", \"value\")\n)\ndef update(value):\n    if value==\"Collapse All\":\n        return []\n    return '*'\n```\n### Expanded State in callbacks.\n\nWhen using the expanded property as a callback input to track the user's selected expanded state, note that the `expanded`\nlist may include or exclude leaf nodes (nodes without children) depending on user interaction.\n\nThis happens because users can toggle the state of leaf nodes, even though they don’t affect how the tree data is \ndisplayed. To handle this, ensure your callback logic accounts for the possibility that leaf nodes may or may not\nbe present in the `expanded` prop.\n\nNote also that the nodes included in the `expanded` prop are ordered based on user interation and the order of operations.\n\n### With Checkboxes\n\nUse the `checked` prop to set or track the checked items.  Note that only leaves can be checked, and the order will be\nbased on user interation and the order of operations. \n\n```python\nimport json\nimport dash_mantine_components as dmc\nfrom dash import callback, Input, Output\nfrom .data import data\n\ncomponent = dmc.Stack([\n    dmc.Tree(data=data, checkboxes=True, id=\"tree-checkboxes\" ),\n    dmc.CodeHighlight(id=\"checked-nodes\", code=\"\", language=\"json\"),\n])\n\n\n@callback(\n    Output(\"checked-nodes\", \"code\"),\n    Input(\"tree-checkboxes\", \"checked\")\n)\ndef update(checked):\n    return  json.dumps( checked, indent=4)\n```\n### Custom Tree rendering\n\nBy default, `dmc.Tree` includes a built-in `renderNode` function that covers most common use cases. It requires no \nJavaScript and supports some customization through props like `checkboxes`, `expandedIcon`, and `iconSide`.\n\nIf you need more control over how each node is rendered, such as using custom icons based on the data, arranging content\ndifferently or advanced styling, you can provide your own `renderNode` function written in JavaScript. This advanced\nfeature is designed for use cases that go beyond what the built-in options support.\n\n#### Ignored Props\n\nWhen you supply your own `renderNode` function, the following props are ignored:\n\n* `checkboxes`\n* `expandedIcon`\n* `collapsedIcon`\n* `iconSide`\n\nThese props only apply when you're using the default built-in renderer. If you're using a custom `renderNode`, you are\nresponsible for rendering icons, checkboxes, or any other visual element.\n\n\n#### Example: Files Tree \n\n\nNote: This example uses custom JavaScript defined in the assets folder. Learn more in the \"Functions As Props\" section of this document.\n\n\n```python\nimport dash_mantine_components as dmc\nimport dash_iconify  # required in order to use DashIconify in the renderNode function\nfrom .data import data\n\n\ncomponent = dmc.Tree(\n    data=data,\n    renderNode={\"function\": \"myLeaf\"},\n    expanded=[\n        \"node_modules\",\n        \"node_modules/react\",\n    ]\n)\n```\n\n```javascript\n\nvar dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\n\ndmcfuncs.myLeaf = function (payload) {\n  const dmc = window.dash_mantine_components;\n  const iconify = window.dash_iconify;\n\n  function getIcon(name, isFolder, expanded) {\n    const size = 14;\n\n    if (name.endsWith('package.json')) {\n      return React.createElement(iconify.DashIconify, {\n        icon: 'logos:npm-icon',\n        width: size,\n        height: size\n      });\n    }\n\n    if (\n      name.endsWith('.ts') ||\n      name.endsWith('.tsx') ||\n      name.endsWith('tsconfig.json')\n    ) {\n      return React.createElement(iconify.DashIconify, {\n        icon: 'logos:typescript-icon',\n        width: size,\n        height: size\n      });\n    }\n\n    if (name.endsWith('.css')) {\n      return React.createElement(iconify.DashIconify, {\n        icon: 'vscode-icons:file-type-css',\n        width: size,\n        height: size\n      });\n    }\n\n    if (isFolder) {\n      return React.createElement(iconify.DashIconify, {\n        icon: expanded ? 'tabler:folder-open' : 'tabler:folder',\n        width: size,\n        height: size,\n        color: '#f59f00' // Mantine yellow-9\n      });\n    }\n\n    return null;\n  }\n\n  const { node, expanded, hasChildren, elementProps } = payload;\n\n  return React.createElement(\n    dmc.Group,\n    { key: payload.node.value, gap: 5, ...elementProps },\n    getIcon(node.value, hasChildren, expanded),\n    React.createElement('span', null, node.label)\n  );\n};\n```\n\n#### Example:  Tree with Checkboxes\n\n\nNote: This example uses custom JavaScript defined in the assets folder. Learn more in the \"Functions As Props\" section of this document.\n\n\n\nIf the \"With Checkboxes\" example above does not meet your needs, you can use the `renderNode` prop to fully customize\nhow each tree node is rendered using JavaScript.\n\nWhen using a custom `renderNode`, you are responsible for implementing the checkbox and expand/collapse logic yourself.\nTo handle the checked state, you'll need to render a `CheckboxIndicator` manually inside your custom render function\nand call `tree.checkNode(...)` or `tree.uncheckNode(...)` to update it.\n\n\n```python\nimport json\nimport dash_mantine_components as dmc\nfrom dash import callback, Input, Output\nimport dash_iconify # necessary to import here in order to use in the renderNode function\nfrom .data import data\n\ncomponent = dmc.Stack([\n    dmc.Tree(\n        data=data,\n        levelOffset=23,\n        expandOnClick=False,\n        renderNode={\"function\": \"myLeafCheckbox\"},\n        id=\"tree-checkboxes-renderNode\" ),\n    dmc.CodeHighlight(id=\"checked-nodes-renderNode\", code=\"\", language=\"json\"),\n])\n\n\n@callback(\n    Output(\"checked-nodes-renderNode\", \"code\"),\n    Input(\"tree-checkboxes-renderNode\", \"checked\")\n)\ndef update(checked):\n    return  json.dumps( checked, indent=4)\n```\n\n```javascript\nvar dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\n\ndmcfuncs.myLeafCheckbox = function (payload) {\n  const React = window.React;\n  const dmc = window.dash_mantine_components;\n  const iconify = window.dash_iconify;\n\n  const { node, expanded, hasChildren, elementProps, tree } = payload;\n\n  const checked = tree.isNodeChecked(node.value);\n  const indeterminate = tree.isNodeIndeterminate(node.value);\n\n  return React.createElement(\n    dmc.Group,\n    { key: node.value, gap: \"xs\", ...elementProps },\n    [\n      React.createElement(dmc.CheckboxIndicator, {\n        key: \"checkbox\",\n        checked,\n        indeterminate,\n        onClick: (e) => {\n          e.stopPropagation();\n          if (checked) {\n            tree.uncheckNode(node.value);\n          } else {\n            tree.checkNode(node.value);\n          }\n        },\n      }),\n      React.createElement(\n        dmc.Group,\n        {\n          key: \"label-group\",\n          gap: 5,\n          onClick: () => tree.toggleExpanded(node.value),\n        },\n        [\n          React.createElement(\"span\", { key: \"label\" }, node.label),\n          hasChildren &&\n            React.createElement(iconify.DashIconify, {\n              key: \"icon\",\n              icon: \"tabler:chevron-down\",\n              width: 14,\n              style: {\n                transform: expanded ? \"rotate(180deg)\" : \"rotate(0deg)\",\n                transition: \"transform 0.2s ease\",\n              },\n            }),\n        ]\n      ),\n    ]\n  );\n};\n```\n\n#### renderNode Arguments\n\nThe `renderNode` function receives a single `payload` object with the following fields:\n\n```js\nexport interface RenderTreeNodePayload {\n  /** Node level in the tree */\n  level: number;\n\n  /** `true` if the node is expanded, applicable only for nodes with `children` */\n  expanded: boolean;\n\n  /** `true` if the node has non-empty `children` array */\n  hasChildren: boolean;\n\n  /** `true` if the node is selected */\n  selected: boolean;\n\n  /** Node data from the `data` prop of `Tree` */\n  node: TreeNodeData;\n\n  /** Tree controller instance, return value of `useTree` hook */\n  tree: TreeController;\n\n  /** Props to spread into the root node element */\n  elementProps: {\n    className: string;\n    style: React.CSSProperties;\n    onClick: (event: React.MouseEvent) => void;\n    'data-selected': boolean | undefined;\n    'data-value': string;\n    'data-hovered': boolean | undefined;\n  };\n}\n\n```\n\n\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n#### Tree Selectors\n\n| Selector | Static selector         | Description                         |\n|----------|--------------------------|-------------------------------------|\n| root     | .mantine-Tree-root       | Root element                        |\n| node     | .mantine-Tree-node       | Node element (`li`), contains label and subtree elements |\n| subtree  | .mantine-Tree-subtree    | Subtree element (`ul`)              |\n| label    | .mantine-Tree-label      | Node label                          |\n\n\n\n#### Tree CSS Variables\n\n| Selector | Variable        | Description                           |\n|----------|-----------------|---------------------------------------|\n| root     | --level-offset  | Controls offset of nested tree levels |\n\n\n\n#### Tree Data Attributes\n\n| Selector     | Attribute      | Condition              | Value                  |\n|--------------|----------------|------------------------|------------------------|\n| node, label  | data-selected  | The node is selected   | –                      |\n| node, label  | data-hovered   | The node is hovered    | –                      |\n| node         | data-level     | –                      | Nesting level of the node |\n\n\n\n### Keyword Arguments\n#### Tree\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- allowRangeSelection (boolean; optional):\n    Determines whether tree nodes range can be selected with click\n    when Shift key is pressed, `True` by default.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- checkOnSpace (boolean; optional):\n    Determines whether tree node should be checked on space key press,\n    `False` by default.\n\n- checkboxes (boolean; optional):\n    Determines if checkboxes should be rendered, `False` by default.\n    Ignored when using a custom `renderNode` function.\n\n- checked (list of strings; optional):\n    Determines checked nodes as a list of values (note that only\n    leaves can be checked), `[]` by default.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- clearSelectionOnOutsideClick (boolean; optional):\n    Determines whether selection should be cleared when user clicks\n    outside of the tree, `False` by default.\n\n- collapsedIcon (a list of or a singular dash component, string or number; optional):\n    Collapsed state icon. Ignored when using a custom `renderNode`\n    function.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data (list of dicts; required):\n    Data used to render nodes.\n\n    `data` is a list of dicts with keys:\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- expandOnClick (boolean; optional):\n    Determines whether tree node with children should be expanded on\n    click, `True` by default.\n\n- expandOnSpace (boolean; optional):\n    Determines whether tree node with children should be expanded on\n    space key press, `True` by default.\n\n- expanded (list of strings; optional):\n    Determines expanded nodes as a list of values or `'*'` for all,\n    `[]` by default.\n\n- expandedIcon (a list of or a singular dash component, string or number; default <AccordionChevron />):\n    Expanded state icon. Ignored when using a custom `renderNode`\n    function.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- iconSide (a value equal to: 'left', 'right', 'none'; default 'left'):\n    Side to display expanded/collapsed state icon on, `'left'` by\n    default. Ignored when using a custom `renderNode` function.\n\n- levelOffset (string | number; optional):\n    Horizontal padding of each subtree level, key of `theme.spacing`\n    or any valid CSS value, `'lg'` by default.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- renderNode (boolean | number | string | dict | list; optional):\n    A function to render the tree node label. Replaces the default\n    component rendering  See\n    https://www.dash-mantine-components.com/functions-as-props.\n\n- selectOnClick (boolean; optional):\n    Determines whether node should be selected on click, `False` by\n    default.\n\n- selected (list of strings; optional):\n    Determines selected nodes as a list of values, `[]` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`."
  },
  {
    "name": "Affix",
    "description": "Use the Affix component to show content at any fixed positon inside your app.",
    "endpoint": "/components/affix",
    "package": "dash_mantine_components",
    "category": "Overlay",
    "content": "\n\n## Affix  \nUse the Affix component to show content at any fixed positon inside your app.  \nCategory: Overlay  \n\n### Simple Example\n\nLook at the bottom right!\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Affix(\n    dmc.Button(\"I'm in an Affix Component\"), position={\"bottom\": 20, \"right\": 20}\n)\n```\n### Position prop\nThe `position` prop controls the affix position on the screen. By default, the component is positioned at `{ bottom: 0, right: 0 }`.  \n\nAccepted Keys:\n- `top` (MantineSize | str | number) – Distance from the top.  \n- `left`(MantineSize | str | number) – Distance from the left.  \n- `bottom`(MantineSize | str | number) – Distance from the bottom.  \n- `right` (MantineSize | str | number) – Distance from the right.  \n\nAccepted Value Types:\n1. MantineSize (`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) – Uses predefined spacing values.  \n2. String (CSS units) (e.g., `\"10px\"`, `\"5rem\"`, `\"50%\"`) – Allows precise control using CSS units.  \n3. Number (e.g., `10`, `50`) – Treated as pixel values (`px`).  \n\n\nExample:\n```python\nimport dash_mantine_components as dmc\n\ndmc.Affix(\n    dmc.Button(\"Floating Button\"),\n    position={\"bottom\": \"20px\", \"right\": \"lg\"} \n)\n```\n\n\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n#### Affix selectors\n\n| Selector | Static selector | Description |\n|----------|----------------|-------------|\n| root     | .mantine-Affix-root | Root element |\n\n#### Affix CSS variables\n\n| Selector | Variable | Description |\n|----------|----------|-------------|\n| root     | --affix-z-index  | Controls `z-index` property |\n| root     | --affix-top      | Controls `top` property |\n| root     | --affix-bottom   | Controls `bottom` property |\n| root     | --affix-left     | Controls `left` property |\n| root     | --affix-right    | Controls `right` property |\n\n\n\n### Keyword Arguments\n#### Affix\n\n- children (a list of or a singular dash component, string or number; optional)\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- position (dict; optional):\n    Affix position on screen @,default,`{ bottom: 0, right: 0 }`.\n\n    `position` is a dict with keys:\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withinPortal (boolean; optional):\n    Determines whether the component is rendered within `Portal`\n    @,default,`True`.\n\n- zIndex (optional):\n    Root element `z-index` property @,default,`200`."
  },
  {
    "name": "Drawer",
    "description": "Use Drawer component to create collapsible sidebars.",
    "endpoint": "/components/drawer",
    "package": "dash_mantine_components",
    "category": "Overlay",
    "content": "\n\n## Drawer  \nUse Drawer component to create collapsible sidebars.  \nCategory: Overlay  \n\n### Simple Example\n\nThis is a basic example of dmc.Drawer. Set the `opened` property to open the drawer. The drawer can be controlled in following ways:\n\n* programmatically (using callbacks)\n* by clicking on the cross button (if not disabled using `withCloseButton` prop)\n* by clicking outside the drawer area (if not disabled using `closeOnClickOutside` prop)\n* by pressing the ESC key (if not disabled using `closeOnEscape` prop)\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html, Output, Input, callback\n\ncomponent = html.Div(\n    [\n        dmc.Button(\"Open Drawer\", id=\"drawer-demo-button\"),\n        dmc.Drawer(\n            title=\"Drawer Example\",\n            id=\"drawer-simple\",\n            padding=\"md\",\n        ),\n    ]\n)\n\n\n@callback(\n    Output(\"drawer-simple\", \"opened\"),\n    Input(\"drawer-demo-button\", \"n_clicks\"),\n    prevent_initial_call=True,\n)\ndef drawer_demo(n_clicks):\n    return True\n```\n### Different Sizes\n\nSet the size of the drawer using the `size` prop.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html, Output, Input, State, callback\n\ncomponent = html.Div(\n    [\n        dmc.Drawer(title=\"Size: md\", id=\"drawer-size-md\", padding=\"md\", size=\"md\"),\n        dmc.Drawer(\n            title=\"Size: 450px\",\n            id=\"drawer-size-450\",\n            padding=\"md\",\n            size=450,\n        ),\n        dmc.Drawer(\n            title=\"Size: 55%\",\n            id=\"drawer-size-55\",\n            padding=\"md\",\n            size=\"55%\",\n        ),\n        dmc.Drawer(\n            title=\"Size: full\",\n            id=\"drawer-size-full\",\n            padding=\"md\",\n            size=\"100%\",\n        ),\n        dmc.Group(\n            [\n                dmc.Button(\"md\", id=\"md-drawer-button\"),\n                dmc.Button(\"450px\", id=\"450-drawer-button\"),\n                dmc.Button(\"55%\", id=\"55-drawer-button\"),\n                dmc.Button(\"full\", id=\"full-drawer-button\"),\n            ]\n        ),\n    ]\n)\n\n\ndef toggle_drawer(n_clicks, opened):\n    return not opened\n\n\nfor size in [\"md\", \"450\", \"55\", \"full\"]:\n    callback(\n        Output(f\"drawer-size-{size}\", \"opened\"),\n        Input(f\"{size}-drawer-button\", \"n_clicks\"),\n        State(f\"drawer-size-{size}\", \"opened\"),\n        prevent_initial_call=True,\n    )(toggle_drawer)\n```\n### Placement\n\nBy default, Drawer will start to appear from the left, but this position can be customized by setting the `position` \nprop.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html, Output, Input, State, callback\n\ndata = [\n    [\"Left (Default)\", \"left\"],\n    [\"Top\", \"top\"],\n    [\"Right\", \"right\"],\n    [\"Bottom\", \"bottom\"],\n]\n\ncomponent = html.Div(\n    [\n        dmc.Drawer(\n            id=\"drawer-position\",\n        ),\n        dmc.Group(\n            align=\"center\",\n            gap=\"xl\",\n            children=[\n                dmc.RadioGroup(\n                    dmc.Group([dmc.Radio(label, value=value) for label, value in data]),\n                    id=\"drawer-position-radio\",\n                    value=\"left\",\n                ),\n                dmc.Button(\"Open Drawer\", id=\"drawer-position-button\"),\n            ],\n        ),\n    ]\n)\n\n\n@callback(\n    Output(\"drawer-position\", \"opened\"),\n    Output(\"drawer-position\", \"position\"),\n    Input(\"drawer-position-button\", \"n_clicks\"),\n    State(\"drawer-position-radio\", \"value\"),\n    prevent_initial_call=True,\n)\ndef toggle_drawer(n_clicks, position):\n    return True, position\n```\n### Transition\n\nYou can customize transition, timing function and duration for Drawer transition.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html, Output, Input, callback\n\ncomponent = html.Div(\n    [\n        dmc.Button(\"Open Drawer\", id=\"drawer-transition-button\"),\n        dmc.Drawer(\n            title=\"Drawer Example\",\n            id=\"drawer-fancy\",\n            padding=\"md\",\n            transitionProps={\n                \"transition\": \"rotate-left\",\n                \"duration\": 1000,\n                \"timingFunction\": \"ease\",\n            },\n        ),\n    ]\n)\n\n\n@callback(\n    Output(\"drawer-fancy\", \"opened\"),\n    Input(\"drawer-transition-button\", \"n_clicks\"),\n    prevent_initial_call=True,\n)\ndef drawer_demo(n_clicks):\n    return True\n```\n### Drawer Stack\n\nUse `DrawerStack` component to render multiple drawers at the same time. `DrawerStack` keeps track of opened drawers, \nmanages `z-index` values, focus trapping and `closeOnEscape` behavior.\n\nDifferences from using multiple Drawer components:\n\n- `DrawerStack` children must be `ManagedDrawer` components\n- `DrawerStack` manages `z-index` values – drawers that are opened later will always have higher `z-index` value disregarding their order in the DOM\n- `DrawerStack` disables focus trap and `Escape` key handling for all drawers except the one that is currently opened\n- Drawers that are not currently visible are present in the DOM but are hidden with `opacity: 0` and `pointer-events: none`\n- Only one overlay is rendered at a time\n\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import  Output, Input, callback, ctx, no_update\n\n\ncomponent = dmc.Center([\n    dmc.DrawerStack(\n        id=\"drawer-stack\",\n        children=[\n            dmc.ManagedDrawer(\n                id=\"drawer-delete-page\",\n                title=\"Delete this page?\",\n                children=[\n                    dmc.Text(\"Are you sure you want to delete this page? This action cannot be undone.\"),\n                    dmc.Group(\n                        mt=\"lg\",\n                        justify=\"flex-end\",\n                        children=[\n                            dmc.Button(\"Cancel\", id=\"drawer-cancel-1\", variant=\"default\"),\n                            dmc.Button(\"Delete\", id=\"drawer-delete\", color=\"red\"),\n                        ],\n                    ),\n                ],\n            ),\n            dmc.ManagedDrawer(\n                id=\"drawer-confirm-action\",\n                title=\"Confirm action\",\n                children=[\n                    dmc.Text(\"Are you sure you want to perform this action? This action cannot be undone. If you are sure, press confirm button below.\"),\n                    dmc.Group(\n                        mt=\"lg\",\n                        justify=\"flex-end\",\n                        children=[\n                            dmc.Button(\"Cancel\", id=\"drawer-cancel-2\", variant=\"default\"),\n                            dmc.Button(\"Confirm\", id=\"drawer-confirm\", color=\"red\"),\n                        ],\n                    ),\n                ],\n            ),\n            dmc.ManagedDrawer(\n                id=\"drawer-really-confirm-action\",\n                title=\"Really confirm action\",\n                children=[\n                    dmc.Text(\"Jokes aside. You have confirmed this action. This is your last chance to cancel it. After you press confirm button below, action will be performed and cannot be undone. For real this time. Are you sure you want to proceed?\"),\n                    dmc.Group(\n                        mt=\"lg\",\n                        justify=\"flex-end\",\n                        children=[\n                            dmc.Button(\"Cancel\", id=\"drawer-cancel-3\", variant=\"default\"),\n                            dmc.Button(\"Confirm\", id=\"drawer-final-confirm\", color=\"red\"),\n                        ],\n                    ),\n                ],\n            ),\n        ]\n    ),\n    dmc.Button(\"Open drawer\", id=\"drawer-stack-open\")\n])\n\n\n@callback(\n    Output(\"drawer-stack\", \"open\"),\n    Output(\"drawer-stack\", \"closeAll\"),\n    Input(\"drawer-stack-open\", \"n_clicks\"),\n    Input(\"drawer-cancel-1\", \"n_clicks\"),\n    Input(\"drawer-cancel-2\", \"n_clicks\"),\n    Input(\"drawer-cancel-3\", \"n_clicks\"),\n    Input(\"drawer-delete\", \"n_clicks\"),\n    Input(\"drawer-confirm\", \"n_clicks\"),\n    Input(\"drawer-final-confirm\", \"n_clicks\"),\n    prevent_initial_call=True,\n)\ndef control_modals(*_):\n    trigger = ctx.triggered_id\n    if trigger == \"drawer-stack-open\":\n        return \"drawer-delete-page\", False\n    if trigger in (\"drawer-cancel-1\", \"drawer-cancel-2\", \"drawer-cancel-3\", \"drawer-final-confirm\"):\n        return None, True\n    if trigger == \"drawer-delete\":\n        return \"drawer-confirm-action\", False\n    if trigger == \"drawer-confirm\":\n        return \"drawer-really-confirm-action\", False\n    return no_update, no_update\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n#### Drawer Selectors\n\n| Selector  | Static selector             | Description                                                             |\n| --------- | --------------------------- | ----------------------------------------------------------------------- |\n| `root`    | `.mantine-Drawer-root`       | Root element                                                            |\n| `inner`   | `.mantine-Drawer-inner`      | Element used to center modal, has fixed position, takes entire screen    |\n| `content` | `.mantine-Drawer-content`    | Drawer.Content root element                                              |\n| `header`  | `.mantine-Drawer-header`     | Contains title and close button                                          |\n| `overlay` | `.mantine-Drawer-overlay`    | Overlay displayed under the Drawer.Content                               |\n| `title`   | `.mantine-Drawer-title`      | Drawer title (`h2` tag), displayed in the header                         |\n| `body`    | `.mantine-Drawer-body`       | Drawer body, displayed after header                                      |\n| `close`   | `.mantine-Drawer-close`      | Close button                                                            |\n\n\n\n#### Drawer CSS variables\n\n\n| Selector | Variable          | Description                              |\n|----------|-------------------|------------------------------------------|\n| root     | --drawer-offset    | Controls margin of Drawer.Content        |\n|          | --drawer-size      | Controls width of Drawer.Content         |\n|          | --drawer-flex      | Controls flex property of Drawer.Content |\n|          | --drawer-align     | Controls align-items property of Drawer.Content |\n|          | --drawer-justify   | Controls justify-content property of Drawer.Content |\n|          | --drawer-height    | Controls height property of Drawer.Content |\n\n\n\n### Keyword Arguments\n#### Drawer\n\n- children (a list of or a singular dash component, string or number; optional):\n    Drawer content.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- closeButtonProps (dict; optional):\n    Props passed down to the close button.\n\n- closeOnClickOutside (boolean; optional):\n    Determines whether the modal/drawer should be closed when user\n    clicks on the overlay, `True` by default.\n\n- closeOnEscape (boolean; optional):\n    Determines whether `onClose` should be called when user presses\n    the escape key, `True` by default.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- keepMounted (boolean; optional):\n    If set modal/drawer will not be unmounted from the DOM when it is\n    hidden, `display: none` styles will be added instead, `False` by\n    default.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- lockScroll (boolean; optional):\n    Determines whether scroll should be locked when `opened={True}`,\n    `True` by default.\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- offset (string | number; optional):\n    Drawer container offset from the viewport end, `0` by default.\n\n- opened (boolean; default False):\n    Determines whether modal/drawer is opened.\n\n- overlayProps (dict; optional):\n    Props passed down to the `Overlay` component, can be used to\n    configure opacity, `background-color`, styles and other\n    properties.\n\n    `overlayProps` is a dict with keys:\n\n- padding (number; optional):\n    Key of `theme.spacing` or any valid CSS value to set content,\n    header and footer padding, `'md'` by default.\n\n- portalProps (dict; optional):\n    Props passed down to the Portal component when `withinPortal` is\n    set.\n\n- position (a value equal to: 'top', 'left', 'bottom', 'right'; optional):\n    Side of the screen on which drawer will be opened, `'left'` by\n    default.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set\n    `border-radius`, numbers are converted to rem, `0` by default.\n\n- removeScrollProps (dict; optional):\n    Props passed down to react-remove-scroll, can be used to customize\n    scroll lock behavior.\n\n- returnFocus (boolean; optional):\n    Determines whether focus should be returned to the last active\n    element when `onClose` is called, `True` by default.\n\n- shadow (optional):\n    Key of `theme.shadows` or any valid CSS box-shadow value, 'xl' by\n    default.\n\n- size (number; optional):\n    Controls width of the content area, `'md'` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- title (a list of or a singular dash component, string or number; optional):\n    Drawer title.\n\n- transitionProps (dict; optional):\n    Props added to the `Transition` component that used to animate\n    overlay and body, use to configure duration and animation type, `{\n    duration: 200, transition: 'pop' }` by default.\n\n    `transitionProps` is a dict with keys:\n\n- trapFocus (boolean; optional):\n    Determines whether focus should be trapped, `True` by default.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withCloseButton (boolean; optional):\n    Determines whether the close button should be rendered, `True` by\n    default.\n\n- withOverlay (boolean; optional):\n    Determines whether the overlay should be rendered, `True` by\n    default.\n\n- withinPortal (boolean; optional):\n    Determines whether the component should be rendered inside\n    `Portal`, `True` by default.\n\n- zIndex (string | number; optional):\n    `z-index` CSS property of the root element, `200` by default.\n#### DrawerStack\n\n- children (list of dicts; optional):\n    ManagedDrawer content.\n\n    `children` is a list of dicts with keys:\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- close (string | list of strings; optional):\n    Closes one or more drawers by ID. Accepts a single ID (string or\n    dict) or a list of IDs.\n\n- closeAll (boolean; optional):\n    Closes all drawers in the DrawerStack.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- open (string | list of strings; optional):\n    Opens one or more drawers by ID. Accepts a single ID (string or\n    dict) or a list of IDs.\n\n- state (dict; optional):\n    Current opened state of each drawer. Read only.\n\n    `state` is a dict with keys:\n\n- tabIndex (number; optional):\n    tab-index.\n\n- toggle (string | list of strings; optional):\n    Toggles one or more drawers by ID. Accepts a single ID (string or\n    dict) or a list of IDs.\n#### ManagedDrawer\n\n> Note:  ManagedDrawer is for use in the DrawerStack component. id is required.  open/closed state is controlled by DrawerStack.\n\n- children (a list of or a singular dash component, string or number; optional):\n    Drawer content.\n\n- id (string; required):\n    Unique ID to identify this component. Required for use with\n    DrawerStack.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- closeButtonProps (dict; optional):\n    Props passed down to the close button.\n\n- closeOnClickOutside (boolean; optional):\n    Determines whether the modal/drawer should be closed when user\n    clicks on the overlay, `True` by default.\n\n- closeOnEscape (boolean; optional):\n    Determines whether `onClose` should be called when user presses\n    the escape key, `True` by default.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- keepMounted (boolean; optional):\n    If set modal/drawer will not be unmounted from the DOM when it is\n    hidden, `display: none` styles will be added instead, `False` by\n    default.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- lockScroll (boolean; optional):\n    Determines whether scroll should be locked when `opened={True}`,\n    `True` by default.\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- offset (string | number; optional):\n    Drawer container offset from the viewport end, `0` by default.\n\n- overlayProps (dict; optional):\n    Props passed down to the `Overlay` component, can be used to\n    configure opacity, `background-color`, styles and other\n    properties.\n\n    `overlayProps` is a dict with keys:\n\n- padding (number; optional):\n    Key of `theme.spacing` or any valid CSS value to set content,\n    header and footer padding, `'md'` by default.\n\n- portalProps (dict; optional):\n    Props passed down to the Portal component when `withinPortal` is\n    set.\n\n- position (a value equal to: 'top', 'left', 'bottom', 'right'; optional):\n    Side of the screen on which drawer will be opened, `'left'` by\n    default.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set\n    `border-radius`, numbers are converted to rem, `0` by default.\n\n- removeScrollProps (dict; optional):\n    Props passed down to react-remove-scroll, can be used to customize\n    scroll lock behavior.\n\n- returnFocus (boolean; optional):\n    Determines whether focus should be returned to the last active\n    element when `onClose` is called, `True` by default.\n\n- shadow (optional):\n    Key of `theme.shadows` or any valid CSS box-shadow value, 'xl' by\n    default.\n\n- size (number; optional):\n    Controls width of the content area, `'md'` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- title (a list of or a singular dash component, string or number; optional):\n    Drawer title.\n\n- transitionProps (dict; optional):\n    Props added to the `Transition` component that used to animate\n    overlay and body, use to configure duration and animation type, `{\n    duration: 200, transition: 'pop' }` by default.\n\n    `transitionProps` is a dict with keys:\n\n- trapFocus (boolean; optional):\n    Determines whether focus should be trapped, `True` by default.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withCloseButton (boolean; optional):\n    Determines whether the close button should be rendered, `True` by\n    default.\n\n- withOverlay (boolean; optional):\n    Determines whether the overlay should be rendered, `True` by\n    default.\n\n- withinPortal (boolean; optional):\n    Determines whether the component should be rendered inside\n    `Portal`, `True` by default.\n\n- zIndex (string | number; optional):\n    `z-index` CSS property of the root element, `200` by default."
  },
  {
    "name": "HoverCard",
    "description": "Use HoverCard component to show more information in a popover.",
    "endpoint": "/components/hovercard",
    "package": "dash_mantine_components",
    "category": "Overlay",
    "content": "\n\n## HoverCard  \nUse HoverCard component to show more information in a popover.  \nCategory: Overlay  \n\n### Simple Example\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html, Output, Input\n\ncomponent = dmc.HoverCard(\n    withArrow=True,\n    width=200,\n    shadow=\"md\",\n    children=[\n        dmc.HoverCardTarget(dmc.Button(\"Hover to reveal the card\")),\n        dmc.HoverCardDropdown(\n            dmc.Text(\n                \"Hover card is revealed when user hovers over target element, it will be hidden once mouse is not over\",\n                size=\"sm\",\n            )\n        ),\n    ],\n)\n```\n### Delays\n\nSet open and close delays in ms with `openDelay` and `closeDelay` properties.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Group(\n    [\n        dmc.HoverCard(\n            shadow=\"md\",\n            openDelay=1000,\n            children=[\n                dmc.HoverCardTarget(dmc.Button(\"1000ms open delay\")),\n                dmc.HoverCardDropdown(dmc.Text(\"Opened with 1000ms delay\", size=\"sm\")),\n            ],\n        ),\n        dmc.HoverCard(\n            shadow=\"md\",\n            closeDelay=1000,\n            children=[\n                dmc.HoverCardTarget(dmc.Button(\"1000ms close delay\")),\n                dmc.HoverCardDropdown(dmc.Text(\"Closed with 1000ms delay\", size=\"sm\")),\n            ],\n        ),\n    ]\n)\n```\n### With Interactive elements\n\nHoverCard is displayed only when mouse is over target element or dropdown, you can use anchors and buttons within dropdowns, using inputs is not recommended.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ncomponent = (\n    dmc.HoverCard(\n        shadow=\"md\",\n        children=[\n            dmc.HoverCardTarget(\n                dmc.Avatar(\n                    src=\"https://avatars.githubusercontent.com/u/91216500?v=4\",\n                    radius=\"xl\",\n                )\n            ),\n            dmc.HoverCardDropdown(\n                [\n                    dmc.Button(\n                        \"Snehil Vijay\", fullWidth=True, mb=15, variant=\"outline\"\n                    ),\n                    dmc.Group(\n                        [\n                            dmc.Anchor(\n                                DashIconify(icon=\"logos:linkedin-icon\", width=30),\n                                href=\"https://www.linkedin.com/in/snehilvj/\",\n                                target=\"_blank\",\n                            ),\n                            dmc.Anchor(\n                                DashIconify(icon=\"logos:github-octocat\", width=30),\n                                href=\"https://www.github.com/snehilvj/\",\n                                target=\"_blank\",\n                            ),\n                            dmc.Anchor(\n                                DashIconify(icon=\"logos:twitter\", width=30),\n                                href=\"https://twitter.com/snehilvj\",\n                                target=\"_blank\",\n                            ),\n                        ],\n                        p=0,\n                    ),\n                ]\n            ),\n        ],\n    ),\n)\n```\n### HoverCard Target\n\nAny component you specify in dmc.HoverCardTarget is wrapped by a dmc.Box component under the hood. So adding a margin\nto your target component will also move the dropdown away. In order to prevent this, add margin to the wrapper component\nusing the prop `boxWrapperProps` in dmc.HoverCardTarget.\n\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n| Name     | Static selector             | Description      |\n|:---------|:----------------------------|:-----------------|\n| dropdown | .mantine-HoverCard-dropdown | Dropdown element |\n| arrow    | .mantine-HoverCard-arrow    | Dropdown arrow   |\n\n\n### Keyword Arguments\n#### HoverCard\n\n- children (a list of or a singular dash component, string or number; optional):\n    `Popover.Target` and `Popover.Dropdown` components.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- arrowOffset (number; optional):\n    Arrow offset in px, `5` by default.\n\n- arrowPosition (a value equal to: 'center', 'side'; optional):\n    Arrow position.\n\n- arrowRadius (number; optional):\n    Arrow `border-radius` in px, `0` by default.\n\n- arrowSize (number; optional):\n    Arrow size in px, `7` by default.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- clickOutsideEvents (list of strings; optional):\n    Events that trigger outside clicks.\n\n- closeDelay (number; optional):\n    Close delay in ms.\n\n- closeOnClickOutside (boolean; optional):\n    Determines whether dropdown should be closed on outside clicks,\n    `True` by default.\n\n- closeOnEscape (boolean; optional):\n    Determines whether dropdown should be closed when `Escape` key is\n    pressed, `True` by default.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- disabled (boolean; optional):\n    If set, popover dropdown will not be rendered.\n\n- floatingStrategy (a value equal to: 'absolute', 'fixed'; optional):\n    Changes floating ui [position\n    strategy](https://floating-ui.com/docs/usefloating#strategy),\n    `'absolute'` by default.\n\n- hideDetached (boolean; optional):\n    If set, the dropdown is hidden when the element is hidden with\n    styles or not visible on the screen, `True` by default.\n\n- keepMounted (boolean; optional):\n    If set dropdown will not be unmounted from the DOM when it is\n    hidden, `display: none` styles will be added instead.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- middlewares (dict; optional):\n    Floating ui middlewares to configure position handling, `{ flip:\n    True, shift: True, inline: False }` by default.\n\n    `middlewares` is a dict with keys:\n\n- offset (number; optional):\n    Offset of the dropdown element, `8` by default.\n\n- openDelay (number; optional):\n    Open delay in ms.\n\n- overlayProps (dict; optional):\n    Props passed down to `Overlay` component.\n\n- portalProps (dict; optional):\n    Props to pass down to the `Portal` when `withinPortal` is True.\n\n- position (a value equal to: 'top', 'right', 'bottom', 'left', 'top-end', 'top-start', 'right-end', 'right-start', 'bottom-end', 'bottom-start', 'left-end', 'left-start'; optional):\n    Dropdown position relative to the target element, `'bottom'` by\n    default.\n\n- positionDependencies (list of boolean | number | string | dict | lists; optional):\n    `useEffect` dependencies to force update dropdown position, `[]`\n    by default.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set border-radius,\n    `theme.defaultRadius` by default.\n\n- returnFocus (boolean; optional):\n    Determines whether focus should be automatically returned to\n    control when dropdown closes, `False` by default.\n\n- shadow (optional):\n    Key of `theme.shadows` or any other valid CSS `box-shadow` value.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- transitionProps (dict; optional):\n    Props passed down to the `Transition` component that used to\n    animate dropdown presence, use to configure duration and animation\n    type, `{ duration: 150, transition: 'fade' }` by default.\n\n    `transitionProps` is a dict with keys:\n\n- trapFocus (boolean; optional):\n    Determines whether focus should be trapped within dropdown,\n    `False` by default.\n\n- variant (string; optional):\n    variant.\n\n- width (string | number; optional):\n    Dropdown width, or `'target'` to make dropdown width the same as\n    target element, `'max-content'` by default.\n\n- withArrow (boolean; optional):\n    Determines whether component should have an arrow, `False` by\n    default.\n\n- withOverlay (boolean; optional):\n    Determines whether the overlay should be displayed when the\n    dropdown is opened, `False` by default.\n\n- withRoles (boolean; optional):\n    Determines whether dropdown and target elements should have\n    accessible roles, `True` by default.\n\n- withinPortal (boolean; optional):\n    Determines whether dropdown should be rendered within the\n    `Portal`, `True` by default.\n\n- zIndex (string | number; optional):\n    Dropdown `z-index`, `300` by default.\n#### HoverCardDropdown\n\n- children (a list of or a singular dash component, string or number; required):\n    Content.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n#### HoverCardTarget\n\n- children (a list of or a singular dash component, string or number; required):\n    Content.\n\n- boxWrapperProps (dict; optional):\n    Target box wrapper props.\n\n    `boxWrapperProps` is a dict with keys:"
  },
  {
    "name": "Menu",
    "description": "Use the Menu and MenuX components to show an interactive menu dropdown with links and buttons.",
    "endpoint": "/components/menu",
    "package": "dash_mantine_components",
    "category": "Overlay",
    "content": "\n\n## Menu  \nUse the Menu and MenuX components to show an interactive menu dropdown with links and buttons.  \nCategory: Overlay  \n\n### Simple Example\n\nMenu is built using MenuItem(s), MenuDropdown and MenuTarget. You can use MenuItem as either a link or a button. Just passing the `href` property will make it a link otherwise it will act as a button.\nWhen MenuItem is used as a button, you can write callbacks on it.\n\n```python\nfrom dash_iconify import DashIconify\nimport dash_mantine_components as dmc\nfrom dash import callback, html, Input, Output\n\ncomponent = dmc.Stack(\n    [\n        dmc.Text(id=\"menu-text\", mb=\"md\"),\n        dmc.Menu(\n            [\n                dmc.MenuTarget(dmc.Button(\"Click for options!\")),\n                dmc.MenuDropdown(\n                    [\n                        dmc.MenuItem(\n                            \"External Link\",\n                            href=\"https://www.github.com/snehilvj\",\n                            target=\"_blank\",\n                            leftSection=DashIconify(icon=\"radix-icons:external-link\"),\n                        ),\n                        dmc.MenuItem(\"Useless Button\", id=\"useless-button\", n_clicks=0),\n                    ]\n                ),\n            ]\n        ),\n    ], align=\"center\"\n)\n\n\n@callback(Output(\"menu-text\", \"children\"), Input(\"useless-button\", \"n_clicks\"))\ndef click_menu(n_clicks):\n    return f\"Clicked {n_clicks} times.\"\n```\n### Submenus\n\n```python\n\nimport dash_mantine_components as dmc\n\n\nmenu = dmc.Menu(\n    width=200,\n    position=\"bottom-start\",\n    children=[\n        dmc.MenuTarget(\n            dmc.Button(\"Toggle Menu\")\n        ),\n        dmc.MenuDropdown([\n            dmc.MenuItem(\"Dashboard\"),\n\n            dmc.SubMenu([\n                dmc.SubMenuTarget(\n                    dmc.SubMenuItem(\"Products\")\n                ),\n                dmc.SubMenuDropdown([\n                    dmc.MenuItem(\"All products\"),\n                    dmc.MenuItem(\"Categories\"),\n                    dmc.MenuItem(\"Tags\"),\n                    dmc.MenuItem(\"Attributes\"),\n                    dmc.MenuItem(\"Shipping classes\"),\n                ])\n            ]),\n\n            dmc.SubMenu([\n                dmc.SubMenuTarget(\n                    dmc.SubMenuItem(\"Orders\")\n                ),\n                dmc.SubMenuDropdown([\n                    dmc.MenuItem(\"Open\"),\n                    dmc.MenuItem(\"Completed\"),\n                    dmc.MenuItem(\"Cancelled\"),\n                ])\n            ]),\n\n            dmc.SubMenu([\n                dmc.SubMenuTarget(\n                    dmc.SubMenuItem(\"Settings\")\n                ),\n                dmc.SubMenuDropdown([\n                    dmc.MenuItem(\"Profile\"),\n                    dmc.MenuItem(\"Security\"),\n                    dmc.MenuItem(\"Notifications\"),\n                ])\n            ]),\n        ])\n    ]\n)\n\ncomponent=dmc.Center(menu)\n```\n\n\n### Menu on Hover\n\nSet `trigger` to `hover` to reveal dropdown when user hovers over menu target and dropdown. `closeDelay` and `openDelay` props can be used to control open and close delay in ms.\nNote that:\n\n* If you set `closeDelay=0` then menu will close before user will reach dropdown, so set `offset=0` to remove space between target element and dropdown.\n* Menu with hover trigger is not accessible - users that navigate with keyboard will not be able to use it.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Menu(trigger=\"hover\", openDelay=100, closeDelay=400, children=[\n  # menu target\n  # menu dropdown\n    # menu items\n])\n```\n\n### Menu Target\n\nAny component you specify in dmc.MenuTarget is wrapped by a dmc.Box component under the hood. So adding a margin\nto your target component will also move the dropdown away. In order to prevent this, add margin to the wrapper component\nusing the prop `boxWrapperProps` in dmc.MenuTarget.\n\n### Transitions\n\nMenu dropdown can be animated with any of the ready-made transitions.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ncomponent = dmc.Menu(\n    [\n        dmc.MenuTarget(dmc.Button(\"Click for options!\")),\n        dmc.MenuDropdown(\n            [\n                dmc.MenuItem(\n                    \"External Link\",\n                    href=\"https://www.github.com/snehilvj\",\n                    target=\"_blank\",\n                    leftSection=DashIconify(icon=\"radix-icons:external-link\"),\n                ),\n                dmc.MenuItem(\"Useless Button\", n_clicks=0),\n            ]\n        ),\n    ],\n    transitionProps={\"transition\": \"rotate-right\", \"duration\": 150},\n)\n```\n### Custom component as Target\n\n```python\nfrom dash_iconify import DashIconify\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Menu(\n    [\n        dmc.MenuTarget(dmc.ActionIcon(DashIconify(icon=\"tabler:user\"))),\n        dmc.MenuDropdown(\n            [\n                dmc.MenuItem(\n                    \"External Link\",\n                    href=\"https://www.github.com/snehilvj\",\n                    target=\"_blank\",\n                    leftSection=DashIconify(icon=\"radix-icons:external-link\"),\n                ),\n                dmc.MenuItem(\"Useless Button\", n_clicks=0),\n            ]\n        ),\n    ]\n)\n```\n### Icons, Right Section, and Colors\n\nMenu component can be customised by changing icons, right section and even colors. Here's an example.\n\n```python\nfrom dash_iconify import DashIconify\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Menu(\n    [\n        dmc.MenuTarget(dmc.Button(\"Hover for options!\")),\n        dmc.MenuDropdown(\n            [\n                dmc.MenuLabel(\"Application\"),\n                dmc.MenuItem(\n                    \"Settings\", leftSection=DashIconify(icon=\"tabler:settings\")\n                ),\n                dmc.MenuItem(\n                    \"Messages\", leftSection=DashIconify(icon=\"tabler:message\")\n                ),\n                dmc.MenuItem(\"Gallery\", leftSection=DashIconify(icon=\"tabler:photo\")),\n                dmc.MenuItem(\"Search\", leftSection=DashIconify(icon=\"tabler:search\")),\n                dmc.MenuDivider(),\n                dmc.MenuLabel(\"Danger Zone\"),\n                dmc.MenuItem(\n                    \"Transfer my data\",\n                    leftSection=DashIconify(icon=\"tabler:arrows-left-right\"),\n                ),\n                dmc.MenuItem(\n                    \"Delete my account\",\n                    leftSection=DashIconify(icon=\"tabler:trash\"),\n                    color=\"red\",\n                ),\n            ]\n        ),\n    ],\n    trigger=\"hover\",\n)\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n#### Menu Selectors\n\n| Selector      | Static Selector             | Description                            |\n| ------------- | --------------------------- | -------------------------------------- |\n| `dropdown`    | `.mantine-Menu-dropdown`    | Dropdown element                       |\n| `arrow`       | `.mantine-Menu-arrow`       | Dropdown arrow                         |\n| `overlay`     | `.mantine-Menu-overlay`     | Overlay element                        |\n| `divider`     | `.mantine-Menu-divider`     | `Menu.Divider` root element            |\n| `label`       | `.mantine-Menu-label`       | `Menu.Label` root element              |\n| `item`        | `.mantine-Menu-item`        | `Menu.Item` root element               |\n| `itemLabel`   | `.mantine-Menu-itemLabel`   | Label of `Menu.Item`                   |\n| `itemSection` | `.mantine-Menu-itemSection` | Left and right sections of `Menu.Item` |\n| `chevron`     | `.mantine-Menu-chevron`     | Sub menu chevron                       |\n\n\n\n#### Menu Data Attributes\n\n| Selector | Attribute       | Condition                             |\n| -------- | --------------- | ------------------------------------- |\n| `item`   | `data-disabled` | `disabled` prop is set on `Menu.Item` |\n\n---\n\n**a.** Want this table exported to HTML or reStructuredText?\n**b.** Want a full CSS override example using these selectors in a Dash app?\n\n\n### Keyword Arguments\n#### Menu\n\n- children (a list of or a singular dash component, string or number; optional):\n    Menu content.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- arrowOffset (number; optional):\n    Arrow offset in px, `5` by default.\n\n- arrowPosition (a value equal to: 'center', 'side'; optional):\n    Arrow position.\n\n- arrowRadius (number; optional):\n    Arrow `border-radius` in px, `0` by default.\n\n- arrowSize (number; optional):\n    Arrow size in px, `7` by default.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- clickOutsideEvents (list of strings; optional):\n    Events that trigger outside clicks.\n\n- closeDelay (number; optional):\n    Close delay in ms, applicable only to trigger=\"hover\" variant.\n\n- closeOnClickOutside (boolean; optional):\n    Determines whether dropdown should be closed on outside clicks.\n\n- closeOnEscape (boolean; optional):\n    Determines whether dropdown should be closed when Escape key is\n    pressed.\n\n- closeOnItemClick (boolean; optional):\n    Determines whether Menu should be closed when item is clicked.\n\n- defaultOpened (boolean; optional):\n    Uncontrolled menu initial opened state.\n\n- disabled (boolean; optional):\n    If set, popover dropdown will not be rendered.\n\n- floatingStrategy (a value equal to: 'absolute', 'fixed'; optional):\n    Changes floating ui [position\n    strategy](https://floating-ui.com/docs/usefloating#strategy),\n    `'absolute'` by default.\n\n- keepMounted (boolean; optional):\n    If set dropdown will not be unmounted from the DOM when it is\n    hidden, `display: none` styles will be added instead.\n\n- loop (boolean; optional):\n    Determines whether arrow key presses should loop though items\n    (first to last and last to first).\n\n- menuItemTabIndex (a value equal to: 0, -1; optional):\n    Set the `tabindex` on all menu items. Defaults to -1.\n\n- middlewares (dict; optional):\n    Floating ui middlewares to configure position handling, `{ flip:\n    True, shift: True, inline: False }` by default.\n\n    `middlewares` is a dict with keys:\n\n- offset (number; optional):\n    Offset of the dropdown element, `8` by default.\n\n- openDelay (number; optional):\n    Open delay in ms, applicable only to trigger=\"hover\" variant.\n\n- opened (boolean; optional):\n    Controlled menu opened state.\n\n- overlayProps (dict; optional):\n    Props passed down to `Overlay` component.\n\n- portalProps (dict; optional):\n    Props to pass down to the `Portal` when `withinPortal` is True.\n\n- position (a value equal to: 'top', 'right', 'bottom', 'left', 'top-end', 'top-start', 'right-end', 'right-start', 'bottom-end', 'bottom-start', 'left-end', 'left-start'; optional):\n    Dropdown position relative to the target element, `'bottom'` by\n    default.\n\n- positionDependencies (list of boolean | number | string | dict | lists; optional):\n    `useEffect` dependencies to force update dropdown position, `[]`\n    by default.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set border-radius,\n    `theme.defaultRadius` by default.\n\n- returnFocus (boolean; optional):\n    Determines whether focus should be automatically returned to\n    control when dropdown closes, `False` by default.\n\n- shadow (optional):\n    Key of `theme.shadows` or any other valid CSS `box-shadow` value.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- transitionProps (dict; optional):\n    Props passed down to the `Transition` component that used to\n    animate dropdown presence, use to configure duration and animation\n    type, `{ duration: 150, transition: 'fade' }` by default.\n\n    `transitionProps` is a dict with keys:\n\n- trapFocus (boolean; optional):\n    Determines whether dropdown should trap focus of keyboard events.\n\n- trigger (a value equal to: 'click', 'hover', 'click-hover'; optional):\n    Event which should open menu.\n\n- variant (string; optional)\n\n- width (string | number; optional):\n    Dropdown width, or `'target'` to make dropdown width the same as\n    target element, `'max-content'` by default.\n\n- withArrow (boolean; optional):\n    Determines whether component should have an arrow, `False` by\n    default.\n\n- withOverlay (boolean; optional):\n    Determines whether the overlay should be displayed when the\n    dropdown is opened, `False` by default.\n\n- withinPortal (boolean; optional):\n    Determines whether dropdown should be rendered within the\n    `Portal`, `True` by default.\n\n- zIndex (string | number; optional):\n    Dropdown `z-index`, `300` by default.\n#### MenuTarget\n\n- children (a list of or a singular dash component, string or number; required):\n    Content.\n\n- boxWrapperProps (dict; optional):\n    Target box wrapper props.\n\n    `boxWrapperProps` is a dict with keys:\n#### MenuDropdown\n\n- children (a list of or a singular dash component, string or number; required):\n    Content.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n#### MenuItem\n\n- children (a list of or a singular dash component, string or number; optional):\n    Item label.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- closeMenuOnClick (boolean; optional):\n    Determines whether the menu should be closed when the item is\n    clicked, overrides `closeOnItemClick` prop on the `Menu`\n    component.\n\n- color (optional):\n    Key of `theme.colors` or any valid CSS color.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- disabled (boolean; optional):\n    Disables item.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- href (string; optional):\n    href if MenuItem is supposed to be used as a link.\n\n- leftSection (a list of or a singular dash component, string or number; optional):\n    Section displayed on the left side of the label.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- n_clicks (number; default 0):\n    An integer that represents the number of times that this element\n    has been clicked on.\n\n- refresh (boolean; optional):\n    Whether to refresh the page.\n\n- rightSection (a list of or a singular dash component, string or number; optional):\n    Section displayed on the right side of the label.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- target (a value equal to: '_blank', '_self'; optional):\n    Target if MenuItem is supposed to be used as a link.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n#### MenuDivider\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n#### MenuLabel\n\n- children (a list of or a singular dash component, string or number; required):\n    Content.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`."
  },
  {
    "name": "Modal",
    "description": "Use Modal component to show a dialog box or a popup window on the top of the current page.",
    "endpoint": "/components/modal",
    "package": "dash_mantine_components",
    "category": "Overlay",
    "content": "\n\n## Modal  \nUse Modal component to show a dialog box or a popup window on the top of the current page.  \nCategory: Overlay  \n\n### Simple Example\n\nThis is a basic example of dmc.Modal. You can also customize it by setting the desired `radius` or `padding`.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html, Output, Input, State, callback\n\ncomponent = html.Div(\n    [\n        dmc.Button(\"Open Modal\", id=\"modal-demo-button\"),\n        dmc.Modal(\n            title=\"New Modal\",\n            id=\"modal-simple\",\n            children=[\n                dmc.Text(\"I am in a modal component.\"),\n                dmc.Space(h=20),\n                dmc.Group(\n                    [\n                        dmc.Button(\"Submit\", id=\"modal-submit-button\"),\n                        dmc.Button(\n                            \"Close\",\n                            color=\"red\",\n                            variant=\"outline\",\n                            id=\"modal-close-button\",\n                        ),\n                    ],\n                    justify=\"flex-end\",\n                ),\n            ],\n        ),\n    ]\n)\n\n\n@callback(\n    Output(\"modal-simple\", \"opened\"),\n    Input(\"modal-demo-button\", \"n_clicks\"),\n    Input(\"modal-close-button\", \"n_clicks\"),\n    Input(\"modal-submit-button\", \"n_clicks\"),\n    State(\"modal-simple\", \"opened\"),\n    prevent_initial_call=True,\n)\ndef modal_demo(nc1, nc2, nc3, opened):\n    return not opened\n```\n### Different Sizes\n\nSet the size of the modal using the `size` prop.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html, Output, Input, State, callback\n\ncomponent = html.Div(\n    [\n        dmc.Modal(title=\"Size: lg\", id=\"modal-size-lg\", size=\"lg\"),\n        dmc.Modal(title=\"Size: 378px\", id=\"modal-size-378\", size=378),\n        dmc.Modal(title=\"Size: 55%\", id=\"modal-size-55\", size=\"55%\"),\n        dmc.Modal(title=\"Size: full\", id=\"modal-size-full\", fullScreen=True),\n        dmc.Group(\n            [\n                dmc.Button(\"lg\", id=\"lg-modal-button\"),\n                dmc.Button(\"378px\", id=\"378-modal-button\"),\n                dmc.Button(\"55%\", id=\"55-modal-button\"),\n                dmc.Button(\"full\", id=\"full-modal-button\"),\n            ]\n        ),\n    ]\n)\n\n\ndef toggle_modal(n_clicks, opened):\n    return not opened\n\n\nfor size in [\"lg\", \"378\", \"55\", \"full\"]:\n    callback(\n        Output(f\"modal-size-{size}\", \"opened\"),\n        Input(f\"{size}-modal-button\", \"n_clicks\"),\n        State(f\"modal-size-{size}\", \"opened\"),\n        prevent_initial_call=True,\n    )(toggle_modal)\n```\n### Vertically Centered Modal\n\nTo vertically center the modal, set `centered=True`.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html, Output, Input, State, callback\n\ncomponent = html.Div(\n    [\n        dmc.Modal(\n            title=\"Centered Modal\",\n            id=\"modal-centered\",\n            centered=True,\n            children=[dmc.Text(\"This is a vertically centered modal.\")],\n        ),\n        dmc.Button(\"Open modal\", id=\"modal-centered-button\"),\n    ]\n)\n\n\n@callback(\n    Output(\"modal-centered\", \"opened\"),\n    Input(\"modal-centered-button\", \"n_clicks\"),\n    State(\"modal-centered\", \"opened\"),\n    prevent_initial_call=True,\n)\ndef toggle_modal(n_clicks, opened):\n    return not opened\n```\n### Modal With Scroll\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html, Output, Input, State, callback\n\nparagraph = (\n    \"\"\"Dash apps give a point-&-click interface to models written in Python, vastly expanding the notion of what's \n        possible in a traditional 'dashboard.' With Dash apps, data scientists and engineers put complex Python analytics \n        in the hands of business decision-makers and operators. \"\"\"\n    * 10\n)\n\ncomponent = html.Div(\n    [\n        dmc.Modal(\n            id=\"modal-scroll\",\n            title=\"Modal with Scroll\",\n            children=[dmc.Text(paragraph)],\n        ),\n        dmc.Button(\"Modal with Scroll\", id=\"modal-scroll-button\"),\n    ]\n)\n\n\n@callback(\n    Output(\"modal-scroll\", \"opened\"),\n    Input(\"modal-scroll-button\", \"n_clicks\"),\n    State(\"modal-scroll\", \"opened\"),\n    prevent_initial_call=True,\n)\ndef toggle_modal(n_clicks, opened):\n    return not opened\n```\n### Modal Stack\n\nUse `ModalStack` component to render multiple modals at the same time. `ModalStack` keeps track of opened modals, \nmanages `z-index` values, focus trapping and `closeOnEscape` behavior.\n\nDifferences from using multiple Modal components:\n\n- `ModalStack` children must be `ManagedModal` components\n- `ModalStack` manages `z-index` values – modals that are opened later will always have higher `z-index` value disregarding their order in the DOM\n- `ModalStack` disables focus trap and `Escape` key handling for all modals except the one that is currently opened\n- Modals that are not currently visible are present in the DOM but are hidden with `opacity: 0` and `pointer-events: none`\n- Only one overlay is rendered at a time\n\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html, Output, Input, callback, ctx, no_update\n\n\ncomponent = dmc.Center([\n    dmc.ModalStack(\n        id=\"modal-stack\",\n        children=[\n            dmc.ManagedModal(\n                id=\"delete-page\",\n                title=\"Delete this page?\",\n                children=[\n                    dmc.Text(\"Are you sure you want to delete this page? This action cannot be undone.\"),\n                    dmc.Group(\n                        mt=\"lg\",\n                        justify=\"flex-end\",\n                        children=[\n                            dmc.Button(\"Cancel\", id=\"cancel-1\", variant=\"default\"),\n                            dmc.Button(\"Delete\", id=\"delete\", color=\"red\"),\n                        ],\n                    ),\n                ],\n            ),\n            dmc.ManagedModal(\n                id=\"confirm-action\",\n                title=\"Confirm action\",\n                children=[\n                    dmc.Text(\"Are you sure you want to perform this action? This action cannot be undone. If you are sure, press confirm button below.\"),\n                    dmc.Group(\n                        mt=\"lg\",\n                        justify=\"flex-end\",\n                        children=[\n                            dmc.Button(\"Cancel\", id=\"cancel-2\", variant=\"default\"),\n                            dmc.Button(\"Confirm\", id=\"confirm\", color=\"red\"),\n                        ],\n                    ),\n                ],\n            ),\n            dmc.ManagedModal(\n                id=\"really-confirm-action\",\n                title=\"Really confirm action\",\n                children=[\n                    dmc.Text(\"Jokes aside. You have confirmed this action. This is your last chance to cancel it. After you press confirm button below, action will be performed and cannot be undone. For real this time. Are you sure you want to proceed?\"),\n                    dmc.Group(\n                        mt=\"lg\",\n                        justify=\"flex-end\",\n                        children=[\n                            dmc.Button(\"Cancel\", id=\"cancel-3\", variant=\"default\"),\n                            dmc.Button(\"Confirm\", id=\"final-confirm\", color=\"red\"),\n                        ],\n                    ),\n                ],\n            ),\n        ]\n    ),\n    dmc.Button(\"Open modal\", id=\"open\")\n])\n\n\n@callback(\n    Output(\"modal-stack\", \"open\"),\n    Output(\"modal-stack\", \"closeAll\"),\n    Input(\"open\", \"n_clicks\"),\n    Input(\"cancel-1\", \"n_clicks\"),\n    Input(\"cancel-2\", \"n_clicks\"),\n    Input(\"cancel-3\", \"n_clicks\"),\n    Input(\"delete\", \"n_clicks\"),\n    Input(\"confirm\", \"n_clicks\"),\n    Input(\"final-confirm\", \"n_clicks\"),\n    prevent_initial_call=True,\n)\ndef control_modals(*_):\n    trigger = ctx.triggered_id\n    if trigger == \"open\":\n        return \"delete-page\", False\n    if trigger in (\"cancel-1\", \"cancel-2\", \"cancel-3\", \"final-confirm\"):\n        return None, True\n    if trigger == \"delete\":\n        return \"confirm-action\", False\n    if trigger == \"confirm\":\n        return \"really-confirm-action\", False\n    return no_update, no_update\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n| Name    | Static selector        | Description                                                           |\n|:--------|:-----------------------|:----------------------------------------------------------------------|\n| root    | .mantine-Modal-root    | Root element                                                          |\n| inner   | .mantine-Modal-inner   | Element used to center modal, has fixed position, takes entire screen |\n| content | .mantine-Modal-content | `Modal.Content` root element                                          |\n| header  | .mantine-Modal-header  | Contains title and close button                                       |\n| overlay | .mantine-Modal-overlay | Overlay displayed under the `Modal.Content`                           |\n| title   | .mantine-Modal-title   | Modal title (h2 tag), displayed in the header                         |\n| body    | .mantine-Modal-body    | Modal body, displayed after header                                    |\n| close   | .mantine-Modal-close   | Close button                                                          |\n\n\n### Keyword Arguments\n#### Modal\n\n- children (a list of or a singular dash component, string or number; optional):\n    Modal content.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- centered (boolean; optional):\n    Determines whether the modal should be centered vertically,\n    `False` by default.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- closeButtonProps (dict; optional):\n    Props passed down to the close button.\n\n    `closeButtonProps` is a dict with keys:\n\n- closeOnClickOutside (boolean; optional):\n    Determines whether the modal/drawer should be closed when user\n    clicks on the overlay, `True` by default.\n\n- closeOnEscape (boolean; optional):\n    Determines whether `onClose` should be called when user presses\n    the escape key, `True` by default.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- fullScreen (boolean; optional):\n    Determines whether the modal should take the entire screen,\n    `False` by default.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- keepMounted (boolean; optional):\n    If set modal/drawer will not be unmounted from the DOM when it is\n    hidden, `display: none` styles will be added instead, `False` by\n    default.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- lockScroll (boolean; optional):\n    Determines whether scroll should be locked when `opened={True}`,\n    `True` by default.\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- opened (boolean; default False):\n    Determines whether modal/drawer is opened.\n\n- overlayProps (dict; optional):\n    Props passed down to the `Overlay` component, use to configure\n    opacity, `background-color`, styles and other properties.\n\n    `overlayProps` is a dict with keys:\n\n- padding (number; optional):\n    Key of `theme.spacing` or any valid CSS value to set content,\n    header and footer padding, `'md'` by default.\n\n- portalProps (dict; optional):\n    Props passed down to the Portal component when `withinPortal` is\n    set.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set\n    `border-radius`, `theme.defaultRadius` by default.\n\n- removeScrollProps (dict; optional):\n    Props passed down to react-remove-scroll, can be used to customize\n    scroll lock behavior.\n\n- returnFocus (boolean; optional):\n    Determines whether focus should be returned to the last active\n    element when `onClose` is called, `True` by default.\n\n- shadow (optional):\n    Key of `theme.shadows` or any valid CSS box-shadow value, 'xl' by\n    default.\n\n- size (number; optional):\n    Controls width of the content area, `'md'` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- title (a list of or a singular dash component, string or number; optional):\n    Modal title.\n\n- transitionProps (dict; optional):\n    Props added to the `Transition` component that used to animate\n    overlay and body, use to configure duration and animation type, `{\n    duration: 200, transition: 'pop' }` by default.\n\n    `transitionProps` is a dict with keys:\n\n- trapFocus (boolean; optional):\n    Determines whether focus should be trapped, `True` by default.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withCloseButton (boolean; optional):\n    Determines whether the close button should be rendered, `True` by\n    default.\n\n- withOverlay (boolean; optional):\n    Determines whether the overlay should be rendered, `True` by\n    default.\n\n- withinPortal (boolean; optional):\n    Determines whether the component should be rendered inside\n    `Portal`, `True` by default.\n\n- xOffset (string | number; optional):\n    Left/right modal offset, `5vw` by default.\n\n- yOffset (string | number; optional):\n    Top/bottom modal offset, `5dvh` by default.\n\n- zIndex (string | number; optional):\n    `z-index` CSS property of the root element, `200` by default.\n#### ModalStack\n\n- children (list of dicts; optional):\n    ManagedModal content.\n\n    `children` is a list of dicts with keys:\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- close (string | list of strings; optional):\n    Closes one or more modals by ID. Accepts a single ID (string or\n    dict) or a list of IDs.\n\n- closeAll (boolean; optional):\n    Closes all modals in the ModalStack.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- open (string | list of strings; optional):\n    Opens one or more modals by ID. Accepts a single ID (string or\n    dict) or a list of IDs.\n\n- state (dict; optional):\n    Current opened state of each modal. Read only.\n\n    `state` is a dict with keys:\n\n- tabIndex (number; optional):\n    tab-index.\n\n- toggle (string | list of strings; optional):\n    Toggles one or more modals by ID. Accepts a single ID (string or\n    dict) or a list of IDs.\n#### ManagedModal\n\n> Note:  ManagedModal is for use in the ModalStack component. id is required.  open/closed state is controlled by ModalStack.\n\n- children (a list of or a singular dash component, string or number; optional):\n    Modal content.\n\n- id (string; required):\n    Unique ID to identify this component. Required for use with\n    StackModal.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- centered (boolean; optional):\n    Determines whether the modal should be centered vertically,\n    `False` by default.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- closeButtonProps (dict; optional):\n    Props passed down to the close button.\n\n    `closeButtonProps` is a dict with keys:\n\n- closeOnClickOutside (boolean; optional):\n    Determines whether the modal/drawer should be closed when user\n    clicks on the overlay, `True` by default.\n\n- closeOnEscape (boolean; optional):\n    Determines whether `onClose` should be called when user presses\n    the escape key, `True` by default.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- fullScreen (boolean; optional):\n    Determines whether the modal should take the entire screen,\n    `False` by default.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- keepMounted (boolean; optional):\n    If set modal/drawer will not be unmounted from the DOM when it is\n    hidden, `display: none` styles will be added instead, `False` by\n    default.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- lockScroll (boolean; optional):\n    Determines whether scroll should be locked when `opened={True}`,\n    `True` by default.\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- overlayProps (dict; optional):\n    Props passed down to the `Overlay` component, use to configure\n    opacity, `background-color`, styles and other properties.\n\n    `overlayProps` is a dict with keys:\n\n- padding (number; optional):\n    Key of `theme.spacing` or any valid CSS value to set content,\n    header and footer padding, `'md'` by default.\n\n- portalProps (dict; optional):\n    Props passed down to the Portal component when `withinPortal` is\n    set.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set\n    `border-radius`, `theme.defaultRadius` by default.\n\n- removeScrollProps (dict; optional):\n    Props passed down to react-remove-scroll, can be used to customize\n    scroll lock behavior.\n\n- returnFocus (boolean; optional):\n    Determines whether focus should be returned to the last active\n    element when `onClose` is called, `True` by default.\n\n- shadow (optional):\n    Key of `theme.shadows` or any valid CSS box-shadow value, 'xl' by\n    default.\n\n- size (number; optional):\n    Controls width of the content area, `'md'` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- title (a list of or a singular dash component, string or number; optional):\n    Modal title.\n\n- transitionProps (dict; optional):\n    Props added to the `Transition` component that used to animate\n    overlay and body, use to configure duration and animation type, `{\n    duration: 200, transition: 'pop' }` by default.\n\n    `transitionProps` is a dict with keys:\n\n- trapFocus (boolean; optional):\n    Determines whether focus should be trapped, `True` by default.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withCloseButton (boolean; optional):\n    Determines whether the close button should be rendered, `True` by\n    default.\n\n- withOverlay (boolean; optional):\n    Determines whether the overlay should be rendered, `True` by\n    default.\n\n- withinPortal (boolean; optional):\n    Determines whether the component should be rendered inside\n    `Portal`, `True` by default.\n\n- xOffset (string | number; optional):\n    Left/right modal offset, `5vw` by default.\n\n- yOffset (string | number; optional):\n    Top/bottom modal offset, `5dvh` by default.\n\n- zIndex (string | number; optional):\n    `z-index` CSS property of the root element, `200` by default."
  },
  {
    "name": "Popover",
    "description": "Display popover section relative to given target element.",
    "endpoint": "/components/popover",
    "package": "dash_mantine_components",
    "category": "Overlay",
    "content": "\n\n## Popover  \nDisplay popover section relative to given target element.  \nCategory: Overlay  \n\n### Simple Example\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Popover(\n    [\n        dmc.PopoverTarget(dmc.Button(\"Toggle Popover\")),\n        dmc.PopoverDropdown(dmc.Text(\"This popover is opened on button click\")),\n    ],\n    width=200,\n    position=\"bottom\",\n    withArrow=True,\n    shadow=\"md\",\n)\n```\n### Popover Target\n\nAny component you specify in dmc.PopoverTarget is wrapped by a dmc.Box component under the hood. So adding a margin\nto your target component will also move the dropdown away. In order to prevent this, add margin to the wrapper component\nusing the prop `boxWrapperProps` in dmc.PopoverTarget.\n\n### Focus Trap\n\nIf you need to use any interactive elements within Popover, set `trapFocus` prop:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Popover(\n    [\n        dmc.PopoverTarget(dmc.Button(\"Toggle Popover\")),\n        dmc.PopoverDropdown(\n            [\n                dmc.TextInput(label=\"Name\", placeholder=\"Name\", size=\"xs\"),\n                dmc.TextInput(\n                    label=\"Email\", placeholder=\"john@doe.com\", size=\"xs\", mt=\"xs\"\n                ),\n            ]\n        ),\n    ],\n    width=300,\n    position=\"bottom\",\n    withArrow=True,\n    trapFocus=True,\n    shadow=\"md\",\n)\n```\n### Inline elements\n\nEnable inline middleware to use Popover with inline elements.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Flex(\n    [\n        \"Here is some text with\",\n        dmc.Popover(\n            [\n                dmc.PopoverTarget(dmc.Mark(\" an inline popover \")),\n                dmc.PopoverDropdown(\" more info\"),\n            ],\n            middlewares={\"flip\": True, \"shift\": True, \"inline\": True},\n        ),\n        \"and more text after.\",\n    ],\n    direction=\"row\",\n    gap=\"xs\",\n)\n```\n### Same width\n\nSet w=\"target\" prop to make Popover dropdown take the same width as target element.\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Popover(\n    [\n        dmc.PopoverTarget(dmc.Button(\"Toggle Popover\", w=200)),\n        dmc.PopoverDropdown(\n            dmc.Text(\n                \"This popover has same width as target, it is useful when you are building input dropdowns\"\n            )\n        ),\n    ],\n    width=\"target\",\n    position=\"bottom\",\n    withArrow=True,\n    shadow=\"md\",\n)\n```\n### With overlay\nSet `withOverlay` prop to add overlay behind the dropdown. You can pass additional configuration to `Overlay` component with `overlayProps` prop:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Popover(\n    [\n        dmc.PopoverTarget(dmc.Button(\"Toggle Popover\")),\n        dmc.PopoverDropdown(dmc.Text(\"This popover is opened on button click\")),\n    ],\n    width=200,\n    position=\"bottom\",\n    withArrow=True,\n    shadow=\"md\",\n    withOverlay=True,\n    overlayProps={\"zIndex\": 10000, \"blur\": '8px'},\n    zIndex=10001\n)\n```\n### Hide detached\n\nUse `hideDetached` prop to configure how the dropdown behaves when the target element is hidden with styles \n(`display: none, visibility: hidden,` etc.), removed from the DOM, or when the target element is scrolled out of the viewport.\n\nBy default, `hideDetached` is enabled – the dropdown is hidden with the target element. You can change this behavior\nwith `hideDetached=False`. To see the difference, try to scroll the container that holds the Popover components:\n\n\n```python\nimport dash_mantine_components as dmc\n\n\ncomponent = dmc.Box(\n    style={\"border\": \"1px solid var(--mantine-color-dimmed)\", \"overflow\": \"auto\"},\n    p=\"xl\",\n    w=400,\n    h=200,\n    children=[\n        dmc.Box(\n            w=1000,\n            h=400,\n            children=dmc.Group(\n                [\n                    dmc.Popover(\n                        opened=True,\n                        width=\"target\",\n                        position=\"bottom\",\n                        closeOnClickOutside=False,\n                        children=[\n                            dmc.PopoverTarget(\n                                dmc.Button(\"Toggle popover\")\n                            ),\n                            dmc.PopoverDropdown(\"This popover dropdown is hidden when detached\"),\n                        ],\n                    ),\n                    dmc.Popover(\n                        opened=True,\n                        width=\"target\",\n                        position=\"bottom\",\n                        closeOnClickOutside=False,\n                        hideDetached=False,\n                        children=[\n                            dmc.PopoverTarget(\n                                dmc.Button(\"Toggle popover\")\n                            ),\n                            dmc.PopoverDropdown(\"This popover dropdown is visible when detached\"),\n                        ],\n                    ),\n                ]\n            ),\n        )\n    ]\n)\n```\n### Click outside\nBy default, `Popover` closes when you click outside of the dropdown. To disable this behavior, set `closeOnClickOutside=False`.\n\nYou can configure events that are used for click outside detection with `clickOutsideEvents` prop. By default, `Popover`\nlistens to `mousedown` and `touchstart` events. You can change it to any other events, for example, `mouseup` and `touchend`:\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Popover(\n    width=200,\n    position=\"bottom\",\n    clickOutsideEvents=[\"mouseup\", \"touchend\"],\n    children=[\n        dmc.PopoverTarget(\n            dmc.Button(\"Toggle popover\", id=\"toggle-btn\")\n        ),\n        dmc.PopoverDropdown(\n            dmc.Text(\n                \"Popover will be closed with mouseup and touchend events\",\n                size=\"xs\"\n            )\n        )\n    ]\n)\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n#### Popover Selectors\n\n| Selector  | Static selector             | Description          |\n|-----------|------------------------------|----------------------|\n| dropdown  | .mantine-Popover-dropdown    | Dropdown element     |\n| arrow     | .mantine-Popover-arrow       | Dropdown arrow       |\n| overlay   | .mantine-Popover-overlay     | Overlay element      |\n\n\n#### Popover CSS Variables\n\n| Selector  | Variable           | Description                    |\n|-----------|--------------------|--------------------------------|\n| dropdown  | --popover-radius   | Controls dropdown border-radius |\n|           | --popover-shadow   | Controls dropdown box-shadow    |\n\n\n#### Popover Data Attributes\n\n| Selector  | Attribute       | Value                             |\n|-----------|-----------------|-----------------------------------|\n| dropdown  | data-position   | Value of floating UI dropdown position |\n\n\n\n### Keyword Arguments\n#### Popover\n\n- children (a list of or a singular dash component, string or number; optional):\n    `Popover.Target` and `Popover.Dropdown` components.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- arrowOffset (number; optional):\n    Arrow offset in px, `5` by default.\n\n- arrowPosition (a value equal to: 'center', 'side'; optional):\n    Arrow position.\n\n- arrowRadius (number; optional):\n    Arrow `border-radius` in px, `0` by default.\n\n- arrowSize (number; optional):\n    Arrow size in px, `7` by default.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- clickOutsideEvents (list of strings; optional):\n    Events that trigger outside clicks.\n\n- closeOnClickOutside (boolean; optional):\n    Determines whether dropdown should be closed on outside clicks,\n    `True` by default.\n\n- closeOnEscape (boolean; optional):\n    Determines whether dropdown should be closed when `Escape` key is\n    pressed, `True` by default.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- disabled (boolean; optional):\n    If set, popover dropdown will not be rendered.\n\n- floatingStrategy (a value equal to: 'absolute', 'fixed'; optional):\n    Changes floating ui [position\n    strategy](https://floating-ui.com/docs/usefloating#strategy),\n    `'absolute'` by default.\n\n- hideDetached (boolean; optional):\n    If set, the dropdown is hidden when the element is hidden with\n    styles or not visible on the screen, `True` by default.\n\n- keepMounted (boolean; optional):\n    If set dropdown will not be unmounted from the DOM when it is\n    hidden, `display: none` styles will be added instead.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- middlewares (dict; optional):\n    Floating ui middlewares to configure position handling, `{ flip:\n    True, shift: True, inline: False }` by default.\n\n    `middlewares` is a dict with keys:\n\n- offset (number; optional):\n    Offset of the dropdown element, `8` by default.\n\n- opened (boolean; default False):\n    Controlled dropdown opened state.\n\n- overlayProps (dict; optional):\n    Props passed down to `Overlay` component.\n\n- portalProps (dict; optional):\n    Props to pass down to the `Portal` when `withinPortal` is True.\n\n- position (a value equal to: 'top', 'right', 'bottom', 'left', 'top-end', 'top-start', 'right-end', 'right-start', 'bottom-end', 'bottom-start', 'left-end', 'left-start'; optional):\n    Dropdown position relative to the target element, `'bottom'` by\n    default.\n\n- positionDependencies (list of boolean | number | string | dict | lists; optional):\n    `useEffect` dependencies to force update dropdown position, `[]`\n    by default.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set border-radius,\n    `theme.defaultRadius` by default.\n\n- returnFocus (boolean; optional):\n    Determines whether focus should be automatically returned to\n    control when dropdown closes, `False` by default.\n\n- shadow (optional):\n    Key of `theme.shadows` or any other valid CSS `box-shadow` value.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- transitionProps (dict; optional):\n    Props passed down to the `Transition` component that used to\n    animate dropdown presence, use to configure duration and animation\n    type, `{ duration: 150, transition: 'fade' }` by default.\n\n    `transitionProps` is a dict with keys:\n\n- trapFocus (boolean; optional):\n    Determines whether focus should be trapped within dropdown,\n    `False` by default.\n\n- variant (string; optional):\n    variant.\n\n- width (string | number; optional):\n    Dropdown width, or `'target'` to make dropdown width the same as\n    target element, `'max-content'` by default.\n\n- withArrow (boolean; optional):\n    Determines whether component should have an arrow, `False` by\n    default.\n\n- withOverlay (boolean; optional):\n    Determines whether the overlay should be displayed when the\n    dropdown is opened, `False` by default.\n\n- withRoles (boolean; optional):\n    Determines whether dropdown and target elements should have\n    accessible roles, `True` by default.\n\n- withinPortal (boolean; optional):\n    Determines whether dropdown should be rendered within the\n    `Portal`, `True` by default.\n\n- zIndex (string | number; optional):\n    Dropdown `z-index`, `300` by default.\n#### PopoverTarget\n\n- children (a list of or a singular dash component, string or number; required):\n    Content.\n\n- boxWrapperProps (dict; optional):\n    Target box wrapper props.\n\n    `boxWrapperProps` is a dict with keys:\n#### PopoverDropdown\n\n- children (a list of or a singular dash component, string or number; required):\n    Content.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`."
  },
  {
    "name": "Tooltip",
    "description": "Use Tooltip component to render tooltip at given element on mouse over or any other event",
    "endpoint": "/components/tooltip",
    "package": "dash_mantine_components",
    "category": "Overlay",
    "content": "\n\n## Tooltip  \nUse Tooltip component to render tooltip at given element on mouse over or any other event  \nCategory: Overlay  \n\n### Introduction\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Tooltip(\n    dmc.Button(\"Button with tooltip\"),\n    label=\"Tooltip\"\n)\n```\n### Interactive example\n\n### Colors\n\nTooltip supports all colors defined in Mantine's theme colors.\n\n```python\nimport dash_mantine_components as dmc\n\ndmc.Tooltip(\n    label=\"This is a red colored tooltip.\",\n    color=\"red\"\n)\n```\n\n### Position\n\nTooltip position relative to target element is defined by the `position` prop.\n\n\n```python\nimport dash_mantine_components as dmc\n\ndmc.Tooltip(\n    label=\"This is a tooltip\",\n    position=\"right\",\n    children=[...]\n)\n```\n\n### Offset\nThe `offset` sets the space between tooltip and target element in px, can be negative.\n\n\n```python\nimport dash_mantine_components as dmc\n\ndmc.Tooltip(\n    label=\"This is a tooltip\",\n    position=\"right\",\n    offset=5,\n    children=[...]\n)\n```\n### Offset multi axis\n\nTo control `offset` on both axis, pass dictionary with `mainAxis` and `crossAxis` properties:\n\nFor an interactive demo see the [Mantine docs](https://mantine.dev/core/tooltip/#offset)\n\n```python\nimport dash_mantine_components as dmc\n\ndmc.Tooltip(\n    label=\"This is a tooltip\",\n    position=\"top\",\n    offset={ \"mainAxis\": 50, \"crossAxis\": -50},\n    children=[...]\n)\n```\n\n\n\n### Arrow\n\nSet `withArrow` prop to add an arrow to the tooltip. Arrow is a div element rotated with `transform: rotate(45deg)`.\n\n`arrowPosition` prop determines how arrow is position relative to the target element when position is set to `*-start` \nand `*-end` values on `Popover` component. By default, the value is `center` – the arrow is positioned in the center of\nthe target element if it is possible.\n\nIf you change `arrowPosition` to `side`, then the arrow will be positioned on the side of the target element, and you\nwill be able to control arrow offset with `arrowOffset` prop. Note that when `arrowPosition` is set to `center`, \n`arrowOffset` prop is ignored.\n\n### Multiline\n\nBy default, tooltip white-space property is set to nowrap. To change that use:\n\n* `multiline` - to enable line breaks\n* `w` - to define tooltip width in px\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Center(\n    [\n        dmc.Tooltip(\n            multiline=True,\n            w=220,\n            withArrow=True,\n            label=\"Use this button to save this information in your profile,\"\n            \" after that you will be able to access it any time and share\"\n            \" it via email.\",\n            children=dmc.Button(\"Multiline Tooltip\", variant=\"outline\"),\n        )\n    ]\n)\n```\n### Inline\n\nUse the `boxWrapperProps` to style the tooltip for inline elements.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Text(\n    [\n        \"NASA’s \",\n        dmc.Tooltip(\n            dmc.Mark(\"JWST\"),\n            label=\"James Webb Space Telescope\",\n            boxWrapperProps={\"style\": {\"display\": \"inline-block\"}},\n        ),\n        \" is the most powerful space telescope ever built.\",\n    ],\n    span=True,\n)\n```\n### Transitions\n\nTooltip is built with Transition component, it supports the following props.\n\n* `transition` - predefined transition name or transition object\n* `duration` - transition duration in ms, defaults to 100ms\n* `timingFunction` - timing function\n\n```python\nimport dash_mantine_components as dmc\n\ndmc.Tooltip(\n    label=\"Fade transitions\",\n    transitionProps={\n        \"transition\": \"fade\", \n        \"duration\": 200,\n        \"timingFunction\": \"ease\"\n    },\n    children=[\n        # children\n    ],\n)\n```\n\n### Close and Open Delay\n\nYou can delay tooltip open/close events by setting `openDelay` and `closeDelay` props in ms. Both props default to 0 \nand reset if user moves mouse over/out of target element before delay is expired.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Group(\n    [\n        dmc.Tooltip(\n            dmc.Button(\"Delay Open - 500ms\", variant=\"outline\"),\n            label=\"Opened after 500ms\",\n            openDelay=500,\n        ),\n        dmc.Tooltip(\n            dmc.Button(\"Delay Close - 500ms\", variant=\"outline\"),\n            label=\"Closed after 500ms\",\n            closeDelay=500,\n        ),\n    ]\n)\n```\n### Floating Tooltip\n\n`dmc.FloatingTooltip` component has the same API as `dmc.Tooltip` component but tooltip will follow mouse.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Center(\n    [\n        dmc.FloatingTooltip(\n            label=\"Tooltip\",\n            color=\"orange\",\n            children=[\n                dmc.Center(\n                    dmc.Text(\"Hover over the box to see tooltip\"),\n                    style={\n                        \"height\": 100,\n                        \"padding\": 10,\n                        \"border\": \"2px solid  var(--mantine-color-gray-6)\",\n                    },\n                )\n            ],\n        )\n    ]\n)\n```\n### Target\n\n`target` prop is an alternative to the `Tooltip` `children`. It accepts a string (selector), an HTML element or a `ref`\nobject with HTML element. Use target prop when you do not render tooltip target as JSX element, like when creating a Tooltip\ncomponent in a clientside callback.\n\nExample of using target prop with a string selector:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Box([\n    dmc.Button(\"Hover me to see tooltip\", id=\"my-target\"),\n    dmc.Tooltip(target=\"#my-target\", label=\"Tooltip over button\")\n])\n```\n### Limitations\n#### Setting width\n\nTooltip children are wrapped in a `Box` with a default width of `fit-content`, which may override the width defined in the children. To work around this, you can set the width using `boxWrapperProps`.\n\n`boxWrapperProps` is a dictionary of style properties passed to the `Box` that wraps the tooltip children. In this example, both the `Textarea` and `boxWrapperProps` are used to set the width to 100%.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Tooltip(\n    label=\"tooltip label\",\n    children=dmc.Textarea(\n        value=\"How to set the width of the textarea with a tooltip to 100%\", w=\"100%\"\n    ),\n    boxWrapperProps={\"w\": \"100%\"},\n)\n```\n#### Tooltip margin\n\nAny component you specify in `Tooltip` `children` prop is wrapped by a `Box` component under the hood. So adding a margin\nto your target component will also move the tooltip away. In order to prevent this, add margin to the wrapper component\nusing the prop `boxWrapperProps` in `Tooltip`.\n\n\n\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n#### Tooltip selectors\n\n| Selector | Static selector | Description |\n|----------|----------------|-------------|\n| tooltip  | .mantine-Tooltip-tooltip | Root element |\n| arrow    | .mantine-Tooltip-arrow   | Tooltip arrow, rendered inside tooltip |\n\n#### Tooltip CSS variables\n\n| Selector | Variable | Description |\n|----------|----------|-------------|\n| tooltip  | --tooltip-bg | Tooltip background-color |\n| tooltip  | --tooltip-radius | Tooltip border-radius |\n| tooltip  | --tooltip-color | Controls tooltip text color |\n\n#### Tooltip data attributes\n\n| Selector | Attribute | Condition |\n|----------|-----------|------------|\n| tooltip  | data-multiline | `multiline` prop is set |\n\n\n\n### Keyword Arguments\n#### Tooltip\n\n- children (a list of or a singular dash component, string or number; optional):\n    Target element, must support `ref` prop and `...others`.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- arrowOffset (number; optional):\n    Arrow offset in px, `5` by default.\n\n- arrowPosition (a value equal to: 'center', 'side'; optional):\n    Arrow position relative to the tooltip, `side` by default.\n\n- arrowRadius (number; optional):\n    Arrow `border-radius` in px, `0` by default.\n\n- arrowSize (number; optional):\n    Arrow size in px, `4` by default.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- autoContrast (boolean; optional):\n    Determines whether tooltip text color should depend on\n    background-color. If luminosity of the color prop is less than\n    theme.luminosityThreshold, then theme.white will be used for text\n    color, otherwise theme.black. Overrides theme.autoContrast.\n\n- boxWrapperProps (dict; optional):\n    Target box wrapper props.\n\n    `boxWrapperProps` is a dict with keys:\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- closeDelay (number; optional):\n    Close delay in ms, `0` by default.\n\n- color (optional):\n    Key of `theme.colors` or any valid CSS color, controls tooltip\n    background, by default set based on current color scheme.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- disabled (boolean; optional):\n    If set, tooltip element will not be rendered.\n\n- events (dict; optional):\n    Determines which events will be used to show tooltip, `{ hover:\n    True, focus: False, touch: False }` by default.\n\n    `events` is a dict with keys:\n\n- floatingStrategy (a value equal to: 'fixed', 'absolute'; optional):\n    Changes floating ui [position\n    strategy](https://floating-ui.com/docs/usefloating#strategy),\n    `'absolute'` by default.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- inline (boolean; optional):\n    Must be set if the tooltip target is an inline element.\n\n- keepMounted (boolean; optional):\n    If set, the tooltip will not be unmounted from the DOM when it is\n    hidden, `display: none` styles will be applied instead.\n\n- label (a list of or a singular dash component, string or number; required):\n    Tooltip content.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- middlewares (dict; optional):\n    Floating ui middlewares to configure position handling, `{ flip:\n    True, shift: True, inline: False }` by default.\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- multiline (boolean; optional):\n    Determines whether content should be wrapped on to the next line,\n    `False` by default.\n\n- offset (number; optional):\n    Space between target element and tooltip in px, `5` by default.\n    Number or FloatingAxesOffsets.\n\n- openDelay (number; optional):\n    Open delay in ms.\n\n- opened (boolean; optional):\n    Controlled opened state.\n\n- portalProps (dict; optional):\n    Props to pass down to the portal when withinPortal is True.\n\n- position (a value equal to: 'top', 'left', 'bottom', 'right', 'top-end', 'top-start', 'left-end', 'left-start', 'bottom-end', 'bottom-start', 'right-end', 'right-start'; optional):\n    Tooltip position relative to target element (`Tooltip` component)\n    or mouse (`Tooltip.Floating` component).\n\n- positionDependencies (list of boolean | number | string | dict | lists; optional):\n    `useEffect` dependencies to force update tooltip position.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set border-radius,\n    numbers are converted to rem, `theme.defaultRadius` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- target (string; optional):\n    Selector, ref of an element or element itself that should be used\n    for positioning.\n\n- transitionProps (dict; optional):\n    Props passed down to the `Transition` component that used to\n    animate tooltip presence, use to configure duration and animation\n    type, `{ duration: 100, transition: 'fade' }` by default.\n\n    `transitionProps` is a dict with keys:\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withArrow (boolean; optional):\n    Determines whether the tooltip should have an arrow, `False` by\n    default.\n\n- withinPortal (boolean; optional):\n    Determines whether tooltip should be rendered within `Portal`,\n    `True` by default.\n\n- zIndex (string | number; optional):\n    Tooltip z-index, `300` by default.\n#### FloatingTooltip\n\n- children (a list of or a singular dash component, string or number; optional):\n    Target element, must support `ref` prop and `...others`.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- autoContrast (boolean; optional):\n    Determines whether tooltip text color should depend on\n    background-color. If luminosity of the color prop is less than\n    theme.luminosityThreshold, then theme.white will be used for text\n    color, otherwise theme.black. Overrides theme.autoContrast.\n\n- boxWrapperProps (dict; optional):\n    Target box wrapper props.\n\n    `boxWrapperProps` is a dict with keys:\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- color (optional):\n    Key of `theme.colors` or any valid CSS color, controls tooltip\n    background, by default set based on current color scheme.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- disabled (boolean; optional):\n    If set, tooltip element will not be rendered.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- label (a list of or a singular dash component, string or number; required):\n    Tooltip content.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- middlewares (dict; optional):\n    Floating ui middlewares to configure position handling, `{ flip:\n    True, shift: True, inline: False }` by default.\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- multiline (boolean; optional):\n    Determines whether content should be wrapped on to the next line,\n    `False` by default.\n\n- offset (number; optional):\n    Offset from mouse in px, `10` by default.\n\n- portalProps (dict; optional):\n    Props to pass down to the portal when withinPortal is True.\n\n- position (a value equal to: 'top', 'left', 'bottom', 'right', 'top-end', 'top-start', 'left-end', 'left-start', 'bottom-end', 'bottom-start', 'right-end', 'right-start'; optional):\n    Tooltip position relative to target element (`Tooltip` component)\n    or mouse (`Tooltip.Floating` component).\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set border-radius,\n    numbers are converted to rem, `theme.defaultRadius` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- target (string; optional):\n    Selector, ref of an element or element itself that should be used\n    for positioning.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withinPortal (boolean; optional):\n    Determines whether tooltip should be rendered within `Portal`,\n    `True` by default.\n\n- zIndex (string | number; optional):\n    Tooltip z-index, `300` by default."
  },
  {
    "name": "Migration Guide",
    "endpoint": "/migration",
    "description": "This page helps you migrate from an old version to a newer version of Dash Mantine Components",
    "category": "Releases",
    "order": 500,
    "content": "\n\n## Migration Guide  \nThis page helps you migrate from an old version to a newer version of Dash Mantine Components  \nCategory: Releases  \n\n### Version Compatibility  \n\nBelow is a list of Dash Mantine Components (DMC) versions, their corresponding Mantine versions, and required Dash versions.\n\n| Dash Mantine Components | Release Date | Mantine Version | Required Dash Version |\n|-------------------------|--------------|-----------------|----|\n| **2.6.0**               | Feb 2026     | 8.3.14          | `dash>=2.0.0` |\n| **2.5.0**               | Jan 2026     | 8.3.13          | `dash>=2.0.0` |\n| **2.4.1**               | Dec 2025     | 8.3.10          | `dash>=2.0.0` |\n| **2.4.0**               | Nov 2025     | 8.3.6           | `dash>=2.0.0` |\n| **2.3.0**               | Sep 2025     | 8.3.1           | `dash>=2.0.0` |\n| **2.2.1**               | Aug 2025     | 8.2.7           | `dash>=2.0.0` |\n| **2.2.0**               | Aug 2025     | 8.2.5           | `dash>=2.0.0` |\n| **2.1.0**               | Jul 2025     | 8.1.2           | `dash>=2.0.0` |\n| **2.0.0**               | Jun 2025     | 8.0.2           | `dash>=2.0.0` |\n| **1.3.0**               | May 2025     | 7.17.7          | `dash>=2.0.0` |\n| **1.2.0**               | Apr 2025     | 7.17.4          | `dash>=2.0.0` |\n| **1.1.0**               | Mar 2025     | 7.17.2          | `dash>=2.0.0` |\n| **1.0.0**               | Mar 2025     | 7.17.0          | `dash>=2.0.0` |\n| **0.15.0**              | Nov 2024     | 7.14.1          | `dash>=2.0.0,<3.0.0`|\n| **0.14.0**              | Apr 2024     | 7.0             | `dash>=2.0.0,<3.0.0` |\n| **0.13.0a1**            | Aug 2023     | 6.0             | `dash>=2.0.0,<3.0.0` |\n| **0.12.0**              | Mar 2023     | 5.10.5          | `dash>=2.0.0,<3.0.0` |\n\n\n### Migrating from 1.2.0 to 2.x\n\nDMC V2 is based on Mantine V8.  For more information see the [Mantine 8 Changelog.](https://mantine.dev/changelog/8-0-0/)\nand the [DMC 2.0.0 Release announcement.]( /release-2-0-0)\n\nStarting with DMC v2.3.0,` RichTextEditor` uses Tiptap v3. There are no known breaking changes, but projects with\ncustomizations—such as clientside callbacks that rely on the Tiptap API or custom controls—should check for compatibility.\nThe Text Style API has also been updated, which may affect how JSON and HTML content are generated. For details on\nchanges and new features, see the [Tiptap v3 changelog](https://tiptap.dev/docs/resources/whats-new).\n\n\n#### Switch withThumbIndicator\n\n[Switch](/components/switch) component default styles were updated, it now includes checked state indicator inside the\nthumb. If you want to use old styles without indicator, set `withThumbIndicator` prop to false in theme:\n\n```python\ndmc.MantineProvider(    \n    theme={\n        \"components\": {\n            \"Switch\": {\n                \"defaultProps\": {\n                    # ✅ Disable withThumbIndicator if you want to use old styles\n                    \"withThumbIndicator\": False,                  \n                },\n            },\n        },\n    }\n)\n```\n#### DatesProvider timezone\nDatesProvider component no longer supports timezone option:\n\n```python\ndmc.DatesProvider(\n    # children= ...\n    # ❌ timezone option is no longer supported\n    setting={\"timezone\": 'UTC', \"consistentWeeks\": True}\n)\n```\n\n\n\n#### DateTimePicker timeInputProps\n`DateTimePicker` component no longer accepts `timeInputProps` prop, as the underlying `TimeInput` component was\nreplaced with `TimePicker`. To pass props down to `TimePicker` component, use `timePickerProps` prop instead.\n\n1.x\n```python\ndmc.DateTimePicker(\n    # ❌ timeInputProps is no longer available\n      timeInputProps={\n        \"leftSection\": dashIconify(icon=\"bi:clock\"),\n      }\n)\n```\n\n2.x\n```python\ndmc.DateTimePicker(\n    #   ✅ Use timePickerProps instead of timeInputProps\n      timePickerProps={\n        \"leftSection\": dashIconify(icon=\"bi:clock\"),\n         \"minutesStep\": 5,\n        \"withDropdown\": True,\n      }\n)\n```\n\n#### CodeHighlight usage\n\nTo reduce the bundle size and increase performance,  only the top 10 languages from highlight.js are available.  See [CodeHighlight](/components/code-highlight)\nfor more details.  If you would like additional languages, please open an issue on our [GitHub](https://github.com/snehilvj/dash-mantine-components/issues)\n\n\n#### Popover hideDetached\n`Popover` now supports `hideDetached` prop to automatically close popover when target element is removed from the DOM.\nPlease see the example in the [Popover docs](/components/popover)\n\nBy default, `hideDetached` is enabled – the behavior has changed from 1.x version. If you prefer to keep the old\nbehavior, you can disable `hideDetached` for all components:\n\n\n```python\ndmc.MantineProvider(    \n    theme={\n        \"components\": {\n            \"Popover\": {\n                \"defaultProps\": {\n                    #  ✅ Disable hideDetached by default if you want to keep the old behavior\n                    \"hideDetached\": False,                  \n                },\n            },\n        },\n    }\n)\n```\n\n#### Carousel changes\n\nUpdate embla props that were previously passed to `Carousel` component to `emblaOptions`. Full list of props:\n\n- `loop`\n- `align`\n- `slidesToScroll`\n- `dragFree`\n- `inViewThreshold`\n- `skipSnaps`\n- `containScroll`\n- `speed` and `draggable` props were removed – they are no longer supported by embla\n\n```python\n#  ❌ 1.x – embla options passed as props no longer works in 2.x\ndmc.Carousel(loop=True,  dragFree=True,  align=\"start\")\n\n# ✅ 2.x – use emblaOptions to pass options to embla\ndmc.Carousel({ \"loop\": True, \"dragFree\": True, \"align\": 'start' })\n```\n\n\n#### Image No longer has `flex:0` as a default style\n\n```python\n  # ✅ Add back flex:0 style if needed\ndmc.Image(src=logo, h=40, flex=0)\n\n```\n\n####  New DatePicker\n\nA new `DatePicker` component has been added — this is a standalone calendar (no input field), matching Mantine's upstream\ncomponent.\n\nNote that in v0.15.0, the original `DatePicker` was renamed to `DatePickerInput` to align with Mantine’s naming.\n\nIf you are migrating from DMC < 0.15.0 and your app used `dmc.DatePicker` update it to use `dmc.DatePickerInput`\n\n#### New NotificationContainer component\n\nNotifications are now handled by a single component: `NotificationContainer`. This replaces the previous\n`NotificationProvider` + `Notification` approach with one that is more aligned with Mantine's implementation. Also, there is\nnow direct access to Mantine's  Notification API in clientside callbacks. \n\nPlease see the new [Notification docs](/components/notification) for more details.\n\nThe `NotificationProvider` and `Notification` components are now deprecated and will be removed in a future major release.\nPlease see the [Notification Migration Guide](/migration-notifications) for a step-by-step guild for updating your apps.\n\n\n\n#### Portal reuseTargetNode\n`reuseTargetNode` prop of `Portal` component is now enabled by default. This option improves performance by reusing the\ntarget node between portal renders, but in some edge cases, it might cause issues with z-index stacking context.\n\nFor more information see the [Mantine Portal documentation.](https://mantine.dev/core/portal/)\n\nIf you experience issues with z-index, change `reuseTargetNode` prop to `False` in `theme`:\n\n\n```python\ndmc.MantineProvider(    \n    theme={\n        \"components\": {\n            \"Portal\": {\n                \"defaultProps\": {\n                    # ✅ Disable reuseTargetNode by default if your application has z-index issues\n                    \"reuseTargetNode\": False,                  \n                },\n            },\n        },\n    }\n)\n```\n\n\n#### Menu data-hovered attribute\n`MenuItem` no longer uses `data-hovered` attribute to indicate hovered state. If you used `data-hovered` in your styles,\nyou need to change it `:hover` and `:focus` selectors instead:\n\n.css files:\n```css\n// ❌ 7.x – styles with `data-hovered`,\n// no longer works in 8.x\n.item {\n  &[data-hovered] {\n    background-color: red;\n  }\n}\n\n// ✅ 8.x – use styles with `:hover` and `:focus`\n.item {\n  &:hover,\n  &:focus {\n    background-color: red;\n  }\n}\n```\n\n\n### Stylesheets Are Now Included Automatically (DMC ≥ 1.2.0)\n\nAs of `dash-mantine-components >= 1.2.0`, you no longer need to manually include optional stylesheets for components like `DatePicker`, `Carousel`, `CodeHighlight`, or `RichTextEditor`.\n\nThese styles are now bundled automatically — making setup faster and simpler.\n\n#### Still using an older version?\n\nIf you're working with **DMC < 1.2.0**, you may need to manually include stylesheets like this:\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import Dash\n\napp = Dash(\n    external_stylesheets=[\n        dmc.styles.CAROUSEL,\n        dmc.styles.CODE_HIGHLIGHT,\n        dmc.styles.NOTIFICATIONS,\n        # or just use dmc.styles.ALL\n    ]\n)\n```\n\nYou can also inspect any style path directly:\n\n```python\nprint(dmc.styles.CODE_HIGHLIGHT)\n# → https://unpkg.com/@mantine/code-highlight@7.x.x/styles.css\n```\n\n\n\n### Migrating from 0.15 to 1.0.0\n\nThis release ensures dash-mantine-components V1 is fully compatible with both Dash 2 and Dash 3.\n**If you are using dash-mantine-components<1.0.0 you must  pin your dash version to < 3.0.0**\n\n#### Breaking Change: Carousel Props\nThe `draggable` and `speed` props have been removed from `Carousel` as they are no longer supported in Embla Carousel V8.\nThese props were functional until DMC 0.14.7, when Embla was upgraded to V8.\n\n#### React 18 \nDash 3.0 now uses react 18 by default.  If your app uses dash>=3.0 it is no longer necessary to set the React version:\n```python\nimport dash\n# not needed with dash>=3.0\ndash._dash_renderer._set_react_version(\"18.2.0\")\n```\n\n### Migrating from 0.14 to 0.15\n\nThe `DatePicker` component has been renamed to `DatePickerInput` to align with the component names of  the upstream\nMantine Library.  We plan to add the Mantine [`DatePicker`](https://mantine.dev/dates/date-picker/) component in a future release.\n\nWe still expect far fewer breaking changes going forward compared to what you may have experienced in the past. For more details, please see our [Roadmap](https://github.com/snehilvj/dash-mantine-components/discussions/377).\n\n\n### Migrating from 0.12 to 0.14\n\n#### Backstory\n\nThere are many breaking changes going from DMC `v0.12` to DMC `v0.14`. The major reason behind this was we jumped from \nunderlying Mantine `v5` to Mantine `v7` and DMC tries to be as aligned with Mantine as possible. \n\nIt's helpful to also refer to the upstream docs as well for a description of breaking changes:\n  - [Mantine V7.0](https://mantine.dev/changelog/7-0-0/)\n  - [Mantine V6.0](https://v6.mantine.dev/changelog/6-0-0/)\n\nThis hard alignment ensures that I can continue developing and maintaining this library alongside my day job. However, \nas per the author of Mantine itself, Mantine is reaching maturity and \nMantine `v8` is supposed to introduce a lot of new features without the cost of API change.\n\nI'd recommend going through the [getting started](/getting-started) page as well.\n\n#### MantineProvider\n\nIt is now mandatory to wrap your app into [MantineProvider](/components/mantineprovider) (of which only one can be there in the app).\nThis component is responsible for providing theme to all DMC components.\n\nDark theme is changed like this now:\n\n  ```python\nimport dash_mantine_components as dmc\n\ndmc.MantineProvider(\n        forceColorScheme=\"dark\",\n        theme={...}\n)\n```\n\nMantine provides some better way to manage color themes in your app, but they are yet to be made available in DMC.\n\n#### React 18+ only\n\nStarting with `v0.14`, DMC will need REACT 18. You can ensure that in two ways:\n\n#### In the app settings\n\n```python\nimport dash\n\n# add this before creating app object\ndash._dash_renderer._set_react_version('18.2.0')\n\napp = Dash(__name__)\n```\n\n#### Environment variable\n\n```bash\nREACT_VERSION=18.2.0 python app.py\n```\n\n#### Required StyleSheets\n\nExcept styling for core elements, the styling for components like `CodeHighlight`, `DatePicker`, `Carousel`, etc. have to be \nincluded by the user.\n\n```python\nfrom dash import Dash\nimport dash_mantine_components as dmc\n\n# below covers all the stylesheets, you can pick as per your need.\nstylesheets = [\n    dmc.styles.DATES,\n    dmc.styles.CODE_HIGHLIGHT,\n    dmc.styles.CHARTS,\n    dmc.styles.CAROUSEL,\n    dmc.styles.NOTIFICATIONS,\n    dmc.styles.NPROGRESS,\n]\n\napp = Dash(__name__, external_stylesheets=stylesheets)\n```\nOr, include all the stylesheets like this:\n\n```python\napp = Dash(external_stylesheets=dmc.styles.ALL)\n```\n\n#### Missing components\n\n- `Chip` and `ChipGroup` components are not working as expected when ported over in dash. It will be worked on as part of subsequent releases.\n- `TransferList` is no longer available. You might benefit from [AIO based TransferList component](https://community.plotly.com/t/dash-mantine-components-0-14-1/83865/18?u=snehilvj) created by a community member.\n**update** `Chip` and `ChipGroup` are available as of 0.14.6\n\n#### Creatable option in Select and MultiSelect\n\n`creatable` prop has been removed from `Select` and `MultiSelect`. However, [TagsInput](/components/tagsinput) can be used to emulate\nthe same functionality as `MultiSelect` with `creatable` prop.\n\n#### Left and Right section\n\nComponents that previously had `rightSection` and `icon` props, now use `leftSection` instead of `icon`. Example of Button sections:\n\n```python\nimport dash_mantine_components as dmc\n\nfrom dash_iconify import DashIconify\n\ncomponent = dmc.Button(\n    \"GitHub\",\n    leftSection=DashIconify(icon=\"radix-icons:github-logo\", width=20),\n    rightSection=dmc.Badge(\"3\", circle=True, color=\"gray\"),\n)\n```\n#### Title\n\n[Title](/components/title) doesn't accept other [Text](/components/text) props like gradient etc. anymore.\n\n#### Progress\n\n[Progress](/components/progress) component now supports compound components pattern. Advanced features that were previously implemented in Progress\nare now supposed to be implemented with compound components instead.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.ProgressRoot(\n    [\n        dmc.ProgressSection(dmc.ProgressLabel(\"Documents\"), value=33, color=\"cyan\"),\n        dmc.ProgressSection(dmc.ProgressLabel(\"Photos\"), value=28, color=\"pink\"),\n        dmc.ProgressSection(dmc.ProgressLabel(\"Others\"), value=15, color=\"orange\"),\n    ],\n    size=\"xl\",\n)\n```\n     Tooltips on Progress are not working as expected for now. Will have to tackle this in the subsequent releases.\n\n#### Table\n\n[Table](/components/table) component changes:\n\n- [Styles API](/styles-api) support\n- It is now required to use `dmc` compound components instead of `html` table ones: `dmc.TableTr`, `dmc.TableTd`, etc.\n- New props: `borderColor`, `withRowBorders`, `stripedColor`, `highlightOnHoverColor`\n- `withBorder` prop was renamed to `withTableBorder`\n- `fontSize` prop was removed, use `fz` [style prop](/style-props) instead\n\n```python\nimport dash_mantine_components as dmc\n\nelements = [\n    {\"position\": 6, \"mass\": 12.011, \"symbol\": \"C\", \"name\": \"Carbon\"},\n    {\"position\": 7, \"mass\": 14.007, \"symbol\": \"N\", \"name\": \"Nitrogen\"},\n    {\"position\": 39, \"mass\": 88.906, \"symbol\": \"Y\", \"name\": \"Yttrium\"},\n    {\"position\": 56, \"mass\": 137.33, \"symbol\": \"Ba\", \"name\": \"Barium\"},\n    {\"position\": 58, \"mass\": 140.12, \"symbol\": \"Ce\", \"name\": \"Cerium\"},\n]\n\nrows = [\n    dmc.TableTr(\n        [\n            dmc.TableTd(element[\"position\"]),\n            dmc.TableTd(element[\"name\"]),\n            dmc.TableTd(element[\"symbol\"]),\n            dmc.TableTd(element[\"mass\"]),\n        ]\n    )\n    for element in elements\n]\n\nhead = dmc.TableThead(\n    dmc.TableTr(\n        [\n            dmc.TableTh(\"Element Position\"),\n            dmc.TableTh(\"Element Name\"),\n            dmc.TableTh(\"Symbol\"),\n            dmc.TableTh(\"Atomic Mass\"),\n        ]\n    )\n)\nbody = dmc.TableTbody(rows)\ncaption = dmc.TableCaption(\"Some elements from periodic table\")\n\ncomponent = dmc.Table([head, body, caption])\n```\n#### Group\n\n[Group](/components/group) component changes:\n\n- `position` prop was renamed to `justify` – it now supports all `justify-content` values\n- `spacing` prop was renamed to `gap`\n\n#### Button\n\n[Button](/components/button) changes\n\n- `compact` prop was removed, use `size='compact-xx'` instead\n- `leftIcon` and `rightIcon` props were renamed to `leftSection` and `rightSection`\n- `uppercase` prop was removed, use `tt` [style prop](/style-props) instead\n- `loaderPosition` prop was removed, Loader is now always rendered in the center to prevent layout shifts\n\n#### AppShell (renamed Navbar, Aside, Header, Footer, Main)\n\n[AppShell](/components/appshell) component is more feature rich now and has undergone following changes:\n\n- `AppShell` now uses compound components pattern: `dmc.AppShellNavbar`, `dmc.AppShellAside`, `dmc.AppShellHeader`, `dmc.AppShellFooter`, and `dmc.AppShellMain`.\n- `AppShell` now supports animations when navbar/aside are opened/closed\n- `AppShell` no longer supports `fixed` prop – all components have `position: fixed` styles, static positioning is no longer supported\n\n#### SimpleGrid\n\n[SimpleGrid](/components/simplegrid) now uses object format to define grid breakpoints and spacing, it works the same way as [style props](/style-props).\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html\n\nstyle = {\n    \"border\": f\"1px solid var(--mantine-primary-color-filled)\",\n    \"textAlign\": \"center\",\n}\n\ncomponent = dmc.SimpleGrid(\n    cols={\"base\": 1, \"sm\": 2, \"lg\": 5},\n    spacing={\"base\": 10, \"sm\": \"xl\"},\n    verticalSpacing={\"base\": \"md\", \"sm\": \"xl\"},\n    children=[\n        html.Div(\"1\", style=style),\n        html.Div(\"2\", style=style),\n        html.Div(\"3\", style=style),\n        html.Div(\"4\", style=style),\n        html.Div(\"5\", style=style),\n    ],\n)\n```\n#### Grid\n\n[Grid](/components/grid) now uses object format in `gutter`, `offset`, `span` and `order` props, all props now work the same way as [style props](/style-props).\n\n- `Col` component has been renamed to `GridCol`\n\n#### Image\n\n[Image](/components/image) component changes:\n\n- `caption` prop is no longer available \n- `width` and `height` props are replaced with `w` and `h` [style props](/style-props)\n- Placeholder functionality was replaced with fallback image\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Image(\n    radius=\"md\",\n    src=None,\n    h=200,\n    fallbackSrc=\"https://placehold.co/600x400?text=Placeholder\",\n)\n```\n#### Notification\n\n`NotificationsProvider` has been renamed to `NotificationProvider`.\n`disallowClose` is no longer available.  Use `withCloseButton`\n\n#### Prism\n\n`Prism` has been replaced by [CodeHighlight](/components/code-highlight).\n\n#### MediaQuery\n\nMediaQuery has been removed. You can use CSS or `visibleFrom` and `hiddenFrom` props.\n\nAll DMC components now support `hiddenFrom` and `visibleFrom` props. These props accept breakpoint (`xs`, `sm`, `md`, `lg`, `xl`) \nand hide the component when viewport width is less than or greater than the specified breakpoint.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Group(\n    [\n        dmc.Button(\"Hidden from sm\", hiddenFrom=\"sm\", color=\"orange\"),\n        dmc.Button(\"Visible from sm\", visibleFrom=\"sm\", color=\"cyan\"),\n        dmc.Button(\"Visible from md\", visibleFrom=\"md\", color=\"pink\"),\n    ],\n    justify=\"center\",\n)\n```"
  },
  {
    "name": "Notifications Migration Guide",
    "endpoint": "/migration-notifications",
    "description": "This page helps you migrate from the NotificationProvider to the NotificationContainer",
    "category": "Releases",
    "dmc": false,
    "content": "\n\n## Notifications Migration Guide  \nThis page helps you migrate from the NotificationProvider to the NotificationContainer  \nCategory: Releases  \n\nStarting in `dash-mantine-components` v2.0.0, the notification system has been redesigned to align more closely\nwith Mantine’s implementation. The `NotificationProvider` and `Notification` components are now deprecated and\nwill be removed in a future release. \n\nSee the [new Notification documentation](components/notification) for more details.\n\nNeed to reference the old version? Visit the [DMC 1.3.0 Notification docs](https://dmc-docs-1-3.onrender.com/components/notification) \n\n### Key Changes\n\n* Old approach:\n\n  * Add `NotificationProvider` to your app layout.\n  * Include a separate output container, such as `html.Div`.\n  * Return `Notification` components from callbacks to show messages.\n\n* New approach:\n\n  * Add a single `NotificationContainer` inside your `MantineProvider`.\n  * Use the `sendNotifications` prop to show or update notifications.\n  * Use the `hideNotifications`, `clean`, and `cleanQueue` props to use the `hide`, `clean` and `cleanQueue` features.\n  * Use the `appNotifications` API for client-side interactions.\n\n### Updating Your Code\n\nBefore (deprecated):\n\n```python\napp.layout = dmc.MantineProvider(\n    [\n        dmc.NotificationProvider(),\n        html.Div(id=\"notifications-output\"),  \n        # other components\n    ]\n)\n```\n\nAfter (recommended):\n\n```python\napp.layout = dmc.MantineProvider([\n    dmc.NotificationContainer(id=\"notification-container\"),\n    # other components...\n])\n```\n\n### Show Notifications\n\nBefore:\n\n```python\n@app.callback(\n    Output(\"notification-output\", \"children\"),\n    Input(\"trigger-button\", \"n_clicks\"),\n)\ndef show_notification(n_clicks):\n    if n_clicks:\n        return dmc.Notification(\n            title=\"Notification\",\n            message=\"This is a notification.\",\n            color=\"blue\",\n            action=\"show\",\n            id=\"notify\"\n        )\n    return None\n```\n\nAfter:\n\n```python\n@app.callback(\n    Output(\"notification-container\", \"sendNotifications\"),\n    Input(\"trigger-button\", \"n_clicks\"),\n)\ndef show_notification(n_clicks):\n    if n_clicks:\n        return [{\n            \"action\": \"show\",\n            \"title\": \"Notification\",\n            \"message\": \"This is a notification.\",\n            \"color\": \"blue\",\n            \"id\": \"notify\"\n        }]\n    return []\n```\n\n### Update Notifications\n\nBefore:\n\n```python\n@app.callback(\n    Output(\"notification-output\", \"children\"),\n    Input(\"trigger-button\", \"n_clicks\"),\n)\ndef show_notification(n_clicks):\n    if n_clicks:\n        return dmc.Notification(\n            title=\"Notification\",\n            message=\"This is an updated notification.\",\n            color=\"blue\",\n            action=\"update\",\n            id=\"notify\"\n        )\n    return None\n```\n\nAfter:\n\n```python\n@app.callback(\n    Output(\"notification-container\", \"sendNotifications\"),\n    Input(\"trigger-button\", \"n_clicks\"),\n)\ndef show_notification(n_clicks):\n    if n_clicks:\n        return [{\n            \"action\": \"update\",\n            \"title\": \"Notification\",\n            \"message\": \"This is an updated notification.\",\n            \"color\": \"blue\",\n            \"id\": \"notify\"\n        }]\n    return []\n```\n\n### Hide Notifications\n\nBefore:\n\n```python\n@app.callback(\n    Output(\"notification-output\", \"children\"),\n    Input(\"trigger-button\", \"n_clicks\"),\n)\ndef hide_notification(n_clicks):\n    if n_clicks:\n        return dmc.Notification(\n            action=\"hide\",\n            id=\"notify\"\n        )\n    return None\n```\n\nAfter:\n\n```python\n@app.callback(\n    Output(\"notification-container\", \"hideNotifications\"),\n    Input(\"trigger-button\", \"n_clicks\"),\n)\ndef hide_notification(n_clicks):\n    if n_clicks:\n        return [\"notify\"] #ids  of notifications to hide\n    return []\n```\n\n### Clean\n\nBefore:\n\n```python\n@app.callback(\n    Output(\"notification-output\", \"children\"),\n    Input(\"trigger-button\", \"n_clicks\"),\n)\ndef clean_notification(n_clicks):\n    if n_clicks:\n        return dmc.Notification(\n            action=\"clean\"\n        )\n    return None\n```\n\nAfter:\n\n```python\n@app.callback(\n    Output(\"notification-container\", \"clean\"),\n    Input(\"trigger-button\", \"n_clicks\"),\n)\ndef clean_notification(n_clicks):\n    if n_clicks:\n        return True\n    return no_update\n```\n\n### Clean Queue\n\nBefore:\n\n```python\n@app.callback(\n    Output(\"notification-output\", \"children\"),\n    Input(\"trigger-button\", \"n_clicks\"),\n)\ndef cleanQueue_notification(n_clicks):\n    if n_clicks:\n        return dmc.Notification(\n            action=\"cleanQueue\"\n        )\n    return None\n```\n\nAfter:\n\n```python\n@app.callback(\n    Output(\"notification-container\", \"cleanQueue\"),\n    Input(\"trigger-button\", \"n_clicks\"),\n)\ndef cleanQueue_notification(n_clicks):\n    if n_clicks:\n        return True\n    return no_update\n```\n\n\n\n### Keyword Arguments\n\n\n#### NotificationProvider\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- autoClose (number | boolean; optional):\n    Auto close timeout for all notifications in ms, `False` to disable\n    auto close, can be overwritten for individual notifications in\n    `notifications.show` function, `4000` by defualt.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- containerWidth (string | number; optional):\n    Notification width, cannot exceed 100%, `440` by default.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- limit (number; optional):\n    Maximum number of notifications displayed at a time, other new\n    notifications will be added to queue, `5` by default.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- notificationMaxHeight (string | number; optional):\n    Notification `max-height`, used for transitions, `200` by default.\n\n- position (a value equal to: 'top-left', 'top-right', 'bottom-left', 'bottom-right', 'top-center', 'bottom-center'; optional):\n    Notifications position, `'bottom-right'` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- transitionDuration (number; optional):\n    Notification transition duration in ms, `250` by default.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withinPortal (boolean; optional):\n    Determines whether notifications container should be rendered\n    inside `Portal`, `True` by default.\n\n- zIndex (string | number; optional):\n    Notifications container z-index, `400` by default.\n#### Notification\n\n- id (string; optional):\n    Notification id, can be used to close or update notification.\n\n- action (a value equal to: 'show', 'update', 'hide', 'clean', 'cleanQueue'; required):\n    action.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- autoClose (number | boolean; optional):\n    Determines whether notification should be closed automatically,\n    number is auto close timeout in ms, overrides `autoClose` from\n    `Notifications`.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- closeButtonProps (dict; optional):\n    Props passed down to the close button.\n\n    `closeButtonProps` is a dict with keys:\n\n- color (optional):\n    Controls notification line or icon color, key of `theme.colors` or\n    any valid CSS color, `theme.primaryColor` by default.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- icon (a list of or a singular dash component, string or number; optional):\n    Notification icon, replaces color line.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading (boolean; optional):\n    Replaces colored line or icon with Loader component.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- message (a list of or a singular dash component, string or number; required):\n    Notification message, required for all notifications.\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- position (a value equal to: 'top-left', 'top-right', 'bottom-left', 'bottom-right', 'top-center', 'bottom-center'; optional):\n    Position on the screen to display the notification.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set\n    `border-radius`, `theme.defaultRadius` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- title (a list of or a singular dash component, string or number; optional):\n    Notification title, displayed before body.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withBorder (boolean; optional):\n    Determines whether notification should have a border, `False` by\n    default.\n\n- withCloseButton (boolean; optional):\n    Determines whether close button should be visible, `True` by\n    default."
  },
  {
    "name": "Prior releases",
    "endpoint": "/releases",
    "description": "Release announcement for Dash Mantine Components",
    "category": "Releases",
    "order": 300,
    "content": "\n\n## Prior releases  \nRelease announcement for Dash Mantine Components  \nCategory: Releases  \n\nRelease notes for versions before DMC v2.0.0 are available in [GitHub Discussions.](https://github.com/snehilvj/dash-mantine-components/discussions/categories/releases)\n\n- [Release 1.3.0](https://github.com/snehilvj/dash-mantine-components/discussions/588)  May 19, 2025\n\n- [Release 1.2.0](https://github.com/snehilvj/dash-mantine-components/discussions/572)  Apr 24, 2025\n\n- [Release 1.1.0](https://github.com/snehilvj/dash-mantine-components/discussions/541)  Mar 20, 2025\n\n- [Release 1.0.0](https://github.com/snehilvj/dash-mantine-components/discussions/529)  Mar 12, 2025\n- [Release 0.15.3](https://github.com/snehilvj/dash-mantine-components/discussions/503)  Feb 3, 2025\n- [Release 0.15.2](https://github.com/snehilvj/dash-mantine-components/discussions/490)  Jan 23, 2025\n- [Release 0.15.1](https://github.com/snehilvj/dash-mantine-components/discussions/435)  Dec 6, 2024\n- [Release 0.15.0](https://github.com/snehilvj/dash-mantine-components/discussions/415)  Nov 19, 2024\n- [Release 0.14.7](https://github.com/snehilvj/dash-mantine-components/discussions/401)  Nov 5, 2024\n- [Release 0.14.6](https://github.com/snehilvj/dash-mantine-components/discussions/399)  Oct 16, 2024\n- [Release 0.14.5](https://github.com/snehilvj/dash-mantine-components/discussions/398)  Sep 29, 2024"
  },
  {
    "name": "Version 2.0.0",
    "endpoint": "/release-2-0-0",
    "description": "Release announcement for Dash Mantine Components v2.0.0",
    "category": "Releases",
    "order": 200,
    "content": "\n\n## Version 2.0.0  \nRelease announcement for Dash Mantine Components v2.0.0  \nCategory: Releases  \n\n###  Dash Mantine Components v2 (Powered by Mantine v8)\n\nReleased Jun 3, 2025\n\n### Migration Guide\n\nThis version is built on [Mantine 8](https://mantine.dev/changelog/8-0-0/), so there are some breaking changes, but as promised, far fewer than in previous\nmajor releases.  See our [Migration Guide](/migration) for step-by-step instructions for updating your apps.\n\n### What's New\n\n*  **Functions as Props** – Use JavaScript functions from Python to customize charts, sliders, filters, dropdowns, and more\n*  **Simplified Notifications** – Use `NotificationContainer` and the Mantine API directly in clientside callbacks\n*  **New DatePicker** – A calendar-only component with full support for multi-date, ranges, and custom disabled logic\n*  **New TimePicker & TimeGrid** – Better time selection with dropdowns, 12/24h formats, and predefined slots\n*  **Submenus in Menu** – New nested menu support\n*  **Carousel API updates** – Now uses `emblaOptions` for full alignment with Mantine\n*  **Component improvements** – Updated `Switch`, better dropdown behavior, and more!\n\n\n### New Functions as Props\nYou can now pass JavaScript functions to DMC components using:\n```python\n{\"function\": \"yourFunctionName\"}\n```\nThis enables advanced use cases like:\n\n- Custom chart tooltips and axis value formatting\n- Smart search filters for Select and MultiSelect\n- Custom option renderers with full React components\n- Custom Slider scales and labels\n- Dynamically disabled calendar dates\n\nYou can even pass options from Python:\n```python\n{\"function\": \"formatTemp\", \"options\": {\"unit\": \"F\"}}\n```\nFunctions live in `/assets/*.js` under the global `window.dashMantineFunctions` object.\n\n🤔 Don’t know JavaScript? No problem!\nThe docs include examples of how to use AI to convert Python functions to JavaScript, with prompt templates to help you get reliable results every time:\n\nSee the new [Functions As Props docs](/functions-as-props)\n\n\n#### Example: Custom Slider Label + Scale\n```python\n\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Stack([\n    dmc.Slider(\n        min=2,\n        max=30,\n        step=1,\n        value=10,\n        scale={\"function\": \"getScale\"},\n        labelAlwaysOn=True,\n        label={\"function\": \"valueLabelFormat\"}\n    ),\n    dmc.RangeSlider(\n        mt=50,\n        min=2,\n        max=30,\n        step=1,\n        value=[10, 20],\n        scale={\"function\": \"getScale\"},\n        labelAlwaysOn=True,\n        label={\"function\": \"valueLabelFormat\"}\n    )\n])\n```\n\n```javascript\nvar dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\n\ndmcfuncs.getScale = (v) => Math.pow(2, v);\n\ndmcfuncs.valueLabelFormat = (value) => {\n  const units = ['KB', 'MB', 'GB', 'TB'];\n  let unitIndex = 0;\n  let scaledValue = value;\n\n  while (scaledValue >= 1024 && unitIndex < units.length - 1) {\n    unitIndex += 1;\n    scaledValue /= 1024;\n  }\n\n  return `${scaledValue} ${units[unitIndex]}`;\n};\n```\n\n#### Example: DatePicker: Disable All Except Fridays\n```python\n\nimport dash_mantine_components as dmc\n\n# makes dayjs available\n#app = Dash(exteral_scripts=[\"https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/dayjs.min.js\"])\n\ncomponent = dmc.Center(\n    dmc.DatePicker(\n        value=\"2024-11-08\",\n        defaultDate=\"2024-11-01\",\n        disabledDates={\"function\": \"excludeDate\"},\n        m=\"lg\"\n    )\n)\n```\n\n```javascript\nvar dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\n\ndmcfuncs.excludeDate = function(dateStr) {\n   const date = dayjs(dateStr, \"YYYY-MM-DD\");\n   return date.isValid() && date.day() !== 5;\n}\n```\n\n#### Example: MultiSelect: Components in the Dropdown\n```python\nimport dash_mantine_components as dmc\n\nusers_data = {\n    \"Emily Johnson\": {\n        \"image\": \"https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-7.png\",\n        \"email\": \"emily92@gmail.com\",\n    },\n    \"Ava Rodriguez\": {\n        \"image\": \"https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-8.png\",\n        \"email\": \"ava_rose@gmail.com\",\n    },\n    \"Olivia Chen\": {\n        \"image\": \"https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-4.png\",\n        \"email\": \"livvy_globe@gmail.com\",\n    },\n    \"Ethan Barnes\": {\n        \"image\": \"https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-1.png\",\n        \"email\": \"ethan_explorer@gmail.com\",\n    },\n    \"Mason Taylor\": {\n        \"image\": \"https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-2.png\",\n        \"email\": \"mason_musician@gmail.com\",\n    },\n}\n\ncomponent = dmc.MultiSelect(\n    data=list(users_data.keys()),\n    label=\"Employees of the month\",\n    placeholder=\"Search for employee\",\n    maxDropdownHeight=300,\n    searchable=True,\n    hidePickedOptions=True,\n    renderOption={\n        \"function\": \"renderUserOption\",\n        \"options\": {\"users\": users_data},\n    },\n)\n```\n\n```javascript\nvar dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\nvar dmc = window.dash_mantine_components;\n\ndmcfuncs.renderUserOption = function ({ option }, { users }) {\n  const user = users[option.value];\n\n  return React.createElement(\n    dmc.Group,\n    { gap: \"sm\" },\n    React.createElement(dmc.Avatar, {\n      key: \"avatar\",\n      src: user.image,\n      size: 36,\n      radius: \"xl\",\n    }),\n    React.createElement(\n      \"div\",\n      { key: \"text-block\" },\n      React.createElement(dmc.Text, { size: \"sm\", key: \"name\" }, option.value),\n      React.createElement(dmc.Text, {\n        size: \"xs\",\n        opacity: 0.5,\n        key: \"email\",\n        children: user.email,\n      })\n    )\n  );\n};\n```\n\n\n### New NotificationContainer component\n\nNotifications are now handled by a single component: `NotificationContainer`.\n\nThis new approach replaces the previous  `NotificationProvider` + `Notification` pattern with one that’s simpler, more\nconsistent with Mantine, and resolves a number of issues from earlier versions.\n\nAlso, there is now direct access to Mantine's  Notification API in clientside callbacks. \n\nThanks to @BSd3v for contributing this new component.\n\nPlease see the new [Notification docs](/components/notification) for more details.\n\n\n### New Menu with Sub Menus\n\n```python\n\nimport dash_mantine_components as dmc\n\n\nmenu = dmc.Menu(\n    width=200,\n    position=\"bottom-start\",\n    children=[\n        dmc.MenuTarget(\n            dmc.Button(\"Toggle Menu\")\n        ),\n        dmc.MenuDropdown([\n            dmc.MenuItem(\"Dashboard\"),\n\n            dmc.SubMenu([\n                dmc.SubMenuTarget(\n                    dmc.SubMenuItem(\"Products\")\n                ),\n                dmc.SubMenuDropdown([\n                    dmc.MenuItem(\"All products\"),\n                    dmc.MenuItem(\"Categories\"),\n                    dmc.MenuItem(\"Tags\"),\n                    dmc.MenuItem(\"Attributes\"),\n                    dmc.MenuItem(\"Shipping classes\"),\n                ])\n            ]),\n\n            dmc.SubMenu([\n                dmc.SubMenuTarget(\n                    dmc.SubMenuItem(\"Orders\")\n                ),\n                dmc.SubMenuDropdown([\n                    dmc.MenuItem(\"Open\"),\n                    dmc.MenuItem(\"Completed\"),\n                    dmc.MenuItem(\"Cancelled\"),\n                ])\n            ]),\n\n            dmc.SubMenu([\n                dmc.SubMenuTarget(\n                    dmc.SubMenuItem(\"Settings\")\n                ),\n                dmc.SubMenuDropdown([\n                    dmc.MenuItem(\"Profile\"),\n                    dmc.MenuItem(\"Security\"),\n                    dmc.MenuItem(\"Notifications\"),\n                ])\n            ]),\n        ])\n    ]\n)\n\ncomponent=dmc.Center(menu)\n```\n\n\n### New TimePicker Component\n\nNew `TimePicker` component is an alternative to `TimeInput` that offers more features. It supports 24-hour and\n12-hour formats, dropdown with hours, minutes and seconds, and more.\n\nWith Dropdown:\n\n```python\nimport dash_mantine_components as dmc\n\n\ncomponent = dmc.Group(\n    gap=50,\n    mb=60,\n    children=[\n        dmc.TimePicker(\n            label=\"Enter time (24h format)\",\n            withSeconds=True,\n            withDropdown=True\n        ),\n        dmc.TimePicker(\n            label=\"Enter time (12h format)\",\n            withSeconds=True,\n            withDropdown=True,\n            format=\"12h\"\n        ),\n    ],\n)\n```\nWith presets:\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import callback, Input, Output\n\n\ncomponent = dmc.TimePicker(\n    label=\"Enter a time\",\n    withDropdown=True,\n    maxDropdownContentHeight=300,\n    presets = [\n        {\"label\": 'Morning', \"values\": ['06:00:00', '08:00:00', '10:00:00']},\n        {\"label\": 'Afternoon', \"values\": ['12:00:00', '14:00:00', '16:00:00']},\n        {\"label\": 'Evening', \"values\": ['18:00:00', '20:00:00', '22:00:00']},\n    ],\n    mb=120,\n)\n```\n### DateTimePicker component changes\n`DateTimePicker` component now uses `TimePicker` under the hood instead of `TimeInput`. You can now use all \n`TimePicker` features with `DateTimePicker` component.\n\nThe  `timeInputProps` is no longer available.  To pass props down to the underlying `TimePicker` you need to use `timePickerProps` prop.\n\nExample of enabling dropdown and setting 12h format for time picker:\n\n\n```python\nfrom datetime import datetime\n\nimport dash_mantine_components as dmc\n\ncomponent = dmc.DateTimePicker(\n    label=\"Pick date and time\",\n    placeholder=\"Pick Date and time\",\n    timePickerProps={\n        \"withDropdown\": True,\n        \"popoverProps\": { \"withinPortal\": False },\n        \"format\": '12h',\n      }\n)\n```\n### New TimeGrid component\nNew `TimeGrid` component allows to capture time value from the user with a predefined set of time slots:\n\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import callback, Input, Output\n\ncomponent = dmc.Stack([\n    dmc.TimeGrid(\n        timeRangeData={\"startTime\": \"10:00\", \"endTime\": \"21:00\", \"interval\": \"01:00\"},\n        withSeconds=False,\n        simpleGridProps={\n            \"type\": \"container\",\n            \"cols\": {\"base\": 1, \"180px\": 2, \"320px\": 3},\n            \"spacing\": \"xs\",\n        },\n        value=\"10:00:00\",\n        id=\"time-grid\"\n    ),\n    dmc.Text(id=\"time-grid-out\")\n])\n\n@callback(\n    Output(\"time-grid-out\", \"children\"),\n    Input(\"time-grid\", \"value\")\n)\ndef update(value):\n    return f\"You selected: {value}\"\n```\n### New DatePicker component  \n\nWe've added a new `DatePicker` — a calendar-only component with no input field. It's the base calendar used in components \nlike `DateInput`, `DatePickerInput`, and `DateTimePicker`. Any configuration you can apply to `DatePicker` — such as\nmultiple selection, min/max dates, week numbers, or disabled dates — can also be used in those components.\n\n[Read the full DatePicker docs →](/components/datepicker)\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import Input, Output, html, callback\n\n\ncomponent = dmc.Stack([\n    dmc.DatePicker(id=\"date-picker\"),\n    dmc.Text(id=\"selected-date-picker\", mt=10),\n], align=\"center\")\n\n\n@callback(\n    Output(\"selected-date-picker\", \"children\"), Input(\"date-picker\", \"value\")\n)\ndef update_output(d):\n    return f\"You selected {d}\"\n```\n### Popover Hide detached\n\nUse `hideDetached` prop to configure how the dropdown behaves when the target element is hidden with styles \n(`display: none, visibility: hidden,` etc.), removed from the DOM, or when the target element is scrolled out of the viewport.\n\nBy default, `hideDetached` is enabled – the dropdown is hidden with the target element. You can change this behavior\nwith `hideDetached=False`. To see the difference, try to scroll the container that holds the Popover components:\n\n\n```python\nimport dash_mantine_components as dmc\n\n\ncomponent = dmc.Box(\n    style={\"border\": \"1px solid var(--mantine-color-dimmed)\", \"overflow\": \"auto\"},\n    p=\"xl\",\n    w=400,\n    h=200,\n    children=[\n        dmc.Box(\n            w=1000,\n            h=400,\n            children=dmc.Group(\n                [\n                    dmc.Popover(\n                        opened=True,\n                        width=\"target\",\n                        position=\"bottom\",\n                        closeOnClickOutside=False,\n                        children=[\n                            dmc.PopoverTarget(\n                                dmc.Button(\"Toggle popover\")\n                            ),\n                            dmc.PopoverDropdown(\"This popover dropdown is hidden when detached\"),\n                        ],\n                    ),\n                    dmc.Popover(\n                        opened=True,\n                        width=\"target\",\n                        position=\"bottom\",\n                        closeOnClickOutside=False,\n                        hideDetached=False,\n                        children=[\n                            dmc.PopoverTarget(\n                                dmc.Button(\"Toggle popover\")\n                            ),\n                            dmc.PopoverDropdown(\"This popover dropdown is visible when detached\"),\n                        ],\n                    ),\n                ]\n            ),\n        )\n    ]\n)\n```\n\n\n\n### Carousel changes\nThe following props are removed.  They now need to be passed to embla using the `emblaOptions` prop\n- `loop`\n- `align`\n- `slidesToScroll`\n- `dragFree`\n- `inViewThreshold`\n- `skipSnaps`\n- `containScroll`\n\n```python\n#  ❌ 1.x – embla options passed as props no longer works in 2.x\ndmc.Carousel(loop=True,  dragFree=True,  align=\"start\")\n\n# ✅ 2.x – use emblaOptions to pass options to embla\ndmc.Carousel({ \"loop\": True, \"dragFree\": True, \"align\": 'start' })\n```\nAlso, the `speed` and `draggable` props were removed – they are no longer supported by embla\n\n### Switch withThumbIndicator\nSwitch component styles were updated to include indicator inside the thumb. You can change it by setting `withThumbIndicator` prop:\n\n### Other changes\n- [CodeHighlight](/components/code-highlight) - To reduce the bundle size only the top 10 languages are supported.  If you would like to include other, please open an issue on our GitHub\n- DatesProvider timezone -DatesProvider component no longer supports timezone option – all Mantine dates components now use strings in YYYY-MM-DD HH:mm:ss format as values and do not contain timezone information.\n- See the [Mantine Changelog](https://mantine.dev/changelog/8-0-0/#other-changes) for other changes.\n\n---\n\n### Quick Start\n\nJust a reminder...\n\n* If you're using Dash ≥ 3.0.0, you no longer need to set the React version manually.\n* If you're using DMC ≥ 1.2.0, there's no need to include additional stylesheets like `dmc.styles.ALL`.\n\nHere’s a minimal app to get started:\n\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import Dash\n\napp = Dash()\n\napp.layout = dmc.MantineProvider(\n    dmc.Alert(\n        \"Welcome to Dash Mantine Components\",\n        title=\"Hello!\",\n        color=\"violet\",\n    )\n)\n\nif __name__ == \"__main__\":\n    app.run(debug=True)\n```"
  },
  {
    "name": "Version 2.1.0",
    "endpoint": "/release-2-1-0",
    "description": "Release announcement for Dash Mantine Components v2.1.0",
    "category": "Releases",
    "order": 100,
    "content": "\n\n## Version 2.1.0  \nRelease announcement for Dash Mantine Components v2.1.0  \nCategory: Releases  \n\nReleased July 1, 2025\n\n### What's New\n \n* New `ModalStack` and `DrawerStack` components\n* Function support expanded across more components and props\n* Custom rendering options for calendar and tree views\n* UI refinements and new props across the board\n* Based on [Mantine 8.1.2](https://mantine.dev/changelog/8-1-0/)\n\n\n### New ModalStack and DrawerStack components\n\nUse [ModalStack](/components/modal) or [DrawerStack](/components/drawer) to render and manage multiple modals or drawers at once. These components handle focus, z-index stacking, and Escape key closing automatically.\n\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html, Output, Input, callback, ctx, no_update\n\n\ncomponent = dmc.Center([\n    dmc.ModalStack(\n        id=\"modal-stack\",\n        children=[\n            dmc.ManagedModal(\n                id=\"delete-page\",\n                title=\"Delete this page?\",\n                children=[\n                    dmc.Text(\"Are you sure you want to delete this page? This action cannot be undone.\"),\n                    dmc.Group(\n                        mt=\"lg\",\n                        justify=\"flex-end\",\n                        children=[\n                            dmc.Button(\"Cancel\", id=\"cancel-1\", variant=\"default\"),\n                            dmc.Button(\"Delete\", id=\"delete\", color=\"red\"),\n                        ],\n                    ),\n                ],\n            ),\n            dmc.ManagedModal(\n                id=\"confirm-action\",\n                title=\"Confirm action\",\n                children=[\n                    dmc.Text(\"Are you sure you want to perform this action? This action cannot be undone. If you are sure, press confirm button below.\"),\n                    dmc.Group(\n                        mt=\"lg\",\n                        justify=\"flex-end\",\n                        children=[\n                            dmc.Button(\"Cancel\", id=\"cancel-2\", variant=\"default\"),\n                            dmc.Button(\"Confirm\", id=\"confirm\", color=\"red\"),\n                        ],\n                    ),\n                ],\n            ),\n            dmc.ManagedModal(\n                id=\"really-confirm-action\",\n                title=\"Really confirm action\",\n                children=[\n                    dmc.Text(\"Jokes aside. You have confirmed this action. This is your last chance to cancel it. After you press confirm button below, action will be performed and cannot be undone. For real this time. Are you sure you want to proceed?\"),\n                    dmc.Group(\n                        mt=\"lg\",\n                        justify=\"flex-end\",\n                        children=[\n                            dmc.Button(\"Cancel\", id=\"cancel-3\", variant=\"default\"),\n                            dmc.Button(\"Confirm\", id=\"final-confirm\", color=\"red\"),\n                        ],\n                    ),\n                ],\n            ),\n        ]\n    ),\n    dmc.Button(\"Open modal\", id=\"open\")\n])\n\n\n@callback(\n    Output(\"modal-stack\", \"open\"),\n    Output(\"modal-stack\", \"closeAll\"),\n    Input(\"open\", \"n_clicks\"),\n    Input(\"cancel-1\", \"n_clicks\"),\n    Input(\"cancel-2\", \"n_clicks\"),\n    Input(\"cancel-3\", \"n_clicks\"),\n    Input(\"delete\", \"n_clicks\"),\n    Input(\"confirm\", \"n_clicks\"),\n    Input(\"final-confirm\", \"n_clicks\"),\n    prevent_initial_call=True,\n)\ndef control_modals(*_):\n    trigger = ctx.triggered_id\n    if trigger == \"open\":\n        return \"delete-page\", False\n    if trigger in (\"cancel-1\", \"cancel-2\", \"cancel-3\", \"final-confirm\"):\n        return None, True\n    if trigger == \"delete\":\n        return \"confirm-action\", False\n    if trigger == \"confirm\":\n        return \"really-confirm-action\", False\n    return no_update, no_update\n```\n\n\n### Calendar headerControlsOrder prop\n\nCalendar-based components like [DatePicker](/components/datepicker) now support the `headerControlsOrder` prop, which lets you customize the layout of header buttons. The value is a dictionary using keys `'previous'`, `'next'`, and `'level'`.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.DatePicker(\n    value=\"2025-02-01\",\n    headerControlsOrder = ['level', 'previous', 'next'],\n    styles = {\n        \"calendarHeaderLevel\": {\n            \"justifyContent\": 'flex-start',\n            \"paddingInlineStart\": 8,\n        },\n    }\n)\n```\n### Slider Domain prop\n[Slider](/components/slider) component now supports `domain` prop that allows setting the possible range of values independently of the min and max values:\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Slider(\n    domain=[0, 100],\n      min=10,\n      max=90,\n      value=25,\n      marks=[\n        { \"value\": 10, \"label\": 'min' },\n        { \"value\": 90, \"label\": 'max' },\n      ]\n)\n```\n### RangeSlider pushOnOverlap prop\n[RangeSlider](/components/range-slider) component now supports `pushOnOverlap` prop that defines whether the slider should push the overlapping thumb when the user drags it.\n\nThis examples shows  `pushOnOverlap=False`  (The default is `True`)\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.RangeSlider(\n    pushOnOverlap=False,\n    minRange=20,\n    value=[25, 65]\n)\n```\n### Additional Props Now Support Functions\n\nFunction props were introduced in DMC v2.0, allowing you to pass JavaScript functions to certain component props for dynamic formatting, styling, and rendering.\n\nIn v2.1, this support has been expanded to include even more components and props — such as  calendar inputs, AutoComplete, and Tree.\n\nYou can now customize things like:\n\n* Highlighting or disabling specific dates, months, or years in the calendar, month and year pickers\n* Modifying how AutoComplete options are rendered or filtered\n* Fully controlling how each node in a Tree is displayed\n\nFor a complete list of newly supported function props, [see the table in the docs](/functions-as-props#supported-props-in-v2-1).\nAnd for guidance on writing these functions — or generating them from Python using AI — see the [Functions as Props docs](/functions-as-props).\n\n#### Example: Add an indicator to a calendar day\n\n```python\nfrom dash import Dash\nimport dash_mantine_components as dmc\n\n\n# Adding dayjs as external script to make it available to the function\n# app = Dash(external_scripts=[\"https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/dayjs.min.js\"])\n\n\ncomponent = dmc.DatePicker(\n    id=\"custom-day-render\",\n    renderDay={\"function\": \"highlightSixteenthWithDot\"}\n)\n```\n\n```javascript\nvar dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\nvar dmc = window.dash_mantine_components;\nvar dayjs = window.dayjs;\n\ndmcfuncs.highlightSixteenthWithDot = function (dateStr) {\n  const day = dayjs(dateStr).date();\n\n  return React.createElement(\n    dmc.Indicator,\n    {\n      size: 9,\n      color: \"red\",\n      offset: -5,\n      disabled: day !== 16, // displays indicator only on the the 16th doy of the month\n    },\n    React.createElement(\"div\", null, day)\n  );\n};\n```\n\n\n#### Example: Add props to year and month control\n\nCustomize the year, month, and day controls using `getYearControlProps`, `getMonthControlProps`, and `getDayProps`. Each function receives a date and returns props to apply to that control.\n\nThis example:\n\n* Highlights every Friday the 13th using `getDayProps`\n* Disables June and highlights February using `getMonthControlProps` (In the month picker)\n* Disables 2026 and highlights 2025 using `getYearControlProps`  (In the year picker)\n\n\n```python\n\nimport dash_mantine_components as dmc\n\n# Adding dayjs as external script to make it available to the function\n# app = Dash(external_scripts=[\"https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/dayjs.min.js\"])\n\ncomponent = dmc.DatePicker(\n    defaultDate=\"2025-06-01\",\n    getDayProps={\"function\": \"highlightFriday13\"},\n    getYearControlProps={\"function\": \"yearControlProps\"},\n    getMonthControlProps={\"function\": \"monthControlProps\"},\n    my=\"lg\"\n)\n```\n\n```javascript\nvar dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\n\n// dayjs is loaded globally via Dash external_scripts.\n// For details, see DatesProvider docs: https://www.dash-mantine-components.com/components/datesprovider\nvar dayjs = window.dayjs;\n\ndmcfuncs.highlightFriday13 = function (dateStr) {\n  const d = dayjs(dateStr);\n\n  if (d.day() === 5 && d.date() === 13) {\n    return {\n      style: {\n        backgroundColor: 'var(--mantine-color-red-filled)',\n        color: 'var(--mantine-color-white)',\n      },\n    };\n  }\n\n  return {};\n};\n\ndmcfuncs.yearControlProps = function (dateStr) {\n  const d = dayjs(dateStr);\n  const currentYear = new Date().getFullYear();\n\n  if (d.year() === currentYear) {\n    return {\n      style: {\n        color: 'var(--mantine-color-blue-filled)',\n        fontWeight: 700,\n      },\n    };\n  }\n\n  if (d.year() === currentYear + 1) {\n    return { disabled: true };\n  }\n\n  return {};\n};\n\ndmcfuncs.monthControlProps = function (dateStr) {\n  const d = dayjs(dateStr);\n\n  if (d.month() === 1) {\n    return {\n      style: {\n        color: 'var(--mantine-color-blue-filled)',\n        fontWeight: 700,\n      },\n    };\n  }\n\n  if (d.month() === 5) {\n    return { disabled: true };\n  }\n\n  return {};\n};\n```\n\n#### Example:  Custom Rendering of Tree component\n\nYou can fully control how each node is rendered in the [Tree](/components/tree) component using the `renderNode` function. This allows \ncustom icons, layout, or complex styling beyond the built-in options.\n\n\n\n```python\nimport dash_mantine_components as dmc\nimport dash_iconify  # required in order to use DashIconify in the renderNode function\nfrom .data import data\n\n\ncomponent = dmc.Tree(\n    data=data,\n    renderNode={\"function\": \"myLeaf\"},\n    expanded=[\n        \"node_modules\",\n        \"node_modules/react\",\n    ]\n)\n```\n\n```javascript\n\nvar dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\n\ndmcfuncs.myLeaf = function (payload) {\n  const dmc = window.dash_mantine_components;\n  const iconify = window.dash_iconify;\n\n  function getIcon(name, isFolder, expanded) {\n    const size = 14;\n\n    if (name.endsWith('package.json')) {\n      return React.createElement(iconify.DashIconify, {\n        icon: 'logos:npm-icon',\n        width: size,\n        height: size\n      });\n    }\n\n    if (\n      name.endsWith('.ts') ||\n      name.endsWith('.tsx') ||\n      name.endsWith('tsconfig.json')\n    ) {\n      return React.createElement(iconify.DashIconify, {\n        icon: 'logos:typescript-icon',\n        width: size,\n        height: size\n      });\n    }\n\n    if (name.endsWith('.css')) {\n      return React.createElement(iconify.DashIconify, {\n        icon: 'vscode-icons:file-type-css',\n        width: size,\n        height: size\n      });\n    }\n\n    if (isFolder) {\n      return React.createElement(iconify.DashIconify, {\n        icon: expanded ? 'tabler:folder-open' : 'tabler:folder',\n        width: size,\n        height: size,\n        color: '#f59f00' // Mantine yellow-9\n      });\n    }\n\n    return null;\n  }\n\n  const { node, expanded, hasChildren, elementProps } = payload;\n\n  return React.createElement(\n    dmc.Group,\n    { key: payload.node.value, gap: 5, ...elementProps },\n    getIcon(node.value, hasChildren, expanded),\n    React.createElement('span', null, node.label)\n  );\n};\n```\n\n### AutoComplete improvements\n\nThanks to first-time contributor @ihor-lazariev for adding the following features in [PR #604](https://github.com/snehilvj/dash-mantine-components/pull/604):\n\n* Support for functions in `renderOption` and `filter` props\n* New `clearButtonProps` and `clearable` props\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ncomponent = dmc.Autocomplete(\n    label=\"Select with renderOption\",\n    placeholder=\"Select text align\",\n    data=[\n      { \"value\": 'left', \"label\": 'left' },\n      { \"value\": 'center', \"label\": 'center' },\n      { \"value\": 'right', \"label\": 'right' },\n      { \"value\": 'justify', \"label\": 'justify' },\n    ],\n    renderOption={\"function\": \"renderOptionSelect\"},\n    clearable=True\n)\n```\n### Other Changes\n\nSee the [Mantine Changelog](https://mantine.dev/changelog/8-1-0/#other-changes) for more.\n\n* [`presets` for DatePicker](https://mantine.dev/changelog/8-1-0/#datepicker-presets): Adds predefined date ranges next to the calendar\n* [Popover behavior improvements](https://mantine.dev/changelog/8-1-0/#popover-middlewares-improvements): More consistent dropdown positioning with dynamic content\n* All components now support the `bdrs` style prop for border radius\n* `Tooltip` now supports the `autoContrast` prop for improved legibility\n\n\n---\n\n### Quick Start\n\nJust a reminder:\n\n* With Dash ≥ 3.0.0, there’s no need to manually set the React version.\n* With DMC ≥ 1.2.0, you no longer need to include optional stylesheets such as `dmc.styles.ALL`.\n\nHere’s a minimal app to get started:\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import Dash\n\napp = Dash()\n\napp.layout = dmc.MantineProvider(\n    dmc.Alert(\n        \"Welcome to Dash Mantine Components\",\n        title=\"Hello!\",\n        color=\"violet\",\n    )\n)\n\nif __name__ == \"__main__\":\n    app.run(debug=True)\n```"
  },
  {
    "name": "Version 2.2.0",
    "endpoint": "/release-2-2-0",
    "description": "Release announcement for Dash Mantine Components v2.2.0",
    "category": "Releases",
    "order": 99,
    "content": "\n\n## Version 2.2.0  \nRelease announcement for Dash Mantine Components v2.2.0  \nCategory: Releases  \n\nReleased August 19, 2025\nBased on Mantine 8.2.5\n\n\n### Source edit mode in RichTextEditor\n\n[RichTextEditor](/components/richtexteditor) now supports source code edit mode.\n\n```python\nimport dash_mantine_components as dmc\n\n\ncontent= '<p>Source code control example</p><p>New line with <strong>bold text</strong></p><p>New line with <em>italic</em> <em>text</em></p>'\n\ncomponent =dmc.RichTextEditor(\n    html=content,\n    toolbar={\n        \"sticky\": True,\n        \"controlsGroups\": [\n            [\"SourceCode\"],\n            [\n                \"Blockquote\",\n                \"Bold\",\n                \"Italic\",\n                \"Underline\",\n                \"Strikethrough\",\n                \"ClearFormatting\",\n                \"Highlight\",\n            ],\n        ],\n    },\n)\n```\n### Custom controls in RichTextEditor \nUse `CustomControl` in the `controlsGroups` to create create custom controls in the `toolbar`. Mantine wraps Tiptap V2.9.\nTo see the commands available for use in your custom controls see the [Tiptap documentation](https://v2.tiptap.dev/docs/editor/api/commands)\n\nThanks to @BSd3v for adding this feature in [PR #629](https://github.com/snehilvj/dash-mantine-components/pull/629)\n\n\nNote: This example uses custom JavaScript defined in the assets folder. Learn more in the \"Functions As Props\" section of this document.\n\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ntoolbar = {\n    \"sticky\": True,\n    \"controlsGroups\": [\n        [\n\n            {\n                \"CustomControl\": {\n                    \"aria-label\": \"Insert Table\",\n                    \"title\": \"Insert Table\",\n                    \"children\": [DashIconify(icon=\"mdi:table-plus\", width=20, height=20)],\n                    \"onClick\": {\"function\": \"insertTable\"},\n                },\n            },\n            {\n                \"CustomControl\": {\n                    \"aria-label\": \"Add Column Before\",\n                    \"title\": \"Add Column Before\",\n                    \"children\": [DashIconify(icon=\"mdi:table-column-plus-before\", width=20, height=20)],\n                    \"onClick\": {\"function\": \"addColumnBefore\"},\n                },\n            },\n            {\n                \"CustomControl\": {\n                    \"aria-label\": \"Delete Column\",\n                    \"title\": \"Delete Column\",\n                    \"children\": [DashIconify(icon=\"mdi:table-column-remove\", width=20, height=20)],\n                    \"onClick\": {\"function\": \"deleteColumn\"},\n                },\n            },\n        ],\n        [\n            \"Bold\",\n            \"Italic\",\n            \"Underline\",\n        ],\n    ],\n}\n\ncomponent = dmc.RichTextEditor(\n    html= '<div>Click controls to insert table, add column before, or delete column</div>',\n    toolbar = toolbar,\n    className=\"rte\"  # applies custom table styles to this component only\n)\n```\n\n```javascript\n\nvar dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\n\ndmcfuncs.insertTable = ({editor}) => {\n    editor?.chain().focus().insertTable({ rows: 5, cols: 3, withHeaderRow: true }).run()\n}\n\ndmcfuncs.addColumnBefore = ({editor}) => {\n    editor?.chain().focus().addColumnBefore().run()\n}\n\ndmcfuncs.deleteColumn= ({editor}) => {\n    editor?.chain().focus().deleteColumn().run()\n}\n```\n\n```css\n.rte :is(table, th, td) {\n    border: 1px solid var(--table-border-color);\n}\n```\n\n \n### Bar value label props\n\n[Bar Chart](/components/barchart) now supports passing props down to [recharts LabelList](https://recharts.org/en-US/api/LabelList) component with `valueLabelProps` prop. \n\nThanks to first time contributor @CGaul for adding this feature in [PR #620](https://github.com/snehilvj/dash-mantine-components/pull/620)! \n\n```python\nimport dash_mantine_components as dmc\nfrom .data import data\n\ncomponent = dmc.BarChart(\n    h=300,\n    dataKey=\"month\",\n    data=data,\n    withBarValueLabel=True,\n    valueLabelProps={\"position\": 'inside', \"fill\": 'white'},\n    withLegend=True,\n    withTooltip=False,\n    series=[\n        {\"name\": \"Smartphones\", \"color\": \"violet.6\"},\n        {\"name\": \"Laptops\", \"color\": \"blue.6\"},\n        {\"name\": \"Tablets\", \"color\": \"teal.6\"},\n    ],\n    valueFormatter={\"function\": \"formatNumberIntl\"},\n)\n```\n### Styles API attributes\nYou now can pass attributes to inner elements of all components that support [Styles API](/styles-api) with `attributes`\nprop. For example, it can be used to add data attributes for testing purposes:\n\n```python\nimport dash_mantine_components as dmc\n\n\ncomponent = dmc.Button(\n    \"Button with attributes\",\n    attributes={\n        \"root\": { \"data-test-id\": \"root\" },\n        \"label\": { \"data-test-id\": \"label\" },\n        \"inner\": { \"data-test-id\": \"inner\" },\n      },\n)\n```\n### Container grid strategy\n\n [Container](/components/container) now supports `strategy=\"grid\"` prop which enables more features.\n\nDifferences from the default `strategy=\"block\"`:\n\n- Uses `display: grid` instead of `display: block`\n- Does not include default inline padding\n- Does not set `max-width` on the root element (uses grid template columns instead)\n\nFeatures supported by `strategy=\"grid\"`:\n\n- Everything that is supported by `strategy=\"block\"`\n- Children with `data-breakout` attribute take the entire width of the container's parent element\n- Children with `data-container` inside `data-breakout` have the same width as the main grid column\n\nExample of using breakout feature:\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html\n\n\ncomponent = dmc.Container(\n    [\n        dmc.Box(\"Main Content\", bg=\"var(--mantine-color-indigo-light)\", h=50),\n        html.Div(\n            [\n                \"Breakout\",\n                html.Div(\n                    \"Container inside breakout\",\n                    style={\n                        \"backgroundColor\": \"var(--mantine-color-indigo-filled)\",\n                        \"color\": \"white\",\n                        \"height\": 50,\n                    },\n                    **{\"data-container\": \"\"}\n                ),\n            ],\n            style={\n                \"backgroundColor\": \"var(--mantine-color-indigo-light)\",\n                \"marginTop\": 16,\n            },\n            **{\"data-breakout\": \"\"}\n        ),\n    ],\n    size=500,\n    strategy=\"grid\",\n)\n```\n\n\n### Tooltip Target\n\nNew [Tooltip](/components/tooltip) `target` prop is an alternative to `children`. It accepts a string (selector), an HTML\nelement or a `ref` object with HTML element. Use `target` prop when you do not render tooltip target as JSX element—for\nexample, in a clientside callback.\n\nExample of using target prop with a string selector:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Box([\n    dmc.Button(\"Hover me to see tooltip\", id=\"my-target\"),\n    dmc.Tooltip(target=\"#my-target\", label=\"Tooltip over button\")\n])\n```\n### autoSelectOnBlur prop\n\n[Select](/components/select) and [Autocomplete](/components/autocomplete) components now support `autoSelectOnBlur` prop.\nUse it to automatically select the highlighted option when the input loses focus. To see this feature in action: select\nan option with up/down arrows, then click outside the input:\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Select(\n    label=\"Your favorite library:\",\n    data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n    placeholder=\"Pick value\",\n    autoSelectOnBlur=True,\n    w=400,\n)\n```\n### clearSearchOnFocus prop\n\nFor searchable [Select](/components/select) components, when `clearSearchOnFocus=True`, the search input will be cleared each time the\nfield gains focus.  This is useful when you want the user to start with an empty search box each time, without having \nto manually delete the existing text.  \n\nThanks @vaughnfuelling1 for the [feature request](https://github.com/snehilvj/dash-mantine-components/issues/626)!\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Select(\n    data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n    value=\"Pandas\",\n    searchable=True,\n    clearSearchOnFocus=True,\n)\n```\n### Accordion chevronIconSize prop\n- The [Accordion](/components/accordion) default `chevronSize` prop value was changed to `auto` to allow using dynamic icon sizes.\n- The `Accordion` now supports `chevronIconSize` prop to configure size of the default chevron icon.\n\n### New in the Docs\n\n#### New Autocomplete component section\n\n\nUse [Autocomplete](/components/autocomplete) component in the following cases:\n\n- You want to allow user to enter any value\n- You want to display suggestions to the user based on the input value\n- You want to preserve user input on blur if option was not selected from the dropdown\n- `value` and `label` of the option are the same.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import Output, Input, html, callback\n\ncomponent = html.Div(\n    [\n        dmc.Autocomplete(\n            label=\"Your favorite library\",\n            placeholder=\"Pick value or enter anything\",\n            id=\"framework-autocomplete\",\n            data=[\"Pandas\", \"NumPy\", \"TensorFlow\", \"PyTorch\"],\n            mb=10,\n        ),\n        dmc.Text(id=\"autocomplete-value\"),\n    ]\n)\n\n\n@callback(Output(\"autocomplete-value\", \"children\"), Input(\"framework-autocomplete\", \"value\"))\ndef select_value(value):\n    return f\" You selected {value}\"\n```\n#### Layout Overview\n\nThe new [Layout Overview](/layout-overview) section helps you choose the right component for your use case:\n\n* `Grid` – Use when columns have different sizes (for example, first column is 1/3 width, second is 2/3).\n* `SimpleGrid` – Use for equal-width columns.\n* `Group` – Arrange items horizontally.\n* `Stack` – Arrange items vertically.\n* `Flex` – Create both horizontal and vertical flexbox layouts. More flexible than `Group` or `Stack`, but requires more configuration.\n\nThis section also explains the differences between `Container`, `Paper`, and `Box`, and provides an overview of\n`AppShell` for adding headers, footers, navbars, and asides to your app.\n\n\n#### Theming and Style section updates\n\nThe Theming and Styles are now two sections to make the information easier to find.  Plus there is a new\n[Mantine Overview](/mantine-overview) section to help understand the basic features of the Mantine API.\n\n### Patch Release 2.2.1\n - Updates to Mantine 8.2.7\n - Fixes regression where nested `NavLink` did not open on click\n - Fixes `MulitSelect` and `Select` - changes to the `data` and `value` are batched so they only trigger a single callback\n\n### Quick Start\n\nJust a reminder:\n\n* With Dash ≥ 3.0.0, there’s no need to manually set the React version.\n* With DMC ≥ 1.2.0, you no longer need to include optional stylesheets such as `dmc.styles.ALL`.\n\nHere’s a minimal app to get started:\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import Dash\n\napp = Dash()\n\napp.layout = dmc.MantineProvider(\n    dmc.Alert(\n        \"Welcome to Dash Mantine Components\",\n        title=\"Hello!\",\n        color=\"violet\",\n    )\n)\n\napp.run(debug=True)\n```"
  },
  {
    "name": "Version 2.3.0",
    "endpoint": "/release-2-3-0",
    "description": "Release announcement for Dash Mantine Components v2.3.0",
    "category": "Releases",
    "order": 98,
    "content": "\n\n## Version 2.3.0  \nRelease announcement for Dash Mantine Components v2.3.0  \nCategory: Releases  \n\nSeptember 21, 2025  \n\nBased on Mantine 8.3.1\n\n### New DirectionProvider component \n\nMantine supports right-to-left (RTL) layouts out of the box. Try the new direction toggle in the header of these \ndocs — one click and the entire app flips to RTL. Not just the text, but every component adapts. Check out the [sliders](/components/slider)\nin RTL mode, they feel completely natural.\n\nSee the [RTL (right-to-left) direction guide](/rtl)  for details on enabling RTL direction and adding a toggle to your app.\n\n\n```python\napp.layout = dmc.DirectionProvider(\n    dmc.MantineProvider([\n     # your app layout\n     ]),\n    direction=\"rtl\"\n)\n```\n\n### New MiniCalendar component\n\nThe new [MiniCalendar](/components/mini-calendar) component makes it easy to add compact calendars.\n\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import callback, Input, Output\n\n\ncomponent = dmc.Stack([\n    dmc.MiniCalendar(\n        defaultDate=\"2025-01-02\",\n        value=\"2025-01-03\",\n        id=\"mini-calendar\"\n    ),\n    dmc.Text(id=\"mini-calendar-date\", m=\"md\")\n])\n\n@callback(\n    Output(\"mini-calendar-date\", \"children\"),\n    Input(\"mini-calendar\", \"value\"),\n)\ndef update(d):\n    return f\"You selected: {d}\"\n```\n### Progress vertical orientation\n\n[Progress](/components/progress) now supports vertical orientation:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Group([\n    dmc.Progress(value=80, orientation=\"vertical\", h=200),\n\n    dmc.Progress(\n        value=60,\n        color=\"orange\",\n        size=\"xl\",\n        orientation=\"vertical\",\n        h=200,\n        animated=True\n    ),\n\n    dmc.ProgressRoot(\n        size=\"xl\",\n        autoContrast=True,\n        orientation=\"vertical\",\n        h=200,\n        children=[\n            dmc.ProgressSection(\n                value=40,\n                color=\"lime.4\",\n                children=dmc.ProgressLabel(\"Documents\")\n            ),\n            dmc.ProgressSection(\n                value=20,\n                color=\"yellow.4\",\n                children=dmc.ProgressLabel(\"Apps\")\n            ),\n            dmc.ProgressSection(\n                value=20,\n                color=\"cyan.7\",\n                children=dmc.ProgressLabel(\"Other\")\n            )\n        ]\n    )\n])\n```\n### RichTextEditor upgraded to Tiptap V3\n\n[RichTextEditor](/components/richtexteditor) is now built on Tiptap V3 enabling features like  `BackgroundColor`,\n`FontFamily`, `FontSize`, `LineHeight`.\n\nNote: This change has no known breaking changes, but customizations may be affected.  See our [migration guide,](https://www.dash-mantine-components.com/migration) for details.\n  \n\nHere is an example of creating custom buttons to change the font size:\n\n\n```python\n\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\n\ncomponent = dmc.RichTextEditor(\n    html=\"<p>Change font size with the controls!</p>\",\n    toolbar={\n        \"controlsGroups\": [\n            [\"H1\", \"H2\", \"H3\", \"H4\"],\n            [\n                {\n                    \"CustomControl\": {\n                        \"aria-label\": \"Increase font size\",\n                        \"title\": \"Increase font size\",\n                        \"children\": DashIconify(icon=\"mdi:format-font-size-increase\", width=16),\n                        \"onClick\": {\"function\": \"increaseFontSize\"},\n                    },\n                },\n                {\n                    \"CustomControl\": {\n                        \"aria-label\": \"Decrease font size\",\n                        \"title\": \"Decrease font size\",\n                        \"children\": DashIconify(icon=\"mdi:format-font-size-decrease\", width=16),\n                        \"onClick\": {\"function\": \"decreaseFontSize\"},\n                    },\n                },\n            ],\n         ],\n    },\n)\n```\n\n```javascript\nvar dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\n\nfunction changeFontSize(editor, delta) {\n  if (!editor) return;\n  const { from, to } = editor.state.selection;\n  let size = 16; // default\n\n  editor.state.doc.nodesBetween(from, to, (node) => {\n    if (node.isText) {\n      const mark = node.marks.find(m => m.type.name === \"textStyle\");\n      if (mark?.attrs.fontSize) {\n        size = parseInt(mark.attrs.fontSize, 10);\n      }\n    }\n  });\n\n  const newSize = Math.min(Math.max(size + delta, 8), 72) + \"px\";\n  editor.chain().focus().setFontSize(newSize).run();\n}\n\ndmcfuncs.increaseFontSize = ({ editor }) => changeFontSize(editor, 2);\ndmcfuncs.decreaseFontSize = ({ editor }) => changeFontSize(editor, -2);\n```\n\n### ScrollArea scrollTo prop\n\nThe [ScrollArea](/components/scrollarea), now includes a `scrollTo` prop to control the viewport position.\n\n  * `top` – The vertical position (pixels or percentage string, from '0%' to '100%')\n  * `left` – The horizontal position (pixels or percentage string, from '0%' to '100%')\n  * `behavior` – `auto` (instant) or `smooth` (animated, default)\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import callback, Input, Output, ctx\n\n\ncontent = [\n    dmc.Box([\n        dmc.Title(f\"Section {i}\", order=4, mt=\"sm\", id=f\"section-{i}\"),\n        dmc.Text(\"\"\"\n            Lorem ipsum, dolor sit amet consectetur adipisicing elit.\n            Dicta perspiciatis reiciendis voluptate eaque itaque quos.\n            Natus iure tenetur libero, reprehenderit ad, sequi, in aliquam eos\n            necessitatibus expedita delectus veniam culpa!            \n        \"\"\")\n    ])\n    for i in range(1, 11)\n]\n\ncomponent = dmc.Box([\n    dmc.ScrollArea(\n        content,\n        id=\"scrollArea\",\n        h=250, w=350,\n    ),\n    dmc.Group([\n        dmc.Button(\"Scroll to Top\", id=\"scrollto-top\"),\n        dmc.Button(\"Scroll to Middle\", id=\"scrollto-middle\"),\n        dmc.Button(\"Scroll to Bottom\", id=\"scrollto-bottom\"),\n    ], mt=\"lg\"),\n])\n\n\n@callback(\n    Output(\"scrollArea\", \"scrollTo\"),\n    Input(\"scrollto-top\", \"n_clicks\"),\n    Input(\"scrollto-middle\", \"n_clicks\"),\n    Input(\"scrollto-bottom\", \"n_clicks\"),\n)\ndef scroll_to(t, m, b):\n    if ctx.triggered_id == \"scrollto-middle\":\n        return {\"top\": \"50%\"}\n    if ctx.triggered_id == \"scrollto-bottom\":\n        return {\"top\": \"100%\"}\n    return {\"top\": 0}\n```\n### New ScrollAreaAutosize component\n\n`ScrollAreaAutosize` component creates a scrollable container once a given max-height is reached.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import callback, Output, Input, ctx\n\nlorem = (\n    \"Lorem ipsum, dolor sit amet consectetur adipisicing elit. \"\n    \"Dicta perspiciatis reiciendis voluptate eaque itaque quos. \"\n    \"Natus iure tenetur libero, reprehenderit ad, sequi, in aliquam eos \"\n    \"necessitatibus expedita delectus veniam culpa!\"\n)\n\ncomponent = dmc.Stack(\n    [\n        dmc.ScrollAreaAutosize(mah=300, maw=400, p=\"sm\", id=\"scrollarea-autosize\"),\n        dmc.Group(\n            m=\"lg\",\n            children=[\n                dmc.Button(\n                    \"1 paragraph\",\n                    id=\"btn-1-paragraph\",\n                    color=\"red\",\n                ),\n                dmc.Button(\n                    \"4 paragraphs\",\n                    id=\"btn-4-paragraphs\",\n                ),\n            ],\n        ),\n    ]\n)\n\n\n@callback(\n    Output(\"scrollarea-autosize\", \"children\"),\n    Input(\"btn-1-paragraph\", \"n_clicks\"),\n    Input(\"btn-4-paragraphs\", \"n_clicks\"),\n)\ndef update_paragraphs(inc, dec):\n    if ctx.triggered_id == \"btn-1-paragraph\":\n        return dmc.Box(lorem, p=\"sm\")\n    return [dmc.Box(lorem, p=\"sm\") for _ in range(4)]\n```\n### New Overlay component\n\n[Overlay](/components/overaly) creates a customizable  layer over content or the entire viewport. It’s useful for dimming\neffects, interactive overlays, and custom loading states. You can configure opacity, color, and positioning.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import Dash, Input, Output, callback, html\n\n\ncomponent = dmc.Stack([\n        dmc.AspectRatio(\n            ratio=16/9,\n            maw=400,\n            mx=\"auto\",\n            pos=\"relative\",\n            children=[\n                html.Img(\n                    src=\"https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-1.png\",\n                    alt=\"Demo\",\n                ),\n                dmc.Overlay(\n                    id=\"overlay-usage\",\n                    color=\"#000\",\n                    backgroundOpacity=0.85,\n                    style={\"display\": \"block\"}  # Initially visible\n                )\n            ]\n        ),\n        dmc.Button(\n            \"Toggle overlay\",\n            id=\"overlay-toggle-button\",\n            mx=\"auto\",\n            mt=\"lg\",\n            n_clicks=0\n        )\n    ])\n\n\n@callback(\n    Output(\"overlay-usage\", \"style\"),\n    Input(\"overlay-toggle-button\", \"n_clicks\")\n)\ndef toggle_overlay(n_clicks):\n    if n_clicks %2 == 0:\n        return {\"display\": \"block\"}\n    return {\"display\": \"none\"}\n```\n### MultiSelect improvement\n\n[MultiSelect](/components/multiselect) now supports `clearSearchOnChange=False` allowing multiple selectios from the same search query.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.MultiSelect(\n    data=[\"aa\", \"ab\", \"ac\", \"ba\", \"bb\", \"bc\"],\n    value=[\"aa\"],\n    searchable=True,\n    clearSearchOnChange=False\n)\n```\n### Autocomplete debounce prop\n\nThe [Autocomplete](/components/autocomplete) component now supports the [debounce prop.](/debounce) This delays the update of the `value` until\nthe user stops interacting, reducing callback frequency.\n\n### LLMs.txt\nYou can now use LLMs.txt file with Cursor and other IDEs. The file is automatically updated with each release and\nincludes every demo and documentation page from the DMC docs site. It is about 1.6MB. You can find the latest version \nof LLMs.txt and documentation in the  [LLMs](/llms) section."
  },
  {
    "name": "Version 2.4.0",
    "endpoint": "/release-2-4-0",
    "description": "Release announcement for Dash Mantine Components v2.4.0",
    "category": "Releases",
    "order": 97,
    "content": "\n\n## Version 2.4.0  \nRelease announcement for Dash Mantine Components v2.4.0  \nCategory: Releases  \n\nNovember 6, 2025  \n\nBased on Mantine 8.3.6\n\n\n### Version 2.4.1\n\nDecember 20, 2025  \n\nBased on Mantine 8.3.10  \n\nSee [Changelog](https://github.com/snehilvj/dash-mantine-components/releases/tag/2.4.1)  \n\n\n\n### New: Copy to Clipboard Components\n\nThe new `CopyButton` and `CustomCopyButton` components are similar to `dcc.Clipboard`, but with full Mantine styling and customization.\n\n- Customizable icons, colors, and labels for the copied state\n- Support for copying from another component using `target_id`\n- Trigger copying in callbacks with `triggerCopy=True`\n- Build fully custom copy-to-clipboard buttons with `CustomCopyButton`\n\nCheck out the new [Copy Button docs](/components/copybutton).\n\n\n#### Example:  Styling the CopyButton\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ncomponent = dmc.Group([\n    dmc.CopyButton(\n        value=\"https://www.dash-mantine-components.com/\",\n        children=\"Copy URL\",\n        copiedChildren=\"Copied!\",\n        color=\"blue\",\n        copiedColor=\"teal\"\n    ),\n    dmc.CopyButton(\n        value=\"This text is copied\",\n        children=DashIconify(icon=\"tabler:clipboard\"),\n        copiedChildren=DashIconify(icon=\"tabler:check\"),\n        color=\"blue\",\n        copiedColor=\"teal\",\n        variant=\"outline\"\n    ),\n    dmc.CopyButton(\n        value=\"This text is copied\",\n        children=DashIconify(icon=\"fa-regular:copy\"),\n        copiedChildren=DashIconify(icon=\"fa-regular:check-circle\"),\n        color=\"gray\",\n        copiedColor=\"dark\",\n        variant=\"transparent\"\n    )\n])\n```\n---\n#### Example: Copy from another component:\nNeed a quick way to say “No”? Fetch a random excuse from [No-as-a-Service](https://github.com/hotheadhacker/no-as-a-service) and copy it with a single click.\n\n```python\nimport requests\nfrom dash import Input, Output, callback\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ncomponent = dmc.Box([\n    dmc.Button(\"Get rejection reason\", id=\"new-reason-btn\", mb=\"lg\"),\n    dmc.Group([\n        dmc.Text(id=\"reason-text\", mt=10),\n        dmc.CopyButton(\n            target_id=\"reason-text\",\n            children=DashIconify(icon=\"fa-regular:copy\"),\n            copiedChildren=DashIconify(icon=\"fa-regular:check-circle\"),\n            color=\"blue\",\n            copiedColor=\"teal\",\n            variant=\"outline\",\n            size=\"xs\"\n        )\n    ], align=\"flex-start\",  wrap=\"nowrap\",)\n])\n\n@callback(\n    Output(\"reason-text\", \"children\"),\n    Input(\"new-reason-btn\", \"n_clicks\"),\n    running=[(Output(\"new-reason-btn\", \"loading\"), True, False)],\n)\ndef fetch_reason(_):\n    try:\n        res = requests.get(\"https://naas.isalman.dev/no\")\n        res.raise_for_status()\n        return res.json().get(\"reason\", \"No reason found.\")\n    except Exception:\n        return \"No reason. Just No.\"\n```\n### More chart props now support functions\n\nThe `AreaChart`, `BarChart`, `BubbleChart`, `CompositeChart`, `LineChart`, and `ScatterChart` now accept functions for these props:\n\n* `xAxisProps`, `yAxisProps`, `gridProps`, `rightYAxisProps` (all charts)\n* `zAxisProps` (`BubbleChart` only)\n\nSee the [Functions As Props guide](/functions-as-props) for details.\n\n#### Example: format x-axis tick labels\n\nThis example uses a JavaScript function to format x-axis tick labels for datetime values.\n\n```python\n\nimport dash_mantine_components as dmc\nfrom dash import Dash\nfrom datetime import datetime\n\ndata = [\n  {\"date\": datetime(2025, 3, 22), \"Apples\": 2890, \"Oranges\": 2338, \"Tomatoes\": 2452},\n  {\"date\": datetime(2025, 3, 23), \"Apples\": 2756, \"Oranges\": 2103, \"Tomatoes\": 2402},\n  {\"date\": datetime(2025, 3, 24), \"Apples\": 3322, \"Oranges\": 986, \"Tomatoes\": 1821},\n  {\"date\": datetime(2025, 3, 25), \"Apples\": 3470, \"Oranges\": 2108, \"Tomatoes\": 2809},\n  {\"date\": datetime(2025, 3, 26), \"Apples\": 3129, \"Oranges\": 1726, \"Tomatoes\": 2290}\n]\n\ncomponent = dmc.AreaChart(\n    h=300,\n    dataKey=\"date\",\n    data=data,\n    series = [\n        {\"name\": \"Apples\", \"color\": \"indigo.6\"},\n        {\"name\": \"Oranges\", \"color\": \"blue.6\"},\n        {\"name\": \"Tomatoes\", \"color\": \"teal.6\"}\n    ],\n    curveType=\"Monotone\",\n    tickLine=\"xy\",\n    withGradient=False,\n    withDots=False,\n    xAxisProps={\"tickFormatter\": {\"function\": \"formatDatetime\"}},\n    valueFormatter={\"function\": \"formatNumberIntl\"},\n)\n```\n\n```javascript\n\nvar dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};\n\ndmcfuncs.formatDatetime = function (datetimeStr) {\n  const date = new Date(datetimeStr);\n  return date.toLocaleDateString('en-US', {\n    month: 'short',\n    day: 'numeric',\n    year: 'numeric'\n  });\n};\n```\n\n### New RichTextEditor features\n\n- Code highlighting is now available\n- New Props:  `editable`, `focus`  Thanks for the PR [@chgiesse](https://github.com/chgiesse)\n- Access Editor API in a clientside callback\n\n\nSee examples of all the new features in the [RichTextEditor docs](/components/richtexteditor)\n\n#### Example: Editable prop\nNote the toolbar is hidden when the editor is read-only\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import  Input, Output, callback\n\ncomponent = dmc.Box([\n    dmc.Switch(\n        id=\"rte-toggle-editable\",\n        label=\"Editable\",\n        checked=True,\n    ),\n    dmc.RichTextEditor(\n        id=\"rte-editable\",\n        html=\"<p>This editor can be toggled between editable and read-only mode.</p>\",\n        editable=True,\n        toolbar={\n            \"controlsGroups\": [\n                [\n                    \"Bold\",\n                    \"Italic\",\n                    \"Underline\",\n                    \"Strikethrough\",\n                    \"CodeBlock\"\n                ],\n            ],\n        },\n    ),\n])\n\n@callback(\n    Output(\"rte-editable\", \"editable\"),\n    Input(\"rte-toggle-editable\", \"checked\"),\n)\ndef toggle_editable(checked):\n    return checked\n```\n#### Example:  Accessing Editor clientside\nGet full access to the editor API in clientside callbacks, including executing commands, inspecting\ncontent, and updating the editor state.  \n\n```python\nimport dash_mantine_components as dmc\nfrom dash import Dash, Input, Output, clientside_callback\n\ncomponent = dmc.Box([\n    dmc.RichTextEditor(\n        id=\"get-editor-id\",\n        toolbar={\n                \"controlsGroups\": [\n                    [\n                        \"Bold\",\n                        \"Italic\",\n                        \"Underline\",\n                        \"Strikethrough\",\n                    ],\n                ],\n            },\n        html=\"<p>Try typing some text in this editor. Click the button below to see your character and word count.</p>\"\n    ),\n    dmc.Button(\"Get Stats\", id=\"btn-rte-stats\", n_clicks=0),\n    dmc.Box(id=\"stats\"),\n])\n\nclientside_callback(\n    \"\"\"\n    function(n_clicks) {\n        if (n_clicks > 0) {\n            const editor = dash_mantine_components.getEditor('get-editor-id');\n            if (editor) {\n                const text = editor.getText();\n                const chars = text.length;\n                const words = text.split(/\\\\s+/).filter(Boolean).length;\n                return `Characters: ${chars} | Words: ${words}`;\n            }\n        }\n        return dash_clientside.no_update;\n    }\n    \"\"\",\n    Output(\"stats\", \"children\"),\n    Input(\"btn-rte-stats\", \"n_clicks\"),\n)\n```\n### AI-friendly documentation\n\nLLM-friendly documentation is now available for Dash Mantine Components. It follows the `llms.txt` standard, enabling AI\ntools like ChatGPT, Cursor, Windsurf, and Claude to better understand DMC components and props.\n\nNew in this release:\n* Generate a custom `llms.txt` file that includes only the components you use — improving AI accuracy and response speed.\n* Each docs page now includes a \"Copy for LLMs\" button for copying AI-friendly content directly into a chat.\n\nSee the [LLMs section](/llms) for full details and customization options.\n\n\n### Other notable updates\n\n* Mantine patch updates from 8.3.1 through 8.3.10. See the [Mantine Releases](https://github.com/mantinedev/mantine/releases) for details.\n* Improved rendering in several components, including the `Stepper`. Thanks to @chgiesse for [PR #664](https://github.com/snehilvj/dash-mantine-components/pull/664).\n\nIn 2.4.1:\n* Added `anchorProps` to `Anchor` allowing to pass any valid attribute (like `download`) to the `Anchor` component. Thanks to @jksinton for  [PR #676](https://github.com/snehilvj/dash-mantine-components/pull/676).\n* Added `withAlignedLabels` prop to support offsetting the selected check icon in `Select` and `MultiSelect`\n* Updated to TipTap 3.14.0\n\n### Thanks\n\nSpecial thanks to:\n\n* [@chgiesse](https://github.com/chgiesse) for contributing two PRs in this release\n* [@jksinton](https://github.com/jksinton) first time contributor, for ading `anchorProps` prop to `Anchor`\n* [@BSd3v](https://github.com/BSd3v) for providing help and guidance along the way\n* [@alexcjohnson](https://github.com/alexcjohnson) for thoughtful feedback during code reviews"
  },
  {
    "name": "Version 2.5.0",
    "endpoint": "/release-2-5-0",
    "description": "Release announcement for Dash Mantine Components v2.5.0",
    "category": "Releases",
    "order": 96,
    "content": "\n\n## Version 2.5.0  \nRelease announcement for Dash Mantine Components v2.5.0  \nCategory: Releases  \n\nJan 26, 2026  \n\nBased on Mantine 8.3.13\n\nSee [Changelog](https://github.com/snehilvj/dash-mantine-components/releases/tag/2.5.0)  \n\n\n\n### New TableofContents Component\n\nUse the `TableOfContents` component to display a table of contents similar to the sidebar in these docs. The\ncomponent tracks scroll position and highlights current heading in the list.\n\nCheck out all the new features in the [Table Of Contents docs](/components/table-of-contents).\n\n*This component was added by @deadkex in [PR #513](https://github.com/snehilvj/dash-mantine-components/pull/513)*\n\n### Custom DMC components\n\nYou can now build custom Dash components that use Mantine the same way Dash Mantine Components does.\n\nPreviously, custom components built with the standard Dash component template had to bundle their own copy of Mantine.\nBecause of this, they could not access the `MantineProvider` used by DMC, which meant themes, styles, and context did\nnot work as expected.\n\nDMC now exports `MantineHooks` and `MantineCore`, allowing custom components to use the same Mantine hooks, utilities,\nand context as the built-in components. This enables a wide range of custom components, such as building advanced `Select`\nor `MultiSelect` on top of Mantine’s [Combobox](https://mantine.dev/core/combobox/), while keeping theme and behavior consistent inside a Dash app.\n\nFor examples and step-by-step instructions, see the custom DMC components in this [GitHub repository](https://github.com/AnnMarieW/dmc_custom_components).\n\n*This feature was added by @BSd3v in [PR# 653](https://github.com/snehilvj/dash-mantine-components/pull/653)*  \n\n### Improved typing\n\nThe Python types for DMC components have been improved to better reflect supported props and values. This provides more\naccurate type hints, better autocomplete, and clearer static checking in editors like VS Code and PyCharm.\n\n\n### New in the docs:  DatePicker presets\n\nThis feature has been available since dash-mantine-components==2.1.0, but was just added to the documentation thanks\nto first time contributor [@EstanVW25](https://github.com/snehilvj/dmc-docs/pull/280)\n\n\n[DatePicker](https://www.dash-mantine-components.com/components/datepicker#presets), [DatePickerInput](https://www.dash-mantine-components.com/components/datepicker#presets) and [DateTimePicker](https://www.dash-mantine-components.com/components/datetimepicker#presets) \nnow support `presets` prop that allows you to add custom date presets. Presets are displayed next to the calendar:\n\n\n```python\nfrom datetime import date, timedelta\nfrom dateutil.relativedelta import relativedelta\nimport dash_mantine_components as dmc\n\n\ntoday = date.today()\n\ncomponent = dmc.Center(\n    dmc.DatePicker(\n        presets=[\n            {\n                \"value\": (today - timedelta(days=1)).isoformat(),\n                \"label\": \"Yesterday\",\n            },\n            {\n                \"value\": today.isoformat(),\n                \"label\": \"Today\",\n            },\n            {\n                \"value\": (today + timedelta(days=1)).isoformat(),\n                \"label\": \"Tomorrow\",\n            },\n            {\n                \"value\": (today + relativedelta(months=1)).isoformat(),\n                \"label\": \"Next month\",\n            },\n            {\n                \"value\": (today + relativedelta(years=1)).isoformat(),\n                \"label\": \"Next year\",\n            },\n            {\n                \"value\": (today - relativedelta(months=1)).isoformat(),\n                \"label\": \"Last month\",\n            },\n            {\n                \"value\": (today - relativedelta(years=1)).isoformat(),\n                \"label\": \"Last year\",\n            },\n        ]\n    )\n)\n```\n### Other notable updates\n\n* Mantine patch updates from 8.3.10 through 8.3.13. See the [Mantine Releases](https://github.com/mantinedev/mantine/releases) for details.\n\n- AppShell: Add static `mode` support for nested app shells\n- Added `selectFirstOptionOnDropdownOpen` and `openOnFocus`props to Combobox based components.\n- Fixed `PinInput` so that `value` can be set initially and in a callback\n\n### Thanks\n\nSpecial thanks to:\n\n* [@EstanVW25](https://github.com/EstanVW25) first time contributor for adding the Datpeick presets docs. \n* [@deadkex](https://github.com/deadkex) for your dedication to getting the TableofContent PR over the finishline!   \n* [@BSd3v](https://github.com/BSd3v) for PR #653 to make it possible to make custom DMC components.\n* [@alexcjohnson](https://github.com/alexcjohnson) for your thoughtful feedback during code reviews."
  },
  {
    "name": "Version 2.6.0",
    "endpoint": "/release-2-6-0",
    "description": "Release announcement for Dash Mantine Components v2.6.0",
    "category": "Releases",
    "order": 95,
    "content": "\n\n## Version 2.6.0  \nRelease announcement for Dash Mantine Components v2.6.0  \nCategory: Releases  \n\nFeb 14, 2026  \n\nBased on Mantine 8.3.14\n\nSee [Changelog](https://github.com/snehilvj/dash-mantine-components/releases/tag/2.6.0)  \n\n\n\n### New ColorSchemeToggle Component\n\n`ColorSchemeToggle` automatically switches between light and dark themes and persists the user’s selection in localStorage.\n\nCopy this app to run it locally. For a live demo, click the `ColorSchemeToggle` in the header of these docs.\n\n> The toggle handles theme switching internally and does not require a Dash callback.\n\nFor more information, see the  [ColorSchemeToggle](/components/colorschemetoggle) documentation.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import Dash\nfrom dash_iconify import DashIconify\n\napp = Dash()\n\ncomponent = dmc.ColorSchemeToggle(\n    lightIcon=DashIconify(icon=\"radix-icons:sun\", width=20),\n    darkIcon=DashIconify(icon=\"radix-icons:moon\", width=20),\n    color=\"yellow\",\n    size=\"lg\",\n    m=\"xl\",\n)\n\napp.layout = dmc.MantineProvider(component)\n\nif __name__ == \"__main__\":\n    app.run(debug=True)\n\n```\n### Prevent flash of incorrect theme on load\n\nThis release fixes the light/dark “flash” that could occur when the app is loading initially or on refresh.\n\n`ColorSchemeToggle` now persists the selected color scheme in `localStorage` (`mantine-color-scheme-value`).\nThe new `pre_render_color_scheme()` helper reads that value and applies the correct Mantine theme before Dash mounts, so the app loads with the proper styles immediately.\n\n```python\nimport dash_mantine_components as dmc\n\ndmc.pre_render_color_scheme()\n```\n\nRequires `dash>=3.0` and `ColorSchemeToggle`\n\n\n### Other notable updates\n\n- Mantine patch update to 8.3.14. See the [Mantine Releases](https://github.com/mantinedev/mantine/releases) for details.\n\n- Fixed prop types in `Grid` and `SimpleGrid`\n- Fixed incorrect clamping in `NumberInput` when `min` or `max` was set to `None`\n- New in the docs:  Updated Dash Ag Grid examples for theming in versions >=33\n\n### Thanks\n\nSpecial thanks to:\n  \n* [@BSd3v](https://github.com/BSd3v) for the `pre_render_color_scheme()` helper function to Fix The Flash!\n* [@alexcjohnson](https://github.com/alexcjohnson) for your helpful feedback during code reviews."
  },
  {
    "name": "CSS Variables",
    "description": "How to use CSS variables with Dash Mantine Components.",
    "endpoint": "/css-variables",
    "package": "dash_mantine_components",
    "category": "Styling",
    "order": 4,
    "content": "\n\n## CSS Variables  \nHow to use CSS variables with Dash Mantine Components.  \nCategory: Styling  \n\nMantineProvider exposes all Mantine CSS variables based on the given theme. You can use these variables in CSS files,\nstyle prop or any other styles. See the full list of variables at the bottom of the page.\n\n### Typography variables\n\n#### Font family\nThe following CSS variables are used to assign font families to all Mantine components:\n\n\n| Variable                        | Default value           | Description                                              |\n|:--------------------------------|:------------------------|:---------------------------------------------------------|\n| `mantine-font-family`           | system sans-serif fonts | Controls font-family property of most Mantine components |\n| `mantine-font-family-monospace` | system monospace fonts  | Controls font-family property of code blocks             |\n| `mantine-font-family-headings`  | system sans-serif fonts | Controls font-family property of headings                |\n\n\nYou can control these variables in the [theme](/theme-object). Note that if `theme.headings.fontFamily` is not set,\n`--mantine-font-family-headings` value will be the same as `--mantine-font-family`\n\n\n```python\ntheme = {\n    # Controls --mantine-font-family\n    \"fontFamily\": \"Arial, sans-serif\",\n\n    # Controls --mantine-font-family-monospace\n    \"fontFamilyMonospace\": \"Courier New, monospace\",\n\n    \"headings\": {\n        # Controls --mantine-font-family-headings\n        \"fontFamily\": \"Georgia, serif\",\n    },\n}\ndmc.MantineProvider(theme=theme, children=[])\n```\n\nIf you want to use system fonts as a fallback for custom fonts, you can reference `dmc.DEFAULT_THEME` value instead of defining it manually:\n\n```python\nimport dash_mantine_components as dmc\n\ntheme = {\n    \"fontFamily\": f\"Roboto, {dmc.DEFAULT_THEME['fontFamily']}\"\n}\n```\nYou can reference font family variables in your CSS:\n\n```css\n\n.text {\n  font-family: var(--mantine-font-family);\n}\n\n.code {\n  font-family: var(--mantine-font-family-monospace);\n}\n\n.heading {\n  font-family: var(--mantine-font-family-headings);\n}\n\n```\n\nAnd in `ff` style prop:\n\n- `ff=\"text\"` will use `--mantine-font-family` variable\n- `ff=\"monospace\"` will use `--mantine-font-family-monospace` variable\n- `ff=\"heading\"` will use `--mantine-font-family-headings` variable\n\n\n```python\ndmc.Text(\n    \"This text uses --mantine-font-family-monospace variable\",\n    ff=\"monospace\"\n)\n```\n\n\n#### Font size\n\nFont size variables are used in most Mantine components to control text size. The variable that is chosen depends on\nthe component and its size prop.\n\n| Variable                        | Default value   |\n|:--------------------------------|:----------------|\n| --mantine-font-size-xs          | 0.75rem (12px)  |\n| --mantine-font-size-sm          | 0.875rem (14px) |\n| --mantine-font-size-md          | 1rem (16px)     |\n| --mantine-font-size-lg          | 1.125rem (18px) |\n| --mantine-font-size-xl          | 1.25rem (20px)  |\n\nYou can reference font size variables in CSS:\n\n```css\n.demo {\n  font-size: var(--mantine-font-size-md);\n}\n```\n\nAnd in `fz` style prop:\n```python\ndmc.Text(\n    \"This text uses --mantine-font-size-xl variable\",\n    fz=\"xl\"\n)\n```\n\nTo define custom font sizes, can use `theme.fontSizes` property:\n\n```python\ntheme = {\n    'fontSizes': {\n    'xs': '0.5rem',\n    'sm': '0.75rem',\n    'md': '1rem',\n    'lg': '1.25rem',\n    'xl': '1.5rem',\n  },\n}\ndmc.MantineProvider(theme=theme, children=[])\n```\n\n\nNote that `theme.fontSizes` dict is merged with the dmc.DEFAULT_THEME – it is not required to define all values, only those that you want to change.\n\n```python\ntheme = {\n    'fontSizes': {'xs': '0.5rem'}\n}\n```\n\nYou can add any number of additional font sizes to the `theme.fontSizes` object. These values will be defined as\nCSS variables in `--mantine-font-size-{size}` format:\n\n\n```python\ntheme = {\n    'fontSizes': {\n        'xxs': '0.125rem',\n        'xxl': '2rem',\n    }\n}\n```\n\nAfter defining `theme.fontSizes`, you can reference these variables in your CSS:\n\n```css\n.demo {\n  font-size: var(--mantine-font-size-xxs);\n}\n```\n\n> Case conversion\n>\n>Case conversion (camelCase to kebab-case) is not automatically applied to custom font sizes. If you define `theme.fontSizes`\nwith camelCase keys, you need to reference them in camelCase format. For example, if you define `{ customSize: '1rem' }`, you need to reference it as `--mantine-font-size-customSize`.\n\n\n#### Line height\n\nLine height variables are used in the Text component. In other components, line-height is either calculated based on font size or set to `--mantine-line-height`, which is an alias for `--mantine-line-height-md`.\n\n| Variable                      | Default value  |\n|:------------------------------|:---------------|\n| --mantine-line-height         | 1.55           |\n| --mantine-line-height-xs      | 1.4            |\n| --mantine-line-height-sm      | 1.45           |\n| --mantine-line-height-md      | 1.55           |\n| --mantine-line-height-lg      | 1.6            |\n| --mantine-line-height-xl      | 1.65           |\n\nYou can reference line height variables in your CSS:\n\n```css\n.demo {\n  line-height: var(--mantine-line-height-md);\n}\n```\n\n```python\ndmc.Text(\"This text uses --mantine-line-height-xl variable\", lh=\"xl\")\n```\n\nTo define custom line heights, you can use theme.lineHeights property:\n\n```python\ntheme = {\n    'lineHeights': {\n    'xs': '1.2',\n    'sm': '1.3',\n    'md': '1.4',\n    'lg': '1.5',\n    'xl': '1.6',\n  },\n}\n```\n\n\n#### Headings\n\n`theme.headings` controls `font-size`, `line-height`, `font-weight`, and `text-wrap` CSS properties of headings in `Title` and `TypographyStylesProvider` components.\n\n| Variable                        | Default value   |\n|:--------------------------------|:----------------|\n| **General variables**           |                 |\n| --mantine-heading-font-weight   | 700             |\n| --mantine-heading-text-wrap     | wrap            |\n| **h1 heading**                  |                 |\n| --mantine-h1-font-size          | 2.125rem (34px) |\n| --mantine-h1-line-height        | 1.3             |\n| --mantine-h1-font-weight        | 700             |\n| **h2 heading**                  |                 |\n| --mantine-h2-font-size          | 1.625rem (26px) |\n| --mantine-h2-line-height        | 1.35            |\n| --mantine-h2-font-weight        | 700             |\n| **h3 heading**                  |                 |\n| --mantine-h3-font-size          | 1.375rem (22px) |\n| --mantine-h3-line-height        | 1.4             |\n| --mantine-h3-font-weight        | 700             |\n| **h4 heading**                  |                 |\n| --mantine-h4-font-size          | 1.125rem (18px) |\n| --mantine-h4-line-height        | 1.45            |\n| --mantine-h4-font-weight        | 700             |\n| **h5 heading**                  |                 |\n| --mantine-h5-font-size          | 1rem (16px)     |\n| --mantine-h5-line-height        | 1.5             |\n| --mantine-h5-font-weight        | 700             |\n| **h6 heading**                  |                 |\n| --mantine-h6-font-size          | 0.875rem (14px) |\n| --mantine-h6-line-height        | 1.5             |\n| --mantine-h6-font-weight        | 700             |\n\nThese variables are used in the `Title` component. The `order` prop controls which heading level to use. For example, `order={3}` Title will use:\n\n- `--mantine-h3-font-size`\n- `--mantine-h3-line-height`\n- `--mantine-h3-font-weight`\n\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html\n\ncomponent = html.Div(\n    [\n        dmc.Title(f\"This is h1 title\", order=1),\n        dmc.Title(f\"This is h2 title\", order=2),\n        dmc.Title(f\"This is h3 title\", order=3),\n        dmc.Title(f\"This is h4 title\", order=4),\n        dmc.Title(f\"This is h5 title\", order=5),\n        dmc.Title(f\"This is h6 title\", order=6),\n    ]\n)\n```\nYou can reference heading variables in your CSS:\n\n\n```css\n.h1 {\n  font-size: var(--mantine-h1-font-size);\n  line-height: var(--mantine-h1-line-height);\n  font-weight: var(--mantine-h1-font-weight);\n}\n```\nAnd in fz and lh style props:\n\n```python\ndmc.Text(\"This text uses --mantine-h1-* variables\",  fz=\"h1\", lh=\"h1\")\n```\n\nTo change heading styles, can use `theme.headings` property:\n\n```python\ntheme = {\n    \"headings\": {\n        \"sizes\": {\n            \"h1\": {\n                \"fontSize\": \"2rem\",\n                \"lineHeight\": \"1.5\",\n                \"fontWeight\": \"500\",\n            },\n            \"h2\": {\n                \"fontSize\": \"1.5rem\",\n                \"lineHeight\": \"1.6\",\n                \"fontWeight\": \"500\",\n            },\n        },\n        # ...\n    },\n}\n```\n\n`theme.headings` dict is deeply merged with the default theme – it is not required to define all values, only those that you want to change.\n\n\n```python\ntheme = {\n    \"headings\": {\n        \"sizes\": {\n            \"h1\": {\n                \"fontSize\": \"2rem\",             \n            },          \n        },    \n    },\n}\n```\n\n\n#### Font smoothing\n\nFont smoothing variables control `-webkit-font-smoothing` and `moz-osx-font-smoothing` CSS properties. These variables are used to make text look better on screens with high pixel density.\n\nFont smoothing variables are controlled by the `theme.fontSmoothing` theme property, which is `True` by default. If `theme.fontSmoothing` is `False`, both variables will be set to `unset`.\n\n| Variable                        | Default value  |\n|:--------------------------------|:---------------|\n| --mantine-webkit-font-smoothing | antialiased    |\n| --mantine-moz-font-smoothing    | grayscale      |\n\nIf you need to override font smoothing values, the best way is to disable `theme.fontSmoothing` and set global styles on the `body` element:\n\n```python\n# Disable font smoothing in your theme\ntheme = {\n  \"fontSmoothing\": False,\n}\n```\n\nAdd global styles to your project with desired font smoothing values\n```css\nbody {\n  -webkit-font-smoothing: subpixel-antialiased;\n  -moz-osx-font-smoothing: auto;\n}\n```\n\n\n### Colors variables\n\nColors variables are controlled by `theme.colors` and `theme.primaryColor`. Each color defined in the `theme.colors` object is required to have 10 shades. Theme colors can be referenced by their name and shade index, for example, `--mantine-color-red-6`.\n\nYou can define new colors on the theme object or override existing colors:\n\n```python\ntheme = {\n    \"colors\": {\n        \"demo\": [\n            \"#FF0000\",\n            \"#FF3333\",\n            \"#FF6666\",\n            \"#FF9999\",\n            \"#FFCCCC\",\n            \"#FFEEEE\",\n            \"#FFFAFA\",\n            \"#FFF5F5\",\n            \"#FFF0F0\",\n            \"#FFEBEB\",\n        ],\n    },\n}\n```\n\nThe code above will define the following CSS variables:\n\n| Variable                      | Default value  |\n|:------------------------------|:---------------|\n| --mantine-color-demo-0        | #FF0000        |\n| --mantine-color-demo-1        | #FF3333        |\n| --mantine-color-demo-2        | #FF6666        |\n| --mantine-color-demo-3        | #FF9999        |\n| --mantine-color-demo-4        | #FFCCCC        |\n| --mantine-color-demo-5        | #FFEEEE        |\n| --mantine-color-demo-6        | #FFFAFA        |\n| --mantine-color-demo-7        | #FFF5F5        |\n| --mantine-color-demo-8        | #FFF0F0        |\n| --mantine-color-demo-9        | #FFEBEB        |\n\n#### Variant colors\n\nSome Mantine components like `Button` or `Badge` have the `variant` prop that in combination with the `color` prop controls the component text, background, and border colors. For each variant and color, Mantine defines a set of CSS variables that control these colors. For example, for the default blue color the following CSS variables are defined:\n\n| Variable                                         | Default value                 |\n|:-------------------------------------------------|:------------------------------|\n| **Filled variant**                               |                               |\n| --mantine-color-blue-filled                      | var(--mantine-color-blue-6)   |\n| --mantine-color-blue-filled-hover                | var(--mantine-color-blue-7)   |\n| **Light variant**                                |                               |\n| --mantine-color-blue-light                       | rgba(34, 139, 230, 0.1)       |\n| --mantine-color-blue-light-hover                 | rgba(34, 139, 230, 0.12)      |\n| --mantine-color-blue-light-color                 | var(--mantine-color-blue-6)   |\n| **Outline variant**                              |                               |\n| --mantine-color-blue-outline                     | var(--mantine-color-blue-6)   |\n| --mantine-color-blue-outline-hover               | rgba(34, 139, 230, 0.05)      |\n\n\nFor example, if you use Button component the following way:\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Button(\"Pink filled button\", color=\"pink\", variant=\"filled\")\n```\nThe component will have the following styles:\n\n- Background color will be `var(--mantine-color-pink-filled)`\n- Background color on hover will be `var(--mantine-color-pink-filled-hover)`\n- Text color will be `var(--mantine-color-white)`\n- Border color will be `transparent`\n\nNote that the variables above are not static; they are generated based on the values of `theme.colors` and `theme.primaryShade`. Additionally, their values are different for dark and light color schemes.\n\n#### Variant Colors Variables\n\nVariant colors variables are used in all components that support the `color` prop, for example, `Button`, `Badge`, `Avatar`, and `Pagination`. The color values used by these components are determined by `cssVariablesResolver` and `variantColorResolver`.\n\n#### Primary Color Variables\n\nPrimary color variables are defined by `theme.primaryColor` (which must be a key of `theme.colors`). The following CSS variables are defined for the primary color:\n\n| Variable                                      | Default value                                      |\n|:----------------------------------------------|:---------------------------------------------------|\n| --mantine-primary-color-{shade}               | `var(--mantine-color-{primaryColor}-{shade})`      |\n| --mantine-primary-color-filled                | `var(--mantine-color-{primaryColor}-filled)`       |\n| --mantine-primary-color-filled-hover          | `var(--mantine-color-{primaryColor}-filled-hover)` |\n| --mantine-primary-color-light                 | `var(--mantine-color-{primaryColor}-light)`        |\n| --mantine-primary-color-light-hover           | `var(--mantine-color-{primaryColor}-light-hover)`  |\n| --mantine-primary-color-light-color           | `var(--mantine-color-{primaryColor}-light-color)`  |\n\nYou can reference primary color variables in CSS:\n\n```css\n.demo {\n  color: var(--mantine-primary-color-0);\n  background-color: var(--mantine-primary-color-filled);\n}\n```\n\n#### Other Color Variables\n\nThe following colors are used in various Mantine components. Note that default values are provided for the light color scheme; dark color scheme values are different.\n\n| Variable                          | Description                                             | Default Value                    |\n|-----------------------------------|---------------------------------------------------------|----------------------------------|\n| --mantine-color-white             | Value of `theme.white`                                  | #fff                             |\n| --mantine-color-black             | Value of `theme.black`                                  | #000                             |\n| --mantine-color-text              | Color used for text in the body element                 | var(--mantine-color-black)       |\n| --mantine-color-body              | Body background color                                   | var(--mantine-color-white)       |\n| --mantine-color-error             | Color used for error messages and states                | var(--mantine-color-red-6)       |\n| --mantine-color-placeholder       | Color used for input placeholders                       | var(--mantine-color-gray-5)      |\n| --mantine-color-dimmed            | Color used for dimmed text                              | var(--mantine-color-gray-6)      |\n| --mantine-color-bright            | Color used for bright text                              | var(--mantine-color-black)       |\n| --mantine-color-anchor            | Color used for links                                    | var(--mantine-primary-color-6)   |\n| --mantine-color-default           | Background color of default variant                     | var(--mantine-color-white)       |\n| --mantine-color-default-hover     | Background color of default variant on hover            | var(--mantine-color-gray-0)      |\n| --mantine-color-default-color     | Text color of default variant                           | var(--mantine-color-black)       |\n| --mantine-color-default-border    | Border color of default variant                         | var(--mantine-color-gray-4)      |\n\n\n### Spacing variables\n\n`theme.spacing` values are used in most Mantine components to control paddings, margins, and other spacing-related properties. The following CSS variables are defined based on `theme.spacing`:\n\n| Variable               | Default value   |\n|------------------------|-----------------|\n| --mantine-spacing-xs   | 0.625rem (10px) |\n| --mantine-spacing-sm   | 0.75rem (12px)  |\n| --mantine-spacing-md   | 1rem (16px)     |\n| --mantine-spacing-lg   | 1.25rem (20px)  |\n| --mantine-spacing-xl   | 2rem (32px)     |\n\nTo define custom spacing values, use the `theme.spacing` property:\n\n```python\ntheme = {\n    \"spacing\": {\n        \"xs\": \"0.5rem\",\n        \"sm\": \"0.75rem\",\n        \"md\": \"1rem\",\n        \"lg\": \"1.5rem\",\n        \"xl\": \"2rem\",\n    },\n}\n```\n\n### Border radius variables\n\nMantine components that support the `radius` prop use border radius variables to control border radius. The following CSS variables are defined based on `theme.radius`:\n\n| Variable                 | Default value  |\n|--------------------------|----------------|\n| --mantine-radius-xs      | 0.125rem (2px) |\n| --mantine-radius-sm      | 0.25rem (4px)  |\n| --mantine-radius-md      | 0.5rem (8px)   |\n| --mantine-radius-lg      | 1rem (16px)    |\n| --mantine-radius-xl      | 2rem (32px)    |\n\nAdditionally, `--mantine-radius-default` variable is defined based on `theme.defaultRadius` value. If the `radius` prop on components is not set explicitly, `--mantine-radius-default` is used instead.\n\nTo define custom border radius values, use the `theme.radius` and `theme.defaultRadius` properties:\n\n```python\ntheme = {\n    \"defaultRadius\": \"sm\",\n    \"radius\": {\n        \"xs\": \"0.25rem\",\n        \"sm\": \"0.5rem\",\n        \"md\": \"1rem\",\n        \"lg\": \"2rem\",\n        \"xl\": \"3rem\",\n    },\n}\n```\n\n\n### Shadow variables\n\nShadow variables are used in all Mantine components that support the `shadow` prop. The following CSS variables are defined based on `theme.shadows`:\n\n| Variable              | Default value                                                                                          |\n|-----------------------|--------------------------------------------------------------------------------------------------------|\n| --mantine-shadow-xs   | 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1)                                            |\n| --mantine-shadow-sm   | 0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 10px 15px -5px, rgba(0, 0, 0, 0.04) 0 7px 7px -5px |\n| --mantine-shadow-md   | 0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 20px 25px -5px, rgba(0, 0, 0, 0.04) 0 10px 10px -5px|\n| --mantine-shadow-lg   | 0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 28px 23px -7px, rgba(0, 0, 0, 0.04) 0 12px 12px -7px|\n| --mantine-shadow-xl   | 0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 36px 28px -7px, rgba(0, 0, 0, 0.04) 0 17px 17px -7px|\n\nTo define custom shadow values, use the `theme.shadows` property:\n\n```python\ntheme = {\n    \"shadows\": {\n        \"xs\": \"0 1px 2px rgba(0, 0, 0, 0.1)\",\n        \"sm\": \"0 1px 3px rgba(0, 0, 0, 0.1)\",\n        \"md\": \"0 2px 4px rgba(0, 0, 0, 0.1)\",\n        \"lg\": \"0 4px 8px rgba(0, 0, 0, 0.1)\",\n        \"xl\": \"0 8px 16px rgba(0, 0, 0, 0.1)\",\n    },\n}\n```\n\n### z-index variables\n\nz-index variables are defined in `@mantine/core/styles.css`. Unlike other variables, z-index variables are not controlled by the theme and are not exposed in the theme object.\n\n| Variable                  | Default value |\n|---------------------------|---------------|\n| --mantine-z-index-app     | 100           |\n| --mantine-z-index-modal   | 200           |\n| --mantine-z-index-popover | 300           |\n| --mantine-z-index-overlay | 400           |\n| --mantine-z-index-max     | 9999          |\n\nYou can reference z-index variables in CSS:\n\n```css\n/* Display content above the modal */\n.my-content {\n  z-index: calc(var(--mantine-z-index-modal) + 1);\n}\n```\n\nAnd in components by referencing the CSS variable:\n\n```python\nimport dash_mantine_components as dmc\n\ndmc.Modal(\n    zIndex=\"var(--mantine-z-index-max)\",\n    opened=True,\n    children=\"Modal content\"\n) \n```\n\n### CSS Variables list\n\n#### CSS variables not depending on color scheme\n#### Light color scheme only variables \n#### Dark color scheme only variables\n\n\n### CSS Variables Not Depending on Color Scheme\n\n| Variable | Value |\n|----------|-------|\n| --mantine-scale | 1 |\n| --mantine-cursor-type | default |\n| --mantine-color-scheme | light dark |\n| --mantine-webkit-font-smoothing | antialiased |\n| --mantine-moz-font-smoothing | grayscale |\n| --mantine-color-white | #fff |\n| --mantine-color-black | #000 |\n| --mantine-line-height | 1.55 |\n| --mantine-font-family | -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji |\n| --mantine-font-family-monospace | ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace |\n| --mantine-font-family-headings | -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji |\n| --mantine-heading-font-weight | 700 |\n| --mantine-heading-text-wrap | wrap |\n| --mantine-radius-default | 0.25rem |\n| --mantine-primary-color-filled | var(--mantine-color-blue-filled) |\n| --mantine-primary-color-filled-hover | var(--mantine-color-blue-filled-hover) |\n| --mantine-primary-color-light | var(--mantine-color-blue-light) |\n| --mantine-primary-color-light-hover | var(--mantine-color-blue-light-hover) |\n| --mantine-primary-color-light-color | var(--mantine-color-blue-light-color) |\n| --mantine-breakpoint-xs | 36em |\n| --mantine-breakpoint-sm | 48em |\n| --mantine-breakpoint-md | 62em |\n| --mantine-breakpoint-lg | 75em |\n| --mantine-breakpoint-xl | 88em |\n| --mantine-spacing-xs | 0.625rem |\n| --mantine-spacing-sm | 0.75rem |\n| --mantine-spacing-md | 1rem |\n| --mantine-spacing-lg | 1.25rem |\n| --mantine-spacing-xl | 2rem |\n| --mantine-font-size-xs | 0.75rem |\n| --mantine-font-size-sm | 0.875rem |\n| --mantine-font-size-md | 1rem |\n| --mantine-font-size-lg | 1.125rem |\n| --mantine-font-size-xl | 1.25rem |\n| --mantine-line-height-xs | 1.4 |\n| --mantine-line-height-sm | 1.45 |\n| --mantine-line-height-md | 1.55 |\n| --mantine-line-height-lg | 1.6 |\n| --mantine-line-height-xl | 1.65 |\n| --mantine-shadow-xs | 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05), 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.1) |\n| --mantine-shadow-sm | 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 0.625rem 0.9375rem -0.3125rem, rgba(0, 0, 0, 0.04) 0 0.4375rem 0.4375rem -0.3125rem |\n| --mantine-shadow-md | 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 1.25rem 1.5625rem -0.3125rem, rgba(0, 0, 0, 0.04) 0 0.625rem 0.625rem -0.3125rem |\n| --mantine-shadow-lg | 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 1.75rem 1.4375rem -0.4375rem, rgba(0, 0, 0, 0.04) 0 0.75rem 0.75rem -0.4375rem |\n| --mantine-shadow-xl | 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 2.25rem 1.75rem -0.4375rem, rgba(0, 0, 0, 0.04) 0 1.0625rem 1.0625rem -0.4375rem |\n| --mantine-radius-xs | 0.125rem |\n| --mantine-radius-sm | 0.25rem |\n| --mantine-radius-md | 0.5rem |\n| --mantine-radius-lg | 1rem |\n| --mantine-radius-xl | 2rem |\n\n#### Primary Color Shades (0-9)\n| Variable | Value |\n|----------|-------|\n| --mantine-primary-color-0 | var(--mantine-color-blue-0) |\n| --mantine-primary-color-1 | var(--mantine-color-blue-1) |\n| --mantine-primary-color-2 | var(--mantine-color-blue-2) |\n| --mantine-primary-color-3 | var(--mantine-color-blue-3) |\n| --mantine-primary-color-4 | var(--mantine-color-blue-4) |\n| --mantine-primary-color-5 | var(--mantine-color-blue-5) |\n| --mantine-primary-color-6 | var(--mantine-color-blue-6) |\n| --mantine-primary-color-7 | var(--mantine-color-blue-7) |\n| --mantine-primary-color-8 | var(--mantine-color-blue-8) |\n| --mantine-primary-color-9 | var(--mantine-color-blue-9) |\n\n#### Color Palette - Dark\n| Variable | Value |\n|----------|-------|\n| --mantine-color-dark-0 | #C9C9C9 |\n| --mantine-color-dark-1 | #b8b8b8 |\n| --mantine-color-dark-2 | #828282 |\n| --mantine-color-dark-3 | #696969 |\n| --mantine-color-dark-4 | #424242 |\n| --mantine-color-dark-5 | #3b3b3b |\n| --mantine-color-dark-6 | #2e2e2e |\n| --mantine-color-dark-7 | #242424 |\n| --mantine-color-dark-8 | #1f1f1f |\n| --mantine-color-dark-9 | #141414 |\n\n#### Color Palette - Gray\n| Variable | Value |\n|----------|-------|\n| --mantine-color-gray-0 | #f8f9fa |\n| --mantine-color-gray-1 | #f1f3f5 |\n| --mantine-color-gray-2 | #e9ecef |\n| --mantine-color-gray-3 | #dee2e6 |\n| --mantine-color-gray-4 | #ced4da |\n| --mantine-color-gray-5 | #adb5bd |\n| --mantine-color-gray-6 | #868e96 |\n| --mantine-color-gray-7 | #495057 |\n| --mantine-color-gray-8 | #343a40 |\n| --mantine-color-gray-9 | #212529 |\n\n#### Color Palette - Red\n| Variable | Value |\n|----------|-------|\n| --mantine-color-red-0 | #fff5f5 |\n| --mantine-color-red-1 | #ffe3e3 |\n| --mantine-color-red-2 | #ffc9c9 |\n| --mantine-color-red-3 | #ffa8a8 |\n| --mantine-color-red-4 | #ff8787 |\n| --mantine-color-red-5 | #ff6b6b |\n| --mantine-color-red-6 | #fa5252 |\n| --mantine-color-red-7 | #f03e3e |\n| --mantine-color-red-8 | #e03131 |\n| --mantine-color-red-9 | #c92a2a |\n\n#### Color Palette - Pink\n| Variable | Value |\n|----------|-------|\n| --mantine-color-pink-0 | #fff0f6 |\n| --mantine-color-pink-1 | #ffdeeb |\n| --mantine-color-pink-2 | #fcc2d7 |\n| --mantine-color-pink-3 | #faa2c1 |\n| --mantine-color-pink-4 | #f783ac |\n| --mantine-color-pink-5 | #f06595 |\n| --mantine-color-pink-6 | #e64980 |\n| --mantine-color-pink-7 | #d6336c |\n| --mantine-color-pink-8 | #c2255c |\n| --mantine-color-pink-9 | #a61e4d |\n\n#### Color Palette - Grape\n| Variable | Value |\n|----------|-------|\n| --mantine-color-grape-0 | #f8f0fc |\n| --mantine-color-grape-1 | #f3d9fa |\n| --mantine-color-grape-2 | #eebefa |\n| --mantine-color-grape-3 | #e599f7 |\n| --mantine-color-grape-4 | #da77f2 |\n| --mantine-color-grape-5 | #cc5de8 |\n| --mantine-color-grape-6 | #be4bdb |\n| --mantine-color-grape-7 | #ae3ec9 |\n| --mantine-color-grape-8 | #9c36b5 |\n| --mantine-color-grape-9 | #862e9c |\n\n#### Color Palette - Violet\n| Variable | Value |\n|----------|-------|\n| --mantine-color-violet-0 | #f3f0ff |\n| --mantine-color-violet-1 | #e5dbff |\n| --mantine-color-violet-2 | #d0bfff |\n| --mantine-color-violet-3 | #b197fc |\n| --mantine-color-violet-4 | #9775fa |\n| --mantine-color-violet-5 | #845ef7 |\n| --mantine-color-violet-6 | #7950f2 |\n| --mantine-color-violet-7 | #7048e8 |\n| --mantine-color-violet-8 | #6741d9 |\n| --mantine-color-violet-9 | #5f3dc4 |\n\n#### Color Palette - Indigo\n| Variable | Value |\n|----------|-------|\n| --mantine-color-indigo-0 | #edf2ff |\n| --mantine-color-indigo-1 | #dbe4ff |\n| --mantine-color-indigo-2 | #bac8ff |\n| --mantine-color-indigo-3 | #91a7ff |\n| --mantine-color-indigo-4 | #748ffc |\n| --mantine-color-indigo-5 | #5c7cfa |\n| --mantine-color-indigo-6 | #4c6ef5 |\n| --mantine-color-indigo-7 | #4263eb |\n| --mantine-color-indigo-8 | #3b5bdb |\n| --mantine-color-indigo-9 | #364fc7 |\n\n#### Color Palette - Blue\n| Variable | Value |\n|----------|-------|\n| --mantine-color-blue-0 | #e7f5ff |\n| --mantine-color-blue-1 | #d0ebff |\n| --mantine-color-blue-2 | #a5d8ff |\n| --mantine-color-blue-3 | #74c0fc |\n| --mantine-color-blue-4 | #4dabf7 |\n| --mantine-color-blue-5 | #339af0 |\n| --mantine-color-blue-6 | #228be6 |\n| --mantine-color-blue-7 | #1c7ed6 |\n| --mantine-color-blue-8 | #1971c2 |\n| --mantine-color-blue-9 | #1864ab |\n\n#### Color Palette - Cyan\n| Variable | Value |\n|----------|-------|\n| --mantine-color-cyan-0 | #e3fafc |\n| --mantine-color-cyan-1 | #c5f6fa |\n| --mantine-color-cyan-2 | #99e9f2 |\n| --mantine-color-cyan-3 | #66d9e8 |\n| --mantine-color-cyan-4 | #3bc9db |\n| --mantine-color-cyan-5 | #22b8cf |\n| --mantine-color-cyan-6 | #15aabf |\n| --mantine-color-cyan-7 | #1098ad |\n| --mantine-color-cyan-8 | #0c8599 |\n| --mantine-color-cyan-9 | #0b7285 |\n\n#### Color Palette - Teal\n| Variable | Value |\n|----------|-------|\n| --mantine-color-teal-0 | #e6fcf5 |\n| --mantine-color-teal-1 | #c3fae8 |\n| --mantine-color-teal-2 | #96f2d7 |\n| --mantine-color-teal-3 | #63e6be |\n| --mantine-color-teal-4 | #38d9a9 |\n| --mantine-color-teal-5 | #20c997 |\n| --mantine-color-teal-6 | #12b886 |\n| --mantine-color-teal-7 | #0ca678 |\n| --mantine-color-teal-8 | #099268 |\n| --mantine-color-teal-9 | #087f5b |\n\n#### Color Palette - Green\n| Variable | Value |\n|----------|-------|\n| --mantine-color-green-0 | #ebfbee |\n| --mantine-color-green-1 | #d3f9d8 |\n| --mantine-color-green-2 | #b2f2bb |\n| --mantine-color-green-3 | #8ce99a |\n| --mantine-color-green-4 | #69db7c |\n| --mantine-color-green-5 | #51cf66 |\n| --mantine-color-green-6 | #40c057 |\n| --mantine-color-green-7 | #37b24d |\n| --mantine-color-green-8 | #2f9e44 |\n| --mantine-color-green-9 | #2b8a3e |\n\n#### Color Palette - Lime\n| Variable | Value |\n|----------|-------|\n| --mantine-color-lime-0 | #f4fce3 |\n| --mantine-color-lime-1 | #e9fac8 |\n| --mantine-color-lime-2 | #d8f5a2 |\n| --mantine-color-lime-3 | #c0eb75 |\n| --mantine-color-lime-4 | #a9e34b |\n| --mantine-color-lime-5 | #94d82d |\n| --mantine-color-lime-6 | #82c91e |\n| --mantine-color-lime-7 | #74b816 |\n| --mantine-color-lime-8 | #66a80f |\n| --mantine-color-lime-9 | #5c940d |\n\n#### Color Palette - Yellow\n| Variable | Value |\n|----------|-------|\n| --mantine-color-yellow-0 | #fff9db |\n| --mantine-color-yellow-1 | #fff3bf |\n| --mantine-color-yellow-2 | #ffec99 |\n| --mantine-color-yellow-3 | #ffe066 |\n| --mantine-color-yellow-4 | #ffd43b |\n| --mantine-color-yellow-5 | #fcc419 |\n| --mantine-color-yellow-6 | #fab005 |\n| --mantine-color-yellow-7 | #f59f00 |\n| --mantine-color-yellow-8 | #f08c00 |\n| --mantine-color-yellow-9 | #e67700 |\n#\n### Color Palette - Orange\n| Variable | Value |\n|----------|-------|\n| --mantine-color-orange-0 | #fff4e6 |\n| --mantine-color-orange-1 | #ffe8cc |\n| --mantine-color-orange-2 | #ffd8a8 |\n| --mantine-color-orange-3 | #ffc078 |\n| --mantine-color-orange-4 | #ffa94d |\n| --mantine-color-orange-5 | #ff922b |\n| --mantine-color-orange-6 | #fd7e14 |\n| --mantine-color-orange-7 | #f76707 |\n| --mantine-color-orange-8 | #e8590c |\n| --mantine-color-orange-9 | #d9480f |\n\n#### Heading Sizes\n| Variable | Value |\n|----------|-------|\n| --mantine-h1-font-size | 2.125rem |\n| --mantine-h1-line-height | 1.3 |\n| --mantine-h1-font-weight | 700 |\n| --mantine-h2-font-size | 1.625rem |\n| --mantine-h2-line-height | 1.35 |\n| --mantine-h2-font-weight | 700 |\n| --mantine-h3-font-size | 1.375rem |\n| --mantine-h3-line-height | 1.4 |\n| --mantine-h3-font-weight | 700 |\n| --mantine-h4-font-size | 1.125rem |\n| --mantine-h4-line-height | 1.45 |\n| --mantine-h4-font-weight | 700 |\n| --mantine-h5-font-size | 1rem |\n| --mantine-h5-line-height | 1.5 |\n| --mantine-h5-font-weight | 700 |\n| --mantine-h6-font-size | 0.875rem |\n| --mantine-h6-line-height | 1.5 |\n| --mantine-h6-font-weight | 700 |\n\n### Light Color Scheme Only Variables\n\n| Variable | Value |\n|----------|-------|\n| --mantine-primary-color-contrast | var(--mantine-color-white) |\n| --mantine-color-bright | var(--mantine-color-black) |\n| --mantine-color-text | #000 |\n| --mantine-color-body | #fff |\n| --mantine-color-error | var(--mantine-color-red-6) |\n| --mantine-color-placeholder | var(--mantine-color-gray-5) |\n| --mantine-color-anchor | var(--mantine-color-blue-6) |\n| --mantine-color-default | var(--mantine-color-white) |\n| --mantine-color-default-hover | var(--mantine-color-gray-0) |\n| --mantine-color-default-color | var(--mantine-color-black) |\n| --mantine-color-default-border | var(--mantine-color-gray-4) |\n| --mantine-color-dimmed | var(--mantine-color-gray-6) |\n| --mantine-color-disabled | var(--mantine-color-gray-2) |\n| --mantine-color-disabled-color | var(--mantine-color-gray-5) |\n| --mantine-color-disabled-border | var(--mantine-color-gray-3) |\n| --mantine-color-dark-text | var(--mantine-color-dark-filled) |\n| --mantine-color-dark-filled | var(--mantine-color-dark-6) |\n| --mantine-color-dark-filled-hover | var(--mantine-color-dark-7) |\n| --mantine-color-dark-light | rgba(46, 46, 46, 0.1) |\n| --mantine-color-dark-light-hover | rgba(46, 46, 46, 0.12) |\n| --mantine-color-dark-light-color | var(--mantine-color-dark-6) |\n| --mantine-color-dark-outline | var(--mantine-color-dark-6) |\n| --mantine-color-dark-outline-hover | rgba(46, 46, 46, 0.05) |\n| --mantine-color-gray-text | var(--mantine-color-gray-filled) |\n| --mantine-color-gray-filled | var(--mantine-color-gray-6) |\n| --mantine-color-gray-filled-hover | var(--mantine-color-gray-7) |\n| --mantine-color-gray-light | rgba(134, 142, 150, 0.1) |\n| --mantine-color-gray-light-hover | rgba(134, 142, 150, 0.12) |\n| --mantine-color-gray-light-color | var(--mantine-color-gray-6) |\n| --mantine-color-gray-outline | var(--mantine-color-gray-6) |\n| --mantine-color-gray-outline-hover | rgba(134, 142, 150, 0.05) |\n| --mantine-color-red-text | var(--mantine-color-red-filled) |\n| --mantine-color-red-filled | var(--mantine-color-red-6) |\n| --mantine-color-red-filled-hover | var(--mantine-color-red-7) |\n| --mantine-color-red-light | rgba(250, 82, 82, 0.1) |\n| --mantine-color-red-light-hover | rgba(250, 82, 82, 0.12) |\n| --mantine-color-red-light-color | var(--mantine-color-red-6) |\n| --mantine-color-red-outline | var(--mantine-color-red-6) |\n| --mantine-color-red-outline-hover | rgba(250, 82, 82, 0.05) |\n| --mantine-color-pink-text | var(--mantine-color-pink-filled) |\n| --mantine-color-pink-filled | var(--mantine-color-pink-6) |\n| --mantine-color-pink-filled-hover | var(--mantine-color-pink-7) |\n| --mantine-color-pink-light | rgba(230, 73, 128, 0.1) |\n| --mantine-color-pink-light-hover | rgba(230, 73, 128, 0.12) |\n| --mantine-color-pink-light-color | var(--mantine-color-pink-6) |\n| --mantine-color-pink-outline | var(--mantine-color-pink-6) |\n| --mantine-color-pink-outline-hover | rgba(230, 73, 128, 0.05) |\n| --mantine-color-grape-text | var(--mantine-color-grape-filled) |\n| --mantine-color-grape-filled | var(--mantine-color-grape-6) |\n| --mantine-color-grape-filled-hover | var(--mantine-color-grape-7) |\n| --mantine-color-grape-light | rgba(190, 75, 219, 0.1) |\n| --mantine-color-grape-light-hover | rgba(190, 75, 219, 0.12) |\n| --mantine-color-grape-light-color | var(--mantine-color-grape-6) |\n| --mantine-color-grape-outline | var(--mantine-color-grape-6) |\n| --mantine-color-grape-outline-hover | rgba(190, 75, 219, 0.05) |\n| --mantine-color-violet-text | var(--mantine-color-violet-filled) |\n| --mantine-color-violet-filled | var(--mantine-color-violet-6) |\n| --mantine-color-violet-filled-hover | var(--mantine-color-violet-7) |\n| --mantine-color-violet-light | rgba(121, 80, 242, 0.1) |\n| --mantine-color-violet-light-hover | rgba(121, 80, 242, 0.12) |\n| --mantine-color-violet-light-color | var(--mantine-color-violet-6) |\n| --mantine-color-violet-outline | var(--mantine-color-violet-6) |\n| --mantine-color-violet-outline-hover | rgba(121, 80, 242, 0.05) |\n| --mantine-color-indigo-text | var(--mantine-color-indigo-filled) |\n| --mantine-color-indigo-filled | var(--mantine-color-indigo-6) |\n| --mantine-color-indigo-filled-hover | var(--mantine-color-indigo-7) |\n| --mantine-color-indigo-light | rgba(76, 110, 245, 0.1) |\n| --mantine-color-indigo-light-hover | rgba(76, 110, 245, 0.12) |\n| --mantine-color-indigo-light-color | var(--mantine-color-indigo-6) |\n| --mantine-color-indigo-outline | var(--mantine-color-indigo-6) |\n| --mantine-color-indigo-outline-hover | rgba(76, 110, 245, 0.05) |\n| --mantine-color-blue-text | var(--mantine-color-blue-filled) |\n| --mantine-color-blue-filled | var(--mantine-color-blue-6) |\n| --mantine-color-blue-filled-hover | var(--mantine-color-blue-7) |\n| --mantine-color-blue-light | rgba(34, 139, 230, 0.1) |\n| --mantine-color-blue-light-hover | rgba(34, 139, 230, 0.12) |\n| --mantine-color-blue-light-color | var(--mantine-color-blue-6) |\n| --mantine-color-blue-outline | var(--mantine-color-blue-6) |\n| --mantine-color-blue-outline-hover | rgba(34, 139, 230, 0.05) |\n| --mantine-color-cyan-text | var(--mantine-color-cyan-filled) |\n| --mantine-color-cyan-filled | var(--mantine-color-cyan-6) |\n| --mantine-color-cyan-filled-hover | var(--mantine-color-cyan-7) |\n| --mantine-color-cyan-light | rgba(21, 170, 191, 0.1) |\n| --mantine-color-cyan-light-hover | rgba(21, 170, 191, 0.12) |\n| --mantine-color-cyan-light-color | var(--mantine-color-cyan-6) |\n| --mantine-color-cyan-outline | var(--mantine-color-cyan-6) |\n| --mantine-color-cyan-outline-hover | rgba(21, 170, 191, 0.05) |\n| --mantine-color-teal-text | var(--mantine-color-teal-filled) |\n| --mantine-color-teal-filled | var(--mantine-color-teal-6) |\n| --mantine-color-teal-filled-hover | var(--mantine-color-teal-7) |\n| --mantine-color-teal-light | rgba(18, 184, 134, 0.1) |\n| --mantine-color-teal-light-hover | rgba(18, 184, 134, 0.12) |\n| --mantine-color-teal-light-color | var(--mantine-color-teal-6) |\n| --mantine-color-teal-outline | var(--mantine-color-teal-6) |\n| --mantine-color-teal-outline-hover | rgba(18, 184, 134, 0.05) |\n| --mantine-color-green-text | var(--mantine-color-green-filled) |\n| --mantine-color-green-filled | var(--mantine-color-green-6) |\n| --mantine-color-green-filled-hover | var(--mantine-color-green-7) |\n| --mantine-color-green-light | rgba(64, 192, 87, 0.1) |\n| --mantine-color-green-light-hover | rgba(64, 192, 87, 0.12) |\n| --mantine-color-green-light-color | var(--mantine-color-green-6) |\n| --mantine-color-green-outline | var(--mantine-color-green-6) |\n| --mantine-color-green-outline-hover | rgba(64, 192, 87, 0.05) |\n| --mantine-color-lime-text | var(--mantine-color-lime-filled) |\n| --mantine-color-lime-filled | var(--mantine-color-lime-6) |\n| --mantine-color-lime-filled-hover | var(--mantine-color-lime-7) |\n| --mantine-color-lime-light | rgba(130, 201, 30, 0.1) |\n| --mantine-color-lime-light-hover | rgba(130, 201, 30, 0.12) |\n| --mantine-color-lime-light-color | var(--mantine-color-lime-6) |\n| --mantine-color-lime-outline | var(--mantine-color-lime-6) |\n| --mantine-color-lime-outline-hover | rgba(130, 201, 30, 0.05) |\n| --mantine-color-yellow-text | var(--mantine-color-yellow-filled) |\n| --mantine-color-yellow-filled | var(--mantine-color-yellow-6) |\n| --mantine-color-yellow-filled-hover | var(--mantine-color-yellow-7) |\n| --mantine-color-yellow-light | rgba(250, 176, 5, 0.1) |\n| --mantine-color-yellow-light-hover | rgba(250, 176, 5, 0.12) |\n| --mantine-color-yellow-light-color | var(--mantine-color-yellow-6) |\n| --mantine-color-yellow-outline | var(--mantine-color-yellow-6) |\n| --mantine-color-yellow-outline-hover | rgba(250, 176, 5, 0.05) |\n| --mantine-color-orange-text | var(--mantine-color-orange-filled) |\n| --mantine-color-orange-filled | var(--mantine-color-orange-6) |\n| --mantine-color-orange-filled-hover | var(--mantine-color-orange-7) |\n| --mantine-color-orange-light | rgba(253, 126, 20, 0.1) |\n| --mantine-color-orange-light-hover | rgba(253, 126, 20, 0.12) |\n| --mantine-color-orange-light-color | var(--mantine-color-orange-6) |\n| --mantine-color-orange-outline | var(--mantine-color-orange-6) |\n| --mantine-color-orange-outline-hover | rgba(253, 126, 20, 0.05) |\n\n### Dark Color Scheme Only Variables\n\n| Variable | Value |\n|----------|-------|\n| --mantine-primary-color-contrast | var(--mantine-color-white) |\n| --mantine-color-bright | var(--mantine-color-white) |\n| --mantine-color-text | var(--mantine-color-dark-0) |\n| --mantine-color-body | var(--mantine-color-dark-7) |\n| --mantine-color-error | var(--mantine-color-red-8) |\n| --mantine-color-placeholder | var(--mantine-color-dark-3) |\n| --mantine-color-anchor | var(--mantine-color-blue-4) |\n| --mantine-color-default | var(--mantine-color-dark-6) |\n| --mantine-color-default-hover | var(--mantine-color-dark-5) |\n| --mantine-color-default-color | var(--mantine-color-white) |\n| --mantine-color-default-border | var(--mantine-color-dark-4) |\n| --mantine-color-dimmed | var(--mantine-color-dark-2) |\n| --mantine-color-disabled | var(--mantine-color-dark-6) |\n| --mantine-color-disabled-color | var(--mantine-color-dark-3) |\n| --mantine-color-disabled-border | var(--mantine-color-dark-4) |\n| --mantine-color-dark-text | var(--mantine-color-dark-4) |\n| --mantine-color-dark-filled | var(--mantine-color-dark-8) |\n| --mantine-color-dark-filled-hover | var(--mantine-color-dark-9) |\n| --mantine-color-dark-light | rgba(46, 46, 46, 0.15) |\n| --mantine-color-dark-light-hover | rgba(46, 46, 46, 0.2) |\n| --mantine-color-dark-light-color | var(--mantine-color-dark-3) |\n| --mantine-color-dark-outline | var(--mantine-color-dark-4) |\n| --mantine-color-dark-outline-hover | rgba(66, 66, 66, 0.05) |\n| --mantine-color-gray-text | var(--mantine-color-gray-4) |\n| --mantine-color-gray-filled | var(--mantine-color-gray-8) |\n| --mantine-color-gray-filled-hover | var(--mantine-color-gray-9) |\n| --mantine-color-gray-light | rgba(134, 142, 150, 0.15) |\n| --mantine-color-gray-light-hover | rgba(134, 142, 150, 0.2) |\n| --mantine-color-gray-light-color | var(--mantine-color-gray-3) |\n| --mantine-color-gray-outline | var(--mantine-color-gray-4) |\n| --mantine-color-gray-outline-hover | rgba(206, 212, 218, 0.05) |\n| --mantine-color-red-text | var(--mantine-color-red-4) |\n| --mantine-color-red-filled | var(--mantine-color-red-8) |\n| --mantine-color-red-filled-hover | var(--mantine-color-red-9) |\n| --mantine-color-red-light | rgba(250, 82, 82, 0.15) |\n| --mantine-color-red-light-hover | rgba(250, 82, 82, 0.2) |\n| --mantine-color-red-light-color | var(--mantine-color-red-3) |\n| --mantine-color-red-outline | var(--mantine-color-red-4) |\n| --mantine-color-red-outline-hover | rgba(255, 135, 135, 0.05) |\n| --mantine-color-pink-text | var(--mantine-color-pink-4) |\n| --mantine-color-pink-filled | var(--mantine-color-pink-8) |\n| --mantine-color-pink-filled-hover | var(--mantine-color-pink-9) |\n| --mantine-color-pink-light | rgba(230, 73, 128, 0.15) |\n| --mantine-color-pink-light-hover | rgba(230, 73, 128, 0.2) |\n| --mantine-color-pink-light-color | var(--mantine-color-pink-3) |\n| --mantine-color-pink-outline | var(--mantine-color-pink-4) |\n| --mantine-color-pink-outline-hover | rgba(247, 131, 172, 0.05) |\n| --mantine-color-grape-text | var(--mantine-color-grape-4) |\n| --mantine-color-grape-filled | var(--mantine-color-grape-8) |\n| --mantine-color-grape-filled-hover | var(--mantine-color-grape-9) |\n| --mantine-color-grape-light | rgba(190, 75, 219, 0.15) |\n| --mantine-color-grape-light-hover | rgba(190, 75, 219, 0.2) |\n| --mantine-color-grape-light-color | var(--mantine-color-grape-3) |\n| --mantine-color-grape-outline | var(--mantine-color-grape-4) |\n| --mantine-color-grape-outline-hover | rgba(218, 119, 242, 0.05) |\n| --mantine-color-violet-text | var(--mantine-color-violet-4) |\n| --mantine-color-violet-filled | var(--mantine-color-violet-8) |\n| --mantine-color-violet-filled-hover | var(--mantine-color-violet-9) |\n| --mantine-color-violet-light | rgba(121, 80, 242, 0.15) |\n| --mantine-color-violet-light-hover | rgba(121, 80, 242, 0.2) |\n| --mantine-color-violet-light-color | var(--mantine-color-violet-3) |\n| --mantine-color-violet-outline | var(--mantine-color-violet-4) |\n| --mantine-color-violet-outline-hover | rgba(151, 117, 250, 0.05) |\n| --mantine-color-indigo-text | var(--mantine-color-indigo-4) |\n| --mantine-color-indigo-filled | var(--mantine-color-indigo-8) |\n| --mantine-color-indigo-filled-hover | var(--mantine-color-indigo-9) |\n| --mantine-color-indigo-light | rgba(76, 110, 245, 0.15) |\n| --mantine-color-indigo-light-hover | rgba(76, 110, 245, 0.2) |\n| --mantine-color-indigo-light-color | var(--mantine-color-indigo-3) |\n| --mantine-color-indigo-outline | var(--mantine-color-indigo-4) |\n| --mantine-color-indigo-outline-hover | rgba(116, 143, 252, 0.05) |\n| --mantine-color-blue-text | var(--mantine-color-blue-4) |\n| --mantine-color-blue-filled | var(--mantine-color-blue-8) |\n| --mantine-color-blue-filled-hover | var(--mantine-color-blue-9) |\n| --mantine-color-blue-light | rgba(34, 139, 230, 0.15) |\n| --mantine-color-blue-light-hover | rgba(34, 139, 230, 0.2) |\n| --mantine-color-blue-light-color | var(--mantine-color-blue-3) |\n| --mantine-color-blue-outline | var(--mantine-color-blue-4) |\n| --mantine-color-blue-outline-hover | rgba(77, 171, 247, 0.05) |\n| --mantine-color-cyan-text | var(--mantine-color-cyan-4) |\n| --mantine-color-cyan-filled | var(--mantine-color-cyan-8) |\n| --mantine-color-cyan-filled-hover | var(--mantine-color-cyan-9) |\n| --mantine-color-cyan-light | rgba(21, 170, 191, 0.15) |\n| --mantine-color-cyan-light-hover | rgba(21, 170, 191, 0.2) |\n| --mantine-color-cyan-light-color | var(--mantine-color-cyan-3) |\n| --mantine-color-cyan-outline | var(--mantine-color-cyan-4) |\n| --mantine-color-cyan-outline-hover | rgba(59, 201, 219, 0.05) |\n| --mantine-color-teal-text | var(--mantine-color-teal-4) |\n| --mantine-color-teal-filled | var(--mantine-color-teal-8) |\n| --mantine-color-teal-filled-hover | var(--mantine-color-teal-9) |\n| --mantine-color-teal-light | rgba(18, 184, 134, 0.15) |\n| --mantine-color-teal-light-hover | rgba(18, 184, 134, 0.2) |\n| --mantine-color-teal-light-color | var(--mantine-color-teal-3) |\n| --mantine-color-teal-outline | var(--mantine-color-teal-4) |\n| --mantine-color-teal-outline-hover | rgba(56, 217, 169, 0.05) |\n| --mantine-color-green-text | var(--mantine-color-green-4) |\n| --mantine-color-green-filled | var(--mantine-color-green-8) |\n| --mantine-color-green-filled-hover | var(--mantine-color-green-9) |\n| --mantine-color-green-light | rgba(64, 192, 87, 0.15) |\n| --mantine-color-green-light-hover | rgba(64, 192, 87, 0.2) |\n| --mantine-color-green-light-color | var(--mantine-color-green-3) |\n| --mantine-color-green-outline | var(--mantine-color-green-4) |\n| --mantine-color-green-outline-hover | rgba(105, 219, 124, 0.05) |\n| --mantine-color-lime-text | var(--mantine-color-lime-4) |\n| --mantine-color-lime-filled | var(--mantine-color-lime-8) |\n| --mantine-color-lime-filled-hover | var(--mantine-color-lime-9) |\n| --mantine-color-lime-light | rgba(130, 201, 30, 0.15) |\n| --mantine-color-lime-light-hover | rgba(130, 201, 30, 0.2) |\n| --mantine-color-lime-light-color | var(--mantine-color-lime-3) |\n| --mantine-color-lime-outline | var(--mantine-color-lime-4) |\n| --mantine-color-lime-outline-hover | rgba(169, 227, 75, 0.05) |\n| --mantine-color-yellow-text | var(--mantine-color-yellow-4) |\n| --mantine-color-yellow-filled | var(--mantine-color-yellow-8) |\n| --mantine-color-yellow-filled-hover | var(--mantine-color-yellow-9) |\n| --mantine-color-yellow-light | rgba(250, 176, 5, 0.15) |\n| --mantine-color-yellow-light-hover | rgba(250, 176, 5, 0.2) |\n| --mantine-color-yellow-light-color | var(--mantine-color-yellow-3) |\n| --mantine-color-yellow-outline | var(--mantine-color-yellow-4) |\n| --mantine-color-yellow-outline-hover | rgba(255, 212, 59, 0.05) |\n| --mantine-color-orange-text | var(--mantine-color-orange-4) |\n| --mantine-color-orange-filled | var(--mantine-color-orange-8) |\n| --mantine-color-orange-filled-hover | var(--mantine-color-orange-9) |\n| --mantine-color-orange-light | rgba(253, 126, 20, 0.15) |\n| --mantine-color-orange-light-hover | rgba(253, 126, 20, 0.2) |\n| --mantine-color-orange-light-color | var(--mantine-color-orange-3) |\n| --mantine-color-orange-outline | var(--mantine-color-orange-4) |\n| --mantine-color-orange-outline-hover | rgba(255, 169, 77, 0.05) |"
  },
  {
    "name": "Responsive Styles",
    "description": "Responsive styles let you adjust the appearance of individual components, including font size, visibility, spacing, and colors, based on screen size.",
    "endpoint": "/responsive-styles",
    "package": "dash_mantine_components",
    "category": "Styling",
    "order": 5,
    "content": "\n\n## Responsive Styles  \nResponsive styles let you adjust the appearance of individual components, including font size, visibility, spacing, and colors, based on screen size.  \nCategory: Styling  \n\nNote:  If you are looking for how to structure app’s layout responsively, use components like\n[Grid](/components/grid) and [Group](/components/group), [Stack](/components/stack) and others. Check out the [Layout Overview](/layout-overview) section\nfor tips on selecting the right layout components.  \n\n### Media Queries\n\nResize the browser window to see the color changing between blue and red.\n\n```python\nfrom dash import html\n\ncomponent = html.Div(\"Demo\", className=\"media-query-demo\")\n```\n```css\n\n.media-query-demo  {\n  background-color: var(--mantine-color-blue-filled);\n  color: var(--mantine-color-white);\n  padding: var(--mantine-spacing-md);\n  text-align: center;\n\n  @media (min-width: 48em) {\n    background-color: var(--mantine-color-red-filled);\n  }\n}\n\n```\n\nWhen choosing between pixels (px) and rems (rem or em) for media queries, it's generally recommended to use rems because they\nare relative to the user's font size, making your design more accessible and responsive to different browser zoom\nlevels; whereas pixels are absolute and won't adjust with font size changes.\n\nNote that the rem unit is relative to the document's root element, while the em unit is relative to the immediate \nparent of the targeted element. In Mantine, breakpoints are expected to be set in em units to align with its contextual\nscaling approach.\n\n### Configure breakpoints\n`theme.breakpoints` are used in all responsive Mantine components. Breakpoints are expected to be set in `em` units. You\ncan configure these values in the [Theme Object](/theme-object) in the `MantineProvider`:\n\nYou can customize the `breakpoints` defaults in the `theme`: \n\n```python\ntheme = {\n    \"breakpoints\": {\n        \"xs\": '30em',              # customize breakpoints here\n        \"sm\": '48em',\n        \"md\": '64em',\n        \"lg\": '74em',\n        \"xl\": '90em',\n  },\n}\n\ndmc.MantineProvider(\n    # your layout,\n    theme=theme\n)\n```\n\n### Default `theme.breakpoints` Values\n\n| Breakpoint | Viewport width | Value in px |\n|------------|----------------|-------------|\n| xs         | 36em           | 576px       |\n| sm         | 48em           | 768px       |\n| md         | 62em           | 992px       |\n| lg         | 75em           | 1200px      |\n| xl         | 88em           | 1408px      |\n\n\n\n### hiddenFrom and visibleFrom props\nAll Mantine components that have a root element support `hiddenFrom` and `visibleFrom` props. These props accept breakpoint\n(`xs`, `sm`, `md`, `lg`, `xl`) and hide the component when viewport width is less than or greater than the specified breakpoint:\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Group(\n    justify=\"center\",\n    children=[\n        dmc.Button(\n            \"Hidden from sm\",\n            hiddenFrom=\"sm\",\n            color=\"orange\"\n        ),\n        dmc.Button(\n            \"Visible from sm\",\n            visibleFrom=\"sm\",\n            color=\"cyan\"\n        ),\n        dmc.Button(\n            \"Visible from md\",\n            visibleFrom=\"md\",\n            color=\"pink\"\n        )\n    ]\n)\n```\n### Hidden and visible from as classes\nIf you are building a component and want to use the same logic as in `hiddenFrom` and `visibleFrom` props but you do\nnot want to use Mantine components, you can use` mantine-hidden-from-{x}` and `mantine-visible-from-{x}` classes.\n\n```python\nhtml.Div(\"Hidden from md\", className=\"mantine-hidden-from-md\")\nhtml.Div(\"visible from xl\", className=\"mantine-visible-from-xl\")\n\n```\n\n### Component size based on media query\nSome components support `size` prop, which changes various aspects of component appearance. `size` prop is not\nresponsive – it is not possible to define different component sizes for different screen sizes. \n\n### Container queries\nContainer queries enable you to apply styles to an element based on the size of the element's container. If, for\nexample, a container has less space available in the surrounding context, you can hide certain elements or use \nsmaller fonts. Container queries are supported in all modern browsers.\n\nNote that CSS variables do not work in container queries and because of that rem scaling feature is not available. \nIf you rely on this feature, it is better to define breakpoints in px units.\n\n\n```python\nfrom dash import html\nimport dash_mantine_components as dmc\n\ncomponent = html.Div(\n    className=\"container-query-demo-root\",\n    children=html.Div(\n        \"Resize parent element to see container query in action\",\n        className=\"container-query-demo-child\"\n    )\n)\n```\nAdd the following to a .css file in /assets\n\n```css\n\n.container-query-demo-root {\n  min-width: 200px;\n  max-width: 100%;\n  min-height: 120px;\n  container-type: inline-size;\n  overflow: auto;\n  resize: horizontal;\n  border: solid;\n  border-color: var(--mantine-color-default-border)\n}\n\n.container-query-demo-child {\n  background-color: var(--mantine-color-dimmed);\n  color: var(--mantine-color-white);\n  padding: var(--mantine-spacing-md);\n\n  @container (max-width: 500px) {\n    background-color: var(--mantine-color-blue-filled);\n  }\n\n  @container (max-width: 300px) {\n    background-color: var(--mantine-color-red-filled);\n  }\n}\n```\n\n### Responsive styles\n\nYou can pass a dictionary to style props to add responsive styles with [style props](/style-props). \nNote that responsive style props are less performant than regular style props, it is not recommended using them in large amounts.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Box(\n    \"Box with responsive style props\",\n    w={\"base\": 200, \"sm\": 400, \"lg\": 500},\n    py={\"base\": \"xs\", \"sm\": \"md\", \"lg\": \"xl\"},\n    bg={\"base\": \"blue.7\", \"sm\": \"red.7\", \"lg\": \"green.7\"},\n    c=\"#fff\",\n    ta=\"center\",\n    mx=\"auto\",\n)\n```\nResponsive values are calculated the following way:\n\n- `base` value is used when none of the breakpoint values are provided\n- `xs`, `sm`, `md`, `lg`, `xl` values are used when the viewport width is larger that the value of corresponding breakpoint specified in `dmc.DEFAULT_THEME`.\n\n```python\nimport dash_mantine_components as dmc\n\ndmc.Box(w={ \"base\": 320, \"sm\": 480, \"lg\": 640 })\n```\n\nIn this case the element will have the following styles:\n\n```css\n/* Base styles added to element and then get overwritten with responsive values */\n.element {\n  width: 20rem;\n}\n\n/* 48em is theme.breakpoints.sm by default */\n@media (min-width: 48em) {\n  .element {\n    width: 30rem;\n  }\n}\n\n/* 75em is theme.breakpoints.lg by default */\n@media (min-width: 75em) {\n  .element {\n    width: 40rem;\n  }\n}\n```"
  },
  {
    "name": "Right-to-left direction",
    "endpoint": "/rtl",
    "description": "All Mantine components support right-to-left direction out of the box. You can preview how components work with RTL direction by clicking direction control in the top right corner.",
    "package": "dash_mantine_components",
    "category": "Styling",
    "order": 10,
    "content": "\n\n## Right-to-left direction  \nAll Mantine components support right-to-left direction out of the box. You can preview how components work with RTL direction by clicking direction control in the top right corner.  \nCategory: Styling  \n\n### DirectionProvider\n\n`DirectionProvider` component is used to set direction for all components inside it. It is required to wrap your \napplication with `DirectionProvider` if you are planning to either use RTL direction or change direction dynamically.\n\n```python\napp.layout=dmc.DirectionProvider(\n    dmc.MantineProvider(\n        # your layout\n    ),\n    direction=\"rtl\",  # or \"ltr\"\n    id=\"direction-provider\"\n)\n```\n\nThe `direction` prop sets the `dir` attribute on the root element of your application, the `html` element.\n\n### RTL direction toggle\n\nYou can change the text direction by updating the `direction` prop in a callback.\n\nHere is a minimal example of a RTL direction toggle, similar to the one used in the DMC documentation:\n\n```python\n\nimport dash_mantine_components as dmc\nfrom dash import Dash, Input, Output, State, callback\nfrom dash.exceptions import PreventUpdate\nfrom dash_iconify import DashIconify\n\napp = Dash()\n\nlayout = dmc.Stack([\n    dmc.Group([\n        dmc.Title(\"RTL Direction demo\", order=3),\n        dmc.ActionIcon(\n            DashIconify(icon=\"tabler:text-direction-rtl\", width=18),\n            id=\"rtl-toggle\",\n            variant=\"outline\",\n        ),\n    ], justify=\"space-between\"),\n    dmc.Slider(value=25, labelAlwaysOn=True, mt=\"xl\"),\n], m=\"lg\")\n\napp.layout = dmc.DirectionProvider(\n    dmc.MantineProvider(layout),\n    id=\"direction-provider\",\n    direction=\"ltr\"\n)\n\n@callback(\n    Output(\"rtl-toggle\", \"children\"),\n    Output(\"direction-provider\", \"direction\"),\n    Input(\"rtl-toggle\", \"n_clicks\"),\n    State(\"direction-provider\", \"direction\")\n)\ndef toggle_direction(n, d):\n    if n is None:\n        raise PreventUpdate\n\n    new_dir = \"ltr\" if d == \"rtl\" else \"rtl\"\n    return DashIconify(icon=f\"tabler:text-direction-{d}\", width=18), new_dir\n\n\nif __name__ == \"__main__\":\n    app.run(debug=True)\n\n```"
  },
  {
    "name": "Style Props",
    "endpoint": "/style-props",
    "head": "With style props you can add responsive styles to any Mantine component that supports these props.",
    "description": "With style props you can add responsive styles to any Mantine component that supports these props.",
    "package": "dash_mantine_components",
    "category": "Styling",
    "order": 3,
    "content": "\n\n## Style Props  \nWith style props you can add responsive styles to any Mantine component that supports these props.  \nCategory: Styling  \n\n### Supported props\n\nStyle props add styles to the root element, if you want to style nested elements use [Styles API](/styles-api) instead.\n\n```python\ndmc.Box(mx=\"auto\", maw=400, c=\"blue.6\", bg=\"#fff\")\n```\n\n:border: false\n\n### Theme values\nSome style props can reference values from theme, for example `mt` will use `theme.spacing` value if you set `xs`, `sm`, `md`, `lg`, `xl`:\n\n```python\n\n# margin-top: theme.spacing.xs\ndmc.Box(mt=\"xs\")\n\n# margin-top: theme.spacing.md * -1 \ndmc.Box(mt=\"-md\") \n\n# margin-top: auto \ndmc.Box(mt=\"auto\")\n\n# margin-top: 1rem \ndmc.Box(mt=16)\n\n# margin-top: 5rem \ndmc.Box(mt=\"5rem\") \n\n\n```\n\nIn `c`, `bd` and `bg` props you can reference colors from `theme.colors`:\n\n```python\n\n# Color: theme.colors.blue[theme.primaryShade]\ndmc.Box(c=\"blue\")\n\n# Background: theme.colors.orange[1]\ndmc.Box(bg=\"orange.1\")\n\n# Border: 1px solid theme.colors.red[6]\ndmc.Box(bd=\"1px solid red.6\")\n\n# Color: if colorScheme is dark `var(--mantine-color-dark-2)`, if colorScheme is light `var(--mantine-color-gray-6)`\ndmc.Box(c=\"dimmed\")\n\n# Color: if colorScheme is dark `var(--mantine-color-white)`, if colorScheme is light `var(--mantine-color-black)`\ndmc.Box(c=\"bright\")\n\n# Background: #EDFEFF\ndmc.Box(bg=\"#EDFEFF\")\n\n# Background: rgba(0, 34, 45, 0.6)\ndmc.Box(bg=\"rgba(0, 34, 45, 0.6)\")\n\n```\n\n\n\n\n### Responsive styles\n\nYou can pass a dictionary to style props to add responsive styles with style props. \nNote that responsive style props are less performant than regular style props, it is not recommended using them in large amounts.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Box(\n    \"Box with responsive style props\",\n    w={\"base\": 200, \"sm\": 400, \"lg\": 500},\n    py={\"base\": \"xs\", \"sm\": \"md\", \"lg\": \"xl\"},\n    bg={\"base\": \"blue.7\", \"sm\": \"red.7\", \"lg\": \"green.7\"},\n    c=\"#fff\",\n    ta=\"center\",\n    mx=\"auto\",\n)\n```\nResponsive values are calculated the following way:\n\n- `base` value is used when none of the breakpoint values are provided\n- `xs`, `sm`, `md`, `lg`, `xl` values are used when the viewport width is larger that the value of corresponding breakpoint specified in `dmc.DEFAULT_THEME`.\n\n```python\nimport dash_mantine_components as dmc\n\ndmc.Box(w={ \"base\": 320, \"sm\": 480, \"lg\": 640 })\n```\n\nIn this case the element will have the following styles:\n\n```css\n/* Base styles added to element and then get overwritten with responsive values */\n.element {\n  width: 20rem;\n}\n\n/* 48em is theme.breakpoints.sm by default */\n@media (min-width: 48em) {\n  .element {\n    width: 30rem;\n  }\n}\n\n/* 75em is theme.breakpoints.lg by default */\n@media (min-width: 75em) {\n  .element {\n    width: 40rem;\n  }\n}\n```\n\nNote that underlying Mantine transforms `px` to `rem`, but for most part you can ignore this."
  },
  {
    "name": "Styles API",
    "endpoint": "/styles-api",
    "head": "With Styles API you can overwrite styles of inner elements in Mantine components with classNames or styles props.",
    "description": "With Styles API you can overwrite styles of inner elements in Mantine components with classNames or styles props.",
    "package": "dash_mantine_components",
    "category": "Styling",
    "order": 2,
    "content": "\n\n## Styles API  \nWith Styles API you can overwrite styles of inner elements in Mantine components with classNames or styles props.  \nCategory: Styling  \n\n### Styles API Overview\n\nDMC supports `style` and `className` props for styling the root element, just like other Dash libraries.\nHowever, many DMC components have nested elements.  For example the `TextInput` includes `label`, `description`,\n`error` props.\n\nThe Styles API is a set of props and techniques that allows you to customize the style of any element inside a Mantine\ncomponent - inline using the  `classNames` or `styles` props, or using the [Theme Object](/theme-object).\n\n\n### Styles API Selectors\n\nEach component has its own set of selectors based on its structure. These are documented in the Styles API section of each component’s page.\n\n\n#### Example: `dmc.Button` Selectors\n\n| Name    | Static selector         | Description                      |\n| :------ | :---------------------- | :------------------------------- |\n| root    | .mantine-Button-root    | Root element                     |\n| loader  | .mantine-Button-loader  | Loader shown when `loading=True` |\n| section | .mantine-Button-section | Left and right icon sections     |\n| inner   | .mantine-Button-inner   | Container for label and content  |\n| label   | .mantine-Button-label   | The button’s text                |\n\n\nYou can use these selectors in multiple ways:\n\n#### 1) With `classNames` or `styles` props\n\n```python\n# Using classNames\ndmc.Button(\n    \"Styled with classNames\",\n    classNames={\n        \"root\": \"my-root-class\",\n        \"label\": \"my-label-class\",\n        \"inner\": \"my-inner-class\",\n    }\n)\n\n# Using inline styles\ndmc.Button(\n    \"Styled with styles prop\",\n    styles={\n        \"root\": {\"backgroundColor\": \"red\"},\n        \"label\": {\"color\": \"blue\"},\n        \"inner\": {\"fontSize\": 20},\n    }\n)\n```\n\n#### 2) In the `theme` prop in  `MantineProvider`\n\n```python\ntheme = {\n    \"components\": {\n        \"Button\": {\n            \"classNames\": {\n                \"root\": \"my-root-class\",\n                \"label\": \"my-label-class\",\n                \"inner\": \"my-inner-class\",\n            },\n            \"styles\": {\n                \"root\": {\"backgroundColor\": \"red\"},\n                \"label\": {\"color\": \"blue\"},\n                \"inner\": {\"fontSize\": 20},\n            }\n        }\n    }\n}\n\napp.layout = dmc.MantineProvider(\n    theme=theme,\n    children=dmc.Button(\"Themed Button\")\n)\n```\n\n#### 3) In a `.css` file using static selectors\n\n```css\n.mantine-Button-root {\n    background-color: red;\n}\n\n.mantine-Button-label {\n    color: blue;\n}\n\n.mantine-Button-inner {\n    font-size: 20px;\n}\n```\n\n### classNames Prop\n\nThe `classNames` prop is used to apply custom CSS class names to specific inner elements of a Mantine component. It \naccepts a dictionary  with element names as keys and classes as values. This approach is preferred for larger-scale styling and\nmaintainability.\n\n\n### Styles Prop\n\nThe `styles` prop is used to apply inline styles directly to specific inner elements of a Mantine component. It accepts\nan dictionary where keys correspond to the names of the inner elements (as defined in the component's Styles API documentation)\nand values are style objects. Inline styles have higher specificity than classes, meaning they will override styles\ndefined by classes unless `!important` is explicitly used in the class definition.\n\nYou cannot use pseudo-classes (for example, `:hover`, `:first-of-type`) and media queries inside the `styles` prop.\n\n\n> styles prop usage\n>\n> Some examples and demos in the documentation use the `styles` prop for convenience, but it is not recommended to use the `styles` prop as the primary means of styling components, as the `classNames` prop is more flexible and has better performance.\n\n### Avoid dynamic class names\n\nWhen inspecting elements in the browser, you may see generated class names like `m_77c9d27d`. These are internal to Mantine and can change between versions. Don’t target these in your CSS.\n\nInstead, use:\n\n* the `styles` or `classNames` props\n* static class selectors like `.mantine-Button-root`\n\n\n\n### Global vs. Specific Styling\n\nYou can combine global styling (via `theme` or static CSS) with component-specific overrides using `styles` or `classNames`.\n\nFor example:\n\n* A default red background can be applied globally using `.mantine-Button-root`\n* A specific button can override this with its own `className` or `styles`\n\nNote: For components rendered in a portal — such as `Popover`, `Tooltip`, or `Modal` — static selectors often won’t work because parts of the DOM are rendered outside the main tree. In these cases, use `classNames` or `styles`, or set `withinPortal=False` if appropriate.\n\n\n### Component Classes\n\nMantine uses hashed class names (e.g., `m_77c9d27d`) for internal styling. These class names may change between versions or builds, so you should never rely on them directly.\n\n**Do not do this:**\n\n```css\n/* This is fragile and will likely break */\n.m_77c9d27d {\n  background: blue;\n}\n```\n\n**Instead, do this:**\n\n```css\n/* Use static selectors */\n.mantine-Button-root {\n  background: blue;\n}\n```\n\nOr:\n\n```python\n# Use the Styles API\ndmc.Button(\n    \"Styled Button\",\n    classNames={\"root\": \"my-custom-button\"}\n)\n```\n\n\n\n### Data Attributes\n\nMany Mantine components use `data-*` attributes to reflect state or props. These can be useful for styling in CSS, especially when using features like loading states, icons, or layout modifiers.\n\nYou’ll find a list of data attributes for each component in its Styles API docs.\n\nExample (`dmc.Button`):\n\n| Selector  | Attribute                | Set When…            | Example value     |\n| --------- | ------------------------ | -------------------- | ----------------- |\n| `root`    | `data-disabled`          | `disabled=True`      | –                 |\n| `root`    | `data-loading`           | `loading=True`       | –                 |\n| `root`    | `data-block`             | `fullWidth=True`     | –                 |\n| `root`    | `data-with-left-section` | `leftSection` is set | –                 |\n| `section` | `data-position`          | Always               | `left` or `right` |\n\nExample CSS targeting data attributes:\n\n```css\n/* Style disabled buttons */\n.dmc-data-attributes-demo[data-disabled=\"true\"] {\n    color: red;\n    cursor: not-allowed;\n}\n\n/* Style buttons while loading */\n.dmc-data-attributes-demo[data-loading=\"true\"] {\n    background-color: darkgray;\n}\n\n/* Style left icon section */\n.dmc-data-attributes-demo .mantine-Button-section[data-position=\"left\"] {\n    color: var(--mantine-color-yellow-filled);\n}\n```\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html\n\ncomponent = dmc.Group(\n    [\n        dmc.Button(\"Default Button\"),\n        dmc.Button(\"Disabled Button\", disabled=True, className=\"dmc-data-attributes-demo\"),\n        dmc.Button(\"Loading Button\", loading=True, className=\"dmc-data-attributes-demo\"),\n        dmc.Button(\"Button with Left Section\", leftSection=html.Div(\"left\"), className=\"dmc-data-attributes-demo\"),\n    ],\n    gap=\"sm\"\n)\n```\n### attributes prop\n\nUse `attributes` prop to pass attributes to inner elements of all components that support Styles API. For example,\nit can be used to add data attributes for testing purposes:\n\n\n```python\nimport dash_mantine_components as dmc\n\n\ncomponent = dmc.Button(\n    \"Button with attributes\",\n    attributes={\n        \"root\": { \"data-test-id\": \"root\" },\n        \"label\": { \"data-test-id\": \"label\" },\n        \"inner\": { \"data-test-id\": \"inner\" },\n      },\n)\n```\n### More Examples\n\nHere are a few component-specific examples. Refer to each component’s Styles API section for the full list of selectors and attributes.\n\n#### Button\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ncomponent = dmc.Button(\n    \"Settings\",\n    leftSection=DashIconify(icon=\"ic:baseline-settings-input-composite\"),\n    styles={\"root\": {\"fontWeight\": 400}, \"section\": {\"width\": 100}},\n)\n```\n#### Badge\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Badge(\n    \"Badge 1\",\n    variant=\"dot\",\n    styles={\n        \"root\": {\"borderWidth\": 1, \"height\": 30, \"padding\": 10},\n        \"inner\": {\"fontWeight\": 500},\n    },\n)\n```\n#### TextInput\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.TextInput(\n    label=\"TextInput with custom styles\",\n    placeholder=\"TextInput with custom styles\",\n    description=\"Description below the input\",\n    w=300,\n    styles={\n        \"input\": {\"borderColor\":  \"var(--mantine-color-violet-4)\"},\n        \"label\": {\n            \"color\": \"blue\",\n            \"backgroundColor\":  \"var(--mantine-color-yellow-1)\",\n        },\n    },\n)\n```\n### Styles with Callbacks\n\n```python\nfrom dash import  html, callback, Output, Input, State\nimport dash_mantine_components as dmc\n\ncomponent = html.Div([\n    dmc.TextInput(\n        id=\"styles-input\",\n        label=\"Required Input\",\n        required=True,\n    ),\n    dmc.Button(\"Submit\", id=\"styles-submit-btn\")\n])\n\n@callback(\n    Output(\"styles-input\", \"styles\"),\n    Input(\"styles-submit-btn\", \"n_clicks\"),\n    State(\"styles-input\", \"value\"),\n    prevent_initial_call=True\n)\ndef update_styles(n_clicks, value):\n    if not value:\n        return {\n            \"input\": {\"borderColor\": \"red\"},\n            \"label\": {\"color\": \"red\"}\n        }\n    return {\n        \"input\": {\"borderColor\": \"green\"},\n        \"label\": {\"color\": \"green\"}\n    }\n```\n### Slider\n\nSee the [Styling the Slider](/components/slider#styling-the-slider) section for a detailed example including:\n\n* Dynamic theming with `light-dark`\n* Custom styling for tracks, marks, and thumbs\n* Attribute-based styling using `[data-filled]`\n\n\n### Tabs\n\nFor another advanced example, see the [Styling the Tabs](/components/tabs#styling-the-tabs) section.\n\n\n### DatePickerInput\n\nComponents that use portals (like `Popover`, `Modal`, and `Tooltip`) often render outside the DOM tree. To style their internal parts:\n\n* Use `classNames` or `styles` props\n* Or set `withinPortal=False` if supported\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Stack([\n    dmc.DatePickerInput(\n        label=\"Default Calendar style\"\n    ),\n    dmc.DatePickerInput(\n        label=\"Calendar without red weekend days\",\n        styles={\"day\": {\"color\": \"var(--mantine-color-text)\"}},\n    )\n])\n```"
  },
  {
    "name": "Styles Overview",
    "endpoint": "/styles-overview",
    "description": "This guide will help you understand how to apply styles to Dash Mantine components.",
    "package": "dash_mantine_components",
    "category": "Styling",
    "order": 1,
    "content": "\n\n## Styles Overview  \nThis guide will help you understand how to apply styles to Dash Mantine components.  \nCategory: Styling  \n\n### Component specific props\nMost of the components provide props that allow you to customize their styles. For example, `Button` component has\n`color`, `variant`, `size` and `radius` props that control its appearance:\n\n\n### Style props\n\n[Style props](/style-props) work similar to component specific props, but with several differences:\n\n- Style props are not component specific, they can be used with any component.\n- Style props always control a single CSS property. For example, `c` prop controls CSS `color` property, while `color` prop controls a set of properties: `color`, `background-color` and `border-color`.\n- Style props are set in style attribute. It is not possible to override them with CSS without using `!important`.\n\n[Style props](/style-props) are useful when you need to change a single CSS property without creating a separate file for styles. Some of the most common use cases are:\n\n\n- Changing text color and font-size\n\n```python\n\ndmc.Card([\n    dmc.Text(\"Card title\", c=\"blue.8\", fz=\"lg\"),\n    dmc.Text(\"Card description\", c=\"dimmed\", fz=\"sm\")\n])\n```\n\n- Applying margins to inputs inside a form:\n\n```python\ndmc.Paper([\n    dmc.TextInput(label=\"First name\"),\n    dmc.TextInput(label=\"Last name\", mt=\"md\"),\n    dmc.TextInput(label=\"Email\", mt=\"md\")    \n])\n```\n\n- Adding padding to various elements:\n\n```python\ndmc.Paper(\"My custom card\", p=\"xl\")\n```\n\nNote that style props were never intended to be used as a primary way of styling components. In most cases, it is better\nto limit the number of style props used per component to 3-4. If you find yourself using more than 4 style props, \nconsider creating a separate CSS file with styles – it will be easier to maintain and will be more performant.\n\n\n### style prop\n\nYou can use the `style` prop to define inline styles, just like in other dash components:\n```python\ndmc.Card(style={\"backgroundColor\": \"blue\", \"color\": \"white\"})\n```\n\n### className prop\nYou can define CSS classes in a `.css` file in the `/assets` folder. These can then be referenced using the `className` prop, just like in other dash components:\n\n```python \ndmc.Card(className=\"card-style\")\n```\n\n.css file:\n```css\n.card-style {\n    background-color: blue;\n    color: white;\n}\n```\n\n### Styles API\n\nNote that the `style` and the `className` props will apply style to the root of the component.  Many DMC components contain\nmultiple elements, for example the `TextInput` includes `label`, `description`, `error` props.  \n\nUse the `classNames` or `styles` props to target the nested elements.  See more information in the [StylesAPI](/styles-api) section.\n\n- `styles` prop: Used to apply inline styles directly to specific inner elements of a Mantine component.\n- `classNames`prop: Used to apply custom CSS class names to specific inner elements of a Mantine component\n\n### theme prop in MantineProvider\n\nDMC includes a great default theme that supports light and dark mode. Use the `theme` prop to change the global styles.\n\nFor those of you familiar with Dash Bootstrap Components, this is similar to setting the theme using a Bootstrap\nstylesheet. However, in DMC, instead of linking to a  CSS file, you can directly define the theme using a Python\ndictionary, which makes it easy to customize the theme. For example, you can  override colors, fonts, spacing,\nand even component-specific styles globally.\n\nFor more information see the [Theme Object](/theme-object) section.\n\n\n###  Theme Tokens\n\nA theme token is a named value from the global theme, like a color, spacing unit, or font family. In DMC, these tokens\ncan be used in any styles with the Mantine [CSS variables](/css-variables):\n\nFor example:\n\n - In a `.css` file in `/assets`:\n\n```css\n.root {\n  background: var(--mantine-color-red-5); /* red[5] from theme.colors */\n  margin-top: var(--mantine-spacing-md);  /* md from theme.spacing */\n}\n```\n\n-  In style props:\n```python\ndcc.Box(bg=\"red.5\", mt=\"xl\")\n# Shorthand for: var(--mantine-color-red-5), var(--mantine-spacing-xl)\n```\n\n- In the `style` prop:\n```python\ndcc.Box(style={\"backgroundColor\": \"var(--mantine-color-red-5)\"})\n\n```"
  },
  {
    "name": "Colors",
    "description": "How to use colors with Dash Mantine Components.",
    "endpoint": "/colors",
    "package": "dash_mantine_components",
    "category": "Theming",
    "order": 3,
    "content": "\n\n## Colors  \nHow to use colors with Dash Mantine Components.  \nCategory: Theming  \n\nMantine uses [open-color](https://yeun.github.io/open-color/) in default theme with some additions. Each color has 10 shades.\n\n\n### Colors in the default theme\n\nColors are stored in the [theme object](/theme-object) as an array of strings. Each color is indexed from `0` (lightest) to `9`\n(darkest). The default theme is available as `dmc.DEFAULT_THEME`, which contains all theme properties with their default values.\n\nFor example, access a specific shade by using the color name and index: `dmc.DEFAULT_THEME['colors']['blue'][1]`\nColors with larger indices are darker.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html\n\ncomponent = html.Div(\n    \" This is a blue element\",\n    style={\n        \"backgroundColor\": dmc.DEFAULT_THEME[\"colors\"][\"blue\"][1],\n        \"color\": dmc.DEFAULT_THEME[\"colors\"][\"blue\"][9],\n        \"padding\": dmc.DEFAULT_THEME[\"spacing\"][\"lg\"]\n    }\n)\n```\nWhen using the `color` or other style props like `c`, `bd` or `bg` prop, you can use just the color.index:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Group([\n    dmc.Button(\"Button\", color=\"blue.3\"),\n    dmc.Button(\"Button\", variant=\"light\", color=\"blue.3\"),\n    dmc.Button(\"Button\", variant=\"outline\", color=\"blue.3\")\n])\n```\n### Colors as CSS Variables\n\nMantine also exposes colors as CSS variables. A complete list of Mantine CSS variables is available in the \n[Mantine Docs](https://mantine.dev/styles/css-variables-list/).\n\nIf you define custom colors in the `theme` object (via the `MantineProvider` component), these will also be included as\nCSS variables.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html\n\ncomponent = html.Div(\n    \" This is a blue theme\",\n    style={\n        \"backgroundColor\": \"var(--mantine-color-blue-1)\",\n        \"color\": \"var(--mantine-color-blue-9)\",\n        \"padding\": \"var(--mantine-spacing-lg)\",\n    }\n)\n```\n\n### Adding extra colors\nYou can add any number of extra colors to `theme.colors` object. This will allow you to use them in all components that\nsupport color prop, for example `Button`, `Badge` and `Switch`.\n\n\n```python\nimport dash_mantine_components as dmc\n\ndmc.MantineProvider(\n    theme={\n        \"colors\": {\n            \"myColor\": [                \n              \"#F2FFB6\",\n              \"#DCF97E\",\n              \"#C3E35B\",\n              \"#AAC944\",\n              \"#98BC20\",\n              \"#86AC09\",\n              \"#78A000\",\n              \"#668B00\",\n              \"#547200\",\n              \"#455D00\",                \n            ]\n        },\n    },\n    children=[dmc.Button(\"Custom Colors!\", color=\"myColor\")],\n)\n```\n### Changing colors\n\nYou can override named theme colors as well, by providing your own list of 10 colors\n\n```python\n\ndmc.MantineProvider(\n    theme={\n        \"colors\": {\n            \"blue\": [... ] # your 10 colors for \"blue\" theme color\n        }\n    }\n)\n```\n\n> 10 shades per color\n>\n> Colors override must include at least 10 shades per color. Otherwise, you will get a TypeScript error and some \n> variants will not have proper colors. If you only have one color value, you can either pick the remaining colors \n> manually or use the [colors generator tool](https://mantine.dev/colors-generator/).\n> \n> You can add more than 10 shades per color: these values will not be used by Mantine components with the default \n> colors resolver, but you can still reference them by index, for example, color=\"blue.11\".\n\n\n\n### Supported color formats\nYou can use the following color formats in theme.colors:\n\n- HEX: `#fff`, `#ffffff`\n- RGB: `rgb(255, 255, 255)`, `rgba(255, 255, 255, 0.5)`\n- HSL: `hsl(0, 0%, 100%)`, `hsla(0, 0%, 100%, 0.5)`\n- OKLCH: `oklch(96.27% 0.0217 238.66)`, `oklch(96.27% 0.0217 238.66 / 0.5)`\n\n### Changing Theme Object defaults\n\nYou can change the defaults for `primaryColor` and `primaryShade` in the [theme object](/theme-object) in the\n`MantineProvider` component.\n\n#### primaryColor\n\nThe value of `theme.primaryColor` must be defined as key of `theme.colors`, it is used:\n\n- As a default value for most of the components that support color prop\n- To set default focus ring outline color\n\nYou can customize the primary color by changing it from its default value of `blue` to another predefined theme color.  \n\nThis example changed the default primary color to `green`:\n\n```python\ndmc.MantineProvider(\n    theme={\"primaryColor\": \"green\"},\n    children=[] # your layout here\n    \n)\n```\n\n\n> Note You cannot assign CSS color values to `defaultColor`  It must be a defined color in the `theme` object.\n\n\n\n#### primaryShade\n\n`theme.primaryShade` is a number from 0 to 9. It determines which shade will be used for the components that have color prop.\n\n```python\ndmc.MantineProvider(\n    theme={\"primaryShade\": 3},\n    children=dmc.Group([\n        dmc.Button(\"Button\",),\n        dmc.Button(\"Button\", variant=\"light\"),\n        dmc.Button(\"Button\", variant=\"outline\")\n    ])\n    \n)\n```\n\nYou can also customize primary shade for dark and light color schemes separately (This is the default):\n\n\n```python\ndmc.MantineProvider(\n    theme={\"primaryShade\": { \"light\": 6, \"dark\": 8 }},\n    children=[] # your layout here\n    \n)\n```\n\n### Color prop\nComponents that support changing their color have color prop. This prop supports the following values:\n\n- Key of `theme.colors`, for example, `blue` or `green`\n- Key of `theme.colors` with color index, for example, `blue.5` or `green.9`\n- CSS color value, for example, #fff or rgba(0, 0, 0, 0.5)\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent= dmc.Box([\n    dmc.Text(\"Filled variant\", size=\"sm\", mb=5, fw=500),\n    dmc.Group([\n        dmc.Button(\"Theme color\", color=\"cyan\"),\n        dmc.Button(\"Hex color\", color=\"#1D72FE\")\n    ]),\n\n    dmc.Text(\"Light variant\", size=\"sm\", mb=5, mt=\"md\", fw=500),\n    dmc.Group([\n        dmc.Button(\"Theme color\", variant=\"light\", color=\"cyan\"),\n        dmc.Button(\"Hex color\", variant=\"light\", color=\"#1D72FE\")\n    ]),\n\n    dmc.Text(\"Outline variant\", size=\"sm\", mb=5, mt=\"md\", fw=500),\n    dmc.Group([\n        dmc.Button(\"Theme color\", variant=\"outline\", color=\"cyan\"),\n        dmc.Button(\"Hex color\", variant=\"outline\", color=\"#1D72FE\")\n    ])\n])\n```\n### Colors index reference\nYou can reference colors by index in `color` prop and style props, for example `c` prop:\n\n\n```python\ndmc.Text(\"Text with blue.5 color\", c=\"blue.5\")\ndmc.Button(\"Button\", color=\"blue.5\")\n```\n\n### Difference between color and c props\n`color` prop is used to control multiple CSS properties of the component. These properties can vary across different\ncomponents, but usually `color` prop controls `background`, `color` and `border-color` CSS properties. For example,\nwhen you set `color='#C3FF36'` on `Button` component (with `variant='filled'`), it will set the following CSS properties:\n\n- `background-color` to `#C3FF36`\n- `background-color` when button is hovered to `#B0E631` (`#C3FF36` darkened by 10%)\n- color to `var(--mantine-color-white)`\n- `border-color` to `transparent`\n\n`c` is a [style prop](/style-props) – it is responsible for setting a single CSS property `color` (color of the text). \nYou can combine both props to achieve better contrast between text and background. In the following example:\n\n- `color` prop sets all background: #C3FF36 and color: `var(--mantine-color-white)`\n- `c` prop overrides color styles to `color: var(--mantine-color-black)`\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Button(\"Button with color and c props\",  color=\"#C3FF36\", c=\"black\")\n```\n### Colors in light and dark mode\n\n#### Using light-dark() CSS Function\nThe [light-dark()](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark) function allows defining different styles for light and dark color schemes.\n\n```css\nbackground-color: light-dark(white, black);\n```\n\n- The first argument applies in light mode.\n- The second argument applies in dark mode.\n\nNote that the light-dark() function is not supported in older browsers.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Box([\n\n    dmc.Text(\n        \"Click the theme switch in the header to see how the background changes in different modes:\"\n    ),\n    # Using CSS color names\n    dmc.Text(\n        \"light-dark(whitesmoke, gray)\",\n        style={\"backgroundColor\": \"light-dark(whitesmoke, gray)\"},\n        p=\"lg\",\n        m=\"md\"\n    ),\n    # Using Mantine CSS variables\n    dmc.Text(\n        \"light-dark(var(--mantine-color-blue-1), var(--mantine-color-blue-9))\",\n        style={\"backgroundColor\": \"light-dark(var(--mantine-color-blue-1), var(--mantine-color-blue-9))\"},\n        p=\"lg\",\n        m=\"md\"\n    )\n])\n```\n#### CSS Class Names for Light/Dark Mode\n\nSince light-dark() is not supported in older browsers, you can use class-based styling instead:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Box([\n\n    dmc.Text(\n        \"Click the theme switch in the header to see how the background changes in different modes\"\n    ),\n    dmc.Text(\n        \"CSS class defined for light and dark scheme\",\n        className=\"light-dark-demo\",\n        p=\"lg\",\n        m=\"md\"\n    ),\n])\n```\n\n```css\n/* applied in light color-scheme */\n.light-dark-demo {\n    background-color: #ffec99\n}\n\n/* applied in dark color-scheme */\n [data-mantine-color-scheme='dark'] .light-dark-demo {\n     background-color: #ff6b6b\n}\n\n\n\n/*\nYou can also use mantine colors\n\n.light-dark-demo {\n    background-color: var(--mantine-color-blue-1)\n}\n\n[data-mantine-color-scheme='dark'] .light-dark-demo {\n     background-color:  var(--mantine-color-blue-1)\n*/\n```\n\n\n#### CSS Variables for Light/Dark Mode\n\nDefining CSS variables on the `:root` element allows global styling across your app, including the `body` element.\n\nHere is an example using a CSS variable:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Box([\n\n    dmc.Text(\n        \"Click the theme switch in the header to see how the background changes in different modes:\"\n    ),\n    dmc.Text(\n        \"CSS variable defined for light and dark scheme\",\n        style={\"backgroundColor\": \"var(--my-light-dark-colors\"},\n        p=\"lg\",\n        m=\"md\"\n    ),\n])\n```\n\n```css\n\n:root {\n  --my-light-dark-colors: aliceblue;\n}\n\n:root[data-mantine-color-scheme=\"dark\"] {\n  --my-light-dark-colors: blue;\n}\n\n/*\nYou can also use mantine colors\n\n:root {\n  --my-light-dark-colors: var(--mantine-color-blue-1);\n}\n\n:root[data-mantine-color-scheme=\"dark\"] {\n  --my-light-dark-colors: var(--mantine-color-blue-1);\n}\n*/\n\n\n/*\nThe  --mantine-color-body CSS variable is used for body background and as background color\n of some components (Modal, Paper, etc.).  You can change it like this:\n\n:root {\n  --mantine-color-body: #f9f9f9;\n}\n\n:root[data-mantine-color-scheme=\"dark\"] {\n  --mantine-color-body: #333;\n}\n\n\n*/\n```\n\n\n### Default colors\n\n\n```python\nimport dash_mantine_components as dmc\n\ncolors = dmc.DEFAULT_THEME[\"colors\"]\n\ncomponent= dmc.SimpleGrid([\n    dmc.Card([\n        dmc.Box(h=100, w=100, bg=f\"{c}.{i}\" ),\n        dmc.Text(f\"{c} {i}\", size=\"sm\"),\n        dmc.Text(f\"{colors[c][i]}\", size=\"sm\", c=\"dimmed\")\n    ])  for c in list(colors) for i in range(10)\n], cols={ \"base\": 5,  \"lg\": 10 }, spacing=\"xs\")\n```\n### Default colors: CSS Variables list\n\nFor a list of all Mantine CSS variables that are generated from default theme, see the [CSS Variables](/css-variables/) section."
  },
  {
    "name": "MantineProvider",
    "description": "Use MantineProvider component to manage themes in your app globally.",
    "endpoint": "/components/mantineprovider",
    "package": "dash_mantine_components",
    "category": "Theming",
    "order": 1,
    "content": "\n\n## MantineProvider  \nUse MantineProvider component to manage themes in your app globally.  \nCategory: Theming  \n\nWrap your `app.layout` with a single `MantineProvider` to enable theming and styling features across your app. There should only be one `MantineProvider` in your app.\n\nThe `MantineProvider`:\n\n1. Sets the global theme, including colors, spacing, and fonts.\n2. Handles light and dark mode toggling.\n3. Provides Mantine CSS variables according to the selected theme.\n\n### Usage\n\nYour app must be wrapped inside a MantineProvider, and it must be used only once.\n\n```python\nimport dash_mantine_components as dmc\n\napp.layout = dmc.MantineProvider(\n    theme = {...},\n    children={...}\n)\n```\n\n### Theme object\n\nSee the [Theme Object](/theme-object) section to learn how to customize the default Mantine theme.\n\n\n### Custom Colors\n\nSee the [Colors](/colors) section to learn how to customize the theme colors.\n\n### Light and Dark Color Schemes\nMantine supports both light and dark color schemes.  The default color scheme is \"light\".\nWhen the `MantineProvider` is added to your app, it automatically sets the `data-mantine-color-scheme` attribute at the \ntop level of the app. This attribute controls whether the app uses light or dark mode. All components in the app \nreference this attribute to decide which colors to apply.\n\nYou can change the color scheme with the `forceColorScheme` prop.\n\nIn the [Theme Switch Components](/theme-switch) section, learn how to add a component to allow users to select either light or dark mode.\n\n```python\nimport dash_mantine_components as dmc\n\napp.layout = dmc.MantineProvider(\n    forceColorScheme=\"dark\",\n    theme = {...},\n    children={...}\n)\n```\n\n\n### Keyword Arguments\n\n\n#### MantineProvider\n\n- children (a list of or a singular dash component, string or number; optional):\n    Your application.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- classNamesPrefix (string; optional):\n    A prefix for components static classes (for example\n    {selector}-Text-root), `mantine` by default.\n\n- colorSchemeManager (dict; optional):\n    Used to retrieve/set color scheme value in external storage, by\n    default uses `window.localStorage`.\n\n    `colorSchemeManager` is a dict with keys:\n\n- cssVariablesResolver (dict; optional):\n    Function to generate CSS variables based on theme object.\n\n    `cssVariablesResolver` is a dict with keys:\n\n- cssVariablesSelector (string; optional):\n    CSS selector to which CSS variables should be added, by default\n    variables are applied to `:root` and `:host`.\n\n- deduplicateCssVariables (boolean; optional):\n    Determines whether CSS variables should be deduplicated: if CSS\n    variable has the same value as in default theme, it is not added\n    in the runtime. @,default,`True`.\n\n- defaultColorScheme (a value equal to: 'auto', 'dark', 'light'; optional):\n    Default color scheme value used when `colorSchemeManager` cannot\n    retrieve value from external storage, `light` by default.\n\n- env (a value equal to: 'default', 'test'; optional):\n    Environment at which the provider is used, `'test'` environment\n    disables all transitions and portals.\n\n- forceColorScheme (a value equal to: 'dark', 'light'; optional):\n    Forces color scheme value, if set, MantineProvider ignores\n    `colorSchemeManager` and `defaultColorScheme`.\n\n- stylesTransform (dict; optional):\n    An object to transform `styles` and `sx` props into css classes,\n    can be used with CSS-in-JS libraries.\n\n    `stylesTransform` is a dict with keys:\n\n- theme (dict; optional):\n    Theme override object.\n\n    `theme` is a dict with keys:\n\n- withCssVariables (boolean; optional):\n    Determines whether theme CSS variables should be added to given\n    `cssVariablesSelector` @,default,`True`.\n\n- withGlobalClasses (boolean; optional):\n    Determines whether global classes should be added with `<style />`\n    tag. Global classes are required for `hiddenFrom`/`visibleFrom`\n    and `lightHidden`/`darkHidden` props to work. @,default,`True`.\n\n- withStaticClasses (boolean; optional):\n    Determines whether components should have static classes, for\n    example, `mantine-Button-root`. @,default,`True`."
  },
  {
    "name": "Plotly figure templates",
    "description": "How to style Plotly figures with a Mantine theme.",
    "endpoint": "/components/figure-templates",
    "package": "dash_mantine_components",
    "category": "Theming",
    "order": 11,
    "content": "\n\n## Plotly figure templates  \nHow to style Plotly figures with a Mantine theme.  \nCategory: Theming  \n\n---\n\n### Plotly Figure Template Basics\n\nPlotly figure templates allow you to style your figures globally or per-figure. Templates include pre-defined color schemes, font styles, and layout configurations.\n\nFor more details, refer to the [Plotly templates documentation](https://plotly.com/python/templates/).\n\nBelow is an example using Plotly's built-in `plotly_white` and `plotly_dark` templates.  This is the same figure\nstyled for a light and dark theme.\n\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import dcc\nimport plotly.express as px\n\ndf = px.data.gapminder()\ndff = df[df.year == 2007]\n\ncomponent = dmc.SimpleGrid(\n    [\n        dcc.Graph(figure=px.bar(dff, x=\"continent\", y=\"pop\", template=\"plotly_white\", title=\"plotly_white theme\")),\n        dcc.Graph(figure=px.bar(dff, x=\"continent\", y=\"pop\", template=\"plotly_dark\", title=\"plotly_dark theme\"))\n    ],\n    cols=2\n)\n```\n### Mantine-Themed Plotly Templates\n\nTo make Plotly figures consistent with Mantine's default theme, Dash Mantine Components provides two custom Plotly templates:\n\n- **`mantine_light`**: Based on `plotly_white` and styled with Mantine's light theme.  \n- **`mantine_dark`**: Based on `plotly_dark` and styled with Mantine's dark theme.  \n\nThese templates are created and registered using the `add_figure_templates` function. They include:  \n- Color palettes from Mantine’s theme.  \n- Fonts (`Inter` by default).  \n- Background and grid colors that match Mantine’s styles.  \n\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import dcc\nimport plotly.express as px\n\ndf = px.data.gapminder()\ndff = df[df.year == 2007]\n\ndmc.add_figure_templates()\n\n\ncomponent = dmc.SimpleGrid(\n    [\n        dcc.Graph(figure=px.bar(dff, x=\"continent\", y=\"pop\", template=\"mantine_light\", title=\"mantine_light theme\" )),\n        dcc.Graph(figure=px.bar(dff, x=\"continent\", y=\"pop\", template=\"mantine_dark\",  title=\"mantine_dark theme\"))\n    ],\n    cols=2\n)\n```\n### Setting a Default Template\nYou can globally set either `mantine_light` or `mantine_dark` as the default Plotly template. This ensures all figures\nuse the specified template unless explicitly overridden.\n\n```python\nimport dash_mantine_components as dmc\n\n# Set \"mantine_dark\" as the default template\ndmc.add_figure_templates(default=\"mantine_dark\")\n```\n\n\n### Modifying Existing Plotly Templates\nThe `mantine_light` and `mantine_dark` templates can be customized like any other Plotly template. Refer to the\n[Plotly templates documentation](https://plotly.com/python/templates/) for more info and examples.\n\n```python\nimport plotly.io as pio\nimport plotly.express as px\nimport dash_mantine_components as dmc\n\ndmc.add_figure_templates()\n\n# Access the registered Mantine light template\ntemplate = pio.templates[\"mantine_light\"]\n\n# Reduce the margins in the template\ntemplate.layout.margin = dict(l=20, r=20, t=20, b=20)\n\nfig = px.scatter(px.data.gapminder(), x=\"gdpPercap\", y=\"lifeExp\", template=\"mantine_light\")\n\n\n\n```\n\n### Customizing `add_figure_templates` Function\nThe `add_figure_templates` function is available starting in DMC version 0.15.1.\nIf you are using an earlier version, or if you are using a custom Mantine theme, you can include your own `add_figure_templates` implementation in your project.\n\nExample Project Structure:\n```bash\nmy_project/  \n├── app.py  \n├── my_figure_templates.py  \n```\n\nIn `my_figure_templates.py`:\n\nCopy the `add_figure_templates` code from the [Dash Mantine Components GitHub](https://github.com/snehilvj/dash-mantine-components/blob/master/dash_mantine_components/figure_templates.py) \nrepository and modify it to fit your project's requirements.\n\nIn `app.py`:\n```python\nfrom my_figure_templates import add_figure_templates\n\n# Register custom templates\nadd_figure_templates()\n```\n\nIn the [Help Center](https://github.com/snehilvj/dmc-docs/tree/main/help_center/theme_switch_figure_templates_custom) you'll find a complete minimal example of a custom figure template with a green primary color.\n\n### Using a Theme Switcher\n\nTo update the figure when switching themes, you need to change the Plotly template in a callback.\n\n\n> For more information on adding a theme switcher to your app, check the [Theme Switch Component](/theme-switch) section.\n\nThe example below uses this app's  theme switch component in the callback.  Try it out by clicking the **theme switch** in the header!\n\nSee a complete minimal example in the [Help Center](https://github.com/snehilvj/dmc-docs/tree/main/help_center/theme_switch_figure_templates_simple)\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import dcc, Input, Output, callback\nimport plotly.express as px\n\ndf = px.data.gapminder()\ndff = df[df.year == 2007]\n\ndmc.add_figure_templates()\n\n# Theme switch in the dmc-docs header:\n# dmc.ColorSchemeToggle(\n#     lightIcon=DashIconify(icon=\"radix-icons:sun\", width=20),\n#     darkIcon=DashIconify(icon=\"radix-icons:moon\", width=20),\n#     variant=\"light\",\n#     color=\"gray\",\n#     id=\"docs-color-scheme-switch\",\n# )\ncomponent = dcc.Graph(id=\"figure-templates-histogram\")\n\n@callback(\n    Output(\"figure-templates-histogram\", \"figure\"),\n    Input(\"docs-color-scheme-switch\", \"computedColorScheme\"),\n)\ndef update_figure(color):\n    template = \"mantine_dark\" if color==\"dark\" else \"mantine_light\"\n    return px.bar(dff, x=\"continent\", y=\"pop\", title=\"Population by Continent\", template=template)\n```\nFor better performance, you can update the figure template using [Partial Property Updates.](https://dash.plotly.com/partial-properties)\n\nHere is the callback updated to use `Patch` to change the figure template.  Note that when using `Patch` you must use the template\nobject rather than just the string name.  \n\n```python\n\nfrom dash import  Input, Output, callback, Patch\nimport plotly.io as pio\n\n\n@callback(\n    Output(\"figure-templates-bar\", \"figure\"),\n    Input(\"docs-color-scheme-switch\", \"computedColorScheme\"),\n)\ndef update_figure(color):\n    # template must be template object rather than just the template string name\n    template = pio.templates[\"mantine_dark\"] if color==\"dark\" else pio.templates[\"mantine_light\"]\n    patched_fig = Patch()\n    patched_fig[\"layout\"][\"template\"] = template\n    return patched_fig\n```\n\n### Updating multiple figures\n\nTo update multiple figure when switching themes, you can use [Pattern Matching Callbacks.](https://dash.plotly.com/pattern-matching-callbacks)\n \nThe example below uses this app's  theme switch component in the callback.  Try it out by clicking the **theme switch** in the header!\n\nSee a complete minimal example in the [Help Center](https://github.com/snehilvj/dmc-docs/tree/main/help_center/theme_switch_figure_templates)\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import  dcc, Input, Output, State, callback, Patch, ALL\nimport plotly.express as px\nimport plotly.io as pio\n\ndmc.add_figure_templates(default=\"mantine_light\")\n\ndf = px.data.gapminder()\n\nline_fig = px.line(\n    df.query(\"1952 <= year <= 1982 & continent != 'Asia'\"),\n    x=\"year\",\n    y=\"gdpPercap\",\n    color=\"continent\",\n    line_group=\"country\"\n)\n\ndff = df[df.year == 2007]\nscatter_fig = px.scatter(\n    dff,\n    x=\"gdpPercap\",\n    y=\"lifeExp\",\n    size=\"pop\",\n    color=\"continent\",\n    log_x=True,\n    size_max=60,\n    title=f\"2007 GDP per Capita vs Life Expectancy, Sized by Population \",\n)\n\n\navg_lifeExp = (dff[\"lifeExp\"] * dff[\"pop\"]).sum() / dff[\"pop\"].sum()\nmap_fig = px.choropleth(\n    dff,\n    locations=\"iso_alpha\",\n    color=\"lifeExp\",\n    title=\"%.0f World Average Life Expectancy was %.1f years\" % (2007, avg_lifeExp),\n)\n\nbar_fig = px.bar(dff, x=\"continent\", y=\"pop\", title=\"Population by Continent\")\n\ngraphs = dmc.Grid(\n    [\n        dmc.GridCol(dcc.Graph(figure=bar_fig, id={\"type\": \"graph\", \"index\": \"bar\"}), span={\"base\": 12, \"md\":6}),\n        dmc.GridCol(dcc.Graph(figure=scatter_fig, id={\"type\": \"graph\", \"index\": \"scatter\"}), span={\"base\": 12, \"md\":6}),\n        dmc.GridCol(dcc.Graph(figure=line_fig, id={\"type\": \"graph\", \"index\": \"line\"}), span={\"base\": 12, \"md\":6}),\n        dmc.GridCol(dcc.Graph(figure=map_fig, id={\"type\": \"graph\", \"index\": \"map\"}), span={\"base\": 12, \"md\":6}),\n    ],\n    gutter=\"xl\",\n)\n\nsample_controls = dmc.Box([\n    dmc.Button(\"sample button\"),\n    dmc.Button(\"sample red button\", color=\"red\"),\n    dmc.Button(\"sample yellow button\", color=\"yellow\"),\n    dmc.Slider(value=25, my=\"lg\"),\n], w=600)\n\n# used in the children prop of  MantinePovider([], id=\"m2d-mantine-provider)\ncomponent = dmc.Box([sample_controls, graphs])\n\n@callback(\n    Output({\"type\": \"graph\", \"index\": ALL}, \"figure\"),\n    Input(\"docs-color-scheme-switch\", \"computedColorScheme\"),\n    State({\"type\": \"graph\", \"index\": ALL}, \"id\"),\n)\ndef update_figure(color, ids):\n    # template must be template object rather than just the template string name\n    template = pio.templates[\"mantine_dark\"] if color==\"dark\" else pio.templates[\"mantine_light\"]\n    patched_figures = []\n    for i in ids:\n        patched_fig = Patch()\n        patched_fig[\"layout\"][\"template\"] = template\n        patched_figures.append(patched_fig)\n\n    return patched_figures\n```"
  },
  {
    "name": "Theme Object",
    "description": "Mantine theme is an object where your application's colors, fonts, spacing, border-radius and other design tokens are stored.",
    "endpoint": "/theme-object",
    "package": "dash_mantine_components",
    "category": "Theming",
    "order": 2,
    "content": "\n\n## Theme Object  \nMantine theme is an object where your application's colors, fonts, spacing, border-radius and other design tokens are stored.  \nCategory: Theming  \n\n### Theme overview\n\nMantine’s default theme makes Dash apps look great in both light and dark modes. If you’re new to Dash Mantine Components,\nstart with the default theme. You can customize the theme globally by editing the `theme` prop in the `MantineProvider`.\n\nThe `theme` object is a dictionary where you can set things like colors, border radius, spacing, fonts, and breakpoints.\nMantine will merge your custom theme with the defaults, so you just need to provide what you want to change.\n\nThis example demonstrates how changing the `theme` updates the entire app’s appearance. Here, we change:\n- Primary accent color\n- Border radius\n- Card shadow style\n- Color scheme (light/dark)\n\nTry it live: [DMC Theme Builder on Pycafe](https://py.cafe/app/dash.mantine.components/dash-mantine-theme-builder)\n\n---\n\n---\n\n\n### Usage\n\n\n```python\nimport dash_mantine_components as dmc\n\ndmc.MantineProvider(\n    theme={\n        # add your colors\n        \"colors\": {\n             # add your colors\n            \"deepBlue\": [\"#E9EDFC\", \"#C1CCF6\", \"#99ABF0\" \"...\"], # 10 colors\n            # or replace default theme color\n            \"blue\": [\"#E9EDFC\", \"#C1CCF6\", \"#99ABF0\" \"...\"],   # 10 colors\n        },\n        \"shadows\": {\n            # other shadows (xs, sm, lg) will be merged from default theme\n            \"md\": \"1px 1px 3px rgba(0,0,0,.25)\",\n            \"xl\": \"5px 5px 3px rgba(0,0,0,.25)\",\n        },\n        \"headings\": {\n            \"fontFamily\": \"Roboto, sans-serif\",\n            \"sizes\": {\n                \"h1\": {\"fontSize\": '30px'},\n            },\n        },\n    },\n    children=[\n        # your app layout here\n    ],\n)\n```\n\n\n### Theme properties\nYou can find a complete list of all theme properties in the theme object in the references section at the bottom of the \npage. In the next section, we’ll focus on a few key properties to explain them in more detail.\n\n#### Colors\n\nSee more information and examples in [Colors](/colors) section\n\n- `colors` adds colors or over-rides named theme colors\n- `primaryColor` sets the app's primary (default) accent color \n- `primaryShade` sets the app's primary shade in either light or dark mode\n\n#### Typography\n\nSee more information and examples in [Typography](/typography) section\n\n- `fontFamily` – controls font-family in all components except `Title`, `Code` and `Kbd`\n- `fontFamilyMonospace` – controls font-family of components that require monospace font: `Code`, `Kbd` and `CodeHighlight`\n- `headings.fontFamily` – controls font-family of h1-h6 tags in `Title`, fallbacks to `theme.fontFamily` if not defined\n- `fontSizes` - defines the font-size from `xs` to `xl`\n- `lineHeights` -defines `line-height` values for `Text` component, most other components use `theme.lineHeights.md` by default\n\n#### Breakpoints\n\nSee more information and examples in [Responsive Styles](/responsive-styles) section\n\n#### autoContrast\n`autoContrast` controls whether text color should be changed based on the given color prop in the following components:\n\n* `ActionIcon` with `variant='filled'` only\n* `Alert` with `variant='filled'` only\n* `Avatar` with `variant='filled'` only\n* `Badge` with `variant='filled'` only\n* `Button` with `variant='filled'` only\n* `Chip` with `variant='filled'` only\n* `NavLink` with `variant='filled'` only\n* `ThemeIcon` with `variant='filled'` only\n* `Checkbox` with `variant='filled'` only\n* `Radio` with `variant='filled'` only\n* `Tabs` with `variant='filled'` only\n* `SegmentedControl`\n* `Stepper`\n* `Pagination`\n* `Progress`\n* `Indicator`\n* `Timeline`\n* `Spotlight`\n* All dates components that are based on Calendar component\n\n`autoContrast` checks whether the given color luminosity is above or below the `luminanceThreshold` value and changes text color to either `theme.white` or `theme.black` accordingly.\n\n`autoContrast` can be set globally on the theme level or individually for each component via `autoContrast` prop, except for dates components which only support global theme setting.\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Box([\n    dmc.Code(\"autoContrast=True\"),\n    dmc.Group(\n        [\n            dmc.Button(\"Lime.4 button\", color=\"lime.4\", autoContrast=True),\n            dmc.Button(\"Blue.2 button\", color=\"blue.2\", autoContrast=True),\n            dmc.Button(\"Orange.3 button\", color=\"orange.3\", autoContrast=True),\n        ],\n        mt=\"xs\",\n        mb=\"lg\"\n    ),\n    dmc.Code(\"autoContrast=False\"),\n    dmc.Group(\n        [\n            dmc.Button(\"Lime.4 button\", color=\"lime.4\"),\n            dmc.Button(\"Blue.2 button\", color=\"blue.2\"),\n            dmc.Button(\"Orange.3 button\", color=\"orange.3\"),\n        ],\n        mt=\"xs\"\n    )\n])\n```\n#### luminanceThreshold\n\n`luminanceThreshold` controls which luminance value is used to determine if text color should be light or dark. It is \nused only if `theme.autoContrast` is set to `True`. Default value is 0.3.\n\nSee a live demo of `luminanceThreshold` in the [Mantine Docs](https://mantine.dev/theming/theme-object/#luminancethreshold)\n\n```python\ndmc.MantineProvider(\n    dmc.Group([\n        dmc.Button(\"button\", color=f\"blue.{i}\") for i in range(10)\n    ]),\n    theme={\n        \"luminanceThreshold\": .45,\n        \"autoContrast\": True\n    }\n)\n```\n\n#### focusRing\n`theme.focusRing` controls focus ring styles, it supports the following values:\n\n- 'auto' (default and recommended) – focus ring is visible only when the user navigates with keyboard, this is the default browser behavior for native interactive elements\n- 'always' – focus ring is visible when user navigates with keyboard and mouse, for example, the focus ring will be visible when user clicks on a button\n- 'never' – focus ring is always hidden, it is not recommended – users who navigate with keyboard will not have visual indication of the current focused element\n\n\nSee a live demo of `focusRing` in the [Mantine Docs](https://mantine.dev/theming/theme-object/#focusring)\n\n#### focusClassName\n\n`theme.focusClassName` is a CSS class that is added to elements that have focus styles, for example, `Button` or \n`ActionIcon`. It can be used to customize focus ring styles of all interactive components except inputs. Note that when\n`theme.focusClassName` is set, `theme.focusRing` is ignored.\n\nSee a live demo of `focusClassName` in the [Mantine Docs](https://mantine.dev/theming/theme-object/#focusclassname)\n\n```python\ndmc.MantineProvider(\n    dmc.Button(\"click button to see focus ring\", m=\"lg\"),\n    theme={\"focusClassName\": \"focus\"}\n)\n```\nDefine the class in the `.css` file in `/assets` folder\n```css\n\n/* Use `&:focus` when you want focus ring to be visible when control is clicked */\n.focus {\n  &:focus {\n    outline: 2px solid var(--mantine-color-red-filled);\n    outline-offset: 3px;\n  }\n}\n```\n\n\n#### activeClassName\n`theme.activeClassName` is a CSS class that is added to elements that have active styles, for example, `Button` or\n`ActionIcon`. It can be used to customize active styles of all interactive components.\n\nTo disable active styles for all components, set `theme.activeClassName` to an empty string.\n\n\nSee a live demo of `activeClassName` in the [Mantine Docs](https://mantine.dev/theming/theme-object/#activeclassname)\n\n#### defaultRadius \n\n`theme.defaultRadius` controls the default border-radius property in most components, for example, `Button` or `TextInput`.\nYou can set to either one of the values from `theme.radius` or a number/string to use exact value. Note that numbers are\ntreated as pixels, but converted to rem. For example, `{'defaultRadius': 4}` will be converted to 0.25rem. You can learn\nmore about rem conversion in the [rem units guide](https://mantine.dev/styles/rem/).\n\n\nSee a live demo of `defaultRadius` in the [Mantine Docs](https://mantine.dev/theming/theme-object/#defaultradius)\n\n```python\n\ndmc.MantineProvider(\n    dmc.Box([\n        dmc.Button(\"Button\", m=\"sm\"),\n        dmc.TextInput(m=\"sm\", label=\"TextInput with defaultRadius\", placeholder=\"TextInput with default radius\")\n    ]),\n    theme={\"defaultRadius\": \"xl\"},    \n)\n```\n\n#### cursorType\n`theme.cursorType` controls the default cursor type for interactive elements, that do not have cursor: pointer styles \nby default. For example, `Checkbox`.\n\n\nSee a live demo of `cursorType` in the [Mantine Docs](https://mantine.dev/theming/theme-object/#cursortype)\n\n\n```python\ndmc.MantineProvider(\n    dmc.Checkbox(label=\"Pointer cursor\", mt=\"md\"),\n    theme={\"cursorType\": 'pointer'},    \n)\n```\n\n#### defaultGradient\n`theme.defaultGradient` controls the default gradient configuration for components that support `variant='gradient'`\n(Button, ActionIcon, Badge, etc.).\n\n\nSee a live demo of `defaultGradient` in the [Mantine Docs](https://mantine.dev/theming/theme-object/#defaultgradient)\n\n```python\ndmc.MantineProvider(\n    dmc.Button(\"Button with custom default gradient\", variant=\"gradient\"),\n    theme={\n        \"defaultGradient\": {\n            \"from\": 'orange',\n            \"to\": 'red',\n            \"deg\": 45,\n          },\n    }  \n)\n```\n#### components defaultProps\n\nDefault props  \n\nYou can define default props for every Mantine component by setting `theme.components`. These props will be used by\ndefault by all components of your application unless they are overridden by component props.\n\nSee a live demo of `defaultProps` in the [Mantine Docs](https://mantine.dev/theming/default-props/)\n\n\n```python\ndmc.MantineProvider(\n    dmc.Group(\n        [\n            dmc.Button(\"Default button\"),\n            dmc.Button(\"Button with props\", color=\"red\", variant=\"filled\"),\n        ]\n    ),\n    theme={\n        \"components\": {\n            \"Button\": {\n                \"defaultProps\": {\n                    \"color\": \"cyan\",\n                    \"variant\": \"outline\",\n                },\n            },\n        },\n    }\n)\n```\n\n#### components custom variants\n\nSee how to add custom variants to `ActionIcon` and `Button` in the theme object, making these variants available globally\nacross your app. Detailed examples are provided in their respective documentation sections.  Also, see examples live:\n\n- [Live Demo: Button Variants on PyCafe](https://py.cafe/dash.mantine.components/button-custom-variants-demo-0)  \n- [Live Demo: ActionIcon Variants on PyCafe](https://py.cafe/dash.mantine.components/actionicon-custom-variants-demo)  \n\n#### components custom sizes\n\nSee and example of adding custom sizes in the  [Checkbox](/components/checkbox) section.  Also see a live dome on PyCafe:\n\n- [Live Demo: Checkbox Sizes PyCafe](https://py.cafe/dash.mantine.components/checkbox-custom-sizes-demo) \n\n#### other \n\n`theme.other` is an object that can be used to store any other properties that you want to access with the theme objects.\n\n```python\ndmc.MantineProvider(\n    # your app layout,\n    theme={\n        \"other\": {\n            \"charcoal\": \"#333333\",\n            \"primaryHeadingSize\": 45,\n            \"fontWeights\": {\n                \"bold\": 700,\n                \"extraBold\": 900,\n            },\n        },\n    }\n)\n```\n\n\n### Usage in DMC docs\n\nMantineProvider is used to customize theme for these docs as well. The theming is more or less inline with below.\n\n```python\nimport dash_mantine_components as dmc\n\napp.layout = dmc.MantineProvider(\n     forceColorScheme=\"light\",\n     theme={\n         \"primaryColor\": \"indigo\",\n         \"fontFamily\": \"'Inter', sans-serif\",\n         \"components\": {\n             \"Button\": {\"defaultProps\": {\"fw\": 400}},\n             \"Alert\": {\"styles\": {\"title\": {\"fontWeight\": 500}}},\n             \"AvatarGroup\": {\"styles\": {\"truncated\": {\"fontWeight\": 500}}},\n             \"Badge\": {\"styles\": {\"root\": {\"fontWeight\": 500}}},\n             \"Progress\": {\"styles\": {\"label\": {\"fontWeight\": 500}}},\n             \"RingProgress\": {\"styles\": {\"label\": {\"fontWeight\": 500}}},\n             \"CodeHighlightTabs\": {\"styles\": {\"file\": {\"padding\": 12}}},\n             \"Table\": {\n                 \"defaultProps\": {\n                     \"highlightOnHover\": True,\n                     \"withTableBorder\": True,\n                     \"verticalSpacing\": \"sm\",\n                     \"horizontalSpacing\": \"md\",\n                 }\n             },\n         },\n     },\n     children=[\n         # content\n     ],\n )\n```\n\n### Default theme\n\nDefault theme is available as `dmc.DEFAULT_THEME`. It includes all theme properties with default values. \nWhen you pass theme override to MantineProvider, it will be deeply merged with the default theme.\n\n### Theme Object Reference\n\n| **Name**               | **Description**                                                                                                                                                                | **Type**                         |\n|:-----------------------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------------------------------|\n| `focusRing`            | Controls focus ring styles. Options: `auto` (default, shows when navigating with keyboard), `always` (shows for keyboard and mouse), `never` (always hidden, not recommended). | 'auto' or 'always' or 'never'    | \n| `scale`                | rem units scale, adjust if customizing `<html />` font-size. Default: `1` (16px font-size).                                                                                    | `number`                         |\n| `fontSmoothing`        | Determines whether `font-smoothing` is applied to the body. Default: `true`.                                                                                                   | `boolean`                        |\n| `white`                | Base white color. Example: `#ffffff`.                                                                                                                                          | `string`                         |\n| `black`                | Base black color. Example: `#000000`.                                                                                                                                          | `string`                         |\n| `colors`               | Object of colors, where each key is a color name, and each value is an array of at least 10 shades. Example: `colors.blue = ['#f0f8ff', '#add8e6', ...]`.                      | `object`                         |\n| `primaryShade`         | Determines which shade of `colors.primary` is used. Options: `{light: 6, dark: 8}` (default) or a single number (e.g., `6` for both modes).                                    | `number or object`               |\n| `primaryColor`         | Key of `theme.colors`. Determines the default primary color. Default: `blue`.                                                                                                  | `string`                         |\n| `variantColorResolver` | Function to resolve colors for variants like `Button` and `ActionIcon`. Can be used for deep customization.                                                                    | `function`                       |\n| `autoContrast`         | If `true`, adjusts text color for better contrast based on the background color. Default: `false`.                                                                             | `boolean`                        |\n| `luminanceThreshold`   | Threshold for determining whether text should be light or dark when `autoContrast` is enabled. Default: `0.3`.                                                                 | `number`                         |\n| `fontFamily`           | Font-family used in all components. Example: `'Arial, sans-serif'`.                                                                                                            | `string`                         |\n| `fontFamilyMonospace`  | Monospace font-family used in code components. Example: `'Courier, monospace'`.                                                                                                | `string`                         |\n| `headings`             | Controls heading styles. Includes `fontFamily`, `fontWeight`, `textWrap` (e.g., `'wrap'`, `'nowrap'`) and sizes for `h1` to `h6` (e.g., `{'fontSize': 32, 'lineHeight': 1.4}`). | `object`                         |\n| `radius`               | Object defining border-radius values. Example: `{sm: 4, md: 8, lg: 16}`.                                                                                                       | `object`                         |\n| `defaultRadius`        | Default border-radius used by most components. Example: `md`.                                                                                                                  | `string`                         |\n| `spacing`              | Object defining spacing values (e.g., margins, padding). Example: `{xs: 4, sm: 8, md: 16, lg: 24}`.                                                                            | `object`                         |\n| `fontSizes`            | Object defining font-size values. Example: `{xs: 12, sm: 14, md: 16, lg: 20}`.                                                                                                 | `object`                         |\n| `lineHeights`          | Object defining line-height values. Example: `{xs: 1.2, sm: 1.4, md: 1.6}`.                                                                                                    | `object`                         |\n| `breakpoints`          | Object defining responsive breakpoints (in em). Example: `{xs: 30, sm: 48, md: 64}` (for 480px, 768px, and 1024px respectively).                                               | `object`                         |\n| `shadows`              | Object defining box-shadow values. Example: `{sm: '0px 1px 3px rgba(0, 0, 0, 0.2)', md: '0px 4px 6px rgba(0, 0, 0, 0.1)'}`.                                                    | `object`                         |\n| `respectReducedMotion` | If `true`, respects OS reduce-motion settings. Default: `false`.                                                                                                               | `boolean`                        |\n| `cursorType`           | Determines cursor style for interactive elements. Options: `'default'` or `'pointer'`. Default: `'default'`.                                                                   | `'default' or 'pointer'`         |\n| `defaultGradient`      | Default gradient configuration. Example: `{'from': '#6a11cb', 'to': '#2575fc', 'deg': 45}`.                                                                                    | `object`                         |\n| `activeClassName`      | CSS class applied to elements with active styles (e.g., `Button`).                                                                                                             | `string`                         |\n| `focusClassName`       | CSS class applied to elements with focus styles (overrides `focusRing`).                                                                                                       | `string`                         |\n| `components`           | Customizations for individual components (e.g., default props for `Button`).                                                                                                   | `object`                         |\n| `other`                | User-defined custom properties for additional flexibility.                                                                                                                     | `object`                         |"
  },
  {
    "name": "Theme Switch Components",
    "description": "Examples of components to switch between light and dark modes",
    "endpoint": "/theme-switch",
    "package": "dash_mantine_components",
    "category": "Theming",
    "order": 10,
    "content": "\n\n## Theme Switch Components  \nExamples of components to switch between light and dark modes  \nCategory: Theming  \n\n### ColorSchemeToggle Component\nFor apps using DMC versions ≥ 2.6, it is recommended to use the [ColorSchemeToggle](/components/colorschemetoggle)  component.\nIt automatically switches between light and dark themes and persists the user’s selection in localStorage.\n\nCopy this app to run it locally. For a live demo, click the ColorSchemeToggle in the header of these docs.\n\n> The toggle handles theme switching internally and does not require a Dash callback.\n\nFor more information, see the  [ColorSchemeToggle](/components/colorschemetoggle) documentation.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import Dash\nfrom dash_iconify import DashIconify\n\napp = Dash()\n\ncomponent = dmc.ColorSchemeToggle(\n    lightIcon=DashIconify(icon=\"radix-icons:sun\", width=20),\n    darkIcon=DashIconify(icon=\"radix-icons:moon\", width=20),\n    color=\"yellow\",\n    size=\"lg\",\n    m=\"xl\",\n)\n\napp.layout = dmc.MantineProvider(component)\n\nif __name__ == \"__main__\":\n    app.run(debug=True)\n\n```\n\n\n### Mantine Light and dark themes\n\nMantine sets the light and dark color schemes using the `data-mantine-color-scheme` attribute on the `<html>` element.\nThis allows it to apply global styles dynamically based on the theme.\n\nIf you are not using the `ColorSchemeToggle` component, you can switch themes by setting the `data-mantine-color-scheme` in a clientside callback.\n\n\n### Custom Theme Switch\n\nThis example shows how to use the `Switch` component with icon labels to create a theme switch component.   The `Switch`\nis set with `persistence=True` to retain the selected theme even after a browser refresh.\n\nUse this approach if you are on DMC < 2.6.0 or want a custom control (such as `Switch`, `SegmentedControl`, or `Button` etc.) \ninstead of the `ActionIcon` used by `ColorSchemeToggle`.\n\nHere is a complete minimal example:\n\n```python\n\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\nfrom dash import Dash, Input, Output,  clientside_callback\n\n\ntheme_toggle = dmc.Switch(\n    offLabel=DashIconify(icon=\"radix-icons:sun\", width=15, color= \"var(--mantine-color-yellow-8)\"),\n    onLabel=DashIconify(icon=\"radix-icons:moon\", width=15, color= \"var(--mantine-color-yellow-6)\"),\n    id=\"color-scheme-switch\",\n    persistence=True,\n    color=\"grey\",\n)\n\napp = Dash()\n\napp.layout = dmc.MantineProvider(\n    [theme_toggle, dmc.Text(\"Your page content\")],\n)\n\nclientside_callback(\n    \"\"\"\n    (switchOn) => {\n       document.documentElement.setAttribute('data-mantine-color-scheme', switchOn ? 'dark' : 'light');\n       return window.dash_clientside.no_update\n    }\n    \"\"\",\n    Output(\"color-scheme-switch\", \"id\"),\n    Input(\"color-scheme-switch\", \"checked\"),\n)\n\n\nif __name__ == \"__main__\":\n    app.run(debug=True)\n\n```"
  },
  {
    "name": "Typography",
    "description": "How to set fonts, size and line height in the app theme",
    "endpoint": "/typography",
    "package": "dash_mantine_components",
    "category": "Theming",
    "order": 3,
    "content": "\n\n## Typography  \nHow to set fonts, size and line height in the app theme  \nCategory: Theming  \n\n### Change fonts\n\nYou can change fonts and other text styles for headings, code and all other components with the following theme properties:\n\n- `theme.fontFamily` – controls font-family in all components except `Title`, `Code` and `Kbd`\n- `theme.fontFamilyMonospace` – controls font-family of components that require monospace font: `Code`, `Kbd` and `CodeHighlight`\n- `theme.headings.fontFamily` – controls font-family of h1-h6 tags in `Title`, fallbacks to `theme.fontFamily` if not defined\n\nIn this example, you can toggle between the default fonts and custom fonts specified in the `theme`.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import Dash, Input, Output\n\n\napp = Dash()\n\ncomponent = dmc.Box([\n    dmc.SegmentedControl(id=\"segment\", data=[\"default\", \"custom-fonts\"], value=\"default\"),\n    dmc.Box([\n        dmc.Title(\"Greycliff CF title\", order=3),\n        dmc.Button(\"Verdana button\"),\n        dmc.Code(\"Monaco, Courier Code\")\n    ], bd=True, m=\"lg\")\n], m=\"lg\")\n\ntheme= {\n  \"fontFamily\": 'Verdana',\n  \"fontFamilyMonospace\": 'Monaco, Courier, monospace',\n  \"headings\": { \"fontFamily\": 'Greycliff CF' },\n}\n\napp.layout = dmc.MantineProvider(\n    component,\n    id=\"provider\",\n)\n\n@app.callback(\n    Output(\"provider\", \"theme\"),\n    Input(\"segment\", \"value\")\n)\ndef update_font_theme(val):\n    if val == \"default\":\n        return {}\n    return theme\n\n\nif __name__ == \"__main__\":\n    app.run(debug=True)\n```\n\n### System fonts\nBy default, Mantine uses system fonts. It means that different devices will display components based on available font,\nfor example, macOS and iOS users will see San Francisco font, Windows users will see Segoe UI font, Android users will\nsee Roboto font and so on. This approach provides a familiar experience to the users and allows avoiding common problems \nrelated to custom fonts loading (layout shift, invisible text, etc.), if you do not have strict requirements, it is \nrecommended to use system fonts for better performance.\n\nDefault values for theme properties:\n\n- Default value for `theme.fontFamily` and `theme.headings.fontFamily` is `-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji`\n- Default value for `theme.fontFamilyMonospace` is `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace`\n\n\n### Font Sizes\n\nDefault `theme.fontSizes` Values\n\n| Key | Value      | Value in px |\n|-----|------------|-------------|\n| xs  | 0.75rem    | 12px        |\n| sm  | 0.875rem   | 14px        |\n| md  | 1rem       | 16px        |\n| lg  | 1.125rem   | 18px        |\n| xl  | 1.25rem    | 20px        |\n\nYou can customize the `fontSizes` defaults in the `theme`: \n```python\ntheme = {\n    \"fontSizes\" : {\n        \"xs\": \"0.75rem\",            # customize font sizes here\n        \"sm\": \"0.875rem\",\n        \"md\": \"1rem\",\n        \"lg\": \"1.125rem\",\n        \"xl\": \"1.25rem\",\n    }\n}\n\ndmc.MantineProvider(\n    # your layout,\n    theme=theme\n)\n```\n\n### Line Heights\n\n`theme.lineHeights` property defines line-height values for `Text` component, most other components use \n`theme.lineHeights.md` by default:\n\n Default `theme.lineHeights` Values\n\n\n| Key | Value  |\n|-----|--------|\n| xs  | 1.4    |\n| sm  | 1.45   |\n| md  | 1.55   |\n| lg  | 1.6    |\n| xl  | 1.65   |\n\nYou can customize the `lineHeights` defaults in the `theme`:\n\n```python\ntheme = {\n    \"lineHeights\" : {\n        \"xs\": \"1.4\",            # customize line heights here\n        \"sm\": \"1.45\",\n        \"md\": \"1.55\",\n        \"lg\": \"1.6\",\n        \"xl\": \"1.65\",\n    }\n}\n\ndmc.MantineProvider(\n    # your layout,\n    theme=theme\n)\n\n```\n\n### h1-h6 styles\nTo customize headings styles in `Title` components set `theme.headings`:\n\n```python\nimport dash_mantine_components as dmc\n\ntheme = {\n    \"headings\": {\n        # Properties for all headings\n        \"fontWeight\": \"400\",\n        \"fontFamily\": \"Roboto\",\n        # Properties for individual headings\n        \"sizes\": {\n            \"h1\": {\n                \"fontWeight\": \"100\",\n                \"fontSize\": \"36px\",\n                \"lineHeight\": \"1.4\",\n            },\n            \"h2\": {\n                \"fontSize\": \"30px\",\n                \"lineHeight\": \"1.5\",\n            },\n            # Additional heading levels\n            \"h6\": {\n                \"fontWeight\": \"900\",\n            },\n        },\n    },\n}\n\ndmc.MantineProvider(    \n    # your app layout here,\n    theme=theme,\n)\n```\n\nWith `theme.headings` you can customize `font-size`, `font-weight` and `line-height` per heading level. If you need\nmore control over styles, use `:is` selector with [Styles API](/styles-api) to target specific heading level:\n\nYou can find a complete minimal example in the [Help Center](https://github.com/snehilvj/dmc-docs/blob/main/help_center/theme/change_headings.py)\n\n```python\n\ntheme = {\n    \"components\": {\n        \"Title\": {\n            \"classNames\": {\n                \"root\": \"change-heading-demo\",\n            },\n        },\n    },\n}\n\ndmc.MantineProvider(\n    theme=theme,\n    children=[\n        dmc.Title(\"Heading 1\", order=1),\n        dmc.Title(\"Heading 2\", order=2),\n        dmc.Title(\"Heading 3\", order=3),\n        dmc.Title(\"Heading 4\", order=4),\n        dmc.Title(\"Heading 5\", order=5),\n        dmc.Title(\"Heading 6\", order=6),\n    ],\n)\n```\n\nIn a `.css` file in `/assets` folder add:\n\n```css\n\n.change-heading-demo {\n  &:is(h1) {\n    font-family: GreycliffCF, sans-serif;\n    font-weight: 900;\n  }\n\n  &:is(h5, h6) {\n    color: var(--mantine-color-dimmed);\n  }\n}\n\n```"
  },
  {
    "name": "Blockquote",
    "description": "Use the Blockquote to display quotes with optional cite and icon.",
    "endpoint": "/components/blockquote",
    "package": "dash_mantine_components",
    "category": "Typography",
    "content": "\n\n## Blockquote  \nUse the Blockquote to display quotes with optional cite and icon.  \nCategory: Typography  \n\n### Simple Example\n\nA simple blockquote can be created by just passing the main message and `cite` prop.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Blockquote(\n    \"Everything we hear is an opinion, not a fact. Everything we see is a perspective, not the truth.\",\n    cite=\"- Marcus Aurelius , Meditations\",\n)\n```\n### With Icon\n\nIcons can be provided via `icon` prop and its color can be customized using the `color` prop.\nHere's an example using [DashIconify](/dash-iconify).\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ncomponent = dmc.Blockquote(\n    \"Doth mother know you weareth her drapes?\",\n    cite=\"- Ironman\",\n    icon=DashIconify(icon=\"codicon:flame\", width=30),\n    color=\"red\",\n)\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n| Name   | Static selector           | Description        |\n|:-------|:--------------------------|:-------------------|\n| root   | .mantine-Blockquote-root  | Root element       |\n| icon   | .mantine-Blockquote-icon  | Icon wrapper       |\n| cite   | .mantine-Blockquote-cite  | Cite element       |\n\n\n### Keyword Arguments\n#### Blockquote\n\n- children (a list of or a singular dash component, string or number; optional):\n    Content.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- cite (a list of or a singular dash component, string or number; optional):\n    Reference to a cited quote.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- color (optional):\n    Key of `theme.colors` or any valid CSS color, `theme.primaryColor`\n    by default.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- icon (a list of or a singular dash component, string or number; optional):\n    Blockquote icon, displayed on the top left.\n\n- iconSize (string | number; optional):\n    Controls icon `width` and `height`, numbers are converted to rem,\n    `40` by default.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- radius (number; optional):\n    Key of `theme.radius` or any valid CSS value to set\n    `border-radius`, `theme.defaultRadius` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`."
  },
  {
    "name": "Code",
    "description": "Use Code to display code without syntax highlighting.",
    "endpoint": "/components/code",
    "package": "dash_mantine_components",
    "category": "Typography",
    "content": "\n\n## Code  \nUse Code to display code without syntax highlighting.  \nCategory: Typography  \n\n### Inline Code\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Code(\"app = Dash(__name__)\")\n```\n### Block Code\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Code(\n    \"\"\"from dash import Dash\nimport dash_mantine_components as dmc\n\napp = Dash(__name__)\n\napp.layout = dmc.Button(\"Settings\")\n\nif __name__ == \"__main__\":\n    app.run_server(debug=True)\"\"\",\n    block=True,\n)\n```\n### Colors\n\n```python\nimport dash_mantine_components as dmc\n\ncode = \"import collections\"\n\ncomponent = dmc.Group(\n    children=[\n        dmc.Code(code, color=color) for color in [\"red\", \"blue\", \"green\", \"pink\"]\n    ],\n)\n```\n### Syntax Highlighting\n\nIn case you need syntax highlight like in all code examples on this documentation, use [dmc.CodeHighlight](/components/code-highlight)\ncomponent.\n\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n| Name         | Static selector    | Description                                   |\n|:-------------|:-------------------|:----------------------------------------------|\n| root         | .mantine-Code-root | Root element                                  |\n\n\n### Keyword Arguments\n#### Code\n\n- children (a list of or a singular dash component, string or number; optional):\n    Content.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- block (boolean; optional):\n    If set code will be rendered inside `pre`, `False` by default.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- color (optional):\n    Key of `theme.colors` or any valid CSS color, controls\n    `background-color` of the code, by default value is calculated\n    based on color scheme.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`."
  },
  {
    "name": "CodeHighlight",
    "description": "Use CodeHighlight component for highlighting code snippets with syntax highlighting for different languages like python, cpp, javascript, etc.",
    "endpoint": "/components/code-highlight",
    "package": "dash_mantine_components",
    "category": "Typography",
    "content": "\n\n## CodeHighlight  \nUse CodeHighlight component for highlighting code snippets with syntax highlighting for different languages like python, cpp, javascript, etc.  \nCategory: Typography  \n\n### CSS Extensions\n\nAs of DMC 1.2.0, `CodeHightlight` component styles are bundled automatically, so you no longer need to include a separate CSS file.\nIf you're using an older version of DMC, refer to the [migration guide](/migration) for instructions on including optional stylesheets.\n\n\n\n### Simple Usage\n\n`CodeHighlight` highlight given code with [highlight.js](https://highlightjs.org/), it accepts `code` prop with string of\ncode to highlight and `language` prop with language name. If language is not provided, `CodeHighlight` will assume that\nthe code language is `tsx` (TypeScript).\n\n`CodeHighlight` is used to show the code for all the examples in these docs.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.CodeHighlight(\n    language=\"python\",\n    code=\"\"\"# Kadane's Algorithm\n\nclass Solution:\n    def maxSubArray(self, nums: List[int]) -> int:\n        curr, summ = nums[0], nums[0]\n        for n in nums[1:]:\n            curr = max(n, curr + n)\n            summ = max(summ, curr)\n        return summ\"\"\",\n)\n```\n### Supported Languages \n\nThe `CodeHighlight` components supports syntax highlighting for the top 10 most commonly used languages:\n\n* `python` / `py`\n* `javascript` / `js`\n* `typescript` / `ts`\n* `html` / `xml`\n* `css`\n* `json`\n* `yaml` / `yml`\n* `bash` / `sh`\n* `sql`\n* `markdown` / `md`\n\nIf you set `language=\"some-unsupported-lang\"`, the code will render with no syntax highlighting.\n\nIf you need support for a language not currently included, please open an issue on our [GitHub repository.](https://github.com/snehilvj/dash-mantine-components/issues)\n\n### Copy button\nYou can customize copy button labels with `copyLabel` and `copiedLabel` props. In case you need to remove \nthe copy button, set `withCopyButton=False`.\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Stack([\n    dmc.CodeHighlight(\n        code = \"dmc.Text('This codeblock has a custom copy button label')\",\n        language=\"python\",\n        copyLabel=\"Copy button code\",\n        copiedLabel=\"Copied!\",\n    ),\n    dmc.CodeHighlight(\n            code = \"dmc.Text('This codeblock does not have a copy button')\",\n            language=\"python\",\n            withCopyButton=False,\n            mt=\"md\"\n        )\n])\n```\n### With tabs\n`CodeHighlightTabs` component allows organizing multiple code blocks into tabs:\n\nThe `code` prop is a list of dictionaries, where each dictionary defines a tab. Each dictionary can include the following keys:\n\n- `fileName`: The label for the tab.\n- `code`: The code string to display in the tab.\n- `language`: The programming language for syntax highlighting.\n- `icon`: An optional component to display to the left of the fileName.\n\n\n```python\n\ncode = [\n    {\n        \"fileName\": \"demo.py\",\n        \"code\": demo_py, # your code string here\n        \"language\": \"python\",\n        \"icon\": DashIconify(icon=\"vscode-icons:file-type-python\", width=20), \n    },\n    {\n        \"fileName\": \"styles.css\",\n        \"code\":styles_css, # your code string here\n        \"language\": \"css\",\n        \"icon\": DashIconify(icon=\"vscode-icons:file-type-css\", width=20), \n    },    \n]\n\ndmc.CodeHighlightTabs(code=code)\n\n```\n\n### Expandable code\nIf the code snippet is too long, you can make it expandable with `withExpandButton` and `defaultExpanded=False` props.\nTo change label of the expand/collapse control tooltip, use `expandCodeLabel` and `collapseCodeLabel`.\n\nNote - the expandable code feature is only available in the  `CodeHighlightTabs` component.\n\n\n### Inline code\n\n`InlineCodeHighlight` component allows highlighting inline code snippets:\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Text(\n    [\n        \"You can highlight code inline \",\n        dmc.InlineCodeHighlight(\n            code='dmc.InlineCodeHighlight(code=\"Your code string here\", language=\"python\")',\n            language=\"python\",\n        ),\n        \" Is not that cool?\",\n    ]\n)\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n#### CodeHighlight Selectors\n\n| Selector | Static selector               | Description                          |\n|----------|--------------------------------|--------------------------------------|\n| root     | .mantine-CodeHighlight-root    | Root element                         |\n| pre      | .mantine-CodeHighlight-pre     | Pre element, contains code element   |\n| code     | .mantine-CodeHighlight-code    | Code element                         |\n| copy     | .mantine-CodeHighlight-copy    | Copy button                          |\n\n\n\n#### CodeHighlightTabs Selectors\n\n| Selector      | Static selector                     | Description                                            |\n|---------------|--------------------------------------|--------------------------------------------------------|\n| root          | .mantine-CodeHighlightTabs-root      | Root element                                           |\n| pre           | .mantine-CodeHighlightTabs-pre       | Pre element, contains code element                    |\n| codeWrapper   | .mantine-CodeHighlightTabs-codeWrapper | Wrapper around code element, used for expand/collapse logic |\n| code          | .mantine-CodeHighlightTabs-code      | Code element, contains highlighted code               |\n| header        | .mantine-CodeHighlightTabs-header    | Header element, contains copy button and file names   |\n| controls      | .mantine-CodeHighlightTabs-controls  | Controls container, contains control buttons (copy, collapse, etc.) |\n| control       | .mantine-CodeHighlightTabs-control   | Control button (copy, collapse, etc.)                 |\n| files         | .mantine-CodeHighlightTabs-files     | File names list                                       |\n| file          | .mantine-CodeHighlightTabs-file      | File name                                             |\n| fileIcon      | .mantine-CodeHighlightTabs-fileIcon  | File icon                                             |\n| showCodeButton| .mantine-CodeHighlightTabs-showCodeButton | Button that reveals full code when it is collapsed |\n\n\n#### InlineCodeHighlight Selectors\n\n| Selector | Static selector                    | Description    |\n|----------|-------------------------------------|----------------|\n| code     | .mantine-InlineCodeHighlight-code   | Root element   |\n\n\n### Keyword Arguments\n#### CodeHighlight\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- code (string; required):\n    Code to highlight.\n\n- copiedLabel (string; optional):\n    Copied tooltip label, `'Copied'` by default.\n\n- copyLabel (string; optional):\n    Copy tooltip label, `'Copy code'` by default.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- highlightOnClient (boolean; optional):\n    Determines whether code should be highlighted only after component\n    is mounted to the dom (disables code highlight on server), `False`\n    by default.\n\n- language (string; required):\n    Code language, `'tsx'` by default.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withCopyButton (boolean; optional):\n    Determines whether copy button should be displayed, `True` by\n    default.\n#### CodeHighlightTabs\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- activeTab (number; optional):\n    Index of controlled active tab state.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- code (boolean | number | string | dict | list; required):\n    Code to highlight with meta data (file name and icon).\n\n- collapseCodeLabel (string; optional):\n    Collapse button label and tooltip, `'Collapse code'` by default.\n\n- copiedLabel (string; optional):\n    Copied tooltip label, `'Copied'` by default.\n\n- copyLabel (string; optional):\n    Copy tooltip label, `'Copy code'` by default.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- defaultExpanded (boolean; optional):\n    Uncontrolled expanded state initial value.\n\n- expandCodeLabel (string; optional):\n    Expand button label and tooltip, `'Expand code'` by default.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- maxCollapsedHeight (string | number; optional):\n    `max-height` of code in collapsed state.\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withCopyButton (boolean; optional):\n    Determines whether copy button should be displayed, `True` by\n    default.\n\n- withExpandButton (boolean; optional):\n    Determines whether to show the expand button, `False` by default.\n\n- withHeader (boolean; optional):\n    Determines whether header with file names and copy button should\n    be rendered, `True` by default.\n#### InlineCodeHighlight\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- code (string; required):\n    Code to highlight.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- language (string; optional):\n    Code language, `'tsx'` by default.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`."
  },
  {
    "name": "Highlight",
    "description": "Use the Highlight component to highlight a substring in a given string with mark tag.",
    "endpoint": "/components/highlight",
    "package": "dash_mantine_components",
    "category": "Typography",
    "content": "\n\n## Highlight  \nUse the Highlight component to highlight a substring in a given string with mark tag.  \nCategory: Typography  \n\n### Simple Example\n\nUse Highlight component to highlight a substring in a given string with a mark tag.\n\nPass the main string as children to Highlight component and string part that should be highlighted to `highlight` prop. \nIf the main string does not include `highlight` part, it will be ignored. \n`Highlight` ignores trailing whitespace and highlights all matched characters sequences.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Highlight(\n    \"Highlight this, definitely this and also this!\", highlight=\"this\"\n)\n```\n### Change highlight styles\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Highlight(\n    \"You can change styles of highlighted part if you do not like default styles\",\n    ta=\"center\",\n    highlight=[\"highlighted\", \"default\"],\n    highlightStyles={\n        \"backgroundImage\": \"linear-gradient(45deg, var(--mantine-color-cyan-5), var(--mantine-color-indigo-5))\",\n        \"fontWeight\": 500,\n        \"WebkitBackgroundClip\": \"text\",\n        \"WebkitTextFillColor\": \"transparent\",\n    },\n)\n```\n### Colors\n\nYou can customize the highlight color with the `color` prop from one of colors in Mantine's theme.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Highlight(\n    \"Highlight this, definitely this and also this!\",\n    highlight=\"this\",\n    color=\"lime\",\n)\n```\n\n### Highlight Multiple Strings\n\nTo highlight multiple substrings, provide an array of values.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Highlight(\n    \"Highlight this, definitely this and also that!\", highlight=[\"this\", \"that\"]\n)\n```\n### Text Props\n\nHighlight component supports same props as Text component.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Highlight(\n    \"Highlight this, definitely this and also this!\",\n    highlight=\"this\",\n    size=\"lg\",\n    c=\"green\",\n    color=\"yellow\",\n    ta=\"center\",\n)\n```\n### Styles API\n\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n| Name | Static selector         | Description  |\n|:-----|:------------------------|:-------------|\n| root | .mantine-Highlight-root | Root element |\n\n\n### Keyword Arguments\n#### Highlight\n\n- children (string; optional):\n    Content.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- color (optional):\n    Key of `theme.colors` or any valid CSS color, passed to `Mark`\n    component `color` prop, `yellow` by default.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- gradient (dict; optional):\n    Gradient configuration, ignored when `variant` is not `gradient`,\n    `theme.defaultGradient` by default.\n\n    `gradient` is a dict with keys:\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- highlight (string | list of strings; required):\n    Substring or an array of substrings to highlight in `children`.\n\n- highlightStyles (dict; optional):\n    Styles applied to `mark` elements.  Note CSS properties are\n    camelCase,  for example `highlightStyles={\"backgroundColor\":\n    \"blue\"}`.\n\n    `highlightStyles` is a dict with keys:\n\n- inherit (boolean; optional):\n    Determines whether font properties should be inherited from the\n    parent, `False` by default.\n\n- inline (boolean; optional):\n    Sets `line-height` to 1 for centering, `False` by default.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- lineClamp (number; optional):\n    Number of lines after which Text will be truncated.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- size (optional):\n    Controls `font-size` and `line-height`, `'md'` by default.\n\n- span (boolean; optional):\n    Shorthand for `component=\"span\"`, `False` by default, default\n    root element is `p`.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- truncate (boolean; optional):\n    Side on which Text must be truncated, if `True`, text is truncated\n    from the start.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`."
  },
  {
    "name": "List",
    "description": "Use List component to show ordered and unordered lists with icon support.",
    "endpoint": "/components/list",
    "package": "dash_mantine_components",
    "category": "Typography",
    "content": "\n\n## List  \nUse List component to show ordered and unordered lists with icon support.  \nCategory: Typography  \n\n### Simple Example\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.List(\n    [\n        dmc.ListItem(\n            dmc.Text(\n                [\n                    \"Join our \",\n                    dmc.Anchor(\n                        \"Discord\", href=\"https://discord.gg/KuJkh4Pyq5\", underline=False\n                    ),\n                    \" Community.\",\n                ]\n            )\n        ),\n        dmc.ListItem(\"Install python virtual environment.\"),\n    ]\n)\n```\n### Interactive Demo\n\n### With Icons\n\n```python\nimport dash_mantine_components as dmc\nfrom dash_iconify import DashIconify\n\ncomponent = dmc.List(\n    icon=dmc.ThemeIcon(\n        DashIconify(icon=\"radix-icons:check-circled\", width=16),\n        radius=\"xl\",\n        color=\"teal\",\n        size=24,\n    ),\n    size=\"sm\",\n    spacing=\"sm\",\n    children=[\n        dmc.ListItem(\"Join our Discord Community.\"),\n        dmc.ListItem(\"Install python virtual environment.\"),\n        dmc.ListItem(\n            dmc.Text([\"Install npm dependencies with \", dmc.Code(\"npm install\")])\n        ),\n        dmc.ListItem(\n            dmc.Text([\"Add your new component in \", dmc.Code(\"src/lib/components.\")])\n        ),\n        dmc.ListItem(\n            \"Raise a PR, including an example to reproduce the changes contributed by the PR.\",\n            icon=dmc.ThemeIcon(\n                DashIconify(icon=\"radix-icons:pie-chart\", width=16),\n                radius=\"xl\",\n                color=\"blue\",\n                size=24,\n            ),\n        ),\n    ],\n)\n```\n### Nested Lists\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.List(\n    [\n        dmc.ListItem(\"First order item\"),\n        dmc.ListItem(\"First order item\"),\n        dmc.ListItem(\n            [\n                \"First order item with list\",\n                dmc.List(\n                    withPadding=True,\n                    listStyleType=\"disc\",\n                    children=[\n                        dmc.ListItem(\"Nested Item\"),\n                        dmc.ListItem(\"Nested Item\"),\n                        dmc.ListItem(\n                            [\n                                \"Nested item with list\",\n                                dmc.List(\n                                    withPadding=True,\n                                    listStyleType=\"disc\",\n                                    children=[\n                                        dmc.ListItem(\"Even more nested\"),\n                                        dmc.ListItem(\"Even more nested\"),\n                                    ],\n                                ),\n                            ]\n                        ),\n                        dmc.ListItem(\"Nested Item\"),\n                    ],\n                ),\n            ]\n        ),\n        dmc.ListItem(\"First order item\"),\n    ]\n)\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n| Name        | Static selector           | Description                                           |\n|:------------|:--------------------------|:------------------------------------------------------|\n| root        | .mantine-List-root        | Root element                                          |\n| item        | .mantine-List-item        | ListItem root element                                 |\n| itemIcon    | .mantine-List-itemIcon    | ListItem icon                                         |\n| itemLabel   | .mantine-List-itemLabel   | ListItem content                                      |\n| itemWrapper | .mantine-List-itemWrapper | ListItem wrapper element, container, icon and content |\n\n\n### Keyword Arguments\n#### List\n\n- children (a list of or a singular dash component, string or number; optional):\n    `List.Item` components only.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- center (boolean; optional):\n    Determines whether items must be centered with their icon, `False`\n    by default.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- icon (a list of or a singular dash component, string or number; optional):\n    Icon that replaces list item dot.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- listStyleType (optional):\n    Controls `list-style-type`, by default inferred from `type`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- size (a value equal to: 'xs', 'sm', 'md', 'lg', 'xl'; optional):\n    Controls `font-size` and `line-height`, `'md'` by default.\n\n- spacing (number; optional):\n    Key of `theme.spacing` or any valid CSS value to set spacing\n    between items, `0` by default.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- type (a value equal to: 'ordered', 'unordered'; optional):\n    List type: `ol` or `ul`, `'unordered'` by default.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withPadding (boolean; optional):\n    Determines whether list items should be offset with padding,\n    `False` by default.\n#### ListItem\n\n- children (a list of or a singular dash component, string or number; optional):\n    Content.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- icon (a list of or a singular dash component, string or number; optional):\n    Icon to replace item bullet.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`."
  },
  {
    "name": "Mark",
    "description": "Use the Mark component to highlight part of the text.",
    "endpoint": "/components/mark",
    "package": "dash_mantine_components",
    "category": "Typography",
    "content": "\n\n## Mark  \nUse the Mark component to highlight part of the text.  \nCategory: Typography  \n\n### Introduction\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Text(\n    [\n        \"Thanks for checking out \",\n        dmc.Mark(\"Dash Mantine Components.\"),\n        \" You are awesome!\",\n    ]\n)\n```\n### Change color\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Text(\n    [\"Highlight \", dmc.Mark(\"this section\", color=\"cyan\"), \" of the text.\"]\n)\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n| Name        | Static selector    | Description                                      |\n|:------------|:-------------------|:-------------------------------------------------|\n| root        | .mantine-Mark-root | Root element                                     |\n\n\n### Keyword Arguments\n#### Mark\n\n- children (string; optional):\n    Content.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- color (optional):\n    Key of `theme.colors` or any valid CSS color, `yellow` by default.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`."
  },
  {
    "name": "Table",
    "description": "Use the Table component to display tables with Mantine's theme styles. An alternative to html.Table",
    "endpoint": "/components/table",
    "package": "dash_mantine_components",
    "category": "Typography",
    "content": "\n\n## Table  \nUse the Table component to display tables with Mantine's theme styles. An alternative to html.Table  \nCategory: Typography  \n\n> Looking for advanced table capabilities? [Dash AG Grid](/dash-ag-grid) pairs well with DMC and supports editing, sorting, filtering, selecting, conditional formatting and much more.\n\n### Simple Example\n\nUse Table component to add Mantine styled tables in your app. use `dmc.Table` and associated components as\ndrop-in replacements for `html.Table` and associated components respectively.\n\n```python\nimport dash_mantine_components as dmc\n\nelements = [\n    {\"position\": 6, \"mass\": 12.011, \"symbol\": \"C\", \"name\": \"Carbon\"},\n    {\"position\": 7, \"mass\": 14.007, \"symbol\": \"N\", \"name\": \"Nitrogen\"},\n    {\"position\": 39, \"mass\": 88.906, \"symbol\": \"Y\", \"name\": \"Yttrium\"},\n    {\"position\": 56, \"mass\": 137.33, \"symbol\": \"Ba\", \"name\": \"Barium\"},\n    {\"position\": 58, \"mass\": 140.12, \"symbol\": \"Ce\", \"name\": \"Cerium\"},\n]\n\nrows = [\n    dmc.TableTr(\n        [\n            dmc.TableTd(element[\"position\"]),\n            dmc.TableTd(element[\"name\"]),\n            dmc.TableTd(element[\"symbol\"]),\n            dmc.TableTd(element[\"mass\"]),\n        ]\n    )\n    for element in elements\n]\n\nhead = dmc.TableThead(\n    dmc.TableTr(\n        [\n            dmc.TableTh(\"Element Position\"),\n            dmc.TableTh(\"Element Name\"),\n            dmc.TableTh(\"Symbol\"),\n            dmc.TableTh(\"Atomic Mass\"),\n        ]\n    )\n)\nbody = dmc.TableTbody(rows)\ncaption = dmc.TableCaption(\"Some elements from periodic table\")\n\ncomponent = dmc.Table([head, body, caption])\n```\n### data prop\n\nYou can use `data` prop to automatically generate table rows from raw data. \n`data` prop accepts an object with the following properties: `head`, `foot`, `body`, `caption`:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Table(\n    data={\n        \"caption\": \"Some elements from periodic table\",\n        \"head\": [\"Element position\", \"Atomic mass\", \"Symbol\", \"Element name\"],\n        \"body\": [\n            [6, 12.011, \"C\", \"Carbon\"],\n            [7, 14.007, \"N\", \"Nitrogen\"],\n            [39, 88.906, \"Y\", \"Yttrium\"],\n            [56, 137.33, \"Ba\", \"Barium\"],\n            [58, 140.12, \"Ce\", \"Cerium\"],\n        ],\n    }\n)\n```\n### Spacing\n\nTo control spacing use `horizontalSpacing` and `verticalSpacing` props. Both props support spacing from Mantine's theme\nand number values to set cell padding in px.\n\n\n### Striped and Rows Hover\n\n\n### Scroll container\nTo prevent viewport overflow wrap `Table` with `TableScrollContainer`. The component accepts `minWidth` prop which sets\nminimum width below which table will be scrollable.\n\nBy default, `TableScrollContainer` uses `ScrollArea`, you can change it to native scrollbars by setting `type=\"native\"`\n\nYou can also set `maxHeight` prop on `TableScrollContainer` to limit table height\n\n\n```python\nimport dash_mantine_components as dmc\nimport random\n\nrows = [\n    [\n        i + 1,\n        f\"S-{1000 + i}\",\n        round(random.uniform(15, 30), 1),   # Temperature °C\n        round(random.uniform(30, 70), 1),   # Humidity %\n    ]\n    for i in range(50)\n]\n\ncomponent = dmc.TableScrollContainer(\n    dmc.Table(\n        data={\n            \"caption\": \"Synthetic Sensor Readings\",\n            \"head\": [\"#\", \"Sensor ID\", \"Temperature (°C)\", \"Humidity (%)\"],\n            \"body\": rows,\n        },\n        striped=True,\n        highlightOnHover=True,\n        withTableBorder=True,\n    ),\n    maxHeight=300,\n    minWidth=600,\n    type=\"scrollarea\",\n)\n```\n### Vertical variant\nSet `variant=\"vertical\"` to render table with vertical layout:\n\n\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Table(\n    withTableBorder=True,\n    layout=\"fixed\",\n    variant=\"vertical\",\n    children=[\n        dmc.TableTbody([\n            dmc.TableTr([\n                dmc.TableTh(\"Epic name\", w=160),\n                dmc.TableTd(\"7.x migration\"),\n            ]),\n            dmc.TableTr([\n                dmc.TableTh(\"Status\"),\n                dmc.TableTd(\"Open\"),\n            ]),\n            dmc.TableTr([\n                dmc.TableTh(\"Total issues\"),\n                dmc.TableTd(\"135\"),\n            ]),\n            dmc.TableTr([\n                dmc.TableTh(\"Total story points\"),\n                dmc.TableTd(\"874\"),\n            ]),\n            dmc.TableTr([\n                dmc.TableTh(\"Last updated at\"),\n                dmc.TableTd(\"September 26, 2024 17:41:26\"),\n            ]),\n        ])\n    ]\n)\n```\n### tableProps\n\n\nUse `tableProps` to pass additional [HTML attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/table) \nto the underlying elements of a dmc.Table, such as `<td>`, `<tr>`, or `<th>`. This is useful when you need to control\nlayout behavior like `rowSpan`, `colSpan`.\n\nYou can pass tableProps to components like:\n```python\ndmc.TableTd(\"Monday\", tableProps={\"rowSpan\": 2})\n```\n\nThis example also shows how to include other dash components in table cells.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Table(\n    withTableBorder=True,\n    withColumnBorders=True,\n\n    children=[\n        dmc.TableThead(\n            dmc.TableTr([\n                dmc.TableTh(\"Day\"),\n                dmc.TableTh(\"Time\"),\n                dmc.TableTh(\"Topic\"),\n                dmc.TableTh(\"Action\"),\n            ])\n        ),\n        dmc.TableTbody([\n            dmc.TableTr([\n                dmc.TableTd(\"Monday\", tableProps={\"rowSpan\": 2}),\n                dmc.TableTd(\"9:00 - 10:00\"),\n                dmc.TableTd(\"Building Interactive Dashboards with Dash\"),\n                dmc.TableTd(dmc.Button(\"Details\", size=\"xs\", variant=\"light\")),\n            ]),\n            dmc.TableTr([\n                dmc.TableTd(\"10:15 - 11:00\"),\n                dmc.TableTd(\"Advanced Callbacks and App Structure\"),\n                dmc.TableTd(dmc.Button(\"Details\", size=\"xs\", variant=\"light\")),\n            ]),\n            dmc.TableTr([\n                dmc.TableTd(\"Tuesday\", tableProps={\"rowSpan\": 2}),\n                dmc.TableTd(\"9:00 - 10:00\"),\n                dmc.TableTd(\"Data Visualization with Plotly Express\"),\n                dmc.TableTd(dmc.Button(\"Details\", size=\"xs\", variant=\"light\")),\n            ]),\n            dmc.TableTr([\n                dmc.TableTd(\"10:15 - 11:00\"),\n                dmc.TableTd(\"Deploying Dash Apps to the Web\"),\n                dmc.TableTd(dmc.Button(\"Details\", size=\"xs\", variant=\"light\")),\n            ]),\n        ])\n    ]\n)\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n#### Selectors\n\n| Selector  | Static selector             | Description |\n|-----------|-----------------------------|-------------|\n| `table`   | `.mantine-Table-table`      | Root table element (Table component) |\n| `thead`   | `.mantine-Table-thead`      | `<thead>` element (Table.Thead component) |\n| `tbody`   | `.mantine-Table-tbody`      | `<tbody>` element (Table.Tbody component) |\n| `tfoot`   | `.mantine-Table-tfoot`      | `<tfoot>` element (Table.Tfoot component) |\n| `tr`      | `.mantine-Table-tr`         | `<tr>` element (Table.Tr component) |\n| `th`      | `.mantine-Table-th`         | `<th>` element (Table.Th component) |\n| `td`      | `.mantine-Table-td`         | `<td>` element (Table.Td component) |\n| `caption` | `.mantine-Table-caption`    | `<caption>` element (Table.Caption component) |\n\n#### CSS Variables\n\n| Selector | Variable | Description |\n|----------|----------|-------------|\n| `table`  | `--table-border-color` | Controls border color of all elements inside table |\n| `table`  | `--table-layout` | Controls `table-layout` of the table element, `auto` by default |\n| `table`  | `--table-caption-side` | Controls `caption-side` of the table element, `bottom` by default |\n| `table`  | `--table-horizontal-spacing` | Controls `padding-left` and `padding-right` of Table.Th and Table.Td elements |\n| `table`  | `--table-vertical-spacing` | Controls `padding-top` and `padding-bottom` of Table.Td and Table.Th elements |\n| `table`  | `--table-striped-color` | Controls `background-color` of even/odd Table.Tr elements |\n| `table`  | `--table-highlight-on-hover-color` | Controls `background-color` of Table.Tr elements when hovered |\n| `table`  | `--table-sticky-header-offset` | Controls top offset of sticky header |\n\n#### Data Attributes\n\n| Selector | Attribute | Condition | Value |\n|----------|-----------|------------|-------|\n| `table`  | `data-with-table-border` | `withTableBorder` prop is set on Table component | – |\n| `th`, `td` | `data-with-column-border` | `withColumnsBorder` prop is set on Table component | – |\n| `tr`      | `data-with-row-border` | `withRowsBorder` prop is set on Table component | – |\n| `tr`      | `data-striped` | `striped` prop is set on Table component | `odd` \\| `even` |\n| `tr`      | `data-hover` | `highlightOnHover` prop is set on Table component | – |\n| `tr`      | `data-size` | – | Value of `captionSize` prop on Table component |\n\n\n### Keyword Arguments\n#### Table\n\n- children (a list of or a singular dash component, string or number; optional):\n    Headers, rows and footer.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- borderColor (optional):\n    Color of table borders, key of `theme.colors` or any valid CSS\n    color.\n\n- captionSide (a value equal to: 'top', 'bottom'; optional):\n    Determines on which side `Table.Caption` is displayed, `bottom` by\n    default.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data (dict; optional):\n    Data that should be used to generate table, ignored if `children`\n    prop is set.\n\n    `data` is a dict with keys:\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- highlightOnHover (boolean; optional):\n    Determines whether table rows background should change to\n    `highlightOnHoverColor` when hovered, `False` by default.\n\n- highlightOnHoverColor (optional):\n    Background color of table rows when hovered, key of `theme.colors`\n    or any valid CSS color.\n\n- horizontalSpacing (number; optional):\n    Horizontal cells spacing, key of `theme.spacing` or any valid CSS\n    value for padding, numbers are converted to rem, default value is\n    `xs`.\n\n- layout (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'auto', 'fixed'; optional):\n    Value of `table-layout` style, `auto` by default.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- stickyHeader (boolean; optional):\n    Determines whether `Table.Thead` should be sticky, `False` by\n    default.\n\n- stickyHeaderOffset (string | number; optional):\n    Offset from top at which `Table.Thead` should become sticky, `0`\n    by default.\n\n- striped (boolean; optional):\n    Determines whether every odd/even row background should be changed\n    to `strippedColor`, if set to `True`, then `odd` value will be\n    used, `False` by default.\n\n- stripedColor (optional):\n    Background color of striped rows, key of `theme.colors` or any\n    valid CSS color.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- tabularNums (boolean; optional):\n    Determines whether `font-variant-numeric: tabular-nums` style\n    should be set, `False` by default.\n\n- variant (a value equal to: 'default', 'vertical'; optional):\n    variant 'default' | 'vertical'.\n\n- verticalSpacing (number; optional):\n    Vertical cells spacing, key of `theme.spacing` or any valid CSS\n    value for padding, numbers are converted to rem, default value is\n    `xs`.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`.\n\n- withColumnBorders (boolean; optional):\n    Determines whether the table should have borders between columns,\n    `False` by default.\n\n- withRowBorders (boolean; optional):\n    Determines whether the table should have borders between rows,\n    `True` by default.\n\n- withTableBorder (boolean; optional):\n    Determines whether the table should have outer border, `False` by\n    default.\n#### TableScrollContainer\n\n- children (a list of or a singular dash component, string or number; optional):\n    Content rendered inside the scroll container.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- maxHeight (string | number; optional):\n    `max-height` of the `Table` at which it should become scrollable.\n\n- minWidth (string | number; required):\n    `min-width` of the `Table` at which it should become scrollable.\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- scrollAreaProps (dict; optional):\n    Props passed down to `ScrollArea` component, not applicable with\n    `type=\"native\"`.\n\n    `scrollAreaProps` is a dict with keys:\n\n- tabIndex (number; optional):\n    tab-index.\n\n- type (a value equal to: 'native', 'scrollarea'; optional):\n    Type of the scroll container, `native` to use native scrollbars,\n    `scrollarea` to use `ScrollArea` component, `scrollarea` by\n    default.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`."
  },
  {
    "name": "Text",
    "description": "Use the Text component to display text and links with Mantine's theme styles.",
    "endpoint": "/components/text",
    "package": "dash_mantine_components",
    "category": "Typography",
    "content": "\n\n## Text  \nUse the Text component to display text and links with Mantine's theme styles.  \nCategory: Typography  \n\n### Usage\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html\n\ncomponent = html.Div(\n    [\n        dmc.Text(\"Extra small text\", size=\"xs\"),\n        dmc.Text(\"Small text\", size=\"sm\"),\n        dmc.Text(\"Default text\", size=\"md\"),\n        dmc.Text(\"Large text\", size=\"lg\"),\n        dmc.Text(\"Extra large text\", size=\"xl\"),\n        dmc.Text(\"Semi bold\", fw=500),\n        dmc.Text(\"Bold\", fw=700),\n        dmc.Text(\"Underlined\", td=\"underline\"),\n        dmc.Text(\"Red text\", c=\"red\"),\n        dmc.Text(\"Blue text\", c=\"blue\"),\n        dmc.Text(\"Gray text\", c=\"gray\"),\n        dmc.Text(\"Uppercase\", tt=\"uppercase\"),\n        dmc.Text(\"capitalized text\", tt=\"capitalize\"),\n        dmc.Text(\"Aligned to center\", ta=\"center\"),\n        dmc.Text(\"Aligned to right\", ta=\"right\"),\n    ]\n)\n```\n### Dimmed Text\n\nText supports special dimmed value in `color` prop. It sets color to theme.colors.dark[2] in dark theme and to \ntheme.colors.gray[6] in light.\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Text(\"Dimmed text\", c=\"dimmed\")\n```\n### Gradient\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Center(\n    children=[\n        dmc.Text(\n            \"Indigo cyan gradient\",\n            variant=\"gradient\",\n            gradient={\"from\": \"red\", \"to\": \"yellow\", \"deg\": 45},\n            style={\"fontSize\": 40},\n        )\n    ]\n)\n```\n### Truncate\n\nSet `truncate` prop to add `text-overflow: ellipsis styles`:\n\n```python\nimport dash_mantine_components as dmc\n\ncontent = \"\"\"\nLorem ipsum dolor sit amet consectetur adipisicing elit. Unde provident eos fugiat id\nnecessitatibus magni ducimus molestias. Placeat, consequatur. Quisquam, quae magnam\nperspiciatis excepturi iste sint itaque sunt laborum. Nihil?\n\"\"\"\n\ncomponent = dmc.Box(\n    [\n        dmc.Title(\"truncate='end'\", order=5),\n        dmc.Text(content, truncate=\"end\"),\n        \n        dmc.Title(\"truncate='start'\", order=5, mt=\"lg\"),\n        dmc.Text(content, truncate=\"start\"),\n    ],\n    w=300\n)\n```\n### Lineclamp\n\nSpecify maximum number of lines with `lineClamp` prop. This option uses `-webkit-line-clamp` CSS property ([caniuse](https://caniuse.com/css-line-clamp)).\nNote that `padding-bottom` cannot be set on text element:\n\n### Inherit styles\n\n`Text` always applies `font-size`, `font-family` and `line-height` styles, but in some cases this is not a desired \nbehavior. To force `Text` to inherit parent styles set `inherit` prop. For example, highlight part of `Title`:\n\n```python\nimport dash_mantine_components as dmc\n\ncomponent = dmc.Title(\n    children = [\n        \"Title in which you want to \",\n        dmc.Text(\"highlight\", span=True, c=\"blue\", inherit=True),\n        \" something.\"\n    ]\n)\n```\n### span prop\nThe root element of `Text` is an HTML `p` component.  To change it to an HTML `span` set the `span` prop to True.\n\n\n```python\nimport dash_mantine_components as dmc\n\n\ncomponent = dmc.Box([\n    dmc.Text(\"These two Text components are inline elements \", span=True, bd=\"1px solid\"),\n    dmc.Text(\"and only take up as much space as needed\", span=True,  bd=\"1px solid\"),\n\n    dmc.Divider(my=\"lg\"),\n\n    dmc.Text(\"These two Text components are block elements\",  bd=\"1px solid\"),\n    dmc.Text(\"and take up the full width of their container.\",  bd=\"1px solid\")\n])\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n#### Text Selectors\n\n| Selector | Static selector       | Description     |\n|----------|-----------------------|-----------------|\n| root     | .mantine-Text-root    | Root element    |\n\n#### Text CSS Variables\n\n| Selector | Variable               | Description                               |\n|----------|------------------------|-------------------------------------------|\n| root     | --text-fz              | Controls font-size property               |\n|          | --text-lh              | Controls line-height property             |\n|          | --text-gradient        | Text fill gradient                        |\n|          | --text-line-clamp      | Number of lines that should be visible    |\n\n#### Text Data Attributes\n\n| Selector | Attribute       | Condition                          | Value                 |\n|----------|----------------|------------------------------------|-----------------------|\n| root     | data-truncate  | truncate prop is set               | Value of truncate prop |\n| root     | data-line-clamp | lineClamp prop is a number         | –                     |\n| root     | data-inline    | inline prop is set                 | –                     |\n| root     | data-inherit   | inherit prop is set                | –                     |\n\n\n\n\n### Keyword Arguments\n#### Text\n\n- children (a list of or a singular dash component, string or number; optional):\n    Content.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- gradient (dict; optional):\n    Gradient configuration, ignored when `variant` is not `gradient`,\n    `theme.defaultGradient` by default.\n\n    `gradient` is a dict with keys:\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- inherit (boolean; optional):\n    Determines whether font properties should be inherited from the\n    parent, `False` by default.\n\n- inline (boolean; optional):\n    Sets `line-height` to 1 for centering, `False` by default.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- lineClamp (number; optional):\n    Number of lines after which Text will be truncated.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- size (optional):\n    Controls `font-size` and `line-height`, `'md'` by default.\n\n- span (boolean; optional):\n    Shorthand for `component=\"span\"`, `False` by default, default\n    root element is `p`.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- truncate (boolean; optional):\n    Side on which Text must be truncated, if `True`, text is truncated\n    from the start.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`."
  },
  {
    "name": "Title",
    "description": "Use the Title component to render h1-h6 headings.",
    "endpoint": "/components/title",
    "package": "dash_mantine_components",
    "category": "Typography",
    "content": "\n\n## Title  \nUse the Title component to render h1-h6 headings.  \nCategory: Typography  \n\n### Simple Example\n\nUse Title component to render h1-h6 headings with Mantine theme styles. By default, Title has no margins and paddings.\nPass the `order` prop to render specific element (h1-h6), default order is 1.\n\n```python\nimport dash_mantine_components as dmc\nfrom dash import html\n\ncomponent = html.Div(\n    [\n        dmc.Title(f\"This is h1 title\", order=1),\n        dmc.Title(f\"This is h2 title\", order=2),\n        dmc.Title(f\"This is h3 title\", order=3),\n        dmc.Title(f\"This is h4 title\", order=4),\n        dmc.Title(f\"This is h5 title\", order=5),\n        dmc.Title(f\"This is h6 title\", order=6),\n    ]\n)\n```\n### Styles API\n\n\nThis component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.\n\n\n| Name        | Static selector     | Description                                      |\n|:------------|:--------------------|:-------------------------------------------------|\n| root        | .mantine-Title-root | Root element                                     |\n\n\n### Keyword Arguments\n#### Title\n\n- children (a list of or a singular dash component, string or number; optional):\n    Content.\n\n- id (string; optional):\n    Unique ID to identify this component in Dash callbacks.\n\n- aria-* (string; optional):\n    Wild card aria attributes.\n\n- attributes (boolean | number | string | dict | list; optional):\n    Passes attributes to inner elements of a component.  See Styles\n    API docs.\n\n- className (string; optional):\n    Class added to the root element, if applicable.\n\n- classNames (dict; optional):\n    Adds custom CSS class names to inner elements of a component.  See\n    Styles API docs.\n\n- darkHidden (boolean; optional):\n    Determines whether component should be hidden in dark color scheme\n    with `display: none`.\n\n- data-* (string; optional):\n    Wild card data attributes.\n\n- hiddenFrom (string; optional):\n    Breakpoint above which the component is hidden with `display:\n    none`.\n\n- lightHidden (boolean; optional):\n    Determines whether component should be hidden in light color\n    scheme with `display: none`.\n\n- lineClamp (number; optional):\n    Number of lines after which Text will be truncated.\n\n- loading_state (dict; optional):\n    Object that holds the loading state object coming from\n    dash-renderer. For use with dash<3.\n\n    `loading_state` is a dict with keys:\n\n- mod (string | dict | list of string | dicts; optional):\n    Element modifiers transformed into `data-` attributes. For\n    example: \"xl\" or {\"data-size\": \"xl\"}. Can also be a list of\n    strings or dicts for multiple modifiers. Falsy values are removed.\n\n- order (a value equal to: 1, 2, 3, 4, 5, 6; optional):\n    Determines which tag will be used (h1-h6), controls `font-size`\n    style if `size` prop is not set, `1` by default.\n\n- size (string | number; optional):\n    Changes title size, if not set, then size is controlled by `order`\n    prop.\n\n- styles (boolean | number | string | dict | list; optional):\n    Adds inline styles directly to inner elements of a component.  See\n    Styles API docs.\n\n- tabIndex (number; optional):\n    tab-index.\n\n- textWrap (a value equal to: 'nowrap', 'wrap', 'balance', 'pretty', 'stable'; optional):\n    Controls `text-wrap` property, `'wrap'` by default.\n\n- variant (string; optional):\n    variant.\n\n- visibleFrom (string; optional):\n    Breakpoint below which the component is hidden with `display:\n    none`."
  },
  {
    "name": "TypographyStylesProvider",
    "description": "Styles provider for html content",
    "endpoint": "/components/typographystylesprovider",
    "package": "dash_mantine_components",
    "category": "Typography",
    "content": "\n\n## TypographyStylesProvider  \nStyles provider for html content  \nCategory: Typography  \n\n### Basic usage\n\nBy default, Mantine does not include global typography styles. To apply consistent styling to your HTML content, wrap it in `TypographyStylesProvider`.  \n\n```python\ndmc.TypographyStylesProvider(\n    html.H1(\"html components styled with a Mantine theme\")\n)\n```\n\nThe styles applied to `TypographyStylesProvider` children can be found in the [Mantine GitHub repository](https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/core/src/components/Typography/Typography.module.css).  \n\n### Included Styles\n`TypographyStylesProvider` provides default styling for:  \n- Headings (`h1`-`h6`)  \n- Paragraphs (`p`)  \n- Lists (`ul`, `ol`)  \n- Blockquotes (`blockquote`)  \n- Tables (`table`)  \n- Links (`a`)  \n- Images (`img`)  \n- Horizontal rules (`hr`)  \n- Keyboard inputs (`kbd`)  \n- Code blocks (`code`, `pre`)  \n\n### Using with Dash html Components\n\nYou can use `TypographyStylesProvider` to apply Mantine's typography styles to Dash’s html components. Below is an example of styling a table:  \n\n```python\nfrom dash import  html\nimport dash_mantine_components as dmc\nimport pandas as pd\n\ndf = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/solar.csv')\n\ndef generate_table(dataframe, max_rows=10):\n    return html.Table([\n        html.Thead(\n            html.Tr([html.Th(col) for col in dataframe.columns])\n        ),\n        html.Tbody([\n            html.Tr([\n                html.Td(dataframe.iloc[i][col]) for col in dataframe.columns\n            ]) for i in range(min(len(dataframe), max_rows))\n        ])\n    ])\n\ncomponent = html.Div(\n    [\n        html.Div([\n            html.H4(\"Example without TypographyStylesProvider\"),\n            generate_table(df),\n        ], style={\"marginBottom\": 36}),\n\n        dmc.TypographyStylesProvider([\n            html.H4(\"Example with TypographyStylesProvider\"),\n            generate_table(df),\n        ]),\n    ]\n)\n```\n### Using with dcc.Markdown\n\nIf you are rendering content from the [RichTextEditor](/components/richtexteditor) in `dcc.Markdown`, you can wrap it in `TypographyStylesProvider` to ensure it adopts Mantine’s typography styles.  \n\n```python\nfrom dash import  dcc\nimport dash_mantine_components as dmc\n\n\n# Content from the RichTextEditor example.\ncontent = \"\"\"<h2 style=\"text-align: center;\">Welcome to Mantine rich text editor</h2><p><code>RichTextEditor</code> component focuses on usability and is designed to be as simple as possible to bring a familiar editing experience to regular users. <code>RichTextEditor</code> is based on <a href=\"https://tiptap.dev/\" rel=\"noopener noreferrer\" target=\"_blank\">Tiptap.dev</a> and supports all of its features:</p><ul><li>General text formatting: <strong>bold</strong>, <em>italic</em>, <u>underline</u>, <s>strike-through</s> </li><li>Headings (h1-h6)</li><li>Sub and super scripts (<sup>&lt;sup /&gt;</sup> and <sub>&lt;sub /&gt;</sub> tags)</li><li>Ordered and bullet lists</li><li>Text align&nbsp;</li><li>And all <a href=\"https://tiptap.dev/extensions\" target=\"_blank\" rel=\"noopener noreferrer\">other extensions</a></li></ul>\"\"\"\n\ncomponent = dmc.TypographyStylesProvider(\n    dcc.Markdown(content, dangerously_allow_html=True, id=\"default\"),\n)\n```"
  }
]