# Homarr documentation (/docs)

## Install or upgrade [#install-or-upgrade]

<Cards>
<Card title="Install Homarr" href="/docs/getting-started/installation">
Start with Docker Compose, Kubernetes, or your hosting platform.
</Card>

<Card title="Update Homarr" href="/docs/getting-started/installation/docker#update">
Update your Docker installation while keeping its data and configuration.
</Card>
</Cards>

New to Homarr? [Learn how boards, apps, integrations, and widgets fit together](/docs/getting-started), then
[complete your first-board setup](/docs/getting-started/after-the-installation).

## Configure your dashboard [#configure-your-dashboard]

| I want to…                          | Guide                                           |
| ----------------------------------- | ----------------------------------------------- |
| Add links to my services            | [Apps and bookmarks](/docs/management/apps)     |
| Arrange and share a dashboard       | [Boards](/docs/management/boards)               |
| Connect a service to Homarr         | [Find an integration](/docs/integrations)       |
| Display service data on a board     | [Choose a widget](/docs/widgets)                |
| Install a community widget or style | [Use the Workshop](/docs/workshop)              |
| Manage access for other people      | [Users and permissions](/docs/management/users) |

## Operate your installation [#operate-your-installation]

* [Environment variables](/docs/advanced/environment-variables): deployment settings and defaults.
* [Single sign-on](/docs/advanced/single-sign-on): credentials, LDAP, and OIDC configuration.
* [Scheduled tasks](/docs/management/tasks): background work and task status.
* [Get help](/docs/community): support channels and ways to contribute.

## Extend Homarr [#extend-homarr]

[Build a Custom Widget](/docs/management/custom-widgets), [connect an AI client with MCP](/docs/management/mcp),
or use the [HTTP API reference](/api-reference). For changes to Homarr itself, follow the
[development setup](/docs/advanced/development/getting-started).

# Advanced configuration (/docs/advanced)

These guides cover changes that affect how Homarr is deployed, secured, operated, or extended.

## Deploy and secure [#deploy-and-secure]

<Cards>
<Card title="Environment variables" href="/docs/advanced/environment-variables">
Configure Homarr at deployment time.
</Card>

<Card title="Single sign-on" href="/docs/advanced/single-sign-on">
Connect an external identity provider.
</Card>

<Card title="Proxies and certificates" href="/docs/advanced/proxy">
Run Homarr behind a reverse proxy.
</Card>

<Card title="Run as a different user" href="/docs/advanced/running-as-different-user">
Change the user and group used by the container.
</Card>
</Cards>

## Customize [#customize]

<Cards>
<Card title="Custom styling" href="/docs/advanced/styling">
Apply custom CSS to Homarr.
</Card>

<Card title="Icons" href="/docs/advanced/icons">
Configure icon sources and behavior.
</Card>

<Card title="Keyboard shortcuts" href="/docs/advanced/keyboard-shortcuts">
Navigate and operate Homarr with the keyboard.
</Card>
</Cards>

## Develop and automate [#develop-and-automate]

<Cards>
<Card title="Command line interface" href="/docs/advanced/command-line">
Use administrative commands from the terminal.
</Card>

<Card title="Developer guides" href="/docs/advanced/development/getting-started">
Set up a development environment and contribute code.
</Card>
</Cards>

# Move from MySQL to SQLite (/docs/advanced/mysql-to-sqlite)

Homarr v2 supports SQLite (the default) and PostgreSQL. MySQL installations must convert before upgrading to v2.

The standalone converter is tested against the **Homarr v1.77.1 database schema** and writes its corresponding SQLite database. Homarr v2 applies its normal migrations when it first opens that file. The converter does not modify the source database.

## Before converting [#before-converting]

1. Back up the MySQL database, `/appdata`, your deployment configuration, and `SECRET_ENCRYPTION_KEY`. Keep the previous Homarr image available for rollback.
2. Upgrade to the latest stable v1 release (**v1.77.1** at the tested baseline) first and let its migrations finish successfully. Back up that database before continuing.
3. Stop every Homarr instance that writes to this database. Leave MySQL running and keep Homarr stopped throughout conversion and cutover.

The converter validates the schema and migration journal against v1.77.1; it does not identify the application binary version. Older releases with identical schemas are compatible. Different schemas, incomplete migrations, and existing output files are rejected.

## Convert [#convert]

From a checkout containing `tools/mysql-to-sqlite`, build the converter:

```sh
docker build -t homarr-mysql-to-sqlite tools/mysql-to-sqlite
mkdir -p converted
```

Create `mysql-conversion.env` with credentials for the source database:

```dotenv
MYSQL_HOST=mysql.example.com
MYSQL_PORT=3306
MYSQL_USER=homarr
MYSQL_PASSWORD=replace-with-your-password
MYSQL_DATABASE=homarr
```

`MYSQL_PORT` defaults to `3306`. Use a host reachable from the converter container; `localhost` refers to the container itself. Keep this credentials file out of version control.

Run the converter after stopping Homarr:

```sh
docker run --rm --user "$(id -u):$(id -g)" --env-file mysql-conversion.env \
  -v "$(pwd)/converted:/output" \
  homarr-mysql-to-sqlite --output /output/db.sqlite --homarr-stopped
```

Running as your user keeps the output file readable by you. The required `--homarr-stopped` flag confirms that you stopped Homarr; it does not stop your deployment. Wait for the converter to exit successfully before using `converted/db.sqlite`.

For a TLS connection, add `MYSQL_SSL_CA=/certs/mysql-ca.pem` to the env file and mount the PEM certificate with `-v "$(pwd)/mysql-ca.pem:/certs/mysql-ca.pem:ro"`. The certificate file must be readable by the container user.

## Start Homarr v2 [#start-homarr-v2]

1. Keep a separate copy of the converted file before the first v2 startup.
2. Place `db.sqlite` at `/appdata/db/db.sqlite` in the appdata volume used by Homarr. Ensure the Homarr process can write to the file and its directory.
3. Set `DB_DRIVER=better-sqlite3` and `DB_URL=/appdata/db/db.sqlite`. Remove the previous MySQL connection settings; if you explicitly set `DB_DIALECT`, change it to `sqlite`.
4. Preserve the original `/appdata` files and &#x2A;*the same `SECRET_ENCRYPTION_KEY`**. The converter copies encrypted values without re-encrypting them; a different key will make those secrets unreadable.
5. Start Homarr v2 and wait for its database migrations to finish. Check the startup logs, sign in, and verify your boards, users, integrations, and uploaded files.

The converter output is a raw SQLite database. Do not upload it to the backup ZIP import page.

## Roll back [#roll-back]

Stop Homarr v2, then restore your previous deployment configuration, image, appdata backup, and encryption key, pointing it at the preserved MySQL database. Do not open the v2 SQLite database with the older Homarr image.

Changes made after switching to SQLite are not synchronized back to MySQL. Keep the original database and backups until you have verified the new installation.

# Donate (/docs/community/donate)

Donations fund Homarr's development infrastructure and community services.

Support the project through [OpenCollective](https://opencollective.com/homarr). For sponsorships or donated services,
use the private contact listed on [Get in touch](/docs/community/get-in-touch).

# Frequently Asked Questions (/docs/community/faq)

## Can Homarr run on a Raspberry Pi? [#can-homarr-run-on-a-raspberry-pi]

Yes, when the device uses a supported `linux/arm64` operating system. `linux/arm/v7` is not supported. See
[Prerequisites](/docs/getting-started).

## Can I use custom app icons? [#can-i-use-custom-app-icons]

Yes. Use a direct image URL, one of Homarr's icon sources, or upload an image. See [Icons](/docs/advanced/icons).

## Can I create widgets? [#can-i-create-widgets]

Yes. [Custom Widgets](/docs/management/custom-widgets) use server-side API requests and safe JSX. They can be written in
the workbench or created with an MCP-connected agent.

## Can Homarr be exposed to the internet? [#can-homarr-be-exposed-to-the-internet]

Homarr supports authenticated and public deployments. Terminate HTTPS at a reverse proxy, keep Homarr updated, and grant
public board access only when anonymous viewing is intended. See [Board access control](/docs/management/boards#access-control)
and [Single sign-on](/docs/advanced/single-sign-on).

## Where are the logs? [#where-are-the-logs]

Use **Management → Tools → Logs** for retained and live application logs. Container startup failures and older events are
available through the deployment platform, for example `docker container logs homarr`.

Use the browser developer console only for client-side failures. Review logs before sharing them because URLs and other
deployment details may be present.

## Why can Homarr not reach a service behind Gluetun? [#why-can-homarr-not-reach-a-service-behind-gluetun]

Gluetun's firewall blocks traffic that is not explicitly allowed. Configure its
[`FIREWALL_OUTBOUND_SUBNETS`](https://github.com/qdm12/gluetun-wiki/blob/main/setup/options/firewall.md) for the relevant
LAN or Docker subnet, and use an address reachable from the Homarr container.

## Where do I report a bug or request a feature? [#where-do-i-report-a-bug-or-request-a-feature]

Use the [GitHub issue templates](https://github.com/homarr-labs/homarr/issues/new/choose). For community support, see
[Get in touch](/docs/community/get-in-touch).

## Can Homarr be used commercially? [#can-homarr-be-used-commercially]

Yes. Homarr is licensed under the [Apache License 2.0](/docs/community/license). Commercial users can support development
through [OpenCollective](/docs/community/donate).

# Get in touch (/docs/community/get-in-touch)

## GitHub [#github]

Use the [issue templates](https://github.com/homarr-labs/homarr/issues/new/choose) for bugs and feature requests.

## Discord [#discord]

Use the [Homarr Discord server](https://discord.gg/aCsmEV5RgA) for community support, release discussion, and dashboard
showcases.

## Email [#email]

Use [homarr-labs@proton.me](mailto\:homarr-labs@proton.me) for security reports, sponsorships, and other private matters.
Bug reports and feature requests belong on GitHub.

# Community (/docs/community)

* [Frequently asked questions](/docs/community/faq): resolve common setup and operation issues.
* [Get in touch](/docs/community/get-in-touch): choose the right support or discussion channel.
* [Translations](/docs/community/translations): improve Homarr in your language.
* [Donate](/docs/community/donate): support ongoing development.
* [License](/docs/community/license): understand how Homarr is licensed.

# License (/docs/community/license)

Homarr is licensed under [Apache 2.0](https://www.apache.org/licenses/LICENSE-2.0).

## TL;DR [#tldr]

| Action         | Allowed |
| -------------- | ------- |
| Copy           | ✅       |
| Modify         | ✅       |
| Distribution   | ✅       |
| Commercial Use | ✅       |
| Private Use    | ✅       |
| Attribution    | ✅       |
| Liability      | ❌       |
| Warranty       | ❌       |

<CalloutContainer type="info">
<CalloutDescription>
Please consider [making a donation](/docs/community/donate) to Homarr, if this project has been useful for your needs. Donations help us to keep Homarr up to date, implement new features and help our users with problems and questions.
</CalloutDescription>
</CalloutContainer>

## Full License [#full-license]

```txt
                                 Apache License
                           Version 2.0, January 2004
                        http://www.apache.org/licenses/

   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION

   1. Definitions.

      "License" shall mean the terms and conditions for use, reproduction,
      and distribution as defined by Sections 1 through 9 of this document.

      "Licensor" shall mean the copyright owner or entity authorized by
      the copyright owner that is granting the License.

      "Legal Entity" shall mean the union of the acting entity and all
      other entities that control, are controlled by, or are under common
      control with that entity. For the purposes of this definition,
      "control" means (i) the power, direct or indirect, to cause the
      direction or management of such entity, whether by contract or
      otherwise, or (ii) ownership of fifty percent (50%) or more of the
      outstanding shares, or (iii) beneficial ownership of such entity.

      "You" (or "Your") shall mean an individual or Legal Entity
      exercising permissions granted by this License.

      "Source" form shall mean the preferred form for making modifications,
      including but not limited to software source code, documentation
      source, and configuration files.

      "Object" form shall mean any form resulting from mechanical
      transformation or translation of a Source form, including but
      not limited to compiled object code, generated documentation,
      and conversions to other media types.

      "Work" shall mean the work of authorship, whether in Source or
      Object form, made available under the License, as indicated by a
      copyright notice that is included in or attached to the work
      (an example is provided in the Appendix below).

      "Derivative Works" shall mean any work, whether in Source or Object
      form, that is based on (or derived from) the Work and for which the
      editorial revisions, annotations, elaborations, or other modifications
      represent, as a whole, an original work of authorship. For the purposes
      of this License, Derivative Works shall not include works that remain
      separable from, or merely link (or bind by name) to the interfaces of,
      the Work and Derivative Works thereof.

      "Contribution" shall mean any work of authorship, including
      the original version of the Work and any modifications or additions
      to that Work or Derivative Works thereof, that is intentionally
      submitted to Licensor for inclusion in the Work by the copyright owner
      or by an individual or Legal Entity authorized to submit on behalf of
      the copyright owner. For the purposes of this definition, "submitted"
      means any form of electronic, verbal, or written communication sent
      to the Licensor or its representatives, including but not limited to
      communication on electronic mailing lists, source code control systems,
      and issue tracking systems that are managed by, or on behalf of, the
      Licensor for the purpose of discussing and improving the Work, but
      excluding communication that is conspicuously marked or otherwise
      designated in writing by the copyright owner as "Not a Contribution."

      "Contributor" shall mean Licensor and any individual or Legal Entity
      on behalf of whom a Contribution has been received by Licensor and
      subsequently incorporated within the Work.

   2. Grant of Copyright License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      copyright license to reproduce, prepare Derivative Works of,
      publicly display, publicly perform, sublicense, and distribute the
      Work and such Derivative Works in Source or Object form.

   3. Grant of Patent License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      (except as stated in this section) patent license to make, have made,
      use, offer to sell, sell, import, and otherwise transfer the Work,
      where such license applies only to those patent claims licensable
      by such Contributor that are necessarily infringed by their
      Contribution(s) alone or by combination of their Contribution(s)
      with the Work to which such Contribution(s) was submitted. If You
      institute patent litigation against any entity (including a
      cross-claim or counterclaim in a lawsuit) alleging that the Work
      or a Contribution incorporated within the Work constitutes direct
      or contributory patent infringement, then any patent licenses
      granted to You under this License for that Work shall terminate
      as of the date such litigation is filed.

   4. Redistribution. You may reproduce and distribute copies of the
      Work or Derivative Works thereof in any medium, with or without
      modifications, and in Source or Object form, provided that You
      meet the following conditions:

      (a) You must give any other recipients of the Work or
          Derivative Works a copy of this License; and

      (b) You must cause any modified files to carry prominent notices
          stating that You changed the files; and

      (c) You must retain, in the Source form of any Derivative Works
          that You distribute, all copyright, patent, trademark, and
          attribution notices from the Source form of the Work,
          excluding those notices that do not pertain to any part of
          the Derivative Works; and

      (d) If the Work includes a "NOTICE" text file as part of its
          distribution, then any Derivative Works that You distribute must
          include a readable copy of the attribution notices contained
          within such NOTICE file, excluding those notices that do not
          pertain to any part of the Derivative Works, in at least one
          of the following places: within a NOTICE text file distributed
          as part of the Derivative Works; within the Source form or
          documentation, if provided along with the Derivative Works; or,
          within a display generated by the Derivative Works, if and
          wherever such third-party notices normally appear. The contents
          of the NOTICE file are for informational purposes only and
          do not modify the License. You may add Your own attribution
          notices within Derivative Works that You distribute, alongside
          or as an addendum to the NOTICE text from the Work, provided
          that such additional attribution notices cannot be construed
          as modifying the License.

      You may add Your own copyright statement to Your modifications and
      may provide additional or different license terms and conditions
      for use, reproduction, or distribution of Your modifications, or
      for any such Derivative Works as a whole, provided Your use,
      reproduction, and distribution of the Work otherwise complies with
      the conditions stated in this License.

   5. Submission of Contributions. Unless You explicitly state otherwise,
      any Contribution intentionally submitted for inclusion in the Work
      by You to the Licensor shall be under the terms and conditions of
      this License, without any additional terms or conditions.
      Notwithstanding the above, nothing herein shall supersede or modify
      the terms of any separate license agreement you may have executed
      with Licensor regarding such Contributions.

   6. Trademarks. This License does not grant permission to use the trade
      names, trademarks, service marks, or product names of the Licensor,
      except as required for reasonable and customary use in describing the
      origin of the Work and reproducing the content of the NOTICE file.

   7. Disclaimer of Warranty. Unless required by applicable law or
      agreed to in writing, Licensor provides the Work (and each
      Contributor provides its Contributions) on an "AS IS" BASIS,
      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
      implied, including, without limitation, any warranties or conditions
      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
      PARTICULAR PURPOSE. You are solely responsible for determining the
      appropriateness of using or redistributing the Work and assume any
      risks associated with Your exercise of permissions under this License.

   8. Limitation of Liability. In no event and under no legal theory,
      whether in tort (including negligence), contract, or otherwise,
      unless required by applicable law (such as deliberate and grossly
      negligent acts) or agreed to in writing, shall any Contributor be
      liable to You for damages, including any direct, indirect, special,
      incidental, or consequential damages of any character arising as a
      result of this License or out of the use or inability to use the
      Work (including but not limited to damages for loss of goodwill,
      work stoppage, computer failure or malfunction, or any and all
      other commercial damages or losses), even if such Contributor
      has been advised of the possibility of such damages.

   9. Accepting Warranty or Additional Liability. While redistributing
      the Work or Derivative Works thereof, You may choose to offer,
      and charge a fee for, acceptance of support, warranty, indemnity,
      or other liability obligations and/or rights consistent with this
      License. However, in accepting such obligations, You may act only
      on Your own behalf and on Your sole responsibility, not on behalf
      of any other Contributor, and only if You agree to indemnify,
      defend, and hold each Contributor harmless for any liability
      incurred by, or claims asserted against, such Contributor by reason
      of your accepting any such warranty or additional liability.

   END OF TERMS AND CONDITIONS

   APPENDIX: How to apply the Apache License to your work.

      To apply the Apache License to your work, attach the following
      boilerplate notice, with the fields enclosed by brackets "[]"
      replaced with your own identifying information. (Don't include
      the brackets!)  The text should be enclosed in the appropriate
      comment syntax for the file format. We also recommend that a
      file or class name and description of purpose be included on the
      same "printed page" as the copyright notice for easier
      identification within third-party archives.

   Copyright (c) 2025 Meier Lukas, Thomas Camlong and Homarr Labs

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
```

# Translations (/docs/community/translations)

Homarr translations are managed on [Crowdin](https://translate.homarr.dev/). Select a language, translate strings in
context, and submit them for proofreading. Approved translations ship with a later Homarr release.

## Translate from Homarr [#translate-from-homarr]

Select &#x2A;*Crowdin (live translations)** as the application language, connect a Crowdin account, and choose the target
language. Select text in Homarr or use Crowdin's in-context panel to edit a string.

Live translation submits changes to Crowdin; it does not update the installed Homarr image. Crowdin's preview option can
show pending translations before the next Homarr release.

## Guidelines [#guidelines]

* Preserve the meaning and context of the English source.
* Keep terminology consistent with existing translations.
* Do not add punctuation, formatting, or explanatory text that is absent from the source.
* Improve an existing translation only when the replacement is more accurate.

Contact the [Discord community](/docs/community/get-in-touch#discord) to help proofread a language.

# After the installation (/docs/getting-started/after-the-installation)

After Homarr starts, open its URL. An unfinished installation redirects to the onboarding screen at `/init`. Choose
**Get started** for a new installation or **Restore backup** to import a compatible SQLite backup.

<Callout type="info" title="Persist /appdata before you continue">
Onboarding writes the administrator and board configuration to the database. If onboarding returns after a restart,
check that `/appdata` is writable and persisted. See the [Docker installation
guide](/docs/getting-started/installation/docker).
</Callout>

## Complete onboarding [#complete-onboarding]

Onboarding is split into six short sections. Integrations, Workshop, Assistant, and MCP are optional; skip them when you
only need a working board.

<Cards>
<Card title="1. Essentials">
Choose the language, theme, usual server address, and anonymous analytics preference.
</Card>

<Card title="2. Discover">
Review the database, Docker, Kubernetes, Assistant, and Workshop capabilities Homarr can reach.
</Card>

<Card title="3. Connect">
Import detected services or add integrations manually. Unfinished integrations can be skipped.
</Card>

<Card title="4. Board">
Set the board name, colors, corner radius, column count, and optional sidebars.
</Card>

<Card title="5. Extend">
Optionally connect the Workshop, configure an Assistant provider, or review the MCP endpoint.
</Card>

<Card title="6. Review">
Check the final summary, then build the board. Homarr opens the exact board it configured.
</Card>
</Cards>

The final screen links directly to the new board and the management area. Board layout, integrations, apps, and
appearance can all be changed later.

<Cards>
<Card title="Start or restore">
<img src="onboardingWelcome.src" alt="Homarr onboarding welcome screen with Get started and Restore backup actions" />
</Card>

<Card title="Configure the board">
<img src="onboardingBoard.src" alt="Board onboarding section for colors, columns, corner radius, and sidebars" />
</Card>

<Card title="Review before building">
<img src="onboardingReview.src" alt="Onboarding review showing the board settings Homarr will create" />
</Card>
</Cards>

## Core concepts [#core-concepts]

### Boards [#boards]

A **board** is a dashboard page containing apps, widgets, and Containers. Boards can be public or restricted to users
and groups. Each user can choose a home board.

<img alt="Board management with board previews" src="__img0" />

See [Boards](/docs/management/boards) for responsive layouts, access control, appearance, and home-board settings.

### Apps [#apps]

An **app** is a saved shortcut: a name, URL, icon, and optional status check. Add an App tile or a Bookmarks widget to
show apps on a board.

<img alt="App management with saved shortcuts" src="__img1" />

See [Apps](/docs/management/apps) or [Icons](/docs/advanced/icons).

### Integrations [#integrations]

An **integration** is a server-side connection from Homarr to a supported service such as Sonarr, Home Assistant, or
Docker. Integrations provide data and actions to widgets. They can also be linked to apps.

<img alt="Integration catalog with compatible widgets" src="__img2" />

See [Managing integrations](/docs/management/integrations) and the
[integration catalog](/docs/integrations).

### Widgets [#widgets]

A **widget** is a board tile. Some widgets work on their own; others require one or more integrations. Configuration,
supported integrations, and non-obvious limitations are documented on each widget page.

<img alt="Board in edit mode with the add-content menu" src="__img3" />

See the [widget catalog](/docs/widgets).

### Containers and rails [#containers-and-rails]

A **Container** groups board items and can be nested. A **rail** reserves a fixed area at the left or right of a
responsive layout. Both are configured in board edit mode.

<img alt="Board layout settings with fixed sidebars" src="__img4" />

See [Boards](/docs/management/boards#containers-and-rails).

### Users, groups, and permissions [#users-groups-and-permissions]

Users inherit permissions and default boards from their groups. Resource-specific access can further restrict boards
and integrations.

<img alt="Group permission settings" src="__img5" />

See [Users and groups](/docs/management/users) and [single sign-on](/docs/advanced/single-sign-on).

## Explore further [#explore-further]

* [Server settings](/docs/management/settings)
* [Assistant](/docs/management/assistant)
* [Custom Widgets](/docs/management/custom-widgets)
* [Community Workshop](/docs/workshop)
* [API](/docs/management/api) and [MCP](/docs/management/mcp)
* [Keyboard shortcuts](/docs/advanced/keyboard-shortcuts)

See the [glossary](/docs/getting-started/glossary) for a compact list of Homarr terms.

# Glossary (/docs/getting-started/glossary)

This glossary explains Homarr's main components and the terms used for them.

| Term            | Definition                                                                       |
| --------------- | -------------------------------------------------------------------------------- |
| App             | A saved shortcut with a name, destination, icon, and optional status check       |
| Assistant       | A conversation interface that can use model responses and Homarr tools           |
| Board           | A dashboard page where apps, widgets, and Containers are arranged                |
| Container       | A resizable board area containing apps, widgets, or nested Containers            |
| Custom Widget   | A validated definition for an API-backed board tile                              |
| Edit mode       | The board state used to add, move, resize, configure, or remove content          |
| Homarr provider | An Assistant provider routed through Workshop with a per-user allowance          |
| Integration     | A server-side connection from Homarr to a supported service                      |
| Layout          | An arrangement of board items selected for a viewport width                      |
| Provider        | The model API selected for Assistant                                             |
| Rail            | A fixed area at the left or right of a non-Mobile board layout                   |
| Task            | A background workload that runs without an active browser session                |
| Widget          | A board tile that displays information or provides actions                       |
| Workshop        | A separate community service for sharing Custom Widget definitions and board CSS |

# Getting started (/docs/getting-started)

## How Homarr works

Services expose data, integrations connect to them, widgets use the data, and boards arrange the widgets.

### Board edit mode

Add items, move them, and resize them on the grid. Each viewport can have its own layout.

[Board docs](/docs/management/boards)

1. **Add** Choose an app, widget, or container.

   ![Add item menu in board edit mode](/_next/static/media/manage-board-header-choose-item.2qlh-qua0k-cl.png)
2. **Move** Drag the item to another grid position.

   ![Dragging an app tile on a board](/_next/static/media/move-item.0fhpcdq2oqhjd.gif)
3. **Resize** Drag the resize handle to change its grid area.

   ![Resizing an app tile on a board](/_next/static/media/resize-item.071zdjoog7ioh.gif)

## Requirements [#requirements]

* `linux/amd64` or `linux/arm64`;
* 500 MB RAM;
* 600 MB free disk space for the container image;
* a persistent writable `/appdata` directory.

`linux/arm/v7` is not supported.

## Choose an installation method [#choose-an-installation-method]

- [Docker Compose](/docs/getting-started/installation/docker) (Recommended): General-purpose deployment with a persistent appdata volume.
- [Helm](/docs/getting-started/installation/helm) (Kubernetes): Deploy Homarr into an existing cluster.
- [NAS and hosting guides](/docs/getting-started/installation) (Platforms): Unraid, TrueNAS, Synology, Portainer, Proxmox, and more.

After Homarr starts, open it in a browser and complete onboarding. Then continue with
[After the installation](/docs/getting-started/after-the-installation) for the core concepts and the most useful next
links.

# Integrations (/docs/integrations)

An integration stores the connection and authentication details Homarr needs to communicate with another service. Widgets and management tools can then reuse that connection.

Each guide identifies the required URL and credentials, supported capabilities, and the widgets that use the integration.

Filter the guides by service name or what the service does, such as media server, monitoring, or storage.

<DocsDirectory section="integrations" />

## Before you connect a service [#before-you-connect-a-service]

1. Confirm that Homarr can reach the service from its own network.
2. Create the least-privileged account, token, or API key supported by the service.
3. Add the integration in **Manage → Integrations**.
4. Test the connection before adding dependent widgets.

See [Manage integrations](/docs/management/integrations) for the shared workflow.

# Assistant (/docs/management/assistant)

Assistant answers questions and operates Homarr through the signed-in user's permissions. Read-only tools can run
automatically; changes require approval by default.

<img alt="The Assistant management page" src="__img0" />

## Request flow [#request-flow]

<AssistantFlowDiagram />

## Configuration [#configuration]

Under **Management → Assistant**, select a provider, configure its API URL and key when required, select the default
model, and enable Assistant. Users can choose another available model for a conversation.

Provider presets cover common APIs. **Custom endpoint** accepts an OpenAI-compatible Chat Completions API. For a model
server outside the Homarr container, use a hostname that the container can resolve instead of `localhost`.

The [Homarr provider](/docs/workshop/homarr-provider) is available through the Community Workshop without an administrator
API key and has a daily request allowance.

## Access [#access]

Open Assistant from the user menu, with `Shift+A`, from search with `Cmd/Ctrl+/`, or through the
[Assistant widget](/docs/widgets/assistant).

Assistant can work with boards, apps, integrations, widgets, Custom Widgets, and supported connected services. Mention
Homarr resources with `@`; the model loads additional live context only when needed.

Conversations are stored per user and can be searched, renamed, exported, or deleted.

## Permissions and data [#permissions-and-data]

* Every tool call uses the current user's Homarr permissions.
* Automatic approvals apply only to the current conversation and reset when switching conversations.
* Provider keys and custom headers are encrypted and are not returned to the browser.
* Prompts, attachments, tool definitions, and tool results are sent to the selected model provider.

See [MCP](/docs/management/mcp) to connect an external AI client and
[Custom Widget agent authoring](/docs/management/custom-widgets/agent-authoring) for widget generation.

## Troubleshooting [#troubleshooting]

* **No models found:** check the API URL, discovery path, and API key, or enter a model ID manually.
* **Assistant is unavailable:** enable it and save the configuration.
* **Tool calls stop:** use a model that supports streaming and tool calls.
* **Local endpoint is unreachable:** check container DNS, routing, and the model server's listen address.

# Backup and restore (/docs/management/backup)

Administrators using SQLite can export and restore the complete Homarr database under
**Management → Tools → Backup**. PostgreSQL installations must use their database-native backup tools.

<img alt="The Backup and restore management page" src="__img0" />

For an existing MySQL installation, [convert to SQLite before upgrading to v2](/docs/advanced/mysql-to-sqlite). The converter produces a database file, not a backup ZIP.

## Export [#export]

The ZIP contains:

| File            | Contents                                                    |
| --------------- | ----------------------------------------------------------- |
| `db.sqlite`     | Apps, integrations, boards, users, settings, and other data |
| `metadata.json` | Homarr version, backup timestamp, and encryption metadata   |

Export requires typing `I understand`. Store the ZIP as sensitive data: it contains the database and the material
needed to restore encrypted integration credentials.

## Restore [#restore]

Select a Homarr backup ZIP. The browser previews entity counts, board names, and required database migrations before
the archive is uploaded.

Restoring replaces the current SQLite database and cannot be undone. It also invalidates the current database session.
After a successful management restore, Homarr waits for the restarted server and sends the administrator to sign in
again. The first-run onboarding restore keeps its existing board destination.

A backup can be restored on another Homarr instance. When its `SECRET_ENCRYPTION_KEY` differs, Homarr re-encrypts stored
integration secrets for the target instance. Version metadata is used to apply compatible migrations.

The same restore flow is available during first-run onboarding, before the target database contains user data.

# Manage Homarr (/docs/management)

## Everyday configuration [#everyday-configuration]

<Cards>
<Card title="Boards" href="/docs/management/boards">
Create, organize, share, and configure boards.
</Card>

<Card title="Apps" href="/docs/management/apps">
Add the services and links shown on boards.
</Card>

<Card title="Integrations" href="/docs/management/integrations">
Configure reusable service connections.
</Card>

<Card title="Users and groups" href="/docs/management/users">
Control access and permissions.
</Card>

<Card title="Settings" href="/docs/management/settings">
Change server and user preferences.
</Card>
</Cards>

## Content and extensions [#content-and-extensions]

<Cards>
<Card title="Media" href="/docs/management/media">
Manage uploaded assets.
</Card>

<Card title="Search engines" href="/docs/management/search-engines">
Configure search shortcuts.
</Card>

<Card title="Custom Widgets" href="/docs/management/custom-widgets">
Build Custom JSX widgets.
</Card>

<Card title="Assistant" href="/docs/management/assistant">
Configure Homarr's assistant features.
</Card>
</Cards>

## Operations [#operations]

<Cards>
<Card title="API" href="/docs/management/api">
Configure API keys and use the generated reference.
</Card>

<Card title="Model Context Protocol" href="/docs/management/mcp">
Connect external assistants to Homarr.
</Card>

<Card title="Tasks" href="/docs/management/tasks">
Inspect scheduled and background tasks.
</Card>

<Card title="Logs" href="/docs/management/logs">
Inspect application logs.
</Card>

<Card title="Certificates" href="/docs/management/certificates">
Trust certificates used by connected services.
</Card>

<Card title="Backups" href="/docs/management/backup">
Export and restore Homarr data.
</Card>
</Cards>

# Model Context Protocol (MCP) (/docs/management/mcp)

Connect an AI client to Homarr to manage boards, apps, integrations, and other services through MCP tools.

Homarr uses MCP v2 (protocol `2026-07-28`) at `/api/mcp`, with compatibility for 2025 Streamable HTTP clients.
Requests are stateless: each request authenticates independently, without an MCP session ID.

<img alt="The AI / MCP management tab" src="__img0" />

## Connect a client [#connect-a-client]

Create an API key under **Management → Tools → API → Authentication**. Add this configuration to your client,
replacing the URL and API key:

```json
{
  "mcpServers": {
    "homarr": {
      "url": "https://homarr.example.com/api/mcp",
      "headers": {
        "ApiKey": "<id>.<token>"
      }
    }
  }
}
```

Use the complete key, including the ID, dot, and token. Keep it private and use HTTPS for remote connections.
The **AI / MCP** tab on Homarr's API page provides your endpoint, configuration, and available tools.

For clients that only support STDIO, use `mcp-remote`:

```json
{
  "mcpServers": {
    "homarr": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://homarr.example.com/api/mcp", "--header", "ApiKey:<id>.<token>"]
    }
  }
}
```

### OAuth [#oauth]

Clients with OAuth support can authorize through OAuth 2.1 with PKCE instead of an API key.
Homarr publishes discovery metadata under `/.well-known/`.

If your reverse proxy does not preserve the public host and protocol, set `BASE_URL` to your public origin,
such as `https://homarr.example.com`, without a path.

## Permissions and tools [#permissions-and-tools]

Tools use the permissions of the API key owner or OAuth user. Queries read data; mutations change it.
Inspect the **AI / MCP** tab or your client's tool list for available actions.

Custom Widget and Workshop authoring tools, prompts, and resources require administrator access.
For Custom Widgets, install the official skill and follow the preview-and-evidence workflow described in
[Connect an agent](/docs/management/custom-widgets/agent-authoring). Secret values are configured in Homarr and are never returned
through MCP.

The built-in [Assistant](/docs/management/assistant) uses the same tool catalog with the current Homarr session and asks for approval
before mutations by default.

## Authenticated integration requests [#authenticated-integration-requests]

`integration_request` calls API endpoints without a dedicated tool, using stored integration credentials.
Get `integrationId` from `integration_all`. Every method requires **full integration access**: arbitrary GET
endpoints can expose credentials or change state. DELETE additionally requires `confirmed: true` after user confirmation.

Ask your agent to consult the service's official API docs with its browsing tools, or provide the endpoint contract.
For example, using the [Sonarr API docs](https://sonarr.tv/docs/api/#v3):

```json
{ "integrationId": "<Sonarr ID>", "method": "GET", "path": "/api/v3/series" }
```

Deleting series 42 **and its episode files**, after confirmation:

```json
{ "integrationId": "<Sonarr ID>", "method": "DELETE", "path": "/api/v3/series/42?deleteFiles=true", "confirmed": true }
```

Supports GET, POST, PUT, PATCH and DELETE with an optional JSON `body` (10 KiB maximum; not allowed for GET).
Returns `{status, data}` with parsed JSON, text, or `null` for an empty body, including upstream error responses.
Known credentials are redacted. Requests have a 15-second total deadline, a 10-second per-request timeout and a
1 MiB response limit. HTTPS uses Homarr's trusted certificates and hostname exceptions.

Paths follow `new URL(path, integration.url)`: `/api/...` starts at the origin root; `api/...` resolves relative to
the configured URL's directory. Absolute URLs, protocol-relative paths, credentials, fragments and redirects are rejected.

The built-in Assistant's default mutation approval applies to this tool, including GET calls.

## Verify the connection [#verify-the-connection]

This request lists tools through the older-client compatibility path. It checks authentication and tool discovery:

```sh
curl -X POST \
  -H 'Content-Type: application/json' \
  -H 'Accept: application/json, text/event-stream' \
  -H 'ApiKey: <id>.<token>' \
  -d '{"jsonrpc":"2.0","method":"tools/list","id":1}' \
  https://homarr.example.com/api/mcp
```

A successful discovery or initialization response alone does not verify that tools can be listed.

## Troubleshooting [#troubleshooting]

* **`invalid_token`**: copy the complete API key in `<id>.<token>` format.
* **Missing tools**: check the user's permissions. Invalid tool schemas and duplicate names are omitted; check server
  logs for `MCP tool omitted from catalog` and report the diagnostic with your Homarr version. Exclude API keys.
* **`Date cannot be represented in JSON Schema`**: update Homarr. Older versions could fail to list all tools because
  of an unsupported date schema.
* **`410 Gone` on `/sse` or `/message`**: use `/api/mcp` with a Streamable HTTP client. The old `/api/mcp/mcp` URL remains
  an alias.

# Homarr provider (/docs/workshop/homarr-provider)

The Homarr provider gives Community Workshop users access to a server-selected model without configuring an Assistant
API key.

Select **Homarr** under **Management → Assistant**, enable Assistant, then sign in to the Workshop when prompted.

<HomarrProviderDiagram />

## Allowance [#allowance]

* Each user receives 50 request units per UTC day.
* Each model request consumes one unit; a tool loop can consume several.
* Forwarded requests count even when the upstream model fails.
* A shared daily service limit also applies.

Assistant shows the remaining allowance and reset time beside the model control.

## Data handling [#data-handling]

Prompts, attachments, tools, and tool results pass through Workshop and OpenRouter. Workshop does not retain request or
response content; it stores the user, UTC day, and counters required for limits. OpenRouter is configured for zero data
retention with data collection disabled.

Operators configure the model, limits, and upstream key; see the
[Workshop operator guide](/docs/advanced/development/workshop-operator#homarr-provider).

# Community Workshop (/docs/workshop)

The [Community Workshop](/workshop) hosts community Custom Widgets and dashboard CSS.

<CalloutContainer type="warning">
<CalloutTitle>
Experimental
</CalloutTitle>

<CalloutDescription>
Workshop content is community-maintained. Review its source and permissions before installation.
</CalloutDescription>
</CalloutContainer>

## Content flow [#content-flow]

<WorkshopFlowDiagram />

Workshop also exposes the [Homarr Assistant provider](/docs/workshop/homarr-provider). Its model-routing and quota path is separate
from Custom Widget and CSS submissions.

## Install content [#install-content]

Browse **Widgets** or **CSS**, search by title, description, or author, and sort the listings. Use **Hide outdated** to
exclude submissions marked outdated. The result count shows how many listings match; **Reset filters** restores the full list.

* Install a Custom Widget from **Management → Custom Widgets → Import from Workshop**.
* Import dashboard CSS from **Board settings → Custom CSS → Import from Workshop**.

To install from the website, open a listing and review its source. Its **Install in Homarr** section sits beside the
download and copy controls:

* Select **Download widget JSON**, then open **Management → Custom Widgets → Import** and select the file.
* For CSS, select **Copy CSS**, paste it into **Board settings → Custom CSS**, and save.

Custom Widget credentials are configured in your Homarr instance and are not part of the Workshop submission.

## Publish content [#publish-content]

Publish a saved Custom Widget from its action menu under **Management → Custom Widgets**. Custom CSS and manual
submissions can be published from the Workshop website.

Sign in to the Workshop and open **Yours** to update or delete submissions and review reports. Signed-in users can vote,
comment, and report content; Workshop moderators can remove content. Workshop moderation is separate from administration
of a Homarr instance.

See the [Workshop operator guide](/docs/advanced/development/workshop-operator) to host Workshop or
[Workshop development](/docs/advanced/development/workshop) to run it from the repository.

# Command line interface (/docs/advanced/command-line)

The Homarr image includes a recovery CLI for operations that cannot be completed in the web interface. It is not an
application API; use the [API](/docs/management/api) or [MCP endpoint](/docs/management/mcp) for automation.

Back up the database and stop Homarr before running a command that changes data.
Failed commands print an error and return a non-zero exit code, so shell scripts can stop safely.

## Run the recovery CLI [#run-the-recovery-cli]

Open a shell in the container, then pass a command to `homarr`:

```sh
docker exec -it <container-id> /bin/bash
homarr <command>
```

### QNAP Container Station [#qnap-container-station]

1. Open **Container Station**.

<img alt="Container Station in the QNAP application menu" src="__img0" />

2. Select **Containers**.

<img alt="Containers menu in QNAP Container Station" src="__img1" />

3. Select the Homarr container.

<img alt="Homarr container selected in QNAP Container Station" src="__img2" />

4. Select **Execute**.

<img alt="Execute action for the Homarr container in QNAP Container Station" src="__img3" />

5. Select `/bin/bash`, then select **Execute**.

<img alt="Bash selected in the QNAP execute console" src="__img4" />

6. Run `homarr <command>` in the console.

<img alt="Bash console open for Homarr in QNAP Container Station" src="__img5" />

See the pages in this section for available commands.

## Build a local branch harness [#build-a-local-branch-harness]

The repository's host-side CLI can build the current checkout and run it as a named Docker harness:

<img alt="Homarr developer CLI showing pull requests, local images, and PR CI status" src="__img6" />

```sh
pnpm cli harness setup feature-board
```

This creates `homarr:feature-board`, starts it with persistent demo data, and prints the assigned URL. Query the port
again with:

```sh
pnpm cli harness port feature-board
```

Pass environment overrides with repeated `--env` options:

```sh
pnpm cli harness setup feature-board \
  --env WORKSHOP_WEB_URL=https://example.test \
  --env FEATURE_FLAG=true
```

Related commands are `harness build <name>`, `harness run <name>`, and `harness stop <name>`.

# Getting started (/docs/advanced/development/getting-started)

## Set up your development environment [#set-up-your-development-environment]

### Prerequisites [#prerequisites]

* **Node.js 24.18 or newer**: You can download it from the [official website](https://nodejs.org/).
* **Corepack**: Run `corepack enable` so the repository selects its pinned pnpm 11 version.
* **Git**: You can download it from the [official website](https://git-scm.com/).
* **Docker or Docker Desktop**: Required for the Redis service and the developer Docker CLI.
* **Go 1.25+**: Required only for the developer Docker CLI. You can download it from the [official website](https://go.dev/).
* **GitHub CLI**: Required only for pull-request image features. Install it from the [official website](https://cli.github.com/), then authenticate with `gh auth login`.

The versions in the root `package.json` are the supported baseline. Let Corepack select the repository version instead
of installing an unrelated global pnpm:

```sh
corepack enable
corepack install
pnpm install --frozen-lockfile
```

### Run the Homarr application [#run-the-homarr-application]

1. Copy `.env.example` to `.env`.
2. Run `openssl rand -hex 32` twice. Set `AUTH_SECRET` and `SECRET_ENCRYPTION_KEY` to the two different generated
   values in `.env`; the example leaves both empty. Keep this file private and preserve `SECRET_ENCRYPTION_KEY`
   when reusing a database.
3. Set `DB_URL` to an absolute writable SQLite file path. Migration and application commands run from different
   workspace directories, so a relative path can point them at different databases.
4. Keep Redis and the optional local databases running in one terminal.
5. Apply migrations and start Next.js in another terminal.

```sh
cp .env.example .env
```

Terminal 1:

```sh
pnpm docker:dev
```

Terminal 2:

```sh
pnpm db:migration:sqlite:run
pnpm dev
```

The infrastructure command remains in the foreground. Open `http://127.0.0.1:3000`; the first user created through
Homarr becomes the instance administrator.
Use `pnpm docker:dev:up` instead when you only need Redis in the background. Running the migration also seeds the
default data; use `pnpm db:seed` to seed it explicitly later.

`pnpm dev` starts only Next.js. When your work needs scheduled tasks or live subscriptions, run the relevant service
in a separate terminal alongside it:

```sh
pnpm --filter @homarr/tasks dev
```

```sh
pnpm --filter @homarr/websocket dev
```

The WebSocket service listens on port 3001. Production startup embeds both services, so these extra commands are
only needed for development.

Workshop contributors can set up PocketBase and Fumadocs with the dedicated
[Workshop development guide](/docs/advanced/development/workshop).

### Useful commands [#useful-commands]

* `pnpm dev` — Next.js on port 3000.
* `pnpm dev:benchmark` — authenticated-board benchmark; readiness-only `--smoke` runs are not performance claims.
* `pnpm dev:cli -- dev` — browse and run local images and remote pull-request images.
* `pnpm dev:cli -- build <name>` — build the current checkout as `homarr:<name>`.
* `pnpm dev:cli -- build --pr <number>` — build a pull request from a temporary checkout.
* `pnpm dev:cli -- rebuild <name>` — rebuild an image from its recorded checkout or pull request.
* `pnpm dev:cli:install` — optionally install the developer CLI as a `homarr` binary.
* `pnpm dev:docs` — Fumadocs on port 3003.
* `pnpm docker:dev:up` — Redis development service in the background.
* `pnpm cli` — Homarr operations CLI.
* `pnpm db:migration:sqlite:run` — create or update a SQLite database.
* `pnpm db:seed` — seed the default database data explicitly.
* `pnpm db:studio` — inspect the database.
* `pnpm format` / `pnpm format:fix` — check or apply oxfmt.
* `pnpm lint` / `pnpm lint:fix` — check or apply oxlint.
* `pnpm typecheck` — typecheck all workspaces.
* `pnpm test` — unit and contract suites.
* `pnpm build` — production monorepo build.
* `docker build -t homarr:local .` — build a production Docker image.
* `docker run -p 7575:7575 -e SECRET_ENCRYPTION_KEY='your_64_character_hex_string' homarr:local` — run it.

## CI and focused validation [#ci-and-focused-validation]

The main CI workflow runs lint, typechecking, affected workspace builds, workspace configuration checks, OpenAPI validation, and Custom Widget architecture and bundle checks. Unit and E2E suites do not run in CI. Preview images publish after the Fast gate and both architecture builds succeed; browser tests do not block publication. The container job builds an amd64 image when no preview image was built.

Workshop CI runs only when its workflow or Docker build inputs change. It validates Compose configuration and publishes production images on its configured release branches. Its Docker integration and image tests are manual; workspace typechecks run in the main Fast gate.

Choose the smallest relevant suite when changing behavior:

| Command                                           | Scope                                                          | Requirements                                                          |
| ------------------------------------------------- | -------------------------------------------------------------- | --------------------------------------------------------------------- |
| `pnpm test <file>`                                | Focused unit or contract tests                                 | Workspace dependencies                                                |
| `pnpm test`                                       | All unit and contract tests, without Docker integration suites | Workspace dependencies                                                |
| `pnpm test:coverage`                              | Unit and contract tests with coverage                          | Workspace dependencies                                                |
| `pnpm test:integration <file>`                    | Docker-backed service and database compatibility tests         | Docker                                                                |
| `pnpm test:e2e <file>`                            | Browser and container scenarios                                | Docker; Playwright Chromium and system dependencies for browser tests |
| `pnpm test:docs-screenshots`                      | Regenerate Assistant documentation screenshots                 | Same browser prerequisites                                            |
| `pnpm test:workshop` / `pnpm test:workshop-image` | Workshop integration / production-image validation             | Docker                                                                |

Omit `<file>` to run all tests in that command's scope. E2E and screenshot commands use a local image tagged `homarr-e2e`, or an image selected with `HOMARR_E2E_IMAGE`. The default commands run once without automatic retries; coverage is opt-in. The screenshot generator is excluded from both unit and E2E commands.

Keep behavioral coverage for authorization, migrations, persistence, and widget execution. Avoid tests that only search source code for particular component names, JSX, CSS, or documentation wording.

## Documentation development [#documentation-development]

Run `pnpm dev:docs` to open the Next.js and Fumadocs site at `http://127.0.0.1:3003`. Content lives in
`apps/docs/docs/`; the nearest `meta.json` controls navigation. Keep integration and widget setup metadata in their
typed `index.ts` files alongside the page.

After changing content, navigation, or shared MDX components, run:

```sh
pnpm --filter @homarr/docs build
pnpm --filter @homarr/docs validate:links
pnpm --filter @homarr/docs verify:search
pnpm --filter @homarr/docs verify:seo
```

The build writes a static site to `apps/docs/out/`. Check heading links, search results, and the page's Markdown export
when changing shared components. The [Fumadocs documentation](https://fumadocs.dev/docs) describes supported components
and source APIs; match examples to the versions installed in this repository.

# Kubernetes (/docs/advanced/development/kubernetes)

This guide provides step-by-step instructions for setting up a Kubernetes cluster using kind, configuring multiple nodes, and installing the Metrics Server.

## Prerequisites [#prerequisites]

Ensure you have the following installed:

* [Docker](https://docs.docker.com/get-started/get-docker/) (required for running `kind` clusters).
* [Kind](https://kind.sigs.k8s.io/docs/user/quick-start/) (Kubernetes in Docker).
* [Kubectl](https://kubernetes.io/docs/tasks/tools/) (Kubernetes command-line tool).

Additionally, ensure that Kubernetes tools are enabled in your environment by setting the following variable in your `.env` file:

```bash
# Enable Kubernetes tool
ENABLE_KUBERNETES=true
```

### 1. Creating a Kubernetes Cluster with Multiple Nodes [#1-creating-a-kubernetes-cluster-with-multiple-nodes]

We will create a Kubernetes cluster using `kind` with one control plane node and two worker nodes.

#### Define the Cluster Configuration [#define-the-cluster-configuration]

Create a configuration file named `kind-config.yaml` with the following content:

```bash
cat > kind-config.yaml <<EOF
# three node (two workers) cluster config
kind: Cluster
apiVersion: kind.x-k8s.io/v1alpha4
nodes:
- role: control-plane
  kubeadmConfigPatches:
    - |
      kind: KubeletConfiguration
      apiVersion: kubelet.config.k8s.io/v1beta1
      kubeReserved:
        cpu: "250m"
        memory: "256Mi"
      systemReserved:
        cpu: "500m"
        memory: "512Mi"
      evictionHard:
        memory.available: "200Mi"
- role: worker
- role: worker
EOF
```

#### Create the Cluster [#create-the-cluster]

Run the following command to create the Kubernetes cluster:

```bash
kind create cluster --name k8s-playground --config kind-config.yaml
```

This will provision a cluster named `k8s-playground` with the specified node configuration.

### 2. Installing the Metrics Server [#2-installing-the-metrics-server]

The Metrics Server is required for gathering resource utilization metrics like CPU and memory usage. It is essential for features such as Horizontal Pod Autoscaling.

#### Deploy the Metrics Server [#deploy-the-metrics-server]

Run the following command to install the Metrics Server:

```bash
kubectl apply -f https://github.com/kubernetes-sigs/metrics-server/releases/download/v0.7.2/components.yaml
```

#### Disable TLS Verification (For Local Development) [#disable-tls-verification-for-local-development]

In local environments, Kubernetes nodes might not have valid certificates. To disable TLS verification, patch the deployment:

```bash
kubectl patch -n kube-system deployment metrics-server --type=json \
  -p '[{"op":"add","path":"/spec/template/spec/containers/0/args/-","value":"--kubelet-insecure-tls"}]'
```

This allows the Metrics Server to communicate with kubelets that use self-signed certificates.

### 3. Verifying the Setup [#3-verifying-the-setup]

After completing the setup, verify that the cluster is running correctly:

#### Check the Cluster Nodes [#check-the-cluster-nodes]

```bash
kubectl get nodes
```

Expected output:

```bash
NAME                           STATUS   ROLES           AGE     VERSION
k8s-playground-control-plane   Ready    control-plane   Xs      vX.Y.Z
k8s-playground-worker          Ready    worker          Xs      vX.Y.Z
k8s-playground-worker2         Ready    worker          Xs      vX.Y.Z
```

#### Check Metrics Server Status [#check-metrics-server-status]

```bash
kubectl get deployment -n kube-system metrics-server
```

Expected output:

```bash
NAME             READY   UP-TO-DATE   AVAILABLE   AGE
metrics-server   1/1     1            1           Xs
```

#### Get Node Resource Metrics [#get-node-resource-metrics]

```bash
kubectl top nodes
```

This command should return CPU and memory usage statistics for each node.

## Conclusion [#conclusion]

You have successfully set up a multi-node Kubernetes cluster using kind and installed the Metrics Server for monitoring resource usage. This setup is useful for local development and testing Kubernetes workloads before deploying them to a production environment.

# Widgets and integrations (/docs/advanced/development/widgets-and-integrations)

Homarr keeps feature registration explicit and typed. Feature registration has no generator or generated registry.
A new feature is available when its typed metadata and lazy loader are registered.

## Add a widget [#add-a-widget]

Keep the UI, options, helpers, and tests together in `packages/widgets/src/<widget>/`. The usual folder only needs an
`index.ts` definition and a lazily imported `component.tsx`; complex widgets can add local files as needed.

1. Add the stable kind to `packages/definitions/src/widget.ts` and its documentation slug to the direct typed map in
   `packages/definitions/src/docs/widget-doc-slugs.ts`.
2. Export `definition` and `componentLoader` from `packages/widgets/src/<widget>/index.ts` with
   `createWidgetDefinition`. The local definition owns its icon, query keys, refresh interval, options, matchers, and
   errors. Keep the component behind `withDynamicImport` so adding a widget does not load it on every dashboard.
3. For an integration-backed widget, add its integration kinds and selection rules once to
   `packages/definitions/src/widget-integration-map.ts`, then spread `getWidgetIntegrationConfig(kind)` into the local
   definition. This server-safe config is also the API authorization boundary, avoiding a package cycle without
   duplicating widget metadata.
4. Register the widget in both explicit literal loader maps and the type-only module map in
   `packages/widgets/src/registry.ts`, then add its icon to `packages/ui/src/widget-icons.ts`. The module and component
   loaders must both use literal import paths. Keeping them separate lets a cold widget load request its definition
   and component chunks in parallel; the type-only map preserves exact option and component inference. Keep all three
   maps in the same order so drift is obvious in review.
5. If the widget needs server data, add its tRPC router under `packages/api/src/router/widgets/` and add its explicit
   lazy import to `packages/api/src/router/widgets/index.ts`. Keep upstream requests and Redis response caching in
   `@homarr/request-handler`. Use the widget integration middleware for integration-backed procedures.
6. Add canonical documentation in `apps/docs/docs/widgets/<slug>/`.

Weather is the small integration-free example. Downloads shows integration selection, polling, server caching,
mutations, partial upstream failures, and a larger options surface.

## Add an integration [#add-an-integration]

Keep the HTTP client and its capability-specific types in `packages/integrations/src/<integration>/`.

1. Add the typed definition to `packages/definitions/src/integration.ts`, including credential alternatives,
   categories, documentation slug, ports, Docker aliases, and onboarding metadata when relevant.
2. Add an explicit lazy creator to `packages/integrations/src/base/creator.ts`. The literal import keeps the
   implementation out of the initial server bundle and makes the registration easy to find.
3. Implement only the interfaces required by the widgets that use the service.
4. Add canonical documentation in `apps/docs/docs/integrations/<slug>/`. Its `index.ts` must satisfy
   `IntegrationDefinition` so invalid metadata fails type checking without widening the object. Use a type-only import
   and `satisfies IntegrationDefinition`; do not cast the object.

Beszel is a compact example with several widgets sharing one integration client.

## Write user documentation [#write-user-documentation]

Write for technically capable self-hosters. Keep each page short and operational.

* Start with one sentence describing what the integration or widget adds to Homarr.
* Include prerequisites, credentials, permissions, destructive actions, and non-obvious limits only when they matter.
* Use numbered steps only when order matters. Prefer the exact UI labels a user must select.
* Do not add marketing, implementation history, architecture internals, or explanations of basic self-hosting concepts.
* End when the user can configure and verify the feature; do not repeat the same information in a summary.

The usual page needs only an introduction and a `Configuration` section. Add `Notes` or `Troubleshooting` only for
real caveats.

## Data and errors [#data-and-errors]

* TanStack Query owns browser caching and refresh behavior. Redis owns shared server response caching for bounded key
  spaces. Public handlers whose keys come from arbitrary URLs, domains, symbols, or coordinates stay in the bounded
  process-local cache.
* Cache raw service responses, never authorization decisions or decrypted credentials. Integration-backed cache keys
  include keyed credential fingerprints and the complete integration identity, and are invalidated after mutations.
  The fingerprints change with credentials without exposing their values in Redis keys.
* Give upstream requests a finite deadline and pass the request handler's `AbortSignal` into clients that support it.
  Admission is bounded per handler. Request deduplication and distributed lock ownership remain active until the
  upstream settles or a bounded cleanup grace expires, while unresolved upstream work stays separately capped.
* Keep validation and authorization on the server. Client-side checks improve UX but do not replace tRPC guards.
* Use the shared logger with safe identifiers, operation names, duration, and the original error cause. Never log
  secrets or full upstream payloads.
* Multi-integration reads should return successful providers when one service fails and surface a clear error when all
  providers fail.

Registration files intentionally contain boring, explicit imports. This small amount of repetition preserves exact
TypeScript inference, gives Next.js discoverable lazy chunks, and keeps Ctrl+click navigation reliable.

## Registry imports [#registry-imports]

Use `@homarr/widgets/manifest` to load registered widgets. `loadWidgetDefinition` is the metadata-only path;
`loadWidgetComponent` loads only the UI module; and `loadWidgetResources` requests both paths in parallel. These
loaders cache in-flight and successful promises and remove rejected promises so a later request can retry.

The former root `widgetImports` and `loadWidgetDynamic` exports are intentionally not compatibility aliases.
`widgetImports` synchronously imported every widget module, and `loadWidgetDynamic` depended on that eager map.
Restoring them at the package root would defeat lazy definition chunks or add client-only runtime dependencies to
every root consumer. Migrate metadata consumers to `loadWidgetDefinition`, renderers to `loadWidgetResources`, and
type-only registry consumers from the removed internal `WidgetImportRecord` helper to the root `WidgetImports` type.

`@homarr/widgets/catalog` remains as a deprecated compatibility subpath for `widgetCatalogIcons`. New imports should
use `@homarr/ui/widget-icons`, which is the canonical server-safe icon catalog.

# Workshop operator guide (/docs/advanced/development/workshop-operator)

Workshop uses PocketBase. The production image serves the Workshop website and API from one origin and stores state in
`/pb_data`.

## Environment variables [#environment-variables]

| Variable                               | Purpose                                      | Default                        |
| -------------------------------------- | -------------------------------------------- | ------------------------------ |
| `HOMARR_WEBSITE_URL`                   | Documentation/site base used by Homarr links | `https://homarr.dev`           |
| `WORKSHOP_API_URL`                     | PocketBase API used by Homarr and docs       | `HOMARR_WEBSITE_URL`           |
| `WORKSHOP_WEB_URL`                     | Public Workshop URL                          | `HOMARR_WEBSITE_URL/workshop`  |
| `WORKSHOP_PUBLIC_ORIGIN`               | PocketBase-generated links and email         | Required in production         |
| `PB_ALLOWED_ORIGINS`                   | Allowed browser origins                      | `*`                            |
| `GITHUB_CLIENT_ID`                     | GitHub OAuth application ID                  | —                              |
| `GITHUB_CLIENT_SECRET`                 | GitHub OAuth application secret              | —                              |
| `OPENROUTER_API_KEY`                   | Enables the Homarr Assistant provider        | Provider disabled when empty   |
| `HOMARR_AI_DAILY_REQUEST_LIMIT`        | Per-user daily request allowance             | `50`                           |
| `HOMARR_AI_GLOBAL_DAILY_REQUEST_LIMIT` | Shared daily request ceiling                 | `10000`                        |
| `HOMARR_AI_OPENROUTER_BASE_URL`        | OpenRouter-compatible upstream               | `https://openrouter.ai/api/v1` |
| `HOMARR_AI_OPENROUTER_MODEL`           | Upstream model behind `homarr/model`         | Selected by the Homarr team    |

Public URL variables accept HTTP(S) origins without embedded credentials, query strings, or fragments. Restart the
container after changing runtime configuration.

## Documentation search and AI [#documentation-search-and-ai]

The documentation uses Fumadocs search with an index generated during the website build. Search runs in the browser
and needs no hosted search credentials or crawler.

The **Ask AI** launcher connects to Kapa separately. `KAPA_WEBSITE_ID` is a public website integration ID, read when
building the documentation. The default uses Homarr's integration. For a private deployment, pass your own ID or
an empty value to disable it: `docker build --build-arg KAPA_WEBSITE_ID= -f apps/workshop/Dockerfile .`.
Changing this value requires rebuilding the image; setting it on an already-built container has no effect.

For your own Kapa integration, enable the deployment domain in Kapa and configure a Website Crawl source for your
published docs. Preview the `main` content selector and verify extracted headings, code, and integration details.
After a migration, refresh the source and check answer citations. `/llms.txt` alone does not configure Kapa ingestion.
See the [Kapa website widget guide](https://docs.kapa.ai/integrations/website-widget/quickstart).

## Authentication and email [#authentication-and-email]

Configure both GitHub OAuth variables and use `https://<workshop-host>/api/oauth2-redirect` as the callback. Supplying
only one OAuth variable is a startup error. Configure SMTP for comment, report, and removal notifications.

For the central community, `PB_ALLOWED_ORIGINS=*` permits requests from self-hosted Homarr origins. A private deployment
can use a comma-separated allowlist.

## Homarr provider [#homarr-provider]

`OPENROUTER_API_KEY` enables the [Homarr provider](/docs/workshop/homarr-provider). The Workshop server chooses the upstream model and
enforces per-user and global daily limits. It requests zero-data-retention routing, disables data-collecting providers,
and does not retain prompts or responses.

Keep an OpenRouter account-level credit limit as the monetary backstop; request limits are not cost limits.

## Deployment [#deployment]

The v2 image is `ghcr.io/homarr-labs/workshop:v2`; immutable `sha-<commit>` tags are preferable for promotion. The
service listens on port 8090.

When using a reverse proxy, forward the complete hostname, including `/api`, `/_/`, and
`/workshop-runtime-config.js`. Use a dedicated hostname when Homarr already occupies the intended origin.

Verify `/api/health`, the Workshop page, a public listing request, GitHub sign-in, and one installation after deployment.

## Backup and restore [#backup-and-restore]

Stop writes and copy `/pb_data` for a consistent backup. A restore replaces the selected PocketBase data directory, so
preserve the current volume and verify that the backup contains `data.db` first. Rehearse the restore outside production
and verify sign-in and one installation afterward.

# Workshop development (/docs/advanced/development/workshop)

See the [main development guide](/docs/advanced/development/getting-started) for repository prerequisites.

Start PocketBase:

```sh
cp apps/workshop/.env.example apps/workshop/.env
docker compose --env-file apps/workshop/.env -f apps/workshop/docker-compose.yml up --build workshop
```

Start Fumadocs in another terminal:

```sh
WORKSHOP_API_URL=http://127.0.0.1:8090 pnpm dev:docs
```

PocketBase runs at `http://127.0.0.1:8090`; create the first superuser under `/_/`. Workshop is available at
`http://127.0.0.1:3003/workshop`.

To connect a local Homarr instance, set:

```dotenv
HOMARR_WEBSITE_URL=http://127.0.0.1:3003
WORKSHOP_API_URL=http://127.0.0.1:8090
WORKSHOP_WEB_URL=http://127.0.0.1:3003/workshop
```

Restart the affected development process after changing these variables. See
[`apps/workshop/README.md`](https://github.com/homarr-labs/homarr/blob/HEAD/apps/workshop/README.md) for OAuth,
moderation, tests, and service maintenance.

# Widgets (/docs/widgets)

Widgets turn apps, integrations, and Homarr data into useful board content. Some work on their own; others require one or more configured integrations.

Each widget guide explains its configuration, required integrations, supported interactions, permissions, and important empty or error states.

## Add a widget [#add-a-widget]

1. Open a board and enter edit mode.
2. Select **Add item**, then choose **Widget**.
3. Pick a widget and complete its configuration.
4. Move or resize it, then leave edit mode to use it.

Filter the guides by widget name or the information you want to display, such as calendar, weather, or storage.

<DocsDirectory section="widgets" />

See [After installation](/docs/getting-started/after-the-installation) for the complete first-board workflow.

# Environment variables (/docs/advanced/environment-variables)

Homarr offers a few environment variables, which can be used to configure the container.

<CalloutContainer type="info">
<CalloutDescription>
With docker you can add the `_FILE` suffix to any environment variable, which will read the value from a file.
This is especially useful for [docker secrets](https://docs.docker.com/engine/swarm/secrets/#use-secrets-in-compose).
</CalloutDescription>
</CalloutContainer>

## General [#general]

<CalloutContainer type="warning">
<CalloutDescription>
Using the `PUID` and `PGID` will require you to set the correct permissions on the mounted volumes and if used the docker socket. See more in the [Running as a different user](/docs/advanced/running-as-different-user) documentation.
</CalloutDescription>
</CalloutContainer>

| Environment Variable     | Description                                                                                                                                                                                                                            | Possible values                     | Default                       |
| ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- | ----------------------------- |
| `PUID`                   | User ID to run the container as                                                                                                                                                                                                        | Any valid user ID                   | `0`                           |
| `PGID`                   | Group ID to run the container as                                                                                                                                                                                                       | Any valid group ID                  | `0`                           |
| `LOG_LEVEL`              | Log level to use                                                                                                                                                                                                                       | `debug` / `info` / `warn` / `error` | `info`                        |
| `BASE_URL`               | Public Homarr origin used by MCP OAuth metadata and redirects. Set this when a reverse proxy does not preserve the public host and protocol.                                                                                           | HTTP(S) origin without a path       | -                             |
| `NO_EXTERNAL_CONNECTION` | Disables Homarr's internet-backed requests, including update checks, weather, location search, and RSS feeds                                                                                                                           | `true` or `false`                   | `false`                       |
| `ENABLE_DNS_CACHING`     | Enables dns caching. Enabled by default, but if you experience issues with IPv6 or static IPs, see [#4006](https://github.com/homarr-labs/homarr/issues/4006) or disable this flag                                                     | `true` or `false`                   | `true`                        |
| `HOMARR_DISABLE_IPV6`    | Disables the IPv6 listener of the internal nginx proxy, even when the host supports IPv6. IPv6 is normally disabled automatically when the host has no IPv6 configured. See [#4596](https://github.com/homarr-labs/homarr/issues/4596) | `true` or `false`                   | `false`                       |
| `HOMARR_WEBSITE_URL`     | Main Homarr documentation/site base used by runtime links. Must be an absolute HTTP(S) URL.                                                                                                                                            | HTTP(S) URL                         | `https://homarr.dev`          |
| `WORKSHOP_API_URL`       | PocketBase API used by Homarr and standalone documentation.                                                                                                                                                                            | HTTP(S) URL                         | `HOMARR_WEBSITE_URL`          |
| `WORKSHOP_WEB_URL`       | Public Workshop website used by links in Homarr, Custom Widgets, onboarding, and assistant context.                                                                                                                                    | HTTP(S) URL                         | `HOMARR_WEBSITE_URL/workshop` |

Workshop service operators can find its server-only configuration in the
[Workshop operator guide](/docs/advanced/development/workshop-operator#environment-variables).

### Workshop service [#workshop-service]

These variables configure the separate Workshop service, not the Homarr application container.

| Environment Variable                        | Description                                                               | Default                           |
| ------------------------------------------- | ------------------------------------------------------------------------- | --------------------------------- |
| `WORKSHOP_PUBLIC_ORIGIN`                    | Public origin used in PocketBase links and email                          | Required in production            |
| `PB_ALLOWED_ORIGINS`                        | Browser origins allowed to call PocketBase                                | `*` for the public community      |
| `WORKSHOP_IMAGE`                            | Workshop image used by the staging Compose file                           | `ghcr.io/homarr-labs/workshop:v2` |
| `WORKSHOP_EXPOSE_PORT`                      | Host port for the combined staging service                                | `8090`                            |
| `PB_EXPOSE_PORT`                            | Host port for local PocketBase development                                | `8090`                            |
| `DOCS_EXPOSE_PORT`                          | Host port for local documentation development                             | `3003`                            |
| `GITHUB_CLIENT_ID` / `GITHUB_CLIENT_SECRET` | Optional GitHub OAuth application credentials                             | -                                 |
| `OPENROUTER_API_KEY`                        | Server-only upstream key that enables the Homarr Assistant provider       | Provider disabled                 |
| `HOMARR_AI_DAILY_REQUEST_LIMIT`             | Daily Assistant request units per user                                    | `50`                              |
| `HOMARR_AI_GLOBAL_DAILY_REQUEST_LIMIT`      | Daily Assistant request units shared by all users                         | `10000`                           |
| `HOMARR_AI_OPENROUTER_BASE_URL`             | OpenRouter-compatible provider endpoint                                   | `https://openrouter.ai/api/v1`    |
| `HOMARR_AI_OPENROUTER_MODEL`                | Upstream model exposed through the stable `homarr/model` alias            | Selected by the Homarr team       |
| `HOMARR_AI_ALLOW_INSECURE_UPSTREAM`         | Allows an HTTP upstream for local provider tests; never use in production | `false`                           |

## Authentication [#authentication]

See [Single Sign-On](/docs/advanced/single-sign-on) for more informations.

## Security [#security]

The `SECRET_ENCRYPTION_KEY` is required. If none is specified before starting the container, a random key will be shown in the error message and the container will exit.

| Environment Variable    | Description                                 | Possible values         | Default |
| ----------------------- | ------------------------------------------- | ----------------------- | ------- |
| `SECRET_ENCRYPTION_KEY` | Secret used to encrypt secrets in database. | 64 character hex string | -       |

<CalloutContainer type="info">
<CalloutDescription>
A random secret can be generated by using the following command: `openssl rand -hex 32`
</CalloutDescription>
</CalloutContainer>

## Docker [#docker]

| Environment Variable  | Description                                                                                                                                                                                                          | Possible values                                         | Default |
| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ------- |
| `DOCKER_SOCKET_PATHS` | Comma-separated mounted Docker-compatible socket paths. Homarr discovers each path as a selectable Docker environment                                                                                                | For example `/var/run/docker.sock,/var/run/podman.sock` | -       |
| `DOCKER_HOSTNAMES`    | Comma-separated plaintext TCP hostnames. Pair each hostname with the port in the same position in `DOCKER_PORTS`                                                                                                     | For example `localhost,docker.example.com`              | -       |
| `DOCKER_PORTS`        | Comma-separated plaintext TCP ports paired with `DOCKER_HOSTNAMES`                                                                                                                                                   | For example `2375,2376`                                 | -       |
| `DOCKER_ENDPOINTS`    | Optional advanced JSON configuration for custom names, TLS, or restricted capabilities. It takes precedence over the simple variables above. See the [Docker and Podman connection guide](/docs/integrations/docker) | A JSON array of endpoint descriptors                    | -       |

## Database [#database]

SQLite is the default; PostgreSQL is also supported. Existing MySQL installations must [convert to SQLite before upgrading to v2](/docs/advanced/mysql-to-sqlite).

| Environment Variable | Description                                                                               | Possible values                    | Default                 |
| -------------------- | ----------------------------------------------------------------------------------------- | ---------------------------------- | ----------------------- |
| `DB_DRIVER`          | Database driver to use. Use `better-sqlite3` for SQLite or `node-postgres` for PostgreSQL | `better-sqlite3` / `node-postgres` | `better-sqlite3`        |
| `DB_DIALECT`         | Database dialect to use.                                                                  | `sqlite` / `postgresql`            | `sqlite`                |
| `DB_URL`             | Database URL to connect to.                                                               | Any valid database URL             | `/appdata/db/db.sqlite` |
| `DB_HOST`            | Database host to connect to.                                                              | Any valid database host            | -                       |
| `DB_PORT`            | Database port to connect to.                                                              | Any valid database port            | -                       |
| `DB_NAME`            | Database name to connect to.                                                              | Any valid database name            | -                       |
| `DB_USER`            | Database user to connect with.                                                            | Any valid database user            | -                       |
| `DB_PASSWORD`        | Database password to connect with.                                                        | Any valid database password        | -                       |

You can either use the url or host, port, name and credentials combined. The URL will be prioritized over the other values.

## Redis [#redis]

By default Redis is running within the installation. (for example in Docker).
However for example for K8s it can be useful to use an external Redis instance.

<CalloutContainer type="info">
<CalloutDescription>
External redis is currently not supported with Proxmox Community Scripts
</CalloutDescription>
</CalloutContainer>

| Environment Variable   | Description                                                                                          | Possible values          | Default |
| ---------------------- | ---------------------------------------------------------------------------------------------------- | ------------------------ | ------- |
| `REDIS_IS_EXTERNAL`    | Whether Redis is running externally.                                                                 | `true` / `false`         | `false` |
| `REDIS_HOST`           | Hostname of the Redis instance.                                                                      | Any valid hostname       | -       |
| `REDIS_PORT`           | Port of the Redis instance.                                                                          | Any valid port           | `6379`  |
| `REDIS_USERNAME`       | Username to connect to the Redis instance.                                                           | Any valid username       | -       |
| `REDIS_PASSWORD`       | Password to connect to the Redis instance.                                                           | Any valid password       | -       |
| `REDIS_DATABASE_INDEX` | Select which database of your redis instance should be used.                                         | Any numeric index        | -       |
| `REDIS_TLS_CA`         | CA certificate for Redis TLS connections. If a certificate is specified the connection will use TLS. | Any valid CA certificate | -       |

## Proxy [#proxy]

| Environment Variable | Description                                                         | Possible values           | Default |
| -------------------- | ------------------------------------------------------------------- | ------------------------- | ------- |
| `HTTP_PROXY`         | HTTP proxy to use                                                   | Any valid HTTP proxy URL  | -       |
| `HTTPS_PROXY`        | HTTPS proxy to use                                                  | Any valid HTTPS proxy URL | -       |
| `NO_PROXY`           | Comma separated list of hosts that should be excluded from proxying | Any valid hostnames       | -       |

## Advanced deployments [#advanced-deployments]

<CalloutContainer type="warning">
<CalloutDescription>
The advanced deployments environment variables should only be used if you know what you are doing.
</CalloutDescription>
</CalloutContainer>

| Environment Variable     | Description                                         |
| ------------------------ | --------------------------------------------------- |
| `DB_MIGRATIONS_DISABLED` | Disable db migrations. For example for helm charts. |

All public URL variables reject non-HTTP protocols, embedded credentials, query strings, and fragments, and normalize
trailing slashes when Homarr or the documentation site starts.

# Icons (/docs/advanced/icons)

## Icon picker [#icon-picker]

Icons in Homarr are automatically requested from multiple sources:

* [Dashboard Icons](https://dashboardicons.com/) - Our recommended source with more than 1,888 curated, high-quality icons
* [selfh.st icons](https://github.com/selfhst/icons)
* [Simple icons](https://github.com/simple-icons/simple-icons)
* [Tabler icons](https://tabler-icons.io/)
* [Papirus icons](https://github.com/PapirusDevelopmentTeam/papirus-icon-theme)
* [Homelab Svg assets](https://github.com/loganmarchione/homelab-svg-assets)
* **Local icons**: automatically fetched from the [medias feature](/docs/management/media/)

Using these icon sources, Homarr provides a total collection of over 11,000 icons at your fingertips.
The image picker searches this collection after a short typing delay. When a name is available, such as an app or search engine name, the picker uses it as the initial search. Results show your locally uploaded images first, followed by SVG icons and then other image formats.

### Finding Missing Icons [#finding-missing-icons]

If you can't find the icon you're looking for in Homarr's built-in picker, we strongly recommend checking [Dashboard Icons](https://dashboardicons.com/). It offers a modern, user-friendly interface and a curated collection of high-quality icons specifically designed for dashboards and app directories.

<img alt="Icon picker" src="__img0" />

Icons that are high quality and printable ([SVG](https://wikipedia.org/wiki/Scalable_Vector_Graphics)) are marked with a red badge "SVG" at the top right.

You can clear the selected image with the clear button or the usual keyboard shortcut for deleting a line (Command+Backspace on macOS or Control+Backspace on other platforms). Clearing the field does not restore the previous image.

### Using external icons [#using-external-icons]

If you don't find the icon you're looking for on Dashboard Icons or wish to use a different source, you can simply enter a URL that points to an icon.
Direct HTTP(S) image URLs are used as entered instead of being searched in the built-in repositories. The picker previews the image and shows whether it loaded successfully. It is important that the URL directly points to the file without any advertisements or elements around it.

### Uploading a local image [#uploading-a-local-image]

Users with media upload permission can select **Upload image** next to the field. After the upload finishes, the new local image is selected immediately and is available at the top of future searches.

# Keyboard Shortcuts (/docs/advanced/keyboard-shortcuts)

Homarr has the following keyboard shortcuts:

| Shortcut                                            | Description                                                                                                                |
| --------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| `MOD` + `K`                                         | Opens search, including local apps, boards, integrations, pages, commands, and preferences                                 |
| `MOD` + `P`                                         | Opens app search                                                                                                           |
| `MOD` + `/`                                         | Opens Homarr Assistant inside search                                                                                       |
| `MOD` + `Shift` + `/` (`MOD` + `?`)                 | Opens preference search                                                                                                    |
| `Shift` + `A`                                       | Opens the full Homarr Assistant                                                                                            |
| `MOD` + `J`                                         | Toggles Dark Mode                                                                                                          |
| `MOD` + `E`                                         | Toggles Edit Mode                                                                                                          |
| Hold `Shift` for 500 ms over a supported widget     | Opens its temporary advanced view                                                                                          |
| Hold `Shift` + `Ctrl`/`Cmd` over a supported widget | Keeps its advanced view open until it is closed                                                                            |
| `Esc`                                               | Stops keyboard tile editing, cancels an active pointer or touch move/resize, or closes an open advanced view or board menu |

## Search and commands [#search-and-commands]

Search is designed as the fastest route to Homarr. Start typing after `MOD` + `K` to find local apps, boards,
integrations, pages, commands, and preferences without entering a separate mode first. Local Homarr results appear
before configured search-engine actions and Assistant fallbacks. Commands include opening the board switcher without
leaving the keyboard. Type `!` to enter Web mode when you want to browse configured engine shortcuts or discover
DuckDuckGo bangs; bang discovery is excluded from ordinary Search results.

Use the dedicated shortcuts above to start in apps, Assistant, or preferences. Inside search, choose a mode to narrow
the same query when needed. Media request search is available only when a supported Seerr integration is configured.

## Widget advanced view [#widget-advanced-view]

Supported widgets open a temporary advanced view when you hold `Shift` over them for 500 ms. Hold `Shift` plus `Ctrl`
on Windows/Linux or `Cmd` on macOS over the widget to keep the advanced view open, or use its menu.

## Board editing [#board-editing]

`MOD` + `E` enters edit mode. Homarr keeps the current board visible while the editor prepares; movement and resizing become available when it is ready.

When a tile is focused in edit mode:

| Shortcut             | Description                                                                 |
| -------------------- | --------------------------------------------------------------------------- |
| `Enter` or `Space`   | Starts or stops keyboard editing                                            |
| Arrow keys           | Moves the focused tile within its current canvas, rail, or Container        |
| `Shift` + Arrow keys | Resizes from the tile's lower-right corner: Left/Up shrink; Right/Down grow |
| `Esc`                | Stops keyboard editing without undoing its changes                          |

Keyboard moves and resizes apply immediately. To move an item between a canvas, rail, or Container, drag it there or use **Move / resize item** for precise numeric placement.
Commands at a grid boundary or at the tile's minimum size are ignored and announced instead of moving or shrinking the tile.

On touch screens, press and hold a tile before moving it; a quick tap does not start a drag. Resize handles accept direct touch input. During a pointer or touch move or resize, `Esc` cancels the interaction and restores the layout from before it started.

<CalloutContainer type="idea">
<CalloutDescription>
Here `MOD` refers to the modifier key, which is `Ctrl` on Windows and `Cmd` on macOS.
</CalloutDescription>
</CalloutContainer>

<CalloutContainer type="info">
<CalloutDescription>
The focus of your browser must be set on Homarr. If you click outside of Homarr, you might need to click once somewhere in Homarr to send all keystrokes again to Homarr.

If the shortcuts are not working, ensure that you have selected the correct keyboard layout.
</CalloutDescription>
</CalloutContainer>

# Running as a different user (/docs/advanced/running-as-different-user)

By default the container is running with user `root` and group `root`.
You can change the user and group by using the `PUID` and `PGID` environment variables.
Important to note is, that you'll also need to change the permissions for the mounted directories accordingly.

<CalloutContainer type="info">
<CalloutDescription>
At startup, Homarr updates ownership of its data directories and runtime caches for the selected user and group.
Startup time depends on the amount of persistent data; application code and dependencies do not need ownership changes.
</CalloutDescription>
</CalloutContainer>

## Without mounted Docker socket [#without-mounted-docker-socket]

To run your container as a different user, you can use the `PUID` and `PGID` environment variables:

```yml title="docker-compose.yml"
#---------------------------------------------------------------------#
#     Homarr - A simple, yet powerful dashboard for your server.      #
#---------------------------------------------------------------------#
services:
  homarr:
    container_name: homarr
    image: ghcr.io/homarr-labs/homarr:latest
    restart: unless-stopped
    volumes:
      - ./homarr/appdata:/appdata
    environment:
      - SECRET_ENCRYPTION_KEY=your_64_character_hex_string # <--- can be generated with `openssl rand -hex 32`
      - PUID=1000
      - PGID=1000
    ports:
      - "7575:7575"
```

After that you'll need to create the appdata directory and set the correct permissions:

```bash title="On host"
mkdir -p ./homarr/appdata
chown -R 1000:1000 ./homarr/appdata
```

## With mounted Docker socket [#with-mounted-docker-socket]

If you want to use the Docker integration, you'll need to set the correct permissions for the Docker socket as well, most of the times it will have the owner group set to docker group.
In any way, it is recommended to create this group and set it's permissions to it, if it doesn't exist yet:

```bash title="On host"
groupadd -g 999 docker
```

Then you can set the permissions for the Docker socket:

```bash title="On host"
chown root:docker /var/run/docker.sock
```

After that you can set the `PUID` and `PGID` environment variables in your `docker-compose.yml` file:

```yml title="docker-compose.yml"
#---------------------------------------------------------------------#
#     Homarr - A simple, yet powerful dashboard for your server.      #
#---------------------------------------------------------------------#
services:
  homarr:
    container_name: homarr
    image: ghcr.io/homarr-labs/homarr:latest
    restart: unless-stopped
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock
      - ./homarr/appdata:/appdata
    environment:
      - SECRET_ENCRYPTION_KEY=your_64_character_hex_string # <--- can be generated with `openssl rand -hex 32`
      - PUID=1000
      - PGID=999
    ports:
      - "7575:7575"
```

And set the permissions for the mounted directories:

```bash title="On host"
mkdir -p ./homarr/appdata
chown -R 1000:999 ./homarr/appdata
```

Important here is that the group ID is set to `999` as we created the `docker` group with this ID.

# Single Sign On (/docs/advanced/single-sign-on)

Homarr supports multiple authentication options, from internal userbase (credentials), to LDAP (with Active directory support), and OIDC.

## Common configuration [#common-configuration]

| Environment Variable        | Description                                                                                                                                                                                                                                                                                                             | Default Value |
| --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| AUTH\_PROVIDERS             | Select Which provider to use between *credentials*, *ldap* and *oidc*. <br /> Multiple providers can be enabled with by separating them with `,`, (ex. `AUTH_PROVIDERS=credentials,oidc`, it is highly recommended to just enable one provider).                                                                        | credentials   |
| AUTH\_LOGOUT\_REDIRECT\_URL | URL to redirect to after clicking logging out.                                                                                                                                                                                                                                                                          | ---           |
| AUTH\_SESSION\_EXPIRY\_TIME | Time for the session to time out. Can be set as pure number, which will automatically be used in seconds, or followed by s, m, h or d for seconds, minutes, hours or days. (ex: "30m")                                                                                                                                  | "30d"         |
| AUTH\_COOKIE\_PREFIX        | Prefix used for all authentication cookies (session, csrf, callback, pkce, state, nonce). Change this if you run another Auth.js/NextAuth app on the same hostname as Homarr (browsers scope cookies by host, not by port) to avoid cookie name collisions. Only letters, numbers, hyphens and underscores are allowed. | `homarr`      |

## Credentials provider [#credentials-provider]

This is the default provider.

First user is created using the onboarding process and the rest can be created by this user (see [user management](/docs/management/users))

## LDAP provider [#ldap-provider]

This provider authenticates against an LDAP server.

Any user in LDAP server that signs in gets created in Homarr database.

Roles are fetched from LDAP groups. Groups with the same name of Homarr will be used to synchronize them.

<details>
  <summary>
    Example Setup
  </summary>

  <div>
    In this setup we are using [lldap](https://github.com/lldap/lldap). Install your server using docker or [as a service](https://github.com/lldap/lldap/blob/main/example_configs/lldap.service).

    Minimal configuration requires 4 env variables, LDAP URI, base, user and password for querying data.

    There's more variables, but all have defaults corresponding to lldap defaults. These might need to be changed if you have different LDAP provider.

    ```
    docker run ...
    AUTH_PROVIDERS="ldap"
    AUTH_LDAP_URI="ldap://example.com:3890"
    AUTH_LDAP_BASE="dc=example,dc=com" // Same as LLDAP_LDAP_BASE_DN
    AUTH_LDAP_BIND_DN="uid=admin,ou=People,dc=example,dc=com"
    AUTH_LDAP_BIND_PASSWORD="adminpass" // Same as LLDAP_LDAP_USER_PASS
    ```

    ```
    #Docker compose
    version: x
    services:
      homarr:
        environment:
          AUTH_PROVIDERS: ldap
          AUTH_LDAP_URI: ldap://example.com:3890
          AUTH_LDAP_BASE: dc=example,dc=com #Same as LLDAP_LDAP_BASE_DN
          AUTH_LDAP_BIND_DN: uid=admin,ou=People,dc=example,dc=com
          AUTH_LDAP_BIND_PASSWORD: adminpass #Same as LLDAP_LDAP_USER_PASS
    ```

    In lldap, create a user and admin group, assign this user to the external admin group configured during onboarding. You can log in using this user and he will be in the group.

    Here is another example for Active Directory:

    ```
    AUTH_LDAP_URI="ldap://ldap.abc.xyz:389
    AUTH_LDAP_BASE="DC=abc,DC=xyz"
    AUTH_LDAP_BIND_DN="CN=Administrator,CN=Users,DC=abc,DC=xyz"
    AUTH_LDAP_BIND_PASSWORD="YourAdministratorPassword"
    AUTH_LDAP_USERNAME_ATTRIBUTE="sAMAccountName"
    AUTH_LDAP_USER_MAIL_ATTRIBUTE="userPrincipalName"
    AUTH_LDAP_GROUP_CLASS="group"
    AUTH_LDAP_GROUP_MEMBER_ATTRIBUTE="member"
    AUTH_LDAP_GROUP_MEMBER_USER_ATTRIBUTE="dn"
    AUTH_LDAP_SEARCH_SCOPE="sub"
    AUTH_LDAP_USERNAME_FILTER_EXTRA_ARG="(sAMAccountType=805306368)"
    ```

    User mail attribute is set to userPrincipalName as it follows the right schema, but it is recommended to use real emails and the default 'mail' value.
  </div>
</details>

### LDAP configuration [#ldap-configuration]

| Environment Variable                    | Description                                               | Default value      |
| --------------------------------------- | --------------------------------------------------------- | ------------------ |
| `AUTH_LDAP_URI`                         | URI of your LDAP server                                   | ---                |
| `AUTH_LDAP_BASE`                        | Base dn of your LDAP server                               | ---                |
| `AUTH_LDAP_BIND_DN`                     | User used for finding users and groups                    | ---                |
| `AUTH_LDAP_BIND_PASSWORD`               | Password for bind user                                    | ---                |
| `AUTH_LDAP_USERNAME_ATTRIBUTE`          | Attribute used for username                               | uid                |
| `AUTH_LDAP_USER_MAIL_ATTRIBUTE`         | Attribute used for mail field                             | mail               |
| `AUTH_LDAP_GROUP_CLASS`                 | Class used for querying groups                            | groupOfUniqueNames |
| `AUTH_LDAP_GROUP_MEMBER_ATTRIBUTE`      | Attribute used for querying group member                  | member             |
| `AUTH_LDAP_GROUP_MEMBER_USER_ATTRIBUTE` | User attribute used for comparing with group member       | dn                 |
| `AUTH_LDAP_SEARCH_SCOPE`                | Serach scopes between base, one and sub                   | base               |
| `AUTH_LDAP_USERNAME_FILTER_EXTRA_ARG`   | Extra arguments for user search filter (& based)          | ---                |
| `AUTH_LDAP_GROUP_FILTER_EXTRA_ARG`      | Extra arguments for user's groups search filter (& based) | ---                |

## OIDC provider [#oidc-provider]

This provider authenticates using OIDC protocol.

Users signed in using OIDC are created in Homarr.

Roles are fetched from group claims. This can also be changed to roles for example added to a azure app registration by using the `AUTH_OIDC_GROUPS_ATTRIBUTE`.

If you'd rather manage group memberships for OIDC users locally (instead of via the IdP), set `AUTH_OIDC_GROUPS_LOCAL_MANAGEMENT=true`. While enabled, Homarr stops syncing OIDC users' group memberships from the groups claim, and admins can add/remove OIDC users on a group's members page. If you turn this back to `false`, the next login of each user resumes the regular sync and reconciles their groups with the IdP's claim again, which may remove memberships that were added manually while local management was enabled.

To let an existing credentials user also sign in with OIDC, set `AUTH_OIDC_ENABLE_DANGEROUS_CREDENTIALS_LINKING=true`. On the first OIDC sign-in, Homarr links a credentials user with the same email address instead of creating a second user. The user keeps their password login, local username and profile, groups, permissions, boards, settings, and API keys. OIDC profile and group claims do not overwrite the credentials-owned data. Homarr requires the OIDC profile to contain `email_verified: true` while this option is enabled. Only enable this when your OIDC provider verifies email addresses, because a matching email could otherwise be used to take over an existing account.

<details>
  <summary>
    Example Setup
  </summary>

  <div>
    In this example we will be using [Authelia](https://github.com/authelia/authelia).

    You can use any setup, but the simplest is [local](https://github.com/authelia/authelia/blob/master/examples/compose/local/authelia/configuration.yml).

    You also have to [enable OIDC in Authelia](https://www.authelia.com/configuration/identity-providers/open-id-connect/).

    Create a client for homarr. To generate client secret you can [use authelia](https://www.authelia.com/integration/openid-connect/frequently-asked-questions/#how-do-i-generate-client-secrets). This is an example config:

    ```yaml
    identity_providers:
    oidc:
    ...
    clients:
    - id: homarr
    secret: <secret_hash>
    public: false
    authorization_policy: one_factor
    redirect_uris:
    - https://example.com/api/auth/callback/oidc
    - http://localhost:3000/api/auth/callback/oidc
    scopes:
    - openid
    - groups
    - profile
    - email
    userinfo_signing_algorithm: none
    consent_mode: implicit # self hosted
    ```

    In Homarr use following env variables.

    ```
    AUTH_PROVIDERS="oidc"
    AUTH_OIDC_ISSUER="https://auth.example.com"
    AUTH_OIDC_CLIENT_SECRET="client_secret"
    AUTH_OIDC_CLIENT_ID="homarr"
    AUTH_OIDC_CLIENT_NAME="Authelia"
    AUTH_OIDC_FORCE_USERINFO="true" --> from v4.39 of authelia and above this is required
    ```

    For an azure app registration the setup could look like this:

    ```
    AUTH_PROVIDERS="oidc"
    AUTH_OIDC_ISSUER="https://login.microsoftonline.com/<teanant-id>/v2.0"
    AUTH_OIDC_CLIENT_SECRET="<client-secret>"
    AUTH_OIDC_CLIENT_ID="<client-id>"
    AUTH_OIDC_CLIENT_NAME="Azure"
    AUTH_OIDC_SCOPE_OVERWRITE="openid email profile" # Groups scope does not exist in azure
    AUTH_OIDC_GROUPS_ATTRIBUTE="roles" # We use the roles of the app registration so that we don't need to use uuids as our groups
    ```
  </div>
</details>

### OIDC configuration [#oidc-configuration]

| Environment Variable                             | Description                                                                                                                                                                                         | Default value               |
| ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |
| `AUTH_OIDC_ISSUER`                               | Issuer URI of OIDC provider. This has generally to be **without trailing slash** except for **Authentik**                                                                                           | ---                         |
| `AUTH_OIDC_CLIENT_ID`                            | ID of OIDC client (application)                                                                                                                                                                     | ---                         |
| `AUTH_OIDC_CLIENT_SECRET`                        | Secret of OIDC client (application)                                                                                                                                                                 | ---                         |
| `AUTH_OIDC_CLIENT_NAME`                          | Display name of provider (in login screen)                                                                                                                                                          | OIDC                        |
| `AUTH_OIDC_AUTO_LOGIN`                           | Automatically redirect to OIDC login                                                                                                                                                                | false                       |
| `AUTH_OIDC_SCOPE_OVERWRITE`                      | Overwrite default scopes (openid, profile, email)                                                                                                                                                   | openid email profile groups |
| `AUTH_OIDC_GROUPS_ATTRIBUTE`                     | Attribute used for groups (roles) claim. Dot-separated paths such as `resource_access.homarr.roles` are supported.                                                                                  | groups                      |
| `AUTH_OIDC_GROUPS_LOCAL_MANAGEMENT`              | Stop syncing group memberships of OIDC users from the groups claim and manage them locally via the group members page instead                                                                       | false                       |
| `AUTH_OIDC_NAME_ATTRIBUTE_OVERWRITE`             | Overwrite name attribute. Dot-separated paths are supported. By default it will use preferred\_username if it does not contain a `@` and otherwise name.                                            | ---                         |
| `AUTH_OIDC_FORCE_USERINFO`                       | Force userinfo endpoint to be used for user information.                                                                                                                                            | false                       |
| `AUTH_OIDC_ENABLE_DANGEROUS_ACCOUNT_LINKING`     | Enable account linking for OIDC provider. This will link the OIDC accounts by email. Be sure that you have verified emails to prevent stealing accounts.                                            | false                       |
| `AUTH_OIDC_ENABLE_DANGEROUS_CREDENTIALS_LINKING` | Link an OIDC identity to an existing credentials user with the same email. The credentials login and existing user data are preserved. Requires the OIDC profile to contain `email_verified: true`. | false                       |
| `AUTH_OIDC_TOKEN_ENDPOINT_AUTH_METHOD`           | Override method for the token endpoint authentication. Supported values are `client_secret_basic`, `client_secret_post`, `client_secret_jwt` and `none`.                                            | client\_secret\_basic       |

### OIDC permissions [#oidc-permissions]

To give a user special permissions, first create a new group in homarr and assign the permission desired.
For example if the group on homarr is called `homarr-admins` a new group on the oidc provider, for example authentik needs to be created with the same name, that would be `homarr-admins`.
After assigning the group on the oidc provider to the user, and logging again into homarr, the user should automatically get placed in that group and inherit the permissions defined.

## Example setups [#example-setups]

<Tabs>
<TabItem value="authentik" label="Authentik (OIDC) Example" default>
This example demonstrates how to use [Authentik](https://goauthentik.io/) as an OIDC provider for Homarr.

User and group management is handled within Authentik. Homarr synchronizes group memberships based on OIDC claims provided by Authentik. To grant administrative privileges, create a group in Authentik (e.g., `homarr-admins`) and add the relevant users. Then add the group with the same name in Homarr and assign the desired permissions to it.

<details>
  <summary>
    Example Setup
  </summary>

  <div>
    **1. Configure Authentik:**

    * Create an OIDC application in Authentik for Homarr.
    * Set the redirect URIs to:
      * `https://<your-homarr-domain>/api/auth/callback/oidc`
      * `http://localhost:3000/api/auth/callback/oidc` (for local development)
    * Record the client ID, client secret, and application slug.
    * Create a group (e.g., `homarr-admins`) and assign users who require admin access.

    **2. Example .env file:**

    Generate `SECRET_ENCRYPTION_KEY` with `openssl rand -hex 32`; do not copy an example key between installs.

    ```bash
    OIDC_CLIENT_ID=<REPLACE_WITH_OIDC_CLIENT_ID>
    OIDC_CLIENT_SECRET=<REPLACE_WITH_OIDC_CLIENT_SECRET>
    OIDC_SLUG=homarr #Application slug in Authentik
    AUTH_DOMAIN=auth.example.com #Authentik FQDN
    ADMIN_GROUP=homarr-admins #Authentik group for Homarr admins
    HOMARR_FQDN=homarr.example.com #Homarr FQDN
    SECRET_ENCRYPTION_KEY=<REPLACE_WITH_64_HEX_CHARACTERS>
    ```

    **3. Example Docker Compose configuration:**

    ```yaml {14-24}
    services:
      homarr:
        image: ghcr.io/homarr-labs/homarr:latest
        container_name: homarr
        restart: unless-stopped
        ports:
          - '7575:7575'
        volumes:
          - ./homarr:/appdata
          - /var/run/docker.sock:/var/run/docker.sock:ro
        environment:
          - TZ=America/Los_Angeles
          - SECRET_ENCRYPTION_KEY=${SECRET_ENCRYPTION_KEY}
          - AUTH_PROVIDERS=oidc #(optional: include ',credentials' to keep local accounts as fallback)
          - AUTH_OIDC_CLIENT_ID=${OIDC_CLIENT_ID}
          - AUTH_OIDC_CLIENT_SECRET=${OIDC_CLIENT_SECRET}
          - AUTH_OIDC_ISSUER=https://${AUTH_DOMAIN}/application/o/${OIDC_SLUG}/
          - AUTH_OIDC_URI=https://${AUTH_DOMAIN}/application/o/authorize
          - AUTH_OIDC_CLIENT_NAME=authentik
          - AUTH_OIDC_SCOPE_OVERWRITE=openid email profile groups
          - AUTH_OIDC_GROUPS_ATTRIBUTE=groups
          - AUTH_LOGOUT_REDIRECT_URL=https://${AUTH_DOMAIN}/application/o/${OIDC_SLUG}/end-session/
          - AUTH_OIDC_AUTO_LOGIN=true #To sign in with Authentik automatically
        networks:
          - my-network
    networks:
      my-network:
        external: true
    ```

    **4. Additional Notes:**

    * Ensure both Authentik and Homarr are accessible via the specified FQDNs.
    * The `AUTH_OIDC_GROUPS_ATTRIBUTE` should correspond to the claim in Authentik that contains group names (typically `groups`).
    * Your user will automatically be placed in groups that have the same name as those of authentik. So simply create them in Homarr and give them the permissions you want.
    * For further information, refer to the [Authentik OIDC documentation](https://goauthentik.io/docs/providers/oauth2/).
  </div>
</details>

See [OIDC configuration](#oidc-configuration) for additional options.
</TabItem>

<TabItem value="google" label="Google (OIDC) Example" default>
This example demonstrates how to use [Google Auth Platform](https://console.cloud.google.com/auth/overview) as an OIDC provider for Homarr.

Unfortunately Google does not support synchronization of group membership. See [https://issuetracker.google.com/issues/133774835?pli=1](https://issuetracker.google.com/issues/133774835?pli=1).

<details>
  <summary>
    Example Setup
  </summary>

  <div>
    **1. Setup (Google):**

    * Create a Project in [Google Cloud Console](https://console.cloud.google.com/) for Homarr  and switch to that Project.
    * Configure [Authorized Domains](https://console.cloud.google.com/auth/branding) and set it to `<your-homarr-domain>`.
    * Create a new [OAuth Client](https://console.cloud.google.com/auth/clients):
      * Select Application Type `Web`
      * Set the redirect URI to `https://<your-homarr-domain>/api/auth/callback/oidc`
    * Record the `Client-ID` and `Client Key` (secret).

    **2. Example .env file (Homarr):**

    Generate `SECRET_ENCRYPTION_KEY` with `openssl rand -hex 32`; do not copy an example key between installs.

    ```bash
    OIDC_CLIENT_ID=<REPLACE_WITH_GOOGLE_CLIENT_ID>
    OIDC_CLIENT_SECRET=<REPLACE_WITH_GOOGLE_CLIENT_SECRET>
    HOMARR_FQDN=homarr.example.com #Homarr FQDN
    SECRET_ENCRYPTION_KEY=<REPLACE_WITH_64_HEX_CHARACTERS>
    ```

    **3. Example Docker Compose configuration (Homarr):**

    ```yaml {14-20}
    services:
      homarr:
        image: ghcr.io/homarr-labs/homarr:latest
        container_name: homarr
        restart: unless-stopped
        ports:
          - '7575:7575'
        volumes:
          - ./homarr:/appdata
          - /var/run/docker.sock:/var/run/docker.sock:ro
        environment:
          - TZ=Europe/Berlin
          - SECRET_ENCRYPTION_KEY=${SECRET_ENCRYPTION_KEY}
          - AUTH_PROVIDERS=oidc #(optional: include ',credentials' to keep local accounts as fallback)
          - AUTH_OIDC_CLIENT_ID=${OIDC_CLIENT_ID}
          - AUTH_OIDC_CLIENT_SECRET=${OIDC_CLIENT_SECRET}
          - AUTH_OIDC_ISSUER=https://accounts.google.com
          - AUTH_OIDC_CLIENT_NAME=Google
          - AUTH_OIDC_SCOPE_OVERWRITE=openid email profile
          - AUTH_OIDC_NAME_ATTRIBUTE_OVERWRITE=name
        networks:
          - my-network
    networks:
      my-network:
        external: true
    ```
  </div>
</details>

See [OIDC configuration](#oidc-configuration) for additional options.
</TabItem>
</Tabs>

# Proxies and Certificates (/docs/advanced/proxy)

## Allowing self-signed certificates [#allowing-self-signed-certificates]

Some users may come across a barrier, where they're unable to receive a 200 response from the Ping widget for some apps, while using self-signed certificates or a local certificate authory.

<CalloutContainer type="info">
<CalloutTitle>
What's going on?
</CalloutTitle>

<CalloutDescription>
Homarr is trying to communicate to your apps via the integrations.
It usually doesn't matter if Homarr is running on `http` or `https`.
Your apps have a self-signed certificate - Homarr will recognize that the certificate was signed by an unknown authority and requests will be blocked.
</CalloutDescription>
</CalloutContainer>

To allow self-signed certificates, you can configure them on the certificates management page. You can find more informations on the dedicated page: [Certificates](/docs/management/certificates/)

## Securing Homarr with Traefik [#securing-homarr-with-traefik]

Copying the configuration straight from the docker-compose file won't work if you are running Homarr behind Traefik, such as a Portainer setup, or docker-swarm. In that case, you should use the following slightly modified configuration:

```yaml
version: "3"
services:
  homarr:
    container_name: homarr
    image: ghcr.io/homarr-labs/homarr:latest
    restart: unless-stopped
    volumes:
      - ./homarr/appdata:/appdata
    environment:
      - BASE_URL=https://your.internal.dns.address.here.com
      - SECRET_ENCRYPTION_KEY=your_64_character_hex_string # <--- can be generated with `openssl rand -hex 32`
    networks:
      - proxy
    labels:
      traefik.enable: true
      traefik.http.routers.homarr.rule: Host(`your.internal.dns.address.here.com`)
      traefik.http.routers.homarr.entrypoints: websecure
      traefik.http.routers.homarr-secure.app: homarr

networks:
  proxy:
    external: true
```

<br />

A sample Traefik docker-compose.yml using Cloudflare for certificate generation that works with the configuration above would be:

```yaml
version: "3"

apps:
  traefik:
    image: traefik:latest
    container_name: traefik
    restart: unless-stopped
    security_opt:
      - no-new-privileges:true
    networks:
      - proxy
    ports:
      - 80:80
      - 443:443
    environment:
      - CF_API_EMAIL=yourcfemail@here.com
      - CF_DNS_API_TOKEN=long-token-from-cf

    command:
      - "--log.level=DEBUG"
      - "--providers.docker=true"
      - "--providers.docker.exposedbydefault=false"
      - "--providers.docker.endpoint=unix:///var/run/docker.sock"
      - "--entrypoints.web.address=:80"
      - "--entrypoints.web.http.redirections.entryPoint.to=websecure"
      - "--entrypoints.web.http.redirections.entryPoint.scheme=https"
      - "--entrypoints.web.http.redirections.entrypoint.permanent=true"
      - "--entrypoints.websecure.address=:443"
      - "--entrypoints.websecure.http.tls.certResolver=cloudflare"
      - "--certificatesresolvers.cloudflare.acme.storage=acme.json"
      - "--certificatesResolvers.cloudflare.acme.email=yourcfemail@here.com"
      - "--certificatesResolvers.cloudflare.acme.dnsChallenge=true"
      - "--certificatesResolvers.cloudflare.acme.dnschallenge.provider=cloudflare"
      - "--certificatesResolvers.cloudflare.acme.dnschallenge.resolvers=1.1.1.1:53,1.0.0.1:53"
      - "--serversTransport.insecureSkipVerify=true" # Or proxmox gives an error 500 due to its own self-signed cert

    volumes:
      - /etc/localtime:/etc/localtime:ro
      - /var/run/docker.sock:/var/run/docker.sock:ro
      - ./data/acme.json:/acme.json

networks:
  proxy:
    external: true
```

<CalloutContainer type="idea">
<CalloutDescription>
Of particular note here is that both configurations explicitly define which network they are using, in this case "proxy", but it can be named anything. It just has to be the same across all apps for which Traefik is serving as a proxy. These are marked as external because the proxy network was manually created by running: `docker network create proxy` but this might be unnecessary depending on HOW exactly you are running Traefik. For example, if running [Traefik with Portainer](https://docs.portainer.io/advanced/reverse-proxy/traefik#deploying-in-a-docker-standalone-scenario), you can follow their official docs on how to set up Traefik and Portainer together, and you can just focus on the Homarr docker labels instead.
</CalloutDescription>
</CalloutContainer>

## Securing Homarr with Caddy [#securing-homarr-with-caddy]

If you are using Caddy as the reverse proxy for your setup, your `docker-compose.yml` should look something like this:

```yaml
services:
  # <-- [Homarr installation]

  caddy:
    container_name: caddy
    image: caddy:2
    restart: unless-stopped
    ports:
      - 80:80
      - 443:443
      - 443:443/udp
    volumes:
      - ./Caddyfile:/etc/caddy/Caddyfile
      - caddy_data:/data
      - caddy_config:/config
    networks:
      - proxy

volumes:
  caddy_data:
  caddy_config:

networks:
  proxy:
    external: true
```

<CalloutContainer type="warning">
<CalloutDescription>
Homarr and Caddy must share the same Docker network:

```yaml
homarr:
  ...
  networks:
    - proxy
```
</CalloutDescription>
</CalloutContainer>

Next, create a file named `Caddyfile` at the same level as your `docker-compose.yml` file with the following content:

```
homarr.mydomain.com {
	reverse_proxy homarr:7575
}
```

If you want more information about working with Caddy and Docker Compose, refer to the official documentation:
[https://caddyserver.com/docs/running#docker-compose](https://caddyserver.com/docs/running#docker-compose)

# Styling (/docs/advanced/styling)

Homarr uses Mantine and supports custom CSS at two scopes:

* **Global:** **Management → Settings → Instance branding → Custom CSS**.
* **Board:** **Board settings → Custom CSS**. Board CSS loads after the global stylesheet and can override it.

Both editors accept direct CSS and Workshop imports.

<CalloutContainer type="warning">
<CalloutDescription>
Custom CSS can break after updates and is not an authorization boundary. Hidden controls remain accessible to users who
have permission to use them.
</CalloutDescription>
</CalloutContainer>

## Target elements [#target-elements]

Use browser developer tools to inspect the element and test a selector. Prefer stable semantic or Mantine class names;
avoid generated classes such as `mantine-Card-x2fske`, which change between builds.

To target one widget, add a custom class under **Edit item → Advanced options** and use that class in the board CSS.

Use `!important` only when the existing cascade requires it.

## Theme variables [#theme-variables]

Mantine exposes [CSS variables](https://mantine.dev/styles/css-variables-list/) that can be overridden globally or per
board:

```css
:root {
  --mantine-primary-color-filled: #ffbb00;
}
```

CSS changes presentation only; use widgets, integrations, permissions, or application code for behavior.

# Docker (/docs/getting-started/installation/docker)

Docker Compose is the recommended installation method. Install
[Docker Engine](https://docs.docker.com/engine/install/) and the
[Compose plugin](https://docs.docker.com/compose/install/).

## Docker Compose [#docker-compose]

<DockerInstallSnippet data-visual-test="blackout" />

Start Homarr from the directory containing `docker-compose.yaml`:

```sh
docker compose up -d
```

Persist `/appdata`; it contains the database and configuration. Mount the Docker socket only when Homarr needs Docker
discovery or management.

Integration URLs must be reachable from the Homarr container. Browser-facing app URLs may use a different hostname;
see [Managing integrations](/docs/management/integrations#configuration).

### Update [#update]

Update the image and recreate the container with the same configuration. Homarr runs database migrations automatically
at startup, including when moving from v1 to v2; no separate upgrade procedure is needed. Keep the `/appdata` mount and
`SECRET_ENCRYPTION_KEY` unchanged. Workshop connects to the production service by default.

```sh
docker compose pull
docker compose up -d
```

### Uninstall [#uninstall]

`docker compose down` removes the containers and Compose network. Delete the configured `/appdata` host directory or
volume only when the Homarr data is no longer needed.

## Docker CLI [#docker-cli]

The equivalent standalone container is:

```sh
docker run \
  --name homarr \
  --restart unless-stopped \
  -p 7575:7575 \
  -v /var/run/docker.sock:/var/run/docker.sock \
  -v /absolute/path/to/homarr/appdata:/appdata \
  -e SECRET_ENCRYPTION_KEY='your_64_character_hex_string' \
  -d ghcr.io/homarr-labs/homarr:latest
```

Remove the Docker socket mount when it is not required. To update, pull the current image, recreate the container with
the same arguments, and keep the `/appdata` mount and `SECRET_ENCRYPTION_KEY` unchanged.

# EasyPanel (/docs/getting-started/installation/easy-panel)

<CalloutContainer type="warning">
<CalloutDescription>
Easypanel has not updated to 1.0 yet. There template is still on 0.15.4.
</CalloutDescription>
</CalloutContainer>

Easypanel is a modern server control panel. If you [run Easypanel](https://easypanel.io/docs) on your server, you can deploy Homarr with 1 click on it.

[![Deploy to Easypanel](https://easypanel.io/img/deploy-on-easypanel-40.svg)](https://easypanel.io/docs/templates/homarr)

# Helm (/docs/getting-started/installation/helm)

<img src="https://raw.githubusercontent.com/homarr-labs/charts/refs/heads/main/charts/homarr/icon.svg" align="right" width="92" alt="homarr logo">

![Version: 8.28.2](https://img.shields.io/badge/Version-8.28.2-informational?style=flat)
![Type: application](https://img.shields.io/badge/Type-application-informational?style=flat)
![AppVersion: v1.76.2](https://img.shields.io/badge/AppVersion-v1.76.2-informational?style=flat)

A Helm chart to deploy homarr for Kubernetes

**Homepage:** [https://homarr-labs.github.io/charts/charts/homarr/](https://homarr-labs.github.io/charts/charts/homarr/)

## Source Code [#source-code]

* [https://github.com/homarr-labs/homarr](https://github.com/homarr-labs/homarr)

## Requirements [#requirements]

Kubernetes: `>=1.24.0-0`

## Dependencies [#dependencies]

This chart has no dependencies.

## Installing the Chart [#installing-the-chart]

To install the chart with the release name `homarr`

### OCI (Recommended) [#oci-recommended]

```console
helm install homarr oci://ghcr.io/homarr-labs/charts/homarr
```

### Traditional [#traditional]

```console
helm repo add homarr-labs https://homarr-labs.github.io/charts/
helm repo update
helm install homarr homarr-labs/homarr
```

## Uninstalling the Chart [#uninstalling-the-chart]

To uninstall the `homarr` deployment

```console
helm uninstall homarr
```

The command removes all the Kubernetes components associated with the chart **including persistent volumes** and deletes the release.

## Configuration [#configuration]

Read through the [values.yaml](https://github.com/homarr-labs/charts/blob/dev/charts/homarr/values.yaml) file. It has several commented out suggested values.

Specify each parameter using the `--set key=value[,key=value]` argument to `helm install`.

```console
helm install homarr \
  --set env.TZ="America/New York" \
    homarr-labs/homarr
```

Alternatively, a YAML file that specifies the values for the above parameters can be provided while installing the chart.

```console
helm install homarr homarr-labs/homarr -f values.yaml
```

## Custom configuration [#custom-configuration]

### Secrets [#secrets]

To avoid including sensitive information in plain text within your version control, consider using a declarative approach by applying secrets directly with kubectl apply. For example, instead of including repository credentials in your Helm values, you can leverage a kubernetes secrets manager.

Below is an exhaustive list of all secrets:

| FEATURE  | SECRET NAME      | SECRET KEYS                          | Required |
| -------- | ---------------- | ------------------------------------ | -------- |
| OIDC     | auth-oidc-secret | oidc-client-id<br>oidc-client-secret | No       |
| LDAP     | auth-ldap-secret | bind-password                        | No       |
| DATABASE | db-secret        | db-url                               | No       |
| DATABASE | db-encryption    | db-encryption-key                    | yes      |

### Database [#database]

SQLite is the default; PostgreSQL is also supported. Existing MySQL installations must [convert to SQLite before upgrading to v2](/docs/advanced/mysql-to-sqlite).

You have multiple options for configuring the database:

| DRIVER TYPE    | Persistence mode             |
| -------------- | ---------------------------- |
| better-sqlite3 | Pod disk                     |
| better-sqlite3 | homarr-database PVC          |
| node-postgres  | External Postgresql database |

#### Pod disk [#pod-disk]

No additional configuration is required. However, keep in mind that if the pod restarts, all data will be lost. This setup is not *recommended* for production use.

To create the necessary database secret, execute the following command:

<details>
<summary>Required Secrets</summary>

```yaml
kubectl create secret generic db-encryption \
--from-literal=db-encryption-key='<SECRET_ENCRYPTION_KEY_SECRET_TO_CHANGE>' \
--namespace homarr
```

</details>

#### PVC [#pvc]

To persist data, you need to enable the `homarr-database` PVC. This will store the Homarr database on a mounted volume.

Associated secret to create :

<details>
<summary>DB Required Secrets</summary>

```yaml
kubectl create secret generic db-encryption \
--from-literal=db-encryption-key='<SECRET_ENCRYPTION_KEY_SECRET_TO_CHANGE>' \
--namespace homarr
```

</details>

Bellow an example of the override value file :

<details>
<summary>values.yaml</summary>

```yaml
persistence:
  homarrDatabase:
    enabled: true
    storageClassName: "default"
    size: "1Gi"
```

</details>

#### External Postgresql database [#external-postgresql-database]

To create the necessary database secrets, execute the following command:

<details>
<summary>Required Secrets</summary>

```yaml
kubectl create secret generic db-encryption \
--from-literal=db-encryption-key='<SECRET_ENCRYPTION_KEY_SECRET_TO_CHANGE>' \
--namespace homarr
```

```yaml
kubectl create secret generic db-secret \
--from-literal=db-url='postgresql://user:password@host:port/homarrdb' \
--namespace homarr
```

</details>

Below is an example of the override values file:

<details>
<summary>values.yaml</summary>

```yaml
database:
  type: postgresql
```

</details>

### Ingress [#ingress]

The ingress section in the values.yaml file allows you to configure how external traffic accesses your application through an Ingress resource. This section defines whether Ingress is enabled, the class to use, and how to set up hosts, paths, and TLS for secure connections.

<details>
<summary>values.yaml</summary>

```yaml
service:
  enabled: true # Ensure the service is enabled for Ingress to route traffic
ingress:
  enabled: true
  ingressClassName: "traefik"
  annotations:
  # Add any additional annotations as needed
  hosts:
    - host: homarr.homelab.dev
      paths:
        - path: /
          pathType: ImplementationSpecific
  tls:
    - hosts:
        - "homarr.homelab.dev"
        - "www.homarr.homelab.dev"
      secretName: homelab-tls
```

</details>

### HTTPRoute (Gateway API) [#httproute-gateway-api]

The httproute section in the values.yaml file allows you to configure how external traffic accesses your application using the Kubernetes Gateway API.
This provides a more expressive and future-proof alternative to Ingress, with support for advanced routing, filters, and multiple parent Gateways.

<details>
<summary>values.yaml</summary>

```yaml
service:
  enabled: true # must be enabled for HTTPRoute to forward traffic
httproute:
  enabled: true
  parentRefs:
    - name: my-gateway
      namespace: default
  hostnames:
    - homarr.homelab.dev
  rules:
    - matches:
        - path:
            type: PathPrefix
            value: /
      backendRefs:
        - name: homarr
          port: 7575
```

</details>

#### Notes: [#notes]

* parentRefs: the Gateway(s) this route attaches to. Gateways must already exist.
* hostnames: domain names this route applies to.
* rules: each rule can define matches (paths, headers, queries), optional filters, and backendRefs to services
* TLS must be configured on the Gateway (not on HTTPRoute). For example, the Gateway can have a TLS listener for homarr.homelab.dev, and this route will automatically apply once matched.

### Certificates [#certificates]

Configuration for trusted certificate persistence. Supports:

* Declarative config via `configmap` or `secret`
* Pre-existing secret with `existingSecret`

#### type: configmap [#type-configmap]

Use inline certificates to generate a ConfigMap, mounted as individual files.

<details>
<summary>values.yaml</summary>

```yaml
persistence:
  homarrTrustedCerts:
    enabled: true
    type: configmap
    certificates:
      cert1.crt: |
        -----BEGIN CERTIFICATE-----
        MIID...ABCD==
        -----END CERTIFICATE-----
      cert2.crt: |
        -----BEGIN CERTIFICATE-----
        MIID...EFGH==
        -----END CERTIFICATE-----
```

</details>

Behavior:

* Helm creates a ConfigMap with keys cert1.crt and cert2.crt
* Mounts them as /appdata/trusted-certificates/cert1.crt and /appdata/trusted-certificates/cert2.crt

#### type: secret [#type-secret]

Use inline certificates to generate a Kubernetes Secret, mounted as files.

<details>
<summary>values.yaml</summary>

```yaml
persistence:
  homarrTrustedCerts:
    enabled: true
    type: secret
    certificates:
      cert1.crt: |
        -----BEGIN CERTIFICATE-----
        MIIC...XYZ==
        -----END CERTIFICATE-----
      cart2.crt: |
        -----BEGIN CERTIFICATE-----
        MIIC...XYZ==
        -----END CERTIFICATE-----
```

</details>

Behavior:

* Helm creates a Kubernetes Secret with cert1.crt and cart2.crt keys
* Mounts it into the container

#### type: existingSecret [#type-existingsecret]

Use an existing Kubernetes Secret, assuming its keys are filenames.

<details>
<summary>values.yaml</summary>

```yaml
persistence:
  homarrTrustedCerts:
    enabled: true
    type: existingSecret
    existingSecretName: "existingSecretName"
    existingSecretKeys:
      - cert3.crt
      - cert4.crt
```

</details>

Behavior:

* No new Secret is created
* Uses existingSecretName directly
* Mounts all keys as files in /appdata/trusted-certificates

#### Summary Table [#summary-table]

| Type             | Creates Resource | Requires Certificates | Uses Existing | Mounts As Files |
| ---------------- | ---------------- | --------------------- | ------------- | --------------- |
| `configmap`      | ConfigMap        | Yes (`certificates`)  | ❌             | ✅               |
| `secret`         | Secret           | Yes (`certificates`)  | ❌             | ✅               |
| `existingSecret` | ❌                | ❌                     | ✅             | ✅               |

All available values are listed on the [artifacthub](https://artifacthub.io/packages/helm/homarr-labs/homarr?modal=values). If you find any issue please open an issue on [github](https://github.com/homarr-labs/charts/issues/new?assignees=maintainers\&labels=bug\&projects=\&template=bug_report.yaml)

## Values [#values]

| Key                                                | Type   | Default                                                                                                                                                                                                                                          | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| -------------------------------------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| additionalObjects                                  | list   | `[]`                                                                                                                                                                                                                                             | Additional resources to deploy. These objects are templated.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| affinity                                           | object | `{}`                                                                                                                                                                                                                                             | Node affinity for pod scheduling                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| autoscaling.enabled                                | bool   | `false`                                                                                                                                                                                                                                          | Enable autoscaling                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| autoscaling.maxReplicas                            | int    | `100`                                                                                                                                                                                                                                            | Maximum replicas                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| autoscaling.minReplicas                            | int    | `1`                                                                                                                                                                                                                                              | Minimum replicas                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| autoscaling.targetCPUUtilizationPercentage         | int    | `80`                                                                                                                                                                                                                                             | Target CPU utilization for autoscaling                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| containerPorts                                     | object | `{"http":{"port":7575,"protocol":"TCP"}}`                                                                                                                                                                                                        | containerPorts defines the ports to open on the container. It is a map where each entry specifies: - `port` (int) (required): The port number to expose inside the container. - `protocol` (string) (required): The network protocol (TCP or UDP) used for the port. - `disabled` (bool) : Optional flag to disable this port (defaults to false). Can be overridden via Helm values. By default, this configuration exposes TCP port 7575 with the name `http`.                                                                                         |
| database.migrationEnabled                          | bool   | `true`                                                                                                                                                                                                                                           | Database migration configuration. DB\_MIGRATIONS\_DISABLED Set to `true` to disable database migrations. Migrations are enabled by default (`false`).                                                                                                                                                                                                                                                                                                                                                                                                    |
| database.type                                      | string | `"sqlite"`                                                                                                                                                                                                                                       | Database type: sqlite or postgresql                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| env.AUTH\_COOKIE\_PREFIX                           | string | `"homarr"`                                                                                                                                                                                                                                       | Prefix used for all authentication cookies. Change if you run another Auth.js/NextAuth app on the same hostname to avoid cookie name collisions. Only letters, numbers, hyphens and underscores.                                                                                                                                                                                                                                                                                                                                                         |
| env.AUTH\_LDAP\_BASE                               | string | `nil`                                                                                                                                                                                                                                            | Base dn of your LDAP server                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| env.AUTH\_LDAP\_BIND\_DN                           | string | `nil`                                                                                                                                                                                                                                            | User used for finding users and groups                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| env.AUTH\_LDAP\_GROUP\_CLASS                       | string | `"groupOfUniqueNames"`                                                                                                                                                                                                                           | Class used for querying groups                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| env.AUTH\_LDAP\_GROUP\_FILTER\_EXTRA\_ARG          | string | `nil`                                                                                                                                                                                                                                            | Extra arguments for user's groups search filter (& based)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| env.AUTH\_LDAP\_GROUP\_MEMBER\_ATTRIBUTE           | string | `"member"`                                                                                                                                                                                                                                       | Attribute used for querying group member                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| env.AUTH\_LDAP\_GROUP\_MEMBER\_USER\_ATTRIBUTE     | string | `"dn"`                                                                                                                                                                                                                                           | User attribute used for comparing with group member                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| env.AUTH\_LDAP\_SEARCH\_SCOPE                      | string | `"base"`                                                                                                                                                                                                                                         | LDAP search scope between base, one or sub                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| env.AUTH\_LDAP\_URI                                | string | `nil`                                                                                                                                                                                                                                            | URI of your LDAP server                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| env.AUTH\_LDAP\_USERNAME\_ATTRIBUTE                | string | `"uid"`                                                                                                                                                                                                                                          | Attribute used for username                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| env.AUTH\_LDAP\_USERNAME\_FILTER\_EXTRA\_ARG       | string | `nil`                                                                                                                                                                                                                                            | Extra arguments for user search filter (& based)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| env.AUTH\_LDAP\_USER\_MAIL\_ATTRIBUTE              | string | `"mail"`                                                                                                                                                                                                                                         | Attribute used for mail field                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| env.AUTH\_LOGOUT\_REDIRECT\_URL                    | string | `nil`                                                                                                                                                                                                                                            | URL to redirect to after clicking logging out.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| env.AUTH\_OIDC\_AUTO\_LOGIN                        | string | `"false"`                                                                                                                                                                                                                                        | Automatically redirect to OIDC login                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| env.AUTH\_OIDC\_CLIENT\_NAME                       | string | `"OIDC"`                                                                                                                                                                                                                                         | Display name of provider (in login screen)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| env.AUTH\_OIDC\_GROUPS\_ATTRIBUTE                  | string | `"groups"`                                                                                                                                                                                                                                       | Attribute used for groups (roles) claim                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| env.AUTH\_OIDC\_ISSUER                             | string | `nil`                                                                                                                                                                                                                                            | Issuer URI of OIDC provider without trailing slash (/)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| env.AUTH\_OIDC\_NAME\_ATTRIBUTE\_OVERWRITE         | string | `nil`                                                                                                                                                                                                                                            | Overwrite name attribute. By default, it will use preferred\_username if it does not contain a @ and otherwise name.                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| env.AUTH\_OIDC\_SCOPE\_OVERWRITE                   | string | `"openid email profile groups"`                                                                                                                                                                                                                  | Override the OIDC scopes                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| env.AUTH\_PROVIDERS                                | string | `"credentials"`                                                                                                                                                                                                                                  | Enabled authentication methods. Multiple providers can be enabled with by separating them with , (ex. AUTH\_PROVIDERS=credentials,oidc, it is highly recommended to just enable one provider).                                                                                                                                                                                                                                                                                                                                                           |
| env.AUTH\_SESSION\_EXPIRY\_TIME                    | string | `"30d"`                                                                                                                                                                                                                                          | Time for the session to time out. Can be set as pure number, which will automatically be used in seconds, or followed by s, m, h or d for seconds, minutes, hours or days. (ex: "30m")                                                                                                                                                                                                                                                                                                                                                                   |
| env.ENABLE\_DNS\_CACHING                           | string | `"false"`                                                                                                                                                                                                                                        | Enables dns caching. This is not yet working for all users. See #4006                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| env.LOG\_LEVEL                                     | string | `"info"`                                                                                                                                                                                                                                         | Log level to use. Possible values: debug/info/warn/error                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| env.NO\_EXTERNAL\_CONNECTION                       | string | `"false"`                                                                                                                                                                                                                                        | Disables some requests that need internet connection                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| env.TZ                                             | string | `"Europe/Paris"`                                                                                                                                                                                                                                 | Your local time zone                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| envSecrets.authLdapCredentials.existingSecret      | string | `"auth-ldap-secret"`                                                                                                                                                                                                                             | Name of existing secret containing LDAP credentials                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| envSecrets.authLdapCredentials.ldapBindingPassword | string | `"bind-password"`                                                                                                                                                                                                                                | Password for bind user secret key                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| envSecrets.authOidcCredentials.existingSecret      | string | `"auth-oidc-secret"`                                                                                                                                                                                                                             | Name of existing secret containing OIDC credentials                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| envSecrets.authOidcCredentials.oidcClientId        | string | `"oidc-client-id"`                                                                                                                                                                                                                               | ID of OIDC client (application) secret key                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| envSecrets.authOidcCredentials.oidcClientSecret    | string | `"oidc-client-secret"`                                                                                                                                                                                                                           | Secret of OIDC client (application) secret key                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| envSecrets.dbCredentials.dbUrlKey                  | string | `"db-url"`                                                                                                                                                                                                                                       | Secret key for DB\_URL Example for external database: `postgresql://username:password@host:port/homarrdb`                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| envSecrets.dbCredentials.existingSecret            | string | `"db-secret"`                                                                                                                                                                                                                                    | Name of existing secret containing DB credentials                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| envSecrets.dbEncryption.existingSecret             | string | `"db-encryption"`                                                                                                                                                                                                                                | Name of existing secret containing DB encryption                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| envSecrets.dbEncryption.key                        | string | `"db-encryption-key"`                                                                                                                                                                                                                            | Secret key for SECRET\_ENCRYPTION\_KEY can be generated with `openssl rand -hex 32`                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| fullnameOverride                                   | string | `""`                                                                                                                                                                                                                                             | Overrides chart's fullname                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| hostAliases                                        | list   | `[]`                                                                                                                                                                                                                                             | Add static entries to /etc/hosts in the Pod. This is useful in the following cases: - You are running in a dual-stack cluster (IPv4 + IPv6) and want to force usage of IPv4 for specific hostnames - Your application is having DNS resolution issues or IPv6 preference issues - You need to override or simulate DNS entries without changing global DNS - You are running in an air-gapped or isolated environment without external DNS Example: hostAliases: - ip: "192.168.1.10" hostnames: - "example.com" - "example.internal"                    |
| httproute                                          | object | `{"enabled":false,"hostnames":["chart-example.local"],"parentRefs":[{"name":"my-gateway","namespace":"default"}],"rules":[{"backendRefs":[{"name":"homarr","port":7575}],"filters":[],"matches":[{"path":{"type":"PathPrefix","value":"/"}}]}]}` | Gateway API HTTPRoute configuration                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| httproute.enabled                                  | bool   | `false`                                                                                                                                                                                                                                          | Enable HTTPRoute                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| httproute.hostnames                                | list   | `["chart-example.local"]`                                                                                                                                                                                                                        | Hostnames this route matches (similar to ingress.hosts.host)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| httproute.parentRefs                               | list   | `[{"name":"my-gateway","namespace":"default"}]`                                                                                                                                                                                                  | References to the parent Gateway(s) this route attaches to. Each item must include at least a `name`, and optionally a `namespace`.                                                                                                                                                                                                                                                                                                                                                                                                                      |
| httproute.rules                                    | list   | `[{"backendRefs":[{"name":"homarr","port":7575}],"filters":[],"matches":[{"path":{"type":"PathPrefix","value":"/"}}]}]`                                                                                                                          | List of routing rules. Each rule can include: - matches: path/header/query matching - filters: optional transformations (redirects, header modifications, etc.) - backendRefs: one or more Kubernetes Services to forward traffic to                                                                                                                                                                                                                                                                                                                     |
| httproute.rules\[0].filters                        | list   | `[]`                                                                                                                                                                                                                                             | Optional filters for this rule (default: empty)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| httproute.rules\[0].matches\[0].path.type          | string | `"PathPrefix"`                                                                                                                                                                                                                                   | Path match type. One of: Exact, PathPrefix, RegularExpression                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| httproute.rules\[0].matches\[0].path.value         | string | `"/"`                                                                                                                                                                                                                                            | Path value to match                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| image.pullPolicy                                   | string | `"IfNotPresent"`                                                                                                                                                                                                                                 | Image pull policy                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| image.repository                                   | string | `"ghcr.io/homarr-labs/homarr"`                                                                                                                                                                                                                   | Image repository                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| image.tag                                          | string | `"v1.76.2"`                                                                                                                                                                                                                                      | Overrides the image tag whose default is the chart appVersion                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| imagePullSecrets                                   | list   | `[]`                                                                                                                                                                                                                                             | Secrets for Docker registry                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| ingress.annotations                                | object | `{}`                                                                                                                                                                                                                                             | Ingress annotations                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| ingress.enabled                                    | bool   | `false`                                                                                                                                                                                                                                          | Enable ingress                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| ingress.hosts                                      | list   | `[{"host":"chart-example.local","paths":[{"path":"/"}]}]`                                                                                                                                                                                        | Ingress hosts configuration                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| ingress.ingressClassName                           | string | `""`                                                                                                                                                                                                                                             | Ingress class name                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| ingress.tls                                        | list   | `[]`                                                                                                                                                                                                                                             | Ingress TLS configuration                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| livenessProbe.failureThreshold                     | int    | `3`                                                                                                                                                                                                                                              | Failure threshold for liveness probe - number of consecutive failures before pod is restarted                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| livenessProbe.httpGet.path                         | string | `"/api/health/live"`                                                                                                                                                                                                                             | This is the liveness check endpoint used by Kubernetes to determine if the application is still running.                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| livenessProbe.httpGet.port                         | int    | `7575`                                                                                                                                                                                                                                           | The port on which the liveness check will be performed. This must be the same as the container port exposed by the application.                                                                                                                                                                                                                                                                                                                                                                                                                          |
| livenessProbe.initialDelaySeconds                  | int    | `10`                                                                                                                                                                                                                                             | Initial delay in seconds before the liveness probe starts                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| livenessProbe.periodSeconds                        | int    | `10`                                                                                                                                                                                                                                             | Period in seconds between liveness probe checks                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| livenessProbe.timeoutSeconds                       | int    | `1`                                                                                                                                                                                                                                              | Timeout in seconds for each liveness probe check                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| nameOverride                                       | string | `""`                                                                                                                                                                                                                                             | Overrides chart's name                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| nodeSelector                                       | object | `{}`                                                                                                                                                                                                                                             | Node selectors for pod scheduling                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| persistence.homarrDatabase.accessMode              | string | `"ReadWriteOnce"`                                                                                                                                                                                                                                | homarr-database access mode                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| persistence.homarrDatabase.enabled                 | bool   | `false`                                                                                                                                                                                                                                          | Enable homarr-database persistent storage                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| persistence.homarrDatabase.mountPath               | string | `"/appdata"`                                                                                                                                                                                                                                     | homarr-database mount path inside the pod                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| persistence.homarrDatabase.name                    | string | `"homarr-database"`                                                                                                                                                                                                                              | homarr-database persistent storage name                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| persistence.homarrDatabase.size                    | string | `"50Mi"`                                                                                                                                                                                                                                         | homarr-database storage size                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| persistence.homarrDatabase.storageClassName        | string | `"local-path"`                                                                                                                                                                                                                                   | homarr-database storage class name                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| persistence.homarrDatabase.volumeClaimName         | string | `""`                                                                                                                                                                                                                                             | homarr-database optional volumeClaimName to target specific PV                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| persistence.homarrTrustedCerts.certificates        | string | `nil`                                                                                                                                                                                                                                            | homarr-trusted-certificates certificates, each entry will become a new trusted certificate as a dedicated file (works only for "configmap" and "secret" mode)                                                                                                                                                                                                                                                                                                                                                                                            |
| persistence.homarrTrustedCerts.enabled             | bool   | `false`                                                                                                                                                                                                                                          | Enable trusted certificates persistence                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| persistence.homarrTrustedCerts.existingSecretKeys  | string | `nil`                                                                                                                                                                                                                                            | List of keys (filenames) to mount from the existing secret (used only when type is "existingSecret")                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| persistence.homarrTrustedCerts.existingSecretName  | string | `""`                                                                                                                                                                                                                                             | Name of the existing Kubernetes Secret to mount (required if type is "existingSecret")                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| persistence.homarrTrustedCerts.mountPath           | string | `"/appdata/trusted-certificates"`                                                                                                                                                                                                                | homarr-trusted-certificates mount path inside the pod                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| persistence.homarrTrustedCerts.type                | string | `"configmap"`                                                                                                                                                                                                                                    | Persistence mode can be : configmap (declarative), secret (declarative) or existingSecret (mount an existing Kubernetes Secret by name and specify which keys to mount as files)                                                                                                                                                                                                                                                                                                                                                                         |
| podAnnotations                                     | object | `{}`                                                                                                                                                                                                                                             | Pod annotations                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| podLabels                                          | object | `{}`                                                                                                                                                                                                                                             | Pod labels                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| podSecurityContext                                 | object | `{}`                                                                                                                                                                                                                                             | Pod security context                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| rbac                                               | object | `{"enabled":false}`                                                                                                                                                                                                                              | Enable RBAC resources for Kubernetes integration Creates Role, ClusterRole, and associated bindings for Homarr's Kubernetes features                                                                                                                                                                                                                                                                                                                                                                                                                     |
| rbac.enabled                                       | bool   | `false`                                                                                                                                                                                                                                          | Enable to create RBAC resources and activate Kubernetes integration                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| readinessProbe.failureThreshold                    | int    | `3`                                                                                                                                                                                                                                              | Failure threshold for readiness probe - number of consecutive failures before pod is considered unready                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| readinessProbe.httpGet.path                        | string | `"/api/health/ready"`                                                                                                                                                                                                                            | This is the readiness check endpoint used by Kubernetes to determine if the application is ready to handle traffic.                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| readinessProbe.httpGet.port                        | int    | `7575`                                                                                                                                                                                                                                           | The port on which the readiness check will be performed. This must match the container's exposed port.                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| readinessProbe.initialDelaySeconds                 | int    | `10`                                                                                                                                                                                                                                             | Initial delay in seconds before the readiness probe starts. increase this value if the pod is slow to fully start.                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| readinessProbe.periodSeconds                       | int    | `10`                                                                                                                                                                                                                                             | Period in seconds between readiness probe checks                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| readinessProbe.timeoutSeconds                      | int    | `1`                                                                                                                                                                                                                                              | Timeout in seconds for each readiness probe check                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| replicaCount                                       | int    | `1`                                                                                                                                                                                                                                              | Number of replicas                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| resources                                          | object | `{}`                                                                                                                                                                                                                                             | Resource configuration                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| securityContext                                    | object | `{}`                                                                                                                                                                                                                                             | Security context                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| service.enabled                                    | bool   | `true`                                                                                                                                                                                                                                           | Enable service                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| service.ipFamilies                                 | list   | `[]`                                                                                                                                                                                                                                             | List of IP families to use for the service. Examples: - \["IPv4"] - \["IPv6"] - \["IPv4", "IPv6"] for dual-stack Leave empty to use cluster default behavior                                                                                                                                                                                                                                                                                                                                                                                             |
| service.ipFamilyPolicy                             | string | `"SingleStack"`                                                                                                                                                                                                                                  | Defines how the service assigns IP families (IPv4/IPv6) Possible values: - SingleStack (default): Only one IP family, usually IPv4 - PreferDualStack: Use dual-stack if the cluster supports it, fallback to single - RequireDualStack: Fail if dual-stack cannot be assigned                                                                                                                                                                                                                                                                            |
| service.ports.app.port                             | int    | `7575`                                                                                                                                                                                                                                           | Service port                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| service.ports.app.protocol                         | string | `"TCP"`                                                                                                                                                                                                                                          | Service protocol                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| service.ports.app.targetPort                       | string | `"http"`                                                                                                                                                                                                                                         | Service target port                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| service.type                                       | string | `"ClusterIP"`                                                                                                                                                                                                                                    | Service type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| strategyType                                       | string | `"RollingUpdate"`                                                                                                                                                                                                                                | `strategyType` specifies the strategy used to replace old Pods by new ones. `strategyType` can be `"Recreate"` or `"RollingUpdate"`. `"RollingUpdate"` is the default value and updates Pods in a rolling update fashion. `"Recreate"` will kill all existing Pods before new ones are created. The `"Recreate"` strategy is necessary when persistent volume's `accessMode` is set to `"ReadWriteOnce"` when using `helm upgrade`, as pod volume attachments to an existing PersistentVolumeClaim need to be cleared before a new pod can attach to it. |
| tolerations                                        | list   | `[]`                                                                                                                                                                                                                                             | Node tolerations for pod scheduling                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |

***

Autogenerated from chart metadata using [helm-docs](https://github.com/norwoodj/helm-docs)

# Home Assistant Add-on (/docs/getting-started/installation/home-assistant)

<CalloutContainer type="warning">
<CalloutDescription>
Home Assistant Add-on is now updated to 1.0. Please add the new repository to your Add-on store. Also make sure to follow the [migration guide](https://homarr.dev/blog/2025/01/19/migration-guide-1.0/) so you don't lose your existing setup.
</CalloutDescription>
</CalloutContainer>

Homarr can be seamlessly integrated into your Home Assistant setup with this add-on. This is perfect for users who rely on Home Assistant as their primary server and don't have a separate device for hosting.

## Prerequisites [#prerequisites]

* [Home Assistant](https://www.home-assistant.io/getting-started/)
* Add-ons are only available if you've used the Home Assistant Operating System or Home Assistant Supervised installation method.

## Installation [#installation]

1. **Add Repository**: Navigate to your Home Assistant Supervisor panel, and go to the Add-on Store. Add the following repository URL: `https://github.com/Wiggen94/ha-homarr-v1-server` or click this button
   [![Open your Home Assistant instance and show the add add-on repository dialog with a specific repository URL pre-filled.](https://my.home-assistant.io/badges/supervisor_add_addon_repository.svg)](https://my.home-assistant.io/redirect/supervisor_add_addon_repository/?repository_url=https%3A%2F%2Fgithub.com%2FWiggen94%2Fha-homarr-v1-server)

2. **Install the Add-on**: Search for "Homarr Server" in the Add-on Store and select it. Click on "Install" to start the installation process.

3. **Start the Add-on**: Once installed and configured, start the Homarr Server add-on from the Home Assistant Supervisor panel.

4. **Access Homarr**: Homarr will be available at `http://<your-home-assistant-ip>:7575`. Open this address in your browser to access your Homarr dashboard.

Your configuration, data and icons will be saved at /shares

# Hostinger (/docs/getting-started/installation/hostinger)

Hostinger offers a one-click Docker deployment of Homarr on its VPS plans. Hostinger maintains the deployment template; you manage your Homarr instance and the VPS.

[Deploy on Hostinger](https://www.hostinger.com/applications/homarr)

## Install Homarr [#install-homarr]

1. Open [Homarr on Hostinger](https://www.hostinger.com/applications/homarr), choose a VPS plan, and follow the account and server setup steps.
2. In the Hostinger dashboard, open **VPS**, select **Manage** for your server, and open **Docker Manager**.
3. If Homarr is not already deployed, choose **Compose → One Click Deploy**, select Homarr from the application catalog, and follow the deployment prompts.
4. Once the project is running, check its published port in Docker Manager. Configure a domain and HTTPS access to that port before creating your account over the internet, then open your HTTPS address.
5. Complete Homarr's onboarding to create your administrator account and first board. Continue with [After the installation](../after-the-installation.mdx).

For the current dashboard workflow, see [Hostinger's Docker Manager deployment guide](https://www.hostinger.com/support/12040815-how-to-deploy-your-first-container-with-hostinger-docker-manager/).

## Connecting your services [#connecting-your-services]

A VPS is outside your home network. For integrations with services at home, configure a private connection, such as a VPN, so the VPS can reach them. A browser bookmark to a local service does not give Homarr's server access to that service.

Use HTTPS when accessing Homarr over the internet. Keep the VPS and Homarr updated, and back up Homarr's persistent data and `SECRET_ENCRYPTION_KEY` before updates. See the [Docker installation guide](./docker.mdx) for Homarr's storage and configuration requirements.

## Partnership [#partnership]

Hostinger provides the VPS we use to deploy the Homarr Workshop and documentation website. We also have an affiliate partnership; purchases through a referral link may support the project. The link on this page currently goes directly to Hostinger's Homarr application page.

# Install Homarr (/docs/getting-started/installation)

Docker Compose is the best starting point for most self-hosters. Choose a platform-specific guide when Homarr will run inside an existing server manager or managed service.

<Callout type="idea" title="Not sure which guide to choose?">
Start with **Docker Compose**. It is the recommended path, has the broadest community support, and makes updates and
backups straightforward.
</Callout>

## Recommended [#recommended]

<Cards>
<Card title="Docker Compose" href="/docs/getting-started/installation/docker">
The recommended installation for most Linux and Windows servers.
</Card>

<Card title="Kubernetes with Helm" href="/docs/getting-started/installation/helm">
Deploy Homarr into an existing Kubernetes cluster.
</Card>

<Card title="Build from source" href="/docs/getting-started/installation/source">
Build and run Homarr directly from the repository.
</Card>
</Cards>

## Self-hosting platforms [#self-hosting-platforms]

<Cards>
<Card title="Unraid" href="/docs/getting-started/installation/unraid">
Install Homarr from the Unraid Community Apps catalog.
</Card>

<Card title="Synology" href="/docs/getting-started/installation/synology">
Run Homarr on a Synology NAS with Container Manager.
</Card>

<Card title="Proxmox" href="/docs/getting-started/installation/proxmox">
Add Homarr to a Proxmox-based homelab.
</Card>

<Card title="Home Assistant Add-on" href="/docs/getting-started/installation/home-assistant">
Install Homarr alongside your Home Assistant environment.
</Card>

<Card title="Portainer" href="/docs/getting-started/installation/portainer">
Deploy and manage Homarr through Portainer stacks.
</Card>

<Card title="QNAP" href="/docs/getting-started/installation/qnap">
Run Homarr on a QNAP NAS.
</Card>

<Card title="Runtipi" href="/docs/getting-started/installation/runtipi">
Add Homarr from the Runtipi app store.
</Card>
</Cards>

## Managed and app platforms [#managed-and-app-platforms]

<Cards>
<Card title="EasyPanel" href="/docs/getting-started/installation/easy-panel">
Deploy Homarr from an Easypanel template.
</Card>

<Card title="Railway" href="/docs/getting-started/installation/railway">
Launch Homarr as a managed Railway service.
</Card>

<Card title="PikaPods" href="/docs/getting-started/installation/pika-pods">
Use a hosted Homarr instance without managing a server.
</Card>

<Card title="Saltbox" href="/docs/getting-started/installation/saltbox">
Add Homarr to a Saltbox deployment.
</Card>
</Cards>

# Pika Pods (/docs/getting-started/installation/pika-pods)

Pika Pods is a hosting platform for open source apps. You can deploy Homarr on Pika Pods with just a few clicks:

[*![Deploy on PikaPods](https://www.pikapods.com/static/run-button.svg)*](https://www.pikapods.com/pods?run=homarr)

# Portainer (/docs/getting-started/installation/portainer)

## Install with a stack [#install-with-a-stack]

Create a Portainer stack with this Compose file:

```yml title="docker-compose.yml"
#---------------------------------------------------------------------#
#     Homarr - A simple, yet powerful dashboard for your server.      #
#---------------------------------------------------------------------#
services:
  homarr:
    container_name: homarr
    image: ghcr.io/homarr-labs/homarr:latest
    restart: unless-stopped
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock # Optional, only if you want docker integration
      - <your-path>/appdata:/appdata
    environment:
      - SECRET_ENCRYPTION_KEY=your_64_character_hex_string # <--- can be generated with `openssl rand -hex 32`
    ports:
      - "7575:7575"
```

Replace `<your-path>` with an absolute host path, generate `SECRET_ENCRYPTION_KEY`, then deploy the stack. See
[Portainer's stack documentation](https://docs.portainer.io/user/docker/stacks/add) for Portainer-specific options.

### Updating [#updating]

Pull the current image and redeploy the stack:

1. Run `docker pull ghcr.io/homarr-labs/homarr:latest` to pull the latest image.
2. Re-run `docker-compose up -d` or re-deploy the stack in Portainer.

# Proxmox (/docs/getting-started/installation/proxmox)

This guide covers how to install homarr inside of a linux-container in ProxmoxVE, using a fully automated approach.

# What is community-scripts? [#what-is-community-scripts]

[https://community-scripts.org/](https://community-scripts.org/)

This installation method is provided by the Proxmox Community-Scripts. We are a community-driven initiative that simplifies the setup of Proxmox Virtual Environment (VE).
With hundreds of scripts to help you manage your Proxmox VE environment. Whether you're a seasoned user or a newcomer, we've got you covered.

# Installation [#installation]

It's as simple as pasting the following snippet into your Proxmox node's console

```bash
bash -c "$(curl -fsSL https://raw.githubusercontent.com/community-scripts/ProxmoxVE/main/ct/homarr.sh)"
```

Check out the website for more info: [https://community-scripts.org/scripts?q=homarr](https://community-scripts.org/scripts?q=homarr)

<CalloutContainer type="warning">
<CalloutDescription>
Never trust any script directly injected from the web, without prior looking through it or searching the web for other's opinions.
</CalloutDescription>
</CalloutContainer>

After executing this command, you will get asked, if you want to accept defaults or would like to specify things like IP-Adress, DNS etc, then choose advanced.

After confirming the installation, the script will install the required dependencies, which may take a few minutes. Do not interrupt the installation.
After you've installed Homarr, you can find a new LXC "homarr".

# Updating [#updating]

Updating is as simple as executing

```bash
update
```

or running the script again but this time inside the container's shell:

```bash
bash -c "$(curl -fsSL https://raw.githubusercontent.com/community-scripts/ProxmoxVE/main/ct/homarr.sh)"
```

# Configuration [#configuration]

Some Homarr features require setting environment variables. When installing Homarr on Proxmox using the community-scripts installer, these can be configured in the file /opt/homarr.env. This path is also documented on the community-scripts website as the configuration path.

# Troubleshooting [#troubleshooting]

If something does not work after an update, please first try rebooting the LXC or the homarr Service with

```bash
systemctl restart homarr
```

# Getting help [#getting-help]

* If you are looking for help with the script, updating the LXC or troubleshooting the installer, please get in contact with the support of the community scripts. They provide support on their [Discord](https://discord.gg/2wvnMDgdnU). If you found vulnerabilities, bugs or have a request for the script, [create a new issue here](https://github.com/community-scripts/ProxmoxVE/issues/new/choose).
* If you are looking to report a bug, vulnerability or request a new feature, use [https://github.com/homarr-labs/homarr](https://github.com/homarr-labs/homarr) . You can ask for help on our Discord.

# How to find logs [#how-to-find-logs]

Homarr runs under a system service called `homarr`, so getting the logs is a simple as using the following command inside the LXC (Container) Shell

```bash
systemctl status homarr
```

As Homarr logs really a log, it sometimes feels like the log is endless till you get the bottom, so a command like this only shows the latest 100 lines:

```bash
journalctl -u homarr | tail -n 100
```

# QNAP (/docs/getting-started/installation/qnap)

<CalloutContainer type="warning">
<CalloutDescription>
The available QNAP guides target Homarr 0.15.10 and have not been updated for 1.0.
</CalloutDescription>
</CalloutContainer>

Run Homarr with [Container Station](https://www.qnap.com/en/software/container-station) or the
[third-party QNAP package](https://www.myqnap.org/product/homarr/). A community
[Container Station guide](https://post.smzdm.com/p/awzm7op2/) is available in Chinese.

# Railway (/docs/getting-started/installation/railway)

Railway is a cloud platform that allows you to deploy your apps with ease. You can deploy Homarr on Railway with a few clicks.

[*![Deploy on Railway](https://railway.com/button.svg)*](https://railway.com/deploy/_c4Kr9?referralCode=vishify)

# Runtipi (/docs/getting-started/installation/runtipi)

Homarr is available in the default [Runtipi](https://runtipi.io) app store.

## Installation [#installation]

Install **Homarr** from the Runtipi app store and select either a port or domain for access.

Runtipi manages start, stop, update, backup, and log operations under **My apps → Homarr**. Use a
[user-config](https://runtipi.io/docs/guides/customize-app-config) to override the generated Compose configuration.

See the [Runtipi installation documentation](https://runtipi.io/docs/getting-started/installation) for host setup.

# Saltbox (/docs/getting-started/installation/saltbox)

<CalloutContainer type="warning">
<CalloutDescription>
Saltbox installation command has not updated to 1.0 yet. There command still runs 0.15.10.
</CalloutDescription>
</CalloutContainer>

You can also use this to install on Saltbox:

```bash
sb install sandbox-homarr
```

# From source (/docs/getting-started/installation/source)

<CalloutContainer type="warning">
<CalloutDescription>
Installing from source is a bad idea in many ways:

* No isolation between applications
* Dependency conflicts on your root operating system
* Cumbersome update process
* Permission management
* Handling of conflicts

Therefore, we highly discourage you from using this as a normal user.
This method is only useful, when you want to develop on Homarr or extend it with your own functionality.
</CalloutDescription>
</CalloutContainer>

## Prerequisites [#prerequisites]

* [Node.js](https://nodejs.org/en/download/) 24.18 or newer
* [pnpm](https://pnpm.io/installation) at the version pinned in the repository's `package.json`
* [Redis](https://redis.io/download)

## Steps [#steps]

<ol>
  <li>
    Clone the Repository using <code>git clone [https://github.com/homarr-labs/homarr.git](https://github.com/homarr-labs/homarr.git)</code>
  </li>

  <li>
    Enter the created directory using <code>cd homarr</code>
  </li>

  <li>
    Install all dependencies using <code>pnpm install</code>
  </li>

  <li>
    Copy `.env.example` to `.env` and set `DB_URL` to an absolute writable path, such as
    `DB_URL='/home/username/homarr/db.sqlite'`. Migration and application commands run from different workspace
    directories, so a relative path can point them at different databases.
  </li>

  <li>
    Run `openssl rand -hex 32` twice and set `AUTH_SECRET` and `SECRET_ENCRYPTION_KEY` to the two different generated
    values. Keep both values secret and preserve `SECRET_ENCRYPTION_KEY` with your backups.
  </li>

  <li>
    Run 

    `pnpm run db:migration:sqlite:run`

     and wait that it completes
  </li>

  <li>
    Build the source using 

    `pnpm build`
  </li>

  <li>
    Copy better-sqlite3.node files with `mkdir build` and `cp
        ./node_modules/better-sqlite3/build/Release/better_sqlite3.node ./build/better_sqlite3.node`
  </li>

  <li>
    Start a redis server using 

    `redis-server`
  </li>

  <li>
    Run the server using 

    `pnpm start`
  </li>

  <li>
    Open 

    `http://localhost:3000`

     in your browser
  </li>
</ol>

# Synology (/docs/getting-started/installation/synology)

The installation process is quite easy and fast on Synology devices.
Since this method is used less often, we recommend you to follow this guide written by mariushosting.

[https://mariushosting.com/how-to-install-homarr-on-your-synology-nas/](https://mariushosting.com/how-to-install-homarr-on-your-synology-nas/)

# Unraid (/docs/getting-started/installation/unraid)

You can install Homarr directly from your Unraid Dashboard, no terminal required.

#### Prerequisites [#prerequisites]

* [Unraid](https://unraid.net/)
* [Community Apps](https://forums.unraid.net/topic/38582-plug-in-community-applications/)

#### Install the Community Apps Plugin [#install-the-community-apps-plugin]

<Link data-attr="Install Unraid Community Apps" to="https://forums.unraid.net/topic/38582-plug-in-community-applications/">
<div className="&#x22;flex items-center gap-3&#x22;">
  <span className="&#x22;dark:text-gray-200&#x22;">
    Install community applications plugin
  </span>

<IconDownload size={20} />

</div>
</Link>

<br />

<br />

<CalloutContainer type="idea">
<CalloutDescription>
Don't know whether you have the plugin installed or not? Search for this tab in the navigation:

<img alt="Unraid navigation with the Apps tab highlighted" src="__img0" />
</CalloutDescription>
</CalloutContainer>

#### Installing [#installing]

After you've installed the Community Apps Plugin, you can install Homarr from the Unraid Dashboard.

1. Navigate to the tab "Apps".
2. Search for "Homarr" and click on the result.
3. Click on "Install" and adjust the settings to your liking.

<img alt="Homarr result in Unraid Community Apps with installation actions" src="__img1" />

After you've installed Homarr, you can find it under the tab "Docker".

The official support thread is located [here](https://forums.unraid.net/topic/123478-support-smartphonelover-homarr/), but we prefer to communicate over GitHub and Discord instead.

# AdGuard Home (/docs/integrations/adguard-home)

AdGuard Home is a network-wide software for blocking ads and trackers, providing a safer and faster internet experience.

Categories: DNS Hole

### Widgets & Capabilities [#widgets--capabilities]

[DNS Hole Summary](/docs/widgets/dns-hole-summary): Displays the summary of your Pi-hole, AdGuard Home or Technitium DNS blocks and queries statistics

[DNS Hole Controls](/docs/widgets/dns-hole-controls): Control the blocking feature of your Pi-hole, AdGuard Home or Technitium DNS from your dashboard

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

**Username**: Account username for authentication.

**Password**: Account password for authentication.

# Anchor (/docs/integrations/anchor)

Anchor is a self-hosted note-taking application. The Anchor integration lets Homarr display and edit selected notes directly from the dashboard.

Categories: Notes

The Anchor integration lets Homarr connect to your Anchor instance so you can display and edit selected notes directly from your dashboard.

### Widgets & Capabilities [#widgets--capabilities]

[Anchor Note](/docs/widgets/anchor-note): Display and edit a selected note from Anchor

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

**API Key**: API Key from the service for authentication.

Steps to retrieve the credentials:

1. Open your Anchor instance.
2. Generate or copy an API key from Anchor settings.
3. Paste that key into the API Key secret field in Homarr.

# ArchiveTeam Warrior (/docs/integrations/archiveteam-warrior)

ArchiveTeam Warrior is an easy-to-run virtual machine that helps preserve websites by using some of your bandwidth and disk space to download and upload content to ArchiveTeam’s archive.

Categories: archiving

The ArchiveTeam Warrior integration lets Homarr connect to your ArchiveTeam Warrior instance so you can manage and monitor your archiving tasks directly from your dashboard.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

ArchiveTeam Warrior does not require authentication by default. If your instance is protected with basic authentication, you can provide a username and password.

No credentials required.

**Username**: Account username for authentication.

**Password**: Account password for authentication.

# Aria2 (/docs/integrations/aria2)

Lightweight multi-protocol & multi-source command-line download utility. It supports HTTP/HTTPS, FTP, SFTP, BitTorrent and Metalink

Categories: Download, Multiprotocol, Multi-source

### Widgets & Capabilities [#widgets--capabilities]

[Download Client](/docs/widgets/downloads): Allows you to view and manage your Downloads from both Torrent and Usenet clients.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

**API Key**: API Key from the service for authentication.

No credentials required.

# Audiobookshelf (/docs/integrations/audiobookshelf)

Audiobookshelf is a self-hosted audiobook and podcast server that lets you manage and stream your audio library.

Categories: Media

Audiobookshelf provides library statistics including audiobook and podcast counts, listening time, and active sessions.

### Widgets & Capabilities [#widgets--capabilities]

[Audio Stats](/docs/widgets/audio-stats): Displays library statistics from Navidrome or Audiobookshelf, adapting its display based on the linked integration.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

**API Key**: API Key from the service for authentication.

Steps to retrieve the credentials:

1. Open your Audiobookshelf instance
2. Go to Settings → Users
3. Click on your user account
4. Copy the API token from the user details

# Autobrr (/docs/integrations/autobrr)

Autobrr automates release-based actions for torrent and Usenet workflows.

Categories: Miscellaneous

### Widgets & Capabilities [#widgets--capabilities]

[Statistics](/docs/widgets/stats): Combine selected statistics from multiple integrations in cards, compact rows, or grouped tables.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

**API Key**: API Key from the service for authentication.

Steps to retrieve the credentials:

1. Create an API key in Settings > API Keys.

# Bazarr (/docs/integrations/bazarr)

Bazarr is a companion application to Sonarr and Radarr that manages and downloads subtitles for your media library.

Categories: Subtitles, Media

Bazarr complements Sonarr and Radarr by managing subtitle downloads. The Homarr integration uses your Bazarr API key to fetch missing subtitle counts and health badges.

### Screenshots [#screenshots]

<div className="flex flex-col gap-4">
  <div>
    <p>
      API key location in Bazarr (<strong>Settings → General → Security</strong>):
    </p>

    <img src="apiKeySettings.src" alt="bazarr-api-key-settings" width="128 * 4" />
  </div>

  <div>
    <p>
      Bazarr widget on a Homarr board:
    </p>

    <img src="widgetOverview.src" alt="bazarr-widget-on-board" width="128 * 4" />
  </div>
</div>

### Widgets & Capabilities [#widgets--capabilities]

[Bazarr](/docs/widgets/bazarr): Displays missing subtitle counts and health indicators from your Bazarr instance.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

You can find your Bazarr API key under **Settings → General → Security**.

**API Key**: API Key from the service for authentication.

Steps to retrieve the credentials:

1. Open Bazarr and go to Settings → General → Security.
2. Copy the API key and paste it into Homarr when creating the integration.

# Caddy (/docs/integrations/caddy)

Fast, extensible, and production-ready open source web server.

Categories: Reverse proxy

### Widgets & Capabilities [#widgets--capabilities]

The [Stats widget](/docs/widgets/stats) reads Caddy's `/reverse_proxy/upstreams` admin API endpoint and displays the
configured upstream count, active requests, and remembered failed requests.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

Configure the integration URL to reach Caddy's admin API. Caddy listens on `localhost:2019` by default; when Homarr
runs in a separate container, configure Caddy's admin endpoint on a private network address that Homarr can reach, or
use a private socket or network path appropriate for your deployment. The admin API controls Caddy and must not be
exposed to the public internet. If you change the admin address with `CADDY_ADMIN` or the global `admin` option, use
that address in Homarr. Homarr sends no Caddy credentials; keep the endpoint private using Caddy's network and socket
access controls.

# Changedetection.io (/docs/integrations/changedetection)

An open source web page change detection and notification service.

Categories: Monitoring

### Widgets & Capabilities [#widgets--capabilities]

The [Stats widget](/docs/widgets/stats) displays the number of unviewed watches with detected changes and the total number of watches. It reads the Changedetection.io API response from `/api/v1/watch`.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

**API Key**: API Key from the service for authentication.

Steps to retrieve the credentials:

1. Open Changedetection.io and go to Settings > API.
2. Copy the API key and paste it into the API Key field when creating the integration in Homarr.

# Beszel (/docs/integrations/beszel)

Beszel is a lightweight server monitoring platform with Docker stats, historical data, and alert functions.

Categories: System Monitoring

Beszel monitors your servers in real time via lightweight agents, collecting CPU, memory, disk, network, GPU, temperature, and Docker container metrics. It stores historical data and supports configurable alerts.

### Screenshots [#screenshots]

<img src="beszelDashboard.src" alt="Beszel dashboard overview showing all four widgets" />

### Widgets & Capabilities [#widgets--capabilities]

[Beszel System Stats](/docs/widgets/beszel-system-stats): Time-series charts for CPU, memory, disk, network, and Docker container metrics from Beszel.

[Beszel Systems (Grid)](/docs/widgets/beszel-system-grid): Card grid view of all Beszel-monitored systems with real-time metrics.

[Beszel Systems (Table)](/docs/widgets/beszel-system-table): Table view of all Beszel-monitored systems with sortable columns and status indicators.

[Beszel Alerts](/docs/widgets/beszel-alerts): View Beszel alert configurations and history with triggered/ok status indicators.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

**Username**: Account username for authentication.

**Password**: Account password for authentication.

Steps to retrieve the credentials:

1. Open your Beszel hub instance (default port 8090)
2. Use the same credentials you use to log in to the Beszel web UI

<CalloutContainer type="idea">
<CalloutDescription>
Beszel uses PocketBase under the hood. The default admin credentials are set during the initial Beszel setup.
</CalloutDescription>
</CalloutContainer>

# Dash. (/docs/integrations/dash-dot)

Dash. is a system performance and resource monitoring tool

Categories: System monitoring

### Widgets & Capabilities [#widgets--capabilities]

[System Health Monitoring](/docs/widgets/health-monitoring): Displays information showing the health and status of your system(s).

[System Resources](/docs/widgets/system-resources): Displays CPU, RAM and network of your host

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

# Deluge (/docs/integrations/deluge)

Deluge is a lightweight, Free Software, cross-platform BitTorrent client.

Categories: Torrent client

### Widgets & Capabilities [#widgets--capabilities]

[Download Client](/docs/widgets/downloads): Allows you to view and manage your Downloads from both Torrent and Usenet clients.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

**Password**: Account password for authentication.

# Docker labels (/docs/integrations/docker-labels)

During onboarding, Homarr scans running containers on every reachable
[Docker-compatible host](/docs/integrations/docker). Labels let you provide exact app metadata instead of relying on
image-name matching. You can review and deselect every result before Homarr creates anything.

A container with valid Homarr labels takes priority over image-based discovery. Containers without valid labels can
still be suggested from their image and published ports.

## Homarr labels [#homarr-labels]

`homarr.name` and `homarr.href` are required for label discovery. All other labels are optional.

| Label                | Purpose                                                                    |
| -------------------- | -------------------------------------------------------------------------- |
| `homarr.name`        | App or integration display name                                            |
| `homarr.href`        | Address opened by the app and used as the suggested integration address    |
| `homarr.group`       | Container section that receives the selected app and compatible widget     |
| `homarr.icon`        | App icon URL                                                               |
| `homarr.description` | App description                                                            |
| `homarr.ping`        | Address used for app status checks                                         |
| `homarr.id`          | Stable source identifier; defaults to the Docker container ID              |
| `homarr.board`       | Intended board name; see [Board targeting](#board-targeting)               |
| `homarr.integration` | Homarr integration kind, for example `sonarr`                              |
| `homarr.widget`      | Homarr widget kind to add when it supports the selected integration        |
| `homarr.hide`        | Excludes the container when this label is present, regardless of its value |

Unknown integration and widget kinds are ignored. Do not put API keys, passwords, or other secrets in labels. Enter
credentials in onboarding, where Homarr stores them using its normal encrypted integration-secret flow.

## Compose example [#compose-example]

```yaml
services:
  sonarr:
    image: lscr.io/linuxserver/sonarr:latest
    labels:
      homarr.name: "Sonarr"
      homarr.href: "http://server.local:8989"
      homarr.group: "Media"
      homarr.icon: "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/sonarr.svg"
      homarr.description: "TV library"
      homarr.ping: "http://server.local:8989"
      homarr.integration: "sonarr"
      homarr.widget: "calendar"
```

Use an address that is reachable where it is needed. A Docker service name can work for server-side integration
requests, while an app link opened in a browser usually needs a LAN hostname, IP address, or reverse-proxy address.
Onboarding accepts these self-hosted address formats directly and only requires the field to be non-empty.

## Homepage label fallback [#homepage-label-fallback]

When `homarr.name` is absent, onboarding also understands these Homepage labels:

* `homepage.name`
* `homepage.href`
* `homepage.group`
* `homepage.icon`
* `homepage.description`

`homepage.name` and `homepage.href` are required for the fallback. Homarr does not combine partial Homarr metadata with
Homepage metadata: once `homarr.name` is present, use `homarr.*` labels for the remaining fields too.

## What onboarding creates [#what-onboarding-creates]

In **Connect**, label-discovered apps and integrations appear before image-based suggestions. You can import multiple
services in one pass and edit every suggested address. For image-matched apps, Homarr uses the detected service type
when building host, subdomain, or reverse-proxy path suggestions.

When setup completes, Homarr rechecks the selected container sources and then:

* creates an app with its name, address, icon, description, and ping address;
* creates the requested integration and links its app after you provide required credentials;
* places grouped apps in a board container named by `homarr.group`;
* places ungrouped apps in the main board area;
* adds `homarr.widget` only when the widget kind is valid and compatible with the selected integration;
* keeps image-based discovery available for unlabeled containers.

If a selected container disappears, targets another board, or requests an incompatible widget, setup finishes with a
warning instead of creating an invalid board item.

## Board targeting [#board-targeting]

On a fresh installation with one seeded `dashboard` board, one unique selected `homarr.board` value can name that first
board. Otherwise, the label must match the board selected in onboarding. Services labeled for another board are skipped
and reported in the completion warning.

Onboarding configures one board at a time. Run normal board management after setup if you want to distribute services
across several boards.

# Emby (/docs/integrations/emby)

Emby is a media server platform that allows you to organize, manage, and stream your personal media collection.

Categories: Media server

### Widgets & Capabilities [#widgets--capabilities]

[Media server streams](/docs/widgets/media-server): Show the current streams on your media servers

[Media releases](/docs/widgets/media-releases): Display newly added medias or upcoming releases from different integrations

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

**API Key**: API Key from the service for authentication.

# FileFlows (/docs/integrations/fileflows)

FileFlows is a file processing and media transcoding automation platform.

Categories: Media Transcoding

### Widgets & Capabilities [#widgets--capabilities]

The [Stats widget](/docs/widgets/stats) reads FileFlows' unauthenticated `GET /api/status` endpoint and displays queued, processing, and processed file counts together with FileFlows' formatted processing time.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

# Coolify (/docs/integrations/coolify)

Self-hosted PaaS and deployment platform

Categories: System monitoring, Deployment

### Widgets & Capabilities [#widgets--capabilities]

[Coolify](/docs/widgets/coolify): Overview of your Coolify instance with servers, applications, and services.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

<CalloutContainer type="info">
<CalloutTitle>
URL configuration
</CalloutTitle>

<CalloutDescription>
Use the root URL of your Coolify instance, for example `https://coolify.example.com`. Homarr calls Coolify endpoints under `/api` and `/api/v1` automatically.
</CalloutDescription>
</CalloutContainer>

### Secrets [#secrets]

**API Key**: API Key from the service for authentication.

Steps to retrieve the credentials:

1. Open your Coolify instance and make sure you are in the team you want Homarr to monitor.
2. Enable API access under **Settings > Advanced** if it is disabled.
3. Go to **Security > API Tokens**.
4. Enter a name, e.g. "Homarr".
5. Select the `read` permission. The Coolify widget only reads version, server, project, application, and service data.
6. Click "Create".
7. Copy the generated token immediately. Coolify only shows it once.
8. Paste the token into the API Key field in Homarr.

# Frigate (/docs/integrations/frigate)

Open source NVR with real-time object detection.

Categories: Media

### Widgets & Capabilities [#widgets--capabilities]

[Statistics](/docs/widgets/stats): Combine selected statistics from multiple integrations in cards, compact rows, or grouped tables.

The Frigate statistics use `/api/stats` and report camera count, service uptime, and version. Camera and object detection data requires a configured Frigate camera.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

Use Frigate's internal HTTP API (port **5000**), reachable from Homarr. This endpoint does not require credentials; the authenticated web interface on port 8971 is not supported by this integration. Keep the internal API on a trusted network.

# Glances (/docs/integrations/glances)

Glances is a cross-platform system monitoring tool.

Categories: System Monitoring

### Widgets & Capabilities [#widgets--capabilities]

[System Resources](/docs/widgets/system-resources): Displays CPU, RAM and network of your host

[System Health Monitoring](/docs/widgets/health-monitoring): Displays information showing the health and status of your system(s).

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

No credentials required.

# Gatus (/docs/integrations/gatus)

An open source service health dashboard and monitoring tool.

Categories: Monitoring

### Widgets & Capabilities [#widgets--capabilities]

The [Stats widget](/docs/widgets/stats) reads Gatus' endpoint status API and displays the number of endpoints currently up, down, unknown, and the total number of endpoints. It uses each endpoint's latest result; endpoints without a result are counted as unknown.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

# Gluetun (/docs/integrations/gluetun)

VPN control server integration for Homarr's VPN widget.

Categories: VPN, Network

[Gluetun](https://github.com/qdm12/gluetun) exposes a control server that Homarr can query to report the VPN tunnel
status, DNS status, public IP address, and active provider details in the VPN widget.

### Widgets & Capabilities [#widgets--capabilities]

[VPN](/docs/widgets/vpn): Monitor the connection status, public IP, and provider details of your VPN integrations.

### Setting up the Gluetun control server [#setting-up-the-gluetun-control-server]

Refer to the [Gluetun control server documentation](https://github.com/qdm12/gluetun-wiki/blob/main/setup/advanced/control-server.md#authentication) to enable and configure authentication.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

Gluetun's control server can be left unprotected or secured with either an API key or HTTP Basic authentication.
Choose the option that matches how your Gluetun instance integration is set up.

No credentials required.

**Username**: Account username for authentication.

**Password**: Account password for authentication.

**API Key**: API Key from the service for authentication.

# Gotify (/docs/integrations/gotify)

Gotify is a simple, self-hosted server for sending and receiving messages in real time.

Categories: Notifications, Messaging

### Widgets & Capabilities [#widgets--capabilities]

[Notifications](/docs/widgets/notifications): Display notification history from an integration

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

**Username**: Account username for authentication.

**Password**: Account password for authentication.

# Docker (/docs/integrations/docker)

Docker is a platform where you can run your applications in containers, allowing for easy deployment and management of applications.

Categories: Containers

### Widgets and capabilities [#widgets-and-capabilities]

[Docker stats](/docs/widgets/docker-containers): Stats of your containers Requires administrator access

Docker endpoints are configured with environment variables rather than under **Management → Integrations**.

## Local socket [#local-socket]

Mount the Docker socket into the Homarr container:

```yaml
services:
  homarr:
    image: ghcr.io/homarr-labs/homarr:latest
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock
      - ./homarr/appdata:/appdata
```

`/var/run/docker.sock` is the default. For other in-container paths, set a comma-separated list:

```yaml
environment:
  DOCKER_SOCKET_PATHS: /var/run/docker.sock,/var/run/podman.sock
```

## Podman [#podman]

Homarr uses Podman's Docker-compatible API. Start the Podman socket, mount it, and include its in-container path in
`DOCKER_SOCKET_PATHS`.

For rootless Podman:

```sh
systemctl --user enable --now podman.socket
podman info --format '{{.Host.RemoteSocket.Path}}'
```

Run Homarr as the user that owns the socket. On SELinux systems, Podman may require `security_opt: [label=disable]` for
the Homarr container. Rootful Podman normally exposes `/run/podman/podman.sock`.

## Remote endpoints [#remote-endpoints]

For Docker socket proxies, list aligned hostnames and ports:

```yaml
environment:
  DOCKER_HOSTNAMES: docker-proxy-home,docker-proxy-lab
  DOCKER_PORTS: 2375,2375
```

<CalloutContainer type="warning">
<CalloutTitle>
Plaintext Docker API
</CalloutTitle>

<CalloutDescription>
Unauthenticated Docker TCP provides control of the Docker host. Keep a socket proxy on a private network or use TLS.
</CalloutDescription>
</CalloutContainer>

Use `DOCKER_ENDPOINTS` for named endpoints, TLS, or restricted capabilities:

```yaml
environment:
  DOCKER_ENDPOINTS: >-
    [
      {
        "id": "local",
        "name": "Local Docker",
        "kind": "docker",
        "transport": { "type": "socket", "path": "/var/run/docker.sock" },
        "capabilities": ["inventory", "logs", "lifecycle", "remove"]
      },
      {
        "id": "production",
        "name": "Production inventory",
        "kind": "docker",
        "transport": {
          "type": "tls",
          "host": "docker.example.com",
          "port": 2376,
          "caPath": "/run/secrets/docker-ca.pem"
        },
        "capabilities": ["inventory", "logs"]
      }
    ]
```

Each endpoint requires a stable `id`, display `name`, `kind` (`docker` or `podman`), transport, and the `inventory`
capability. Optional capabilities are `logs`, `lifecycle`, and `remove`.

| Transport | Required values                                                                     |
| --------- | ----------------------------------------------------------------------------------- |
| `socket`  | Absolute in-container `path`                                                        |
| `tls`     | `host`, `port`, absolute `caPath`; optional `certPath` and `keyPath` for mutual TLS |
| `tcp`     | `host`, `port`, and `allowInsecure: true`                                           |

`DOCKER_ENDPOINTS` takes precedence over the socket, hostname, and port lists.

## Use in Homarr [#use-in-homarr]

The Docker management page lists containers from every configured endpoint and can show logs, resource use, and
permitted lifecycle actions. The Docker widget can include all endpoints or a selected subset.

Assisted setup compares discovered containers with existing apps and integrations. Discovery is read-only; creating or
updating a Homarr resource still requires confirmation. If one endpoint is unavailable, containers from healthy
endpoints remain visible.

The `homarr.hide` label excludes a container. Other `homarr.*` labels can provide apps, integrations, groups, and widgets
during onboarding; see [Docker label discovery](/docs/integrations/docker-labels).

## Security [#security]

A Docker or Podman socket grants extensive host control. Prefer a least-privilege socket proxy when lifecycle access is
not required.

Homarr needs `CONTAINERS=1` for inventory and `POST=1` for standard lifecycle actions with common proxies. LSIO's proxy
can instead expose `ALLOW_START=1`, `ALLOW_STOP=1`, and `ALLOW_RESTARTS=1` while keeping `POST=0`; removal is then
unavailable.

Add Homarr to the proxy's Docker network and configure its service name and port with `DOCKER_HOSTNAMES` and
`DOCKER_PORTS`.

# Healthchecks (/docs/integrations/healthchecks)

Healthchecks is a simple monitoring service for scheduled jobs and periodic tasks.

Categories: Monitoring

### Widgets & Capabilities [#widgets--capabilities]

The [Stats widget](/docs/widgets/stats) reads Healthchecks' Management API v3 and displays aggregate counts for checks in the `up`, `down`, `grace`, and `new` states. It does not request individual check endpoints.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

**API Key**: API Key from the service for authentication.

The read-only key is sufficient: Homarr only uses GET /api/v3/checks/.
Steps to retrieve the credentials:

1. Open the Healthchecks project settings.
2. Create a project-specific read-only API key.
3. Copy the key into Homarr's API Key field.

# Home Assistant (/docs/integrations/home-assistant)

Home Assistant is an open-source home automation platform that focuses on privacy and local control, allowing you to automate and control your smart home devices.

Categories: Smart Home, Automation

### Widgets & Capabilities [#widgets--capabilities]

[Entity State](/docs/widgets/smart-home-entity-state): Display the state of an entity and toggle it optionally

[Execute Automation](/docs/widgets/smart-home-execute-automation): Trigger an automation with one click

Entity toggles and automation triggers send JSON requests to Home Assistant. A rejected action is shown as a failure.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

**API Key**: API Key from the service for authentication.

Steps to retrieve the credentials:

1. Click on your profile in the bottom left corner of Home Assistant.
2. Switch to the Security tab.
3. Scroll down to the Long-lived access tokens section.
4. Click on the Create Token button.
5. Enter a name for the token (e.g., 'Homarr Integration') and click Create.
6. Copy the generated token and paste it into the Homarr integration settings.

The [Statistics widget](/docs/widgets/stats) can display total entities, unavailable entities, lights currently on, and people currently home, retrieved from `/api/states`. Saved snapshots refresh on demand; use the dedicated controls for live interaction.

# Homebox (/docs/integrations/homebox)

A self-hosted inventory and household asset management application.

Categories: Inventory management

### Widgets & Capabilities [#widgets--capabilities]

[Statistics](/docs/widgets/stats): Combine selected statistics from multiple integrations in cards, compact rows, or grouped tables.

The [Stats widget](/docs/widgets/stats) reads Homebox's `/api/v1/groups/statistics` endpoint and displays items, locations, labels, items with a warranty, total value, and users. The `/api/v1/groups` response supplies the currency shown with the total value.

### Adding the integration [#adding-the-integration]

The default Homebox port is `7745`.

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

Homebox requires the username (email address) and password of a Homebox account. Homarr authenticates for each stats fetch and does not retain the session token between fetches.

**Username**: Account username for authentication.

**Password**: Account password for authentication.

Steps to retrieve the credentials:

1. Use the email address of a Homebox account as the username.
2. Enter that account's password in the Password field when creating the integration in Homarr.

# iCal (/docs/integrations/ical)

iCal is a standard for calendar data exchange, allowing users to share and manage calendar events across different platforms.

Categories: Calendar

### Widgets & Capabilities [#widgets--capabilities]

[Calendar](/docs/widgets/calendar): Display events from your integrations in a calendar view within a certain relative time period

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

**Url**: The url of the service

The integration accepts any public iCal URL, including calendars published by Google Calendar, Apple Calendar, and
Outlook.

# Immich (/docs/integrations/immich)

Self-hosted photo and video management solution

Categories: Photo server

### Widgets and capabilities [#widgets-and-capabilities]

[Immich Album](/docs/widgets/immich-album-carousel): Shows a slideshow of pictures from an Immich album or your full library

[Immich Server Stats](/docs/widgets/immich-server-stats): Information about your Immich instance

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

Create an API key under **Immich user settings → API Keys** with these permissions:

`album.statistics`, `album.read`, `album.create`, `user.read`, `user.update`, `asset.read`, `asset.view`,
`asset.download`, `asset.statistics`, `server.statistics`, and `server.about`.

**API Key**: API Key from the service for authentication.

Steps to retrieve the credentials:

1. Create the API key in Immich and copy its value into the Homarr integration.

# Jackett (/docs/integrations/jackett)

Jackett exposes configured indexers through Torznab.

Categories: Indexer

### Widgets & Capabilities [#widgets--capabilities]

[Indexer manager status](/docs/widgets/indexer-manager): View the status of your indexers.

[Statistics](/docs/widgets/stats): Combine selected statistics from multiple integrations in cards, compact rows, or grouped tables.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

**API Key**: API Key from the service for authentication.

Steps to retrieve the credentials:

1. Copy the API key from Jackett's dashboard.

Jackett's API-key interface exposes configured indexers but does not provide their health history. The indexer widget displays “Health unavailable” for these entries. **Test all** performs an upstream Torznab search for each indexer and reports failures; it does not download results or change indexer configuration. Some indexers require a search query and may reject this generic test.

Statistics exposes the configured-indexer count. An error count is not available from this interface.

# Jellyfin (/docs/integrations/jellyfin)

Jellyfin is a free and open-source media server software that allows you to organize, manage, and share your media files.

Categories: Media server

### Widgets & Capabilities [#widgets--capabilities]

[Media server streams](/docs/widgets/media-server): Show the current streams on your media servers

[Media releases](/docs/widgets/media-releases): Display newly added medias or upcoming releases from different integrations

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

**API Key**: API Key from the service for authentication.

**Username**: Account username for authentication.

**Password**: Account password for authentication.

# Jellyseerr (/docs/integrations/jellyseerr)

Jellyseerr is a self-hosted media request management system that integrates with Jellyfin and other media servers.

Categories: Media requests

### Widgets & Capabilities [#widgets--capabilities]

[Media Request List](/docs/widgets/media-request-list): See a list of all media requests from your integration

[Media Requests Stats](/docs/widgets/media-request-stats): Statistics about your media requests

[Media Search](/docs/management/search-engines/#media-request-search): Search for movies and TV shows directly from Spotlight and request them.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

**API Key**: API Key from the service for authentication.

# Jellystat (/docs/integrations/jellystat)

A self-hosted statistics dashboard for Jellyfin.

Categories: Media management

### Widgets & Capabilities [#widgets--capabilities]

[Statistics](/docs/widgets/stats): Combine selected statistics from multiple integrations in cards, compact rows, or grouped tables.

The [Stats widget](/docs/widgets/stats) reads Jellystat's `stats/getViewsByLibraryType` endpoint for the last 30 days and displays audio, movie, series, and other play counts. These are playback views, not library inventory totals.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

**API Key**: API Key from the service for authentication.

Steps to retrieve the credentials:

1. Open Jellystat and go to Settings > API Key.
2. Create or copy an API key, then paste it into Homarr's API Key field.

# Karakeep (/docs/integrations/karakeep)

A self-hostable bookmark manager for saving, organizing, and searching your links, notes, and media.

Categories: Bookmark manager

### Widgets & Capabilities [#widgets--capabilities]

[Statistics](/docs/widgets/stats): Combine selected statistics from multiple integrations in cards, compact rows, or grouped tables.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

**API Key**: API Key from the service for authentication.

Steps to retrieve the credentials:

1. Open Karakeep and go to Settings > API Keys.
2. Create an API key with permission to read your bookmarks and copy it.
3. Paste the key into the API Key field when creating the integration in Homarr.

# Komga (/docs/integrations/komga)

A self-hosted media server for comics, manga, magazines, and ebooks.

Categories: Media management

### Widgets & Capabilities [#widgets--capabilities]

[Statistics](/docs/widgets/stats): Combine selected statistics from multiple integrations in cards, compact rows, or grouped tables.

The [Stats widget](/docs/widgets/stats) counts available libraries, series, and books through Komga's v1 REST API. Unavailable libraries are excluded.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

**API Key**: API Key from the service for authentication.

Steps to retrieve the credentials:

1. Open Komga's Settings > API keys page and create a key with access to the libraries.
2. Paste the key into Homarr's API Key field.

# Lidarr (/docs/integrations/lidarr)

Lidarr is a music management tool that automates the process of downloading, sorting, and renaming music.

Categories: Media manager, Servarr

### Widgets & Capabilities [#widgets--capabilities]

[Calendar](/docs/widgets/calendar): Display events from your integrations in a calendar view within a certain relative time period

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

**API Key**: API Key from the service for authentication.

# Linkwarden (/docs/integrations/linkwarden)

Self-hosted bookmark manager for organizing and archiving links.

Categories: Bookmarks

### Widgets & Capabilities [#widgets--capabilities]

[Statistics](/docs/widgets/stats): Combine selected statistics from multiple integrations in cards, compact rows, or grouped tables.

The Linkwarden stats widget is documented at [/docs/widgets/stats](/docs/widgets/stats).

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

**API Key**: API Key from the service for authentication.

Steps to retrieve the credentials:

1. Open Linkwarden and go to your account settings.
2. Create an API token or access token.
3. Copy the token into Homarr's API Key field.

# llama.cpp (/docs/integrations/llama-cpp)

Connect to a local llama.cpp llama-server to show model, throughput and request status on your dashboard.

Categories: System Monitoring

The llama.cpp integration lets Homarr connect to a [llama-server](https://github.com/ggml-org/llama.cpp) instance so you can see the health of your local LLM, which model is loaded, and how fast it is generating — all from your dashboard.

### Widgets & Capabilities [#widgets--capabilities]

[llama.cpp](/docs/widgets/llama-cpp): Shows the health, loaded model and generation speed of a local llama.cpp llama-server.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

<CalloutContainer type="info">
<CalloutTitle>
URL configuration
</CalloutTitle>

<CalloutDescription>
Use the root URL of your `llama-server`, for example `http://192.168.1.50:8080`. Homarr calls the `/health`, `/v1/models`, `/metrics` and `/slots` endpoints under that URL automatically.
</CalloutDescription>
</CalloutContainer>

<CalloutContainer type="idea">
<CalloutTitle>
Metrics
</CalloutTitle>

<CalloutDescription>
Generation speed and token counters are read from the Prometheus endpoint at `/metrics`. Start `llama-server` with the `--metrics` flag so these values are available:

```shell
llama-server --model /path/to/model.gguf --metrics
```

Without `--metrics` the widget still shows health, model information, and active-request speed from `/slots`; metrics-backed counters and aggregate speed stay empty.
</CalloutDescription>
</CalloutContainer>

<CalloutContainer type="info">
<CalloutTitle>
Context and per-request speed
</CalloutTitle>

<CalloutDescription>
Context (KV cache) usage and the in-flight request data are read from the `/slots` endpoint, which is available on every recent llama-server build and requires no extra flags. The per-request generation speed shown while a request is running is derived by tracking the request's decoded token count across polls, so it reflects the average speed of the request that is currently being generated.
</CalloutDescription>
</CalloutContainer>

### Secrets [#secrets]

llama-server does not require authentication by default. The integration only needs the URL of your server.

No credentials required.

# Maintainerr (/docs/integrations/maintainerr)

A media library maintenance tool for Plex, Jellyfin, and Emby.

Categories: Media management

### Widgets & Capabilities [#widgets--capabilities]

[Statistics](/docs/widgets/stats): Combine selected statistics from multiple integrations in cards, compact rows, or grouped tables.

The [Stats widget](/docs/widgets/stats) reads Maintainerr's `/api/storage-metrics` endpoint and shows handled items, episodes, movies, and the currently reclaimable collection storage.

Maintainerr does not authenticate API requests. Protect the service with your network access controls before exposing it beyond a trusted network.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

No credentials required.

# Mealie (/docs/integrations/mealie)

A self-hosted recipe manager for organizing and sharing recipes.

Categories: Recipe management

### Widgets & Capabilities [#widgets--capabilities]

[Statistics](/docs/widgets/stats): Combine selected statistics from multiple integrations in cards, compact rows, or grouped tables.

The [Stats widget](/docs/widgets/stats) displays recipes and users in the API key's household, plus the group's shared categories and tags.

<Alert type="note">
The Stats widget uses Mealie's v2 endpoint, <code>/api/households/statistics</code>. Mealie v1 instances that only
expose <code>/api/groups/statistics</code> are not supported.
</Alert>

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

**API Key**: API Key from the service for authentication.

Steps to retrieve the credentials:

1. Open Mealie and go to your profile's API Tokens page.
2. Create a long-lived API token for a user with access to the household whose statistics you want to display.
3. Copy the token and paste it into the API Key field when creating the integration in Homarr.

# Navidrome (/docs/integrations/navidrome)

Navidrome is a self-hosted music server and streamer compatible with the Subsonic API.

Categories: Media, Media server

Navidrome provides music library statistics including artist, album, and song counts, as well as now playing audio streams via the Subsonic API.

### Widgets & Capabilities [#widgets--capabilities]

[Audio Stats](/docs/widgets/audio-stats): Displays library statistics from Navidrome or Audiobookshelf, adapting its display based on the linked integration.

[Media server streams](/docs/widgets/media-server): Show the current streams on your media servers

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

**Username**: Account username for authentication.

**Password**: Account password for authentication.

Steps to retrieve the credentials:

1. Use the same credentials you use to log in to Navidrome
2. The user must have access to the Subsonic API (enabled by default)

The [Statistics widget](/docs/widgets/stats) can also combine selected statistics from this integration with other sources.

# Kubernetes (/docs/integrations/kubernetes)

Kubernetes is a powerful container orchestration platform that automates the deployment, scaling, and management of containerized applications.

Categories: Containers

Homarr provides a read-only view of pods, services, ingresses, nodes, ConfigMaps, Secrets, namespaces, and volumes.
Metrics Server is optional; without it, inventory and reserved capacity remain available but live CPU and memory do not.

## In-cluster access [#in-cluster-access]

Enable RBAC in the Homarr Helm values:

```yaml
rbac:
  enabled: true
```

The chart creates the service account and read-only Role/ClusterRole bindings used by Homarr. Kubernetes 1.24 or newer is
required.

## Kubeconfig contexts [#kubeconfig-contexts]

When Homarr runs outside the cluster, mount a kubeconfig read-only and set `KUBECONFIG` to its in-container path:

```yaml
services:
  homarr:
    volumes:
      - ./kubeconfig:/app/config/kubeconfig:ro
    environment:
      KUBECONFIG: /app/config/kubeconfig
```

The management page exposes every configured context. An unavailable context does not hide healthy contexts; a context
without Metrics Server is marked **Metrics unavailable**.

Kubernetes resources are not converted into Homarr apps or integrations during Docker discovery.

# NetAlertX (/docs/integrations/netalertx)

Network presence and device monitoring.

Categories: Monitoring

### Widgets & Capabilities [#widgets--capabilities]

[Statistics](/docs/widgets/stats): Combine selected statistics from multiple integrations in cards, compact rows, or grouped tables.

The statistics provider calls NetAlertX v2's `/devices/totals` endpoint and reports total, connected, new, and down-alert counts. Active network scanning is controlled by NetAlertX and is not enabled by Homarr.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

**API Key**: API Key from the service for authentication.

Steps to retrieve the credentials:

1. Create or copy the NetAlertX API token and enter it as the API Key.

Use the backend API address (port **20212** by default), not the web interface port.

# Nextcloud (/docs/integrations/nextcloud)

Nextcloud is a self-hosted productivity platform that provides file storage, collaboration tools, and more.

Categories: Calendar, Notifications

### Widgets & Capabilities [#widgets--capabilities]

[Calendar](/docs/widgets/calendar): Display events from your integrations in a calendar view within a certain relative time period

[Notifications](/docs/widgets/notifications): Display notification history from an integration

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

<S type="info">
Users who use 2FA will have to use Nextcloud's App Password tool to grant Homarr access, as 2FA breaks the traditional process. For more information, see [Nextcloud's Documentation](https://docs.nextcloud.com/server/stable/admin_manual/configuration_user/authentication.html#app-passwords)
</S>

**Username**: Account username for authentication.

**Password**: Account password for authentication.

# Netdata (/docs/integrations/netdata)

Real-time performance and health monitoring for systems and applications.

Categories: Monitoring

### Widgets & Capabilities [#widgets--capabilities]

[Statistics](/docs/widgets/stats): Combine selected statistics from multiple integrations in cards, compact rows, or grouped tables.

The [Stats widget](/docs/widgets/stats) reads Netdata's `/api/v1/info` endpoint and displays the number of active warnings and critical alarms.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

Point the integration at the Netdata Agent HTTP API, which listens on port `19999` by default. Netdata's `/api/v1/info` endpoint does not require authentication with the default Agent configuration. If bearer protection or network ACLs are enabled, allow Homarr to access this endpoint; the integration does not currently send an authentication token.

# Ntfy (/docs/integrations/ntfy)

Ntfy is a simple, open-source notification service that allows you to send and receive notifications across devices.

Categories: Notifications, Messaging

### Widgets & Capabilities [#widgets--capabilities]

[Notifications](/docs/widgets/notifications): Display notification history from an integration

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

**Topic**: The topic to from which notifications should be retrieved.

**Topic**: The topic to from which notifications should be retrieved.

**API Key**: API Key from the service for authentication.

# Miniflux (/docs/integrations/miniflux)

Miniflux is a minimalist and opinionated feed reader.

Categories: Feed reader

### Widgets & Capabilities [#widgets--capabilities]

The [Stats widget](/docs/widgets/stats) displays the total read and unread entry counts from Miniflux. Create an API key in Miniflux and add it as the integration's `apiKey`; the key must belong to a user who can access the feeds whose counters should be shown.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

**API Key**: API Key from the service for authentication.

# NZBGet (/docs/integrations/nzbget)

NZBGet is a lightweight and efficient Usenet downloader.

Categories: Usenet client

### Widgets & Capabilities [#widgets--capabilities]

[Download Client](/docs/widgets/downloads): Allows you to view and manage your Downloads from both Torrent and Usenet clients.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

**Username**: Account username for authentication.

**Password**: Account password for authentication.

# Open Media Vault (/docs/integrations/open-media-vault)

Open Media Vault is a free network-attached storage server based on the Debian operating system.

Categories: System monitoring

### Widgets & Capabilities [#widgets--capabilities]

[System Health Monitoring](/docs/widgets/health-monitoring): Displays information showing the health and status of your system(s). To use this widget, you must have the OpenMediaVault plugin openmediavault-cputemp installed.

[System Resources](/docs/widgets/system-resources): Displays CPU, RAM and network of your host

Disk temperatures are matched to filesystem partitions, including device names without the `/dev/` prefix.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

**Username**: Account username for authentication.

**Password**: Account password for authentication.

<S type="caution">
The user used here must have administrative permissions or Homarr won't be able to read the system performance and resource data.
</S>

# OPNsense (/docs/integrations/opnsense)

OPNsense is an open-source, easy-to-use, and easy-to-build firewall and routing platform

Categories: Firewall

### Widgets and capabilities [#widgets-and-capabilities]

[Firewall Monitoring](/docs/widgets/firewall): Displays a summary of firewalls.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

Use a dedicated API-only user with **Lobby: Dashboard** and **Reporting: Traffic** privileges.

**API key and secret**

**Api Key (Key)**: The Key part of the API Key for authentication.

**Api Key (Secret)**: The Secret part of the API Key for authentication.

Steps to retrieve the credentials:

1. Under System → Access → Users, create a user with Scrambled Password enabled.
2. Grant Lobby: Dashboard and Reporting: Traffic privileges, then save the user.
3. Use the ticket action for that user and confirm the API key download.
4. Copy the downloaded key and secret into Homarr.

# Paperless-ngx (/docs/integrations/paperless-ngx)

Paperless-ngx is a document management system that transforms your physical documents into a searchable online archive.

Categories: Documents

Paperless-ngx provides document statistics including total documents, inbox count, correspondents, tags, and document types.

### Widgets & Capabilities [#widgets--capabilities]

[Paperless-ngx](/docs/widgets/paperless-ngx): Displays document management statistics including inbox ratio, document counts, and metadata.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

**API Key**: API Key from the service for authentication.

Steps to retrieve the credentials:

1. Open your Paperless-ngx instance
2. Navigate to Settings → Django Admin → Tokens
3. Create a new token for your user
4. Copy the token value

The [Statistics widget](/docs/widgets/stats) can also combine selected statistics from this integration with other sources.

# Overseerr (/docs/integrations/overseerr)

Overseerr is a self-hosted media request management system that integrates with Plex.

Categories: Media requests

### Widgets & Capabilities [#widgets--capabilities]

[Media Request List](/docs/widgets/media-request-list): See a list of all media requests from your integration

[Media Requests Stats](/docs/widgets/media-request-stats): Statistics about your media requests

[Media Search](/docs/management/search-engines/#media-request-search): Search for movies and TV shows directly from Spotlight and request them.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

**API Key**: API Key from the service for authentication.

# PeaNUT (/docs/integrations/peanut)

A tiny dashboard for Network UPS Tools (NUT) servers.

Categories: UPS, Hardware

[PeaNUT](https://github.com/Brandawg93/PeaNUT) exposes the data of your [Network UPS Tools](https://networkupstools.org/) servers
over a REST API, which Homarr reads to display the status of your UPS devices.

### Widgets & Capabilities [#widgets--capabilities]

[UPS](/docs/widgets/ups): Monitor the status of your UPS devices through a NUT server.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

PeaNUT secures its API with HTTP Basic authentication when the `WEB_USERNAME` and `WEB_PASSWORD` environment variables
are set on the PeaNUT instance. Provide the same credentials here. If the instance runs with `AUTH_DISABLED=true`, no
secrets are required.

**Username**: Account username for authentication.

**Password**: Account password for authentication.

Steps to retrieve the credentials:

1. Set WEB_USERNAME and WEB_PASSWORD on your PeaNUT instance.
2. Create an integration in Homarr with the PeaNUT URL and those credentials.

No credentials required.

Steps to retrieve the credentials:

1. If PeaNUT runs with AUTH_DISABLED=true, create the integration with no credentials.

# PatchMon (/docs/integrations/patchmon)

PatchMon is a patch management and monitoring solution for Linux hosts, tracking package updates and security patches across your infrastructure.

Categories: Health Monitoring

PatchMon provides host and package update statistics including total hosts, hosts needing updates, and security update counts.

The PatchMon widget requires users to be **signed in to Homarr**; see the [PatchMon widget documentation](/docs/widgets/patchmon#authentication) for details on authentication and public boards.

### Widgets & Capabilities [#widgets--capabilities]

[PatchMon](/docs/widgets/patchmon): Displays host patch statistics including total hosts, hosts needing updates, and security update counts.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

**API Key**: The API key from PatchMon's GetHomepage integration.

**API Secret**: The API secret from PatchMon's GetHomepage integration.

Steps to retrieve the credentials:

1. Open your PatchMon instance
2. Navigate to Settings and create a new GetHomepage API key
3. Copy the API key and secret from the success dialog
4. Paste them into Homarr — Basic authentication is handled automatically

# Pi-hole (/docs/integrations/pi-hole)

Pi-hole is a network-wide ad blocker that acts as a DNS sinkhole, blocking unwanted content and improving your browsing experience.

Categories: DNS Hole

<Alert type="note">
Homarr supports both Pi-hole v5 and v6. It automatically detects the version and uses the correct API.
</Alert>

### Widgets & Capabilities [#widgets--capabilities]

[DNS Hole Summary](/docs/widgets/dns-hole-summary): Displays the summary of your Pi-hole, AdGuard Home or Technitium DNS blocks and queries statistics

[DNS Hole Controls](/docs/widgets/dns-hole-controls): Control the blocking feature of your Pi-hole, AdGuard Home or Technitium DNS from your dashboard

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

**API Key**: API Key from the service for authentication.

Pi-hole v6 uses a password or application password instead of an API key. Prefer an application password.

No credentials required.

# Plant-it (/docs/integrations/plantit)

A self-hosted gardening companion for tracking plants, species, photos, and care events.

Categories: Plant management

### Widgets & Capabilities [#widgets--capabilities]

[Statistics](/docs/widgets/stats): Combine selected statistics from multiple integrations in cards, compact rows, or grouped tables.

The Stats widget displays the number of plants, species, photos, and logged events in Plant-it. Homarr signs in with the configured Plant-it account before requesting these counters because current Plant-it releases expose stats through JWT authentication.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

**Username**: Account username for authentication.

**Password**: Account password for authentication.

Steps to retrieve the credentials:

1. Create or use a Plant-it account with access to the REST API.
2. Enter the Plant-it username and password when creating the integration in Homarr.

# Plex (/docs/integrations/plex)

Plex is a media server platform that allows you to organize, manage, and stream your personal media collection.

Categories: Media server

### Widgets & Capabilities [#widgets--capabilities]

[Media server streams](/docs/widgets/media-server): Show the current streams on your media servers

[Media releases](/docs/widgets/media-releases): Display newly added medias or upcoming releases from different integrations

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

**API Key**: API Key from the service for authentication.

Steps to retrieve the credentials:

1. Follow the official [Plex documentation](https://support.plex.tv/articles/204059436-finding-an-authentication-token-x-plex-token/) to find your authentication token.

# Prometheus (/docs/integrations/prometheus)

An open-source systems monitoring and alerting toolkit.

Categories: Monitoring

### Widgets & Capabilities [#widgets--capabilities]

[Statistics](/docs/widgets/stats): Combine selected statistics from multiple integrations in cards, compact rows, or grouped tables.

The [Stats widget](/docs/widgets/stats) reads Prometheus' `/api/v1/targets` endpoint and displays active targets, split into up and down counts. Targets with another health value remain included in the total.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

Use the Prometheus server URL. If the server is protected with HTTP Basic authentication, configure both the integration username and password; Homarr sends them with the targets request. The provider uses this fixed endpoint and does not execute arbitrary PromQL queries.

# Proxmox (/docs/integrations/proxmox)

Proxmox is a powerful open-source virtualization platform that allows you to run virtual machines and containers.

Categories: System monitoring

### Widgets and capabilities [#widgets-and-capabilities]

[System Health Monitoring](/docs/widgets/health-monitoring): Displays information showing the health and status of your system(s).

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

Use a Proxmox VE (`pve`) user and API token with the `PVEAuditor` role at `/` and **Propagate** enabled. PAM
authentication may not work with the API.

**Username**: Account username for authentication.

**Token ID**: Token ID used for authentication

**Realm**: The realm used for authentication, most of the time this is pve

**API Key**: API Key from the service for authentication.

For `api@pve!homarr`, use username `api`, realm `pve`, and token ID `homarr`.

Steps to retrieve the credentials:

1. Create a Proxmox VE user or group and grant PVEAuditor at / with Propagate enabled.
2. Create an API token for that user. Disable privilege separation to inherit the user permission, or grant the token the same PVEAuditor permission.
3. Copy the token secret when Proxmox displays it and enter the user, realm, token ID, and secret in Homarr.

# Prowlarr (/docs/integrations/prowlarr)

Prowlarr is an indexer manager for Usenet and BitTorrent, providing a unified interface to manage your indexers.

Categories: Indexer

### Widgets & Capabilities [#widgets--capabilities]

[Indexer manager status](/docs/widgets/indexer-manager): View the status of your indexers.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

**API Key**: API Key from the service for authentication.

# qBittorrent (/docs/integrations/q-bittorent)

qBittorrent is a free and open-source BitTorrent client.

Categories: Torrent client

### Widgets & Capabilities [#widgets--capabilities]

[Download Client](/docs/widgets/downloads): Allows you to view and manage your Downloads from both Torrent and Usenet clients.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

**API Key**: API Key from the service for authentication.

**Username**: Account username for authentication.

**Password**: Account password for authentication.

# Readarr (/docs/integrations/readarr)

Readarr is a book management tool that automates the process of downloading, sorting, and renaming books.

Categories: Media manager, Servarr

### Widgets & Capabilities [#widgets--capabilities]

[Calendar](/docs/widgets/calendar): Display events from your integrations in a calendar view within a certain relative time period

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

**API Key**: API Key from the service for authentication.

# Radarr (/docs/integrations/radarr)

Radarr is a movie management tool that automates the process of downloading, sorting, and renaming movies.

Categories: Media manager, Servarr

### Widgets & Capabilities [#widgets--capabilities]

[Calendar](/docs/widgets/calendar): Display events from your integrations in a calendar view within a certain relative time period

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

**API Key**: API Key from the service for authentication.

# RomM (/docs/integrations/romm)

A self-hosted ROM manager for organizing and playing your game library.

Categories: Game management

### Widgets & Capabilities [#widgets--capabilities]

[Statistics](/docs/widgets/stats): Combine selected statistics from multiple integrations in cards, compact rows, or grouped tables.

The [Stats widget](/docs/widgets/stats) reads RomM's `/api/stats` response and displays platform, ROM, save, state,
screenshot, and total file size metrics. The integration does not need a separate API key or credential; the configured
URL must point to a RomM instance whose stats endpoint is reachable by Homarr.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

No credentials required.

# SABnzbd (/docs/integrations/sabnzbd)

SABnzbd is an Open Source Binary Newsreader.

Categories: Usenet client

### Widgets & Capabilities [#widgets--capabilities]

[Download Client](/docs/widgets/downloads): Allows you to view and manage your Downloads from both Torrent and Usenet clients.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

**API Key**: API Key from the service for authentication.

# Scrutiny (/docs/integrations/scrutiny)

Hard drive S.M.A.R.T. monitoring and reporting.

Categories: Monitoring

### Widgets & Capabilities [#widgets--capabilities]

[Statistics](/docs/widgets/stats): Combine selected statistics from multiple integrations in cards, compact rows, or grouped tables.

The Scrutiny statistics expose passed, failed, and unknown non-archived devices. Scrutiny must have access to SMART-capable disks for these values to represent real disk health.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

# Slskd (/docs/integrations/slskd)

A modern client-server application for the Soulseek file sharing network.

Categories: System Monitoring

### Widgets & Capabilities [#widgets--capabilities]

[Download Client](/docs/widgets/downloads): Allows you to view and manage your Downloads from both Torrent and Usenet clients.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

**API Key**: API Key from the service for authentication.

# Seerr (/docs/integrations/seerr)

Seerr is a self-hosted media request management system that integrates with various media servers.

Categories: Media requests

### Widgets & Capabilities [#widgets--capabilities]

[Media Request List](/docs/widgets/media-request-list): See a list of all media requests from your integration

[Media Requests Stats](/docs/widgets/media-request-stats): Statistics about your media requests

[Media Search](/docs/management/search-engines/#media-request-search): Search for movies and TV shows directly from Spotlight and request them.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

**API Key**: API Key from the service for authentication.

# Sonarr (/docs/integrations/sonarr)

Sonarr is a TV series management tool that automates the process of downloading, sorting, and renaming episodes.

Categories: Media manager, Servarr

### Widgets & Capabilities [#widgets--capabilities]

[Calendar](/docs/widgets/calendar): Display events from your integrations in a calendar view within a certain relative time period

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

**API Key**: API Key from the service for authentication.

# Speedtest Tracker (/docs/integrations/speedtest-tracker)

Speedtest Tracker is a self-hosted internet performance tracking application.

Categories: Speedtest

### Widgets & Capabilities [#widgets--capabilities]

[Speedtest Tracker](/docs/widgets/speedtest-tracker): Displays speed test results from your Speedtest Tracker instance.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

**API Key**: API Key from the service for authentication.

# Spoolman (/docs/integrations/spoolman)

Spoolman tracks 3D printer filament spools, their contents, and usage.

Categories: 3D printing

### Widgets & Capabilities [#widgets--capabilities]

The [Stats widget](/docs/widgets/stats) displays the number of active spools and their total remaining filament weight.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

# Stash (/docs/integrations/stash)

A self-hosted media organizer for your adult collection.

Categories: Media management

### Widgets & Capabilities [#widgets--capabilities]

[Statistics](/docs/widgets/stats): Combine selected statistics from multiple integrations in cards, compact rows, or grouped tables.

The [Stats widget](/docs/widgets/stats) reads Stash's GraphQL stats query and displays scene and image counts and sizes,
scene duration, and gallery, performer, studio, and tag counts.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

**API Key**: API Key from the service for authentication.

Steps to retrieve the credentials:

1. Open Stash and go to Settings > Security.
2. Create an API key and copy it.
3. Paste the key into the API Key field when creating the integration in Homarr.

# Syncthing Relay Server (/docs/integrations/syncthing-relay)

A Syncthing relay server for connecting clients that cannot connect directly.

Categories: Networking

### Widgets & Capabilities [#widgets--capabilities]

[Statistics](/docs/widgets/stats): Combine selected statistics from multiple integrations in cards, compact rows, or grouped tables.

The [Stats widget](/docs/widgets/stats) reads the relay server's `/status` endpoint and displays active sessions, connections, and bytes proxied.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

Point the integration at the Syncthing Relay Server status endpoint. `strelaysrv` exposes `/status` on port `22070` by default; the relay protocol itself uses port `22067`.

# Synology DiskStation (/docs/integrations/synology)

Monitor CPU, memory, storage volumes, and system health from Synology DSM.

Categories: NAS, Hardware

### Widgets & Capabilities [#widgets--capabilities]

[System Health Monitoring](/docs/widgets/health-monitoring): Displays information showing the health and status of your system(s).

[System Resources](/docs/widgets/system-resources): Displays CPU, RAM and network of your host

[System disks](/docs/widgets/system-disks): Disk usage of your system

### Supported metrics [#supported-metrics]

| Widget section               | DSM API source                                        | May be unavailable                                      |
| ---------------------------- | ----------------------------------------------------- | ------------------------------------------------------- |
| CPU ring / chart             | `SYNO.Core.System.Utilization`                        | —                                                       |
| Memory ring / chart          | `SYNO.Core.System.Utilization`                        | —                                                       |
| CPU temperature ring         | `SYNO.Core.System` system info                        | Models without a temperature sensor                     |
| Network charts               | `SYNO.Core.System.Utilization` network totals         | Some DSM builds or permission configurations            |
| Load average (info modal)    | `SYNO.Core.System.Utilization` CPU load fields        | —                                                       |
| Storage volume usage         | `SYNO.Core.System` storage info / Storage Manager API | —                                                       |
| SMART status and temperature | Storage Manager and SMART APIs                        | Disk-to-volume mapping may be incomplete on some setups |
| Reboot / update indicator    | `SYNO.Core.System.Status` / upgrade APIs              | Permission-dependent                                    |
| GPU                          | Not available                                         | Typical DiskStation models                              |

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

<Alert type="info" title="Use the correct DSM URL">
Enter the HTTP or HTTPS URL of your Synology DSM web interface, for example <code>[http://diskstation.local:5000](http://diskstation.local:5000)</code>{" "}
or <code>[https://diskstation.local:5001](https://diskstation.local:5001)</code>. If DSM uses a self-signed certificate, add it under{" "}
<a href="/docs/management/certificates">Management > Tools > Certificates</a> so Homarr can connect securely.
</Alert>

### Secrets [#secrets]

**Username**: Account username for authentication.

**Password**: Account password for authentication.

<S type="caution" title="Administrators group required">
Homarr reads system, storage, and utilization data from APIs that require membership in the default Administrators group.
</S>

<S type="warning" title="Two-factor authentication is not supported">
Accounts with 2-step verification enabled cannot authenticate with this integration. Use a dedicated service account without 2FA.
</S>

<S type="tip" title="First-time setup">
If login fails during testing, temporarily disable automatic blocking for invalid logins under Control Panel > Security > Protection, then re-enable it after Homarr connects successfully.
</S>

Steps to retrieve the credentials:

1. Create a dedicated DSM user with a strong password for Homarr.
2. Add the user to the default Administrators group so Homarr can read `SYNO.Core.System` metrics.
3. Under User Groups and Permissions, deny access to shared folders and most applications.
4. Allow login to DSM only, optionally restricted by source IP address.
5. Log in once with the service account in DSM to accept terms and conditions.

### Storage volume selection [#storage-volume-selection]

Health Monitoring and System Disks widgets can filter Synology storage volumes when **every** selected integration is a Synology DiskStation. Leave **Visible storage volumes** empty to show all volumes, or pick specific volumes from the list. When multiple Synology integrations are connected, volumes are labeled with the integration name.

<Alert type="note" title="Synology-only option">
The volume filter is hidden when the widget also uses non-Synology integrations such as TrueNAS or Unraid.
</Alert>

<Alert type="note" title="Volume ordering">
When no volume filter is configured, the first volume returned by DSM is not guaranteed to be `volume_1`.
</Alert>

# Tandoor (/docs/integrations/tandoor)

A recipe management application for organizing and sharing recipes.

Categories: Recipe management

### Widgets & Capabilities [#widgets--capabilities]

[Statistics](/docs/widgets/stats): Combine selected statistics from multiple integrations in cards, compact rows, or grouped tables.

The [Stats widget](/docs/widgets/stats) displays the number of users, recipes, and keywords visible to the API key's account.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

**API Key**: API Key from the service for authentication.

Steps to retrieve the credentials:

1. Open Tandoor and go to Settings > API.
2. Generate a user API key with the read scope and copy it.
3. Paste the key into the API Key field when creating the integration in Homarr.

User and recipe totals refer to the first accessible Tandoor space, matching Homepage. Keyword totals use the API token's accessible scope.

# Tdarr (/docs/integrations/tdarr)

Tdarr is a distributed media transcoding system that allows you to process and optimize your media files across multiple nodes.

Categories: Media Transcoding

### Widgets & Capabilities [#widgets--capabilities]

[Media transcoding](/docs/widgets/media-transcoding): Statistics, current queue and worker status of your media transcoding

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

**API Key**: API Key from the service for authentication.

No credentials required.

# Technitium DNS (/docs/integrations/technitium-dns)

Technitium DNS Server is a self-hosted DNS server with ad-blocking and network-wide filtering capabilities.

Categories: DNS Hole

<Alert type="note">
Homarr supports Technitium DNS v11 and above. The correct API version is detected automatically - no manual
configuration is required.
</Alert>

### Widgets & Capabilities [#widgets--capabilities]

[DNS Hole Summary](/docs/widgets/dns-hole-summary): Displays the summary of your Pi-hole, AdGuard Home or Technitium DNS blocks and queries statistics

[DNS Hole Controls](/docs/widgets/dns-hole-controls): Control the blocking feature of your Pi-hole, AdGuard Home or Technitium DNS from your dashboard

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

<Alert type="info">
The **API token** option is recommended. API tokens are non-expiring and do not require storing your admin password in
Homarr. Username and password authentication uses a session token that expires after inactivity, triggering a silent
re-login on the next request.
</Alert>

<Alert type="warning">
The **DNS Hole Controls** widget (enabling, disabling, and timed disabling of blocking) requires the token to have
settings-level permissions. The **DNS Hole Summary** widget (stats only) works with any valid token. If Homarr cannot
read the blocking status due to insufficient permissions, the status indicator will be hidden but statistics will
still be shown.
</Alert>

**API Key**: API Key from the service for authentication.

Steps to retrieve the credentials:

1. Open the Technitium DNS web console and sign in.
2. Click on your username in the top-right corner and select "Create API Token".
3. Give the token a name (e.g. "Homarr") and click "Create Token".
4. Copy the generated token and paste it into the API Key field in Homarr.

**Username**: Account username for authentication.

**Password**: Account password for authentication.

Enter your Technitium DNS admin credentials. Homarr will exchange them for a session token and transparently re-authenticate when the session expires.

# Tracearr (/docs/integrations/tracearr)

Tracearr is a comprehensive media monitoring solution that tracks streams, user activity, and policy violations in your media server.

Categories: Media Monitoring

### Widgets & Capabilities [#widgets--capabilities]

[Tracearr](/docs/widgets/tracearr): Monitor media server streams, user activity, and policy violations.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

**API Key**: API Key from the service for authentication.

Steps to retrieve the credentials:

1. In Tracearr, go to **Settings → API** and generate or copy your API key.

# Traefik (/docs/integrations/traefik)

Cloud-native reverse proxy and load balancer

Categories: Reverse proxy, Monitoring

### Widgets & Capabilities [#widgets--capabilities]

[Traefik](/docs/widgets/traefik): Overview of Traefik routers, services, middlewares, and entry points.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

<CalloutContainer type="info">
<CalloutTitle>
URL configuration
</CalloutTitle>

<CalloutDescription>
Use the URL where Traefik exposes its dashboard/API, for example `http://traefik:8080` or `https://traefik.example.com`. Homarr calls Traefik endpoints under `/api` automatically.
</CalloutDescription>
</CalloutContainer>

<CalloutContainer type="warning">
<CalloutTitle>
API requirement
</CalloutTitle>

<CalloutDescription>
Traefik must have the API enabled. For local or internal setups this is commonly exposed through `api.insecure=true`; for production setups, expose the `api@internal` service through an authenticated router.
</CalloutDescription>
</CalloutContainer>

### Secrets [#secrets]

No credentials required.

Steps to retrieve the credentials:

1. Choose this option when the Traefik API is only reachable from a trusted internal network and does not require authentication.

**Username**: Account username for authentication.

**Password**: Account password for authentication.

Steps to retrieve the credentials:

1. Use this option when your Traefik dashboard route is protected by Basic Auth.
2. Enter the same username and password required to open the Traefik dashboard.

**API Key**: API Key from the service for authentication.

Steps to retrieve the credentials:

1. Use this option when your Traefik dashboard route accepts a bearer token.
2. Paste the token into the API Key field in Homarr.

# Transmission (/docs/integrations/transmission)

A Fast, Easy and Free Bittorrent Client.

Categories: Torrent client

### Widgets & Capabilities [#widgets--capabilities]

[Download Client](/docs/widgets/downloads): Allows you to view and manage your Downloads from both Torrent and Usenet clients.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

**Username**: Account username for authentication.

**Password**: Account password for authentication.

# Trilium (/docs/integrations/trilium)

A hierarchical note-taking application for building large personal knowledge bases.

Categories: Note taking

### Widgets & Capabilities [#widgets--capabilities]

[Statistics](/docs/widgets/stats): Combine selected statistics from multiple integrations in cards, compact rows, or grouped tables.

The Stats widget reads the Trilium metrics endpoint and displays the application version, active note count, and database size. It requires TriliumNext version 0.94.0 or newer.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

**API Key**: API Key from the service for authentication.

Steps to retrieve the credentials:

1. Open TriliumNext and go to Options > ETAPI.
2. Create a new ETAPI token and copy it.
3. Paste the token into the API Key field when creating the integration in Homarr.

# Tube Archivist (/docs/integrations/tubearchivist)

A self-hosted YouTube media server for downloading and organizing videos.

Categories: Media management

### Widgets & Capabilities [#widgets--capabilities]

[Statistics](/docs/widgets/stats): Combine selected statistics from multiple integrations in cards, compact rows, or grouped tables.

The [Stats widget](/docs/widgets/stats) reads Tube Archivist's video, channel, playlist, and download statistics endpoints and displays archived content plus pending downloads.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

**API Key**: API Key from the service for authentication.

Steps to retrieve the credentials:

1. Open Tube Archivist's Settings page and copy the generated API token.
2. Paste the token into Homarr's API Key field.

# TrueNAS (/docs/integrations/truenas)

Enterprise network-attached storage for your home, office, and cloud.

Categories: NAS, Hardware

### Widgets & Capabilities [#widgets--capabilities]

[System Health Monitoring](/docs/widgets/health-monitoring): Displays information showing the health and status of your system(s).

[System Resources](/docs/widgets/system-resources): Displays CPU, RAM and network of your host

Disk space uses each pool's root dataset to account for RAIDZ parity and dataset limits. If dataset space is unavailable,
Homarr falls back to physical pool space, which reads higher on RAIDZ, and keeps reporting pool health.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

<Alert type="info" title="Use the HTTPS address">
TrueNAS only serves its API over HTTPS, so enter the <code>https\://</code> URL of your TrueNAS web interface. If it
uses a self-signed certificate (the default), add it under{" "}
<a href="/docs/management/certificates">Management > Tools > Certificates</a> so Homarr can establish the
connection.
</Alert>

### Secrets [#secrets]

<S type="tip" title="Recommended">
API key authentication is the recommended method. It works across current TrueNAS versions and does not depend on user group membership.
</S>

**API Key**: API Key from the service for authentication.

Steps to retrieve the credentials:

1. In the TrueNAS web interface, click your user avatar in the top-right corner and select "API Keys".
2. Click "Add", give the key a name such as "Homarr", and confirm.
3. Copy the generated key immediately - TrueNAS only shows it once - and paste it as the API Key when creating the integration in Homarr.

**Username**: Account username for authentication.

**Password**: Account password for authentication.

<S type="caution" title="Administrative access required">
The account must have administrative API access. The `auxiliary_administrator` group was removed in TrueNAS 25.10; on that version or newer, use API key authentication instead, or assign the user a full-admin role.
</S>

Steps to retrieve the credentials:

1. In the TrueNAS web interface, go to "Credentials" > "Users" > "Add" and create a user with a secure password.
2. Grant the user administrative access so Homarr can read system, pool, and reporting data.
3. Save the user and create the integration in Homarr with these credentials.

# Umami (/docs/integrations/umami)

Privacy-focused, open-source web analytics

Categories: Analytics

### Widgets & Capabilities [#widgets--capabilities]

[Umami Analytics](/docs/widgets/umami): Display visitor stats from your Umami analytics instance

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

<CalloutContainer type="idea">
<CalloutTitle>
URL configuration
</CalloutTitle>

<CalloutDescription>
* **Umami Cloud:** Use `https://api.umami.is/v1`
* **Self-hosted:** Use `http://your-umami-host:3000/api`
</CalloutDescription>
</CalloutContainer>

### Secrets [#secrets]

**API Key**: API Key from the service for authentication.

Steps to retrieve the credentials:

1. Log in to your Umami instance (or Umami Cloud at https://cloud.umami.is)
2. Open Settings → API Keys
3. Click "Create API key"
4. Enter a name, e.g. "Homarr", and save
5. Copy the generated API key into Homarr

**Username**: Account username for authentication.

**Password**: Account password for authentication.

Steps to retrieve the credentials:

1. Use the username and password of your Umami account
2. Note: username/password auth is for self-hosted instances only - Umami Cloud requires an API key

# Unifi Controller (/docs/integrations/unifi-controller)

Unifi Controller is a network management platform for Unifi devices.

Categories: Network controller

This integration is using the [node-unifi](https://www.npmjs.com/package/node-unifi) library under the hood to connect to the Unifi Controller.
Therefore it should support CloudKey Gen1, CloudKey Gen2, UnifiOS-based UDM-Pro controllers as well as self-hosted UniFi controllers.

### Widgets & Capabilities [#widgets--capabilities]

[Network Controller Summary](/docs/widgets/network-controller-summary): Displays the summary of a Network Controller

[Network Status](/docs/widgets/network-controller-status): Display connected devices on a network

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

Use the local HTTPS address of your controller:

* UniFi OS consoles such as Dream Router, Dream Machine, Cloud Gateway, and CloudKey use `https://<host>` (port 443).
* Self-hosted UniFi Network Servers normally use `https://<host>:8443`.
* If you omit the port, Homarr tries port 443 first and then port 8443 when the first port cannot be reached.

Use a local administrator account. Cloud-only accounts and accounts with multi-factor authentication are not supported by the underlying client.

### Secrets [#secrets]

**Username**: Account username for authentication.

**Password**: Account password for authentication.

# Unmanic (/docs/integrations/unmanic)

A simple tool for processing videos and audio files.

Categories: Media Transcoding

### Widgets & Capabilities [#widgets--capabilities]

[Statistics](/docs/widgets/stats): Combine selected statistics from multiple integrations in cards, compact rows, or grouped tables.

The [Stats widget](/docs/widgets/stats) reads Unmanic's worker status with `GET /unmanic/api/v2/workers/status` and pending task count with the read-only `POST /unmanic/api/v2/pending/tasks` endpoint.

Unmanic does not authenticate these API requests. Protect the service with your network access controls before exposing it beyond a trusted network.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

No credentials required.

# Unraid (/docs/integrations/unraid)

Versatile operating system that lets you run applications, virtual machines, and storage devices on your server

Categories: NAS, Hardware

### Widgets & Capabilities [#widgets--capabilities]

[System Health Monitoring](/docs/widgets/health-monitoring): Displays information showing the health and status of your system(s).

[System Resources](/docs/widgets/system-resources): Displays CPU, RAM and network of your host

CPU usage is averaged across logical processors, including SMT threads.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

**API Key**: API Key from the service for authentication.

Steps to retrieve the credentials:

1. Are you using Unraid pre-7.2? If yes, please first [follow the steps here to install the Unraid API](https://docs.unraid.net/API/#plugin-installation-pre-72-and-advanced-users).
2. Open the settings and open the management access

   ![Unraid management](/_next/static/media/unraid-management.0d-69jt005qm-.png)
3. Click on the "API Keys" tab at the top and click on the "create API key" button. Choose "Create new"

   ![Unraid management](/_next/static/media/unraid-create-api-key.3w0he94zwfigw.png)
4. Enter a suitable name for your API key (e.g. Homarr), select the "Viewer" preset and submit the modal.

   ![Unraid management](/_next/static/media/unraid-select-api-key-preset.0v67-xz64vwpb.png)
5. Last, copy the API key after your API key has been created

   ![Unraid management](/_next/static/media/copy-api-key.1kp-0ytc3r3bd.png)

# Uptime Kuma (/docs/integrations/uptime-kuma)

Uptime Kuma is a self-hosted monitoring tool that tracks the availability of your services and websites.

Categories: Monitoring

Uptime Kuma monitors the availability of your services and provides uptime statistics through its status page API.

### Widgets & Capabilities [#widgets--capabilities]

[Uptime Kuma](/docs/widgets/uptime-kuma): Displays monitor uptime statistics, average uptime percentage, and service status counts.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

**Slug**: The slug or path identifier for the resource

Steps to retrieve the credentials:

1. Navigate to your Uptime Kuma instance
2. Go to Status Pages and create or select a status page
3. The slug is the URL path of your status page (e.g. "default" for /status/default)

<CalloutContainer type="idea">
<CalloutDescription>
If you don't specify a slug, Homarr will use `default` as the status page slug.
</CalloutDescription>
</CalloutContainer>

# What's Up Docker (/docs/integrations/whats-up-docker)

What's Up Docker (WUD) watches your Docker containers and reports which ones have newer image versions available.

Categories: Health Monitoring

The What's Up Docker integration lets Homarr connect to your [WUD](https://github.com/getwud/wud) instance so you can see how many of your watched containers have image updates available directly from your dashboard.

### Widgets & Capabilities [#widgets--capabilities]

[What's Up Docker](/docs/widgets/whats-up-docker): Displays how many watched containers have image updates available.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

<CalloutContainer type="info">
<CalloutTitle>
URL configuration
</CalloutTitle>

<CalloutDescription>
Use the root URL of your WUD instance, for example `https://wud.example.com`. Homarr uses `/api/containers` under that URL for both connection testing and widget data.
</CalloutDescription>
</CalloutContainer>

### Secrets [#secrets]

WUD 9 requires authentication. Enter your WUD username and password in Homarr; the initial admin credentials configured with `WUD_AUTH_ADMIN_USER` and `WUD_AUTH_ADMIN_PASSWORD` work with Basic authentication. Older WUD versions without authentication can leave both fields empty.

Credentials are sent to the configured URL over HTTP or HTTPS. Use HTTPS outside a trusted internal network.

No credentials required.

**Username**: Account username for authentication.

**Password**: Account password for authentication.

Steps to retrieve the credentials:

1. Use your WUD account credentials; older versions can use a configured WUD_AUTH_BASIC_* user
2. Enter that username and password in Homarr — Basic authentication is handled automatically

# xTeVe (/docs/integrations/xteve)

A M3U proxy for IPTV services with EPG support.

Categories: Media server

### Widgets & Capabilities [#widgets--capabilities]

[Statistics](/docs/widgets/stats): Combine selected statistics from multiple integrations in cards, compact rows, or grouped tables.

The [Stats widget](/docs/widgets/stats) sends xTeVe's read-only `POST /api/` status command and displays all, active, and
XEPG stream counts. The default xTeVe web port is `34400`.

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

### Secrets [#secrets]

No credentials required.

If xTeVe authentication is enabled, provide the xTeVe username and password so Homarr can log in before requesting status.

**Username**: Account username for authentication.

**Password**: Account password for authentication.

# Your Spotify (/docs/integrations/your-spotify)

A self-hosted Spotify listening history tracker.

Categories: Music

### Widgets & Capabilities [#widgets--capabilities]

[Statistics](/docs/widgets/stats): Combine selected statistics from multiple integrations in cards, compact rows, or grouped tables.

The [Stats widget](/docs/widgets/stats) reads Your Spotify's `songs_per`, `time_per`, and `different_artists_per`
endpoints and displays songs listened, listening time, and distinct artists. Homarr requests the fixed all-time range
used by the upstream widget (`start=2006-04-23T00:00:00.000Z` and `timeSplit=all`).

### Adding the integration [#adding-the-integration]

Create the connection under **Management → Integrations**. See [Managing integrations](/docs/management/integrations).

Point the integration at the Your Spotify API service, which listens on port `8080` by default. The API endpoints use
the public token generated under `Settings > Account > Public token`; add that token as the integration's API key.

### Secrets [#secrets]

**API Key**: API Key from the service for authentication.

Steps to retrieve the credentials:

1. Open Your Spotify's Settings > Account > Public token and generate a token if needed.
2. Paste the public token into the API Key field when creating the integration in Homarr.

# API (/docs/management/api)

Homarr exposes OpenAPI and tRPC endpoints for automation. Open the generated specification under
**Management → Tools → API** or use the [interactive API reference](/api-reference).

<img alt="Homarr's API documentation page" src="__img0" />

## Authentication [#authentication]

Create an API key from the **Authentication** tab. Its value has the form `<id>.<token>` and is shown once.

Send it in the `ApiKey` header:

```sh
curl -H 'ApiKey: <id>.<token>' https://homarr.example.com/api/info
```

The same header authenticates tRPC requests under `/api/trpc`. Without a key, browser requests can use the Homarr
session cookie.

API keys do not expire automatically and act as the user that created them. Every request uses that user's group and
resource permissions.

## Invitation dates [#invitation-dates]

`POST /api/invites` and the tRPC `invite.createInvite` procedure accept `expirationDate` as an ISO 8601 timestamp with a
timezone, for example `2026-12-01T18:00:00Z`. Homarr validates the timestamp and stores it as a date. tRPC callers should
send the ISO string rather than a JavaScript `Date` object.

## Health probes [#health-probes]

The liveness endpoint does not require authentication:

```sh
curl https://homarr.example.com/api/health/live
```

It returns JSON with overall and per-component status and latency. HTTP `200` means every dependency is healthy; HTTP
`500` identifies an unhealthy component without exposing its internal error. Health responses are not cached.

## Pagination [#pagination]

General paginated endpoints accept at most 100 records per page, and shared search endpoints accept a limit of at most 100. Request subsequent pages instead of using a larger value.

## Permission behavior [#permission-behavior]

Unauthorized operations return `FORBIDDEN`. List endpoints filter records on the server when resource-specific access
applies.

App catalog endpoints such as `app.all`, `app.getPaginated`, and `app.search` require **Modify all apps** because they
include internal URLs. Use `app.selectable` for the reduced board-picker fields.

Integration list and search endpoints return only integrations the key owner can access. Check each integration's
`hasUseAccess` and `hasInteractAccess` fields before reading data or invoking actions.

## Board automation [#board-automation]

The API can create, duplicate, rename, delete, and configure boards; manage board content; and set desktop or mobile home
boards.

Each board has exactly one Mobile and one Base layout. Mobile uses breakpoint `0`; all breakpoints are unique. Custom
layouts can use any other breakpoint, and Homarr selects the highest breakpoint that fits the viewport. Preserve layout
roles and use the canonical layouts returned by save operations, including generated IDs.

Creating or changing an integration-backed widget requires use access to each newly selected integration.

## Docker targets [#docker-targets]

Docker actions identify both the configured endpoint and the container:

```json
{
  "targets": [{ "endpointId": "local", "id": "container-id" }]
}
```

Read both values from `docker.getContainers` immediately before calling `docker.startAll`, `stopAll`, `restartAll`, or
`removeAll`. The endpoint ID prevents collisions between Docker or Podman hosts.

`docker.getContainers` accepts optional `endpointIds`. Omit it or pass an empty array for every configured endpoint.

## Partial upstream failures [#partial-upstream-failures]

Queries that combine several integrations can return healthy data alongside failure metadata. The exact response shape
depends on the endpoint; inspect the generated schema instead of assuming a common `error` field. When every selected
integration fails, the query returns an error.

## Custom Widget resources [#custom-widget-resources]

Authenticated administrators can retrieve the current Custom Widget authoring prompt, schema, component catalog, skill,
and focused references under `/api/custom-widgets/`.

Use [Custom Widget agent authoring](/docs/management/custom-widgets/agent-authoring) for the lifecycle and
[MCP](/docs/management/mcp) when the client supports Model Context Protocol.

## Gotify notification deletion [#gotify-notification-deletion]

The Notifications widget's `widget.notifications.deleteNotification` tRPC mutation accepts `integrationId` and
`notificationId` (a positive decimal string). It requires a signed-in user with Interact access to a Gotify integration,
deletes the message from Gotify, and invalidates its notification cache. It is not exposed through REST or MCP.

## Integration statistics [#integration-statistics]

`widget.stats.catalog` lists the metric keys and units for one integration. `widget.stats.snapshot` reads its shared snapshot without making service requests. `widget.stats.refresh` refreshes it through the shared concurrency limit; `force: true` bypasses the one-hour freshness check. Each procedure requires `integrationId` and checks Query access, including for cached values. These procedures are also exposed through MCP under `stats`. They are not REST endpoints.

Refresh returns the current snapshot, which may still be old if another process is refreshing that source. Inspect `updatedAt`, `stale`, `error`, and `retryAt`; a refresh failure retains successful values. See the [Statistics widget](../../widgets/stats) for cache behavior.

# Apps (/docs/management/apps)

An **app** is a saved shortcut used by the App and Bookmarks widgets. It contains a name, destination, icon, and
optional status-check address.

<img alt="The Apps management page" src="__img0" />

## How an app is used [#how-an-app-is-used]

<AppFlowDiagram />

## Configuration [#configuration]

Create and manage apps under **Management → Apps**.

| Field       | Purpose                                                                                  |
| ----------- | ---------------------------------------------------------------------------------------- |
| Name        | Label shown on the board                                                                 |
| Icon URL    | Direct image URL, icon-library result, or uploaded image                                 |
| Description | Optional tooltip                                                                         |
| URL         | Destination opened from the board; custom URI schemes are supported except `javascript:` |
| Ping URL    | Optional HTTP(S) address used for status checks when it differs from the destination     |

An app can be linked to an [integration](../integrations). Integration widgets then use the app as their destination
when they provide a link to the service.

See [Icons](/docs/advanced/icons) for icon sources and uploads.

## Permissions [#permissions]

* `app-create` creates apps.
* `app-modify-all` lists and edits every app.
* `app-full-all` also deletes and uses every app.
* `app-use-all` allows using every app on boards without granting management access.

Users with only `app-create` can open the page and create an app, but do not receive the existing app list.

# Certificates (/docs/management/certificates)

On this page you can manage your trusted certificates.
For example if you use a self signed certificate for one of the integrations you want to connect, you can add it here.

Below you can see a screenshot of the certificates page.
The items show the subject, filename and when it expires.
The color of the icon indicates how long it is valid.

<img alt="The Trusted certificates management page" src="__img0" />

<img alt="Trusted certificates page listing a certificate's subject, filename, and expiry" src="__img1" />

| Color     | Meaning                     |
| --------- | --------------------------- |
| 🟩 Green  | Valid for more than 30 days |
| 🟨 Yellow | Valid for less than 30 days |
| 🟧 Orange | Valid for less than a week  |
| 🟥 Red    | Valid for less than a day   |

## Opening the certificates page [#opening-the-certificates-page]

Navigate to `Management` > `Tools` > `Certificates`.

## Add a certificate [#add-a-certificate]

To add a certificate click on the "Add certificate" button. The upload form expands directly on the certificates page.

<img alt="Add certificate button on the Trusted certificates page" src="__img2" />

Then select the certificate file you want to add and click the "Add" button. You can cancel to collapse the form without
leaving the page.

## Delete a certificate [#delete-a-certificate]

To delete a certificate you can click on the trash icon in the certificate card.

<img alt="Certificate card with subject, filename, expiry date, and delete action" src="__img3" />

The first click arms the action and the second click confirms the deletion in place; no confirmation dialog is opened.

## Managing it through file system [#managing-it-through-file-system]

The certificates are stored in the `/appdata/trusted-certificates` directory which is mounted through `/appdata`.
This means you can automate the update of the certificates by simply replacing or adding a new file in the directory.

## Obtaining certificates [#obtaining-certificates]

Every integration has its own way of obtaining certificates.
Generally it is recommended to search for the documentation of the integration you are using.
Most of the time you can find the certificate in the file system of the integration.
Below you can find instructions for some of the integrations.

### Pi-hole (v6) [#pi-hole-v6]

Since version 6 of Pi-hole, the web interface can be accessed through HTTPS.
The certificate can be found in the path `/etc/pihole/tls_ca.crt`. To add the certificate, this file needs to be copied and uploaded to Homarr.
You can find more details regarding SSL / TLS for Pi-hole [here](https://docs.pi-hole.net/api/tls/).

### Proxmox [#proxmox]

For the default Proxmox VE cluster certificates, trust the cluster CA from `/etc/pve/pve-root-ca.pem` on any node.
See [Proxmox certificate management](https://pve.proxmox.com/wiki/Certificate_Management).

# Boards (/docs/management/boards)

A **board** is a dashboard page containing apps, widgets, and Containers. Its name is unique and forms the board URL.
Boards can be public or restricted to users and groups.

<img alt="The Boards management page" src="__img0" />

Create, duplicate, open, and delete boards under **Management → Boards**. Press `Shift+C` from a board to open the
board switcher.

## Responsive layouts [#responsive-layouts]

<BoardLayoutsDiagram />

Mobile and Base are protected layouts. New boards use three Mobile columns; Base uses the column count selected at
creation. Additional layouts use unique breakpoints. Homarr selects the layout with the highest breakpoint that fits
the current viewport.

Tiles use fixed `200 × 200` logical-pixel cells with a `24px` gap. Homarr scales the complete layout to the available
width instead of changing each widget's proportions. **Reset from Base** regenerates a Mobile or custom layout from the
current Base layout.

### Containers and rails [#containers-and-rails]

A **Container** groups apps, widgets, and nested Containers. It can have a label, collapse control, app-opening action,
border color, and CSS classes.

Items can occupy the outermost rows and columns of a Container. The drop preview shows the position where the item
will remain when released.
Dragging an item onto another item of the same size swaps their positions. Displaced items snap directly to their
previewed positions without a movement animation and stay there when you release the pointer.

A **rail** reserves one to three columns at the left or right of a non-Mobile layout. Rails stay fixed while the page
scrolls and store their contents separately for each layout.

## Edit a board [#edit-a-board]

Enter edit mode from the board header to add, move, resize, configure, or remove content. Save the board to persist the
layout.

* Drag from an item's inactive content area; Containers use their grip.
* Hold `Ctrl` on Windows/Linux or `Cmd` on macOS to select several items.
* Use **Move / resize item** for another canvas, rail, Container, or exact coordinates.
* Keyboard users can focus a tile, press Enter or Space, then move with arrow keys or resize with Shift + arrow keys.
* Press Escape during a pointer or touch interaction to restore the item to its previous position.

The add-content menu can create an app, integration, widget, or Container without leaving the board.
When adding apps, click one app to add it immediately, or choose **Select multiple** to add several at once. `Ctrl`/`Cmd`
click remains available as a shortcut.

## Board settings [#board-settings]

Board settings cover:

* **General:** page title, browser title, logo, and favicon.
* **Layout:** responsive layouts, breakpoints, columns, and rails.
* **Background:** image, attachment, size, and repeat behavior.
* **Appearance:** colors, opacity, icon color, and item radius.
* **Custom CSS:** styles applied only to the current board.
* **Behaviour:** app status and widget context-menu behavior.

See [Styling](/docs/advanced/styling) for board and global CSS.

Outside edit mode, widgets may expose an advanced view and a context menu for status, refresh, quick options, settings,
and actions. Available controls depend on the widget and the user's board and integration permissions.

## Access control [#access-control]

Public boards are readable without signing in. Private boards require user, group, or global access.

| Board access | View | Edit content and settings | Access control, rename, delete |
| ------------ | ---- | ------------------------- | ------------------------------ |
| View         | Yes  | No                        | No                             |
| Modify       | Yes  | Yes                       | No                             |
| Full         | Yes  | Yes                       | Yes                            |

Inherited access comes from group permissions. Resource-specific access can be granted from the board's access-control
section.

Renaming a board changes its URL without a redirect. Deleting a board is permanent.

## Home boards [#home-boards]

A **home board** opens at `/` and `/boards`. Desktop and mobile home boards are separate from the responsive layouts
inside a board.

Defaults can be set for a user, group, or the whole server. User settings take priority, followed by matching groups,
the `Everyone` group, and server defaults. Server-wide fallback boards must be public.

See [Users and groups](/docs/management/users) and [Server settings](/docs/management/settings#boards).

## Widget previews [#widget-previews]

The add and edit dialogs use the target board section’s sizing and scale. Large widgets may be shrunk to fit the preview area; their content layout is preserved. Custom CSS that depends on dashboard ancestors may render differently inside the dialog.

# Integrations (/docs/management/integrations)

An **integration** is a server-side connection from Homarr to a supported service. Integrations provide data and
actions to widgets and can be linked to apps.

<img alt="The integration catalog" src="__img0" />

See the [integration catalog](/docs/integrations) for service-specific URLs, credentials, and supported
widgets.

## Browser and server routes [#browser-and-server-routes]

<IntegrationRoutesDiagram />

## Configuration [#configuration]

Create and manage integrations under **Management → Integrations**. Select a service, provide its base URL and required
credentials, then test the connection. Homarr does not save a new integration until the test succeeds.

Use a URL reachable from the Homarr server or container. Unless an integration page says otherwise, provide the service
root rather than a settings or API subpage.

Credentials are encrypted and used only by the server. Linking an app is optional; it provides the browser-facing URL
used by widgets that open the service.

<img alt="Creating an integration with a server URL, API key, and linked app" src="__img1" />

Integrations can also be created while adding content to a board. Editing a connection from a widget updates that
integration everywhere it is used.

## Permissions [#permissions]

| Level    | Allows                                                   |
| -------- | -------------------------------------------------------- |
| Use      | Select the integration and read its data                 |
| Interact | Run supported actions, such as pausing a download        |
| Full     | Change the URL, credentials, permissions, and linked app |

<img alt="Per-integration access for users and groups" src="__img2" />

Global integration permissions apply to every integration. Resource access can instead be granted to specific users
or groups. Lists are filtered on the server and only include connections the current user can manage.

## Connection problems [#connection-problems]

If a connection test fails:

1. Check the integration page for the required base URL and credentials.
2. Test name resolution and HTTP access from the Homarr container or pod, not only from the host or browser.
3. Check Homarr and upstream-service logs, then any reverse proxy, firewall, VLAN, VPN, or DNS between them.
4. For a self-signed certificate, add the expected certificate under [Certificates](/docs/management/certificates).

Do not disable upstream security controls as a general troubleshooting step.

# Connect an agent (/docs/management/custom-widgets/agent-authoring)

An MCP-connected agent can validate, preview, test, and save Custom Widgets. The API key owner must be a Homarr
administrator.

Install the official skill:

```sh
npx skills add https://github.com/homarr-labs/homarr --skill homarr-custom-widget
```

The skill routes the agent to the release-matched schema, runtime, security, examples, and component metadata. It keeps
those references separate so the agent loads only what the current widget needs.

## MCP resources [#mcp-resources]

* Prompt: `homarr-custom-widget-author`
* Skill: `homarr://custom-widgets/skill`
* References: `homarr://custom-widgets/references/{schema|runtime|security}`
* Schema: `homarr://custom-widgets/schema`
* Components: `homarr://custom-widgets/components` and `components/{name}`
* Examples: `homarr://custom-widgets/examples/{name}`

Equivalent HTTP resources are available under `/api/custom-widgets/` for authenticated administrators.

## Authoring lifecycle [#authoring-lifecycle]

1. Load the skill and only the references needed for the design.
2. Read the external API documentation and build the definition.
3. Validate the JSX, then create a preview from the complete definition.
4. Run every returned query and simulate every relevant action against the current preview revision.
5. Inspect the preview and redacted journal. Revise the existing preview for JSX-only changes.
6. Save from the final tested preview.
7. Configure deployment-specific source URLs and credentials, then preview the saved definition again.

Use `templateLines` for multiline JSX tool input. A preview must have current evidence for every query and action before
it can be saved. Simulation counts as action evidence without performing the mutation.

If the agent does not have a source URL or credential, it can request a short-lived Homarr configuration URL. An
authenticated administrator completes it in Homarr; the agent receives the status, never the plaintext credential.

Agents can also search, inspect, install, and configure existing Workshop widgets instead of regenerating them.

See [MCP](/docs/management/mcp) for client configuration and [requests and security](/docs/management/custom-widgets/requests-and-security) for the
runtime limits.

# Create a Custom Widget (/docs/management/custom-widgets/authoring)

The workbench provides editors for general metadata, API sources, requests, widget options, JSX, and preview data. Raw
JSON is available when direct editing is faster.

## Workflow [#workflow]

1. Configure each API source, network scope, authentication method, and credential.
2. Add named queries and actions. Values can reference widget options or invocation parameters.
3. Define widget options and their defaults.
4. Write JSX using `data`, `status`, `options`, and temporary `inputs`.
5. Run **Test and preview**, inspect the response data and redacted request journal, then save.

Changing the definition, options, or credentials invalidates the previous preview. Preview actions are simulated unless
**Run actions against the configured API** is enabled for that preview session.

Widget options support text, textarea, number, switch, select, multi-select, slider, date, time, color, icon, URL,
duration, time zone, and JSON controls. Dynamic choices can come from a load query.

See the [safe JSX runtime](/docs/management/custom-widgets/custom-jsx),
[component reference](/docs/management/custom-widgets/component-reference), and
[request reference](/docs/management/custom-widgets/requests-and-security) for the authoring contract.

## Create with another AI service [#create-with-another-ai-service]

**Create or fix with any AI** copies a self-contained prompt for an ordinary ChatGPT or Claude conversation. The model
must return one fenced `json` block containing the complete definition. Paste that block into the workbench, add
credentials separately, and validate it against a real preview.

For an MCP-connected agent, use the [Homarr Custom Widget skill](/docs/management/custom-widgets/agent-authoring) instead.

# Component reference (/docs/management/custom-widgets/component-reference)

Search the components and properties exposed by Homarr's safe Custom JSX runtime. The live schema and diagnostics remain authoritative: properties marked as blocked cannot be passed from widget code, and denied components are shown only for explanation.

Custom JSX 2.0.0, Mantine 9.6.0. Properties are optional unless marked required. [Download the complete JSON catalog](/custom-widgets/component-catalog-v1.json).

## Global properties

- `abbr`: `string`.
- `about`: `string`.
- `accentHeight`: `string | number`.
- `accept`: `string`.
- `accessKey`: `string`.
- `accumulate`: `"none" | "sum"`.  Known values: "none", "sum".
- `additive`: `"sum" | "replace"`.  Known values: "replace", "sum".
- `align`: `"center" | "left" | "right"`.  Known values: "center", "char", "justify", "left", "right".
- `alignmentBaseline`: `"inherit" | "auto" | "baseline" | "before-edge" | "text-before-edge" | "middle" | "central" | "after-edge" | "text-after-edge" | "ideographic" | "alphabetic" | "hanging" | "mathematical"`.  Known values: "after-edge", "alphabetic", "auto", "baseline", "before-edge", "central", "hanging", "ideographic", "inherit", "mathematical", "middle", "text-after-edge", "text-before-edge".
- `allowReorder`: `"yes" | "no"`.  Known values: "no", "yes".
- `alphabetic`: `string | number`.
- `alt`: `string`.
- `amplitude`: `string | number`.
- `arabicForm`: `"initial" | "medial" | "terminal" | "isolated"`.  Known values: "initial", "isolated", "medial", "terminal".
- `aria-activedescendant`: `string`. Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.
- `aria-atomic`: `false | true | "true" | "false"`. Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. Known values: false, "false", true, "true".
- `aria-autocomplete`: `"none" | "inline" | "list" | "both"`. Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made. Known values: "both", "inline", "list", "none".
- `aria-braillelabel`: `string`. Defines a string value that labels the current element, which is intended to be converted into Braille.
- `aria-brailleroledescription`: `string`. Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.
- `aria-busy`: `false | true | "true" | "false"`.  Known values: false, "false", true, "true".
- `aria-checked`: `false | true | "true" | "false" | "mixed"`. Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. Known values: false, "false", "mixed", true, "true".
- `aria-colcount`: `number`. Defines the total number of columns in a table, grid, or treegrid.
- `aria-colindex`: `number`. Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.
- `aria-colindextext`: `string`. Defines a human readable text alternative of aria-colindex.
- `aria-colspan`: `number`. Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
- `aria-controls`: `string`. Identifies the element (or elements) whose contents or presence are controlled by the current element.
- `aria-current`: `false | true | "time" | "true" | "false" | "page" | "step" | "location" | "date"`. Indicates the element that represents the current item within a container or set of related elements. Known values: "date", false, "false", "location", "page", "step", "time", true, "true".
- `aria-describedby`: `string`. Identifies the element (or elements) that describes the object.
- `aria-description`: `string`. Defines a string value that describes or annotates the current element.
- `aria-details`: `string`. Identifies the element that provides a detailed, extended description for the object.
- `aria-disabled`: `false | true | "true" | "false"`. Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. Known values: false, "false", true, "true".
- `aria-dropeffect`: `"link" | "none" | "copy" | "execute" | "move" | "popup"`. Indicates what functions can be performed when a dragged object is released on the drop target. Known values: "copy", "execute", "link", "move", "none", "popup".
- `aria-errormessage`: `string`. Identifies the element that provides an error message for the object.
- `aria-expanded`: `false | true | "true" | "false"`. Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. Known values: false, "false", true, "true".
- `aria-flowto`: `string`. Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order.
- `aria-grabbed`: `false | true | "true" | "false"`. Indicates an element's "grabbed" state in a drag-and-drop operation. Known values: false, "false", true, "true".
- `aria-haspopup`: `false | true | "dialog" | "menu" | "grid" | "true" | "false" | "listbox" | "tree"`. Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. Known values: "dialog", false, "false", "grid", "listbox", "menu", "tree", true, "true".
- `aria-hidden`: `false | true | "true" | "false"`. Indicates whether the element is exposed to an accessibility API. Known values: false, "false", true, "true".
- `aria-invalid`: `false | true | "true" | "false" | "grammar" | "spelling"`. Indicates the entered value does not conform to the format expected by the application. Known values: false, "false", "grammar", "spelling", true, "true".
- `aria-keyshortcuts`: `string`. Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.
- `aria-label`: `string`. Defines a string value that labels the current element.
- `aria-labelledby`: `string`. Identifies the element (or elements) that labels the current element.
- `aria-level`: `number`. Defines the hierarchical level of an element within a structure.
- `aria-live`: `"off" | "assertive" | "polite"`. Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. Known values: "assertive", "off", "polite".
- `aria-modal`: `false | true | "true" | "false"`. Indicates whether an element is modal when displayed. Known values: false, "false", true, "true".
- `aria-multiline`: `false | true | "true" | "false"`. Indicates whether a text box accepts multiple lines of input or only a single line. Known values: false, "false", true, "true".
- `aria-multiselectable`: `false | true | "true" | "false"`. Indicates that the user may select more than one item from the current selectable descendants. Known values: false, "false", true, "true".
- `aria-orientation`: `"horizontal" | "vertical"`. Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. Known values: "horizontal", "vertical".
- `aria-owns`: `string`. Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
- `aria-placeholder`: `string`. Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.
- `aria-posinset`: `number`. Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
- `aria-pressed`: `false | true | "true" | "false" | "mixed"`. Indicates the current "pressed" state of toggle buttons. Known values: false, "false", "mixed", true, "true".
- `aria-readonly`: `false | true | "true" | "false"`. Indicates that the element is not editable, but is otherwise operable. Known values: false, "false", true, "true".
- `aria-relevant`: `"text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"`. Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. Known values: "additions", "additions removals", "additions text", "all", "removals", "removals additions", "removals text", "text", "text additions", "text removals".
- `aria-required`: `false | true | "true" | "false"`. Indicates that user input is required on the element before a form may be submitted. Known values: false, "false", true, "true".
- `aria-roledescription`: `string`. Defines a human-readable, author-localized description for the role of an element.
- `aria-rowcount`: `number`. Defines the total number of rows in a table, grid, or treegrid.
- `aria-rowindex`: `number`. Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.
- `aria-rowindextext`: `string`. Defines a human readable text alternative of aria-rowindex.
- `aria-rowspan`: `number`. Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.
- `aria-selected`: `false | true | "true" | "false"`. Indicates the current "selected" state of various widgets. Known values: false, "false", true, "true".
- `aria-setsize`: `number`. Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
- `aria-sort`: `"none" | "ascending" | "descending" | "other"`. Indicates if items in a table or grid are sorted in ascending or descending order. Known values: "ascending", "descending", "none", "other".
- `aria-valuemax`: `number`. Defines the maximum allowed value for a range widget.
- `aria-valuemin`: `number`. Defines the minimum allowed value for a range widget.
- `aria-valuenow`: `number`. Defines the current value for a range widget.
- `aria-valuetext`: `string`. Defines the human readable text alternative of aria-valuenow for a range widget.
- `ascent`: `string | number`.
- `attributeName`: `string`.
- `attributeType`: `string`.
- `autoCapitalize`: `(string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters"`.  Known values: "characters", "none", "off", "on", "sentences", "words".
- `autoComplete`: `HTMLInputAutoCompleteAttribute`.
- `autoCorrect`: `string`.
- `autoReverse`: `false | true | "true" | "false"`.  Known values: false, "false", true, "true".
- `autoSave`: `string`.
- `azimuth`: `string | number`.
- `baseFrequency`: `string | number`.
- `baseProfile`: `string | number`.
- `baselineShift`: `string | number`.
- `bbox`: `string | number`.
- `bd`: `StyleProp<Property.Border<string | number>>`. Border
- `bdrs`: `StyleProp<MantineSpacing>`. BorderRadius, theme key: theme.radius Known values: "lg", "md", "sm", "xl", "xs".
- `begin`: `string | number`.
- `bg`: `StyleProp<DefaultMantineColor>`. Background, theme key: theme.colors Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `bga`: `StyleProp<Property.BackgroundAttachment>`. BackgroundAttachment Known values: "-moz-initial", "fixed", "inherit", "initial", "local", "revert", "revert-layer", "scroll", "unset".
- `bgcolor`: `string`.
- `bgp`: `StyleProp<Property.BackgroundPosition<string | number>>`. BackgroundPosition
- `bgr`: `StyleProp<Property.BackgroundRepeat>`. BackgroundRepeat Known values: "-moz-initial", "inherit", "initial", "no-repeat", "repeat", "repeat-x", "repeat-y", "revert", "revert-layer", "round", "space", "unset".
- `bgsz`: `StyleProp<Property.BackgroundSize<string | number>>`. BackgroundSize
- `bias`: `string | number`.
- `border`: `number`.
- `by`: `string | number`.
- `c`: `StyleProp<DefaultMantineColor>`. Color Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `calcMode`: `string | number`.
- `capHeight`: `string | number`.
- `capture`: `false | true | "user" | "environment"`.  Known values: "environment", false, true, "user".
- `cellPadding`: `string | number`.
- `cellSpacing`: `string | number`.
- `checked`: `false | true`.  Known values: false, true.
- `clip`: `string | number`.
- `clipPath`: `string`.
- `clipPathUnits`: `string | number`.
- `clipRule`: `string | number`.
- `colSpan`: `number`.
- `color`: `string`. Key of `theme.colors` or any valid CSS color Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "initials", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `colorInterpolation`: `string | number`.
- `colorInterpolationFilters`: `"inherit" | "auto" | "sRGB" | "linearRGB"`.  Known values: "auto", "inherit", "linearRGB", "sRGB".
- `colorProfile`: `string | number`.
- `colorRendering`: `string | number`.
- `cols`: `number`.
- `content`: `string`.
- `contentScriptType`: `string | number`.
- `contentStyleType`: `string | number`.
- `contextMenu`: `string`.
- `crossOrigin`: `"" | "anonymous" | "use-credentials"`.  Known values: "", "anonymous", "use-credentials".
- `cursor`: `string | number`.
- `cx`: `string | number`.
- `cy`: `string | number`.
- `d`: `string`.
- `darkHidden`: `false | true`. Determines whether component should be hidden in dark color scheme with `display: none` Known values: false, true.
- `datatype`: `string`.
- `decelerate`: `string | number`.
- `defaultChecked`: `false | true`.  Known values: false, true.
- `defaultValue`: `string | number | readonly string[]`.
- `descent`: `string | number`.
- `diffuseConstant`: `string | number`.
- `dir`: `string`.
- `dirName`: `string`.
- `direction`: `string | number`.
- `disabled`: `false | true`.  Known values: false, true.
- `display`: `StyleProp<Property.Display>`.  Known values: "-moz-initial", "-ms-flexbox", "-ms-grid", "-ms-inline-flexbox", "-ms-inline-grid", "-webkit-flex", "-webkit-inline-flex", "block", "contents", "flex", "flow", "flow-root", "grid", "inherit", "initial", "inline", "inline-block", "inline-flex", "inline-grid", "inline-list-item", "inline-table", "list-item", "none", "revert", "revert-layer", "ruby", "ruby-base", "ruby-base-container", "ruby-text", "ruby-text-container", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-footer-group", "table-header-group", "table-row", "table-row-group", "unset".
- `divisor`: `string | number`.
- `dominantBaseline`: `"inherit" | "auto" | "text-before-edge" | "middle" | "central" | "text-after-edge" | "ideographic" | "alphabetic" | "hanging" | "mathematical" | "use-script" | "no-change" | "reset-size"`.  Known values: "alphabetic", "auto", "central", "hanging", "ideographic", "inherit", "mathematical", "middle", "no-change", "reset-size", "text-after-edge", "text-before-edge", "use-script".
- `draggable`: `false | true | "true" | "false"`.  Known values: false, "false", true, "true".
- `dur`: `string | number`.
- `dx`: `string | number`.
- `dy`: `string | number`.
- `edgeMode`: `string | number`.
- `elevation`: `string | number`.
- `enableBackground`: `string | number`.
- `end`: `string | number`.
- `enterKeyHint`: `"search" | "enter" | "done" | "go" | "next" | "previous" | "send"`.  Known values: "done", "enter", "go", "next", "previous", "search", "send".
- `exponent`: `string | number`.
- `exportparts`: `string`.
- `externalResourcesRequired`: `false | true | "true" | "false"`.  Known values: false, "false", true, "true".
- `ff`: `StyleProp<"text" | (string & {}) | "monospace" | "heading">`. FontFamily Known values: "heading", "monospace", "text".
- `fill`: `string`.
- `fillOpacity`: `string | number`.
- `fillRule`: `"inherit" | "nonzero" | "evenodd"`.  Known values: "evenodd", "inherit", "nonzero".
- `filter`: `string`.
- `filterRes`: `string | number`.
- `filterUnits`: `string | number`.
- `flex`: `StyleProp<Property.Flex<string | number>>`.
- `floodColor`: `string | number`.
- `floodOpacity`: `string | number`.
- `focusable`: `false | true | "auto" | "true" | "false"`.  Known values: "auto", false, "false", true, "true".
- `fontFamily`: `string`.
- `fontSize`: `string | number`.
- `fontSizeAdjust`: `string | number`.
- `fontStretch`: `string | number`.
- `fontStyle`: `string | number`.
- `fontVariant`: `string | number`.
- `fontWeight`: `string | number`.
- `format`: `string | number`.
- `fr`: `string | number`.
- `frame`: `false | true`.  Known values: false, true.
- `from`: `string | number`.
- `fs`: `StyleProp<Property.FontStyle>`. FontStyle Known values: "-moz-initial", "inherit", "initial", "italic", "normal", "oblique", "revert", "revert-layer", "unset".
- `fw`: `StyleProp<Property.FontWeight>`. FontWeight Known values: "-moz-initial", "bold", "bolder", "inherit", "initial", "lighter", "normal", "revert", "revert-layer", "unset".
- `fx`: `string | number`.
- `fy`: `string | number`.
- `fz`: `StyleProp<number | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | MantineFontSize>`. FontSize, theme key: theme.fontSizes Known values: "h1", "h2", "h3", "h4", "h5", "h6", "lg", "md", "sm", "xl", "xs".
- `g1`: `string | number`.
- `g2`: `string | number`.
- `glyphName`: `string | number`.
- `glyphOrientationHorizontal`: `string | number`.
- `glyphOrientationVertical`: `string | number`.
- `gradientTransform`: `string`.
- `gradientUnits`: `string`.
- `h`: `StyleProp<Property.Height<string | number>>`. Height, theme key: theme.spacing
- `hanging`: `string | number`.
- `headers`: `string`.
- `height`: `string | number`. Height of the brush in pixels.
- `hidden`: `false | true`.  Known values: false, true.
- `hiddenFrom`: `MantineBreakpoint`. Breakpoint above which the component is hidden with `display: none` Known values: "lg", "md", "sm", "xl", "xs".
- `horizAdvX`: `string | number`.
- `horizOriginX`: `string | number`.
- `href`: `string`.
- `id`: `string`. Static id used as base to generate `aria-` attributes, by default generates random id
- `ideographic`: `string | number`.
- `imageRendering`: `string | number`.
- `in`: `string`.
- `in2`: `string | number`.
- `inert`: `false | true`.  Known values: false, true.
- `inlist`: `unknown`.
- `inputMode`: `"search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal"`. Hints at the type of data that might be entered by the user while editing the element or its contents Known values: "decimal", "email", "none", "numeric", "search", "tel", "text", "url".
- `intercept`: `string | number`.
- `is`: `string`. Specify that a standard HTML element should behave like a defined custom built-in element
- `itemID`: `string`.
- `itemProp`: `string`.
- `itemScope`: `false | true`.  Known values: false, true.
- `itemType`: `string`.
- `k`: `string | number`.
- `k1`: `string | number`.
- `k2`: `string | number`.
- `k3`: `string | number`.
- `k4`: `string | number`.
- `kernelMatrix`: `string | number`.
- `kernelUnitLength`: `string | number`.
- `kerning`: `string | number`.
- `key`: `Key | null`. Stable identity used by React when rendering collections.
- `keyPoints`: `string | number`.
- `keySplines`: `string | number`.
- `keyTimes`: `string | number`.
- `lang`: `string`.
- `lengthAdjust`: `string | number`.
- `letterSpacing`: `string | number`.
- `lh`: `StyleProp<number | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | MantineLineHeight>`. LineHeight, theme key: lineHeights Known values: "h1", "h2", "h3", "h4", "h5", "h6", "lg", "md", "sm", "xl", "xs".
- `lightHidden`: `false | true`. Determines whether component should be hidden in light color scheme with `display: none` Known values: false, true.
- `lightingColor`: `string | number`.
- `limitingConeAngle`: `string | number`.
- `list`: `string`.
- `local`: `string | number`.
- `lts`: `StyleProp<Property.LetterSpacing<string | number>>`. LetterSpacing
- `m`: `StyleProp<MantineSpacing>`. Margin, theme key: theme.spacing Known values: "lg", "md", "sm", "xl", "xs".
- `mah`: `StyleProp<Property.MaxHeight<string | number>>`. MaxHeight, theme key: theme.spacing
- `markerEnd`: `string`.
- `markerHeight`: `string | number`.
- `markerMid`: `string`.
- `markerStart`: `string`.
- `markerUnits`: `string | number`.
- `markerWidth`: `string | number`.
- `mask`: `string`.
- `maskContentUnits`: `string | number`.
- `maskUnits`: `string | number`.
- `mathematical`: `string | number`.
- `maw`: `StyleProp<Property.MaxWidth<string | number>>`. MaxWidth, theme key: theme.spacing
- `max`: `string | number`.
- `maxLength`: `number`.
- `mb`: `StyleProp<MantineSpacing>`. MarginBottom, theme key: theme.spacing Known values: "lg", "md", "sm", "xl", "xs".
- `me`: `StyleProp<MantineSpacing>`. MarginInlineEnd, theme key: theme.spacing Known values: "lg", "md", "sm", "xl", "xs".
- `media`: `string`.
- `method`: `string`.
- `mie`: `StyleProp<MantineSpacing>`. MarginInlineEnd, theme key: theme.spacing Known values: "lg", "md", "sm", "xl", "xs".
- `mih`: `StyleProp<Property.MinHeight<string | number>>`. MinHeight, theme key: theme.spacing
- `min`: `string | number`.
- `minLength`: `number`.
- `mis`: `StyleProp<MantineSpacing>`. MarginInlineStart, theme key: theme.spacing Known values: "lg", "md", "sm", "xl", "xs".
- `miw`: `StyleProp<Property.MinWidth<string | number>>`. MinWidth, theme key: theme.spacing
- `ml`: `StyleProp<MantineSpacing>`. MarginLeft, theme key: theme.spacing Known values: "lg", "md", "sm", "xl", "xs".
- `mod`: `BoxMod`. Element modifiers transformed into `data-` attributes, for example, `{ 'data-size': 'xl' }`, falsy values are removed
- `mode`: `string | number`.
- `mr`: `StyleProp<MantineSpacing>`. MarginRight, theme key: theme.spacing Known values: "lg", "md", "sm", "xl", "xs".
- `ms`: `StyleProp<MantineSpacing>`. MarginInlineStart, theme key: theme.spacing Known values: "lg", "md", "sm", "xl", "xs".
- `mt`: `StyleProp<MantineSpacing>`. MarginTop, theme key: theme.spacing Known values: "lg", "md", "sm", "xl", "xs".
- `multiple`: `false | true`.  Known values: false, true.
- `mx`: `StyleProp<MantineSpacing>`. MarginInline, theme key: theme.spacing Known values: "lg", "md", "sm", "xl", "xs".
- `my`: `StyleProp<MantineSpacing>`. MarginBlock, theme key: theme.spacing Known values: "lg", "md", "sm", "xl", "xs".
- `name`: `string`.
- `nonce`: `string`.
- `numOctaves`: `string | number`.
- `offset`: `string | number`.
- `opacity`: `StyleProp<Property.Opacity>`.  Known values: "-moz-initial", "inherit", "initial", "revert", "revert-layer", "unset".
- `operator`: `string | number`.
- `order`: `string | number`.
- `orient`: `string | number`.
- `orientation`: `string | number`.
- `origin`: `string | number`.
- `overflow`: `string | number`.
- `overlinePosition`: `string | number`.
- `overlineThickness`: `string | number`.
- `p`: `StyleProp<MantineSpacing>`. Padding, theme key: theme.spacing Known values: "lg", "md", "sm", "xl", "xs".
- `paintOrder`: `string | number`.
- `panose1`: `string | number`.
- `part`: `string`.
- `path`: `string`.
- `pathLength`: `string | number`.
- `pattern`: `string`.
- `patternContentUnits`: `string`.
- `patternTransform`: `string | number`.
- `patternUnits`: `string`.
- `pb`: `StyleProp<MantineSpacing>`. PaddingBottom, theme key: theme.spacing Known values: "lg", "md", "sm", "xl", "xs".
- `pe`: `StyleProp<MantineSpacing>`. PaddingInlineEnd, theme key: theme.spacing Known values: "lg", "md", "sm", "xl", "xs".
- `pie`: `StyleProp<MantineSpacing>`. PaddingInlineEnd, theme key: theme.spacing Known values: "lg", "md", "sm", "xl", "xs".
- `pis`: `StyleProp<MantineSpacing>`. PaddingInlineStart, theme key: theme.spacing Known values: "lg", "md", "sm", "xl", "xs".
- `pl`: `StyleProp<MantineSpacing>`. PaddingLeft, theme key: theme.spacing Known values: "lg", "md", "sm", "xl", "xs".
- `placeholder`: `string`.
- `pointerEvents`: `string | number`.
- `points`: `string`.
- `pointsAtX`: `string | number`.
- `pointsAtY`: `string | number`.
- `pointsAtZ`: `string | number`.
- `pr`: `StyleProp<MantineSpacing>`. PaddingRight, theme key: theme.spacing Known values: "lg", "md", "sm", "xl", "xs".
- `prefix`: `string`.
- `preserveAlpha`: `false | true | "true" | "false"`.  Known values: false, "false", true, "true".
- `preserveAspectRatio`: `string`.
- `primitiveUnits`: `string | number`.
- `property`: `string`.
- `ps`: `StyleProp<MantineSpacing>`. PaddingInlineStart, theme key: theme.spacing Known values: "lg", "md", "sm", "xl", "xs".
- `pt`: `StyleProp<MantineSpacing>`. PaddingTop, theme key: theme.spacing Known values: "lg", "md", "sm", "xl", "xs".
- `px`: `StyleProp<MantineSpacing>`. PaddingInline, theme key: theme.spacing Known values: "lg", "md", "sm", "xl", "xs".
- `py`: `StyleProp<MantineSpacing>`. PaddingBlock, theme key: theme.spacing Known values: "lg", "md", "sm", "xl", "xs".
- `r`: `string | number`.
- `radioGroup`: `string`.
- `radius`: `MantineRadius`. Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem Known values: "lg", "md", "sm", "xl", "xs".
- `readOnly`: `false | true`.  Known values: false, true.
- `rel`: `string`.
- `renderingIntent`: `string | number`.
- `repeatCount`: `string | number`.
- `repeatDur`: `string | number`.
- `required`: `false | true`.  Known values: false, true.
- `requiredExtensions`: `string | number`.
- `requiredFeatures`: `string | number`.
- `resource`: `string`.
- `restart`: `string | number`.
- `result`: `string`.
- `results`: `number`.
- `rev`: `string`.
- `role`: `AriaRole`.
- `rotate`: `string | number`.
- `rowSpan`: `number`.
- `rows`: `number`.
- `rules`: `"none" | "all" | "rows" | "groups" | "columns"`.  Known values: "all", "columns", "groups", "none", "rows".
- `rx`: `string | number`.
- `ry`: `string | number`.
- `scale`: `string | number`.
- `scope`: `string`.
- `security`: `string`.
- `seed`: `string | number`.
- `shadow`: `MantineShadow`. Key of `theme.shadows` or any other valid CSS `box-shadow` value Known values: "lg", "md", "sm", "xl", "xs".
- `shapeRendering`: `string | number`.
- `size`: `"xs" | "sm" | "md" | "lg" | "xl"`. Component size Known values: "compact-lg", "compact-md", "compact-sm", "compact-xl", "compact-xs", "input-lg", "input-md", "input-sm", "input-xl", "input-xs", "lg", "md", "sm", "xl", "xs".
- `slope`: `string | number`.
- `slot`: `string`.
- `spacing`: `string | number`.
- `specularConstant`: `string | number`.
- `specularExponent`: `string | number`.
- `speed`: `string | number`.
- `spellCheck`: `false | true | "true" | "false"`.  Known values: false, "false", true, "true".
- `spreadMethod`: `string`.
- `src`: `string`.
- `startOffset`: `string | number`.
- `stdDeviation`: `string | number`.
- `stemh`: `string | number`.
- `stemv`: `string | number`.
- `step`: `string | number`.
- `stitchTiles`: `string | number`.
- `stopColor`: `string`.
- `stopOpacity`: `string | number`.
- `strikethroughPosition`: `string | number`.
- `strikethroughThickness`: `string | number`.
- `string`: `string | number`.
- `stroke`: `string`.
- `strokeDasharray`: `string | number`.
- `strokeDashoffset`: `string | number`.
- `strokeLinecap`: `"inherit" | "round" | "butt" | "square"`.  Known values: "butt", "inherit", "round", "square".
- `strokeLinejoin`: `"inherit" | "round" | "miter" | "bevel"`.  Known values: "bevel", "inherit", "miter", "round".
- `strokeMiterlimit`: `string | number`.
- `strokeOpacity`: `string | number`.
- `strokeWidth`: `string | number`.
- `style`: `CSSProperties`. Style to apply to the root element, used for virtualizer positioning
- `styles`: `Partial<Record<"label", CSSProperties>>`.
- `summary`: `string`.
- `surfaceScale`: `string | number`.
- `systemLanguage`: `string | number`.
- `ta`: `StyleProp<Property.TextAlign>`. TextAlign Known values: "-khtml-center", "-khtml-left", "-khtml-right", "-moz-center", "-moz-initial", "-moz-left", "-moz-right", "-webkit-center", "-webkit-left", "-webkit-match-parent", "-webkit-right", "center", "end", "inherit", "initial", "justify", "left", "match-parent", "revert", "revert-layer", "right", "start", "unset".
- `tabIndex`: `number`. Tab index for the node
- `tableValues`: `string | number`.
- `target`: `string`.
- `targetX`: `string | number`.
- `targetY`: `string | number`.
- `td`: `StyleProp<Property.TextDecoration<string | number>>`. TextDecoration
- `textAnchor`: `"inherit" | "end" | "start" | "middle"`.  Known values: "end", "inherit", "middle", "start".
- `textDecoration`: `string | number`.
- `textLength`: `string | number`.
- `textRendering`: `string | number`.
- `title`: `string`. Item title, displayed next to the bullet
- `to`: `string | number`.
- `transform`: `string`.
- `translate`: `"yes" | "no"`.  Known values: "no", "yes".
- `tt`: `StyleProp<Property.TextTransform>`. TextTransform Known values: "-moz-initial", "capitalize", "full-size-kana", "full-width", "inherit", "initial", "lowercase", "math-auto", "none", "revert", "revert-layer", "unset", "uppercase".
- `type`: `"button" | "submit" | "reset"`.  Known values: "button", "checkbox", "color", "date", "datetime-local", "email", "file", "hidden", "image", "month", "number", "password", "radio", "range", "reset", "search", "submit", "tel", "text", "time", "url", "week".
- `typeof`: `string`.
- `u1`: `string | number`.
- `u2`: `string | number`.
- `underlinePosition`: `string | number`.
- `underlineThickness`: `string | number`.
- `unicode`: `string | number`.
- `unicodeBidi`: `string | number`.
- `unicodeRange`: `string | number`.
- `unitsPerEm`: `string | number`.
- `unselectable`: `"off" | "on"`.  Known values: "off", "on".
- `vAlphabetic`: `string | number`.
- `vHanging`: `string | number`.
- `vIdeographic`: `string | number`.
- `vMathematical`: `string | number`.
- `valign`: `"bottom" | "top" | "baseline" | "middle"`.  Known values: "baseline", "bottom", "middle", "top".
- `value`: `string | number | readonly string[]`.
- `values`: `string`.
- `variant`: `string`. Variant passed from parent component, sets `data-variant` Known values: "contained", "contrast", "dashed", "default", "dot", "dotted", "filled", "gradient", "light", "outline", "pills", "separated", "solid", "subtle", "text", "transparent", "unstyled", "vertical", "white".
- `vectorEffect`: `string | number`.
- `version`: `string`.
- `vertAdvY`: `string | number`.
- `vertOriginX`: `string | number`.
- `vertOriginY`: `string | number`.
- `viewBox`: `string`.
- `viewTarget`: `string | number`.
- `visibility`: `string | number`.
- `visibleFrom`: `MantineBreakpoint`. Breakpoint below which the component is hidden with `display: none` Known values: "lg", "md", "sm", "xl", "xs".
- `vocab`: `string`.
- `w`: `StyleProp<Property.Width<string | number>>`. Width, theme key: theme.spacing
- `width`: `string | number`. Width of the brush in pixels. If undefined, defaults to the chart width.
- `widths`: `string | number`.
- `withBorder`: `false | true`. Adds border to the root element Known values: false, true.
- `wordSpacing`: `string | number`.
- `wrap`: `string`.
- `writingMode`: `string | number`.
- `x`: `string | number`. The x-coordinate of brush. If left undefined, it will be computed from the chart's offset and margins.
- `x1`: `string | number`.
- `x2`: `string | number`.
- `xChannelSelector`: `string`.
- `xHeight`: `string | number`.
- `xlinkActuate`: `string`.
- `xlinkArcrole`: `string`.
- `xlinkHref`: `string`.
- `xlinkRole`: `string`.
- `xlinkShow`: `string`.
- `xlinkTitle`: `string`.
- `xlinkType`: `string`.
- `xmlBase`: `string`.
- `xmlLang`: `string`.
- `xmlSpace`: `string`.
- `xmlns`: `string`.
- `xmlnsXlink`: `string`.
- `y`: `string | number`. The y-coordinate of brush. If left undefined, it will be computed from the chart's offset and margins.
- `y1`: `string | number`.
- `y2`: `string | number`.
- `yChannelSelector`: `string`.
- `z`: `string | number`.
- `zoomAndPan`: `string`.

## Blocked capabilities

- `__proto__` (prop): This capability is blocked by the Custom JSX safety boundary.
- `apply` (prop): This capability is blocked by the Custom JSX safety boundary.
- `arguments` (prop): This capability is blocked by the Custom JSX safety boundary.
- `autoFocus` (prop): This capability is blocked by the Custom JSX safety boundary.
- `backdropFilter` (prop): This capability is blocked by the Custom JSX safety boundary.
- `behavior` (prop): This capability is blocked by the Custom JSX safety boundary.
- `bottom` (prop): This capability is blocked by the Custom JSX safety boundary.
- `call` (prop): This capability is blocked by the Custom JSX safety boundary.
- `callee` (prop): This capability is blocked by the Custom JSX safety boundary.
- `caller` (prop): This capability is blocked by the Custom JSX safety boundary.
- `children` (prop): Children must be expressed as interpreted JSX, not passed as a raw prop.
- `className` (prop): Unscoped class injection can escape widget CSS isolation.
- `classNames` (prop): Unscoped class injection can escape widget CSS isolation.
- `classes` (prop): Unscoped class injection can escape widget CSS isolation.
- `clipPath` (prop): This capability is blocked by the Custom JSX safety boundary.
- `component` (prop): Polymorphic roots can replace the Homarr-owned element boundary.
- `constructor` (prop): This capability is blocked by the Custom JSX safety boundary.
- `content` (prop): This capability is blocked by the Custom JSX safety boundary.
- `contentEditable` (prop): This capability is blocked by the Custom JSX safety boundary.
- `dangerouslySetInnerHTML` (prop): Raw HTML injection is not available to authored widgets.
- `filter` (prop): This capability is blocked by the Custom JSX safety boundary.
- `form` (prop): External form submission is outside the named-request security boundary.
- `formAction` (prop): External form submission is outside the named-request security boundary.
- `formEncType` (prop): External form submission is outside the named-request security boundary.
- `formMethod` (prop): External form submission is outside the named-request security boundary.
- `formNoValidate` (prop): External form submission is outside the named-request security boundary.
- `formTarget` (prop): External form submission is outside the named-request security boundary.
- `innerRef` (prop): Refs expose underlying React components and DOM nodes.
- `inset` (prop): This capability is blocked by the Custom JSX safety boundary.
- `left` (prop): This capability is blocked by the Custom JSX safety boundary.
- `mask` (prop): This capability is blocked by the Custom JSX safety boundary.
- `ping` (prop): This capability is blocked by the Custom JSX safety boundary.
- `pointerEvents` (prop): This capability is blocked by the Custom JSX safety boundary.
- `popover` (prop): This capability is blocked by the Custom JSX safety boundary.
- `popoverTarget` (prop): Portal targeting can render or interact outside the widget root.
- `popoverTargetAction` (prop): Portal targeting can render or interact outside the widget root.
- `portalProps` (prop): Portal targeting can render or interact outside the widget root.
- `pos` (prop): This capability is blocked by the Custom JSX safety boundary.
- `position` (prop): This capability is blocked by the Custom JSX safety boundary.
- `prototype` (prop): This capability is blocked by the Custom JSX safety boundary.
- `ref` (prop): Refs expose underlying React components and DOM nodes.
- `renderRoot` (prop): Polymorphic roots can replace the Homarr-owned element boundary.
- `right` (prop): This capability is blocked by the Custom JSX safety boundary.
- `srcDoc` (prop): Raw HTML injection is not available to authored widgets.
- `suppressContentEditableWarning` (prop): This capability is blocked by the Custom JSX safety boundary.
- `suppressHydrationWarning` (prop): This capability is blocked by the Custom JSX safety boundary.
- `top` (prop): This capability is blocked by the Custom JSX safety boundary.
- `withinPortal` (prop): Portal targeting can render or interact outside the widget root.
- `zIndex` (prop): This capability is blocked by the Custom JSX safety boundary.
- `on*` (prop-pattern): Authored event callbacks can execute code outside the declarative runtime.
- `*Ref` (prop-pattern): Refs expose underlying React components and DOM nodes.
- `__*` (prop-pattern): Private and prototype-related properties are outside the supported authoring surface.

## Accordion

@mantine/core; navigation; safety: wrapped.

Bind a temporary string input with `bind`. Initialize with `defaultValue`; reset with `resetKey`.

Subcomponents: Accordion.Chevron, Accordion.Control, Accordion.Item, Accordion.Panel.

- `attributes`: `{ label?: Record<string, any>; content?: Record<string, any>; root?: Record<string, any>; item?: Record<string, any>; ... 4 more ...; control?: Record<...>; }`.
- `chevron`: `React.ReactNode`. Custom chevron icon
- `chevronIconSize`: `string | number`. Size of the default chevron icon. Ignored when `chevron` prop is set. Use `chevronSize` instead when using custom chevron.
- `chevronPosition`: `"left" | "right"`. Position of the chevron relative to the item label Known values: "left", "right".
- `chevronSize`: `string | number`. Size of the chevron icon container
- `color`: `string`.
- `defaultValue`: `AccordionValue<Multiple>`. Uncontrolled component default value
- `disableChevronRotation`: `false | true`. If set, chevron rotation is disabled Known values: false, true.
- `disableCollapse`: `false | true`. If set, the open item cannot be collapsed by clicking it again, so one item always stays open. Only applies when `multiple` is `false`. Known values: false, true.
- `keepMounted`: `false | true`. If set to `false`, panels are unmounted when collapsed. By default, panels stay mounted when collapsed. Known values: false, true.
- `keepMountedMode`: `"activity" | "display-none"`. Controls how inactive panels content is hidden when `keepMounted` is `true`, `'activity'` – hidden with `Activity` component, `'display-none'` – hidden with `display: none` styles Known values: "activity", "display-none".
- `loop`: `false | true`. If set, arrow keys loop through items (first to last and last to first) Known values: false, true.
- `multiple`: `Multiple`. If set, multiple items can be opened at the same time
- `order`: `2 | 3 | 4 | 5 | 6`. Sets heading level (h2-h6) for `Accordion.Control` elements. Wraps each control in the corresponding heading tag, recommended to meet WAI-ARIA accessibility requirements. Has no visual effect. Known values: 2, 3, 4, 5, 6.
- `transitionDuration`: `number`. Transition duration in ms
- `unstyled`: `false | true`.  Known values: false, true.
- `value`: `AccordionValue<Multiple>`. Controlled component value
- `variant`: `(string & {}) | AccordionVariant`.  Known values: "contained", "default", "filled", "separated".

- Provide an accessible label for controls without visible text.

[Upstream documentation for Accordion](https://mantine.dev/core/accordion/)

## Accordion.Chevron

@mantine/core; navigation; safety: wrapped.

- `color`: `string`.
- `display`: `string | number`.
- `opacity`: `string | number`.
- `radius`: `string | number`.
- `size`: `string | number`. Controls `width` and `height` of the icon, `16` by default
- `type`: `string`.

- Provide an accessible label for controls without visible text.

[Upstream documentation for Accordion.Chevron](https://mantine.dev/core/accordion/)

## Accordion.Control

@mantine/core; navigation; safety: wrapped.

- `chevron`: `React.ReactNode`. Custom chevron icon
- `color`: `string`.
- `icon`: `React.ReactNode`. Icon displayed next to the label
- `styles`: `Partial<Record<AccordionControlStylesNames, CSSProperties>>`.
- `type`: `"button" | "submit" | "reset"`.  Known values: "button", "reset", "submit".
- `variant`: `string`.

- Provide an accessible label for controls without visible text.

[Upstream documentation for Accordion.Control](https://mantine.dev/core/accordion/)

## Accordion.Item

@mantine/core; navigation; safety: wrapped.

- `color`: `string`.
- `styles`: `Partial<Record<"item", CSSProperties>>`.
- `value`: `string`. Required. Value that is used to manage the accordion state
- `variant`: `string`.

- Provide an accessible label for controls without visible text.

[Upstream documentation for Accordion.Item](https://mantine.dev/core/accordion/)

## Accordion.Panel

@mantine/core; navigation; safety: wrapped.

- `color`: `string`.
- `keepMounted`: `false | true`. If set, overrides the Accordion-level `keepMounted` value. When undefined (default), uses Accordion's `keepMounted` setting. Known values: false, true.
- `keepMountedMode`: `"activity" | "display-none"`. If set, overrides the Accordion-level `keepMountedMode` value. When undefined (default), uses Accordion's `keepMountedMode` setting. Known values: "activity", "display-none".
- `styles`: `Partial<Record<AccordionPanelStylesNames, CSSProperties>>`.
- `variant`: `string`.

- Provide an accessible label for controls without visible text.

[Upstream documentation for Accordion.Panel](https://mantine.dev/core/accordion/)

## AccordionChevron

@mantine/core; navigation; safety: wrapped.

- `color`: `string`.
- `display`: `string | number`.
- `opacity`: `string | number`.
- `radius`: `string | number`.
- `size`: `string | number`. Controls `width` and `height` of the icon, `16` by default
- `type`: `string`.

- Provide an accessible label for controls without visible text.

[Upstream documentation for AccordionChevron](https://mantine.dev/core/accordion-chevron/)

## AccordionControl

@mantine/core; navigation; safety: wrapped.

- `chevron`: `React.ReactNode`. Custom chevron icon
- `color`: `string`.
- `icon`: `React.ReactNode`. Icon displayed next to the label
- `styles`: `Partial<Record<AccordionControlStylesNames, CSSProperties>>`.
- `type`: `"button" | "submit" | "reset"`.  Known values: "button", "reset", "submit".
- `variant`: `string`.

- Provide an accessible label for controls without visible text.

[Upstream documentation for AccordionControl](https://mantine.dev/core/accordion-control/)

## AccordionItem

@mantine/core; navigation; safety: wrapped.

- `color`: `string`.
- `styles`: `Partial<Record<"item", CSSProperties>>`.
- `value`: `string`. Required. Value that is used to manage the accordion state
- `variant`: `string`.

- Provide an accessible label for controls without visible text.

[Upstream documentation for AccordionItem](https://mantine.dev/core/accordion-item/)

## AccordionPanel

@mantine/core; navigation; safety: wrapped.

- `color`: `string`.
- `keepMounted`: `false | true`. If set, overrides the Accordion-level `keepMounted` value. When undefined (default), uses Accordion's `keepMounted` setting. Known values: false, true.
- `keepMountedMode`: `"activity" | "display-none"`. If set, overrides the Accordion-level `keepMountedMode` value. When undefined (default), uses Accordion's `keepMountedMode` setting. Known values: "activity", "display-none".
- `styles`: `Partial<Record<AccordionPanelStylesNames, CSSProperties>>`.
- `variant`: `string`.

- Provide an accessible label for controls without visible text.

[Upstream documentation for AccordionPanel](https://mantine.dev/core/accordion-panel/)

## ActionBar

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

Subcomponents: ActionBar.CloseButton, ActionBar.Divider.

[Upstream documentation for ActionBar](https://mantine.dev/core/action-bar/)

## ActionBar.CloseButton

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for ActionBar.CloseButton](https://mantine.dev/core/action-bar/)

## ActionBar.Divider

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for ActionBar.Divider](https://mantine.dev/core/action-bar/)

## ActionBarCloseButton

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for ActionBarCloseButton](https://mantine.dev/core/action-bar-close-button/)

## ActionBarDivider

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for ActionBarDivider](https://mantine.dev/core/action-bar-divider/)

## ActionButton

@homarr/widgets; network; safety: wrapped. Runs a named user-triggered action.

- `color`: `string`.
- `confirmMessage`: `string`.
- `disabled`: `boolean | string`.
- `errorMessage`: `string`.
- `fullWidth`: `boolean | string`.
- `icon`: `string`.
- `label`: `string`.
- `params`: `Record<string, string | number | boolean>`.
- `requestId`: `string`. Identifier of the named Custom Widget action.
- `size`: `string`.
- `successMessage`: `string`.
- `variant`: `string`.

- Action labels must describe their effect; destructive actions require confirmation.

[Upstream documentation for ActionButton](https://homarr.dev/docs/management/custom-widgets/)

## ActionIcon

@mantine/core; interaction; safety: wrapped.

Subcomponents: ActionIcon.Group, ActionIcon.GroupSection.

- `attributes`: `{ root?: Record<string, any>; icon?: Record<string, any>; loader?: Record<string, any>; }`.
- `autoContrast`: `false | true`. If set, adjusts text color based on background color for `filled` variant Known values: false, true.
- `color`: `DefaultMantineColor`. Key of `theme.colors` or any valid CSS color. Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `data-disabled`: `false | true`.  Known values: false, true.
- `gradient`: `MantineGradient`. Gradient values used with `variant="gradient"`.
- `loaderProps`: `LoaderProps`. Props passed down to the `Loader` component. Ignored when `loading` prop is not set.
- `loading`: `false | true`. If set, `Loader` component is displayed instead of the `children` Known values: false, true.
- `size`: `number | MantineSize | (string & {}) | "input-xs" | "input-sm" | "input-md" | "input-lg" | "input-xl"`. Controls width and height of the button. Numbers are converted to rem. Known values: "input-lg", "input-md", "input-sm", "input-xl", "input-xs", "lg", "md", "sm", "xl", "xs".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `(string & {}) | ActionIconVariant`.  Known values: "default", "filled", "gradient", "light", "outline", "subtle", "transparent", "white".

- Provide a visible label or aria-label.

[Upstream documentation for ActionIcon](https://mantine.dev/core/action-icon/)

## ActionIcon.Group

@mantine/core; interaction; safety: wrapped.

- `attributes`: `{ group?: Record<string, any>; }`.
- `borderWidth`: `string | number`. `border-width` of the child components.
- `color`: `string`.
- `orientation`: `"horizontal" | "vertical"`. Group orientation Known values: "horizontal", "vertical".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.

- Provide a visible label or aria-label.

[Upstream documentation for ActionIcon.Group](https://mantine.dev/core/action-icon/)

## ActionIcon.GroupSection

@mantine/core; interaction; safety: wrapped.

- `attributes`: `{ groupSection?: Record<string, any>; }`.
- `autoContrast`: `false | true`. If set, adjusts text color based on background color for `filled` variant Known values: false, true.
- `color`: `string`.
- `gradient`: `MantineGradient`. Gradient values used with `variant="gradient"`.
- `size`: `number | MantineSize | (string & {})`. Controls section `height`, `font-size` and horizontal `padding` Known values: "lg", "md", "sm", "xl", "xs".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `(string & {}) | ActionIconVariant`.  Known values: "default", "filled", "gradient", "light", "outline", "subtle", "transparent", "white".

- Provide a visible label or aria-label.

[Upstream documentation for ActionIcon.GroupSection](https://mantine.dev/core/action-icon/)

## ActionIconGroup

@mantine/core; interaction; safety: wrapped.

- `attributes`: `{ group?: Record<string, any>; }`.
- `borderWidth`: `string | number`. `border-width` of the child components.
- `color`: `string`.
- `orientation`: `"horizontal" | "vertical"`. Group orientation Known values: "horizontal", "vertical".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.

- Provide a visible label or aria-label.

[Upstream documentation for ActionIconGroup](https://mantine.dev/core/action-icon-group/)

## ActionIconGroupSection

@mantine/core; interaction; safety: wrapped.

- `attributes`: `{ groupSection?: Record<string, any>; }`.
- `autoContrast`: `false | true`. If set, adjusts text color based on background color for `filled` variant Known values: false, true.
- `color`: `string`.
- `gradient`: `MantineGradient`. Gradient values used with `variant="gradient"`.
- `size`: `number | MantineSize | (string & {})`. Controls section `height`, `font-size` and horizontal `padding` Known values: "lg", "md", "sm", "xl", "xs".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `(string & {}) | ActionIconVariant`.  Known values: "default", "filled", "gradient", "light", "outline", "subtle", "transparent", "white".

- Provide a visible label or aria-label.

[Upstream documentation for ActionIconGroupSection](https://mantine.dev/core/action-icon-group-section/)

## Affix

@mantine/core; blocked; safety: denied.

Unavailable: Escapes the widget layout boundary

[Upstream documentation for Affix](https://mantine.dev/core/affix/)

## Alert

@mantine/core; feedback; safety: wrapped.

- `attributes`: `{ body?: Record<string, any>; label?: Record<string, any>; title?: Record<string, any>; root?: Record<string, any>; icon?: Record<...>; wrapper?: Record<...>; message?: Record<...>; closeButton?: Record<...>; }`.
- `autoContrast`: `false | true`. If set, adjusts text color based on background color for `filled` variant Known values: false, true.
- `closeButtonLabel`: `string`. Close button `aria-label`
- `color`: `DefaultMantineColor`. Key of `theme.colors` or any valid CSS color Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `icon`: `React.ReactNode`. Icon displayed next to the title
- `title`: `React.ReactNode`. Alert title
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `(string & {}) | AlertVariant`.  Known values: "default", "filled", "light", "outline", "transparent", "white".
- `withCloseButton`: `false | true`. Determines whether close button should be displayed Known values: false, true.

- Do not rely on color alone to communicate status.

[Upstream documentation for Alert](https://mantine.dev/core/alert/)

## AlphaSlider

@mantine/core; interaction; safety: wrapped.

- `attributes`: `{ slider?: Record<string, any>; sliderOverlay?: Record<string, any>; thumb?: Record<string, any>; }`.
- `color`: `string`. Required.
- `focusable`: `false | true`. If set, slider thumb can be focused Known values: false, true.
- `size`: `MantineSize | (string & {})`. Slider size Known values: "lg", "md", "sm", "xl", "xs".
- `unstyled`: `false | true`.  Known values: false, true.
- `value`: `number`. Required. Controlled component value
- `variant`: `string`.

- Provide a visible label or aria-label.

[Upstream documentation for AlphaSlider](https://mantine.dev/core/alpha-slider/)

## Anchor

@mantine/core; navigation; safety: wrapped.

- `attributes`: `{ root?: Record<string, any>; }`.
- `gradient`: `MantineGradient`. Gradient configuration, ignored when `variant` is not `gradient`
- `inherit`: `false | true`. Determines whether font properties should be inherited from the parent Known values: false, true.
- `inline`: `false | true`. Sets `line-height` to 1 for centering Known values: false, true.
- `lineClamp`: `number`. Number of lines after which Text will be truncated
- `size`: `"xs" | "sm" | "md" | "lg" | "xl" | (string & {})`. Controls `font-size` and `line-height` Known values: "lg", "md", "sm", "xl", "xs".
- `textWrap`: `"wrap" | "nowrap" | "balance" | "pretty" | "stable"`. Controls `text-wrap` CSS property Known values: "balance", "nowrap", "pretty", "stable", "wrap".
- `truncate`: `false | true | "end" | "start"`. Side on which Text must be truncated, if `true`, text is truncated from the start Known values: "end", false, "start", true.
- `underline`: `"always" | "hover" | "not-hover" | "never"`. Defines when `text-decoration: underline` styles are applied. Known values: "always", "hover", "never", "not-hover".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `(string & {}) | TextVariant`.  Known values: "gradient", "text".

- Provide an accessible label for controls without visible text.

[Upstream documentation for Anchor](https://mantine.dev/core/anchor/)

## AngleSlider

@mantine/core; interaction; safety: wrapped.

- `attributes`: `{ label?: Record<string, any>; mark?: Record<string, any>; root?: Record<string, any>; thumb?: Record<string, any>; marks?: Record<...>; }`.
- `color`: `string`.
- `defaultValue`: `number`. Uncontrolled component default value
- `hiddenInputProps`: `React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>`. Props passed down to the hidden input
- `marks`: `{ value: number; label?: string; }[]`. Array of marks displayed on the slider
- `restrictToMarks`: `false | true`. If set, the selection is allowed only from the given marks array Known values: false, true.
- `size`: `number`. Slider size in px
- `step`: `number`. Step between values
- `thumbSize`: `number`. Size of the thumb in px. Calculated based on the `size` value by default.
- `unstyled`: `false | true`.  Known values: false, true.
- `value`: `number`. Controlled component value
- `variant`: `string`.
- `withLabel`: `false | true`. If set, the label is displayed inside the slider Known values: false, true.

- Provide a visible label or aria-label.

[Upstream documentation for AngleSlider](https://mantine.dev/core/angle-slider/)

## AppShell

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

Subcomponents: AppShell.Aside, AppShell.Footer, AppShell.Header, AppShell.Main, AppShell.Navbar, AppShell.Section.

[Upstream documentation for AppShell](https://mantine.dev/core/app-shell/)

## AppShell.Aside

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for AppShell.Aside](https://mantine.dev/core/app-shell/)

## AppShell.Footer

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for AppShell.Footer](https://mantine.dev/core/app-shell/)

## AppShell.Header

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for AppShell.Header](https://mantine.dev/core/app-shell/)

## AppShell.Main

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for AppShell.Main](https://mantine.dev/core/app-shell/)

## AppShell.Navbar

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for AppShell.Navbar](https://mantine.dev/core/app-shell/)

## AppShell.Section

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for AppShell.Section](https://mantine.dev/core/app-shell/)

## AppShellAside

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for AppShellAside](https://mantine.dev/core/app-shell-aside/)

## AppShellFooter

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for AppShellFooter](https://mantine.dev/core/app-shell-footer/)

## AppShellHeader

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for AppShellHeader](https://mantine.dev/core/app-shell-header/)

## AppShellMain

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for AppShellMain](https://mantine.dev/core/app-shell-main/)

## AppShellNavbar

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for AppShellNavbar](https://mantine.dev/core/app-shell-navbar/)

## AppShellSection

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for AppShellSection](https://mantine.dev/core/app-shell-section/)

## AreaChart

@mantine/charts; charts; safety: wrapped.

- `accessibilityLayer`: `false | true`. Determines whether the chart should be keyboard-navigable with the recharts accessibility layer, `true` by default Known values: false, true.
- `activeDotProps`: `MantineChartDotProps`. Props passed down to all active dots. Ignored if `withDots={false}` is set.
- `areaChartProps`: `(CartesianChartProps<unknown> & { ref?: React.Ref<SVGSVGElement>; })`. Props passed down to recharts `AreaChart` component
- `attributes`: `{ area?: Record<string, any>; legend?: Record<string, any>; grid?: Record<string, any>; root?: Record<string, any>; ... 17 more ...; tooltipBody?: Record<...>; }`.
- `brushProps`: `Omit<BrushProps, "ref">`. Props passed down to the `Brush` component
- `color`: `string`.
- `connectNulls`: `false | true`. If set, points with `null` values are connected Known values: false, true.
- `curveType`: `"step" | "bump" | "linear" | "natural" | "monotone" | "stepBefore" | "stepAfter"`. Type of the curve Known values: "bump", "linear", "monotone", "natural", "step", "stepAfter", "stepBefore".
- `data`: `ChartData`. Required. Data used to display chart
- `dataKey`: `string`. Required. Key of the `data` object for x-axis values
- `dotProps`: `MantineChartDotProps`. Props passed down to all dots. Ignored if `withDots={false}` is set.
- `fillOpacity`: `number`. Controls fill opacity of all areas
- `gridAxis`: `"none" | "x" | "y" | "xy"`. Specifies which lines should be displayed in the grid, `'x'` by default Known values: "none", "x", "xy", "y".
- `gridColor`: `DefaultMantineColor`. Color of the grid and cursor lines, by default depends on color scheme Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `gridProps`: `Omit<CartesianGridProps, "ref">`. Props passed down to the `CartesianGrid` component
- `legendProps`: `Omit<LegendProps, "ref">`. Props passed down to the `Legend` component
- `orientation`: `"horizontal" | "vertical"`. Chart orientation, `'horizontal'` by default Known values: "horizontal", "vertical".
- `referenceAreas`: `ChartReferenceAreaProps[]`. Reference areas that should be displayed on the chart
- `referenceDots`: `ChartReferenceDotProps[]`. Reference dots that should be displayed on the chart
- `referenceLines`: `ChartReferenceLineProps[]`. Reference lines that should be displayed on the chart
- `rightYAxisLabel`: `string`. A label to display next to the right y-axis
- `rightYAxisProps`: `Omit<YAxisProps, "ref">`. Props passed down to the `YAxis` recharts component rendered on the right side
- `series`: `AreaChartSeries[]`. Required. An array of objects with `name` and `color` keys. Determines which data should be consumed from the `data` array.
- `splitColors`: `[DefaultMantineColor, DefaultMantineColor]`. A tuple of colors used when `type="split"` is set, ignored in all other cases. A tuple may include theme colors reference or any valid CSS colors
- `splitOffset`: `number`. Offset for the split gradient. By default, value is inferred from `data` and `series` if possible. Must be generated from the data array with `getSplitOffset` function.
- `strokeWidth`: `number`. Stroke width for the chart areas
- `textColor`: `DefaultMantineColor`. Color of the text displayed inside the chart, `'dimmed'` by default Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `tickLine`: `"none" | "x" | "y" | "xy"`. Specifies which axis should have tick line, `'y'` by default Known values: "none", "x", "xy", "y".
- `tooltipAnimationDuration`: `number`. Tooltip position animation duration in ms, `0` by default
- `tooltipProps`: `Omit<TooltipProps<any, any>, "ref">`. Props passed down to the `Tooltip` component
- `type`: `"default" | "stacked" | "percent" | "split" | "stream"`. Controls how chart areas are positioned relative to each other. Set to `'stream'` to render a streamgraph. Known values: "default", "percent", "split", "stacked", "stream".
- `unit`: `string`. Unit displayed next to each tick in y-axis
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `withBrush`: `false | true`. Determines whether a brush (range selector) should be displayed under the chart, `false` by default Known values: false, true.
- `withDots`: `false | true`. Determines whether dots should be displayed Known values: false, true.
- `withGradient`: `false | true`. Determines whether the chart area should be represented with a gradient instead of the solid color Known values: false, true.
- `withLegend`: `false | true`. Determines whether chart legend should be displayed, `false` by default Known values: false, true.
- `withPointLabels`: `false | true`. If set, each point has an associated label Known values: false, true.
- `withRightYAxis`: `false | true`. Determines whether additional y-axis should be displayed on the right side of the chart, `false` by default Known values: false, true.
- `withTooltip`: `false | true`. Determines whether chart tooltip should be displayed, `true` by default Known values: false, true.
- `withXAxis`: `false | true`. Determines whether x-axis should be displayed. Defaults to `false` for `type="stream"` with `orientation="vertical"` – the floating baseline makes the values not meaningful to read off. Known values: false, true.
- `withYAxis`: `false | true`. Determines whether y-axis should be displayed. Defaults to `false` for `type="stream"` with `orientation="horizontal"` – the floating baseline makes the values not meaningful to read off. Known values: false, true.
- `xAxisLabel`: `string`. A label to display below the x-axis
- `xAxisProps`: `Omit<XAxisProps, "ref">`. Props passed down to the `XAxis` recharts component
- `yAxisLabel`: `string`. A label to display next to the y-axis
- `yAxisProps`: `Omit<YAxisProps, "ref">`. Props passed down to the `YAxis` recharts component

- Include a nearby text summary of the chart data.

[Upstream documentation for AreaChart](https://mantine.dev/charts/area-chart/)

## AreaGradient

@mantine/charts; blocked; safety: denied.

Unavailable: Low-level chart implementation helper

[Upstream documentation for AreaGradient](https://mantine.dev/charts/area-gradient/)

## AspectRatio

@mantine/core; layout; safety: wrapped.

- `attributes`: `{ root?: Record<string, any>; }`.
- `color`: `string`.
- `ratio`: `number`. Aspect ratio, for example, `16 / 9`, `4 / 3`, `1920 / 1080`
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.

- Keep visual order consistent with reading order.

[Upstream documentation for AspectRatio](https://mantine.dev/core/aspect-ratio/)

## Autocomplete

@mantine/core; interaction; safety: wrapped.

Bind a temporary string input with `bind`. Initialize with `defaultValue`; reset with `resetKey`.

- `attributes`: `{ input?: Record<string, any>; label?: Record<string, any>; option?: Record<string, any>; section?: Record<string, any>; ... 11 more ...; groupLabel?: Record<...>; }`.
- `autoSelectOnBlur`: `false | true`. If set, the highlighted option is selected when the input loses focus Known values: false, true.
- `clearButtonProps`: `InputClearButtonProps`. Props passed down to the clear button
- `clearSectionMode`: `"both" | "rightSection" | "clear"`. Determines how the clear button and rightSection are rendered Known values: "both", "clear", "rightSection".
- `clearable`: `false | true`. If set, the clear button is displayed when the component has a value Known values: false, true.
- `color`: `string`.
- `comboboxProps`: `ComboboxProps`. Props passed down to `Combobox` component
- `data`: `ComboboxGenericData`. Data used to display options. Values must be unique.
- `defaultDropdownOpened`: `false | true`. Uncontrolled dropdown initial opened state Known values: false, true.
- `defaultValue`: `string`. Default value for uncontrolled component
- `description`: `React.ReactNode`. Contents of `Input.Description` component. If not set, description is not displayed.
- `descriptionProps`: `(InputDescriptionProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Description` component
- `dropdownOpened`: `false | true`. Controlled dropdown opened state Known values: false, true.
- `error`: `React.ReactNode`. Contents of `Input.Error` component. If not set, error is not displayed.
- `errorProps`: `(InputErrorProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Error` component
- `floatingHeight`: `"viewport"`. If set to `'viewport'`, the dropdown grows to fill the available vertical space in the viewport. Disables the `flip` middleware. Known values: "viewport".
- `inputSize`: `string`. HTML `size` attribute for the input element (number of visible characters)
- `inputWrapperOrder`: `("input" | "label" | "description" | "error")[]`. Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.
- `label`: `React.ReactNode`. Contents of `Input.Label` component. If not set, label is not displayed.
- `labelProps`: `(InputLabelProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Label` component
- `leftSection`: `React.ReactNode`. Content section displayed on the left side of the input
- `leftSectionPointerEvents`: `"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "all" | "fill" | "stroke" | "painted" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke"`. Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). Known values: "-moz-initial", "all", "auto", "fill", "inherit", "initial", "none", "painted", "revert", "revert-layer", "stroke", "unset", "visible", "visibleFill", "visiblePainted", "visibleStroke".
- `leftSectionProps`: `React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>`. Props passed down to the `leftSection` element
- `leftSectionWidth`: `Property.Width<string | number>`. Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height
- `limit`: `number`. Maximum number of options displayed at a time, `Infinity` by default
- `loading`: `false | true`. Displays loading indicator in the left or right section Known values: false, true.
- `loadingPosition`: `"left" | "right"`. Position of the loading indicator Known values: "left", "right".
- `maxDropdownHeight`: `string | number`. `max-height` of the dropdown, only applicable when `withScrollArea` prop is `true`, `250` by default
- `openOnFocus`: `false | true`. If set, the dropdown opens when the input receives focus Known values: false, true.
- `rightSection`: `React.ReactNode`. Content section displayed on the right side of the input
- `rightSectionPointerEvents`: `"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "all" | "fill" | "stroke" | "painted" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke"`. Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). Known values: "-moz-initial", "all", "auto", "fill", "inherit", "initial", "none", "painted", "revert", "revert-layer", "stroke", "unset", "visible", "visibleFill", "visiblePainted", "visibleStroke".
- `rightSectionProps`: `React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>`. Props passed down to the `rightSection` element
- `rightSectionWidth`: `Property.Width<string | number>`. Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height
- `scrollAreaProps`: `ScrollAreaProps`. Props passed to the underlying `ScrollArea` component in the dropdown
- `selectFirstOptionOnChange`: `false | true`. If set, the first option is selected when value changes, `false` by default Known values: false, true.
- `selectFirstOptionOnDropdownOpen`: `false | true`. If set, the first option is selected when dropdown opens, `false` by default Known values: false, true.
- `size`: `MantineSize | (string & {})`. Controls input `height`, horizontal `padding`, and `font-size` Known values: "lg", "md", "sm", "xl", "xs".
- `success`: `React.ReactNode`. Contents of `Input.Success` component. If not set, success is not displayed.
- `successProps`: `(InputSuccessProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Success` component
- `type`: `HTMLInputTypeAttribute`.  Known values: "button", "checkbox", "color", "date", "datetime-local", "email", "file", "hidden", "image", "month", "number", "password", "radio", "range", "reset", "search", "submit", "tel", "text", "time", "url", "week".
- `unstyled`: `false | true`.  Known values: false, true.
- `value`: `string`. Controlled component value
- `variant`: `(string & {}) | InputVariant`.  Known values: "default", "filled", "unstyled".
- `withAsterisk`: `false | true`. If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. Known values: false, true.
- `withErrorStyles`: `false | true`. Determines whether the input should have red border and red text color when the `error` prop is set Known values: false, true.
- `withScrollArea`: `false | true`. Determines whether the options should be wrapped with `ScrollArea.AutoSize`, `true` by default Known values: false, true.
- `withSuccessStyles`: `false | true`. Determines whether the input should have green border when the `success` prop is set Known values: false, true.
- `wrapperProps`: `WrapperProps`. Props passed down to the root element

- Provide a visible label or aria-label.

[Upstream documentation for Autocomplete](https://mantine.dev/core/autocomplete/)

## Avatar

@mantine/core; content; safety: wrapped.

Subcomponents: Avatar.Group.

- `allowedInitialsColors`: `DefaultMantineColor[]`. A list of colors that is used for autogenerated initials. By default, all default Mantine colors can be used except gray and dark.
- `attributes`: `{ image?: Record<string, any>; root?: Record<string, any>; placeholder?: Record<string, any>; }`.
- `autoContrast`: `false | true`. If set, adjusts text color based on background color for `filled` variant Known values: false, true.
- `color`: `DefaultMantineColor | "initials"`. Key of `theme.colors` or any valid CSS color Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "initials", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `gradient`: `MantineGradient`. Gradient configuration for `variant="gradient"`
- `imageProps`: `React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>`. Attributes passed down to `img` element
- `size`: `number | MantineSize | (string & {})`. Width and height of the avatar, numbers are converted to rem Known values: "lg", "md", "sm", "xl", "xs".
- `src`: `null | string`. Image url, if the image cannot be loaded or `src={null}`, then placeholder is displayed instead
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `(string & {}) | AvatarVariant`.  Known values: "default", "filled", "gradient", "light", "outline", "transparent", "white".

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for Avatar](https://mantine.dev/core/avatar/)

## Avatar.Group

@mantine/core; content; safety: wrapped.

- `attributes`: `{ group?: Record<string, any>; }`.
- `color`: `string`.
- `spacing`: `MantineSpacing`. Negative space between Avatar components Known values: "lg", "md", "sm", "xl", "xs".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for Avatar.Group](https://mantine.dev/core/avatar/)

## AvatarGroup

@mantine/core; content; safety: wrapped.

- `attributes`: `{ group?: Record<string, any>; }`.
- `color`: `string`.
- `spacing`: `MantineSpacing`. Negative space between Avatar components Known values: "lg", "md", "sm", "xl", "xs".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for AvatarGroup](https://mantine.dev/core/avatar-group/)

## BackgroundImage

@mantine/core; content; safety: wrapped.

- `attributes`: `{ root?: Record<string, any>; }`.
- `src`: `string`. Required. Image url
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for BackgroundImage](https://mantine.dev/core/background-image/)

## Badge

@mantine/core; content; safety: wrapped.

- `attributes`: `{ label?: Record<string, any>; section?: Record<string, any>; root?: Record<string, any>; }`.
- `autoContrast`: `false | true`. If set, adjusts text color based on background color for `filled` variant Known values: false, true.
- `circle`: `false | true`. If set, badge `min-width` becomes equal to its `height` and horizontal padding is removed Known values: false, true.
- `color`: `DefaultMantineColor`. Key of `theme.colors` or any valid CSS color Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `fullWidth`: `false | true`. Determines whether Badge should take 100% of its parent width Known values: false, true.
- `gradient`: `MantineGradient`. Gradient configuration used when `variant=\"gradient\"`
- `leftSection`: `React.ReactNode`. Content displayed on the left side of the badge label
- `rightSection`: `React.ReactNode`. Content displayed on the right side of the badge label
- `size`: `MantineSize | (string & {})`. Controls `font-size`, `height` and horizontal `padding` Known values: "lg", "md", "sm", "xl", "xs".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `(string & {}) | BadgeVariant`.  Known values: "default", "dot", "filled", "gradient", "light", "outline", "transparent", "white".

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for Badge](https://mantine.dev/core/badge/)

## BarChart

@mantine/charts; charts; safety: wrapped.

- `accessibilityLayer`: `false | true`. Determines whether the chart should be keyboard-navigable with the recharts accessibility layer, `true` by default Known values: false, true.
- `attributes`: `{ legend?: Record<string, any>; grid?: Record<string, any>; root?: Record<string, any>; tooltip?: Record<string, any>; ... 17 more ...; tooltipBody?: Record<...>; }`.
- `barChartProps`: `(CartesianChartProps<unknown> & { ref?: React.Ref<SVGSVGElement>; })`. Props passed down to recharts `BarChart` component
- `barLabelColor`: `DefaultMantineColor`. Controls color of the bar label, by default the value is determined by the chart orientation Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `brushProps`: `Omit<BrushProps, "ref">`. Props passed down to the `Brush` component
- `color`: `string`.
- `cursorFill`: `DefaultMantineColor`. Fill of hovered bar section, by default value is based on color scheme Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `data`: `Record<string, any>[]`. Required. Data used to display chart.
- `dataKey`: `string`. Required. Key of the `data` object for x-axis values
- `fillOpacity`: `number`. Controls fill opacity of all bars
- `gridAxis`: `"none" | "x" | "y" | "xy"`. Specifies which lines should be displayed in the grid, `'x'` by default Known values: "none", "x", "xy", "y".
- `gridColor`: `DefaultMantineColor`. Color of the grid and cursor lines, by default depends on color scheme Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `gridProps`: `Omit<CartesianGridProps, "ref">`. Props passed down to the `CartesianGrid` component
- `legendProps`: `Omit<LegendProps, "ref">`. Props passed down to the `Legend` component
- `maxBarWidth`: `number`. Maximum bar width in px
- `minBarSize`: `number`. Sets minimum height of the bar in px
- `orientation`: `"horizontal" | "vertical"`. Chart orientation, `'horizontal'` by default Known values: "horizontal", "vertical".
- `referenceAreas`: `ChartReferenceAreaProps[]`. Reference areas that should be displayed on the chart
- `referenceDots`: `ChartReferenceDotProps[]`. Reference dots that should be displayed on the chart
- `referenceLines`: `ChartReferenceLineProps[]`. Reference lines that should be displayed on the chart
- `rightYAxisLabel`: `string`. A label to display next to the right y-axis
- `rightYAxisProps`: `Omit<YAxisProps, "ref">`. Props passed down to the `YAxis` recharts component rendered on the right side
- `series`: `BarChartSeries[]`. Required. An array of objects with `name` and `color` keys. Determines which data should be consumed from the `data` array.
- `textColor`: `DefaultMantineColor`. Color of the text displayed inside the chart, `'dimmed'` by default Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `tickLine`: `"none" | "x" | "y" | "xy"`. Specifies which axis should have tick line, `'y'` by default Known values: "none", "x", "xy", "y".
- `tooltipAnimationDuration`: `number`. Tooltip position animation duration in ms, `0` by default
- `tooltipProps`: `Omit<TooltipProps<any, any>, "ref">`. Props passed down to the `Tooltip` component
- `type`: `"default" | "stacked" | "percent" | "waterfall"`. Controls how bars are positioned relative to each other Known values: "default", "percent", "stacked", "waterfall".
- `unit`: `string`. Unit displayed next to each tick in y-axis
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `withBarValueLabel`: `false | true`. Determines whether a label with bar value should be displayed on top of each bar, incompatible with `type="stacked"` and `type="percent"` Known values: false, true.
- `withBrush`: `false | true`. Determines whether a brush (range selector) should be displayed under the chart, `false` by default Known values: false, true.
- `withLegend`: `false | true`. Determines whether chart legend should be displayed, `false` by default Known values: false, true.
- `withRightYAxis`: `false | true`. Determines whether additional y-axis should be displayed on the right side of the chart, `false` by default Known values: false, true.
- `withTooltip`: `false | true`. Determines whether chart tooltip should be displayed, `true` by default Known values: false, true.
- `withXAxis`: `false | true`. Determines whether x-axis should be displayed, `true` by default Known values: false, true.
- `withYAxis`: `false | true`. Determines whether y-axis should be displayed, `true` by default Known values: false, true.
- `xAxisLabel`: `string`. A label to display below the x-axis
- `xAxisProps`: `Omit<XAxisProps, "ref">`. Props passed down to the `XAxis` recharts component
- `yAxisLabel`: `string`. A label to display next to the y-axis
- `yAxisProps`: `Omit<YAxisProps, "ref">`. Props passed down to the `YAxis` recharts component

- Include a nearby text summary of the chart data.

[Upstream documentation for BarChart](https://mantine.dev/charts/bar-chart/)

## BarsList

@mantine/charts; charts; safety: wrapped.

- `attributes`: `{ root?: Record<string, any>; bar?: Record<string, any>; barLabel?: Record<string, any>; barValue?: Record<string, any>; labelsRow?: Record<...>; }`.
- `autoContrast`: `false | true`. If set, adjusts text color based on background color Known values: false, true.
- `barColor`: `DefaultMantineColor`. Default bar background color, used when item does not have color specified Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `barGap`: `MantineSpacing`. Controls gap between bars Known values: "lg", "md", "sm", "xl", "xs".
- `barHeight`: `string | number`. Bar height
- `barTextColor`: `DefaultMantineColor`. Bar text color, overrides autoContrast Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `barsLabel`: `string`. Label displayed above the bars column
- `color`: `string`.
- `data`: `BarsListBarData[]`. Required. Data for bars
- `minBarSize`: `string | number`. Minimum bar width
- `unstyled`: `false | true`.  Known values: false, true.
- `valueLabel`: `string`. Label displayed above the values column
- `variant`: `string`.

- Include a nearby text summary of the chart data.

[Upstream documentation for BarsList](https://mantine.dev/charts/bars-list/)

## Blockquote

@mantine/core; content; safety: wrapped.

- `attributes`: `{ cite?: Record<string, any>; root?: Record<string, any>; icon?: Record<string, any>; }`.
- `cite`: `React.ReactNode`. Reference to a cited quote
- `color`: `DefaultMantineColor`. Key of `theme.colors` or any valid CSS color Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `icon`: `React.ReactNode`. Blockquote icon, displayed at the top left side
- `iconSize`: `string | number`. Controls icon `width` and `height`, numbers are converted to rem
- `textWrap`: `"wrap" | "nowrap" | "balance" | "pretty" | "stable"`. Controls `text-wrap` CSS property Known values: "balance", "nowrap", "pretty", "stable", "wrap".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for Blockquote](https://mantine.dev/core/blockquote/)

## Box

@mantine/core; layout; safety: wrapped.

- `size`: `string | number`. Size passed from parent component, sets `data-size` if value is not number like
- `variant`: `string`. Variant passed from parent component, sets `data-variant`

- Keep visual order consistent with reading order.

[Upstream documentation for Box](https://mantine.dev/core/box/)

## Breadcrumbs

@mantine/core; navigation; safety: wrapped.

- `attributes`: `{ root?: Record<string, any>; separator?: Record<string, any>; breadcrumb?: Record<string, any>; }`.
- `color`: `string`.
- `separator`: `React.ReactNode`. Separator between children
- `separatorMargin`: `MantineSpacing`. Controls spacing between separator and breadcrumb Known values: "lg", "md", "sm", "xl", "xs".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.

- Provide an accessible label for controls without visible text.

[Upstream documentation for Breadcrumbs](https://mantine.dev/core/breadcrumbs/)

## BubbleChart

@mantine/charts; charts; safety: wrapped.

- `accessibilityLayer`: `false | true`. Determines whether the chart should be keyboard-navigable with the recharts accessibility layer, `true` by default Known values: false, true.
- `attributes`: `{ root?: Record<string, any>; tooltip?: Record<string, any>; axis?: Record<string, any>; }`.
- `color`: `DefaultMantineColor`. Color of the chart items. Key of `theme.colors` or any valid CSS color. Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `data`: `Record<string, any>[]`. Required. Chart data
- `dataKey`: `BubbleChartDataKey`. Required. Data keys for x, y and z axis
- `gridColor`: `DefaultMantineColor`. Color of the grid and cursor lines, by default depends on color scheme Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `label`: `string`. Chart label displayed next to the x axis
- `range`: `[number, number]`. Required. Z axis range
- `scatterProps`: `Partial<Omit<ScatterProps, "ref">>`. Props passed down to the `Scatter` component
- `textColor`: `DefaultMantineColor`. Color of the text displayed inside the chart Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `tooltipProps`: `Omit<TooltipProps<any, any>, "ref">`. Props passed down to the `Tooltip` component
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `withTooltip`: `false | true`. Determines whether the tooltip should be displayed Known values: false, true.
- `xAxisProps`: `Omit<XAxisProps, "ref">`. Props passed down to the `XAxis` recharts component
- `yAxisProps`: `Omit<YAxisProps, "ref">`. Props passed down to the `YAxis` recharts component
- `zAxisProps`: `Omit<ZAxisProps<any, any>, "ref">`. Props passed down to the `ZAxis` recharts component

- Include a nearby text summary of the chart data.

[Upstream documentation for BubbleChart](https://mantine.dev/charts/bubble-chart/)

## BulletChart

@mantine/charts; charts; safety: wrapped.

- `attributes`: `{ label?: Record<string, any>; track?: Record<string, any>; root?: Record<string, any>; target?: Record<string, any>; ... 5 more ...; targetLabel?: Record<...>; }`.
- `barColor`: `DefaultMantineColor`. Color of the actual value bar, Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `barSize`: `string | number`. Height of the actual value bar,
- `color`: `string`.
- `label`: `React.ReactNode`. Label displayed next to the chart
- `orientation`: `"horizontal" | "vertical"`. Orientation, Known values: "horizontal", "vertical".
- `ranges`: `BulletChartRange[]`. Required. Qualitative ranges displayed as background bands
- `size`: `string | number`. Height of the chart track area (ranges),
- `target`: `number`. Target value, displayed as a marker line
- `targetColor`: `DefaultMantineColor`. Color of the target marker, Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `targetRatio`: `number`. Target marker size relative to chart size,
- `targetSize`: `string | number`. Target marker thickness,
- `unstyled`: `false | true`.  Known values: false, true.
- `value`: `number`. Required. Current actual value
- `variant`: `string`.
- `withTooltip`: `false | true`. Whether to show tooltip on hover, Known values: false, true.

- Include a nearby text summary of the chart data.

[Upstream documentation for BulletChart](https://mantine.dev/charts/bullet-chart/)

## Burger

@mantine/core; interaction; safety: wrapped.

- `attributes`: `{ root?: Record<string, any>; burger?: Record<string, any>; }`.
- `color`: `DefaultMantineColor`. Key of `theme.colors` of any valid CSS value, by default `theme.white` in dark color scheme and `theme.black` in light Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `lineSize`: `string | number`. Controls height of lines, by default calculated based on `size` prop
- `opened`: `false | true`. State of the burger, when `true` burger is transformed into X Known values: false, true.
- `size`: `number | MantineSize | (string & {})`. Controls burger `width` and `height`, numbers are converted to rem Known values: "lg", "md", "sm", "xl", "xs".
- `transitionDuration`: `number`. `transition-duration` property value in ms
- `transitionTimingFunction`: `string`. `transition-timing-function` property value
- `type`: `"button" | "submit" | "reset"`.  Known values: "button", "reset", "submit".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.

- Provide a visible label or aria-label.

[Upstream documentation for Burger](https://mantine.dev/core/burger/)

## Button

@mantine/core; interaction; safety: wrapped.

Subcomponents: Button.Group, Button.GroupSection.

- `attributes`: `{ label?: Record<string, any>; section?: Record<string, any>; root?: Record<string, any>; loader?: Record<string, any>; inner?: Record<...>; }`.
- `autoContrast`: `false | true`. If set, adjusts text color based on background color for `filled` variant Known values: false, true.
- `color`: `DefaultMantineColor`. Key of `theme.colors` or any valid CSS color Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `data-disabled`: `false | true`.  Known values: false, true.
- `fullWidth`: `false | true`. Sets `width: 100%` Known values: false, true.
- `gradient`: `MantineGradient`. Gradient configuration used for `variant="gradient"`
- `justify`: `Property.JustifyContent`. Sets `justify-content` of `inner` element, can be used to change distribution of sections and label Known values: "-moz-initial", "center", "end", "flex-end", "flex-start", "inherit", "initial", "left", "normal", "revert", "revert-layer", "right", "space-around", "space-between", "space-evenly", "start", "stretch", "unset".
- `leftSection`: `React.ReactNode`. Content on the left side of the button label
- `loaderProps`: `LoaderProps`. Props added to the `Loader` component (only visible when `loading` prop is set)
- `loading`: `false | true`. If set, the `Loader` component is displayed over the button Known values: false, true.
- `rightSection`: `React.ReactNode`. Content on the right side of the button label
- `size`: `ButtonSize`. Controls button `height`, `font-size` and horizontal `padding` Known values: "compact-lg", "compact-md", "compact-sm", "compact-xl", "compact-xs", "lg", "md", "sm", "xl", "xs".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `(string & {}) | ButtonVariant`.  Known values: "default", "filled", "gradient", "light", "outline", "subtle", "transparent", "white".

- Provide a visible label or aria-label.

[Upstream documentation for Button](https://mantine.dev/core/button/)

## Button.Group

@mantine/core; interaction; safety: wrapped.

- `attributes`: `{ group?: Record<string, any>; }`.
- `borderWidth`: `string | number`. `border-width` of the child `Button` components. Numbers are converted to rem.
- `orientation`: `"horizontal" | "vertical"`. Orientation of the group Known values: "horizontal", "vertical".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.

- Provide a visible label or aria-label.

[Upstream documentation for Button.Group](https://mantine.dev/core/button/)

## Button.GroupSection

@mantine/core; interaction; safety: wrapped.

- `attributes`: `{ groupSection?: Record<string, any>; }`.
- `autoContrast`: `false | true`. If set, adjusts text color based on background color for `filled` variant Known values: false, true.
- `color`: `string`.
- `gradient`: `MantineGradient`. Gradient configuration used when `variant="gradient"`
- `size`: `ButtonSize`. Controls section `height`, `font-size` and horizontal `padding` Known values: "compact-lg", "compact-md", "compact-sm", "compact-xl", "compact-xs", "lg", "md", "sm", "xl", "xs".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `(string & {}) | ButtonVariant`.  Known values: "default", "filled", "gradient", "light", "outline", "subtle", "transparent", "white".

- Provide a visible label or aria-label.

[Upstream documentation for Button.GroupSection](https://mantine.dev/core/button/)

## ButtonGroup

@mantine/core; content; safety: wrapped.

- `attributes`: `{ group?: Record<string, any>; }`.
- `borderWidth`: `string | number`. `border-width` of the child `Button` components. Numbers are converted to rem.
- `orientation`: `"horizontal" | "vertical"`. Orientation of the group Known values: "horizontal", "vertical".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for ButtonGroup](https://mantine.dev/core/button-group/)

## ButtonGroupSection

@mantine/core; content; safety: wrapped.

- `attributes`: `{ groupSection?: Record<string, any>; }`.
- `autoContrast`: `false | true`. If set, adjusts text color based on background color for `filled` variant Known values: false, true.
- `color`: `string`.
- `gradient`: `MantineGradient`. Gradient configuration used when `variant="gradient"`
- `size`: `ButtonSize`. Controls section `height`, `font-size` and horizontal `padding` Known values: "compact-lg", "compact-md", "compact-sm", "compact-xl", "compact-xs", "lg", "md", "sm", "xl", "xs".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `(string & {}) | ButtonVariant`.  Known values: "default", "filled", "gradient", "light", "outline", "subtle", "transparent", "white".

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for ButtonGroupSection](https://mantine.dev/core/button-group-section/)

## Calendar

@mantine/dates; dates; safety: wrapped.

- `ariaLabels`: `CalendarAriaLabels`. `aria-label` attributes for controls on different levels
- `attributes`: `{ month?: Record<string, any>; weekday?: Record<string, any>; weekdaysRow?: Record<string, any>; monthRow?: Record<string, any>; ... 18 more ...; yearsListRow?: Record<...>; }`.
- `color`: `string`.
- `columnsToScroll`: `number`. Number of columns to scroll with next/prev buttons, same as `numberOfColumns` if not set explicitly
- `date`: `string | Date`. Displayed date in controlled mode
- `defaultDate`: `string | Date`. Initial displayed date in uncontrolled mode
- `defaultLevel`: `"month" | "year" | "decade"`. Initial displayed level in uncontrolled mode Known values: "decade", "month", "year".
- `enableKeyboardNavigation`: `false | true`. Enable enhanced keyboard navigation (Ctrl/Cmd + Arrow keys for year navigation, Ctrl/Cmd + Shift + Arrow keys for decade navigation, Y key to open year view) Known values: false, true.
- `firstDayOfWeek`: `0 | 2 | 3 | 4 | 5 | 6 | 1`. Number 0-6, where 0 – Sunday and 6 – Saturday. Known values: 0, 1, 2, 3, 4, 5, 6.
- `fullWidth`: `false | true`. Determines whether the list should take the full width of its container Known values: false, true.
- `headerControlsOrder`: `("next" | "previous" | "level")[]`. Controls order
- `hideOutsideDates`: `false | true`. Determines whether outside dates should be hidden Known values: false, true.
- `hideWeekdays`: `false | true`. Determines whether weekdays row should be hidden Known values: false, true.
- `highlightToday`: `false | true`. Determines whether today should be highlighted with a border Known values: false, true.
- `level`: `"month" | "year" | "decade"`. Current displayed level displayed in controlled mode Known values: "decade", "month", "year".
- `locale`: `string`. Dayjs locale, defaults to value defined in DatesProvider
- `maxDate`: `string | Date`. Maximum possible date in `YYYY-MM-DD` format or Date object
- `maxLevel`: `"month" | "year" | "decade"`. Max level that user can go up to (decade, year, month) Known values: "decade", "month", "year".
- `minDate`: `string | Date`. Minimum possible date in `YYYY-MM-DD` format or Date object
- `minLevel`: `"month" | "year" | "decade"`. Min level that user can go down to (decade, year, month) Known values: "decade", "month", "year".
- `nextIcon`: `React.ReactNode`. Change next icon
- `nextLabel`: `string`. Next button `aria-label`
- `numberOfColumns`: `number`. Number of columns displayed next to each other
- `previousIcon`: `React.ReactNode`. Change previous icon
- `previousLabel`: `string`. Previous button `aria-label`
- `size`: `"xs" | "sm" | "md" | "lg" | "xl"`. Component size Known values: "lg", "md", "sm", "xl", "xs".
- `static`: `false | true`. Determines whether days should be static, static days can be used to display month if it is not expected that user will interact with the component in any way Known values: false, true.
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `weekendDays`: `DayOfWeek[]`. Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider`.
- `withCellSpacing`: `false | true`. Determines whether controls should be separated Known values: false, true.
- `withNativeLevelSelect`: `false | true`. Determines whether level select controls should be rendered as native `<select>` elements Known values: false, true.
- `withWeekNumbers`: `false | true`. Determines whether week numbers should be displayed Known values: false, true.
- `yearsSelectRange`: `[number, number]`. Year range for native level select, tuple of `[startYear, endYear]`. Defaults to `[currentYear - 100, currentYear + 50]` or values derived from `minDate`/`maxDate` if set.

- Include a textual date when the visual calendar carries meaning.

[Upstream documentation for Calendar](https://mantine.dev/dates/calendar/)

## CalendarHeader

@mantine/dates; dates; safety: wrapped.

- `attributes`: `{ calendarHeader?: Record<string, any>; calendarHeaderControl?: Record<string, any>; calendarHeaderLevel?: Record<string, any>; calendarHeaderControlIcon?: Record<...>; calendarHeaderSelect?: Record<...>; }`.
- `color`: `string`.
- `fullWidth`: `false | true`. Determines whether the header should take the full width of its container Known values: false, true.
- `hasNextLevel`: `false | true`. Determines whether next level button should be enabled Known values: false, true.
- `headerControlsOrder`: `("next" | "previous" | "level")[]`. Controls order
- `label`: `React.ReactNode`. Label displayed between next and previous buttons
- `levelControlAriaLabel`: `string`. Level control `aria-label`
- `nextDisabled`: `false | true`. Disables next control Known values: false, true.
- `nextIcon`: `React.ReactNode`. Change next icon
- `nextLabel`: `string`. Next button `aria-label`
- `previousDisabled`: `false | true`. Disables previous control Known values: false, true.
- `previousIcon`: `React.ReactNode`. Change previous icon
- `previousLabel`: `string`. Previous button `aria-label`
- `size`: `"xs" | "sm" | "md" | "lg" | "xl"`. Component size Known values: "lg", "md", "sm", "xl", "xs".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `withNativeLevelSelect`: `false | true`. Determines whether level select controls should be rendered as native `<select>` elements Known values: false, true.
- `withNext`: `false | true`. Determines whether next control should be rendered Known values: false, true.
- `withPrevious`: `false | true`. Determines whether previous control should be rendered Known values: false, true.
- `yearsSelectRange`: `[number, number]`. Year range for native level select, tuple of `[startYear, endYear]`. Defaults to `[currentYear - 100, currentYear + 50]` or values derived from `minDate`/`maxDate` if set.

- Include a textual date when the visual calendar carries meaning.

[Upstream documentation for CalendarHeader](https://mantine.dev/dates/calendar-header/)

## CandlestickChart

@mantine/charts; charts; safety: wrapped.

- `accessibilityLayer`: `false | true`. Determines whether the chart should be keyboard-navigable with the recharts accessibility layer, `true` by default Known values: false, true.
- `attributes`: `{ grid?: Record<string, any>; root?: Record<string, any>; tooltip?: Record<string, any>; container?: Record<string, any>; ... 12 more ...; candle?: Record<...>; }`.
- `candleStrokeWidth`: `number`. Stroke width of the candle wick and body outline
- `color`: `string`.
- `composedChartProps`: `(CartesianChartProps<unknown> & { ref?: React.Ref<SVGSVGElement>; })`. Props passed down to recharts `ComposedChart` component
- `data`: `Record<string, any>[]`. Required. Data used to display chart
- `dataKey`: `string`. Required. Key of the `data` object for x-axis values
- `dataKeys`: `CandlestickChartDataKeys`. Keys of the `data` object used to read open, high, low and close values
- `downColor`: `DefaultMantineColor`. Color of candles with `close < open`, key of `theme.colors` or any valid CSS color Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `gridAxis`: `"none" | "x" | "y" | "xy"`. Specifies which lines should be displayed in the grid, `'x'` by default Known values: "none", "x", "xy", "y".
- `gridColor`: `DefaultMantineColor`. Color of the grid and cursor lines, by default depends on color scheme Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `gridProps`: `Omit<CartesianGridProps, "ref">`. Props passed down to the `CartesianGrid` component
- `labels`: `Partial<CandlestickChartLabels>`. Labels of open, high, low and close values displayed in the tooltip
- `maxCandleWidth`: `number`. Maximum candle width in px
- `referenceAreas`: `ChartReferenceAreaProps[]`. Reference areas that should be displayed on the chart
- `referenceDots`: `ChartReferenceDotProps[]`. Reference dots that should be displayed on the chart
- `referenceLines`: `ChartReferenceLineProps[]`. Reference lines that should be displayed on the chart
- `textColor`: `DefaultMantineColor`. Color of the text displayed inside the chart, `'dimmed'` by default Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `tickLine`: `"none" | "x" | "y" | "xy"`. Specifies which axis should have tick line, `'y'` by default Known values: "none", "x", "xy", "y".
- `tooltipAnimationDuration`: `number`. Tooltip position animation duration in ms, `0` by default
- `tooltipProps`: `Omit<TooltipProps<any, any>, "ref">`. Props passed down to the `Tooltip` component
- `unit`: `string`. Unit displayed next to each tick in y-axis
- `unstyled`: `false | true`.  Known values: false, true.
- `upColor`: `DefaultMantineColor`. Color of candles with `close >= open`, key of `theme.colors` or any valid CSS color Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `variant`: `string`.
- `withTooltip`: `false | true`. Determines whether chart tooltip should be displayed, `true` by default Known values: false, true.
- `withXAxis`: `false | true`. Determines whether x-axis should be displayed, `true` by default Known values: false, true.
- `withYAxis`: `false | true`. Determines whether y-axis should be displayed, `true` by default Known values: false, true.
- `xAxisLabel`: `string`. A label to display below the x-axis
- `xAxisProps`: `Omit<XAxisProps, "ref">`. Props passed down to the `XAxis` recharts component
- `yAxisLabel`: `string`. A label to display next to the y-axis
- `yAxisProps`: `Omit<YAxisProps, "ref">`. Props passed down to the `YAxis` recharts component

- Include a nearby text summary of the chart data.

[Upstream documentation for CandlestickChart](https://mantine.dev/charts/candlestick-chart/)

## Card

@mantine/core; layout; safety: wrapped.

Subcomponents: Card.Section.

- `attributes`: `{ section?: Record<string, any>; root?: Record<string, any>; }`.
- `orientation`: `"horizontal" | "vertical"`. Card orientation Known values: "horizontal", "vertical".
- `padding`: `MantineSpacing`. Key of `theme.spacing` or any valid CSS value to set padding Known values: "lg", "md", "sm", "xl", "xs".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.

- Keep visual order consistent with reading order.

[Upstream documentation for Card](https://mantine.dev/core/card/)

## Card.Section

@mantine/core; layout; safety: wrapped.

- `inheritPadding`: `false | true`. If set, the section inherits padding from the parent `Card` Known values: false, true.
- `styles`: `Partial<Record<"section", CSSProperties>>`.
- `variant`: `string`.

- Keep visual order consistent with reading order.

[Upstream documentation for Card.Section](https://mantine.dev/core/card/)

## CardSection

@mantine/core; layout; safety: wrapped.

- `inheritPadding`: `false | true`. If set, the section inherits padding from the parent `Card` Known values: false, true.
- `styles`: `Partial<Record<"section", CSSProperties>>`.
- `variant`: `string`.

- Keep visual order consistent with reading order.

[Upstream documentation for CardSection](https://mantine.dev/core/card-section/)

## Cascader

@mantine/core; content; safety: wrapped.

- `allowDeselect`: `false | true`. If set, the selected value can be deselected by selecting it again Known values: false, true.
- `attributes`: `{ input?: Record<string, any>; label?: Record<string, any>; option?: Record<string, any>; section?: Record<string, any>; ... 21 more ...; flatOption?: Record<...>; }`.
- `changeOnSelect`: `false | true`. If set, any intermediate option can be selected, not only leaf options Known values: false, true.
- `checkIconPosition`: `"left" | "right"`. Position of the check icon relative to the option label Known values: "left", "right".
- `chevronColor`: `DefaultMantineColor`. Controls the default chevron color Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `clearButtonProps`: `InputClearButtonProps`. Props passed down to the clear button
- `clearSectionMode`: `"both" | "rightSection" | "clear"`. Determines how the clear button and `rightSection` are rendered Known values: "both", "clear", "rightSection".
- `clearable`: `false | true`. If set, the clear button is displayed when a value is selected Known values: false, true.
- `closeOnSelect`: `false | true`. Determines whether the dropdown should be closed when a value is selected, defaults to `!allowDeselect` Known values: false, true.
- `color`: `string`.
- `columnWidth`: `string | number`. Width of each column
- `comboboxProps`: `Record<string, any>`. Props passed down to the underlying `Combobox` component
- `data`: `CascaderOption[]`. Required. Hierarchical options data
- `defaultDropdownOpened`: `false | true`. Uncontrolled dropdown opened state Known values: false, true.
- `defaultSearchValue`: `string`. Uncontrolled search value
- `defaultValue`: `string[] | null`. Uncontrolled selected path from root to node
- `description`: `React.ReactNode`. Contents of `Input.Description` component. If not set, description is not displayed.
- `descriptionProps`: `(InputDescriptionProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Description` component
- `dropdownOpened`: `false | true`. Controlled dropdown opened state Known values: false, true.
- `error`: `React.ReactNode`. Contents of `Input.Error` component. If not set, error is not displayed.
- `errorProps`: `(InputErrorProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Error` component
- `expandTrigger`: `"hover" | "click"`. Determines how the next column is opened Known values: "click", "hover".
- `hiddenInputProps`: `Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "value">`. Props passed down to the hidden input
- `inputSize`: `string`. HTML `size` attribute for the input element (number of visible characters)
- `inputWrapperOrder`: `("input" | "label" | "description" | "error")[]`. Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.
- `label`: `React.ReactNode`. Contents of `Input.Label` component. If not set, label is not displayed.
- `labelProps`: `(InputLabelProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Label` component
- `leftSection`: `React.ReactNode`. Content section displayed on the left side of the input
- `leftSectionPointerEvents`: `"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "all" | "fill" | "stroke" | "painted" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke"`. Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). Known values: "-moz-initial", "all", "auto", "fill", "inherit", "initial", "none", "painted", "revert", "revert-layer", "stroke", "unset", "visible", "visibleFill", "visiblePainted", "visibleStroke".
- `leftSectionProps`: `React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>`. Props passed down to the `leftSection` element
- `leftSectionWidth`: `Property.Width<string | number>`. Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height
- `loading`: `false | true`. Displays loading indicator in the left or right section Known values: false, true.
- `loadingPosition`: `"left" | "right"`. Position of the loading indicator Known values: "left", "right".
- `maxDisplayedLevels`: `number`. Maximum number of columns (levels) displayed next to each other, deeper levels replace earlier ones
- `maxDropdownHeight`: `string | number`. Max height of a column before it becomes scrollable
- `nextLevelsControlLabel`: `string`. `aria-label` and `title` of the control that reveals levels hidden after the visible ones by `maxDisplayedLevels`
- `nothingFoundMessage`: `React.ReactNode`. Message displayed when there are no options or search results
- `openOnFocus`: `false | true`. Opens the dropdown when the input is focused in `searchable` mode Known values: false, true.
- `pointer`: `false | true`. Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component="button"` for Select/DatePicker). Known values: false, true.
- `previousLevelsControlLabel`: `string`. `aria-label` and `title` of the control that reveals levels hidden before the visible ones by `maxDisplayedLevels`
- `rightSection`: `React.ReactNode`. Content section displayed on the right side of the input
- `rightSectionPointerEvents`: `"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "all" | "fill" | "stroke" | "painted" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke"`. Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). Known values: "-moz-initial", "all", "auto", "fill", "inherit", "initial", "none", "painted", "revert", "revert-layer", "stroke", "unset", "visible", "visibleFill", "visiblePainted", "visibleStroke".
- `rightSectionProps`: `React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>`. Props passed down to the `rightSection` element
- `rightSectionWidth`: `Property.Width<string | number>`. Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height
- `safeAreaPolygon`: `boolean | CascaderSafeAreaPolygonOptions`. Determines whether the next column stays open while the cursor moves toward it, applicable only when `expandTrigger="hover"`. Pass an object to configure safe polygon behavior.
- `scrollAreaProps`: `ScrollAreaProps`. Props passed down to the dropdown `ScrollArea`
- `searchValue`: `string`. Controlled search value
- `searchable`: `false | true`. If set, options can be searched by their flattened paths Known values: false, true.
- `separator`: `React.ReactNode`. Path separator displayed in the input and search results
- `size`: `MantineSize | (string & {})`. Controls input `height`, horizontal `padding`, and `font-size` Known values: "lg", "md", "sm", "xl", "xs".
- `success`: `React.ReactNode`. Contents of `Input.Success` component. If not set, success is not displayed.
- `successProps`: `(InputSuccessProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Success` component
- `type`: `HTMLInputTypeAttribute`.  Known values: "button", "checkbox", "color", "date", "datetime-local", "email", "file", "hidden", "image", "month", "number", "password", "radio", "range", "reset", "search", "submit", "tel", "text", "time", "url", "week".
- `unstyled`: `false | true`.  Known values: false, true.
- `value`: `string[] | null`. Controlled selected path from root to node
- `variant`: `(string & {}) | InputVariant`.  Known values: "default", "filled", "unstyled".
- `withAsterisk`: `false | true`. If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. Known values: false, true.
- `withCheckIcon`: `false | true`. If set, the check icon is displayed on the selected option Known values: false, true.
- `withColumns`: `false | true`. Renders the dropdown as cascading columns. When `false`, options are rendered as a flat list of paths, the same way as search results (useful for narrow/mobile layouts) Known values: false, true.
- `withErrorStyles`: `false | true`. Determines whether the input should have red border and red text color when the `error` prop is set Known values: false, true.
- `withSuccessStyles`: `false | true`. Determines whether the input should have green border when the `success` prop is set Known values: false, true.
- `wrapperProps`: `WrapperProps`. Props passed down to the root element

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for Cascader](https://mantine.dev/core/cascader/)

## Center

@mantine/core; layout; safety: wrapped.

- `attributes`: `{ root?: Record<string, any>; }`.
- `inline`: `false | true`. If set, `inline-flex` is used instead of `flex` Known values: false, true.
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.

- Keep visual order consistent with reading order.

[Upstream documentation for Center](https://mantine.dev/core/center/)

## ChartBrush

@mantine/charts; charts; safety: wrapped.

- `alwaysShowText`: `false | true`.  Known values: false, true.
- `ariaLabel`: `string`.
- `attributes`: `{ brush?: Record<string, any>; }`.
- `color`: `string`.
- `display`: `string | number`.
- `dy`: `number`.
- `endIndex`: `number`. The default end index of brush. If the option is not set, the end index will be calculated by the length of data.
- `gap`: `number`. Number of data points to skip between chart refreshes.
- `height`: `number`. Height of the brush in pixels.
- `leaveTimeOut`: `number`.
- `opacity`: `string | number`.
- `padding`: `Padding`.
- `radius`: `string | number`.
- `startIndex`: `number`. The default start index of brush. If the option is not set, the start index will be 0.
- `travellerWidth`: `number`. The width of each traveller.
- `type`: `string`.
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `width`: `number`. Width of the brush in pixels. If undefined, defaults to the chart width.
- `x`: `number`. The x-coordinate of brush. If left undefined, it will be computed from the chart's offset and margins.
- `y`: `number`. The y-coordinate of brush. If left undefined, it will be computed from the chart's offset and margins.

- Include a nearby text summary of the chart data.

[Upstream documentation for ChartBrush](https://mantine.dev/charts/chart-brush/)

## ChartLegend

@mantine/charts; charts; safety: wrapped.

- `attributes`: `{ legend?: Record<string, any>; legendItem?: Record<string, any>; legendItemColor?: Record<string, any>; legendItemName?: Record<...>; }`.
- `centered`: `false | true`. Determines whether the legend should be centered Known values: false, true.
- `color`: `string`.
- `legendPosition`: `"bottom" | "top" | "middle"`. Required. Position of the legend relative to the chart, used to apply margin on the corresponding side Known values: "bottom", "middle", "top".
- `payload`: `readonly Record<string, any>[]`. Chart data provided by recharts
- `series`: `ChartSeries[]`. Data used for labels, only applicable for area charts: AreaChart, LineChart, BarChart
- `showColor`: `false | true`. Determines whether color swatch should be shown next to the label Known values: false, true.
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.

- Include a nearby text summary of the chart data.

[Upstream documentation for ChartLegend](https://mantine.dev/charts/chart-legend/)

## ChartTooltip

@mantine/charts; charts; safety: wrapped.

- `attributes`: `{ tooltip?: Record<string, any>; tooltipItem?: Record<string, any>; tooltipItemBody?: Record<string, any>; tooltipItemColor?: Record<...>; tooltipItemName?: Record<...>; tooltipItemData?: Record<...>; tooltipLabel?: Record<...>; tool...`.
- `color`: `string`.
- `label`: `React.ReactNode`. Main tooltip label
- `payload`: `Record<string, any>[] | readonly Record<string, any>[]`. Chart data provided by recharts
- `segmentId`: `string | number`. Segment to display data for, identified by its index in the data array (preferred, isolates duplicate names) or by its name. Only applicable when `type="radial"`. If not set, all data is rendered.
- `series`: `ChartSeries[]`. Chart series data, applicable only for `area` type
- `showColor`: `false | true`. Determines whether the color swatch should be visible Known values: false, true.
- `type`: `"area" | "radial" | "scatter"`. Tooltip type that determines the content and styles, `area` for LineChart, AreaChart and BarChart, `radial` for DonutChart and PieChart Known values: "area", "radial", "scatter".
- `unit`: `string`. Data units, provided by parent component
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.

- Include a nearby text summary of the chart data.

[Upstream documentation for ChartTooltip](https://mantine.dev/charts/chart-tooltip/)

## CheckIcon

@mantine/core; content; safety: wrapped.

- `color`: `string`.
- `display`: `string | number`.
- `opacity`: `string | number`.
- `radius`: `string | number`.
- `size`: `string | number`.
- `type`: `string`.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for CheckIcon](https://mantine.dev/core/check-icon/)

## Checkbox

@mantine/core; interaction; safety: wrapped.

Bind a temporary boolean input with `bind`. Initialize with `defaultChecked`; reset with `resetKey`.

Subcomponents: Checkbox.Card, Checkbox.Group, Checkbox.Indicator.

- `attributes`: `{ body?: Record<string, any>; input?: Record<string, any>; label?: Record<string, any>; root?: Record<string, any>; ... 4 more ...; labelWrapper?: Record<...>; }`.
- `autoContrast`: `false | true`. If set, adjusts icon color based on background color for `filled` variant Known values: false, true.
- `color`: `DefaultMantineColor`. Key of `theme.colors` or any valid CSS color to set input background color in checked state Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `description`: `React.ReactNode`. Description below the label
- `error`: `React.ReactNode`. Error message below the label
- `iconColor`: `DefaultMantineColor`. Key of `theme.colors` or any valid CSS color to set icon color. By default, depends on `theme.autoContrast`. Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `indeterminate`: `false | true`. Indeterminate state of the checkbox. If set, `checked` prop is dismissed. Known values: false, true.
- `label`: `React.ReactNode`. `label` associated with the checkbox
- `labelPosition`: `"left" | "right"`. Position of the label relative to the input Known values: "left", "right".
- `size`: `MantineSize | (string & {})`. Controls size of the component Known values: "lg", "md", "sm", "xl", "xs".
- `type`: `HTMLInputTypeAttribute`.  Known values: "button", "checkbox", "color", "date", "datetime-local", "email", "file", "hidden", "image", "month", "number", "password", "radio", "range", "reset", "search", "submit", "tel", "text", "time", "url", "week".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `(string & {}) | CheckboxVariant`.  Known values: "filled", "outline".
- `withErrorStyles`: `false | true`. If set, applies error styles to the checkbox when `error` prop is set Known values: false, true.
- `wrapperProps`: `(React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & DataAttributes)`. Props passed down to the root element

- Provide a visible label or aria-label.

[Upstream documentation for Checkbox](https://mantine.dev/core/checkbox/)

## Checkbox.Card

@mantine/core; interaction; safety: wrapped.

- `attributes`: `{ card?: Record<string, any>; }`.
- `color`: `string`.
- `indeterminate`: `false | true`. Indeterminate state of the checkbox. If set, `checked` prop is ignored and `aria-checked` is set to `mixed` Known values: false, true.
- `type`: `"button" | "submit" | "reset"`.  Known values: "button", "reset", "submit".
- `unstyled`: `false | true`.  Known values: false, true.
- `value`: `string`. Value of the checkbox, used with `Checkbox.Group`
- `variant`: `string`.

- Provide a visible label or aria-label.

[Upstream documentation for Checkbox.Card](https://mantine.dev/core/checkbox/)

## Checkbox.Group

@mantine/core; interaction; safety: wrapped.

Bind a temporary string[] input with `bind`. Initialize with `defaultValue`; reset with `resetKey`.

- `attributes`: `{ label?: Record<string, any>; root?: Record<string, any>; description?: Record<string, any>; error?: Record<string, any>; success?: Record<...>; required?: Record<...>; }`.
- `color`: `string`.
- `defaultValue`: `Value[]`. Default value for uncontrolled component
- `description`: `React.ReactNode`. Contents of `Input.Description` component. If not set, description is not displayed.
- `descriptionProps`: `(InputDescriptionProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Description` component
- `error`: `React.ReactNode`. Contents of `Input.Error` component. If not set, error is not displayed.
- `errorProps`: `(InputErrorProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Error` component
- `hiddenInputProps`: `(React.ClassAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLInputElement> & DataAttributes)`. Props passed down to the hidden input for uncontrolled forms
- `hiddenInputValuesSeparator`: `string`. Separator for values in the hidden input for uncontrolled forms
- `inputWrapperOrder`: `("input" | "label" | "description" | "error")[]`. Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.
- `label`: `React.ReactNode`. Contents of `Input.Label` component. If not set, label is not displayed.
- `labelElement`: `"div" | "label"`. Root element for the label. Use `'div'` when wrapper contains multiple input elements and you need to handle `htmlFor` manually. Known values: "div", "label".
- `labelProps`: `(InputLabelProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Label` component
- `maxSelectedValues`: `number`. Maximum number of checkboxes that can be selected. When the limit is reached, unselected checkboxes will be disabled
- `size`: `MantineSize | (string & {})`. Controls size of the `Input.Wrapper` Known values: "lg", "md", "sm", "xl", "xs".
- `success`: `React.ReactNode`. Contents of `Input.Success` component. If not set, success is not displayed.
- `successProps`: `(InputSuccessProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Success` component
- `unstyled`: `false | true`.  Known values: false, true.
- `value`: `Value[]`. Controlled component value
- `variant`: `string`.
- `withAsterisk`: `false | true`. If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. Known values: false, true.
- `wrapperProps`: `(React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & DataAttributes)`. Props passed down to the root element (`Input.Wrapper` component)

- Provide a visible label or aria-label.

[Upstream documentation for Checkbox.Group](https://mantine.dev/core/checkbox/)

## Checkbox.Indicator

@mantine/core; interaction; safety: wrapped.

- `attributes`: `{ icon?: Record<string, any>; indicator?: Record<string, any>; }`.
- `autoContrast`: `false | true`. If set, adjusts icon color based on background color for `filled` variant Known values: false, true.
- `color`: `DefaultMantineColor`. Key of `theme.colors` or any valid CSS color to set input background color in checked state Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `iconColor`: `DefaultMantineColor`. Key of `theme.colors` or any valid CSS color to set icon color, by default value depends on `theme.autoContrast` Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `indeterminate`: `false | true`. Indeterminate state of the checkbox. If set, `checked` prop is ignored. Known values: false, true.
- `size`: `number | MantineSize | (string & {})`. Controls size of the component Known values: "lg", "md", "sm", "xl", "xs".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `(string & {}) | CheckboxIndicatorVariant`.  Known values: "filled", "outline".

- Provide a visible label or aria-label.

[Upstream documentation for Checkbox.Indicator](https://mantine.dev/core/checkbox/)

## CheckboxCard

@mantine/core; content; safety: wrapped.

- `attributes`: `{ card?: Record<string, any>; }`.
- `color`: `string`.
- `indeterminate`: `false | true`. Indeterminate state of the checkbox. If set, `checked` prop is ignored and `aria-checked` is set to `mixed` Known values: false, true.
- `type`: `"button" | "submit" | "reset"`.  Known values: "button", "reset", "submit".
- `unstyled`: `false | true`.  Known values: false, true.
- `value`: `string`. Value of the checkbox, used with `Checkbox.Group`
- `variant`: `string`.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for CheckboxCard](https://mantine.dev/core/checkbox-card/)

## CheckboxGroup

@mantine/core; content; safety: wrapped.

Bind a temporary string[] input with `bind`. Initialize with `defaultValue`; reset with `resetKey`.

- `attributes`: `{ label?: Record<string, any>; root?: Record<string, any>; description?: Record<string, any>; error?: Record<string, any>; success?: Record<...>; required?: Record<...>; }`.
- `color`: `string`.
- `defaultValue`: `Value[]`. Default value for uncontrolled component
- `description`: `React.ReactNode`. Contents of `Input.Description` component. If not set, description is not displayed.
- `descriptionProps`: `(InputDescriptionProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Description` component
- `error`: `React.ReactNode`. Contents of `Input.Error` component. If not set, error is not displayed.
- `errorProps`: `(InputErrorProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Error` component
- `hiddenInputProps`: `(React.ClassAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLInputElement> & DataAttributes)`. Props passed down to the hidden input for uncontrolled forms
- `hiddenInputValuesSeparator`: `string`. Separator for values in the hidden input for uncontrolled forms
- `inputWrapperOrder`: `("input" | "label" | "description" | "error")[]`. Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.
- `label`: `React.ReactNode`. Contents of `Input.Label` component. If not set, label is not displayed.
- `labelElement`: `"div" | "label"`. Root element for the label. Use `'div'` when wrapper contains multiple input elements and you need to handle `htmlFor` manually. Known values: "div", "label".
- `labelProps`: `(InputLabelProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Label` component
- `maxSelectedValues`: `number`. Maximum number of checkboxes that can be selected. When the limit is reached, unselected checkboxes will be disabled
- `size`: `MantineSize | (string & {})`. Controls size of the `Input.Wrapper` Known values: "lg", "md", "sm", "xl", "xs".
- `success`: `React.ReactNode`. Contents of `Input.Success` component. If not set, success is not displayed.
- `successProps`: `(InputSuccessProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Success` component
- `unstyled`: `false | true`.  Known values: false, true.
- `value`: `Value[]`. Controlled component value
- `variant`: `string`.
- `withAsterisk`: `false | true`. If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. Known values: false, true.
- `wrapperProps`: `(React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & DataAttributes)`. Props passed down to the root element (`Input.Wrapper` component)

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for CheckboxGroup](https://mantine.dev/core/checkbox-group/)

## CheckboxIndicator

@mantine/core; content; safety: wrapped.

- `attributes`: `{ icon?: Record<string, any>; indicator?: Record<string, any>; }`.
- `autoContrast`: `false | true`. If set, adjusts icon color based on background color for `filled` variant Known values: false, true.
- `color`: `DefaultMantineColor`. Key of `theme.colors` or any valid CSS color to set input background color in checked state Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `iconColor`: `DefaultMantineColor`. Key of `theme.colors` or any valid CSS color to set icon color, by default value depends on `theme.autoContrast` Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `indeterminate`: `false | true`. Indeterminate state of the checkbox. If set, `checked` prop is ignored. Known values: false, true.
- `size`: `number | MantineSize | (string & {})`. Controls size of the component Known values: "lg", "md", "sm", "xl", "xs".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `(string & {}) | CheckboxIndicatorVariant`.  Known values: "filled", "outline".

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for CheckboxIndicator](https://mantine.dev/core/checkbox-indicator/)

## Chip

@mantine/core; interaction; safety: wrapped.

Subcomponents: Chip.Group.

- `attributes`: `{ input?: Record<string, any>; label?: Record<string, any>; root?: Record<string, any>; iconWrapper?: Record<string, any>; checkIcon?: Record<...>; }`.
- `autoContrast`: `false | true`. If set, adjusts text color based on the chip background color for `filled` variant Known values: false, true.
- `color`: `DefaultMantineColor`. Key of `theme.colors` or any valid CSS color. Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `icon`: `React.ReactNode`. Any element or component to replace the default icon
- `size`: `"xs" | "sm" | "md" | "lg" | "xl"`. Controls various properties related to the component size Known values: "lg", "md", "sm", "xl", "xs".
- `type`: `"checkbox" | "radio"`. Chip input type Known values: "checkbox", "radio".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `(string & {}) | ChipVariant`.  Known values: "filled", "light", "outline".
- `wrapperProps`: `(React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & DataAttributes)`. Props passed down to the root element

- Provide a visible label or aria-label.

[Upstream documentation for Chip](https://mantine.dev/core/chip/)

## Chip.Group

@mantine/core; interaction; safety: wrapped.

Bind a temporary string input with `bind`. Initialize with `defaultValue`; reset with `resetKey`.

- `defaultValue`: `(Multiple extends true ? Value[] : Value | null)`. Uncontrolled component initial value
- `multiple`: `Multiple`. If set, multiple values can be selected
- `value`: `(Multiple extends true ? Value[] : Value | null)`. Controlled component value

- Provide a visible label or aria-label.

[Upstream documentation for Chip.Group](https://mantine.dev/core/chip/)

## ChipGroup

@mantine/core; content; safety: wrapped.

Bind a temporary string input with `bind`. Initialize with `defaultValue`; reset with `resetKey`.

- `defaultValue`: `(Multiple extends true ? Value[] : Value | null)`. Uncontrolled component initial value
- `multiple`: `Multiple`. If set, multiple values can be selected
- `value`: `(Multiple extends true ? Value[] : Value | null)`. Controlled component value

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for ChipGroup](https://mantine.dev/core/chip-group/)

## CloseButton

@mantine/core; interaction; safety: wrapped.

- `attributes`: `{ root?: Record<string, any>; }`.
- `data-disabled`: `false | true`.  Known values: false, true.
- `icon`: `React.ReactNode`. React node to replace the default close icon. If set, `iconSize` prop is ignored.
- `iconSize`: `string | number`. `X` icon `width` and `height`
- `size`: `number | MantineSize | (string & {})`. Controls width and height of the button. Numbers are converted to rem. Known values: "lg", "md", "sm", "xl", "xs".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `(string & {}) | CloseButtonVariant`.  Known values: "subtle", "transparent".

- Provide a visible label or aria-label.

[Upstream documentation for CloseButton](https://mantine.dev/core/close-button/)

## CloseIcon

@mantine/core; content; safety: wrapped.

- `color`: `string`.
- `display`: `string | number`.
- `opacity`: `string | number`.
- `radius`: `string | number`.
- `size`: `string`. Icon width and height, `var(--icon-size)` by default
- `type`: `string`.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for CloseIcon](https://mantine.dev/core/close-icon/)

## Code

@mantine/core; content; safety: wrapped.

- `attributes`: `{ root?: Record<string, any>; }`.
- `block`: `false | true`. If set, code is rendered in `pre` Known values: false, true.
- `color`: `DefaultMantineColor`. Key of `theme.colors` or any valid CSS color, controls `background-color` of the code. By default, calculated based on the color scheme. Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for Code](https://mantine.dev/core/code/)

## Collapse

@mantine/core; navigation; safety: wrapped.

- `animateOpacity`: `false | true`. Determines whether the opacity is animated Known values: false, true.
- `color`: `string`.
- `expanded`: `false | true`. Required. Expanded state Known values: false, true.
- `keepMounted`: `false | true`. If set, the element is kept in the DOM when collapsed. When `true`, React 19 `Activity` is used to preserve state while collapsed. When `false`, the element is unmounted after the exit animation. Known values: false, true.
- `keepMountedMode`: `"activity" | "display-none"`. Controls how the element is hidden when `keepMounted` is set: `'activity'` – hidden with React 19 `Activity` component, `'display-none'` – hidden with `display: none` styles Known values: "activity", "display-none".
- `orientation`: `"horizontal" | "vertical"`. Collapse orientation Known values: "horizontal", "vertical".
- `transitionDuration`: `number`. Transition duration in ms
- `transitionTimingFunction`: `string`. Transition timing function

- Provide an accessible label for controls without visible text.

[Upstream documentation for Collapse](https://mantine.dev/core/collapse/)

## Collapsible

@homarr/widgets; interaction; safety: allowed. Shows and hides a bounded content section.

- `defaultOpen`: `boolean`.
- `title`: `string`. Required.

- Provide a visible label or aria-label.

[Upstream documentation for Collapsible](https://homarr.dev/docs/management/custom-widgets/)

## ColorInput

@mantine/core; interaction; safety: wrapped.

Bind a temporary string input with `bind`. Initialize with `defaultValue`; reset with `resetKey`.

- `attributes`: `{ body?: Record<string, any>; input?: Record<string, any>; label?: Record<string, any>; section?: Record<string, any>; ... 19 more ...; swatch?: Record<...>; }`.
- `closeOnColorSwatchClick`: `false | true`. If set, the dropdown is closed when one of the color swatches is clicked Known values: false, true.
- `color`: `string`.
- `defaultValue`: `string`. Uncontrolled component default value
- `description`: `React.ReactNode`. Contents of `Input.Description` component. If not set, description is not displayed.
- `descriptionProps`: `(InputDescriptionProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Description` component
- `disallowInput`: `false | true`. If input is not allowed, the user can only pick value with color picker and swatches Known values: false, true.
- `error`: `React.ReactNode`. Contents of `Input.Error` component. If not set, error is not displayed.
- `errorProps`: `(InputErrorProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Error` component
- `eyeDropperButtonProps`: `Record<string, any>`. Props passed down to the eye dropper button
- `eyeDropperIcon`: `React.ReactNode`. An icon to replace the default eye dropper icon
- `fixOnBlur`: `false | true`. If set, the input value resets to the last known valid value when the input loses focus Known values: false, true.
- `format`: `"hex" | "hexa" | "rgba" | "rgb" | "hsl" | "hsla"`. Color format. `hexa`, `rgba`, `hsla` values render alpha channel slider Known values: "hex", "hexa", "hsl", "hsla", "rgb", "rgba".
- `fullWidth`: `false | true`. If set, the component takes 100% width of its container Known values: false, true.
- `inputSize`: `string`. HTML `size` attribute for the input element (number of visible characters)
- `inputWrapperOrder`: `("input" | "label" | "description" | "error")[]`. Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.
- `label`: `React.ReactNode`. Contents of `Input.Label` component. If not set, label is not displayed.
- `labelProps`: `(InputLabelProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Label` component
- `leftSection`: `React.ReactNode`. Content section displayed on the left side of the input
- `leftSectionPointerEvents`: `"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "all" | "fill" | "stroke" | "painted" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke"`. Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). Known values: "-moz-initial", "all", "auto", "fill", "inherit", "initial", "none", "painted", "revert", "revert-layer", "stroke", "unset", "visible", "visibleFill", "visiblePainted", "visibleStroke".
- `leftSectionProps`: `React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>`. Props passed down to the `leftSection` element
- `leftSectionWidth`: `Property.Width<string | number>`. Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height
- `loading`: `false | true`. Displays loading indicator in the left or right section Known values: false, true.
- `loadingPosition`: `"left" | "right"`. Position of the loading indicator Known values: "left", "right".
- `pointer`: `false | true`. Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component="button"` for Select/DatePicker). Known values: false, true.
- `popoverProps`: `PopoverProps`. Props passed down to the `Popover` component
- `rightSection`: `React.ReactNode`. Content section displayed on the right side of the input
- `rightSectionPointerEvents`: `"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "all" | "fill" | "stroke" | "painted" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke"`. Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). Known values: "-moz-initial", "all", "auto", "fill", "inherit", "initial", "none", "painted", "revert", "revert-layer", "stroke", "unset", "visible", "visibleFill", "visiblePainted", "visibleStroke".
- `rightSectionProps`: `React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>`. Props passed down to the `rightSection` element
- `rightSectionWidth`: `Property.Width<string | number>`. Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height
- `size`: `MantineSize | (string & {})`. Controls input `height`, horizontal `padding`, and `font-size` Known values: "lg", "md", "sm", "xl", "xs".
- `success`: `React.ReactNode`. Contents of `Input.Success` component. If not set, success is not displayed.
- `successProps`: `(InputSuccessProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Success` component
- `swatches`: `string[]`. A list of colors used to display swatches list below the color picker
- `swatchesPerRow`: `number`. Number of swatches per row
- `type`: `HTMLInputTypeAttribute`.  Known values: "button", "checkbox", "color", "date", "datetime-local", "email", "file", "hidden", "image", "month", "number", "password", "radio", "range", "reset", "search", "submit", "tel", "text", "time", "url", "week".
- `unstyled`: `false | true`.  Known values: false, true.
- `value`: `string`. Controlled component value
- `variant`: `(string & {}) | InputVariant`.  Known values: "default", "filled", "unstyled".
- `withAsterisk`: `false | true`. If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. Known values: false, true.
- `withErrorStyles`: `false | true`. Determines whether the input should have red border and red text color when the `error` prop is set Known values: false, true.
- `withEyeDropper`: `false | true`. If set, the eye dropper button is displayed in the right section Known values: false, true.
- `withPicker`: `false | true`. If `false`, the component displays only swatches Known values: false, true.
- `withPreview`: `false | true`. If set, the preview color swatch is displayed in the left section of the input Known values: false, true.
- `withSuccessStyles`: `false | true`. Determines whether the input should have green border when the `success` prop is set Known values: false, true.
- `wrapperProps`: `WrapperProps`. Props passed down to the root element

- Provide a visible label or aria-label.

[Upstream documentation for ColorInput](https://mantine.dev/core/color-input/)

## ColorPicker

@mantine/core; interaction; safety: wrapped.

Bind a temporary string input with `bind`. Initialize with `defaultValue`; reset with `resetKey`.

- `alphaLabel`: `string`. Alpha slider `aria-label`
- `attributes`: `{ body?: Record<string, any>; slider?: Record<string, any>; wrapper?: Record<string, any>; sliderOverlay?: Record<string, any>; ... 6 more ...; swatch?: Record<...>; }`.
- `color`: `string`.
- `defaultValue`: `string`. Uncontrolled component default value
- `focusable`: `false | true`. If set, interactive elements (sliders thumbs and swatches) are focusable with keyboard Known values: false, true.
- `format`: `"hex" | "hexa" | "rgba" | "rgb" | "hsl" | "hsla"`. Color format. `hexa`, `rgba`, `hsla` values render alpha channel slider Known values: "hex", "hexa", "hsl", "hsla", "rgb", "rgba".
- `fullWidth`: `false | true`. If set, the component takes 100% width of its container Known values: false, true.
- `hiddenInputProps`: `(React.ClassAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLInputElement> & DataAttributes)`. Props spread to the hidden input
- `hueLabel`: `string`. Hue slider `aria-label`
- `saturationLabel`: `string`. Saturation slider `aria-label`
- `size`: `MantineSize | (string & {})`. Component size Known values: "lg", "md", "sm", "xl", "xs".
- `swatches`: `string[]`. A list of colors used to display swatches list below the color picker
- `swatchesPerRow`: `number`. Number of swatches per row
- `unstyled`: `false | true`.  Known values: false, true.
- `value`: `string`. Controlled component value
- `variant`: `string`.
- `withPicker`: `false | true`. If `false`, the component displays only swatches Known values: false, true.

- Provide a visible label or aria-label.

[Upstream documentation for ColorPicker](https://mantine.dev/core/color-picker/)

## ColorSchemeScript

@mantine/core; blocked; safety: denied.

Unavailable: Writes global document state

[Upstream documentation for ColorSchemeScript](https://mantine.dev/core/color-scheme-script/)

## ColorSwatch

@mantine/core; content; safety: wrapped.

- `attributes`: `{ root?: Record<string, any>; alphaOverlay?: Record<string, any>; shadowOverlay?: Record<string, any>; colorOverlay?: Record<...>; childrenOverlay?: Record<...>; }`.
- `color`: `string`. Required. Valid CSS color to display
- `size`: `Property.Width<string | number>`. Swatch `width` and `height`, any valid CSS value, numbers are converted to rem.
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `withShadow`: `false | true`. If set, the swatch has inner `box-shadow` Known values: false, true.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for ColorSwatch](https://mantine.dev/core/color-swatch/)

## Combobox

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

Subcomponents: Combobox.Chevron, Combobox.ClearButton, Combobox.Dropdown, Combobox.DropdownTarget, Combobox.Empty, Combobox.EventsTarget, Combobox.Footer, Combobox.Group, Combobox.Header, Combobox.HiddenInput, Combobox.Option, Combobox.Options, Combobox.Search, Combobox.Target.

[Upstream documentation for Combobox](https://mantine.dev/core/combobox/)

## Combobox.Chevron

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for Combobox.Chevron](https://mantine.dev/core/combobox/)

## Combobox.ClearButton

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for Combobox.ClearButton](https://mantine.dev/core/combobox/)

## Combobox.Dropdown

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for Combobox.Dropdown](https://mantine.dev/core/combobox/)

## Combobox.DropdownTarget

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for Combobox.DropdownTarget](https://mantine.dev/core/combobox/)

## Combobox.Empty

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for Combobox.Empty](https://mantine.dev/core/combobox/)

## Combobox.EventsTarget

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for Combobox.EventsTarget](https://mantine.dev/core/combobox/)

## Combobox.Footer

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for Combobox.Footer](https://mantine.dev/core/combobox/)

## Combobox.Group

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for Combobox.Group](https://mantine.dev/core/combobox/)

## Combobox.Header

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for Combobox.Header](https://mantine.dev/core/combobox/)

## Combobox.HiddenInput

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for Combobox.HiddenInput](https://mantine.dev/core/combobox/)

## Combobox.Option

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for Combobox.Option](https://mantine.dev/core/combobox/)

## Combobox.Options

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for Combobox.Options](https://mantine.dev/core/combobox/)

## Combobox.Search

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for Combobox.Search](https://mantine.dev/core/combobox/)

## Combobox.Target

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for Combobox.Target](https://mantine.dev/core/combobox/)

## ComboboxChevron

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for ComboboxChevron](https://mantine.dev/core/combobox-chevron/)

## ComboboxClearButton

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for ComboboxClearButton](https://mantine.dev/core/combobox-clear-button/)

## ComboboxDropdown

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for ComboboxDropdown](https://mantine.dev/core/combobox-dropdown/)

## ComboboxDropdownTarget

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for ComboboxDropdownTarget](https://mantine.dev/core/combobox-dropdown-target/)

## ComboboxEmpty

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for ComboboxEmpty](https://mantine.dev/core/combobox-empty/)

## ComboboxEventsTarget

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for ComboboxEventsTarget](https://mantine.dev/core/combobox-events-target/)

## ComboboxFooter

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for ComboboxFooter](https://mantine.dev/core/combobox-footer/)

## ComboboxGroup

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for ComboboxGroup](https://mantine.dev/core/combobox-group/)

## ComboboxHeader

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for ComboboxHeader](https://mantine.dev/core/combobox-header/)

## ComboboxHiddenInput

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for ComboboxHiddenInput](https://mantine.dev/core/combobox-hidden-input/)

## ComboboxOption

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for ComboboxOption](https://mantine.dev/core/combobox-option/)

## ComboboxOptions

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for ComboboxOptions](https://mantine.dev/core/combobox-options/)

## ComboboxPopover

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

Subcomponents: ComboboxPopover.Target.

[Upstream documentation for ComboboxPopover](https://mantine.dev/core/combobox-popover/)

## ComboboxPopover.Target

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for ComboboxPopover.Target](https://mantine.dev/core/combobox-popover/)

## ComboboxPopoverTarget

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for ComboboxPopoverTarget](https://mantine.dev/core/combobox-popover-target/)

## ComboboxSearch

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for ComboboxSearch](https://mantine.dev/core/combobox-search/)

## ComboboxTarget

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for ComboboxTarget](https://mantine.dev/core/combobox-target/)

## CompositeChart

@mantine/charts; charts; safety: wrapped.

- `accessibilityLayer`: `false | true`. Determines whether the chart should be keyboard-navigable with the recharts accessibility layer, `true` by default Known values: false, true.
- `activeDotProps`: `MantineChartDotProps`. Props passed down to all active dots. Ignored if `withDots={false}` is set.
- `attributes`: `{ area?: Record<string, any>; legend?: Record<string, any>; line?: Record<string, any>; grid?: Record<string, any>; ... 19 more ...; tooltipBody?: Record<...>; }`.
- `brushProps`: `Omit<BrushProps, "ref">`. Props passed down to the `Brush` component
- `color`: `string`.
- `composedChartProps`: `(CartesianChartProps<unknown> & { ref?: React.Ref<SVGSVGElement>; })`. Props passed down to recharts `AreaChart` component
- `connectNulls`: `false | true`. Determines whether points with `null` values should be connected Known values: false, true.
- `curveType`: `"step" | "bump" | "linear" | "natural" | "monotone" | "stepBefore" | "stepAfter"`. Type of the curve Known values: "bump", "linear", "monotone", "natural", "step", "stepAfter", "stepBefore".
- `data`: `Record<string, any>[]`. Required. Data used to display chart
- `dataKey`: `string`. Required. Key of the `data` object for x-axis values
- `dotProps`: `MantineChartDotProps`. Props passed down to all dots. Ignored if `withDots={false}` is set.
- `gridAxis`: `"none" | "x" | "y" | "xy"`. Specifies which lines should be displayed in the grid, `'x'` by default Known values: "none", "x", "xy", "y".
- `gridColor`: `DefaultMantineColor`. Color of the grid and cursor lines, by default depends on color scheme Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `gridProps`: `Omit<CartesianGridProps, "ref">`. Props passed down to the `CartesianGrid` component
- `legendProps`: `Omit<LegendProps, "ref">`. Props passed down to the `Legend` component
- `maxBarWidth`: `number`. Maximum bar width in px
- `minBarSize`: `number`. Sets minimum height of the bar in px
- `referenceAreas`: `ChartReferenceAreaProps[]`. Reference areas that should be displayed on the chart
- `referenceDots`: `ChartReferenceDotProps[]`. Reference dots that should be displayed on the chart
- `referenceLines`: `ChartReferenceLineProps[]`. Reference lines that should be displayed on the chart
- `rightYAxisLabel`: `string`. A label to display next to the right y-axis
- `rightYAxisProps`: `Omit<YAxisProps, "ref">`. Props passed down to the `YAxis` recharts component rendered on the right side
- `series`: `CompositeChartSeries[]`. Required. An array of objects with `name` and `color` keys. Determines which data should be consumed from the `data` array.
- `strokeWidth`: `number`. Stroke width for the chart lines
- `textColor`: `DefaultMantineColor`. Color of the text displayed inside the chart, `'dimmed'` by default Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `tickLine`: `"none" | "x" | "y" | "xy"`. Specifies which axis should have tick line, `'y'` by default Known values: "none", "x", "xy", "y".
- `tooltipAnimationDuration`: `number`. Tooltip position animation duration in ms, `0` by default
- `tooltipProps`: `Omit<TooltipProps<any, any>, "ref">`. Props passed down to the `Tooltip` component
- `unit`: `string`. Unit displayed next to each tick in y-axis
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `withBarValueLabel`: `false | true`. Determines whether a label with bar value should be displayed on top of each bar Known values: false, true.
- `withBrush`: `false | true`. Determines whether a brush (range selector) should be displayed under the chart, `false` by default Known values: false, true.
- `withDots`: `false | true`. Determines whether dots should be displayed Known values: false, true.
- `withLegend`: `false | true`. Determines whether chart legend should be displayed, `false` by default Known values: false, true.
- `withPointLabels`: `false | true`. Determines whether each point should have associated label Known values: false, true.
- `withRightYAxis`: `false | true`. Determines whether additional y-axis should be displayed on the right side of the chart, `false` by default Known values: false, true.
- `withTooltip`: `false | true`. Determines whether chart tooltip should be displayed, `true` by default Known values: false, true.
- `withXAxis`: `false | true`. Determines whether x-axis should be displayed, `true` by default Known values: false, true.
- `withYAxis`: `false | true`. Determines whether y-axis should be displayed, `true` by default Known values: false, true.
- `xAxisLabel`: `string`. A label to display below the x-axis
- `xAxisProps`: `Omit<XAxisProps, "ref">`. Props passed down to the `XAxis` recharts component
- `yAxisLabel`: `string`. A label to display next to the y-axis
- `yAxisProps`: `Omit<YAxisProps, "ref">`. Props passed down to the `YAxis` recharts component

- Include a nearby text summary of the chart data.

[Upstream documentation for CompositeChart](https://mantine.dev/charts/composite-chart/)

## Container

@mantine/core; layout; safety: wrapped.

- `attributes`: `{ root?: Record<string, any>; }`.
- `color`: `string`.
- `fluid`: `false | true`. If set, the container takes 100% width of its parent and `size` prop is ignored. Known values: false, true.
- `size`: `number | MantineSize | (string & {})`. `max-width` of the container, value is not responsive – it is the same for all screen sizes. Numbers are converted to rem. Ignored when `fluid` prop is set. Known values: "lg", "md", "sm", "xl", "xs".
- `strategy`: `"block" | "grid"`. Centering strategy Known values: "block", "grid".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.

- Keep visual order consistent with reading order.

[Upstream documentation for Container](https://mantine.dev/core/container/)

## CopyButton

@mantine/core; interaction; safety: wrapped.

- `timeout`: `number`. Copied status timeout in ms
- `value`: `string`. Required. Value that is copied to the clipboard when the button is clicked

- Provide a visible label or aria-label.

[Upstream documentation for CopyButton](https://mantine.dev/core/copy-button/)

## DataList

@mantine/core; content; safety: wrapped.

Subcomponents: DataList.Item, DataList.ItemLabel, DataList.ItemValue.

- `attributes`: `{ root?: Record<string, any>; item?: Record<string, any>; itemLabel?: Record<string, any>; itemValue?: Record<string, any>; }`.
- `color`: `string`.
- `gap`: `MantineSpacing`. Key of `theme.spacing` or any valid CSS value to set gap between items Known values: "lg", "md", "sm", "xl", "xs".
- `labelWidth`: `Property.MinWidth<string | number>`. Controls min-width of the label (dt) element, any valid CSS value
- `orientation`: `"horizontal" | "vertical"`. Controls arrangement of label and value within each item. `horizontal` renders label and value side by side, `vertical` stacks label on top of value Known values: "horizontal", "vertical".
- `size`: `"xs" | "sm" | "md" | "lg" | "xl"`. Controls `font-size` and `line-height` Known values: "lg", "md", "sm", "xl", "xs".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `withDivider`: `false | true`. Adds border between items Known values: false, true.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for DataList](https://mantine.dev/core/data-list/)

## DataList.Item

@mantine/core; content; safety: wrapped.

- `color`: `string`.
- `styles`: `Partial<Record<"item", CSSProperties>>`.
- `variant`: `string`.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for DataList.Item](https://mantine.dev/core/data-list/)

## DataList.ItemLabel

@mantine/core; content; safety: wrapped.

- `color`: `string`.
- `styles`: `Partial<Record<"itemLabel", CSSProperties>>`.
- `variant`: `string`.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for DataList.ItemLabel](https://mantine.dev/core/data-list/)

## DataList.ItemValue

@mantine/core; content; safety: wrapped.

- `color`: `string`.
- `styles`: `Partial<Record<"itemValue", CSSProperties>>`.
- `variant`: `string`.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for DataList.ItemValue](https://mantine.dev/core/data-list/)

## DataListItem

@mantine/core; content; safety: wrapped.

- `color`: `string`.
- `styles`: `Partial<Record<"item", CSSProperties>>`.
- `variant`: `string`.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for DataListItem](https://mantine.dev/core/data-list-item/)

## DataListItemLabel

@mantine/core; content; safety: wrapped.

- `color`: `string`.
- `styles`: `Partial<Record<"itemLabel", CSSProperties>>`.
- `variant`: `string`.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for DataListItemLabel](https://mantine.dev/core/data-list-item-label/)

## DataListItemValue

@mantine/core; content; safety: wrapped.

- `color`: `string`.
- `styles`: `Partial<Record<"itemValue", CSSProperties>>`.
- `variant`: `string`.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for DataListItemValue](https://mantine.dev/core/data-list-item-value/)

## DateInput

@mantine/dates; dates; safety: wrapped.

Bind a temporary string input with `bind`. Initialize with `defaultValue`; reset with `resetKey`.

- `allowDeselect`: `false | true`. If set, the value can be deselected by deleting everything from the input or by clicking the selected date in the dropdown. By default, `true` if `clearable` prop is set, `false` otherwise. Known values: false, true.
- `ariaLabels`: `CalendarAriaLabels`. `aria-label` attributes for controls on different levels
- `attributes`: `{ input?: Record<string, any>; label?: Record<string, any>; section?: Record<string, any>; root?: Record<string, any>; ... 31 more ...; presetButton?: Record<...>; }`.
- `clearButtonProps`: `React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>`. Props passed down to the clear button
- `clearSectionMode`: `"both" | "rightSection" | "clear"`. Determines how the clear button and rightSection are rendered Known values: "both", "clear", "rightSection".
- `clearable`: `false | true`. If set, clear button is displayed in the `rightSection` when the component has value. Ignored if `rightSection` prop is set. Known values: false, true.
- `color`: `string`.
- `columnsToScroll`: `number`. Number of columns to scroll with next/prev buttons, same as `numberOfColumns` if not set explicitly
- `date`: `string | Date`. Displayed date in controlled mode
- `defaultDate`: `string | Date`. Initial displayed date in uncontrolled mode
- `defaultLevel`: `"month" | "year" | "decade"`. Initial displayed level (uncontrolled) Known values: "decade", "month", "year".
- `defaultValue`: `DateValue`. Uncontrolled component default value
- `description`: `React.ReactNode`. Contents of `Input.Description` component. If not set, description is not displayed.
- `descriptionProps`: `(InputDescriptionProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Description` component
- `error`: `React.ReactNode`. Contents of `Input.Error` component. If not set, error is not displayed.
- `errorProps`: `(InputErrorProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Error` component
- `firstDayOfWeek`: `0 | 2 | 3 | 4 | 5 | 6 | 1`. Number 0-6, where 0 – Sunday and 6 – Saturday. Known values: 0, 1, 2, 3, 4, 5, 6.
- `fixOnBlur`: `false | true`. If set to `false`, invalid user input is preserved and is not corrected on blur Known values: false, true.
- `fullWidth`: `false | true`. Determines whether the calendar should take the full width of its container Known values: false, true.
- `hasNextLevel`: `false | true`. Determines whether next level button should be enabled Known values: false, true.
- `headerControlsOrder`: `("next" | "previous" | "level")[]`. Controls order
- `hideOutsideDates`: `false | true`. Determines whether outside dates should be hidden Known values: false, true.
- `hideWeekdays`: `false | true`. Determines whether weekdays row should be hidden Known values: false, true.
- `highlightToday`: `false | true`. Determines whether today should be highlighted with a border Known values: false, true.
- `inputSize`: `string`. HTML `size` attribute for the input element (number of visible characters)
- `inputWrapperOrder`: `("input" | "label" | "description" | "error")[]`. Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.
- `label`: `React.ReactNode`. Contents of `Input.Label` component. If not set, label is not displayed.
- `labelProps`: `(InputLabelProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Label` component
- `leftSection`: `React.ReactNode`. Content section displayed on the left side of the input
- `leftSectionPointerEvents`: `"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "all" | "fill" | "stroke" | "painted" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke"`. Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). Known values: "-moz-initial", "all", "auto", "fill", "inherit", "initial", "none", "painted", "revert", "revert-layer", "stroke", "unset", "visible", "visibleFill", "visiblePainted", "visibleStroke".
- `leftSectionProps`: `React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>`. Props passed down to the `leftSection` element
- `leftSectionWidth`: `Property.Width<string | number>`. Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height
- `level`: `"month" | "year" | "decade"`. Current displayed level (controlled) Known values: "decade", "month", "year".
- `loading`: `false | true`. Displays loading indicator in the left or right section Known values: false, true.
- `loadingPosition`: `"left" | "right"`. Position of the loading indicator Known values: "left", "right".
- `locale`: `string`. Dayjs locale, defaults to value defined in DatesProvider
- `maxDate`: `string | Date`. Maximum possible date in `YYYY-MM-DD` format or Date object
- `maxLevel`: `"month" | "year" | "decade"`. Max level that user can go up to Known values: "decade", "month", "year".
- `minDate`: `string | Date`. Minimum possible date in `YYYY-MM-DD` format or Date object
- `nextDisabled`: `false | true`. Disables next control Known values: false, true.
- `nextIcon`: `React.ReactNode`. Change next icon
- `nextLabel`: `string`. Next button `aria-label`
- `numberOfColumns`: `number`. Number of columns displayed next to each other
- `pointer`: `false | true`. Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component="button"` for Select/DatePicker). Known values: false, true.
- `popoverProps`: `Partial<Omit<PopoverProps, "children">>`. Props passed down to the `Popover` component
- `presets`: `DatePickerPreset<"default">[]`. Predefined values to pick from
- `previousDisabled`: `false | true`. Disables previous control Known values: false, true.
- `previousIcon`: `React.ReactNode`. Change previous icon
- `previousLabel`: `string`. Previous button `aria-label`
- `rightSection`: `React.ReactNode`. Content section displayed on the right side of the input
- `rightSectionPointerEvents`: `"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "all" | "fill" | "stroke" | "painted" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke"`. Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). Known values: "-moz-initial", "all", "auto", "fill", "inherit", "initial", "none", "painted", "revert", "revert-layer", "stroke", "unset", "visible", "visibleFill", "visiblePainted", "visibleStroke".
- `rightSectionProps`: `React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>`. Props passed down to the `rightSection` element
- `rightSectionWidth`: `Property.Width<string | number>`. Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height
- `size`: `"xs" | "sm" | "md" | "lg" | "xl"`. Component size Known values: "lg", "md", "sm", "xl", "xs".
- `success`: `React.ReactNode`. Contents of `Input.Success` component. If not set, success is not displayed.
- `successProps`: `(InputSuccessProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Success` component
- `type`: `HTMLInputTypeAttribute`.  Known values: "button", "checkbox", "color", "date", "datetime-local", "email", "file", "hidden", "image", "month", "number", "password", "radio", "range", "reset", "search", "submit", "tel", "text", "time", "url", "week".
- `unstyled`: `false | true`.  Known values: false, true.
- `value`: `DateValue`. Controlled component value
- `variant`: `(string & {}) | InputVariant`.  Known values: "default", "filled", "unstyled".
- `weekendDays`: `DayOfWeek[]`. Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider`.
- `withAsterisk`: `false | true`. If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. Known values: false, true.
- `withCellSpacing`: `false | true`. Determines whether controls should be separated Known values: false, true.
- `withErrorStyles`: `false | true`. Determines whether the input should have red border and red text color when the `error` prop is set Known values: false, true.
- `withNativeLevelSelect`: `false | true`. Determines whether level select controls should be rendered as native `<select>` elements Known values: false, true.
- `withNext`: `false | true`. Determines whether next control should be rendered Known values: false, true.
- `withPrevious`: `false | true`. Determines whether previous control should be rendered Known values: false, true.
- `withSuccessStyles`: `false | true`. Determines whether the input should have green border when the `success` prop is set Known values: false, true.
- `withTime`: `false | true`. If set to `true`, the time part of the value is preserved. Set this to `true` when `valueFormat` includes time (e.g. `"YYYY-MM-DD HH:mm"`). Known values: false, true.
- `withWeekNumbers`: `false | true`. Determines whether week numbers should be displayed Known values: false, true.
- `wrapperProps`: `WrapperProps`. Props passed down to the root element
- `yearsSelectRange`: `[number, number]`. Year range for native level select, tuple of `[startYear, endYear]`. Defaults to `[currentYear - 100, currentYear + 50]` or values derived from `minDate`/`maxDate` if set.

- Include a textual date when the visual calendar carries meaning.

[Upstream documentation for DateInput](https://mantine.dev/dates/date-input/)

## DatePicker

@mantine/dates; dates; safety: wrapped.

Bind a temporary string input with `bind`. Initialize with `defaultValue`; reset with `resetKey`.

- `allowDeselect`: `(Type extends "default" ? boolean : never)`. Determines whether user can deselect the date by clicking on selected item, applicable only when type="default"
- `allowSingleDateInRange`: `(Type extends "range" ? boolean : never)`. Determines whether a single day can be selected as range, applicable only when type="range"
- `ariaLabels`: `CalendarAriaLabels`. `aria-label` attributes for controls on different levels
- `attributes`: `{ month?: Record<string, any>; weekday?: Record<string, any>; weekdaysRow?: Record<string, any>; monthRow?: Record<string, any>; ... 21 more ...; datePickerRoot?: Record<...>; }`.
- `color`: `string`.
- `columnsToScroll`: `number`. Number of columns to scroll with next/prev buttons, same as `numberOfColumns` if not set explicitly
- `date`: `string | Date`. Displayed date in controlled mode
- `defaultDate`: `string | Date`. Initial displayed date in uncontrolled mode
- `defaultLevel`: `"month" | "year" | "decade"`. Initial displayed level (uncontrolled) Known values: "decade", "month", "year".
- `defaultValue`: `DatePickerValue<Type, DateValue>`. Default value for uncontrolled component
- `enableKeyboardNavigation`: `false | true`. Enable enhanced keyboard navigation (Ctrl/Cmd + Arrow keys for year navigation, Ctrl/Cmd + Shift + Arrow keys for decade navigation, Y key to open year view) Known values: false, true.
- `firstDayOfWeek`: `0 | 2 | 3 | 4 | 5 | 6 | 1`. Number 0-6, where 0 – Sunday and 6 – Saturday. Known values: 0, 1, 2, 3, 4, 5, 6.
- `fullWidth`: `false | true`. Determines whether the list should take the full width of its container Known values: false, true.
- `headerControlsOrder`: `("next" | "previous" | "level")[]`. Controls order
- `hideOutsideDates`: `false | true`. Determines whether outside dates should be hidden Known values: false, true.
- `hideWeekdays`: `false | true`. Determines whether weekdays row should be hidden Known values: false, true.
- `highlightToday`: `false | true`. Determines whether today should be highlighted with a border Known values: false, true.
- `level`: `"month" | "year" | "decade"`. Current displayed level (controlled) Known values: "decade", "month", "year".
- `locale`: `string`. Dayjs locale, defaults to value defined in DatesProvider
- `maxDate`: `string | Date`. Maximum possible date in `YYYY-MM-DD` format or Date object
- `maxLevel`: `"month" | "year" | "decade"`.  Known values: "decade", "month", "year".
- `minDate`: `string | Date`. Minimum possible date in `YYYY-MM-DD` format or Date object
- `nextIcon`: `React.ReactNode`. Change next icon
- `nextLabel`: `string`. Next button `aria-label`
- `numberOfColumns`: `number`. Number of columns displayed next to each other
- `presets`: `DatePickerPreset<Type>[]`. Predefined values to pick from
- `previousIcon`: `React.ReactNode`. Change previous icon
- `previousLabel`: `string`. Previous button `aria-label`
- `size`: `"xs" | "sm" | "md" | "lg" | "xl"`. Component size Known values: "lg", "md", "sm", "xl", "xs".
- `type`: `Type | DatePickerType`. Picker type: range, multiple or default Known values: "default", "multiple", "range".
- `unstyled`: `false | true`.  Known values: false, true.
- `value`: `DatePickerValue<Type, DateValue>`. Value for controlled component
- `variant`: `string`.
- `weekendDays`: `DayOfWeek[]`. Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider`.
- `withCellSpacing`: `false | true`. Determines whether controls should be separated Known values: false, true.
- `withNativeLevelSelect`: `false | true`. Determines whether level select controls should be rendered as native `<select>` elements Known values: false, true.
- `withWeekNumbers`: `false | true`. Determines whether week numbers should be displayed Known values: false, true.
- `yearsSelectRange`: `[number, number]`. Year range for native level select, tuple of `[startYear, endYear]`. Defaults to `[currentYear - 100, currentYear + 50]` or values derived from `minDate`/`maxDate` if set.

- Include a textual date when the visual calendar carries meaning.

[Upstream documentation for DatePicker](https://mantine.dev/dates/date-picker/)

## DatePickerInput

@mantine/dates; dates; safety: wrapped.

Bind a temporary string input with `bind`. Initialize with `defaultValue`; reset with `resetKey`.

- `allowDeselect`: `(Type extends "default" ? boolean : never)`. Determines whether user can deselect the date by clicking on selected item, applicable only when type="default"
- `allowSingleDateInRange`: `(Type extends "range" ? boolean : never)`. Determines whether a single day can be selected as range, applicable only when type="range"
- `ariaLabels`: `CalendarAriaLabels`. `aria-label` attributes for controls on different levels
- `attributes`: `{ input?: Record<string, any>; label?: Record<string, any>; section?: Record<string, any>; root?: Record<string, any>; ... 32 more ...; datePickerRoot?: Record<...>; }`.
- `clearButtonProps`: `React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>`. Props passed down to the clear button
- `clearSectionMode`: `"both" | "rightSection" | "clear"`. Determines how the clear button and rightSection are rendered Known values: "both", "clear", "rightSection".
- `clearable`: `false | true`. If set, clear button is displayed in the `rightSection` when the component has value. Ignored if `rightSection` prop is set. Known values: false, true.
- `closeOnChange`: `false | true`. Determines whether the dropdown is closed when date is selected, not applicable with `type="multiple"` Known values: false, true.
- `color`: `string`.
- `columnsToScroll`: `number`. Number of columns to scroll with next/prev buttons, same as `numberOfColumns` if not set explicitly
- `date`: `string | Date`. Displayed date in controlled mode
- `defaultDate`: `string | Date`. Initial displayed date in uncontrolled mode
- `defaultLevel`: `"month" | "year" | "decade"`. Initial displayed level (uncontrolled) Known values: "decade", "month", "year".
- `defaultValue`: `DatePickerValue<Type, DateValue>`. Default value for uncontrolled component
- `description`: `React.ReactNode`. Contents of `Input.Description` component. If not set, description is not displayed.
- `descriptionProps`: `(InputDescriptionProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Description` component
- `enableKeyboardNavigation`: `false | true`. Enable enhanced keyboard navigation (Ctrl/Cmd + Arrow keys for year navigation, Ctrl/Cmd + Shift + Arrow keys for decade navigation, Y key to open year view) Known values: false, true.
- `error`: `React.ReactNode`. Contents of `Input.Error` component. If not set, error is not displayed.
- `errorProps`: `(InputErrorProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Error` component
- `firstDayOfWeek`: `0 | 2 | 3 | 4 | 5 | 6 | 1`. Number 0-6, where 0 – Sunday and 6 – Saturday. Known values: 0, 1, 2, 3, 4, 5, 6.
- `fullWidth`: `false | true`. Determines whether the list should take the full width of its container Known values: false, true.
- `headerControlsOrder`: `("next" | "previous" | "level")[]`. Controls order
- `hideOutsideDates`: `false | true`. Determines whether outside dates should be hidden Known values: false, true.
- `hideWeekdays`: `false | true`. Determines whether weekdays row should be hidden Known values: false, true.
- `highlightToday`: `false | true`. Determines whether today should be highlighted with a border Known values: false, true.
- `inputSize`: `string`. HTML `size` attribute for the input element (number of visible characters)
- `inputWrapperOrder`: `("input" | "label" | "description" | "error")[]`. Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.
- `label`: `React.ReactNode`. Contents of `Input.Label` component. If not set, label is not displayed.
- `labelProps`: `(InputLabelProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Label` component
- `labelSeparator`: `string`. Separator between range value
- `leftSection`: `React.ReactNode`. Content section displayed on the left side of the input
- `leftSectionPointerEvents`: `"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "all" | "fill" | "stroke" | "painted" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke"`. Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). Known values: "-moz-initial", "all", "auto", "fill", "inherit", "initial", "none", "painted", "revert", "revert-layer", "stroke", "unset", "visible", "visibleFill", "visiblePainted", "visibleStroke".
- `leftSectionProps`: `React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>`. Props passed down to the `leftSection` element
- `leftSectionWidth`: `Property.Width<string | number>`. Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height
- `level`: `"month" | "year" | "decade"`. Current displayed level (controlled) Known values: "decade", "month", "year".
- `loading`: `false | true`. Displays loading indicator in the left or right section Known values: false, true.
- `loadingPosition`: `"left" | "right"`. Position of the loading indicator Known values: "left", "right".
- `locale`: `string`. Dayjs locale, defaults to value defined in DatesProvider
- `maxDate`: `string | Date`. Maximum possible date in `YYYY-MM-DD` format or Date object
- `maxLevel`: `"month" | "year" | "decade"`.  Known values: "decade", "month", "year".
- `minDate`: `string | Date`. Minimum possible date in `YYYY-MM-DD` format or Date object
- `nextIcon`: `React.ReactNode`. Change next icon
- `nextLabel`: `string`. Next button `aria-label`
- `numberOfColumns`: `number`. Number of columns displayed next to each other
- `pointer`: `false | true`. Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component="button"` for Select/DatePicker). Known values: false, true.
- `popoverProps`: `Partial<Omit<PopoverProps, "children">>`. Props passed down to `Popover` component
- `presets`: `DatePickerPreset<Type>[]`. Predefined values to pick from
- `previousIcon`: `React.ReactNode`. Change previous icon
- `previousLabel`: `string`. Previous button `aria-label`
- `rightSection`: `React.ReactNode`. Content section displayed on the right side of the input
- `rightSectionPointerEvents`: `"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "all" | "fill" | "stroke" | "painted" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke"`. Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). Known values: "-moz-initial", "all", "auto", "fill", "inherit", "initial", "none", "painted", "revert", "revert-layer", "stroke", "unset", "visible", "visibleFill", "visiblePainted", "visibleStroke".
- `rightSectionProps`: `React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>`. Props passed down to the `rightSection` element
- `rightSectionWidth`: `Property.Width<string | number>`. Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height
- `size`: `"xs" | "sm" | "md" | "lg" | "xl"`. Component size Known values: "lg", "md", "sm", "xl", "xs".
- `sortDates`: `false | true`. Determines whether dates values should be sorted before `onChange` call, only applicable with type="multiple" Known values: false, true.
- `success`: `React.ReactNode`. Contents of `Input.Success` component. If not set, success is not displayed.
- `successProps`: `(InputSuccessProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Success` component
- `type`: `DatePickerType | Type`. Picker type: range, multiple or default Known values: "default", "multiple", "range".
- `unstyled`: `false | true`.  Known values: false, true.
- `value`: `DatePickerValue<Type, DateValue>`. Value for controlled component
- `valueFormat`: `string`. `dayjs` format for input value
- `variant`: `(string & {}) | InputVariant`.  Known values: "default", "filled", "unstyled".
- `weekendDays`: `DayOfWeek[]`. Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider`.
- `withAsterisk`: `false | true`. If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. Known values: false, true.
- `withCellSpacing`: `false | true`. Determines whether controls should be separated Known values: false, true.
- `withErrorStyles`: `false | true`. Determines whether the input should have red border and red text color when the `error` prop is set Known values: false, true.
- `withNativeLevelSelect`: `false | true`. Determines whether level select controls should be rendered as native `<select>` elements Known values: false, true.
- `withSuccessStyles`: `false | true`. Determines whether the input should have green border when the `success` prop is set Known values: false, true.
- `withWeekNumbers`: `false | true`. Determines whether week numbers should be displayed Known values: false, true.
- `wrapperProps`: `WrapperProps`. Props passed down to the root element
- `yearsSelectRange`: `[number, number]`. Year range for native level select, tuple of `[startYear, endYear]`. Defaults to `[currentYear - 100, currentYear + 50]` or values derived from `minDate`/`maxDate` if set.

- `dropdownType` is blocked: Modal picker mode escapes the widget overlay boundary
- `modalProps` is blocked: Modal picker configuration escapes the widget overlay boundary
- Include a textual date when the visual calendar carries meaning.

[Upstream documentation for DatePickerInput](https://mantine.dev/dates/date-picker-input/)

## DateTimePicker

@mantine/dates; dates; safety: wrapped.

Bind a temporary string input with `bind`. Initialize with `defaultValue`; reset with `resetKey`.

- `allowSingleDateInRange`: `(Type extends "range" ? boolean : never)`. Determines whether a single day can be selected as range, applicable only when type="range"
- `ariaLabels`: `CalendarAriaLabels`. `aria-label` attributes for controls on different levels
- `attributes`: `{ input?: Record<string, any>; label?: Record<string, any>; section?: Record<string, any>; root?: Record<string, any>; ... 38 more ...; rangeInfo?: Record<...>; }`.
- `clearButtonProps`: `React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>`. Props passed down to the clear button
- `clearSectionMode`: `"both" | "rightSection" | "clear"`. Determines how the clear button and rightSection are rendered Known values: "both", "clear", "rightSection".
- `clearable`: `false | true`. If set, clear button is displayed in the `rightSection` when the component has value. Ignored if `rightSection` prop is set. Known values: false, true.
- `color`: `string`.
- `columnsToScroll`: `number`. Number of columns to scroll with next/prev buttons, same as `numberOfColumns` if not set explicitly
- `date`: `string | Date`. Displayed date in controlled mode
- `defaultDate`: `string | Date`. Initial displayed date in uncontrolled mode
- `defaultLevel`: `"month" | "year" | "decade"`. Initial displayed level in uncontrolled mode Known values: "decade", "month", "year".
- `defaultTimeValue`: `string`. Default time value in HH:mm` or `HH:mm:ss` format. Assigned to time when date is selected.
- `defaultValue`: `DatePickerValue<Type, DateValue>`. Uncontrolled component default value
- `description`: `React.ReactNode`. Contents of `Input.Description` component. If not set, description is not displayed.
- `descriptionProps`: `(InputDescriptionProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Description` component
- `endTimePickerProps`: `Omit<TimePickerProps, "value" | "defaultValue">`. Props passed down to the end time `TimePicker` component in range mode
- `error`: `React.ReactNode`. Contents of `Input.Error` component. If not set, error is not displayed.
- `errorProps`: `(InputErrorProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Error` component
- `firstDayOfWeek`: `0 | 2 | 3 | 4 | 5 | 6 | 1`. Number 0-6, where 0 – Sunday and 6 – Saturday. Known values: 0, 1, 2, 3, 4, 5, 6.
- `fullWidth`: `false | true`. Determines whether the calendar should take the full width of its container Known values: false, true.
- `headerControlsOrder`: `("next" | "previous" | "level")[]`. Controls order
- `hideOutsideDates`: `false | true`. Determines whether outside dates should be hidden Known values: false, true.
- `hideWeekdays`: `false | true`. Determines whether weekdays row should be hidden Known values: false, true.
- `highlightToday`: `false | true`. Determines whether today should be highlighted with a border Known values: false, true.
- `inputSize`: `string`. HTML `size` attribute for the input element (number of visible characters)
- `inputWrapperOrder`: `("input" | "label" | "description" | "error")[]`. Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.
- `label`: `React.ReactNode`. Contents of `Input.Label` component. If not set, label is not displayed.
- `labelProps`: `(InputLabelProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Label` component
- `labelSeparator`: `string`. Separator between range values
- `leftSection`: `React.ReactNode`. Content section displayed on the left side of the input
- `leftSectionPointerEvents`: `"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "all" | "fill" | "stroke" | "painted" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke"`. Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). Known values: "-moz-initial", "all", "auto", "fill", "inherit", "initial", "none", "painted", "revert", "revert-layer", "stroke", "unset", "visible", "visibleFill", "visiblePainted", "visibleStroke".
- `leftSectionProps`: `React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>`. Props passed down to the `leftSection` element
- `leftSectionWidth`: `Property.Width<string | number>`. Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height
- `level`: `"month" | "year" | "decade"`. Current displayed level displayed in controlled mode Known values: "decade", "month", "year".
- `loading`: `false | true`. Displays loading indicator in the left or right section Known values: false, true.
- `loadingPosition`: `"left" | "right"`. Position of the loading indicator Known values: "left", "right".
- `locale`: `string`. Dayjs locale, defaults to value defined in DatesProvider
- `maxDate`: `string | Date`. Maximum possible date in `YYYY-MM-DD` format or Date object
- `maxLevel`: `"month" | "year" | "decade"`. Max level that user can go up to Known values: "decade", "month", "year".
- `minDate`: `string | Date`. Minimum possible date in `YYYY-MM-DD` format or Date object
- `nextIcon`: `React.ReactNode`. Change next icon
- `nextLabel`: `string`. Next button `aria-label`
- `numberOfColumns`: `number`. Number of columns displayed next to each other
- `pointer`: `false | true`. Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component="button"` for Select/DatePicker). Known values: false, true.
- `popoverProps`: `Partial<Omit<PopoverProps, "children">>`. Props passed down to `Popover` component
- `presets`: `DatePickerPreset<Type>[]`. Presets values
- `previousIcon`: `React.ReactNode`. Change previous icon
- `previousLabel`: `string`. Previous button `aria-label`
- `rightSection`: `React.ReactNode`. Content section displayed on the right side of the input
- `rightSectionPointerEvents`: `"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "all" | "fill" | "stroke" | "painted" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke"`. Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). Known values: "-moz-initial", "all", "auto", "fill", "inherit", "initial", "none", "painted", "revert", "revert-layer", "stroke", "unset", "visible", "visibleFill", "visiblePainted", "visibleStroke".
- `rightSectionProps`: `React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>`. Props passed down to the `rightSection` element
- `rightSectionWidth`: `Property.Width<string | number>`. Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height
- `size`: `"xs" | "sm" | "md" | "lg" | "xl"`. Component size Known values: "lg", "md", "sm", "xl", "xs".
- `sortDates`: `false | true`. Determines whether dates values should be sorted before `onChange` call, only applicable with type="multiple" Known values: false, true.
- `submitButtonProps`: `(ActionIconProps & React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement>)`. Props passed down to the submit button
- `success`: `React.ReactNode`. Contents of `Input.Success` component. If not set, success is not displayed.
- `successProps`: `(InputSuccessProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Success` component
- `timePickerProps`: `Omit<TimePickerProps, "value" | "defaultValue">`. Props passed down to `TimePicker` component
- `type`: `Type`. Picker type: range or default
- `unstyled`: `false | true`.  Known values: false, true.
- `value`: `DatePickerValue<Type, DateValue>`. Controlled component value
- `variant`: `(string & {}) | InputVariant`.  Known values: "default", "filled", "unstyled".
- `weekendDays`: `DayOfWeek[]`. Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider`.
- `withAsterisk`: `false | true`. If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. Known values: false, true.
- `withCellSpacing`: `false | true`. Determines whether controls should be separated Known values: false, true.
- `withErrorStyles`: `false | true`. Determines whether the input should have red border and red text color when the `error` prop is set Known values: false, true.
- `withNativeLevelSelect`: `false | true`. Determines whether level select controls should be rendered as native `<select>` elements Known values: false, true.
- `withSeconds`: `false | true`. Determines whether the seconds input should be displayed Known values: false, true.
- `withSuccessStyles`: `false | true`. Determines whether the input should have green border when the `success` prop is set Known values: false, true.
- `withWeekNumbers`: `false | true`. Determines whether week numbers should be displayed Known values: false, true.
- `wrapperProps`: `WrapperProps`. Props passed down to the root element
- `yearsSelectRange`: `[number, number]`. Year range for native level select, tuple of `[startYear, endYear]`. Defaults to `[currentYear - 100, currentYear + 50]` or values derived from `minDate`/`maxDate` if set.

- `dropdownType` is blocked: Modal picker mode escapes the widget overlay boundary
- `modalProps` is blocked: Modal picker configuration escapes the widget overlay boundary
- Include a textual date when the visual calendar carries meaning.

[Upstream documentation for DateTimePicker](https://mantine.dev/dates/date-time-picker/)

## DatesProvider

@mantine/dates; blocked; safety: denied.

Unavailable: Replaces a Homarr-owned provider boundary

[Upstream documentation for DatesProvider](https://mantine.dev/dates/dates-provider/)

## Day

@mantine/dates; dates; safety: wrapped.

- `attributes`: `{ day?: Record<string, any>; }`.
- `color`: `string`.
- `date`: `string`. Required. Date that is displayed in `YYYY-MM-DD` format
- `firstInRange`: `false | true`. Determines whether the day is first in range selection Known values: false, true.
- `fullWidth`: `false | true`. Determines whether the day should take the full width of its cell Known values: false, true.
- `highlightToday`: `false | true`. Determines whether today should be highlighted with a border Known values: false, true.
- `inRange`: `false | true`. Determines whether the day is selected in range Known values: false, true.
- `lastInRange`: `false | true`. Determines whether the day is last in range selection Known values: false, true.
- `outside`: `false | true`. Determines whether the day is outside of the current month Known values: false, true.
- `selected`: `false | true`. Determines whether the day is selected Known values: false, true.
- `size`: `"xs" | "sm" | "md" | "lg" | "xl"`. Control width and height of the day Known values: "lg", "md", "sm", "xl", "xs".
- `static`: `false | true`. Determines which element is used as root, `'button'` by default, `'div'` if static prop is set Known values: false, true.
- `type`: `"button" | "submit" | "reset"`.  Known values: "button", "reset", "submit".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `weekend`: `false | true`. Determines whether the day is considered to be a weekend Known values: false, true.

- Include a textual date when the visual calendar carries meaning.

[Upstream documentation for Day](https://mantine.dev/dates/day/)

## DecadeLevel

@mantine/dates; dates; safety: wrapped.

- `attributes`: `{ calendarHeader?: Record<string, any>; calendarHeaderControl?: Record<string, any>; calendarHeaderLevel?: Record<string, any>; ... 5 more ...; yearsListRow?: Record<...>; }`.
- `color`: `string`.
- `decade`: `string`. Required. Displayed decade
- `fullWidth`: `false | true`. Determines whether the calendar should take the full width of its container Known values: false, true.
- `headerControlsOrder`: `("next" | "previous" | "level")[]`. Controls order
- `levelControlAriaLabel`: `string`. Level control `aria-label`
- `locale`: `string`. Dayjs locale, defaults to value defined in DatesProvider
- `maxDate`: `string | Date`. Maximum possible date in `YYYY-MM-DD` format or Date object
- `minDate`: `string | Date`. Minimum possible date in `YYYY-MM-DD` format or Date object
- `nextDisabled`: `false | true`. Disables next control Known values: false, true.
- `nextIcon`: `React.ReactNode`. Change next icon
- `nextLabel`: `string`. Next button `aria-label`
- `previousDisabled`: `false | true`. Disables previous control Known values: false, true.
- `previousIcon`: `React.ReactNode`. Change previous icon
- `previousLabel`: `string`. Previous button `aria-label`
- `size`: `"xs" | "sm" | "md" | "lg" | "xl"`. Component size Known values: "lg", "md", "sm", "xl", "xs".
- `styles`: `Partial<Record<string, React.CSSProperties>>`.
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `withCellSpacing`: `false | true`. Determines whether controls should be separated Known values: false, true.
- `withNativeLevelSelect`: `false | true`. Determines whether level select controls should be rendered as native `<select>` elements Known values: false, true.
- `withNext`: `false | true`. Determines whether next control should be rendered Known values: false, true.
- `withPrevious`: `false | true`. Determines whether previous control should be rendered Known values: false, true.
- `yearsSelectRange`: `[number, number]`. Year range for native level select, tuple of `[startYear, endYear]`. Defaults to `[currentYear - 100, currentYear + 50]` or values derived from `minDate`/`maxDate` if set.

- Include a textual date when the visual calendar carries meaning.

[Upstream documentation for DecadeLevel](https://mantine.dev/dates/decade-level/)

## DecadeLevelGroup

@mantine/dates; dates; safety: wrapped.

- `attributes`: `{ calendarHeader?: Record<string, any>; calendarHeaderControl?: Record<string, any>; calendarHeaderLevel?: Record<string, any>; ... 6 more ...; yearsListRow?: Record<...>; }`.
- `color`: `string`.
- `decade`: `string`. Required. Displayed decade
- `fullWidth`: `false | true`. Determines whether the calendar should take the full width of its container Known values: false, true.
- `headerControlsOrder`: `("next" | "previous" | "level")[]`. Controls order
- `locale`: `string`. Dayjs locale, defaults to value defined in DatesProvider
- `maxDate`: `string | Date`. Maximum possible date in `YYYY-MM-DD` format or Date object
- `minDate`: `string | Date`. Minimum possible date in `YYYY-MM-DD` format or Date object
- `nextDisabled`: `false | true`. Disables next control Known values: false, true.
- `nextIcon`: `React.ReactNode`. Change next icon
- `nextLabel`: `string`. Next button `aria-label`
- `numberOfColumns`: `number`. Number of columns to display next to each other
- `previousDisabled`: `false | true`. Disables previous control Known values: false, true.
- `previousIcon`: `React.ReactNode`. Change previous icon
- `previousLabel`: `string`. Previous button `aria-label`
- `size`: `"xs" | "sm" | "md" | "lg" | "xl"`. Component size Known values: "lg", "md", "sm", "xl", "xs".
- `styles`: `Partial<Record<string, React.CSSProperties>>`.
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `withCellSpacing`: `false | true`. Determines whether controls should be separated Known values: false, true.
- `withNativeLevelSelect`: `false | true`. Determines whether level select controls should be rendered as native `<select>` elements Known values: false, true.
- `yearsSelectRange`: `[number, number]`. Year range for native level select, tuple of `[startYear, endYear]`. Defaults to `[currentYear - 100, currentYear + 50]` or values derived from `minDate`/`maxDate` if set.

- Include a textual date when the visual calendar carries meaning.

[Upstream documentation for DecadeLevelGroup](https://mantine.dev/dates/decade-level-group/)

## Dialog

@mantine/core; blocked; safety: denied.

Unavailable: Escapes the widget layout and focus boundary

[Upstream documentation for Dialog](https://mantine.dev/core/dialog/)

## DirectionProvider

@mantine/core; blocked; safety: denied.

Unavailable: Replaces a Homarr-owned provider boundary

[Upstream documentation for DirectionProvider](https://mantine.dev/core/direction-provider/)

## Divider

@mantine/core; layout; safety: wrapped.

- `attributes`: `{ label?: Record<string, any>; root?: Record<string, any>; }`.
- `color`: `DefaultMantineColor`. Key of `theme.colors` or any valid CSS color value Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `label`: `React.ReactNode`. Divider label, visible only with `orientation="horizontal"`
- `labelPosition`: `"center" | "left" | "right"`. Label position Known values: "center", "left", "right".
- `orientation`: `"horizontal" | "vertical"`. Divider orientation Known values: "horizontal", "vertical".
- `size`: `number | MantineSize | (string & {})`. Controls width/height (depends on orientation) Known values: "lg", "md", "sm", "xl", "xs".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `(string & {}) | DividerVariant`.  Known values: "dashed", "dotted", "solid".

- Keep visual order consistent with reading order.

[Upstream documentation for Divider](https://mantine.dev/core/divider/)

## DonutChart

@mantine/charts; charts; safety: wrapped.

- `accessibilityLayer`: `false | true`. Determines whether the chart should be keyboard-navigable with the recharts accessibility layer, `true` by default Known values: false, true.
- `attributes`: `{ label?: Record<string, any>; legend?: Record<string, any>; root?: Record<string, any>; tooltip?: Record<string, any>; ... 9 more ...; tooltipBody?: Record<...>; }`.
- `chartLabel`: `string | number`. Chart label, displayed in the center of the chart
- `color`: `string`.
- `data`: `DonutChartCell[]`. Required. Data used to render chart
- `endAngle`: `number`. Controls angle at which charts ends. Set to `0` to render the chart as semicircle.
- `labelColor`: `DefaultMantineColor`. Controls text color of all labels, by default depends on color scheme Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `labelsType`: `"value" | "name" | "percent"`. Type of labels to display, `'value'` by default Known values: "name", "percent", "value".
- `legendProps`: `Omit<LegendProps, "ref">`. Props passed down to recharts `Legend` component
- `paddingAngle`: `number`. Controls padding between segments
- `pieChartProps`: `(PolarChartProps<unknown> & { ref?: React.Ref<SVGSVGElement>; })`. Props passed down to recharts `PieChart` component
- `pieProps`: `Partial<Omit<PieProps, "ref">>`. Props passed down to recharts `Pie` component
- `size`: `number`. Controls chart width and height, height is increased by 40 if `withLabels` prop is set. Cannot be less than `thickness`.
- `startAngle`: `number`. Controls angle at which chart starts. Set to `180` to render the chart as semicircle.
- `strokeColor`: `DefaultMantineColor`. Controls color of the segments stroke, by default depends on color scheme Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `strokeWidth`: `number`. Controls width of segments stroke
- `thickness`: `number`. Controls thickness of the chart segments
- `tooltipAnimationDuration`: `number`. Tooltip animation duration in ms
- `tooltipDataSource`: `"all" | "segment"`. Determines which data is displayed in the tooltip. `'all'` – display all values, `'segment'` – display only hovered segment. Known values: "all", "segment".
- `tooltipProps`: `Omit<TooltipProps<any, any>, "ref">`. Props passed down to `Tooltip` recharts component
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `withLabels`: `false | true`. Determines whether each segment should have associated label Known values: false, true.
- `withLabelsLine`: `false | true`. Determines whether segments labels should have lines that connect the segment with the label Known values: false, true.
- `withLegend`: `false | true`. Determines whether the legend should be displayed Known values: false, true.
- `withTooltip`: `false | true`. Determines whether the tooltip should be displayed when one of the section is hovered Known values: false, true.

- Include a nearby text summary of the chart data.

[Upstream documentation for DonutChart](https://mantine.dev/charts/donut-chart/)

## Drawer

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

Subcomponents: Drawer.Body, Drawer.CloseButton, Drawer.Content, Drawer.Header, Drawer.Overlay, Drawer.Root, Drawer.Stack, Drawer.Title.

[Upstream documentation for Drawer](https://mantine.dev/core/drawer/)

## Drawer.Body

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for Drawer.Body](https://mantine.dev/core/drawer/)

## Drawer.CloseButton

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for Drawer.CloseButton](https://mantine.dev/core/drawer/)

## Drawer.Content

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for Drawer.Content](https://mantine.dev/core/drawer/)

## Drawer.Header

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for Drawer.Header](https://mantine.dev/core/drawer/)

## Drawer.Overlay

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for Drawer.Overlay](https://mantine.dev/core/drawer/)

## Drawer.Root

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for Drawer.Root](https://mantine.dev/core/drawer/)

## Drawer.Stack

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for Drawer.Stack](https://mantine.dev/core/drawer/)

## Drawer.Title

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for Drawer.Title](https://mantine.dev/core/drawer/)

## DrawerBody

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for DrawerBody](https://mantine.dev/core/drawer-body/)

## DrawerCloseButton

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for DrawerCloseButton](https://mantine.dev/core/drawer-close-button/)

## DrawerContent

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for DrawerContent](https://mantine.dev/core/drawer-content/)

## DrawerHeader

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for DrawerHeader](https://mantine.dev/core/drawer-header/)

## DrawerOverlay

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for DrawerOverlay](https://mantine.dev/core/drawer-overlay/)

## DrawerRoot

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for DrawerRoot](https://mantine.dev/core/drawer-root/)

## DrawerStack

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for DrawerStack](https://mantine.dev/core/drawer-stack/)

## DrawerTitle

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for DrawerTitle](https://mantine.dev/core/drawer-title/)

## EmptyState

@mantine/core; content; safety: wrapped.

Subcomponents: EmptyState.Actions, EmptyState.Description, EmptyState.Indicator, EmptyState.Title.

- `align`: `"center" | "left" | "right"`. Content alignment. `center` stacks the content in a centered column, `left`/`right` place the indicator on the side with the content next to it Known values: "center", "left", "right".
- `attributes`: `{ body?: Record<string, any>; title?: Record<string, any>; root?: Record<string, any>; description?: Record<string, any>; indicator?: Record<...>; actions?: Record<...>; }`.
- `color`: `DefaultMantineColor`. Key of `theme.colors` or any valid CSS color, used by `filled` and `light` variants Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `description`: `React.ReactNode`. Description content, rendered inside `EmptyState.Description`
- `icon`: `React.ReactNode`. Icon or illustration, rendered inside `EmptyState.Indicator`
- `size`: `"xs" | "sm" | "md" | "lg" | "xl"`. Controls indicator size, gap between elements and font sizes of title and description Known values: "lg", "md", "sm", "xl", "xs".
- `title`: `React.ReactNode`. Title content, rendered inside `EmptyState.Title`
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `"filled" | "light"`. Controls the indicator appearance. `filled` and `light` display a colored circular background behind the icon. If not set, the icon is displayed with dimmed color Known values: "filled", "light".
- `withIndicatorBackground`: `false | true`. If set, a neutral circular background is displayed behind the indicator. Setting `variant` always displays a colored background regardless of this prop Known values: false, true.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for EmptyState](https://mantine.dev/core/empty-state/)

## EmptyState.Actions

@mantine/core; content; safety: wrapped.

- `color`: `string`.
- `styles`: `Partial<Record<"actions", CSSProperties>>`.
- `variant`: `string`.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for EmptyState.Actions](https://mantine.dev/core/empty-state/)

## EmptyState.Description

@mantine/core; content; safety: wrapped.

- `color`: `string`.
- `styles`: `Partial<Record<"description", CSSProperties>>`.
- `variant`: `string`.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for EmptyState.Description](https://mantine.dev/core/empty-state/)

## EmptyState.Indicator

@mantine/core; content; safety: wrapped.

- `color`: `string`.
- `styles`: `Partial<Record<"indicator", CSSProperties>>`.
- `variant`: `string`.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for EmptyState.Indicator](https://mantine.dev/core/empty-state/)

## EmptyState.Title

@mantine/core; content; safety: wrapped.

- `color`: `string`.
- `order`: `2 | 3 | 4 | 5 | 6 | 1`. Heading order, renders the title as `h1`–`h6` element. By default, the title is rendered as a `div` without semantic heading level Known values: 1, 2, 3, 4, 5, 6.
- `styles`: `Partial<Record<"title", CSSProperties>>`.
- `variant`: `string`.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for EmptyState.Title](https://mantine.dev/core/empty-state/)

## EmptyStateActions

@mantine/core; content; safety: wrapped.

- `color`: `string`.
- `styles`: `Partial<Record<"actions", CSSProperties>>`.
- `variant`: `string`.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for EmptyStateActions](https://mantine.dev/core/empty-state-actions/)

## EmptyStateDescription

@mantine/core; content; safety: wrapped.

- `color`: `string`.
- `styles`: `Partial<Record<"description", CSSProperties>>`.
- `variant`: `string`.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for EmptyStateDescription](https://mantine.dev/core/empty-state-description/)

## EmptyStateIndicator

@mantine/core; content; safety: wrapped.

- `color`: `string`.
- `styles`: `Partial<Record<"indicator", CSSProperties>>`.
- `variant`: `string`.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for EmptyStateIndicator](https://mantine.dev/core/empty-state-indicator/)

## EmptyStateTitle

@mantine/core; content; safety: wrapped.

- `color`: `string`.
- `order`: `2 | 3 | 4 | 5 | 6 | 1`. Heading order, renders the title as `h1`–`h6` element. By default, the title is rendered as a `div` without semantic heading level Known values: 1, 2, 3, 4, 5, 6.
- `styles`: `Partial<Record<"title", CSSProperties>>`.
- `variant`: `string`.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for EmptyStateTitle](https://mantine.dev/core/empty-state-title/)

## Fieldset

@mantine/core; layout; safety: wrapped.

- `attributes`: `{ legend?: Record<string, any>; root?: Record<string, any>; }`.
- `color`: `string`.
- `legend`: `React.ReactNode`. Fieldset legend
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `(string & {}) | FieldsetVariant`.  Known values: "default", "filled", "unstyled".

- Keep visual order consistent with reading order.

[Upstream documentation for Fieldset](https://mantine.dev/core/fieldset/)

## FileButton

@mantine/core; blocked; safety: denied.

Unavailable: Requests local file-system access

[Upstream documentation for FileButton](https://mantine.dev/core/file-button/)

## FileInput

@mantine/core; blocked; safety: denied.

Unavailable: Requests local file-system access

[Upstream documentation for FileInput](https://mantine.dev/core/file-input/)

## FlatTreeNode

@mantine/core; content; safety: wrapped.

- `checkOnSpace`: `false | true`. If set, tree node is checked on space key press Known values: false, true.
- `expandOnClick`: `false | true`. If set, tree node with children is expanded on click Known values: false, true.
- `expandOnSpace`: `false | true`. If set, tree node with children is expanded on space key press Known values: false, true.
- `expanded`: `false | true`. Required. Whether the node is expanded Known values: false, true.
- `hasChildren`: `false | true`. Required. Whether the node has children Known values: false, true.
- `level`: `number`. Required. Nesting level of the node, starts at 1
- `linesPath`: `FlatTreeLineState[]`. Line state per ancestor + own level, computed by `flattenTreeData`. When provided and the tree root has `data-with-lines`, connector lines are rendered.
- `node`: `TreeNodeData`. Required. Node data from tree data
- `parent`: `null | string`. Required. Value of the parent node, `null` for root nodes
- `selectOnClick`: `false | true`. If set, tree node is selected on click Known values: false, true.
- `style`: `React.CSSProperties`. Style to apply to the root element, used for virtualizer positioning
- `tree`: `UseTreeReturnType`. Required. Tree controller instance, return value of `useTree` hook

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for FlatTreeNode](https://mantine.dev/core/flat-tree-node/)

## Flex

@mantine/core; layout; safety: wrapped.

- `align`: `StyleProp<Property.AlignItems>`. `align-items` CSS property Known values: "-moz-initial", "anchor-center", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "normal", "revert", "revert-layer", "self-end", "self-start", "start", "stretch", "unset".
- `attributes`: `{ root?: Record<string, any>; }`.
- `color`: `string`.
- `columnGap`: `StyleProp<MantineSpacing>`. `column-gap` CSS property Known values: "lg", "md", "sm", "xl", "xs".
- `direction`: `StyleProp<Property.FlexDirection>`. `flex-direction` CSS property Known values: "-moz-initial", "column", "column-reverse", "inherit", "initial", "revert", "revert-layer", "row", "row-reverse", "unset".
- `gap`: `StyleProp<MantineSpacing>`. `gap` CSS property Known values: "lg", "md", "sm", "xl", "xs".
- `justify`: `StyleProp<Property.JustifyContent>`. `justify-content` CSS property Known values: "-moz-initial", "center", "end", "flex-end", "flex-start", "inherit", "initial", "left", "normal", "revert", "revert-layer", "right", "space-around", "space-between", "space-evenly", "start", "stretch", "unset".
- `rowGap`: `StyleProp<MantineSpacing>`. `row-gap` CSS property Known values: "lg", "md", "sm", "xl", "xs".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `wrap`: `StyleProp<Property.FlexWrap>`. `flex-wrap` CSS property Known values: "-moz-initial", "inherit", "initial", "nowrap", "revert", "revert-layer", "unset", "wrap", "wrap-reverse".

- Keep visual order consistent with reading order.

[Upstream documentation for Flex](https://mantine.dev/core/flex/)

## FloatingArrow

@mantine/core; content; safety: wrapped.

- `arrowOffset`: `number`. Required.
- `arrowPosition`: `"center" | "side" | "merge"`. Required.  Known values: "center", "merge", "side".
- `arrowRadius`: `number`. Required.
- `arrowSize`: `number`. Required.
- `arrowX`: `number`.
- `arrowY`: `number`.
- `color`: `string`.
- `position`: `"left" | "right" | "bottom" | "top" | "left-end" | "left-start" | "right-end" | "right-start" | "bottom-end" | "bottom-start" | "top-end" | "top-start"`. Required.  Known values: "bottom", "bottom-end", "bottom-start", "left", "left-end", "left-start", "right", "right-end", "right-start", "top", "top-end", "top-start".
- `visible`: `false | true`.  Known values: false, true.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for FloatingArrow](https://mantine.dev/core/floating-arrow/)

## FloatingIndicator

@mantine/core; layout; safety: wrapped.

- `attributes`: `{ root?: Record<string, any>; }`.
- `color`: `string`.
- `displayAfterTransitionEnd`: `false | true`. Controls whether the indicator should be hidden initially and displayed after the parent's transition ends. Set to `true` when the parent container has CSS transitions (e.g., `transform: scale()`) to prevent the indicator from appearing at the wrong position during the parent's animation. Known values: false, true.
- `parent`: `HTMLElement | null`. Parent container element that must have `position: relative`. The indicator's position is calculated relative to this element.
- `target`: `HTMLElement | null`. Target element over which the indicator is displayed. The indicator will be positioned to match the target's size and position.
- `transitionDuration`: `string | number`. Transition duration in ms
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.

- Keep visual order consistent with reading order.

[Upstream documentation for FloatingIndicator](https://mantine.dev/core/floating-indicator/)

## FloatingWindow

@mantine/core; blocked; safety: denied.

Unavailable: Creates a separate browser window

Subcomponents: FloatingWindow.ResizeHandle.

[Upstream documentation for FloatingWindow](https://mantine.dev/core/floating-window/)

## FloatingWindow.ResizeHandle

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for FloatingWindow.ResizeHandle](https://mantine.dev/core/floating-window/)

## FocusTrap

@mantine/core; blocked; safety: denied.

Unavailable: Can capture focus outside the widget interaction flow

Subcomponents: FocusTrap.InitialFocus.

[Upstream documentation for FocusTrap](https://mantine.dev/core/focus-trap/)

## FocusTrap.InitialFocus

@mantine/core; blocked; safety: denied.

Unavailable: Can capture focus outside the widget interaction flow

[Upstream documentation for FocusTrap.InitialFocus](https://mantine.dev/core/focus-trap/)

## FocusTrapInitialFocus

@mantine/core; blocked; safety: denied.

Unavailable: Can capture focus outside the widget interaction flow

[Upstream documentation for FocusTrapInitialFocus](https://mantine.dev/core/focus-trap-initial-focus/)

## FunnelChart

@mantine/charts; charts; safety: wrapped.

- `accessibilityLayer`: `false | true`. Determines whether the chart should be keyboard-navigable with the recharts accessibility layer, `true` by default Known values: false, true.
- `attributes`: `{ legend?: Record<string, any>; root?: Record<string, any>; tooltip?: Record<string, any>; legendItem?: Record<string, any>; ... 8 more ...; tooltipBody?: Record<...>; }`.
- `color`: `string`.
- `data`: `FunnelChartCell[]`. Required. Data used to render chart
- `funnelChartProps`: `(CartesianChartProps<unknown> & { ref?: React.Ref<SVGSVGElement>; })`. Props passed down to recharts `FunnelChart` component
- `funnelProps`: `Partial<Omit<FunnelProps, "ref">>`. Props passed down to recharts `Pie` component
- `labelColor`: `DefaultMantineColor`. Controls text color of all labels Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `labelsPosition`: `"left" | "right" | "inside"`. Controls labels position relative to the segment Known values: "inside", "left", "right".
- `legendProps`: `Omit<LegendProps, "ref">`. Props passed down to recharts `Legend` component
- `size`: `number`. Controls chart width and height
- `strokeColor`: `DefaultMantineColor`. Controls color of the segments stroke, by default depends on color scheme Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `strokeWidth`: `number`. Controls width of segments stroke
- `tooltipAnimationDuration`: `number`. Tooltip animation duration in ms
- `tooltipDataSource`: `"all" | "segment"`. Determines which data is displayed in the tooltip. `'all'` – display all values, `'segment'` – display only hovered segment. Known values: "all", "segment".
- `tooltipProps`: `Omit<TooltipProps<any, any>, "ref">`. Props passed down to `Tooltip` recharts component
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `withLabels`: `false | true`. Determines whether each segment should have associated label Known values: false, true.
- `withLegend`: `false | true`. Determines whether the legend should be displayed Known values: false, true.
- `withTooltip`: `false | true`. Determines whether the tooltip should be displayed when a section is hovered Known values: false, true.

- Include a nearby text summary of the chart data.

[Upstream documentation for FunnelChart](https://mantine.dev/charts/funnel-chart/)

## GaugeChart

@mantine/charts; charts; safety: wrapped.

- `attributes`: `{ label?: Record<string, any>; section?: Record<string, any>; track?: Record<string, any>; root?: Record<string, any>; needle?: Record<...>; }`.
- `color`: `string`.
- `endAngle`: `number`. End angle in degrees,
- `filledColor`: `DefaultMantineColor`. Color of the filled arc when sections are not provided Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `label`: `React.ReactNode`. Label displayed in the center of the gauge
- `max`: `number`. Maximum value of the gauge,
- `min`: `number`. Minimum value of the gauge,
- `radius`: `string | number`.
- `roundCaps`: `false | true`. Whether to round arc endpoints. Not applied to `sections` – rounded caps of adjacent sections would overlap each other. Known values: false, true.
- `sections`: `GaugeChartSection[]`. Threshold sections of the gauge arc, each section is filled from the previous section upper bound to its own `value`. If set, the arc is not filled based on `value`.
- `size`: `number`. Chart size (width and height),
- `startAngle`: `number`. Start angle in degrees,
- `target`: `number`. Value marked on the arc with a line marker, use to display a goal or the current value of a gauge with `sections`
- `targetColor`: `DefaultMantineColor`. Color of the target marker Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `targetSize`: `number`. Thickness of the target marker,
- `thickness`: `number`. Arc thickness in px,
- `trackColor`: `DefaultMantineColor`. Color of the gauge track (unfilled portion) Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `type`: `string`.
- `unstyled`: `false | true`.  Known values: false, true.
- `value`: `number`. Required. Current value to display. Fills the arc from `min` up to `value`, unless `sections` is set – then the arc is colored by thresholds and the value is displayed only in the center label.
- `variant`: `string`.

- Include a nearby text summary of the chart data.

[Upstream documentation for GaugeChart](https://mantine.dev/charts/gauge-chart/)

## Grid

@mantine/core; layout; safety: wrapped.

Subcomponents: Grid.Col.

- `align`: `Property.AlignItems`. Sets `align-items` Known values: "-moz-initial", "anchor-center", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "normal", "revert", "revert-layer", "self-end", "self-start", "start", "stretch", "unset".
- `attributes`: `{ col?: Record<string, any>; root?: Record<string, any>; inner?: Record<string, any>; container?: Record<string, any>; }`.
- `breakpoints`: `GridBreakpoints`. Breakpoints values, only used with `type="container"`
- `color`: `string`.
- `columnGap`: `StyleProp<MantineSpacing>`. Column gap, overrides `gap` for horizontal spacing Known values: "lg", "md", "sm", "xl", "xs".
- `columns`: `number`. Number of columns in each row
- `gap`: `StyleProp<MantineSpacing>`. Gap between columns and rows, key of `theme.spacing` or any valid CSS value Known values: "lg", "md", "sm", "xl", "xs".
- `grow`: `false | true`. If set, columns in the last row expand to fill all available space Known values: false, true.
- `justify`: `Property.JustifyContent`. Sets `justify-content` Known values: "-moz-initial", "center", "end", "flex-end", "flex-start", "inherit", "initial", "left", "normal", "revert", "revert-layer", "right", "space-around", "space-between", "space-evenly", "start", "stretch", "unset".
- `overflow`: `Property.Overflow`. Sets `overflow` CSS property on the root element Known values: "-moz-hidden-unscrollable", "-moz-initial", "auto", "clip", "hidden", "inherit", "initial", "overlay", "revert", "revert-layer", "scroll", "unset", "visible".
- `rowGap`: `StyleProp<MantineSpacing>`. Row gap, overrides `gap` for vertical spacing Known values: "lg", "md", "sm", "xl", "xs".
- `type`: `"media" | "container"`. Type of queries used for responsive styles Known values: "container", "media".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.

- Keep visual order consistent with reading order.

[Upstream documentation for Grid](https://mantine.dev/core/grid/)

## Grid.Col

@mantine/core; layout; safety: wrapped.

- `align`: `StyleProp<Property.AlignSelf>`. Vertical alignment of the column, controls `align-self` CSS property Known values: "-moz-initial", "anchor-center", "auto", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "normal", "revert", "revert-layer", "self-end", "self-start", "start", "stretch", "unset".
- `color`: `string`.
- `offset`: `StyleProp<number>`. Column start offset – number of empty columns before this column
- `order`: `StyleProp<number>`. Column order, use to reorder columns at different viewport sizes
- `span`: `StyleProp<ColSpan>`. Column span Known values: "auto", "content".
- `styles`: `Partial<Record<"col", CSSProperties>>`.
- `variant`: `string`.

- Keep visual order consistent with reading order.

[Upstream documentation for Grid.Col](https://mantine.dev/core/grid/)

## GridCol

@mantine/core; layout; safety: wrapped.

- `align`: `StyleProp<Property.AlignSelf>`. Vertical alignment of the column, controls `align-self` CSS property Known values: "-moz-initial", "anchor-center", "auto", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "normal", "revert", "revert-layer", "self-end", "self-start", "start", "stretch", "unset".
- `color`: `string`.
- `offset`: `StyleProp<number>`. Column start offset – number of empty columns before this column
- `order`: `StyleProp<number>`. Column order, use to reorder columns at different viewport sizes
- `span`: `StyleProp<ColSpan>`. Column span Known values: "auto", "content".
- `styles`: `Partial<Record<"col", CSSProperties>>`.
- `variant`: `string`.

- Keep visual order consistent with reading order.

[Upstream documentation for GridCol](https://mantine.dev/core/grid-col/)

## Group

@mantine/core; layout; safety: wrapped.

- `align`: `Property.AlignItems`. Controls `align-items` CSS property Known values: "-moz-initial", "anchor-center", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "normal", "revert", "revert-layer", "self-end", "self-start", "start", "stretch", "unset".
- `attributes`: `{ root?: Record<string, any>; }`.
- `color`: `string`.
- `gap`: `MantineSpacing`. Key of `theme.spacing` or any valid CSS value for `gap`, numbers are converted to rem Known values: "lg", "md", "sm", "xl", "xs".
- `grow`: `false | true`. Determines whether each child element should have `flex-grow: 1` style Known values: false, true.
- `justify`: `Property.JustifyContent`. Controls `justify-content` CSS property Known values: "-moz-initial", "center", "end", "flex-end", "flex-start", "inherit", "initial", "left", "normal", "revert", "revert-layer", "right", "space-around", "space-between", "space-evenly", "start", "stretch", "unset".
- `preventGrowOverflow`: `false | true`. Determines whether children should take only dedicated amount of space (`max-width` style is set based on the number of children) Known values: false, true.
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `wrap`: `"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "wrap" | "nowrap" | "wrap-reverse"`. Controls `flex-wrap` CSS property Known values: "-moz-initial", "inherit", "initial", "nowrap", "revert", "revert-layer", "unset", "wrap", "wrap-reverse".

- Keep visual order consistent with reading order.

[Upstream documentation for Group](https://mantine.dev/core/group/)

## HeadlessMantineProvider

@mantine/core; blocked; safety: denied.

Unavailable: Replaces a Homarr-owned provider boundary

[Upstream documentation for HeadlessMantineProvider](https://mantine.dev/core/headless-mantine-provider/)

## Heatmap

@mantine/charts; charts; safety: wrapped.

- `attributes`: `{ legend?: Record<string, any>; rect?: Record<string, any>; root?: Record<string, any>; weekdayLabel?: Record<string, any>; monthLabel?: Record<...>; legendLabel?: Record<...>; legendRect?: Record<...>; }`.
- `color`: `string`.
- `colors`: `string[]`. Colors array, used to calculate color for each value, by default 4 shades of green colors are used
- `data`: `Record<string, number>`. Required. Heatmap data, key is date in `YYYY-MM-DD` format (interpreted as a UTC calendar day)
- `domain`: `[number, number]`. Heatmap domain, array of 2 numbers, min and max values, calculated from data by default
- `endDate`: `string | Date`. Heatmap end date. Current date by default. Date is normalized to UTC midnight of the intended calendar day.
- `firstDayOfWeek`: `0 | 2 | 3 | 4 | 5 | 6 | 1`. First day of week, 0 – Sunday, 1 – Monday. Known values: 0, 1, 2, 3, 4, 5, 6.
- `fontSize`: `number`. Font size of month and weekday labels
- `gap`: `number`. Gap between rects in px
- `legendLabels`: `[string, string]`. Legend labels, array of 2 elements: [min label, max label]
- `monthLabels`: `string[]`. Month labels, array of 12 elements, can be used for localization
- `monthLabelsPosition`: `"bottom" | "top"`. Month labels position relative to the heatmap Known values: "bottom", "top".
- `monthsLabelsHeight`: `number`. Height of month labels row
- `radius`: `string | number`.
- `rectRadius`: `number`. Rect radius in px
- `rectSize`: `number`. Size of day rect in px
- `splitMonths`: `false | true`. If set, inserts a spacer column between months Known values: false, true.
- `startDate`: `string | Date`. Heatmap start date. Current date - 1 year by default. Date is normalized to UTC midnight of the intended calendar day.
- `tooltipProps`: `Partial<TooltipFloatingProps>`. Props passed down to the `Tooltip.Floating` component
- `type`: `string`.
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `weekdayLabels`: `string[]`. Weekday labels, array of 7 elements, can be used for localization
- `weekdaysLabelsWidth`: `number`. Width of weekday labels column
- `withLegend`: `false | true`. If set, legend with color levels is displayed below the heatmap Known values: false, true.
- `withMonthLabels`: `false | true`. If set, month labels are displayed Known values: false, true.
- `withOutsideDates`: `false | true`. If set, trailing dates that do not fall into the given `startDate` – `endDate` range are displayed to fill empty space. Known values: false, true.
- `withTooltip`: `false | true`. If set, tooltip is displayed on rect hover Known values: false, true.
- `withWeekdayLabels`: `false | true`. If set, weekday labels are displayed Known values: false, true.

- Include a nearby text summary of the chart data.

[Upstream documentation for Heatmap](https://mantine.dev/charts/heatmap/)

## HiddenDatesInput

@mantine/dates; blocked; safety: denied.

Unavailable: Internal date-input primitive

[Upstream documentation for HiddenDatesInput](https://mantine.dev/dates/hidden-dates-input/)

## Highlight

@mantine/core; content; safety: wrapped.

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

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for Highlight](https://mantine.dev/core/highlight/)

## HoverCard

@mantine/core; navigation; safety: wrapped.

Subcomponents: HoverCard.Dropdown, HoverCard.Group, HoverCard.Target.

- `arrowOffset`: `number`. Arrow offset in px
- `arrowPosition`: `"center" | "side" | "merge"`. Arrow position Known values: "center", "merge", "side".
- `arrowRadius`: `number`. Arrow `border-radius` in px
- `arrowSize`: `number`. Arrow size in px
- `attributes`: `{ dropdown?: Record<string, any>; overlay?: Record<string, any>; arrow?: Record<string, any>; }`.
- `clickOutsideEvents`: `string[]`. Events that trigger outside clicks
- `closeDelay`: `number`. Delay in ms before the dropdown closes after mouse leaves the target or dropdown. Overridden by HoverCard.Group delay if used within a group.
- `closeOnClickOutside`: `false | true`. Determines whether dropdown should be closed on outside clicks Known values: false, true.
- `closeOnEscape`: `false | true`. Determines whether dropdown should be closed when `Escape` key is pressed Known values: false, true.
- `defaultOpened`: `false | true`. Initial opened state for uncontrolled component Known values: false, true.
- `floatingStrategy`: `"fixed" | "absolute"`. Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy) Known values: "absolute", "fixed".
- `hideDetached`: `false | true`. If set, the dropdown is hidden when the element is hidden with styles or not visible on the screen Known values: false, true.
- `initiallyOpened`: `false | true`. Initial opened state Known values: false, true.
- `keepMounted`: `false | true`. If set, the dropdown is not unmounted from the DOM when hidden. `display: none` styles are added instead. Known values: false, true.
- `keepMountedMode`: `"activity" | "display-none"`. Controls how the dropdown is hidden when `keepMounted` is set: `'activity'` – hidden with React 19 `Activity` component, `'display-none'` – hidden with `display: none` styles Known values: "activity", "display-none".
- `middlewares`: `PopoverMiddlewares`. Floating ui middlewares to configure position handling
- `offset`: `number | FloatingAxesOffsets`. Offset of the dropdown element
- `openDelay`: `number`. Delay in ms before the dropdown opens after mouse enters the target. Overridden by HoverCard.Group delay if used within a group.
- `overlayProps`: `(OverlayProps & ElementProps<"div">)`. Props passed down to `Overlay` component
- `position`: `"left" | "right" | "bottom" | "top" | "left-end" | "left-start" | "right-end" | "right-start" | "bottom-end" | "bottom-start" | "top-end" | "top-start"`. Dropdown position relative to the target element Known values: "bottom", "bottom-end", "bottom-start", "left", "left-end", "left-start", "right", "right-end", "right-start", "top", "top-end", "top-start".
- `preventPositionChangeWhenVisible`: `false | true`. If `true`, the dropdown picks its side on open (flip runs once, preferring the `position` prop) and then never changes side — scrolling, resizing, and content size changes will not flip the dropdown. The side is recalculated fresh on the next open. Does not affect the `shift` middleware. Set to `false` to keep flip active and allow the dropdown to re-flip on every change. Known values: false, true.
- `returnFocus`: `false | true`. Determines whether focus should be automatically returned to control when dropdown closes Known values: false, true.
- `transitionProps`: `Partial<Omit<TransitionProps, "mounted">>`. Props passed down to the `Transition` component. Use to configure duration and animation type.
- `trapFocus`: `false | true`. Determines whether focus should be trapped within dropdown Known values: false, true.
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `width`: `PopoverWidth`. Dropdown width, or `'target'` to make dropdown width the same as target element
- `withArrow`: `false | true`. Determines whether component should have an arrow Known values: false, true.
- `withOverlay`: `false | true`. Determines whether the overlay should be displayed when the dropdown is opened Known values: false, true.
- `withRoles`: `false | true`. Determines whether dropdown and target elements should have accessible roles Known values: false, true.

- Provide an accessible label for controls without visible text.

[Upstream documentation for HoverCard](https://mantine.dev/core/hover-card/)

## HoverCard.Dropdown

@mantine/core; navigation; safety: wrapped.

- `color`: `string`.
- `styles`: `Partial<Record<PopoverStylesNames, CSSProperties>>`.
- `variant`: `string`.

- Provide an accessible label for controls without visible text.

[Upstream documentation for HoverCard.Dropdown](https://mantine.dev/core/hover-card/)

## HoverCard.Group

@mantine/core; navigation; safety: wrapped.

- `closeDelay`: `number`. Close delay in ms
- `openDelay`: `number`. Open delay in ms

- Provide an accessible label for controls without visible text.

[Upstream documentation for HoverCard.Group](https://mantine.dev/core/hover-card/)

## HoverCard.Target

@mantine/core; navigation; safety: wrapped.

- `eventPropsWrapperName`: `string`. Name of the prop to wrap event listeners in. Use when the target component expects event listeners in a nested object. For example, some components expect `componentProps={{ onMouseEnter, onMouseLeave }}`.
- `popupType`: `string`. Popup accessible type

- Provide an accessible label for controls without visible text.

[Upstream documentation for HoverCard.Target](https://mantine.dev/core/hover-card/)

## HoverCardDropdown

@mantine/core; navigation; safety: wrapped.

- `color`: `string`.
- `styles`: `Partial<Record<PopoverStylesNames, CSSProperties>>`.
- `variant`: `string`.

- Provide an accessible label for controls without visible text.

[Upstream documentation for HoverCardDropdown](https://mantine.dev/core/hover-card-dropdown/)

## HoverCardGroup

@mantine/core; navigation; safety: wrapped.

- `closeDelay`: `number`. Close delay in ms
- `openDelay`: `number`. Open delay in ms

- Provide an accessible label for controls without visible text.

[Upstream documentation for HoverCardGroup](https://mantine.dev/core/hover-card-group/)

## HoverCardTarget

@mantine/core; navigation; safety: wrapped.

- `eventPropsWrapperName`: `string`. Name of the prop to wrap event listeners in. Use when the target component expects event listeners in a nested object. For example, some components expect `componentProps={{ onMouseEnter, onMouseLeave }}`.
- `popupType`: `string`. Popup accessible type

- Provide an accessible label for controls without visible text.

[Upstream documentation for HoverCardTarget](https://mantine.dev/core/hover-card-target/)

## HueSlider

@mantine/core; interaction; safety: wrapped.

- `attributes`: `{ slider?: Record<string, any>; sliderOverlay?: Record<string, any>; thumb?: Record<string, any>; }`.
- `color`: `string`.
- `focusable`: `false | true`. If set, slider thumb can be focused Known values: false, true.
- `size`: `MantineSize | (string & {})`. Slider size Known values: "lg", "md", "sm", "xl", "xs".
- `unstyled`: `false | true`.  Known values: false, true.
- `value`: `number`. Required. Controlled component value
- `variant`: `string`.

- Provide a visible label or aria-label.

[Upstream documentation for HueSlider](https://mantine.dev/core/hue-slider/)

## Image

@mantine/core; content; safety: wrapped.

- `attributes`: `{ root?: Record<string, any>; }`.
- `fallbackSrc`: `string`. Image url used as a fallback if the image cannot be loaded
- `fit`: `"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "contain" | "cover" | "fill" | "scale-down"`. Controls `object-fit` style Known values: "-moz-initial", "contain", "cover", "fill", "inherit", "initial", "none", "revert", "revert-layer", "scale-down", "unset".
- `src`: `unknown`. Image url
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for Image](https://mantine.dev/core/image/)

## Indicator

@mantine/core; content; safety: wrapped.

- `attributes`: `{ root?: Record<string, any>; indicator?: Record<string, any>; }`.
- `autoContrast`: `false | true`. If set, adjusts text color based on background color Known values: false, true.
- `color`: `DefaultMantineColor`. Key of `theme.colors` or any valid CSS color value Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `inline`: `false | true`. Changes container display from block to inline-block, use when wrapping elements with fixed width Known values: false, true.
- `label`: `React.ReactNode`. Label displayed inside the indicator, for example, notification count
- `maxValue`: `number`. Maximum value to display. If label is a number greater than this value, it will be displayed as `{maxValue}+`
- `offset`: `number | { x: number; y: number; }`. Distance in pixels to offset the indicator from its default position, useful for elements with border-radius. Can be a number for uniform offset or an object with `x` and `y` properties for separate horizontal and vertical offsets
- `position`: `"bottom-end" | "bottom-start" | "top-end" | "top-start" | "bottom-center" | "top-center" | "middle-center" | "middle-end" | "middle-start"`. Indicator position relative to the target element Known values: "bottom-center", "bottom-end", "bottom-start", "middle-center", "middle-end", "middle-start", "top-center", "top-end", "top-start".
- `processing`: `false | true`. If set, the indicator has processing animation Known values: false, true.
- `showZero`: `false | true`. Determines whether indicator with label `0` should be displayed Known values: false, true.
- `size`: `string | number`. Indicator width and height
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for Indicator](https://mantine.dev/core/indicator/)

## InlineDateTimePicker

@mantine/dates; dates; safety: wrapped.

Bind a temporary string input with `bind`. Initialize with `defaultValue`; reset with `resetKey`.

- `allowDeselect`: `(Type extends "default" ? boolean : never)`. Determines whether user can deselect the date by clicking on selected item, applicable only when type="default"
- `allowSingleDateInRange`: `(Type extends "range" ? boolean : never)`. Determines whether a single day can be selected as range, applicable only when type="range"
- `ariaLabels`: `CalendarAriaLabels`. `aria-label` attributes for controls on different levels
- `attributes`: `{ root?: Record<string, any>; month?: Record<string, any>; weekday?: Record<string, any>; weekdaysRow?: Record<string, any>; ... 28 more ...; rangeInfo?: Record<...>; }`.
- `color`: `string`.
- `columnsToScroll`: `number`. Number of columns to scroll with next/prev buttons, same as `numberOfColumns` if not set explicitly
- `date`: `string | Date`. Displayed date in controlled mode
- `defaultDate`: `string | Date`. Initial displayed date in uncontrolled mode
- `defaultLevel`: `"month" | "year" | "decade"`. Initial displayed level (uncontrolled) Known values: "decade", "month", "year".
- `defaultTimeValue`: `string`. Default time value in `HH:mm` or `HH:mm:ss` format. Assigned to time when date is selected.
- `defaultValue`: `DatePickerValue<Type, DateValue>`. Default value for uncontrolled component
- `enableKeyboardNavigation`: `false | true`. Enable enhanced keyboard navigation (Ctrl/Cmd + Arrow keys for year navigation, Ctrl/Cmd + Shift + Arrow keys for decade navigation, Y key to open year view) Known values: false, true.
- `endTimePickerProps`: `Omit<TimePickerProps, "value" | "defaultValue">`. Props passed down to the end time `TimePicker` component in range mode
- `firstDayOfWeek`: `0 | 2 | 3 | 4 | 5 | 6 | 1`. Number 0-6, where 0 – Sunday and 6 – Saturday. Known values: 0, 1, 2, 3, 4, 5, 6.
- `fullWidth`: `false | true`. Determines whether the list should take the full width of its container Known values: false, true.
- `headerControlsOrder`: `("next" | "previous" | "level")[]`. Controls order
- `hideOutsideDates`: `false | true`. Determines whether outside dates should be hidden Known values: false, true.
- `hideWeekdays`: `false | true`. Determines whether weekdays row should be hidden Known values: false, true.
- `highlightToday`: `false | true`. Determines whether today should be highlighted with a border Known values: false, true.
- `labelSeparator`: `string`. Separator between range values
- `level`: `"month" | "year" | "decade"`. Current displayed level (controlled) Known values: "decade", "month", "year".
- `locale`: `string`. Dayjs locale, defaults to value defined in DatesProvider
- `maxDate`: `string | Date`. Max date
- `maxLevel`: `"month" | "year" | "decade"`.  Known values: "decade", "month", "year".
- `minDate`: `string | Date`. Min date
- `nextIcon`: `React.ReactNode`. Change next icon
- `nextLabel`: `string`. Next button `aria-label`
- `numberOfColumns`: `number`. Number of columns displayed next to each other
- `presets`: `DatePickerPreset<Type>[]`. Predefined values to pick from
- `previousIcon`: `React.ReactNode`. Change previous icon
- `previousLabel`: `string`. Previous button `aria-label`
- `size`: `"xs" | "sm" | "md" | "lg" | "xl"`. Component size Known values: "lg", "md", "sm", "xl", "xs".
- `submitButtonProps`: `(ActionIconProps & React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement>)`. Props passed down to the submit button
- `timePickerProps`: `Omit<TimePickerProps, "value" | "defaultValue">`. Props passed down to `TimePicker` component
- `type`: `DatePickerType | Type`. Picker type: range, multiple or default Known values: "default", "multiple", "range".
- `unstyled`: `false | true`.  Known values: false, true.
- `value`: `DatePickerValue<Type, DateValue>`. Value for controlled component
- `variant`: `string`.
- `weekendDays`: `DayOfWeek[]`. Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider`.
- `withCellSpacing`: `false | true`. Determines whether controls should be separated Known values: false, true.
- `withNativeLevelSelect`: `false | true`. Determines whether level select controls should be rendered as native `<select>` elements Known values: false, true.
- `withSeconds`: `false | true`. Determines whether the seconds input should be displayed Known values: false, true.
- `withWeekNumbers`: `false | true`. Determines whether week numbers should be displayed Known values: false, true.
- `yearsSelectRange`: `[number, number]`. Year range for native level select, tuple of `[startYear, endYear]`. Defaults to `[currentYear - 100, currentYear + 50]` or values derived from `minDate`/`maxDate` if set.

- Include a textual date when the visual calendar carries meaning.

[Upstream documentation for InlineDateTimePicker](https://mantine.dev/dates/inline-date-time-picker/)

## InlineStyles

@mantine/core; blocked; safety: denied.

Unavailable: Writes unscoped style rules

[Upstream documentation for InlineStyles](https://mantine.dev/core/inline-styles/)

## Input

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

Subcomponents: Input.ClearButton, Input.Description, Input.Error, Input.Label, Input.Placeholder, Input.Success, Input.Wrapper.

[Upstream documentation for Input](https://mantine.dev/core/input/)

## Input.ClearButton

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for Input.ClearButton](https://mantine.dev/core/input/)

## Input.Description

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for Input.Description](https://mantine.dev/core/input/)

## Input.Error

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for Input.Error](https://mantine.dev/core/input/)

## Input.Label

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for Input.Label](https://mantine.dev/core/input/)

## Input.Placeholder

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for Input.Placeholder](https://mantine.dev/core/input/)

## Input.Success

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for Input.Success](https://mantine.dev/core/input/)

## Input.Wrapper

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for Input.Wrapper](https://mantine.dev/core/input/)

## InputBase

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for InputBase](https://mantine.dev/core/input-base/)

## InputClearButton

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for InputClearButton](https://mantine.dev/core/input-clear-button/)

## InputClearSection

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for InputClearSection](https://mantine.dev/core/input-clear-section/)

## InputDescription

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for InputDescription](https://mantine.dev/core/input-description/)

## InputError

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for InputError](https://mantine.dev/core/input-error/)

## InputLabel

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for InputLabel](https://mantine.dev/core/input-label/)

## InputPlaceholder

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for InputPlaceholder](https://mantine.dev/core/input-placeholder/)

## InputSuccess

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for InputSuccess](https://mantine.dev/core/input-success/)

## InputWrapper

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for InputWrapper](https://mantine.dev/core/input-wrapper/)

## JsonInput

@mantine/core; interaction; safety: wrapped.

Bind a temporary string input with `bind`. Initialize with `defaultValue`; reset with `resetKey`.

- `attributes`: `{ input?: Record<string, any>; label?: Record<string, any>; section?: Record<string, any>; root?: Record<string, any>; ... 5 more ...; bottomSection?: Record<...>; }`.
- `autoComplete`: `string`.
- `autosize`: `false | true`. If set, enables textarea height growing with its content Known values: false, true.
- `bottomSection`: `React.ReactNode`. Content rendered at the bottom of the input, inside the border
- `bottomSectionProps`: `React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>`. Props passed down to the `bottomSection` element
- `color`: `string`.
- `defaultValue`: `string`. Uncontrolled component default value
- `description`: `React.ReactNode`. Contents of `Input.Description` component. If not set, description is not displayed.
- `descriptionProps`: `(InputDescriptionProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Description` component
- `error`: `React.ReactNode`. Contents of `Input.Error` component. If not set, error is not displayed.
- `errorProps`: `(InputErrorProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Error` component
- `formatOnBlur`: `false | true`. Determines whether the value should be formatted on blur Known values: false, true.
- `indentSpaces`: `number`. Number of spaces to use as white space for formatting. Passed as the third argument to `serialize` function.
- `inputSize`: `string`. HTML `size` attribute for the input element (number of visible characters)
- `inputWrapperOrder`: `("input" | "label" | "description" | "error")[]`. Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.
- `label`: `React.ReactNode`. Contents of `Input.Label` component. If not set, label is not displayed.
- `labelProps`: `(InputLabelProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Label` component
- `leftSection`: `React.ReactNode`. Content section displayed on the left side of the input
- `leftSectionPointerEvents`: `"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "all" | "fill" | "stroke" | "painted" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke"`. Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). Known values: "-moz-initial", "all", "auto", "fill", "inherit", "initial", "none", "painted", "revert", "revert-layer", "stroke", "unset", "visible", "visibleFill", "visiblePainted", "visibleStroke".
- `leftSectionProps`: `React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>`. Props passed down to the `leftSection` element
- `leftSectionWidth`: `Property.Width<string | number>`. Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height
- `loading`: `false | true`. Displays loading indicator in the left or right section Known values: false, true.
- `loadingPosition`: `"left" | "right"`. Position of the loading indicator Known values: "left", "right".
- `maxRows`: `number`. Maximum rows for autosize textarea to grow, ignored if `autosize` prop is not set
- `minRows`: `number`. Minimum rows of autosize textarea, ignored if `autosize` prop is not set
- `pointer`: `false | true`. Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component="button"` for Select/DatePicker). Known values: false, true.
- `resize`: `"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "block" | "inline" | "both" | "horizontal" | "vertical"`. Controls `resize` CSS property Known values: "-moz-initial", "block", "both", "horizontal", "inherit", "initial", "inline", "none", "revert", "revert-layer", "unset", "vertical".
- `rightSection`: `React.ReactNode`. Content section displayed on the right side of the input
- `rightSectionPointerEvents`: `"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "all" | "fill" | "stroke" | "painted" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke"`. Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). Known values: "-moz-initial", "all", "auto", "fill", "inherit", "initial", "none", "painted", "revert", "revert-layer", "stroke", "unset", "visible", "visibleFill", "visiblePainted", "visibleStroke".
- `rightSectionProps`: `React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>`. Props passed down to the `rightSection` element
- `rightSectionWidth`: `Property.Width<string | number>`. Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height
- `size`: `MantineSize | (string & {})`. Controls input `height`, horizontal `padding`, and `font-size` Known values: "lg", "md", "sm", "xl", "xs".
- `success`: `React.ReactNode`. Contents of `Input.Success` component. If not set, success is not displayed.
- `successProps`: `(InputSuccessProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Success` component
- `unstyled`: `false | true`.  Known values: false, true.
- `validationError`: `React.ReactNode`. Error message shown when the input value is invalid JSON (checked on blur). If not provided, a generic error state is shown. Takes precedence over the `error` prop when validation fails.
- `value`: `string`. Controlled component value
- `variant`: `string`.
- `withAsterisk`: `false | true`. If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. Known values: false, true.
- `withErrorStyles`: `false | true`. Determines whether the input should have red border and red text color when the `error` prop is set Known values: false, true.
- `withSuccessStyles`: `false | true`. Determines whether the input should have green border when the `success` prop is set Known values: false, true.
- `wrapperProps`: `WrapperProps`. Props passed down to the root element

- Provide a visible label or aria-label.

[Upstream documentation for JsonInput](https://mantine.dev/core/json-input/)

## Kbd

@mantine/core; content; safety: wrapped.

- `attributes`: `{ root?: Record<string, any>; }`.
- `color`: `string`.
- `size`: `number | MantineSize | (string & {})`. Controls `font-size` and `padding` Known values: "lg", "md", "sm", "xl", "xs".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for Kbd](https://mantine.dev/core/kbd/)

## LevelsGroup

@mantine/dates; dates; safety: wrapped.

- `attributes`: `{ levelsGroup?: Record<string, any>; }`.
- `color`: `string`.
- `fullWidth`: `false | true`. Determines whether the group should take the full width of its container Known values: false, true.
- `size`: `"xs" | "sm" | "md" | "lg" | "xl"`.  Known values: "lg", "md", "sm", "xl", "xs".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.

- Include a textual date when the visual calendar carries meaning.

[Upstream documentation for LevelsGroup](https://mantine.dev/dates/levels-group/)

## LineChart

@mantine/charts; charts; safety: wrapped.

- `accessibilityLayer`: `false | true`. Determines whether the chart should be keyboard-navigable with the recharts accessibility layer, `true` by default Known values: false, true.
- `activeDotProps`: `MantineChartDotProps`. Props passed down to all active dots. Ignored if `withDots={false}` is set.
- `attributes`: `{ legend?: Record<string, any>; line?: Record<string, any>; grid?: Record<string, any>; root?: Record<string, any>; ... 17 more ...; tooltipBody?: Record<...>; }`.
- `brushProps`: `Omit<BrushProps, "ref">`. Props passed down to the `Brush` component
- `color`: `string`.
- `connectNulls`: `false | true`. Determines whether points with `null` values should be connected Known values: false, true.
- `curveType`: `"step" | "bump" | "linear" | "natural" | "monotone" | "stepBefore" | "stepAfter"`. Type of the curve Known values: "bump", "linear", "monotone", "natural", "step", "stepAfter", "stepBefore".
- `data`: `Record<string, any>[]`. Required. Data used to display chart
- `dataKey`: `string`. Required. Key of the `data` object for x-axis values
- `dotProps`: `MantineChartDotProps`. Props passed down to all dots. Ignored if `withDots={false}` is set.
- `fillOpacity`: `number`. Controls fill opacity of all lines
- `gradientStops`: `LineChartGradientStop[]`. Data used to generate gradient stops
- `gridAxis`: `"none" | "x" | "y" | "xy"`. Specifies which lines should be displayed in the grid, `'x'` by default Known values: "none", "x", "xy", "y".
- `gridColor`: `DefaultMantineColor`. Color of the grid and cursor lines, by default depends on color scheme Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `gridProps`: `Omit<CartesianGridProps, "ref">`. Props passed down to the `CartesianGrid` component
- `legendProps`: `Omit<LegendProps, "ref">`. Props passed down to the `Legend` component
- `lineChartProps`: `(CartesianChartProps<unknown> & { ref?: React.Ref<SVGSVGElement>; })`. Props passed down to recharts `LineChart` component
- `orientation`: `"horizontal" | "vertical"`. Chart orientation, `'horizontal'` by default Known values: "horizontal", "vertical".
- `referenceAreas`: `ChartReferenceAreaProps[]`. Reference areas that should be displayed on the chart
- `referenceDots`: `ChartReferenceDotProps[]`. Reference dots that should be displayed on the chart
- `referenceLines`: `ChartReferenceLineProps[]`. Reference lines that should be displayed on the chart
- `rightYAxisLabel`: `string`. A label to display next to the right y-axis
- `rightYAxisProps`: `Omit<YAxisProps, "ref">`. Props passed down to the `YAxis` recharts component rendered on the right side
- `series`: `LineChartSeries[]`. Required. An array of objects with `name` and `color` keys. Determines which data should be consumed from the `data` array.
- `strokeWidth`: `number`. Stroke width for the chart lines
- `textColor`: `DefaultMantineColor`. Color of the text displayed inside the chart, `'dimmed'` by default Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `tickLine`: `"none" | "x" | "y" | "xy"`. Specifies which axis should have tick line, `'y'` by default Known values: "none", "x", "xy", "y".
- `tooltipAnimationDuration`: `number`. Tooltip position animation duration in ms, `0` by default
- `tooltipProps`: `Omit<TooltipProps<any, any>, "ref">`. Props passed down to the `Tooltip` component
- `type`: `"default" | "gradient"`. Controls styles of the line Known values: "default", "gradient".
- `unit`: `string`. Unit displayed next to each tick in y-axis
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `withBrush`: `false | true`. Determines whether a brush (range selector) should be displayed under the chart, `false` by default Known values: false, true.
- `withDots`: `false | true`. Determines whether dots should be displayed Known values: false, true.
- `withLegend`: `false | true`. Determines whether chart legend should be displayed, `false` by default Known values: false, true.
- `withPointLabels`: `false | true`. Determines whether each point should have associated label Known values: false, true.
- `withRightYAxis`: `false | true`. Determines whether additional y-axis should be displayed on the right side of the chart, `false` by default Known values: false, true.
- `withTooltip`: `false | true`. Determines whether chart tooltip should be displayed, `true` by default Known values: false, true.
- `withXAxis`: `false | true`. Determines whether x-axis should be displayed, `true` by default Known values: false, true.
- `withYAxis`: `false | true`. Determines whether y-axis should be displayed, `true` by default Known values: false, true.
- `xAxisLabel`: `string`. A label to display below the x-axis
- `xAxisProps`: `Omit<XAxisProps, "ref">`. Props passed down to the `XAxis` recharts component
- `yAxisLabel`: `string`. A label to display next to the y-axis
- `yAxisProps`: `Omit<YAxisProps, "ref">`. Props passed down to the `YAxis` recharts component

- Include a nearby text summary of the chart data.

[Upstream documentation for LineChart](https://mantine.dev/charts/line-chart/)

## List

@mantine/core; content; safety: wrapped.

Subcomponents: List.Item.

- `attributes`: `{ root?: Record<string, any>; item?: Record<string, any>; itemLabel?: Record<string, any>; itemWrapper?: Record<string, any>; itemIcon?: Record<...>; }`.
- `center`: `false | true`. Vertically centers list items with their icons Known values: false, true.
- `color`: `string`.
- `icon`: `React.ReactNode`. Icon to replace default list markers. Applied to all items unless overridden on individual List.Item components
- `listStyleType`: `Property.ListStyleType`. Controls CSS `list-style-type` property. Overrides the default list marker style based on list type Known values: "-moz-initial", "inherit", "initial", "none", "revert", "revert-layer", "unset".
- `reversed`: `false | true`. Reverses the order of list items (only works with type="ordered") Known values: false, true.
- `size`: `"xs" | "sm" | "md" | "lg" | "xl"`. Controls `font-size` and `line-height` Known values: "lg", "md", "sm", "xl", "xs".
- `spacing`: `MantineSpacing`. Key of `theme.spacing` or any valid CSS value to set spacing between items Known values: "lg", "md", "sm", "xl", "xs".
- `start`: `number`. Starting value for ordered list numbering (only works with type="ordered")
- `type`: `"ordered" | "unordered"`. List type Known values: "ordered", "unordered".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `withPadding`: `false | true`. Adds extra horizontal padding to the list, useful for nested lists Known values: false, true.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for List](https://mantine.dev/core/list/)

## List.Item

@mantine/core; content; safety: wrapped.

- `color`: `string`.
- `icon`: `React.ReactNode`. Icon to replace item bullet
- `styles`: `Partial<Record<ListItemStylesNames, CSSProperties>>`.
- `variant`: `string`.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for List.Item](https://mantine.dev/core/list/)

## ListItem

@mantine/core; content; safety: wrapped.

- `color`: `string`.
- `icon`: `React.ReactNode`. Icon to replace item bullet
- `styles`: `Partial<Record<ListItemStylesNames, CSSProperties>>`.
- `variant`: `string`.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for ListItem](https://mantine.dev/core/list-item/)

## Loader

@mantine/core; feedback; safety: wrapped.

- `attributes`: `{ root?: Record<string, any>; }`.
- `color`: `DefaultMantineColor`. Key of `theme.colors` or any valid CSS color Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `loaders`: `Partial<Record<(string & {}) | "bars" | "dots" | "oval", MantineLoaderComponent>>`. Object of loaders components, can be customized via default props or inline.
- `radius`: `string | number`.
- `size`: `number | MantineSize | (string & {})`. Controls `width` and `height` of the loader. `Loader` has predefined `xs`-`xl` values. Numbers are converted to rem. Known values: "lg", "md", "sm", "xl", "xs".
- `type`: `(string & {}) | "bars" | "dots" | "oval"`. Loader type, key of `loaders` prop Known values: "bars", "dots", "oval".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.

- Do not rely on color alone to communicate status.

[Upstream documentation for Loader](https://mantine.dev/core/loader/)

## LoadingOverlay

@mantine/core; feedback; safety: wrapped.

- `attributes`: `{ root?: Record<string, any>; loader?: Record<string, any>; overlay?: Record<string, any>; }`.
- `color`: `string`.
- `loaderProps`: `LoaderProps`. Props passed down to `Loader` component
- `overlayProps`: `OverlayProps`. Props passed down to `Overlay` component. Use to customizing blur, opacity, color and other properties.
- `transitionProps`: `Partial<Omit<TransitionProps, "mounted">>`. Props passed down to `Transition` component. Set `duration` to create custom transition or override default transition.
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `visible`: `false | true`. Controls overlay visibility. Typically used with state (useState, useDisclosure). Known values: false, true.

- Do not rely on color alone to communicate status.

[Upstream documentation for LoadingOverlay](https://mantine.dev/core/loading-overlay/)

## MantineProvider

@mantine/core; blocked; safety: denied.

Unavailable: Replaces a Homarr-owned provider boundary

[Upstream documentation for MantineProvider](https://mantine.dev/core/mantine-provider/)

## MantineThemeProvider

@mantine/core; blocked; safety: denied.

Unavailable: Replaces a Homarr-owned provider boundary

[Upstream documentation for MantineThemeProvider](https://mantine.dev/core/mantine-theme-provider/)

## Mark

@mantine/core; content; safety: wrapped.

- `attributes`: `{ root?: Record<string, any>; }`.
- `color`: `DefaultMantineColor`. Key of `theme.colors` or any valid CSS color Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for Mark](https://mantine.dev/core/mark/)

## Marquee

@mantine/core; content; safety: wrapped.

- `attributes`: `{ content?: Record<string, any>; root?: Record<string, any>; group?: Record<string, any>; }`.
- `color`: `string`.
- `duration`: `number`. Animation duration in ms
- `fadeEdgeColor`: `string`. Color of the fade gradient,
- `fadeEdgeSize`: `string`. Size of the fade gradient,
- `fadeEdges`: `false | true`. Whether to show gradient fade on edges, Known values: false, true.
- `gap`: `MantineSpacing`. Gap between repeated children, key of `theme.spacing` or any valid CSS value Known values: "lg", "md", "sm", "xl", "xs".
- `orientation`: `"horizontal" | "vertical"`. Scroll orientation Known values: "horizontal", "vertical".
- `pauseOnHover`: `false | true`. Pauses animation on hover Known values: false, true.
- `repeat`: `number`. Number of times children are repeated inline for seamless scrolling
- `reverse`: `false | true`. Reverses animation direction Known values: false, true.
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for Marquee](https://mantine.dev/core/marquee/)

## MaskInput

@mantine/core; interaction; safety: wrapped.

Bind a temporary string input with `bind`. Initialize with `defaultValue`; reset with `resetKey`.

- `alwaysShowMask`: `false | true`. Show mask pattern even when field is empty and unfocused Known values: false, true.
- `attributes`: `{ input?: Record<string, any>; label?: Record<string, any>; section?: Record<string, any>; root?: Record<string, any>; ... 5 more ...; bottomSection?: Record<...>; }`.
- `autoClear`: `false | true`. Clear value on blur when mask is incomplete, `false` by default Known values: false, true.
- `color`: `string`.
- `description`: `React.ReactNode`. Contents of `Input.Description` component. If not set, description is not displayed.
- `descriptionProps`: `(InputDescriptionProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Description` component
- `error`: `React.ReactNode`. Contents of `Input.Error` component. If not set, error is not displayed.
- `errorProps`: `(InputErrorProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Error` component
- `inputSize`: `string`. HTML `size` attribute for the input element (number of visible characters)
- `inputWrapperOrder`: `("input" | "label" | "description" | "error")[]`. Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.
- `label`: `React.ReactNode`. Contents of `Input.Label` component. If not set, label is not displayed.
- `labelProps`: `(InputLabelProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Label` component
- `leftSection`: `React.ReactNode`. Content section displayed on the left side of the input
- `leftSectionPointerEvents`: `"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "all" | "fill" | "stroke" | "painted" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke"`. Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). Known values: "-moz-initial", "all", "auto", "fill", "inherit", "initial", "none", "painted", "revert", "revert-layer", "stroke", "unset", "visible", "visibleFill", "visiblePainted", "visibleStroke".
- `leftSectionProps`: `React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>`. Props passed down to the `leftSection` element
- `leftSectionWidth`: `Property.Width<string | number>`. Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height
- `loading`: `false | true`. Displays loading indicator in the left or right section Known values: false, true.
- `loadingPosition`: `"left" | "right"`. Position of the loading indicator Known values: "left", "right".
- `mask`: `string | (string | RegExp)[]`. Required. Mask pattern string or array of string literals and RegExp objects
- `pointer`: `false | true`. Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component="button"` for Select/DatePicker). Known values: false, true.
- `rightSection`: `React.ReactNode`. Content section displayed on the right side of the input
- `rightSectionPointerEvents`: `"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "all" | "fill" | "stroke" | "painted" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke"`. Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). Known values: "-moz-initial", "all", "auto", "fill", "inherit", "initial", "none", "painted", "revert", "revert-layer", "stroke", "unset", "visible", "visibleFill", "visiblePainted", "visibleStroke".
- `rightSectionProps`: `React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>`. Props passed down to the `rightSection` element
- `rightSectionWidth`: `Property.Width<string | number>`. Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height
- `separate`: `false | true`. When true, raw and display values are decoupled Known values: false, true.
- `showMaskOnFocus`: `false | true`. Show mask placeholder on focus, `true` by default Known values: false, true.
- `size`: `MantineSize | (string & {})`. Controls input `height`, horizontal `padding`, and `font-size` Known values: "lg", "md", "sm", "xl", "xs".
- `slotChar`: `null | string`. Character displayed in unfilled slots, `"_"` by default
- `success`: `React.ReactNode`. Contents of `Input.Success` component. If not set, success is not displayed.
- `successProps`: `(InputSuccessProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Success` component
- `tokens`: `Record<string, RegExp>`. Override or extend the default token map
- `type`: `HTMLInputTypeAttribute`.  Known values: "button", "checkbox", "color", "date", "datetime-local", "email", "file", "hidden", "image", "month", "number", "password", "radio", "range", "reset", "search", "submit", "tel", "text", "time", "url", "week".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `(string & {}) | InputVariant`.  Known values: "default", "filled", "unstyled".
- `withAsterisk`: `false | true`. If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. Known values: false, true.
- `withErrorStyles`: `false | true`. Determines whether the input should have red border and red text color when the `error` prop is set Known values: false, true.
- `withSuccessStyles`: `false | true`. Determines whether the input should have green border when the `success` prop is set Known values: false, true.
- `wrapperProps`: `WrapperProps`. Props passed down to the root element

- Provide a visible label or aria-label.

[Upstream documentation for MaskInput](https://mantine.dev/core/mask-input/)

## MatrixChart

@mantine/charts; charts; safety: wrapped.

- `attributes`: `{ legend?: Record<string, any>; root?: Record<string, any>; cell?: Record<string, any>; legendLabel?: Record<string, any>; legendRect?: Record<...>; xLabel?: Record<...>; yLabel?: Record<...>; }`.
- `cellRadius`: `number`. Cell border radius,
- `cellSize`: `number`. Cell size in px,
- `color`: `string`.
- `colors`: `DefaultMantineColor[]`. Array of colors for value interpolation, by default 4 shades of green colors are used
- `data`: `MatrixChartData`. Required. Array of cell objects with x, y, and value
- `domain`: `[number, number]`. Value domain [min, max] for color interpolation, auto-calculated if not set
- `emptyColor`: `DefaultMantineColor`. Color for empty/null cells Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `fontSize`: `number`. Font size for axis labels,
- `gap`: `number`. Gap between cells in px,
- `legendLabels`: `[string, string]`. Legend labels,
- `radius`: `string | number`.
- `tooltipProps`: `Partial<TooltipFloatingProps>`. Props passed down to the `Tooltip.Floating` component
- `type`: `string`.
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `withLegend`: `false | true`. Whether to show legend, Known values: false, true.
- `withTooltip`: `false | true`. If set, tooltip is displayed on cell hover, requires `getTooltipLabel` to be set Known values: false, true.
- `withXLabels`: `false | true`. If set, x-axis labels are displayed, Known values: false, true.
- `withYLabels`: `false | true`. If set, y-axis labels are displayed, Known values: false, true.
- `xLabels`: `string[]`. Labels for x-axis (columns), displayed along top or bottom
- `xLabelsHeight`: `number`. Height reserved for x-axis labels,
- `xLabelsPosition`: `"bottom" | "top"`. X-axis label position, Known values: "bottom", "top".
- `xLabelsRotation`: `number`. Rotation angle for x-axis labels in degrees,
- `yLabels`: `string[]`. Labels for y-axis (rows), displayed along left side
- `yLabelsWidth`: `number`. Width reserved for y-axis labels,

- Include a nearby text summary of the chart data.

[Upstream documentation for MatrixChart](https://mantine.dev/charts/matrix-chart/)

## Menu

@mantine/core; navigation; safety: wrapped.

Bind a temporary boolean input with `bind`. Initialize with `defaultChecked`; reset with `resetKey`.

Subcomponents: Menu.CheckboxGroup, Menu.CheckboxItem, Menu.ContextMenu, Menu.Divider, Menu.Dropdown, Menu.Item, Menu.Label, Menu.RadioGroup, Menu.RadioItem, Menu.Search, Menu.Sub, Menu.Target.

- `alignItemsLabels`: `"none" | "all" | "with-indicators"`. Controls how indicator slot space is reserved on menu items for label alignment. `'all'` reserves space on every `Menu.Item`, `'with-indicators'` reserves space only on `Menu.CheckboxItem` and `Menu.RadioItem`, `'none'` reserves space only on items that currently display an indicator. Known values: "all", "none", "with-indicators".
- `arrowOffset`: `number`. Arrow offset in px
- `arrowPosition`: `"center" | "side" | "merge"`. Arrow position Known values: "center", "merge", "side".
- `arrowRadius`: `number`. Arrow `border-radius` in px
- `arrowSize`: `number`. Arrow size in px
- `attributes`: `{ label?: Record<string, any>; search?: Record<string, any>; item?: Record<string, any>; chevron?: Record<string, any>; ... 6 more ...; divider?: Record<...>; }`.
- `checkIcon`: `React.ReactNode`. Custom icon rendered as the indicator of checked `Menu.CheckboxItem` and selected `Menu.RadioItem`. Can be overridden per item with the `checkIcon` prop.
- `clickOutsideEvents`: `string[]`. Events that trigger outside click detection. Includes mousedown for desktop clicks, touchstart for mobile, and keydown for Escape key handling
- `closeDelay`: `number`. Close delay in ms, applicable only to `trigger="hover"` variant
- `closeOnClickOutside`: `false | true`. If set, the dropdown is closed on outside clicks Known values: false, true.
- `closeOnEscape`: `false | true`. If set, the dropdown is closed when the `Escape` key is pressed Known values: false, true.
- `closeOnItemClick`: `false | true`. If set, the Menu is closed when one of the items is clicked. Can be overridden per item with `closeMenuOnClick` prop Known values: false, true.
- `defaultOpened`: `false | true`. Uncontrolled menu initial opened state Known values: false, true.
- `floatingStrategy`: `"fixed" | "absolute"`. Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy) Known values: "absolute", "fixed".
- `hideDetached`: `false | true`. If set, the dropdown is hidden when the element is hidden with styles or not visible on the screen Known values: false, true.
- `keepMounted`: `false | true`. If set, the dropdown is not unmounted from the DOM when hidden. `display: none` styles are added instead. Known values: false, true.
- `keepMountedMode`: `"activity" | "display-none"`. Controls how the dropdown is hidden when `keepMounted` is set: `'activity'` – hidden with React 19 `Activity` component, `'display-none'` – hidden with `display: none` styles Known values: "activity", "display-none".
- `loop`: `false | true`. If set, arrow key presses wrap around from last item to first and vice versa Known values: false, true.
- `menuItemTabIndex`: `0 | -1`. Set the `tabindex` on all menu items. Use `0` to allow Tab key navigation through menu items (required for navigation menus following WAI-ARIA disclosure pattern). Known values: -1, 0.
- `middlewares`: `PopoverMiddlewares`. Floating ui middlewares to configure position handling
- `offset`: `number | FloatingAxesOffsets`. Offset of the dropdown element
- `openDelay`: `number`. Open delay in ms, applicable only to `trigger="hover"` variant
- `opened`: `false | true`. Controlled menu opened state Known values: false, true.
- `overlayProps`: `(OverlayProps & ElementProps<"div">)`. Props passed down to `Overlay` component
- `position`: `"left" | "right" | "bottom" | "top" | "left-end" | "left-start" | "right-end" | "right-start" | "bottom-end" | "bottom-start" | "top-end" | "top-start"`. Dropdown position relative to the target element Known values: "bottom", "bottom-end", "bottom-start", "left", "left-end", "left-start", "right", "right-end", "right-start", "top", "top-end", "top-start".
- `preventPositionChangeWhenVisible`: `false | true`. If `true`, the dropdown picks its side on open (flip runs once, preferring the `position` prop) and then never changes side — scrolling, resizing, and content size changes will not flip the dropdown. The side is recalculated fresh on the next open. Does not affect the `shift` middleware. Set to `false` to keep flip active and allow the dropdown to re-flip on every change. Known values: false, true.
- `returnFocus`: `false | true`. Determines whether focus should be automatically returned to control when dropdown closes Known values: false, true.
- `transitionProps`: `Partial<Omit<TransitionProps, "mounted">>`. Props passed down to the `Transition` component. Use to configure duration and animation type.
- `trapFocus`: `false | true`. If set, focus is trapped within the menu dropdown when it is opened Known values: false, true.
- `trigger`: `"hover" | "click" | "click-hover"`. Event trigger to open menu. Note: 'hover' is not keyboard accessible; prefer 'click-hover' for accessible hover menus Known values: "click", "click-hover", "hover".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `width`: `PopoverWidth`. Dropdown width, or `'target'` to make dropdown width the same as target element
- `withArrow`: `false | true`. Determines whether component should have an arrow Known values: false, true.
- `withInitialFocusPlaceholder`: `false | true`. Adds a hidden focusable element at the start of the dropdown to prevent unexpected focus jumps when opening with keyboard. Set to false if you need custom focus management. Known values: false, true.
- `withOverlay`: `false | true`. Determines whether the overlay should be displayed when the dropdown is opened Known values: false, true.

- Provide an accessible label for controls without visible text.

[Upstream documentation for Menu](https://mantine.dev/core/menu/)

## Menu.CheckboxGroup

@mantine/core; navigation; safety: wrapped.

- `defaultValue`: `string[]`. Uncontrolled default selected values
- `value`: `string[]`. Controlled selected values

- Provide an accessible label for controls without visible text.

[Upstream documentation for Menu.CheckboxGroup](https://mantine.dev/core/menu/)

## Menu.CheckboxItem

@mantine/core; navigation; safety: wrapped.

- `checkIcon`: `React.ReactNode`. Replaces the default check icon rendered in the indicator slot when the item is checked. Overrides `checkIcon` set on `Menu`.
- `closeMenuOnClick`: `false | true`. If set, closes the menu when this item is clicked. By default, checkbox items do not close the menu. Known values: false, true.
- `color`: `DefaultMantineColor`. Key of `theme.colors` or any valid CSS color Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `data-disabled`: `false | true`.  Known values: false, true.
- `rightSection`: `React.ReactNode`. Section displayed at the end of the label
- `styles`: `Partial<Record<MenuCheckboxItemStylesNames, CSSProperties>>`.
- `type`: `"button" | "submit" | "reset"`.  Known values: "button", "reset", "submit".
- `value`: `string`. Value of the checkbox item. When used inside `Menu.CheckboxGroup`, determines whether the item is checked and what value is added/removed on toggle.
- `variant`: `string`.

- Provide an accessible label for controls without visible text.

[Upstream documentation for Menu.CheckboxItem](https://mantine.dev/core/menu/)

## Menu.ContextMenu

@mantine/core; navigation; safety: wrapped.

- `longPressDelay`: `number`. Delay in ms before a touch long-press opens the dropdown on touch devices, `500` by default

- Provide an accessible label for controls without visible text.

[Upstream documentation for Menu.ContextMenu](https://mantine.dev/core/menu/)

## Menu.Divider

@mantine/core; navigation; safety: wrapped.

- `color`: `string`.
- `styles`: `Partial<Record<"divider", CSSProperties>>`.
- `variant`: `string`.

- Provide an accessible label for controls without visible text.

[Upstream documentation for Menu.Divider](https://mantine.dev/core/menu/)

## Menu.Dropdown

@mantine/core; navigation; safety: wrapped.

- `color`: `string`.
- `styles`: `Partial<Record<"dropdown", CSSProperties>>`.
- `variant`: `string`.

- Provide an accessible label for controls without visible text.

[Upstream documentation for Menu.Dropdown](https://mantine.dev/core/menu/)

## Menu.Item

@mantine/core; navigation; safety: wrapped.

- `closeMenuOnClick`: `false | true`. Controls whether the menu closes when this item is clicked. When undefined, inherits from Menu's `closeOnItemClick` prop. When true or false, overrides the Menu-level setting Known values: false, true.
- `color`: `DefaultMantineColor`. Key of `theme.colors` or any valid CSS color Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `data-disabled`: `false | true`.  Known values: false, true.
- `leftSection`: `React.ReactNode`. Section displayed at the start of the label
- `rightSection`: `React.ReactNode`. Section displayed at the end of the label
- `styles`: `Partial<Record<MenuItemStylesNames, CSSProperties>>`.
- `variant`: `string`.

- Provide an accessible label for controls without visible text.

[Upstream documentation for Menu.Item](https://mantine.dev/core/menu/)

## Menu.Label

@mantine/core; navigation; safety: wrapped.

- `color`: `string`.
- `variant`: `string`.

- Provide an accessible label for controls without visible text.

[Upstream documentation for Menu.Label](https://mantine.dev/core/menu/)

## Menu.RadioGroup

@mantine/core; navigation; safety: wrapped.

- `defaultValue`: `null | string`. Uncontrolled default selected value
- `value`: `null | string`. Controlled selected value

- Provide an accessible label for controls without visible text.

[Upstream documentation for Menu.RadioGroup](https://mantine.dev/core/menu/)

## Menu.RadioItem

@mantine/core; navigation; safety: wrapped.

- `checkIcon`: `React.ReactNode`. Replaces the default radio indicator rendered when the item is selected. Overrides `checkIcon` set on `Menu`.
- `closeMenuOnClick`: `false | true`. If set, closes the menu when this item is clicked. By default, radio items do not close the menu. Known values: false, true.
- `color`: `DefaultMantineColor`. Key of `theme.colors` or any valid CSS color Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `data-disabled`: `false | true`.  Known values: false, true.
- `rightSection`: `React.ReactNode`. Section displayed at the end of the label
- `styles`: `Partial<Record<MenuRadioItemStylesNames, CSSProperties>>`.
- `type`: `"button" | "submit" | "reset"`.  Known values: "button", "reset", "submit".
- `value`: `string`. Required. Value of the radio item. Used by the parent `Menu.RadioGroup` to determine which item is selected.
- `variant`: `string`.

- Provide an accessible label for controls without visible text.

[Upstream documentation for Menu.RadioItem](https://mantine.dev/core/menu/)

## Menu.Search

@mantine/core; navigation; safety: wrapped.

- `attributes`: `{ input?: Record<string, any>; section?: Record<string, any>; wrapper?: Record<string, any>; bottomSection?: Record<string, any>; }`.
- `clearSearchOnClose`: `false | true`. If set, clears the search value after the menu close transition completes. Requires a controlled `value`/`onChange` pair. Known values: false, true.
- `color`: `string`.
- `error`: `React.ReactNode`. Determines whether the input should have error styles and `aria-invalid` attribute
- `inputSize`: `string`. HTML `size` attribute for the input element (number of visible characters)
- `leftSection`: `React.ReactNode`. Content section displayed on the left side of the input
- `leftSectionPointerEvents`: `"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "all" | "fill" | "stroke" | "painted" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke"`. Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). Known values: "-moz-initial", "all", "auto", "fill", "inherit", "initial", "none", "painted", "revert", "revert-layer", "stroke", "unset", "visible", "visibleFill", "visiblePainted", "visibleStroke".
- `leftSectionProps`: `React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>`. Props passed down to the `leftSection` element
- `leftSectionWidth`: `Property.Width<string | number>`. Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height
- `loading`: `false | true`. Displays loading indicator in the left or right section Known values: false, true.
- `loadingPosition`: `"left" | "right"`. Position of the loading indicator Known values: "left", "right".
- `multiline`: `false | true`. Adjusts padding and sizing calculations for multiline inputs (use with `component="textarea"`). Does not make the input multiline by itself. Known values: false, true.
- `pointer`: `false | true`. Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component="button"` for Select/DatePicker). Known values: false, true.
- `rightSection`: `React.ReactNode`. Content section displayed on the right side of the input
- `rightSectionPointerEvents`: `"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "all" | "fill" | "stroke" | "painted" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke"`. Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). Known values: "-moz-initial", "all", "auto", "fill", "inherit", "initial", "none", "painted", "revert", "revert-layer", "stroke", "unset", "visible", "visibleFill", "visiblePainted", "visibleStroke".
- `rightSectionProps`: `React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>`. Props passed down to the `rightSection` element
- `rightSectionWidth`: `Property.Width<string | number>`. Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height
- `size`: `MantineSize | (string & {})`. Controls input `height`, horizontal `padding`, and `font-size` Known values: "lg", "md", "sm", "xl", "xs".
- `success`: `React.ReactNode`. Determines whether the input should have success styles
- `type`: `HTMLInputTypeAttribute`.  Known values: "button", "checkbox", "color", "date", "datetime-local", "email", "file", "hidden", "image", "month", "number", "password", "radio", "range", "reset", "search", "submit", "tel", "text", "time", "url", "week".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `(string & {}) | InputVariant`.  Known values: "default", "filled", "unstyled".
- `withAria`: `false | true`. Determines whether `aria-` and other accessibility attributes should be added to the input. Only disable when implementing custom accessibility handling. Known values: false, true.
- `withErrorStyles`: `false | true`. Determines whether the input should have red border and red text color when the `error` prop is set Known values: false, true.
- `withSuccessStyles`: `false | true`. Determines whether the input should have green border when the `success` prop is set Known values: false, true.
- `wrapperProps`: `WrapperProps`. Props passed down to the root element of the `Input` component

- Provide an accessible label for controls without visible text.

[Upstream documentation for Menu.Search](https://mantine.dev/core/menu/)

## Menu.Sub

@mantine/core; navigation; safety: wrapped.

- `arrowOffset`: `number`. Arrow offset in px
- `arrowPosition`: `"center" | "side" | "merge"`. Arrow position Known values: "center", "merge", "side".
- `arrowRadius`: `number`. Arrow `border-radius` in px
- `arrowSize`: `number`. Arrow size in px
- `closeDelay`: `number`. Close delay in ms, applicable when hover trigger is used
- `floatingStrategy`: `"fixed" | "absolute"`. Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy) Known values: "absolute", "fixed".
- `hideDetached`: `false | true`. If set, the dropdown is hidden when the element is hidden with styles or not visible on the screen Known values: false, true.
- `keepMounted`: `false | true`. If set, the dropdown is not unmounted from the DOM when hidden. `display: none` styles are added instead. Known values: false, true.
- `keepMountedMode`: `"activity" | "display-none"`. Controls how the dropdown is hidden when `keepMounted` is set: `'activity'` – hidden with React 19 `Activity` component, `'display-none'` – hidden with `display: none` styles Known values: "activity", "display-none".
- `middlewares`: `PopoverMiddlewares`. Floating ui middlewares to configure position handling
- `offset`: `number | FloatingAxesOffsets`. Offset of the dropdown element
- `openDelay`: `number`. Open delay in ms, applicable when hover trigger is used
- `opened`: `false | true`. Controlled opened state Known values: false, true.
- `overlayProps`: `(OverlayProps & ElementProps<"div">)`. Props passed down to `Overlay` component
- `position`: `"left" | "right" | "bottom" | "top" | "left-end" | "left-start" | "right-end" | "right-start" | "bottom-end" | "bottom-start" | "top-end" | "top-start"`. Dropdown position relative to the target element Known values: "bottom", "bottom-end", "bottom-start", "left", "left-end", "left-start", "right", "right-end", "right-start", "top", "top-end", "top-start".
- `preventPositionChangeWhenVisible`: `false | true`. If `true`, the dropdown picks its side on open (flip runs once, preferring the `position` prop) and then never changes side — scrolling, resizing, and content size changes will not flip the dropdown. The side is recalculated fresh on the next open. Does not affect the `shift` middleware. Set to `false` to keep flip active and allow the dropdown to re-flip on every change. Known values: false, true.
- `returnFocus`: `false | true`. Determines whether focus should be automatically returned to control when dropdown closes Known values: false, true.
- `safeAreaPolygon`: `boolean | SafePolygonOptions`. Determines whether submenu stays open while the cursor moves toward its dropdown. Pass an object to configure safe polygon behavior.
- `transitionProps`: `Partial<Omit<TransitionProps, "mounted">>`. Props passed down to the `Transition` component that used to animate dropdown presence, use to configure duration and animation type
- `width`: `PopoverWidth`. Dropdown width, or `'target'` to make dropdown width the same as target element
- `withArrow`: `false | true`. Determines whether component should have an arrow Known values: false, true.
- `withOverlay`: `false | true`. Determines whether the overlay should be displayed when the dropdown is opened Known values: false, true.

- Provide an accessible label for controls without visible text.

[Upstream documentation for Menu.Sub](https://mantine.dev/core/menu/)

## Menu.Target

@mantine/core; navigation; safety: wrapped.

- Provide an accessible label for controls without visible text.

[Upstream documentation for Menu.Target](https://mantine.dev/core/menu/)

## MenuCheckboxGroup

@mantine/core; navigation; safety: wrapped.

- `defaultValue`: `string[]`. Uncontrolled default selected values
- `value`: `string[]`. Controlled selected values

- Provide an accessible label for controls without visible text.

[Upstream documentation for MenuCheckboxGroup](https://mantine.dev/core/menu-checkbox-group/)

## MenuCheckboxItem

@mantine/core; navigation; safety: wrapped.

- `checkIcon`: `React.ReactNode`. Replaces the default check icon rendered in the indicator slot when the item is checked. Overrides `checkIcon` set on `Menu`.
- `closeMenuOnClick`: `false | true`. If set, closes the menu when this item is clicked. By default, checkbox items do not close the menu. Known values: false, true.
- `color`: `DefaultMantineColor`. Key of `theme.colors` or any valid CSS color Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `data-disabled`: `false | true`.  Known values: false, true.
- `rightSection`: `React.ReactNode`. Section displayed at the end of the label
- `styles`: `Partial<Record<MenuCheckboxItemStylesNames, CSSProperties>>`.
- `type`: `"button" | "submit" | "reset"`.  Known values: "button", "reset", "submit".
- `value`: `string`. Value of the checkbox item. When used inside `Menu.CheckboxGroup`, determines whether the item is checked and what value is added/removed on toggle.
- `variant`: `string`.

- Provide an accessible label for controls without visible text.

[Upstream documentation for MenuCheckboxItem](https://mantine.dev/core/menu-checkbox-item/)

## MenuContextMenu

@mantine/core; navigation; safety: wrapped.

- `longPressDelay`: `number`. Delay in ms before a touch long-press opens the dropdown on touch devices, `500` by default

- Provide an accessible label for controls without visible text.

[Upstream documentation for MenuContextMenu](https://mantine.dev/core/menu-context-menu/)

## MenuDivider

@mantine/core; navigation; safety: wrapped.

- `color`: `string`.
- `styles`: `Partial<Record<"divider", CSSProperties>>`.
- `variant`: `string`.

- Provide an accessible label for controls without visible text.

[Upstream documentation for MenuDivider](https://mantine.dev/core/menu-divider/)

## MenuDropdown

@mantine/core; navigation; safety: wrapped.

- `color`: `string`.
- `styles`: `Partial<Record<"dropdown", CSSProperties>>`.
- `variant`: `string`.

- Provide an accessible label for controls without visible text.

[Upstream documentation for MenuDropdown](https://mantine.dev/core/menu-dropdown/)

## MenuItem

@mantine/core; navigation; safety: wrapped.

- `closeMenuOnClick`: `false | true`. Controls whether the menu closes when this item is clicked. When undefined, inherits from Menu's `closeOnItemClick` prop. When true or false, overrides the Menu-level setting Known values: false, true.
- `color`: `DefaultMantineColor`. Key of `theme.colors` or any valid CSS color Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `data-disabled`: `false | true`.  Known values: false, true.
- `leftSection`: `React.ReactNode`. Section displayed at the start of the label
- `rightSection`: `React.ReactNode`. Section displayed at the end of the label
- `styles`: `Partial<Record<MenuItemStylesNames, CSSProperties>>`.
- `variant`: `string`.

- Provide an accessible label for controls without visible text.

[Upstream documentation for MenuItem](https://mantine.dev/core/menu-item/)

## MenuLabel

@mantine/core; navigation; safety: wrapped.

- `color`: `string`.
- `variant`: `string`.

- Provide an accessible label for controls without visible text.

[Upstream documentation for MenuLabel](https://mantine.dev/core/menu-label/)

## MenuRadioGroup

@mantine/core; navigation; safety: wrapped.

- `defaultValue`: `null | string`. Uncontrolled default selected value
- `value`: `null | string`. Controlled selected value

- Provide an accessible label for controls without visible text.

[Upstream documentation for MenuRadioGroup](https://mantine.dev/core/menu-radio-group/)

## MenuRadioItem

@mantine/core; navigation; safety: wrapped.

- `checkIcon`: `React.ReactNode`. Replaces the default radio indicator rendered when the item is selected. Overrides `checkIcon` set on `Menu`.
- `closeMenuOnClick`: `false | true`. If set, closes the menu when this item is clicked. By default, radio items do not close the menu. Known values: false, true.
- `color`: `DefaultMantineColor`. Key of `theme.colors` or any valid CSS color Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `data-disabled`: `false | true`.  Known values: false, true.
- `rightSection`: `React.ReactNode`. Section displayed at the end of the label
- `styles`: `Partial<Record<MenuRadioItemStylesNames, CSSProperties>>`.
- `type`: `"button" | "submit" | "reset"`.  Known values: "button", "reset", "submit".
- `value`: `string`. Required. Value of the radio item. Used by the parent `Menu.RadioGroup` to determine which item is selected.
- `variant`: `string`.

- Provide an accessible label for controls without visible text.

[Upstream documentation for MenuRadioItem](https://mantine.dev/core/menu-radio-item/)

## MenuSearch

@mantine/core; navigation; safety: wrapped.

- `attributes`: `{ input?: Record<string, any>; section?: Record<string, any>; wrapper?: Record<string, any>; bottomSection?: Record<string, any>; }`.
- `clearSearchOnClose`: `false | true`. If set, clears the search value after the menu close transition completes. Requires a controlled `value`/`onChange` pair. Known values: false, true.
- `color`: `string`.
- `error`: `React.ReactNode`. Determines whether the input should have error styles and `aria-invalid` attribute
- `inputSize`: `string`. HTML `size` attribute for the input element (number of visible characters)
- `leftSection`: `React.ReactNode`. Content section displayed on the left side of the input
- `leftSectionPointerEvents`: `"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "all" | "fill" | "stroke" | "painted" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke"`. Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). Known values: "-moz-initial", "all", "auto", "fill", "inherit", "initial", "none", "painted", "revert", "revert-layer", "stroke", "unset", "visible", "visibleFill", "visiblePainted", "visibleStroke".
- `leftSectionProps`: `React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>`. Props passed down to the `leftSection` element
- `leftSectionWidth`: `Property.Width<string | number>`. Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height
- `loading`: `false | true`. Displays loading indicator in the left or right section Known values: false, true.
- `loadingPosition`: `"left" | "right"`. Position of the loading indicator Known values: "left", "right".
- `multiline`: `false | true`. Adjusts padding and sizing calculations for multiline inputs (use with `component="textarea"`). Does not make the input multiline by itself. Known values: false, true.
- `pointer`: `false | true`. Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component="button"` for Select/DatePicker). Known values: false, true.
- `rightSection`: `React.ReactNode`. Content section displayed on the right side of the input
- `rightSectionPointerEvents`: `"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "all" | "fill" | "stroke" | "painted" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke"`. Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). Known values: "-moz-initial", "all", "auto", "fill", "inherit", "initial", "none", "painted", "revert", "revert-layer", "stroke", "unset", "visible", "visibleFill", "visiblePainted", "visibleStroke".
- `rightSectionProps`: `React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>`. Props passed down to the `rightSection` element
- `rightSectionWidth`: `Property.Width<string | number>`. Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height
- `size`: `MantineSize | (string & {})`. Controls input `height`, horizontal `padding`, and `font-size` Known values: "lg", "md", "sm", "xl", "xs".
- `success`: `React.ReactNode`. Determines whether the input should have success styles
- `type`: `HTMLInputTypeAttribute`.  Known values: "button", "checkbox", "color", "date", "datetime-local", "email", "file", "hidden", "image", "month", "number", "password", "radio", "range", "reset", "search", "submit", "tel", "text", "time", "url", "week".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `(string & {}) | InputVariant`.  Known values: "default", "filled", "unstyled".
- `withAria`: `false | true`. Determines whether `aria-` and other accessibility attributes should be added to the input. Only disable when implementing custom accessibility handling. Known values: false, true.
- `withErrorStyles`: `false | true`. Determines whether the input should have red border and red text color when the `error` prop is set Known values: false, true.
- `withSuccessStyles`: `false | true`. Determines whether the input should have green border when the `success` prop is set Known values: false, true.
- `wrapperProps`: `WrapperProps`. Props passed down to the root element of the `Input` component

- Provide an accessible label for controls without visible text.

[Upstream documentation for MenuSearch](https://mantine.dev/core/menu-search/)

## MenuSub

@mantine/core; navigation; safety: wrapped.

Subcomponents: MenuSub.Dropdown, MenuSub.Item, MenuSub.Target.

- `arrowOffset`: `number`. Arrow offset in px
- `arrowPosition`: `"center" | "side" | "merge"`. Arrow position Known values: "center", "merge", "side".
- `arrowRadius`: `number`. Arrow `border-radius` in px
- `arrowSize`: `number`. Arrow size in px
- `closeDelay`: `number`. Close delay in ms, applicable when hover trigger is used
- `floatingStrategy`: `"fixed" | "absolute"`. Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy) Known values: "absolute", "fixed".
- `hideDetached`: `false | true`. If set, the dropdown is hidden when the element is hidden with styles or not visible on the screen Known values: false, true.
- `keepMounted`: `false | true`. If set, the dropdown is not unmounted from the DOM when hidden. `display: none` styles are added instead. Known values: false, true.
- `keepMountedMode`: `"activity" | "display-none"`. Controls how the dropdown is hidden when `keepMounted` is set: `'activity'` – hidden with React 19 `Activity` component, `'display-none'` – hidden with `display: none` styles Known values: "activity", "display-none".
- `middlewares`: `PopoverMiddlewares`. Floating ui middlewares to configure position handling
- `offset`: `number | FloatingAxesOffsets`. Offset of the dropdown element
- `openDelay`: `number`. Open delay in ms, applicable when hover trigger is used
- `opened`: `false | true`. Controlled opened state Known values: false, true.
- `overlayProps`: `(OverlayProps & ElementProps<"div">)`. Props passed down to `Overlay` component
- `position`: `"left" | "right" | "bottom" | "top" | "left-end" | "left-start" | "right-end" | "right-start" | "bottom-end" | "bottom-start" | "top-end" | "top-start"`. Dropdown position relative to the target element Known values: "bottom", "bottom-end", "bottom-start", "left", "left-end", "left-start", "right", "right-end", "right-start", "top", "top-end", "top-start".
- `preventPositionChangeWhenVisible`: `false | true`. If `true`, the dropdown picks its side on open (flip runs once, preferring the `position` prop) and then never changes side — scrolling, resizing, and content size changes will not flip the dropdown. The side is recalculated fresh on the next open. Does not affect the `shift` middleware. Set to `false` to keep flip active and allow the dropdown to re-flip on every change. Known values: false, true.
- `returnFocus`: `false | true`. Determines whether focus should be automatically returned to control when dropdown closes Known values: false, true.
- `safeAreaPolygon`: `boolean | SafePolygonOptions`. Determines whether submenu stays open while the cursor moves toward its dropdown. Pass an object to configure safe polygon behavior.
- `transitionProps`: `Partial<Omit<TransitionProps, "mounted">>`. Props passed down to the `Transition` component that used to animate dropdown presence, use to configure duration and animation type
- `width`: `PopoverWidth`. Dropdown width, or `'target'` to make dropdown width the same as target element
- `withArrow`: `false | true`. Determines whether component should have an arrow Known values: false, true.
- `withOverlay`: `false | true`. Determines whether the overlay should be displayed when the dropdown is opened Known values: false, true.

- Provide an accessible label for controls without visible text.

[Upstream documentation for MenuSub](https://mantine.dev/core/menu-sub/)

## MenuSub.Dropdown

@mantine/core; navigation; safety: wrapped.

- `color`: `string`.
- `styles`: `Partial<Record<"dropdown", CSSProperties>>`.
- `variant`: `string`.

- Provide an accessible label for controls without visible text.

[Upstream documentation for MenuSub.Dropdown](https://mantine.dev/core/menu-sub/)

## MenuSub.Item

@mantine/core; navigation; safety: wrapped.

- `closeMenuOnClick`: `false | true`. If set, the menu is closed when the item is clicked. Overrides `closeOnItemClick` prop on the `Menu` component. Known values: false, true.
- `color`: `DefaultMantineColor`. Key of `theme.colors` or any valid CSS color Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `data-disabled`: `false | true`.  Known values: false, true.
- `leftSection`: `React.ReactNode`. Section displayed at the start of the label
- `rightSection`: `React.ReactNode`. Section displayed at the end of the label
- `styles`: `Partial<Record<MenuSubItemStylesNames, CSSProperties>>`.
- `variant`: `string`.

- Provide an accessible label for controls without visible text.

[Upstream documentation for MenuSub.Item](https://mantine.dev/core/menu-sub/)

## MenuSub.Target

@mantine/core; navigation; safety: wrapped.

- Provide an accessible label for controls without visible text.

[Upstream documentation for MenuSub.Target](https://mantine.dev/core/menu-sub/)

## MenuSubDropdown

@mantine/core; navigation; safety: wrapped.

- `color`: `string`.
- `styles`: `Partial<Record<"dropdown", CSSProperties>>`.
- `variant`: `string`.

- Provide an accessible label for controls without visible text.

[Upstream documentation for MenuSubDropdown](https://mantine.dev/core/menu-sub-dropdown/)

## MenuSubItem

@mantine/core; navigation; safety: wrapped.

- `closeMenuOnClick`: `false | true`. If set, the menu is closed when the item is clicked. Overrides `closeOnItemClick` prop on the `Menu` component. Known values: false, true.
- `color`: `DefaultMantineColor`. Key of `theme.colors` or any valid CSS color Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `data-disabled`: `false | true`.  Known values: false, true.
- `leftSection`: `React.ReactNode`. Section displayed at the start of the label
- `rightSection`: `React.ReactNode`. Section displayed at the end of the label
- `styles`: `Partial<Record<MenuSubItemStylesNames, CSSProperties>>`.
- `variant`: `string`.

- Provide an accessible label for controls without visible text.

[Upstream documentation for MenuSubItem](https://mantine.dev/core/menu-sub-item/)

## MenuSubTarget

@mantine/core; navigation; safety: wrapped.

- Provide an accessible label for controls without visible text.

[Upstream documentation for MenuSubTarget](https://mantine.dev/core/menu-sub-target/)

## MenuTarget

@mantine/core; navigation; safety: wrapped.

- Provide an accessible label for controls without visible text.

[Upstream documentation for MenuTarget](https://mantine.dev/core/menu-target/)

## Menubar

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

Subcomponents: Menubar.Dropdown, Menubar.Menu, Menubar.Target.

[Upstream documentation for Menubar](https://mantine.dev/core/menubar/)

## Menubar.Dropdown

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for Menubar.Dropdown](https://mantine.dev/core/menubar/)

## Menubar.Menu

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for Menubar.Menu](https://mantine.dev/core/menubar/)

## Menubar.Target

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for Menubar.Target](https://mantine.dev/core/menubar/)

## MenubarDropdown

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for MenubarDropdown](https://mantine.dev/core/menubar-dropdown/)

## MenubarMenu

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for MenubarMenu](https://mantine.dev/core/menubar-menu/)

## MenubarTarget

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for MenubarTarget](https://mantine.dev/core/menubar-target/)

## MiniCalendar

@mantine/dates; dates; safety: wrapped.

Bind a temporary string input with `bind`. Initialize with `defaultValue`; reset with `resetKey`.

- `attributes`: `{ root?: Record<string, any>; control?: Record<string, any>; day?: Record<string, any>; days?: Record<string, any>; dayMonth?: Record<...>; dayNumber?: Record<...>; }`.
- `color`: `string`.
- `date`: `string | Date`. Controlled component date value, start date of the interval
- `defaultDate`: `string | Date`. Uncontrolled component default value, start date of the interval
- `locale`: `string`. dayjs locale used for formatting
- `maxDate`: `string | Date`. Maximum date that can be selected, date object or date string in `YYYY-MM-DD` format
- `minDate`: `string | Date`. Minimum date that can be selected, date object or date string in `YYYY-MM-DD` format
- `nextControlProps`: `(React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & DataAttributes)`. Props passed to next control button
- `numberOfDays`: `number`. Number of days to display in the calendar
- `previousControlProps`: `(React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & DataAttributes)`. Props passed to previous control button
- `size`: `"xs" | "sm" | "md" | "lg" | "xl"`. Component size Known values: "lg", "md", "sm", "xl", "xs".
- `unstyled`: `false | true`.  Known values: false, true.
- `value`: `string | Date | null`. Selected date, controlled value
- `variant`: `string`.

- Include a textual date when the visual calendar carries meaning.

[Upstream documentation for MiniCalendar](https://mantine.dev/dates/mini-calendar/)

## Modal

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

Subcomponents: Modal.Body, Modal.CloseButton, Modal.Content, Modal.Header, Modal.Overlay, Modal.Root, Modal.Stack, Modal.Title.

[Upstream documentation for Modal](https://mantine.dev/core/modal/)

## Modal.Body

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for Modal.Body](https://mantine.dev/core/modal/)

## Modal.CloseButton

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for Modal.CloseButton](https://mantine.dev/core/modal/)

## Modal.Content

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for Modal.Content](https://mantine.dev/core/modal/)

## Modal.Header

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for Modal.Header](https://mantine.dev/core/modal/)

## Modal.Overlay

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for Modal.Overlay](https://mantine.dev/core/modal/)

## Modal.Root

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for Modal.Root](https://mantine.dev/core/modal/)

## Modal.Stack

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for Modal.Stack](https://mantine.dev/core/modal/)

## Modal.Title

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for Modal.Title](https://mantine.dev/core/modal/)

## ModalBase

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for ModalBase](https://mantine.dev/core/modal-base/)

## ModalBaseBody

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for ModalBaseBody](https://mantine.dev/core/modal-base-body/)

## ModalBaseCloseButton

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for ModalBaseCloseButton](https://mantine.dev/core/modal-base-close-button/)

## ModalBaseContent

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for ModalBaseContent](https://mantine.dev/core/modal-base-content/)

## ModalBaseHeader

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for ModalBaseHeader](https://mantine.dev/core/modal-base-header/)

## ModalBaseOverlay

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for ModalBaseOverlay](https://mantine.dev/core/modal-base-overlay/)

## ModalBaseTitle

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for ModalBaseTitle](https://mantine.dev/core/modal-base-title/)

## ModalBody

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for ModalBody](https://mantine.dev/core/modal-body/)

## ModalCloseButton

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for ModalCloseButton](https://mantine.dev/core/modal-close-button/)

## ModalContent

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for ModalContent](https://mantine.dev/core/modal-content/)

## ModalHeader

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for ModalHeader](https://mantine.dev/core/modal-header/)

## ModalOverlay

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for ModalOverlay](https://mantine.dev/core/modal-overlay/)

## ModalRoot

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for ModalRoot](https://mantine.dev/core/modal-root/)

## ModalStack

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for ModalStack](https://mantine.dev/core/modal-stack/)

## ModalTitle

@mantine/core; blocked; safety: denied.

Unavailable: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary

[Upstream documentation for ModalTitle](https://mantine.dev/core/modal-title/)

## Month

@mantine/dates; dates; safety: wrapped.

- `align`: `"center" | "left" | "right"`.  Known values: "center", "left", "right".
- `attributes`: `{ month?: Record<string, any>; weekday?: Record<string, any>; weekdaysRow?: Record<string, any>; monthRow?: Record<string, any>; ... 4 more ...; day?: Record<...>; }`.
- `color`: `string`.
- `firstDayOfWeek`: `0 | 2 | 3 | 4 | 5 | 6 | 1`. Number 0-6, where 0 – Sunday and 6 – Saturday. Known values: 0, 1, 2, 3, 4, 5, 6.
- `fullWidth`: `false | true`. Determines whether the month should take the full width of its container Known values: false, true.
- `hideOutsideDates`: `false | true`. Determines whether outside dates should be hidden Known values: false, true.
- `hideWeekdays`: `false | true`. Determines whether weekdays row should be hidden Known values: false, true.
- `highlightToday`: `false | true`. Determines whether today should be highlighted with a border Known values: false, true.
- `locale`: `string`. `dayjs` locale, the default value is defined by `DatesProvider`
- `maxDate`: `string | Date`. Maximum possible date, in `YYYY-MM-DD` format
- `minDate`: `string | Date`. Minimum possible date, in `YYYY-MM-DD` format
- `month`: `string`. Required. Month to display, value `YYYY-MM-DD`
- `size`: `"xs" | "sm" | "md" | "lg" | "xl"`. Controls size Known values: "lg", "md", "sm", "xl", "xs".
- `static`: `false | true`. Determines whether days should be static, static days can be used to display month if it is not expected that user will interact with the component in any way Known values: false, true.
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `weekendDays`: `DayOfWeek[]`. Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider`.
- `withCellSpacing`: `false | true`. Determines whether controls should be separated by space Known values: false, true.
- `withWeekNumbers`: `false | true`. Determines whether week numbers should be displayed Known values: false, true.

- Include a textual date when the visual calendar carries meaning.

[Upstream documentation for Month](https://mantine.dev/dates/month/)

## MonthLevel

@mantine/dates; dates; safety: wrapped.

- `attributes`: `{ month?: Record<string, any>; weekday?: Record<string, any>; weekdaysRow?: Record<string, any>; monthRow?: Record<string, any>; ... 9 more ...; calendarHeaderSelect?: Record<...>; }`.
- `color`: `string`.
- `firstDayOfWeek`: `0 | 2 | 3 | 4 | 5 | 6 | 1`. Number 0-6, where 0 – Sunday and 6 – Saturday. Known values: 0, 1, 2, 3, 4, 5, 6.
- `fullWidth`: `false | true`. Determines whether the calendar should take the full width of its container Known values: false, true.
- `hasNextLevel`: `false | true`. Determines whether next level button should be enabled Known values: false, true.
- `headerControlsOrder`: `("next" | "previous" | "level")[]`. Controls order
- `hideOutsideDates`: `false | true`. Determines whether outside dates should be hidden Known values: false, true.
- `hideWeekdays`: `false | true`. Determines whether weekdays row should be hidden Known values: false, true.
- `highlightToday`: `false | true`. Determines whether today should be highlighted with a border Known values: false, true.
- `levelControlAriaLabel`: `string`. Aria-label for change level control
- `locale`: `string`. `dayjs` locale, the default value is defined by `DatesProvider`
- `maxDate`: `string | Date`. Maximum possible date, in `YYYY-MM-DD` format
- `minDate`: `string | Date`. Minimum possible date, in `YYYY-MM-DD` format
- `month`: `string`. Required. Month that is currently displayed
- `nextDisabled`: `false | true`. Disables next control Known values: false, true.
- `nextIcon`: `React.ReactNode`. Change next icon
- `nextLabel`: `string`. Next button `aria-label`
- `previousDisabled`: `false | true`. Disables previous control Known values: false, true.
- `previousIcon`: `React.ReactNode`. Change previous icon
- `previousLabel`: `string`. Previous button `aria-label`
- `size`: `"xs" | "sm" | "md" | "lg" | "xl"`. Controls size Known values: "lg", "md", "sm", "xl", "xs".
- `static`: `false | true`. Determines whether days should be static, static days can be used to display month if it is not expected that user will interact with the component in any way Known values: false, true.
- `styles`: `Partial<Record<string, React.CSSProperties>>`.
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `weekendDays`: `DayOfWeek[]`. Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider`.
- `withCellSpacing`: `false | true`. Determines whether controls should be separated by space Known values: false, true.
- `withNativeLevelSelect`: `false | true`. Determines whether level select controls should be rendered as native `<select>` elements Known values: false, true.
- `withNext`: `false | true`. Determines whether next control should be rendered Known values: false, true.
- `withPrevious`: `false | true`. Determines whether previous control should be rendered Known values: false, true.
- `withWeekNumbers`: `false | true`. Determines whether week numbers should be displayed Known values: false, true.
- `yearsSelectRange`: `[number, number]`. Year range for native level select, tuple of `[startYear, endYear]`. Defaults to `[currentYear - 100, currentYear + 50]` or values derived from `minDate`/`maxDate` if set.

- Include a textual date when the visual calendar carries meaning.

[Upstream documentation for MonthLevel](https://mantine.dev/dates/month-level/)

## MonthLevelGroup

@mantine/dates; dates; safety: wrapped.

- `attributes`: `{ month?: Record<string, any>; weekday?: Record<string, any>; weekdaysRow?: Record<string, any>; monthRow?: Record<string, any>; ... 10 more ...; levelsGroup?: Record<...>; }`.
- `color`: `string`.
- `firstDayOfWeek`: `0 | 2 | 3 | 4 | 5 | 6 | 1`. Number 0-6, where 0 – Sunday and 6 – Saturday. Known values: 0, 1, 2, 3, 4, 5, 6.
- `fullWidth`: `false | true`. Determines whether the calendar should take the full width of its container Known values: false, true.
- `hasNextLevel`: `false | true`. Determines whether next level button should be enabled Known values: false, true.
- `headerControlsOrder`: `("next" | "previous" | "level")[]`. Controls order
- `hideOutsideDates`: `false | true`. Determines whether outside dates should be hidden Known values: false, true.
- `hideWeekdays`: `false | true`. Determines whether weekdays row should be hidden Known values: false, true.
- `highlightToday`: `false | true`. Determines whether today should be highlighted with a border Known values: false, true.
- `locale`: `string`. `dayjs` locale, the default value is defined by `DatesProvider`
- `maxDate`: `string | Date`. Maximum possible date, in `YYYY-MM-DD` format
- `minDate`: `string | Date`. Minimum possible date, in `YYYY-MM-DD` format
- `month`: `string`. Required. Month to display
- `nextDisabled`: `false | true`. Disables next control Known values: false, true.
- `nextIcon`: `React.ReactNode`. Change next icon
- `nextLabel`: `string`. Next button `aria-label`
- `numberOfColumns`: `number`. Number of columns to display next to each other
- `previousDisabled`: `false | true`. Disables previous control Known values: false, true.
- `previousIcon`: `React.ReactNode`. Change previous icon
- `previousLabel`: `string`. Previous button `aria-label`
- `size`: `"xs" | "sm" | "md" | "lg" | "xl"`. Controls size Known values: "lg", "md", "sm", "xl", "xs".
- `static`: `false | true`. Passed as `isStatic` prop to `Month` component Known values: false, true.
- `styles`: `Partial<Record<string, React.CSSProperties>>`.
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `weekendDays`: `DayOfWeek[]`. Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider`.
- `withCellSpacing`: `false | true`. Determines whether controls should be separated by space Known values: false, true.
- `withNativeLevelSelect`: `false | true`. Determines whether level select controls should be rendered as native `<select>` elements Known values: false, true.
- `withWeekNumbers`: `false | true`. Determines whether week numbers should be displayed Known values: false, true.
- `yearsSelectRange`: `[number, number]`. Year range for native level select, tuple of `[startYear, endYear]`. Defaults to `[currentYear - 100, currentYear + 50]` or values derived from `minDate`/`maxDate` if set.

- Include a textual date when the visual calendar carries meaning.

[Upstream documentation for MonthLevelGroup](https://mantine.dev/dates/month-level-group/)

## MonthPicker

@mantine/dates; dates; safety: wrapped.

Bind a temporary string input with `bind`. Initialize with `defaultValue`; reset with `resetKey`.

- `allowDeselect`: `(Type extends "default" ? boolean : never)`. Determines whether user can deselect the date by clicking on selected item, applicable only when type="default"
- `allowSingleDateInRange`: `(Type extends "range" ? boolean : never)`. Determines whether a single day can be selected as range, applicable only when type="range"
- `ariaLabels`: `CalendarAriaLabels`. `aria-label` attributes for controls on different levels
- `attributes`: `{ calendarHeader?: Record<string, any>; calendarHeaderControl?: Record<string, any>; calendarHeaderLevel?: Record<string, any>; ... 13 more ...; monthPickerRoot?: Record<...>; }`.
- `color`: `string`.
- `columnsToScroll`: `number`. Number of columns to scroll with next/prev buttons, same as `numberOfColumns` if not set explicitly
- `date`: `string | Date`. Displayed date in controlled mode
- `defaultDate`: `string | Date`. Initial displayed date in uncontrolled mode
- `defaultLevel`: `"month" | "year" | "decade"`. Initial displayed level (uncontrolled) Known values: "decade", "month", "year".
- `defaultValue`: `DatePickerValue<Type, DateValue>`. Default value for uncontrolled component
- `fullWidth`: `false | true`. Determines whether the list should take the full width of its container Known values: false, true.
- `level`: `"month" | "year" | "decade"`. Current displayed level (controlled) Known values: "decade", "month", "year".
- `locale`: `string`. Dayjs locale, defaults to value defined in DatesProvider
- `maxDate`: `string | Date`. Maximum possible date in `YYYY-MM-DD` format or Date object
- `maxLevel`: `"month" | "year" | "decade"`. Max level that user can go up to Known values: "decade", "month", "year".
- `minDate`: `string | Date`. Minimum possible date in `YYYY-MM-DD` format or Date object
- `nextLabel`: `string`. Next button `aria-label`
- `numberOfColumns`: `number`. Number of columns displayed next to each other
- `presets`: `MonthPickerPreset<Type>[]`. Predefined values to pick from
- `previousLabel`: `string`. Previous button `aria-label`
- `size`: `"xs" | "sm" | "md" | "lg" | "xl"`. Component size Known values: "lg", "md", "sm", "xl", "xs".
- `type`: `DatePickerType | Type`. Picker type: range, multiple or default Known values: "default", "multiple", "range".
- `unstyled`: `false | true`.  Known values: false, true.
- `value`: `DatePickerValue<Type, DateValue>`. Value for controlled component
- `variant`: `string`.
- `withCellSpacing`: `false | true`. Determines whether controls should be separated Known values: false, true.
- `withNativeLevelSelect`: `false | true`. Determines whether level select controls should be rendered as native `<select>` elements Known values: false, true.

- Include a textual date when the visual calendar carries meaning.

[Upstream documentation for MonthPicker](https://mantine.dev/dates/month-picker/)

## MonthPickerInput

@mantine/dates; dates; safety: wrapped.

Bind a temporary string input with `bind`. Initialize with `defaultValue`; reset with `resetKey`.

- `allowDeselect`: `(Type extends "default" ? boolean : never)`. Determines whether user can deselect the date by clicking on selected item, applicable only when type="default"
- `allowSingleDateInRange`: `(Type extends "range" ? boolean : never)`. Determines whether a single day can be selected as range, applicable only when type="range"
- `ariaLabels`: `CalendarAriaLabels`. `aria-label` attributes for controls on different levels
- `attributes`: `{ input?: Record<string, any>; label?: Record<string, any>; section?: Record<string, any>; root?: Record<string, any>; ... 23 more ...; monthPickerRoot?: Record<...>; }`.
- `clearButtonProps`: `React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>`. Props passed down to the clear button
- `clearSectionMode`: `"both" | "rightSection" | "clear"`. Determines how the clear button and rightSection are rendered Known values: "both", "clear", "rightSection".
- `clearable`: `false | true`. If set, clear button is displayed in the `rightSection` when the component has value. Ignored if `rightSection` prop is set. Known values: false, true.
- `closeOnChange`: `false | true`. Determines whether the dropdown is closed when date is selected, not applicable with `type="multiple"` Known values: false, true.
- `color`: `string`.
- `columnsToScroll`: `number`. Number of columns to scroll with next/prev buttons, same as `numberOfColumns` if not set explicitly
- `date`: `string | Date`. Displayed date in controlled mode
- `defaultDate`: `string | Date`. Initial displayed date in uncontrolled mode
- `defaultLevel`: `"month" | "year" | "decade"`. Initial displayed level (uncontrolled) Known values: "decade", "month", "year".
- `defaultValue`: `DatePickerValue<Type, DateValue>`. Default value for uncontrolled component
- `description`: `React.ReactNode`. Contents of `Input.Description` component. If not set, description is not displayed.
- `descriptionProps`: `(InputDescriptionProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Description` component
- `error`: `React.ReactNode`. Contents of `Input.Error` component. If not set, error is not displayed.
- `errorProps`: `(InputErrorProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Error` component
- `fullWidth`: `false | true`. Determines whether the list should take the full width of its container Known values: false, true.
- `inputSize`: `string`. HTML `size` attribute for the input element (number of visible characters)
- `inputWrapperOrder`: `("input" | "label" | "description" | "error")[]`. Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.
- `label`: `React.ReactNode`. Contents of `Input.Label` component. If not set, label is not displayed.
- `labelProps`: `(InputLabelProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Label` component
- `labelSeparator`: `string`. Separator between range value
- `leftSection`: `React.ReactNode`. Content section displayed on the left side of the input
- `leftSectionPointerEvents`: `"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "all" | "fill" | "stroke" | "painted" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke"`. Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). Known values: "-moz-initial", "all", "auto", "fill", "inherit", "initial", "none", "painted", "revert", "revert-layer", "stroke", "unset", "visible", "visibleFill", "visiblePainted", "visibleStroke".
- `leftSectionProps`: `React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>`. Props passed down to the `leftSection` element
- `leftSectionWidth`: `Property.Width<string | number>`. Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height
- `level`: `"month" | "year" | "decade"`. Current displayed level (controlled) Known values: "decade", "month", "year".
- `loading`: `false | true`. Displays loading indicator in the left or right section Known values: false, true.
- `loadingPosition`: `"left" | "right"`. Position of the loading indicator Known values: "left", "right".
- `locale`: `string`. Dayjs locale, defaults to value defined in DatesProvider
- `maxDate`: `string | Date`. Maximum possible date in `YYYY-MM-DD` format or Date object
- `maxLevel`: `"month" | "year" | "decade"`. Max level that user can go up to Known values: "decade", "month", "year".
- `minDate`: `string | Date`. Minimum possible date in `YYYY-MM-DD` format or Date object
- `nextLabel`: `string`. Next button `aria-label`
- `numberOfColumns`: `number`. Number of columns displayed next to each other
- `pointer`: `false | true`. Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component="button"` for Select/DatePicker). Known values: false, true.
- `popoverProps`: `Partial<Omit<PopoverProps, "children">>`. Props passed down to `Popover` component
- `presets`: `MonthPickerPreset<Type>[]`. Predefined values to pick from
- `previousLabel`: `string`. Previous button `aria-label`
- `rightSection`: `React.ReactNode`. Content section displayed on the right side of the input
- `rightSectionPointerEvents`: `"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "all" | "fill" | "stroke" | "painted" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke"`. Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). Known values: "-moz-initial", "all", "auto", "fill", "inherit", "initial", "none", "painted", "revert", "revert-layer", "stroke", "unset", "visible", "visibleFill", "visiblePainted", "visibleStroke".
- `rightSectionProps`: `React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>`. Props passed down to the `rightSection` element
- `rightSectionWidth`: `Property.Width<string | number>`. Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height
- `size`: `"xs" | "sm" | "md" | "lg" | "xl"`. Component size Known values: "lg", "md", "sm", "xl", "xs".
- `sortDates`: `false | true`. Determines whether dates values should be sorted before `onChange` call, only applicable with type="multiple" Known values: false, true.
- `success`: `React.ReactNode`. Contents of `Input.Success` component. If not set, success is not displayed.
- `successProps`: `(InputSuccessProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Success` component
- `type`: `DatePickerType | Type`. Picker type: range, multiple or default Known values: "default", "multiple", "range".
- `unstyled`: `false | true`.  Known values: false, true.
- `value`: `DatePickerValue<Type, DateValue>`. Value for controlled component
- `valueFormat`: `string`. `dayjs` format for input value
- `variant`: `(string & {}) | InputVariant`.  Known values: "default", "filled", "unstyled".
- `withAsterisk`: `false | true`. If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. Known values: false, true.
- `withCellSpacing`: `false | true`. Determines whether controls should be separated Known values: false, true.
- `withErrorStyles`: `false | true`. Determines whether the input should have red border and red text color when the `error` prop is set Known values: false, true.
- `withNativeLevelSelect`: `false | true`. Determines whether level select controls should be rendered as native `<select>` elements Known values: false, true.
- `withSuccessStyles`: `false | true`. Determines whether the input should have green border when the `success` prop is set Known values: false, true.
- `wrapperProps`: `WrapperProps`. Props passed down to the root element

- `dropdownType` is blocked: Modal picker mode escapes the widget overlay boundary
- `modalProps` is blocked: Modal picker configuration escapes the widget overlay boundary
- Include a textual date when the visual calendar carries meaning.

[Upstream documentation for MonthPickerInput](https://mantine.dev/dates/month-picker-input/)

## MonthsList

@mantine/dates; dates; safety: wrapped.

- `align`: `"center" | "left" | "right"`.  Known values: "center", "left", "right".
- `attributes`: `{ monthsList?: Record<string, any>; monthsListCell?: Record<string, any>; monthsListRow?: Record<string, any>; monthsListControl?: Record<...>; }`.
- `color`: `string`.
- `fullWidth`: `false | true`. Determines whether the list should take the full width of its container Known values: false, true.
- `locale`: `string`. Dayjs locale, defaults to value defined in DatesProvider
- `maxDate`: `string | Date`. Maximum possible date in `YYYY-MM-DD` format or Date object
- `minDate`: `string | Date`. Minimum possible date in `YYYY-MM-DD` format or Date object
- `size`: `"xs" | "sm" | "md" | "lg" | "xl"`. Component size Known values: "lg", "md", "sm", "xl", "xs".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `withCellSpacing`: `false | true`. Determines whether controls should be separated Known values: false, true.
- `year`: `string`. Required. Year for which months list should be displayed

- Include a textual date when the visual calendar carries meaning.

[Upstream documentation for MonthsList](https://mantine.dev/dates/months-list/)

## MultiSelect

@mantine/core; interaction; safety: wrapped.

Bind a temporary string[] input with `bind`. Initialize with `defaultValue`; reset with `resetKey`.

- `attributes`: `{ input?: Record<string, any>; label?: Record<string, any>; option?: Record<string, any>; section?: Record<string, any>; ... 14 more ...; inputField?: Record<...>; }`.
- `checkIconPosition`: `"left" | "right"`. Position of the checkmark icon shown next to selected options in the dropdown Known values: "left", "right".
- `chevronColor`: `DefaultMantineColor`. Controls color of the default chevron Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `clearButtonProps`: `InputClearButtonProps`. Props passed down to the clear button
- `clearSearchOnChange`: `false | true`. Clear search value when item is selected Known values: false, true.
- `clearSectionMode`: `"both" | "rightSection" | "clear"`. Determines how the clear button and rightSection are rendered Known values: "both", "clear", "rightSection".
- `clearable`: `false | true`. When enabled, displays a clear button to remove all selected values (hidden when component is empty, disabled, or read-only) Known values: false, true.
- `color`: `string`.
- `comboboxProps`: `ComboboxProps`. Props passed down to `Combobox` component
- `data`: `ComboboxData<Value>`. Data used to generate options. Values must be unique, otherwise an error will be thrown and component will not render.
- `defaultDropdownOpened`: `false | true`. Uncontrolled dropdown initial opened state Known values: false, true.
- `defaultSearchValue`: `string`. Default search value
- `defaultValue`: `Value[]`. Uncontrolled component default value
- `description`: `React.ReactNode`. Contents of `Input.Description` component. If not set, description is not displayed.
- `descriptionProps`: `(InputDescriptionProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Description` component
- `dropdownOpened`: `false | true`. Controlled dropdown opened state Known values: false, true.
- `error`: `React.ReactNode`. Contents of `Input.Error` component. If not set, error is not displayed.
- `errorProps`: `(InputErrorProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Error` component
- `floatingHeight`: `"viewport"`. If set to `'viewport'`, the dropdown grows to fill the available vertical space in the viewport. Disables the `flip` middleware. Known values: "viewport".
- `hiddenInputProps`: `Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "value">`. Props passed down to the hidden input
- `hiddenInputValuesDivider`: `string`. Divider used to separate values in the hidden input `value` attribute
- `hidePickedOptions`: `false | true`. When enabled, selected options are hidden from the dropdown list Known values: false, true.
- `inputSize`: `string`. HTML `size` attribute for the input element (number of visible characters)
- `inputWrapperOrder`: `("input" | "label" | "description" | "error")[]`. Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.
- `label`: `React.ReactNode`. Contents of `Input.Label` component. If not set, label is not displayed.
- `labelProps`: `(InputLabelProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Label` component
- `leftSection`: `React.ReactNode`. Content section displayed on the left side of the input
- `leftSectionPointerEvents`: `"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "all" | "fill" | "stroke" | "painted" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke"`. Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). Known values: "-moz-initial", "all", "auto", "fill", "inherit", "initial", "none", "painted", "revert", "revert-layer", "stroke", "unset", "visible", "visibleFill", "visiblePainted", "visibleStroke".
- `leftSectionProps`: `React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>`. Props passed down to the `leftSection` element
- `leftSectionWidth`: `Property.Width<string | number>`. Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height
- `limit`: `number`. Maximum number of options displayed at a time, `Infinity` by default
- `loading`: `false | true`. Displays loading indicator in the left or right section Known values: false, true.
- `loadingPosition`: `"left" | "right"`. Position of the loading indicator Known values: "left", "right".
- `maxDropdownHeight`: `string | number`. `max-height` of the dropdown, only applicable when `withScrollArea` prop is `true`, `250` by default
- `maxValues`: `number`. Maximum number of values, no limit if not set
- `nothingFoundMessage`: `React.ReactNode`. Message displayed when no options match the search query (when searchable is enabled) or when the data array is empty. If not set, the dropdown will be hidden instead.
- `openOnFocus`: `false | true`. Controls whether dropdown opens when the input receives focus Known values: false, true.
- `pointer`: `false | true`. Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component="button"` for Select/DatePicker). Known values: false, true.
- `rightSection`: `React.ReactNode`. Content section displayed on the right side of the input
- `rightSectionPointerEvents`: `"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "all" | "fill" | "stroke" | "painted" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke"`. Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). Known values: "-moz-initial", "all", "auto", "fill", "inherit", "initial", "none", "painted", "revert", "revert-layer", "stroke", "unset", "visible", "visibleFill", "visiblePainted", "visibleStroke".
- `rightSectionProps`: `React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>`. Props passed down to the `rightSection` element
- `rightSectionWidth`: `Property.Width<string | number>`. Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height
- `scrollAreaProps`: `ScrollAreaProps`. Props passed down to the underlying `ScrollArea` component in the dropdown
- `searchValue`: `string`. Controlled search value
- `searchable`: `false | true`. Allows searching through options by user input Known values: false, true.
- `selectFirstOptionOnChange`: `false | true`. If set, the first option is selected when value changes, `false` by default Known values: false, true.
- `selectFirstOptionOnDropdownOpen`: `false | true`. If set, the first option is selected when dropdown opens, `false` by default Known values: false, true.
- `size`: `MantineSize | (string & {})`. Controls input `height`, horizontal `padding`, and `font-size` Known values: "lg", "md", "sm", "xl", "xs".
- `success`: `React.ReactNode`. Contents of `Input.Success` component. If not set, success is not displayed.
- `successProps`: `(InputSuccessProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Success` component
- `type`: `HTMLInputTypeAttribute`.  Known values: "button", "checkbox", "color", "date", "datetime-local", "email", "file", "hidden", "image", "month", "number", "password", "radio", "range", "reset", "search", "submit", "tel", "text", "time", "url", "week".
- `unstyled`: `false | true`.  Known values: false, true.
- `value`: `Value[]`. Controlled component value
- `variant`: `string`.
- `withAlignedLabels`: `false | true`. If set, unchecked labels are aligned with checked ones Known values: false, true.
- `withAsterisk`: `false | true`. If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. Known values: false, true.
- `withCheckIcon`: `false | true`. If set, the check icon is displayed near the selected option label Known values: false, true.
- `withErrorStyles`: `false | true`. Determines whether the input should have red border and red text color when the `error` prop is set Known values: false, true.
- `withPillsReorder`: `false | true`. If set, selected values can be reordered by dragging pills. Disabled when `disabled` or `readOnly` is set. Known values: false, true.
- `withScrollArea`: `false | true`. Determines whether the options should be wrapped with `ScrollArea.AutoSize`, `true` by default Known values: false, true.
- `withSuccessStyles`: `false | true`. Determines whether the input should have green border when the `success` prop is set Known values: false, true.
- `wrapperProps`: `WrapperProps`. Props passed down to the root element

- Provide a visible label or aria-label.

[Upstream documentation for MultiSelect](https://mantine.dev/core/multi-select/)

## NativeScrollArea

@mantine/core; content; safety: wrapped.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for NativeScrollArea](https://mantine.dev/core/native-scroll-area/)

## NativeSelect

@mantine/core; interaction; safety: wrapped.

Bind a temporary string input with `bind`. Initialize with `defaultValue`; reset with `resetKey`.

- `attributes`: `{ input?: Record<string, any>; label?: Record<string, any>; section?: Record<string, any>; root?: Record<string, any>; ... 5 more ...; bottomSection?: Record<...>; }`.
- `autoComplete`: `string`.
- `color`: `string`.
- `data`: `ComboboxStringGroupData`. Data used to render options. Accepts strings, objects with label/value, or grouped options. If `children` prop is provided, `data` will be ignored.
- `description`: `React.ReactNode`. Contents of `Input.Description` component. If not set, description is not displayed.
- `descriptionProps`: `(InputDescriptionProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Description` component
- `error`: `React.ReactNode`. Contents of `Input.Error` component. If not set, error is not displayed.
- `errorProps`: `(InputErrorProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Error` component
- `inputSize`: `string`. HTML `size` attribute for the input element (number of visible characters)
- `inputWrapperOrder`: `("input" | "label" | "description" | "error")[]`. Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.
- `label`: `React.ReactNode`. Contents of `Input.Label` component. If not set, label is not displayed.
- `labelProps`: `(InputLabelProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Label` component
- `leftSection`: `React.ReactNode`. Content section displayed on the left side of the input
- `leftSectionPointerEvents`: `"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "all" | "fill" | "stroke" | "painted" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke"`. Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). Known values: "-moz-initial", "all", "auto", "fill", "inherit", "initial", "none", "painted", "revert", "revert-layer", "stroke", "unset", "visible", "visibleFill", "visiblePainted", "visibleStroke".
- `leftSectionProps`: `React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>`. Props passed down to the `leftSection` element
- `leftSectionWidth`: `Property.Width<string | number>`. Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height
- `loading`: `false | true`. Displays loading indicator in the left or right section Known values: false, true.
- `loadingPosition`: `"left" | "right"`. Position of the loading indicator Known values: "left", "right".
- `rightSection`: `React.ReactNode`. Content section displayed on the right side of the input
- `rightSectionPointerEvents`: `"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "all" | "fill" | "stroke" | "painted" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke"`. Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). Known values: "-moz-initial", "all", "auto", "fill", "inherit", "initial", "none", "painted", "revert", "revert-layer", "stroke", "unset", "visible", "visibleFill", "visiblePainted", "visibleStroke".
- `rightSectionProps`: `React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>`. Props passed down to the `rightSection` element
- `rightSectionWidth`: `Property.Width<string | number>`. Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height
- `size`: `MantineSize | (string & {})`. Controls input `height`, horizontal `padding`, and `font-size` Known values: "lg", "md", "sm", "xl", "xs".
- `success`: `React.ReactNode`. Contents of `Input.Success` component. If not set, success is not displayed.
- `successProps`: `(InputSuccessProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Success` component
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `withAsterisk`: `false | true`. If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. Known values: false, true.
- `withErrorStyles`: `false | true`. Determines whether the input should have red border and red text color when the `error` prop is set Known values: false, true.
- `withSuccessStyles`: `false | true`. Determines whether the input should have green border when the `success` prop is set Known values: false, true.
- `wrapperProps`: `WrapperProps`. Props passed down to the root element

- Provide a visible label or aria-label.

[Upstream documentation for NativeSelect](https://mantine.dev/core/native-select/)

## NavLink

@mantine/core; navigation; safety: wrapped.

- `active`: `false | true`. Determines whether the link should have active styles Known values: false, true.
- `attributes`: `{ body?: Record<string, any>; label?: Record<string, any>; section?: Record<string, any>; children?: Record<string, any>; root?: Record<...>; chevron?: Record<...>; description?: Record<...>; collapse?: Record<...>; } | u...`.
- `autoContrast`: `false | true`. If set, adjusts text color based on background color for `filled` variant Known values: false, true.
- `childrenOffset`: `MantineSpacing`. Controls indentation of nested NavLink components, key of `theme.spacing` or any valid CSS value Known values: "lg", "md", "sm", "xl", "xs".
- `color`: `DefaultMantineColor`. Key of `theme.colors` or any valid CSS color to control active styles Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `defaultOpened`: `false | true`. Uncontrolled nested items collapse initial state Known values: false, true.
- `description`: `React.ReactNode`. Link description, displayed below the label
- `disableRightSectionRotation`: `false | true`. If set, right section will not be rotated when collapse is opened Known values: false, true.
- `keepMounted`: `false | true`. If set to `false`, child `NavLinks` are unmounted when collapsed Known values: false, true.
- `label`: `React.ReactNode`. Main link label
- `leftSection`: `React.ReactNode`. Section displayed on the left side of the label
- `noWrap`: `false | true`. If set, label and description are truncated with ellipsis instead of wrapping Known values: false, true.
- `opened`: `false | true`. Controlled nested items collapse state Known values: false, true.
- `rightSection`: `React.ReactNode`. Section displayed on the right side of the label
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `(string & {}) | NavLinkVariant`.  Known values: "filled", "light", "subtle".

- Provide an accessible label for controls without visible text.

[Upstream documentation for NavLink](https://mantine.dev/core/nav-link/)

## Notification

@mantine/core; feedback; safety: wrapped.

- `attributes`: `{ body?: Record<string, any>; title?: Record<string, any>; root?: Record<string, any>; icon?: Record<string, any>; loader?: Record<...>; closeButton?: Record<...>; description?: Record<...>; }`.
- `closeButtonProps`: `(__CloseButtonProps & ElementProps<"button"> & DataAttributes)`. Props passed down to the close button
- `color`: `DefaultMantineColor`. Controls icon background color or notification accent line color, key of `theme.colors` or any valid CSS color. When `icon` is provided, sets the icon background color. When no icon is provided, sets the colored accent line on the left. Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `icon`: `React.ReactNode`. Notification icon, replaces color line
- `loaderProps`: `LoaderProps`. Props passed down to the `Loader` component
- `loading`: `false | true`. If set, displays a `Loader` component instead of the icon. Takes precedence over the `icon` prop if both are provided. Known values: false, true.
- `title`: `React.ReactNode`. Notification title, displayed above the message body
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `withCloseButton`: `false | true`. If set, the close button is visible Known values: false, true.

- Do not rely on color alone to communicate status.

[Upstream documentation for Notification](https://mantine.dev/core/notification/)

## NumberFormatter

@mantine/core; content; safety: wrapped.

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

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for NumberFormatter](https://mantine.dev/core/number-formatter/)

## NumberInput

@mantine/core; interaction; safety: wrapped.

Bind a temporary number input with `bind`. Initialize with `defaultValue`; reset with `resetKey`.

- `allowDecimal`: `false | true`. If set, decimal values are allowed Known values: false, true.
- `allowLeadingZeros`: `false | true`. Determines whether leading zeros are allowed during input. If `false`, leading zeros are removed as you type (e.g., typing `007` results in `7`). Works in conjunction with `trimLeadingZeroesOnBlur`. Known values: false, true.
- `allowNegative`: `false | true`. Determines whether negative numbers are allowed. If `false`, the input will not accept negative values, and the decrement button will stop at `0` (when `min` is not set). Known values: false, true.
- `allowedDecimalSeparators`: `string[]`. Characters which when pressed result in a decimal separator. These characters will be replaced by the `decimalSeparator` in the input value.
- `attributes`: `{ input?: Record<string, any>; label?: Record<string, any>; section?: Record<string, any>; root?: Record<string, any>; ... 7 more ...; controls?: Record<...>; }`.
- `clampBehavior`: `"none" | "strict" | "blur"`. Controls how values are clamped to the `min`/`max` range: - `'blur'` (default): User can type any value, but it's clamped when the input loses focus - `'strict'`: User cannot type values outside the range - `'none'`: No clamping; `min`/`max` only apply to increment/decrement controls and arrow keys Known values: "blur", "none", "strict".
- `color`: `string`.
- `decimalScale`: `number`. Limits the number of digits that can be entered after the decimal point
- `decimalSeparator`: `string`. Character used as a decimal separator. Generally used with `allowedDecimalSeparators` prop.
- `defaultValue`: `NumberInputValue<T>`. Uncontrolled component default value
- `description`: `React.ReactNode`. Contents of `Input.Description` component. If not set, description is not displayed.
- `descriptionProps`: `(InputDescriptionProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Description` component
- `error`: `React.ReactNode`. Contents of `Input.Error` component. If not set, error is not displayed.
- `errorProps`: `(InputErrorProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Error` component
- `fixedDecimalScale`: `false | true`. If `true`, automatically pads the decimal part with zeros to match `decimalScale` (e.g., with `decimalScale={2}`, typing `5.1` displays as `5.10`). Requires `decimalScale` to be set. Known values: false, true.
- `hideControls`: `false | true`. If set, the up/down controls are hidden Known values: false, true.
- `inputSize`: `string`. HTML `size` attribute for the input element (number of visible characters)
- `inputWrapperOrder`: `("input" | "label" | "description" | "error")[]`. Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.
- `label`: `React.ReactNode`. Contents of `Input.Label` component. If not set, label is not displayed.
- `labelProps`: `(InputLabelProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Label` component
- `leftSection`: `React.ReactNode`. Content section displayed on the left side of the input
- `leftSectionPointerEvents`: `"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "all" | "fill" | "stroke" | "painted" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke"`. Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). Known values: "-moz-initial", "all", "auto", "fill", "inherit", "initial", "none", "painted", "revert", "revert-layer", "stroke", "unset", "visible", "visibleFill", "visiblePainted", "visibleStroke".
- `leftSectionProps`: `React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>`. Props passed down to the `leftSection` element
- `leftSectionWidth`: `Property.Width<string | number>`. Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height
- `loading`: `false | true`. Displays loading indicator in the left or right section Known values: false, true.
- `loadingPosition`: `"left" | "right"`. Position of the loading indicator Known values: "left", "right".
- `max`: `T`. Maximum possible value
- `min`: `T`. Minimum possible value
- `rightSection`: `React.ReactNode`. Content section displayed on the right side of the input
- `rightSectionPointerEvents`: `"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "all" | "fill" | "stroke" | "painted" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke"`. Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). Known values: "-moz-initial", "all", "auto", "fill", "inherit", "initial", "none", "painted", "revert", "revert-layer", "stroke", "unset", "visible", "visibleFill", "visiblePainted", "visibleStroke".
- `rightSectionProps`: `React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>`. Props passed down to the `rightSection` element
- `rightSectionWidth`: `Property.Width<string | number>`. Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height
- `selectAllOnFocus`: `false | true`. If set, all text is selected when the input receives focus Known values: false, true.
- `size`: `MantineSize | (string & {})`. Controls input `height`, horizontal `padding`, and `font-size` Known values: "lg", "md", "sm", "xl", "xs".
- `startValue`: `T`. Value used when incrementing/decrementing an empty input. If `min` is set and `startValue < min`, `min` is used instead.
- `step`: `T`. Number by which value will be incremented/decremented with up/down controls and keyboard arrows
- `stepHoldDelay`: `number`. Initial delay in milliseconds before stepping the value.
- `success`: `React.ReactNode`. Contents of `Input.Success` component. If not set, success is not displayed.
- `successProps`: `(InputSuccessProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Success` component
- `suffix`: `string`. Suffix added after the input value
- `thousandSeparator`: `string | false | true`. A character used to separate thousands
- `thousandsGroupStyle`: `"none" | "thousand" | "lakh" | "wan"`. Defines the thousand grouping style. 'thousand' (1,000), 'lakh' (1,00,000), 'wan' (1,0000), 'none'. Known values: "lakh", "none", "thousand", "wan".
- `trimLeadingZeroesOnBlur`: `false | true`. If set, leading zeros are removed on blur. For example, `00100` -> `100` Known values: false, true.
- `type`: `"text" | "tel" | "password"`. Controls input `type` attribute Known values: "password", "tel", "text".
- `unstyled`: `false | true`.  Known values: false, true.
- `value`: `NumberInputValue<T>`. Controlled component value
- `valueIsNumericString`: `false | true`. Advanced: Set to `true` if you're passing numeric strings (e.g., `"12345"`) and using formatting props like `prefix` or `suffix`. In most cases, you don't need this prop. See [react-number-format docs](https://www.npmjs.com/package/react-number-format) for details. Known values: false, true.
- `variant`: `(string & {}) | InputVariant`.  Known values: "default", "filled", "unstyled".
- `withAsterisk`: `false | true`. If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. Known values: false, true.
- `withErrorStyles`: `false | true`. Determines whether the input should have red border and red text color when the `error` prop is set Known values: false, true.
- `withKeyboardEvents`: `false | true`. If set, up/down keyboard events increment/decrement value Known values: false, true.
- `withSuccessStyles`: `false | true`. Determines whether the input should have green border when the `success` prop is set Known values: false, true.
- `wrapperProps`: `WrapperProps`. Props passed down to the root element

- Provide a visible label or aria-label.

[Upstream documentation for NumberInput](https://mantine.dev/core/number-input/)

## OptionalPortal

@mantine/core; blocked; safety: denied.

Unavailable: Can render outside the widget root

[Upstream documentation for OptionalPortal](https://mantine.dev/core/optional-portal/)

## OptionsDropdown

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for OptionsDropdown](https://mantine.dev/core/options-dropdown/)

## OverflowList

@mantine/core; content; safety: wrapped.

- `attributes`: `{ root?: Record<string, any>; }`.
- `collapseFrom`: `"end" | "start"`. Direction from which items are collapsed when they overflow, `'end'` collapses last items, `'start'` collapses first items Known values: "end", "start".
- `color`: `string`.
- `data`: `T[]`. Required. Array of items to display
- `gap`: `MantineSpacing`. Key of `theme.spacing` or any valid CSS value for `gap`, numbers are converted to rem Known values: "lg", "md", "sm", "xl", "xs".
- `maxRows`: `number`. Number of rows to display
- `maxVisibleItems`: `number`. Maximum number of visible items
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for OverflowList](https://mantine.dev/core/overflow-list/)

## Overlay

@mantine/core; feedback; safety: wrapped.

- `attributes`: `{ root?: Record<string, any>; }`.
- `backgroundOpacity`: `number`. Overlay `background-color` opacity 0–1, ignored when `gradient` prop is set
- `blur`: `string | number`. Overlay background blur in px (converted to rem). Applies `backdrop-filter: blur()`. Note: backdrop-filter is not supported in all browsers.
- `center`: `false | true`. Centers content inside the overlay using flexbox (sets display: flex, align-items: center, justify-content: center) Known values: false, true.
- `color`: `Property.BackgroundColor`. Overlay `background-color`
- `fixed`: `false | true`. Changes position from `absolute` to `fixed` (viewport-relative instead of parent-relative) Known values: false, true.
- `gradient`: `string`. Changes overlay to gradient. If set, both `color` and `backgroundOpacity` props are ignored.
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.

- Do not rely on color alone to communicate status.

[Upstream documentation for Overlay](https://mantine.dev/core/overlay/)

## PaginatedList

@homarr/widgets; interaction; safety: allowed. Renders a bounded page of collection items.

- `pageSize`: `number`.

- Provide a visible label or aria-label.

[Upstream documentation for PaginatedList](https://homarr.dev/docs/management/custom-widgets/)

## Pagination

@mantine/core; interaction; safety: wrapped.

Bind a temporary number input with `bind`. Initialize with `defaultValue`; reset with `resetKey`.

Subcomponents: Pagination.Control, Pagination.Dots, Pagination.First, Pagination.Items, Pagination.Label, Pagination.Last, Pagination.Next, Pagination.Previous, Pagination.Root.

- `attributes`: `{ label?: Record<string, any>; root?: Record<string, any>; control?: Record<string, any>; dots?: Record<string, any>; items?: Record<...>; }`.
- `autoContrast`: `false | true`. If set, adjusts text color based on the active page background color to ensure sufficient contrast Known values: false, true.
- `boundaries`: `number`. Number of elements visible on the left/right edges
- `color`: `DefaultMantineColor`. Key of `theme.colors`, active item color Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `defaultValue`: `number`. Active page for uncontrolled component, must be an integer in [1, total] interval
- `gap`: `MantineSpacing`. Key of `theme.spacing`, gap between controls Known values: "lg", "md", "sm", "xl", "xs".
- `hideWithOnePage`: `false | true`. If set, the pagination is hidden when only one page is available (`total={1}`) Known values: false, true.
- `layout`: `"default" | "responsive"`. Determines how the pagination is displayed, `'responsive'` uses CSS container queries to switch between pages and a compact label Known values: "default", "responsive".
- `siblings`: `number`. Number of siblings displayed on the left/right side of the selected page
- `size`: `number | MantineSize | (string & {}) | "input-xs" | "input-sm" | "input-md" | "input-lg" | "input-xl"`. `height` and `min-width` of controls Known values: "input-lg", "input-md", "input-sm", "input-xl", "input-xs", "lg", "md", "sm", "xl", "xs".
- `startValue`: `number`. Starting page number, defaults to 1
- `total`: `number`. Required. Total number of pages, must be an integer
- `unstyled`: `false | true`.  Known values: false, true.
- `value`: `number`. Active page for controlled component, must be an integer in [1, total] interval
- `variant`: `string`.
- `withControls`: `false | true`. If set, next/previous controls are displayed Known values: false, true.
- `withEdges`: `false | true`. If set, first/last controls are displayed Known values: false, true.
- `withPages`: `false | true`. If set to `false`, page number buttons are hidden, only next/previous controls remain Known values: false, true.

- Provide a visible label or aria-label.

[Upstream documentation for Pagination](https://mantine.dev/core/pagination/)

## Pagination.Control

@mantine/core; interaction; safety: wrapped.

- `active`: `false | true`. Applies active styles, adds `data-active` attribute Known values: false, true.
- `color`: `string`.
- `styles`: `Partial<Record<"control", CSSProperties>>`.
- `type`: `"button" | "submit" | "reset"`.  Known values: "button", "reset", "submit".
- `variant`: `string`.
- `withPadding`: `false | true`. Applies padding Known values: false, true.

- Provide a visible label or aria-label.

[Upstream documentation for Pagination.Control](https://mantine.dev/core/pagination/)

## Pagination.Dots

@mantine/core; interaction; safety: wrapped.

- `color`: `string`.
- `styles`: `Partial<Record<"dots", CSSProperties>>`.
- `variant`: `string`.

- Provide a visible label or aria-label.

[Upstream documentation for Pagination.Dots](https://mantine.dev/core/pagination/)

## Pagination.First

@mantine/core; interaction; safety: wrapped.

- Provide a visible label or aria-label.

[Upstream documentation for Pagination.First](https://mantine.dev/core/pagination/)

## Pagination.Items

@mantine/core; interaction; safety: wrapped.

- Provide a visible label or aria-label.

[Upstream documentation for Pagination.Items](https://mantine.dev/core/pagination/)

## Pagination.Label

@mantine/core; interaction; safety: wrapped.

- `color`: `string`.
- `variant`: `string`.

- Provide a visible label or aria-label.

[Upstream documentation for Pagination.Label](https://mantine.dev/core/pagination/)

## Pagination.Last

@mantine/core; interaction; safety: wrapped.

- Provide a visible label or aria-label.

[Upstream documentation for Pagination.Last](https://mantine.dev/core/pagination/)

## Pagination.Next

@mantine/core; interaction; safety: wrapped.

- Provide a visible label or aria-label.

[Upstream documentation for Pagination.Next](https://mantine.dev/core/pagination/)

## Pagination.Previous

@mantine/core; interaction; safety: wrapped.

- Provide a visible label or aria-label.

[Upstream documentation for Pagination.Previous](https://mantine.dev/core/pagination/)

## Pagination.Root

@mantine/core; interaction; safety: wrapped.

- `attributes`: `{ label?: Record<string, any>; root?: Record<string, any>; control?: Record<string, any>; dots?: Record<string, any>; items?: Record<...>; }`.
- `autoContrast`: `false | true`. If set, adjusts text color based on the active page background color to ensure sufficient contrast Known values: false, true.
- `boundaries`: `number`. Number of elements visible on the left/right edges
- `color`: `DefaultMantineColor`. Key of `theme.colors`, active item color Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `defaultValue`: `number`. Active page for uncontrolled component, must be an integer in [1, total] interval
- `layout`: `"default" | "responsive"`. Determines how the pagination is displayed, `'responsive'` uses CSS container queries to switch between pages and a compact label Known values: "default", "responsive".
- `siblings`: `number`. Number of siblings displayed on the left/right side of the selected page
- `size`: `number | MantineSize | (string & {}) | "input-xs" | "input-sm" | "input-md" | "input-lg" | "input-xl"`. `height` and `min-width` of controls Known values: "input-lg", "input-md", "input-sm", "input-xl", "input-xs", "lg", "md", "sm", "xl", "xs".
- `startValue`: `number`. Starting page number, defaults to 1
- `total`: `number`. Required. Total number of pages, must be an integer
- `unstyled`: `false | true`.  Known values: false, true.
- `value`: `number`. Active page for controlled component, must be an integer in [1, total] interval
- `variant`: `string`.

- Provide a visible label or aria-label.

[Upstream documentation for Pagination.Root](https://mantine.dev/core/pagination/)

## PaginationControl

@mantine/core; content; safety: wrapped.

- `active`: `false | true`. Applies active styles, adds `data-active` attribute Known values: false, true.
- `color`: `string`.
- `styles`: `Partial<Record<"control", CSSProperties>>`.
- `type`: `"button" | "submit" | "reset"`.  Known values: "button", "reset", "submit".
- `variant`: `string`.
- `withPadding`: `false | true`. Applies padding Known values: false, true.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for PaginationControl](https://mantine.dev/core/pagination-control/)

## PaginationDots

@mantine/core; content; safety: wrapped.

- `color`: `string`.
- `styles`: `Partial<Record<"dots", CSSProperties>>`.
- `variant`: `string`.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for PaginationDots](https://mantine.dev/core/pagination-dots/)

## PaginationFirst

@mantine/core; content; safety: wrapped.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for PaginationFirst](https://mantine.dev/core/pagination-first/)

## PaginationItems

@mantine/core; content; safety: wrapped.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for PaginationItems](https://mantine.dev/core/pagination-items/)

## PaginationLabel

@mantine/core; content; safety: wrapped.

- `color`: `string`.
- `variant`: `string`.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for PaginationLabel](https://mantine.dev/core/pagination-label/)

## PaginationLast

@mantine/core; content; safety: wrapped.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for PaginationLast](https://mantine.dev/core/pagination-last/)

## PaginationNext

@mantine/core; content; safety: wrapped.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for PaginationNext](https://mantine.dev/core/pagination-next/)

## PaginationPrevious

@mantine/core; content; safety: wrapped.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for PaginationPrevious](https://mantine.dev/core/pagination-previous/)

## PaginationRoot

@mantine/core; content; safety: wrapped.

- `attributes`: `{ label?: Record<string, any>; root?: Record<string, any>; control?: Record<string, any>; dots?: Record<string, any>; items?: Record<...>; }`.
- `autoContrast`: `false | true`. If set, adjusts text color based on the active page background color to ensure sufficient contrast Known values: false, true.
- `boundaries`: `number`. Number of elements visible on the left/right edges
- `color`: `DefaultMantineColor`. Key of `theme.colors`, active item color Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `defaultValue`: `number`. Active page for uncontrolled component, must be an integer in [1, total] interval
- `layout`: `"default" | "responsive"`. Determines how the pagination is displayed, `'responsive'` uses CSS container queries to switch between pages and a compact label Known values: "default", "responsive".
- `siblings`: `number`. Number of siblings displayed on the left/right side of the selected page
- `size`: `number | MantineSize | (string & {}) | "input-xs" | "input-sm" | "input-md" | "input-lg" | "input-xl"`. `height` and `min-width` of controls Known values: "input-lg", "input-md", "input-sm", "input-xl", "input-xs", "lg", "md", "sm", "xl", "xs".
- `startValue`: `number`. Starting page number, defaults to 1
- `total`: `number`. Required. Total number of pages, must be an integer
- `unstyled`: `false | true`.  Known values: false, true.
- `value`: `number`. Active page for controlled component, must be an integer in [1, total] interval
- `variant`: `string`.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for PaginationRoot](https://mantine.dev/core/pagination-root/)

## Paper

@mantine/core; layout; safety: wrapped.

- `attributes`: `{ root?: Record<string, any>; }`.
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.

- Keep visual order consistent with reading order.

[Upstream documentation for Paper](https://mantine.dev/core/paper/)

## PasswordInput

@mantine/core; interaction; safety: wrapped.

Bind a temporary string input with `bind`. Initialize with `defaultValue`; reset with `resetKey`.

- `attributes`: `{ input?: Record<string, any>; label?: Record<string, any>; section?: Record<string, any>; root?: Record<string, any>; ... 7 more ...; innerInput?: Record<...>; }`.
- `color`: `string`.
- `defaultVisible`: `false | true`. If set, the input value is visible by default Known values: false, true.
- `description`: `React.ReactNode`. Contents of `Input.Description` component. If not set, description is not displayed.
- `descriptionProps`: `(InputDescriptionProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Description` component
- `error`: `React.ReactNode`. Contents of `Input.Error` component. If not set, error is not displayed.
- `errorProps`: `(InputErrorProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Error` component
- `inputSize`: `string`. HTML `size` attribute for the input element (number of visible characters)
- `inputWrapperOrder`: `("input" | "label" | "description" | "error")[]`. Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.
- `label`: `React.ReactNode`. Contents of `Input.Label` component. If not set, label is not displayed.
- `labelProps`: `(InputLabelProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Label` component
- `leftSection`: `React.ReactNode`. Content section displayed on the left side of the input
- `leftSectionPointerEvents`: `"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "all" | "fill" | "stroke" | "painted" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke"`. Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). Known values: "-moz-initial", "all", "auto", "fill", "inherit", "initial", "none", "painted", "revert", "revert-layer", "stroke", "unset", "visible", "visibleFill", "visiblePainted", "visibleStroke".
- `leftSectionProps`: `React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>`. Props passed down to the `leftSection` element
- `leftSectionWidth`: `Property.Width<string | number>`. Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height
- `loading`: `false | true`. Displays loading indicator in the left or right section Known values: false, true.
- `loadingPosition`: `"left" | "right"`. Position of the loading indicator Known values: "left", "right".
- `rightSection`: `React.ReactNode`. Content section displayed on the right side of the input
- `rightSectionPointerEvents`: `"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "all" | "fill" | "stroke" | "painted" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke"`. Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). Known values: "-moz-initial", "all", "auto", "fill", "inherit", "initial", "none", "painted", "revert", "revert-layer", "stroke", "unset", "visible", "visibleFill", "visiblePainted", "visibleStroke".
- `rightSectionProps`: `React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>`. Props passed down to the `rightSection` element
- `rightSectionWidth`: `Property.Width<string | number>`. Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height
- `size`: `MantineSize | (string & {})`. Controls input `height`, horizontal `padding`, and `font-size` Known values: "lg", "md", "sm", "xl", "xs".
- `success`: `React.ReactNode`. Contents of `Input.Success` component. If not set, success is not displayed.
- `successProps`: `(InputSuccessProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Success` component
- `type`: `HTMLInputTypeAttribute`.  Known values: "button", "checkbox", "color", "date", "datetime-local", "email", "file", "hidden", "image", "month", "number", "password", "radio", "range", "reset", "search", "submit", "tel", "text", "time", "url", "week".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `(string & {}) | InputVariant`.  Known values: "default", "filled", "unstyled".
- `visibilityToggleButtonProps`: `Record<string, any>`. Props passed down to the visibility toggle button
- `visibilityToggleFocusable`: `false | true`. If set, the visibility toggle button is focusable with keyboard Known values: false, true.
- `visible`: `false | true`. If set, the input value is visible Known values: false, true.
- `withAsterisk`: `false | true`. If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. Known values: false, true.
- `withErrorStyles`: `false | true`. Determines whether the input should have red border and red text color when the `error` prop is set Known values: false, true.
- `withSuccessStyles`: `false | true`. Determines whether the input should have green border when the `success` prop is set Known values: false, true.
- `wrapperProps`: `WrapperProps`. Props passed down to the root element

- Provide a visible label or aria-label.

[Upstream documentation for PasswordInput](https://mantine.dev/core/password-input/)

## PickerControl

@mantine/dates; dates; safety: wrapped.

- `attributes`: `{ pickerControl?: Record<string, any>; }`.
- `color`: `string`.
- `firstInRange`: `false | true`. Assigns first in range styles Known values: false, true.
- `fullWidth`: `false | true`. Determines whether the control should take the full width of its cell Known values: false, true.
- `inRange`: `false | true`. Assigns in range styles Known values: false, true.
- `lastInRange`: `false | true`. Assigns last in range styles Known values: false, true.
- `selected`: `false | true`. Assigns selected styles Known values: false, true.
- `size`: `"xs" | "sm" | "md" | "lg" | "xl"`. Component size Known values: "lg", "md", "sm", "xl", "xs".
- `type`: `"button" | "submit" | "reset"`.  Known values: "button", "reset", "submit".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.

- Include a textual date when the visual calendar carries meaning.

[Upstream documentation for PickerControl](https://mantine.dev/dates/picker-control/)

## PickerInputBase

@mantine/dates; blocked; safety: denied.

Unavailable: Internal date-input primitive

[Upstream documentation for PickerInputBase](https://mantine.dev/dates/picker-input-base/)

## PieChart

@mantine/charts; charts; safety: wrapped.

- `accessibilityLayer`: `false | true`. Determines whether the chart should be keyboard-navigable with the recharts accessibility layer, `true` by default Known values: false, true.
- `attributes`: `{ legend?: Record<string, any>; root?: Record<string, any>; tooltip?: Record<string, any>; legendItem?: Record<string, any>; ... 8 more ...; tooltipBody?: Record<...>; }`.
- `color`: `string`.
- `data`: `PieChartCell[]`. Required. Data used to render chart
- `endAngle`: `number`. Controls angle at which charts ends. Set to `0` to render the chart as semicircle.
- `labelColor`: `DefaultMantineColor`. Controls text color of all labels, white by default Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `labelsPosition`: `"inside" | "outside"`. Controls labels position relative to the segment Known values: "inside", "outside".
- `labelsType`: `"value" | "name" | "percent"`. Type of labels to display Known values: "name", "percent", "value".
- `legendProps`: `Omit<LegendProps, "ref">`. Props passed down to recharts `Legend` component
- `paddingAngle`: `number`. Controls padding between segments
- `pieChartProps`: `(PolarChartProps<unknown> & { ref?: React.Ref<SVGSVGElement>; })`. Props passed down to recharts `PieChart` component
- `pieProps`: `Partial<Omit<PieProps, "ref">>`. Props passed down to recharts `Pie` component
- `size`: `number`. Controls chart width and height, height is increased by 40 if `withLabels` prop is set. Cannot be less than `thickness`.
- `startAngle`: `number`. Controls angle at which chart starts. Set to `180` to render the chart as semicircle.
- `strokeColor`: `DefaultMantineColor`. Controls color of the segments stroke, by default depends on color scheme Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `strokeWidth`: `number`. Controls width of segments stroke
- `tooltipAnimationDuration`: `number`. Tooltip animation duration in ms
- `tooltipDataSource`: `"all" | "segment"`. Determines which data is displayed in the tooltip. `'all'` – display all values, `'segment'` – display only hovered segment. Known values: "all", "segment".
- `tooltipProps`: `Omit<TooltipProps<any, any>, "ref">`. Props passed down to `Tooltip` recharts component
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `withLabels`: `false | true`. Determines whether each segment should have associated label Known values: false, true.
- `withLabelsLine`: `false | true`. Determines whether segments labels should have lines that connect the segment with the label Known values: false, true.
- `withLegend`: `false | true`. Determines whether the legend should be displayed Known values: false, true.
- `withTooltip`: `false | true`. Determines whether the tooltip should be displayed when one of the section is hovered Known values: false, true.

- Include a nearby text summary of the chart data.

[Upstream documentation for PieChart](https://mantine.dev/charts/pie-chart/)

## Pill

@mantine/core; content; safety: wrapped.

Subcomponents: Pill.Group.

- `attributes`: `{ label?: Record<string, any>; root?: Record<string, any>; remove?: Record<string, any>; }`.
- `color`: `string`.
- `removeButtonProps`: `(CloseButtonProps & React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement>)`. Props passed down to the remove button
- `size`: `"xs" | "sm" | "md" | "lg" | "xl"`. Controls pill `font-size` and `padding` Known values: "lg", "md", "sm", "xl", "xs".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `(string & {}) | PillVariant`.  Known values: "contrast", "default".
- `withRemoveButton`: `false | true`. Controls visibility of the remove button Known values: false, true.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for Pill](https://mantine.dev/core/pill/)

## Pill.Group

@mantine/core; content; safety: wrapped.

- `attributes`: `{ group?: Record<string, any>; }`.
- `color`: `string`.
- `gap`: `number | MantineSize | (string & {})`. Controls spacing between pills, by default controlled by `size` Known values: "lg", "md", "sm", "xl", "xs".
- `size`: `MantineSize | (string & {})`. Controls size of the child `Pill` components and gap between them Known values: "lg", "md", "sm", "xl", "xs".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for Pill.Group](https://mantine.dev/core/pill/)

## PillGroup

@mantine/core; content; safety: wrapped.

- `attributes`: `{ group?: Record<string, any>; }`.
- `color`: `string`.
- `gap`: `number | MantineSize | (string & {})`. Controls spacing between pills, by default controlled by `size` Known values: "lg", "md", "sm", "xl", "xs".
- `size`: `MantineSize | (string & {})`. Controls size of the child `Pill` components and gap between them Known values: "lg", "md", "sm", "xl", "xs".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for PillGroup](https://mantine.dev/core/pill-group/)

## PillsInput

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

Subcomponents: PillsInput.Field.

[Upstream documentation for PillsInput](https://mantine.dev/core/pills-input/)

## PillsInput.Field

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for PillsInput.Field](https://mantine.dev/core/pills-input/)

## PillsInputField

@mantine/core; blocked; safety: denied.

Unavailable: Low-level composition primitive that requires authored callbacks

[Upstream documentation for PillsInputField](https://mantine.dev/core/pills-input-field/)

## PinInput

@mantine/core; interaction; safety: wrapped.

Bind a temporary string input with `bind`. Initialize with `defaultValue`; reset with `resetKey`.

- `ariaLabel`: `string`. `aria-label` attribute
- `attributes`: `{ input?: Record<string, any>; root?: Record<string, any>; pinInput?: Record<string, any>; }`.
- `color`: `string`.
- `defaultValue`: `string`. Uncontrolled component default value
- `error`: `false | true`. Sets `aria-invalid` attribute and applies error styles to all inputs Known values: false, true.
- `gap`: `MantineSpacing`. Key of `theme.spacing` or any valid CSS value to set `gap` between inputs, numbers are converted to rem Known values: "lg", "md", "sm", "xl", "xs".
- `hiddenInputProps`: `React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>`. Props passed down to the hidden input
- `inputType`: `React.HTMLInputTypeAttribute`. Inputs `type` attribute, inferred from the `type` prop if not specified Known values: "button", "checkbox", "color", "date", "datetime-local", "email", "file", "hidden", "image", "month", "number", "password", "radio", "range", "reset", "search", "submit", "tel", "text", "time", "url", "week".
- `length`: `number`. Number of inputs
- `manageFocus`: `false | true`. Determines whether focus should be moved automatically to the next input once filled Known values: false, true.
- `mask`: `false | true`. Changes input type to `"password"` Known values: false, true.
- `size`: `"xs" | "sm" | "md" | "lg" | "xl"`. Controls inputs `width` and `height` Known values: "lg", "md", "sm", "xl", "xs".
- `success`: `false | true`. Applies success styles to all inputs Known values: false, true.
- `type`: `"number" | RegExp | "alphanumeric"`. Determines which values can be entered Known values: "alphanumeric", "number".
- `unstyled`: `false | true`.  Known values: false, true.
- `value`: `string`. Controlled component value
- `variant`: `string`.

- Provide a visible label or aria-label.

[Upstream documentation for PinInput](https://mantine.dev/core/pin-input/)

## Popover

@mantine/core; navigation; safety: wrapped.

Bind a temporary boolean input with `bind`. Initialize with `defaultChecked`; reset with `resetKey`.

Subcomponents: Popover.ContextMenu, Popover.Dropdown, Popover.Target.

- `arrowOffset`: `number`. Arrow offset in px
- `arrowPosition`: `"center" | "side" | "merge"`. Arrow position Known values: "center", "merge", "side".
- `arrowRadius`: `number`. Arrow `border-radius` in px
- `arrowSize`: `number`. Arrow size in px
- `attributes`: `{ dropdown?: Record<string, any>; overlay?: Record<string, any>; arrow?: Record<string, any>; }`.
- `clickOutsideEvents`: `string[]`. Events that trigger outside clicks
- `closeOnClickOutside`: `false | true`. Determines whether dropdown should be closed on outside clicks Known values: false, true.
- `closeOnEscape`: `false | true`. Determines whether dropdown should be closed when `Escape` key is pressed Known values: false, true.
- `defaultOpened`: `false | true`. Initial opened state for uncontrolled component Known values: false, true.
- `floatingStrategy`: `"fixed" | "absolute"`. Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy) Known values: "absolute", "fixed".
- `hideDetached`: `false | true`. If set, the dropdown is hidden when the element is hidden with styles or not visible on the screen Known values: false, true.
- `keepMounted`: `false | true`. If set, the dropdown is not unmounted from the DOM when hidden. `display: none` styles are added instead. Known values: false, true.
- `keepMountedMode`: `"activity" | "display-none"`. Controls how the dropdown is hidden when `keepMounted` is set: `'activity'` – hidden with React 19 `Activity` component, `'display-none'` – hidden with `display: none` styles Known values: "activity", "display-none".
- `middlewares`: `PopoverMiddlewares`. Floating ui middlewares to configure position handling
- `offset`: `number | FloatingAxesOffsets`. Offset of the dropdown element
- `opened`: `false | true`. Controlled dropdown opened state Known values: false, true.
- `overlayProps`: `(OverlayProps & ElementProps<"div">)`. Props passed down to `Overlay` component
- `position`: `"left" | "right" | "bottom" | "top" | "left-end" | "left-start" | "right-end" | "right-start" | "bottom-end" | "bottom-start" | "top-end" | "top-start"`. Dropdown position relative to the target element Known values: "bottom", "bottom-end", "bottom-start", "left", "left-end", "left-start", "right", "right-end", "right-start", "top", "top-end", "top-start".
- `preventPositionChangeWhenVisible`: `false | true`. If `true`, the dropdown picks its side on open (flip runs once, preferring the `position` prop) and then never changes side — scrolling, resizing, and content size changes will not flip the dropdown. The side is recalculated fresh on the next open. Does not affect the `shift` middleware. Set to `false` to keep flip active and allow the dropdown to re-flip on every change. Known values: false, true.
- `returnFocus`: `false | true`. Determines whether focus should be automatically returned to control when dropdown closes Known values: false, true.
- `transitionProps`: `Partial<Omit<TransitionProps, "mounted">>`. Props passed down to the `Transition` component. Use to configure duration and animation type.
- `trapFocus`: `false | true`. Determines whether focus should be trapped within dropdown Known values: false, true.
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `width`: `PopoverWidth`. Dropdown width, or `'target'` to make dropdown width the same as target element
- `withArrow`: `false | true`. Determines whether component should have an arrow Known values: false, true.
- `withOverlay`: `false | true`. Determines whether the overlay should be displayed when the dropdown is opened Known values: false, true.
- `withRoles`: `false | true`. Determines whether dropdown and target elements should have accessible roles Known values: false, true.

- Provide an accessible label for controls without visible text.

[Upstream documentation for Popover](https://mantine.dev/core/popover/)

## Popover.ContextMenu

@mantine/core; navigation; safety: wrapped.

- `longPressDelay`: `number`. Delay in ms before a touch long-press opens the dropdown on touch devices, `500` by default

- Provide an accessible label for controls without visible text.

[Upstream documentation for Popover.ContextMenu](https://mantine.dev/core/popover/)

## Popover.Dropdown

@mantine/core; navigation; safety: wrapped.

- `color`: `string`.
- `styles`: `Partial<Record<PopoverStylesNames, CSSProperties>>`.
- `variant`: `string`.

- Provide an accessible label for controls without visible text.

[Upstream documentation for Popover.Dropdown](https://mantine.dev/core/popover/)

## Popover.Target

@mantine/core; navigation; safety: wrapped.

- `popupType`: `string`. Popup accessible type

- Provide an accessible label for controls without visible text.

[Upstream documentation for Popover.Target](https://mantine.dev/core/popover/)

## PopoverContextMenu

@mantine/core; navigation; safety: wrapped.

- `longPressDelay`: `number`. Delay in ms before a touch long-press opens the dropdown on touch devices, `500` by default

- Provide an accessible label for controls without visible text.

[Upstream documentation for PopoverContextMenu](https://mantine.dev/core/popover-context-menu/)

## PopoverDropdown

@mantine/core; navigation; safety: wrapped.

- `color`: `string`.
- `styles`: `Partial<Record<PopoverStylesNames, CSSProperties>>`.
- `variant`: `string`.

- Provide an accessible label for controls without visible text.

[Upstream documentation for PopoverDropdown](https://mantine.dev/core/popover-dropdown/)

## PopoverTarget

@mantine/core; navigation; safety: wrapped.

- `popupType`: `string`. Popup accessible type

- Provide an accessible label for controls without visible text.

[Upstream documentation for PopoverTarget](https://mantine.dev/core/popover-target/)

## Portal

@mantine/core; blocked; safety: denied.

Unavailable: Can render outside the widget root

[Upstream documentation for Portal](https://mantine.dev/core/portal/)

## Progress

@mantine/core; feedback; safety: wrapped.

Subcomponents: Progress.Label, Progress.Root, Progress.Section.

- `animated`: `false | true`. If set, the sections stripes are animated (automatically enables striped) Known values: false, true.
- `attributes`: `{ label?: Record<string, any>; section?: Record<string, any>; root?: Record<string, any>; }`.
- `autoContrast`: `false | true`. If set, adjusts label text color based on section background color for readability Known values: false, true.
- `color`: `DefaultMantineColor`. Key of `theme.colors` or any valid CSS value Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `orientation`: `"horizontal" | "vertical"`. Controls orientation Known values: "horizontal", "vertical".
- `size`: `number | MantineSize | (string & {})`. Controls track height Known values: "lg", "md", "sm", "xl", "xs".
- `striped`: `false | true`. If set, the section has stripes Known values: false, true.
- `transitionDuration`: `number`. Controls sections width transition duration, value is specified in ms
- `unstyled`: `false | true`.  Known values: false, true.
- `value`: `number`. Required. Value of the progress
- `variant`: `string`.

- Do not rely on color alone to communicate status.

[Upstream documentation for Progress](https://mantine.dev/core/progress/)

## Progress.Label

@mantine/core; feedback; safety: wrapped.

- `color`: `string`.
- `variant`: `string`.

- Do not rely on color alone to communicate status.

[Upstream documentation for Progress.Label](https://mantine.dev/core/progress/)

## Progress.Root

@mantine/core; feedback; safety: wrapped.

- `attributes`: `{ label?: Record<string, any>; section?: Record<string, any>; root?: Record<string, any>; }`.
- `autoContrast`: `false | true`. If set, adjusts label text color based on section background color for readability Known values: false, true.
- `color`: `string`.
- `orientation`: `"horizontal" | "vertical"`. Controls orientation Known values: "horizontal", "vertical".
- `size`: `number | MantineSize | (string & {})`. Controls track height Known values: "lg", "md", "sm", "xl", "xs".
- `transitionDuration`: `number`. Controls sections width transition duration, value is specified in ms
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.

- Do not rely on color alone to communicate status.

[Upstream documentation for Progress.Root](https://mantine.dev/core/progress/)

## Progress.Section

@mantine/core; feedback; safety: wrapped.

- `animated`: `false | true`. If set, the sections stripes are animated, `striped` prop is ignored Known values: false, true.
- `color`: `DefaultMantineColor`. Key of `theme.colors` or any valid CSS value Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `striped`: `false | true`. If set, the section has stripes Known values: false, true.
- `styles`: `Partial<Record<"section", CSSProperties>>`.
- `value`: `number`. Required. Value of the section in 0–100 range
- `variant`: `string`.
- `withAria`: `false | true`. Determines whether `aria-*` props should be added to the root element Known values: false, true.

- Do not rely on color alone to communicate status.

[Upstream documentation for Progress.Section](https://mantine.dev/core/progress/)

## ProgressLabel

@mantine/core; feedback; safety: wrapped.

- `color`: `string`.
- `variant`: `string`.

- Do not rely on color alone to communicate status.

[Upstream documentation for ProgressLabel](https://mantine.dev/core/progress-label/)

## ProgressRoot

@mantine/core; feedback; safety: wrapped.

- `attributes`: `{ label?: Record<string, any>; section?: Record<string, any>; root?: Record<string, any>; }`.
- `autoContrast`: `false | true`. If set, adjusts label text color based on section background color for readability Known values: false, true.
- `color`: `string`.
- `orientation`: `"horizontal" | "vertical"`. Controls orientation Known values: "horizontal", "vertical".
- `size`: `number | MantineSize | (string & {})`. Controls track height Known values: "lg", "md", "sm", "xl", "xs".
- `transitionDuration`: `number`. Controls sections width transition duration, value is specified in ms
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.

- Do not rely on color alone to communicate status.

[Upstream documentation for ProgressRoot](https://mantine.dev/core/progress-root/)

## ProgressSection

@mantine/core; feedback; safety: wrapped.

- `animated`: `false | true`. If set, the sections stripes are animated, `striped` prop is ignored Known values: false, true.
- `color`: `DefaultMantineColor`. Key of `theme.colors` or any valid CSS value Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `striped`: `false | true`. If set, the section has stripes Known values: false, true.
- `styles`: `Partial<Record<"section", CSSProperties>>`.
- `value`: `number`. Required. Value of the section in 0–100 range
- `variant`: `string`.
- `withAria`: `false | true`. Determines whether `aria-*` props should be added to the root element Known values: false, true.

- Do not rely on color alone to communicate status.

[Upstream documentation for ProgressSection](https://mantine.dev/core/progress-section/)

## RadarChart

@mantine/charts; charts; safety: wrapped.

- `accessibilityLayer`: `false | true`. Determines whether the chart should be keyboard-navigable with the recharts accessibility layer, `true` by default Known values: false, true.
- `activeDotProps`: `MantineChartDotProps`. Props passed down to all active dots. Ignored if `withDots={false}` is set.
- `attributes`: `{ legend?: Record<string, any>; root?: Record<string, any>; tooltip?: Record<string, any>; container?: Record<string, any>; ... 9 more ...; tooltipBody?: Record<...>; }`.
- `color`: `string`.
- `data`: `Record<string, any>[]`. Required. Data used in the chart
- `dataKey`: `string`. Required. Key of the `data` object for axis values
- `dotProps`: `MantineChartDotProps`. Props passed down to all dots. Ignored if `withDots={false}` is set.
- `gridColor`: `DefaultMantineColor`. Controls color of the grid lines. By default, color depends on the color scheme. Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `legendProps`: `Omit<LegendProps, "ref">`. Props passed down to recharts Legend component
- `polarAngleAxisProps`: `Omit<PolarAngleAxisProps, "ref">`. Props passed down to recharts PolarAngleAxis component
- `polarGridProps`: `Omit<PolarGridProps, "ref">`. Props passed down to recharts PolarGrid component
- `polarRadiusAxisProps`: `Omit<PolarRadiusAxisProps, "ref">`. Props passed down to recharts PolarRadiusAxis component
- `radarChartProps`: `(PolarChartProps<unknown> & { ref?: React.Ref<SVGSVGElement>; })`. Props passed down to recharts RadarChart component
- `series`: `RadarChartSeries[]`. Required. Determines which data should be consumed from the `data` array.
- `textColor`: `DefaultMantineColor`. Controls color of all text elements. By default, color depends on the color scheme. Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `tooltipAnimationDuration`: `number`. Tooltip position animation duration in ms
- `tooltipProps`: `Omit<TooltipProps<any, any>, "ref">`. Props passed down to recharts Tooltip component
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `withDots`: `false | true`. Determines whether dots should be displayed Known values: false, true.
- `withLegend`: `false | true`. Determines whether the legend should be displayed Known values: false, true.
- `withPolarAngleAxis`: `false | true`. Determines whether PolarAngleAxis component should be displayed Known values: false, true.
- `withPolarGrid`: `false | true`. Determines whether PolarGrid component should be displayed Known values: false, true.
- `withPolarRadiusAxis`: `false | true`. Determines whether PolarRadiusAxisProps component should be displayed Known values: false, true.
- `withTooltip`: `false | true`. Determines whether Tooltip component should be displayed Known values: false, true.

- Include a nearby text summary of the chart data.

[Upstream documentation for RadarChart](https://mantine.dev/charts/radar-chart/)

## RadialBarChart

@mantine/charts; charts; safety: wrapped.

- `accessibilityLayer`: `false | true`. Determines whether the chart should be keyboard-navigable with the recharts accessibility layer, `true` by default Known values: false, true.
- `attributes`: `{ legend?: Record<string, any>; root?: Record<string, any>; tooltip?: Record<string, any>; legendItem?: Record<string, any>; legendItemColor?: Record<...>; legendItemName?: Record<...>; }`.
- `barSize`: `number`. Size of bars in px, `20` by default
- `color`: `string`.
- `data`: `Record<string, any>[]`. Required. Chart data
- `dataKey`: `string`. Required. Key from data object to use as data key
- `emptyBackgroundColor`: `string`. Color of the empty background, by default depends on the color scheme
- `endAngle`: `number`. Angle at which chart ends
- `legendProps`: `Omit<LegendProps, "ref">`. Props passed down to recharts Legend component
- `radialBarChartProps`: `(PolarChartProps<unknown> & { ref?: React.Ref<SVGSVGElement>; })`. Props passed down to recharts RadarChartChart component
- `radialBarProps`: `Omit<RadialBarProps, "ref">`. Props passed down to recharts RadialBar component
- `startAngle`: `number`. Angle at which chart starts
- `tooltipProps`: `Omit<TooltipProps<any, any>, "ref">`. Props passed down to `Tooltip` recharts component
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `withBackground`: `false | true`. Determines whether empty bars area should be visible Known values: false, true.
- `withLabels`: `false | true`. Determines whether labels should be displayed Known values: false, true.
- `withLegend`: `false | true`. Determines whether the legend should be displayed Known values: false, true.
- `withTooltip`: `false | true`. Determines whether the tooltip should be displayed when one of the bars is hovered Known values: false, true.

- Include a nearby text summary of the chart data.

[Upstream documentation for RadialBarChart](https://mantine.dev/charts/radial-bar-chart/)

## Radio

@mantine/core; interaction; safety: wrapped.

Subcomponents: Radio.Card, Radio.Group, Radio.Indicator.

- `attributes`: `{ body?: Record<string, any>; label?: Record<string, any>; root?: Record<string, any>; icon?: Record<string, any>; ... 4 more ...; labelWrapper?: Record<...>; }`.
- `autoContrast`: `false | true`. If set, adjusts text color based on background color for `filled` variant Known values: false, true.
- `color`: `DefaultMantineColor`. Key of theme.colors or any valid CSS color to set radio background color in checked state Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `description`: `React.ReactNode`. Description displayed below the label
- `error`: `React.ReactNode`. Error displayed below the label
- `iconColor`: `DefaultMantineColor`. Key of theme.colors or any valid CSS color to set icon color. When not set, icon color is determined automatically based on theme.autoContrast setting Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `label`: `React.ReactNode`. Content of the `label` associated with the radio
- `labelPosition`: `"left" | "right"`. Position of the label relative to the input Known values: "left", "right".
- `size`: `MantineSize | (string & {})`. Controls size of the component Known values: "lg", "md", "sm", "xl", "xs".
- `type`: `HTMLInputTypeAttribute`.  Known values: "button", "checkbox", "color", "date", "datetime-local", "email", "file", "hidden", "image", "month", "number", "password", "radio", "range", "reset", "search", "submit", "tel", "text", "time", "url", "week".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `(string & {}) | RadioVariant`.  Known values: "filled", "outline".
- `withErrorStyles`: `false | true`. If set, applies error styles to the radio when `error` prop is set Known values: false, true.
- `wrapperProps`: `(React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & DataAttributes)`. Props passed down to the root element

- Provide a visible label or aria-label.

[Upstream documentation for Radio](https://mantine.dev/core/radio/)

## Radio.Card

@mantine/core; interaction; safety: wrapped.

- `attributes`: `{ card?: Record<string, any>; }`.
- `color`: `string`.
- `type`: `"button" | "submit" | "reset"`.  Known values: "button", "reset", "submit".
- `unstyled`: `false | true`.  Known values: false, true.
- `value`: `string`. Value of the radio, used with Radio.Group
- `variant`: `string`.

- Provide a visible label or aria-label.

[Upstream documentation for Radio.Card](https://mantine.dev/core/radio/)

## Radio.Group

@mantine/core; interaction; safety: wrapped.

Bind a temporary string input with `bind`. Initialize with `defaultValue`; reset with `resetKey`.

- `attributes`: `{ label?: Record<string, any>; root?: Record<string, any>; description?: Record<string, any>; error?: Record<string, any>; success?: Record<...>; required?: Record<...>; }`.
- `color`: `string`.
- `defaultValue`: `Value | null`. Uncontrolled component default value
- `description`: `React.ReactNode`. Contents of `Input.Description` component. If not set, description is not displayed.
- `descriptionProps`: `(InputDescriptionProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Description` component
- `error`: `React.ReactNode`. Contents of `Input.Error` component. If not set, error is not displayed.
- `errorProps`: `(InputErrorProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Error` component
- `inputWrapperOrder`: `("input" | "label" | "description" | "error")[]`. Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.
- `label`: `React.ReactNode`. Contents of `Input.Label` component. If not set, label is not displayed.
- `labelElement`: `"div" | "label"`. Root element for the label. Use `'div'` when wrapper contains multiple input elements and you need to handle `htmlFor` manually. Known values: "div", "label".
- `labelProps`: `(InputLabelProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Label` component
- `size`: `"xs" | "sm" | "md" | "lg" | "xl"`. Controls size of the `Input.Wrapper` Known values: "lg", "md", "sm", "xl", "xs".
- `success`: `React.ReactNode`. Contents of `Input.Success` component. If not set, success is not displayed.
- `successProps`: `(InputSuccessProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Success` component
- `unstyled`: `false | true`.  Known values: false, true.
- `value`: `Value | null`. Controlled component value
- `variant`: `string`.
- `withAsterisk`: `false | true`. If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. Known values: false, true.
- `wrapperProps`: `(React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & DataAttributes)`. Props passed down to the `Input.Wrapper`

- Provide a visible label or aria-label.

[Upstream documentation for Radio.Group](https://mantine.dev/core/radio/)

## Radio.Indicator

@mantine/core; interaction; safety: wrapped.

- `attributes`: `{ icon?: Record<string, any>; indicator?: Record<string, any>; }`.
- `autoContrast`: `false | true`. If set, adjusts text color based on background color for `filled` variant Known values: false, true.
- `color`: `DefaultMantineColor`. Key of theme.colors or any valid CSS color to set indicator background color in checked state Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `iconColor`: `DefaultMantineColor`. Key of theme.colors or any valid CSS color to set icon color. When not set, icon color is determined automatically based on theme.autoContrast setting Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `size`: `number | MantineSize | (string & {})`. Controls size of the component Known values: "lg", "md", "sm", "xl", "xs".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `(string & {}) | RadioIndicatorVariant`.  Known values: "filled", "outline".

- Provide a visible label or aria-label.

[Upstream documentation for Radio.Indicator](https://mantine.dev/core/radio/)

## RadioCard

@mantine/core; content; safety: wrapped.

- `attributes`: `{ card?: Record<string, any>; }`.
- `color`: `string`.
- `type`: `"button" | "submit" | "reset"`.  Known values: "button", "reset", "submit".
- `unstyled`: `false | true`.  Known values: false, true.
- `value`: `string`. Value of the radio, used with Radio.Group
- `variant`: `string`.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for RadioCard](https://mantine.dev/core/radio-card/)

## RadioGroup

@mantine/core; content; safety: wrapped.

Bind a temporary string input with `bind`. Initialize with `defaultValue`; reset with `resetKey`.

- `attributes`: `{ label?: Record<string, any>; root?: Record<string, any>; description?: Record<string, any>; error?: Record<string, any>; success?: Record<...>; required?: Record<...>; }`.
- `color`: `string`.
- `defaultValue`: `Value | null`. Uncontrolled component default value
- `description`: `React.ReactNode`. Contents of `Input.Description` component. If not set, description is not displayed.
- `descriptionProps`: `(InputDescriptionProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Description` component
- `error`: `React.ReactNode`. Contents of `Input.Error` component. If not set, error is not displayed.
- `errorProps`: `(InputErrorProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Error` component
- `inputWrapperOrder`: `("input" | "label" | "description" | "error")[]`. Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.
- `label`: `React.ReactNode`. Contents of `Input.Label` component. If not set, label is not displayed.
- `labelElement`: `"div" | "label"`. Root element for the label. Use `'div'` when wrapper contains multiple input elements and you need to handle `htmlFor` manually. Known values: "div", "label".
- `labelProps`: `(InputLabelProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Label` component
- `size`: `"xs" | "sm" | "md" | "lg" | "xl"`. Controls size of the `Input.Wrapper` Known values: "lg", "md", "sm", "xl", "xs".
- `success`: `React.ReactNode`. Contents of `Input.Success` component. If not set, success is not displayed.
- `successProps`: `(InputSuccessProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Success` component
- `unstyled`: `false | true`.  Known values: false, true.
- `value`: `Value | null`. Controlled component value
- `variant`: `string`.
- `withAsterisk`: `false | true`. If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. Known values: false, true.
- `wrapperProps`: `(React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & DataAttributes)`. Props passed down to the `Input.Wrapper`

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for RadioGroup](https://mantine.dev/core/radio-group/)

## RadioIcon

@mantine/core; content; safety: wrapped.

- `color`: `string`.
- `display`: `string | number`.
- `opacity`: `string | number`.
- `radius`: `string | number`.
- `size`: `string | number`.
- `type`: `string`.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for RadioIcon](https://mantine.dev/core/radio-icon/)

## RadioIndicator

@mantine/core; content; safety: wrapped.

- `attributes`: `{ icon?: Record<string, any>; indicator?: Record<string, any>; }`.
- `autoContrast`: `false | true`. If set, adjusts text color based on background color for `filled` variant Known values: false, true.
- `color`: `DefaultMantineColor`. Key of theme.colors or any valid CSS color to set indicator background color in checked state Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `iconColor`: `DefaultMantineColor`. Key of theme.colors or any valid CSS color to set icon color. When not set, icon color is determined automatically based on theme.autoContrast setting Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `size`: `number | MantineSize | (string & {})`. Controls size of the component Known values: "lg", "md", "sm", "xl", "xs".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `(string & {}) | RadioIndicatorVariant`.  Known values: "filled", "outline".

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for RadioIndicator](https://mantine.dev/core/radio-indicator/)

## RangeSlider

@mantine/core; interaction; safety: wrapped.

Bind a temporary number[] input with `bind`. Initialize with `defaultValue`; reset with `resetKey`.

- `attributes`: `{ label?: Record<string, any>; mark?: Record<string, any>; track?: Record<string, any>; root?: Record<string, any>; ... 4 more ...; markLabel?: Record<...>; }`.
- `color`: `DefaultMantineColor`. Key of `theme.colors` or any valid CSS color, controls color of track and thumb Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `defaultValue`: `RangeSliderValue`. Uncontrolled component default value
- `domain`: `[number, number]`. Domain of the slider, defines the selectable value range independently of min/max. Useful when you want to display a wider track range (min/max) but restrict actual selection to a subset (domain).
- `hiddenInputProps`: `React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>`. Props passed down to the hidden input
- `inverted`: `false | true`. Determines whether track values representation should be inverted Known values: false, true.
- `labelAlwaysOn`: `false | true`. Determines whether the label should be visible when the slider is not being dragged or hovered Known values: false, true.
- `labelTransitionProps`: `Partial<Omit<TransitionProps, "mounted">>`. Props passed down to the `Transition` component
- `marks`: `SliderMark[]`. Marks displayed on the track
- `max`: `number`. Maximum possible value
- `maxRange`: `number`. Maximum range interval
- `min`: `number`. Minimal possible value
- `minRange`: `number`. Minimal range interval between the two thumbs. Consider this value relative to the total range (max - min).
- `orientation`: `"horizontal" | "vertical"`. Slider orientation Known values: "horizontal", "vertical".
- `precision`: `number`. Number of significant digits after the decimal point
- `pushOnOverlap`: `false | true`. Determines whether the other thumb should be pushed by the current thumb dragging when `minRange`/`maxRange` is reached Known values: false, true.
- `restrictToMarks`: `false | true`. Determines whether the selection should be only allowed from the given marks array Known values: false, true.
- `showLabelOnHover`: `false | true`. Determines whether the label should be displayed when the slider is hovered Known values: false, true.
- `size`: `number | MantineSize | (string & {})`. Controls size of the track Known values: "lg", "md", "sm", "xl", "xs".
- `step`: `number`. Number by which value will be incremented/decremented with thumb drag and arrows
- `thumbChildren`: `React.ReactNode`. Content rendered inside thumb
- `thumbFromLabel`: `string`. First thumb `aria-label`
- `thumbLabel`: `string`. `aria-label` for both thumbs (overridden by thumbFromLabel/thumbToLabel if provided)
- `thumbSize`: `string | number`. Thumb `width` and `height`, by default value is computed based on `size` prop
- `thumbToLabel`: `string`. Second thumb `aria-label`
- `unstyled`: `false | true`.  Known values: false, true.
- `value`: `RangeSliderValue`. Controlled component value
- `variant`: `string`.

- Provide a visible label or aria-label.

[Upstream documentation for RangeSlider](https://mantine.dev/core/range-slider/)

## Rating

@mantine/core; interaction; safety: wrapped.

Bind a temporary number input with `bind`. Initialize with `defaultValue`; reset with `resetKey`.

- `allowClear`: `false | true`. When true, clicking the same rating value clears the rating to 0, default is false Known values: false, true.
- `attributes`: `{ input?: Record<string, any>; label?: Record<string, any>; root?: Record<string, any>; starSymbol?: Record<string, any>; symbolBody?: Record<...>; symbolGroup?: Record<...>; }`.
- `color`: `DefaultMantineColor`. Key of theme.colors or any CSS color value, default is 'yellow' Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `count`: `number`. Number of rating items (stars), default is 5
- `defaultValue`: `number`. Uncontrolled component default value
- `fractions`: `number`. Number of fractions each item can be divided into, default is 1
- `highlightSelectedOnly`: `false | true`. When true, only the clicked rating item is highlighted, not all items up to the selected value, default is false Known values: false, true.
- `size`: `number | MantineSize | (string & {})`. Controls component size Known values: "lg", "md", "sm", "xl", "xs".
- `unstyled`: `false | true`.  Known values: false, true.
- `value`: `number`. Controlled component value
- `variant`: `string`.

- Provide a visible label or aria-label.

[Upstream documentation for Rating](https://mantine.dev/core/rating/)

## RefreshButton

@homarr/widgets; network; safety: wrapped. Refreshes one active named query or all widget queries.

- `color`: `string`.
- `label`: `string`.
- `requestId`: `string`. Optional named query to refresh instead of all widget queries.
- `size`: `string`.
- `variant`: `string`.

- Action labels must describe their effect; destructive actions require confirmation.

[Upstream documentation for RefreshButton](https://homarr.dev/docs/management/custom-widgets/)

## RemoveScroll

@mantine/core; blocked; safety: denied.

Unavailable: Changes global page scrolling

[Upstream documentation for RemoveScroll](https://mantine.dev/core/remove-scroll/)

## RingProgress

@mantine/core; feedback; safety: wrapped.

- `attributes`: `{ label?: Record<string, any>; svg?: Record<string, any>; root?: Record<string, any>; curve?: Record<string, any>; }`.
- `color`: `string`.
- `label`: `React.ReactNode`. Label displayed in the center of the ring
- `rootColor`: `DefaultMantineColor`. Color of the unfilled portion of the ring (background). Defaults to gray-2 in light mode, dark-4 in dark mode Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `roundCaps`: `false | true`. Applies rounded line caps to the start and end of visible sections Known values: false, true.
- `sectionGap`: `number`. Gap between sections in degrees. Reduces the visual size of each section
- `sections`: `RingProgressSection[]`. Required. Array of sections to display in the ring. Each section should have a `value` (0-100), `color`, and optional `tooltip`. Sections can also receive any valid SVG circle element props.
- `size`: `number`. Width and height of the progress ring
- `startAngle`: `number`. Starting angle in degrees. 0 = right, 90 = bottom, 180 = left, 270 = top
- `thickness`: `number`. Ring thickness in pixels. Cannot exceed size / 4 and will be automatically clamped if necessary
- `transitionDuration`: `number`. Transition duration in milliseconds for section value and color changes
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.

- Do not rely on color alone to communicate status.

[Upstream documentation for RingProgress](https://mantine.dev/core/ring-progress/)

## RollingNumber

@mantine/core; content; safety: wrapped.

- `animationDuration`: `number`. Animation duration in milliseconds
- `attributes`: `{ root?: Record<string, any>; copyValue?: Record<string, any>; digit?: Record<string, any>; digitColumn?: Record<string, any>; char?: Record<...>; }`.
- `color`: `string`.
- `decimalScale`: `number`. Number of decimal places to display
- `decimalSeparator`: `string`. Character used as a decimal separator
- `fixedDecimalScale`: `false | true`. If set, trailing zeros are added to match `decimalScale` Known values: false, true.
- `suffix`: `string`. Suffix added after the value
- `tabularNumbers`: `false | true`. If set, use tabular (monospace) numbers Known values: false, true.
- `thousandSeparator`: `string | false | true`. Character used to separate thousands, set to `true` for `,`
- `timingFunction`: `string`. CSS timing function for animation
- `unstyled`: `false | true`.  Known values: false, true.
- `value`: `number`. Required. Number value to display
- `variant`: `string`.
- `withLiveRegion`: `false | true`. If set, the root element acts as an `aria-live="polite"` region (`role="status"`) and screen readers announce every value change. When `false`, the root uses `role="img"` so the current value is still accessible but updates are not announced. Known values: false, true.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for RollingNumber](https://mantine.dev/core/rolling-number/)

## SankeyChart

@mantine/charts; charts; safety: wrapped.

- `attributes`: `{ root?: Record<string, any>; tooltip?: Record<string, any>; tooltipItem?: Record<string, any>; tooltipItemBody?: Record<...>; ... 4 more ...; tooltipBody?: Record<...>; }`.
- `color`: `string`.
- `colors`: `DefaultMantineColor[]`. An array of colors used for nodes when no `color` is set on individual nodes
- `data`: `SankeyChartData`. Required. Data used to render chart, must include `nodes` and `links` arrays
- `height`: `number`. Controls chart height
- `iterations`: `number`. The number of relaxation iterations
- `linkColor`: `DefaultMantineColor`. Default color for links, by default depends on color scheme Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `linkCurvature`: `number`. The curvature of links between nodes
- `linkOpacity`: `number`. Opacity of the link fill
- `nodeColor`: `DefaultMantineColor`. Default color for nodes, by default depends on color scheme Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `nodePadding`: `number`. The padding between nodes
- `nodeWidth`: `number`. The width of each node
- `sankeyProps`: `Partial<Omit<RechartsSankeyProps, "data" | "ref">>`. Props passed down to recharts `Sankey` component
- `textColor`: `DefaultMantineColor`. Controls text color of labels Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `tooltipAnimationDuration`: `number`. Tooltip animation duration in ms
- `tooltipProps`: `Omit<TooltipProps<any, any>, "ref">`. Props passed down to `Tooltip` recharts component
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `withTooltip`: `false | true`. Determines whether the tooltip should be displayed when hovered Known values: false, true.

- Include a nearby text summary of the chart data.

[Upstream documentation for SankeyChart](https://mantine.dev/charts/sankey-chart/)

## ScatterChart

@mantine/charts; charts; safety: wrapped.

- `accessibilityLayer`: `false | true`. Determines whether the chart should be keyboard-navigable with the recharts accessibility layer, `true` by default Known values: false, true.
- `attributes`: `{ legend?: Record<string, any>; grid?: Record<string, any>; root?: Record<string, any>; tooltip?: Record<string, any>; ... 16 more ...; scatter?: Record<...>; }`.
- `color`: `string`.
- `data`: `ScatterChartSeries[]`. Required. Data that is used to build the chart
- `dataKey`: `{ x: string; y: string; }`. Required. Keys that should be used to retrieve data from the data array on x and y axis
- `gridAxis`: `"none" | "x" | "y" | "xy"`. Specifies which lines should be displayed in the grid, `'x'` by default Known values: "none", "x", "xy", "y".
- `gridColor`: `DefaultMantineColor`. Color of the grid and cursor lines, by default depends on color scheme Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `gridProps`: `Omit<CartesianGridProps, "ref">`. Props passed down to the `CartesianGrid` component
- `labels`: `{ x?: string; y?: string; }`. Labels that should be used instead of keys names in the tooltip
- `legendProps`: `Omit<LegendProps, "ref">`. Props passed down to the `Legend` component
- `orientation`: `"horizontal" | "vertical"`. Chart orientation, `'horizontal'` by default Known values: "horizontal", "vertical".
- `pointLabels`: `"x" | "y"`. If set, displays labels next to points for the given axis Known values: "x", "y".
- `referenceAreas`: `ChartReferenceAreaProps[]`. Reference areas that should be displayed on the chart
- `referenceDots`: `ChartReferenceDotProps[]`. Reference dots that should be displayed on the chart
- `referenceLines`: `ChartReferenceLineProps[]`. Reference lines that should be displayed on the chart
- `rightYAxisLabel`: `string`. A label to display next to the right y-axis
- `rightYAxisProps`: `Omit<YAxisProps, "ref">`. Props passed down to the `YAxis` recharts component rendered on the right side
- `scatterChartProps`: `(CartesianChartProps<unknown> & { ref?: React.Ref<SVGSVGElement>; })`. Props passed down to recharts `ScatterChart` component
- `scatterProps`: `Partial<Omit<ScatterProps, "ref">>`. Props passed down to recharts `Scatter` component
- `textColor`: `DefaultMantineColor`. Color of the text displayed inside the chart, `'dimmed'` by default Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `tickLine`: `"none" | "x" | "y" | "xy"`. Specifies which axis should have tick line, `'y'` by default Known values: "none", "x", "xy", "y".
- `tooltipAnimationDuration`: `number`. Tooltip position animation duration in ms, `0` by default
- `tooltipProps`: `Omit<TooltipProps<any, any>, "ref">`. Props passed down to the `Tooltip` component
- `unit`: `{ x?: string; y?: string; }`. Units displayed after value on axis and inside the tooltip
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `withLegend`: `false | true`. Determines whether chart legend should be displayed, `false` by default Known values: false, true.
- `withRightYAxis`: `false | true`. Determines whether additional y-axis should be displayed on the right side of the chart, `false` by default Known values: false, true.
- `withTooltip`: `false | true`. Determines whether chart tooltip should be displayed, `true` by default Known values: false, true.
- `withXAxis`: `false | true`. Determines whether x-axis should be displayed, `true` by default Known values: false, true.
- `withYAxis`: `false | true`. Determines whether y-axis should be displayed, `true` by default Known values: false, true.
- `xAxisLabel`: `string`. A label to display below the x-axis
- `xAxisProps`: `Omit<XAxisProps, "ref">`. Props passed down to the `XAxis` recharts component
- `yAxisLabel`: `string`. A label to display next to the y-axis
- `yAxisProps`: `Omit<YAxisProps, "ref">`. Props passed down to the `YAxis` recharts component

- Include a nearby text summary of the chart data.

[Upstream documentation for ScatterChart](https://mantine.dev/charts/scatter-chart/)

## ScrollArea

@mantine/core; layout; safety: wrapped.

Subcomponents: ScrollArea.Autosize.

- `attributes`: `{ content?: Record<string, any>; root?: Record<string, any>; scrollbar?: Record<string, any>; thumb?: Record<string, any>; viewport?: Record<...>; corner?: Record<...>; }`.
- `color`: `string`.
- `offsetScrollbars`: `false | true | "x" | "y" | "present"`. Determines whether scrollbars should be offset with padding on given axis - `true` - adds padding to offset both scrollbars (always) - `'x'` - adds padding to offset horizontal scrollbar (always) - `'y'` - adds padding to offset vertical scrollbar (always) - `'present'` - adds padding only when scrollbars are visible (dynamic) Known values: false, "present", true, "x", "y".
- `overscrollBehavior`: `Property.OverscrollBehavior`. Defines `overscroll-behavior` of the viewport Known values: "-moz-initial", "auto", "contain", "inherit", "initial", "none", "revert", "revert-layer", "unset".
- `scrollHideDelay`: `number`. Scroll hide delay in ms, applicable only when type is set to `hover` or `scroll`
- `scrollbarSize`: `string | number`. Scrollbar size, any valid CSS value for width/height, numbers are converted to rem, default value is 12px (0.75rem)
- `scrollbars`: `false | "x" | "y" | "xy"`. Axis at which scrollbars must be rendered - `'x'` - horizontal scrollbar only - `'y'` - vertical scrollbar only - `'xy'` - both scrollbars - `false` - no scrollbars rendered (content remains scrollable via mouse/touch) Known values: false, "x", "xy", "y".
- `startScrollPosition`: `{ x?: number; y?: number; }`. Initial scroll position set on mount
- `type`: `"auto" | "scroll" | "always" | "hover" | "never"`. Defines scrollbars behavior - `'hover'` – scrollbars visible on hover (default) - `'scroll'` – scrollbars visible during scrolling - `'auto'` – scrollbars visible only when content overflows (like CSS overflow: auto) - `'always'` – scrollbars always visible, even when content doesn't overflow - `'never'` – scrollbars always hidden Known values: "always", "auto", "hover", "never", "scroll".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `verticalScrollbarPosition`: `"left" | "right"`. Pins the vertical scrollbar to a physical side (`left` or `right`) regardless of direction. By default, the scrollbar follows the inline-end edge (right in LTR, left in RTL). Known values: "left", "right".
- `viewportProps`: `React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>`. Props passed down to the viewport element

- Keep visual order consistent with reading order.

[Upstream documentation for ScrollArea](https://mantine.dev/core/scroll-area/)

## ScrollArea.Autosize

@mantine/core; layout; safety: wrapped.

- `attributes`: `{ content?: Record<string, any>; root?: Record<string, any>; scrollbar?: Record<string, any>; thumb?: Record<string, any>; viewport?: Record<...>; corner?: Record<...>; }`.
- `color`: `string`.
- `offsetScrollbars`: `false | true | "x" | "y" | "present"`. Determines whether scrollbars should be offset with padding on given axis - `true` - adds padding to offset both scrollbars (always) - `'x'` - adds padding to offset horizontal scrollbar (always) - `'y'` - adds padding to offset vertical scrollbar (always) - `'present'` - adds padding only when scrollbars are visible (dynamic) Known values: false, "present", true, "x", "y".
- `overscrollBehavior`: `Property.OverscrollBehavior`. Defines `overscroll-behavior` of the viewport Known values: "-moz-initial", "auto", "contain", "inherit", "initial", "none", "revert", "revert-layer", "unset".
- `scrollHideDelay`: `number`. Scroll hide delay in ms, applicable only when type is set to `hover` or `scroll`
- `scrollbarSize`: `string | number`. Scrollbar size, any valid CSS value for width/height, numbers are converted to rem, default value is 12px (0.75rem)
- `scrollbars`: `false | "x" | "y" | "xy"`. Axis at which scrollbars must be rendered - `'x'` - horizontal scrollbar only - `'y'` - vertical scrollbar only - `'xy'` - both scrollbars - `false` - no scrollbars rendered (content remains scrollable via mouse/touch) Known values: false, "x", "xy", "y".
- `startScrollPosition`: `{ x?: number; y?: number; }`. Initial scroll position set on mount
- `type`: `"auto" | "scroll" | "always" | "hover" | "never"`. Defines scrollbars behavior - `'hover'` – scrollbars visible on hover (default) - `'scroll'` – scrollbars visible during scrolling - `'auto'` – scrollbars visible only when content overflows (like CSS overflow: auto) - `'always'` – scrollbars always visible, even when content doesn't overflow - `'never'` – scrollbars always hidden Known values: "always", "auto", "hover", "never", "scroll".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `verticalScrollbarPosition`: `"left" | "right"`. Pins the vertical scrollbar to a physical side (`left` or `right`) regardless of direction. By default, the scrollbar follows the inline-end edge (right in LTR, left in RTL). Known values: "left", "right".
- `viewportProps`: `React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>`. Props passed down to the viewport element

- Keep visual order consistent with reading order.

[Upstream documentation for ScrollArea.Autosize](https://mantine.dev/core/scroll-area/)

## ScrollAreaAutosize

@mantine/core; layout; safety: wrapped.

- `attributes`: `{ content?: Record<string, any>; root?: Record<string, any>; scrollbar?: Record<string, any>; thumb?: Record<string, any>; viewport?: Record<...>; corner?: Record<...>; }`.
- `color`: `string`.
- `offsetScrollbars`: `false | true | "x" | "y" | "present"`. Determines whether scrollbars should be offset with padding on given axis - `true` - adds padding to offset both scrollbars (always) - `'x'` - adds padding to offset horizontal scrollbar (always) - `'y'` - adds padding to offset vertical scrollbar (always) - `'present'` - adds padding only when scrollbars are visible (dynamic) Known values: false, "present", true, "x", "y".
- `overscrollBehavior`: `Property.OverscrollBehavior`. Defines `overscroll-behavior` of the viewport Known values: "-moz-initial", "auto", "contain", "inherit", "initial", "none", "revert", "revert-layer", "unset".
- `scrollHideDelay`: `number`. Scroll hide delay in ms, applicable only when type is set to `hover` or `scroll`
- `scrollbarSize`: `string | number`. Scrollbar size, any valid CSS value for width/height, numbers are converted to rem, default value is 12px (0.75rem)
- `scrollbars`: `false | "x" | "y" | "xy"`. Axis at which scrollbars must be rendered - `'x'` - horizontal scrollbar only - `'y'` - vertical scrollbar only - `'xy'` - both scrollbars - `false` - no scrollbars rendered (content remains scrollable via mouse/touch) Known values: false, "x", "xy", "y".
- `startScrollPosition`: `{ x?: number; y?: number; }`. Initial scroll position set on mount
- `type`: `"auto" | "scroll" | "always" | "hover" | "never"`. Defines scrollbars behavior - `'hover'` – scrollbars visible on hover (default) - `'scroll'` – scrollbars visible during scrolling - `'auto'` – scrollbars visible only when content overflows (like CSS overflow: auto) - `'always'` – scrollbars always visible, even when content doesn't overflow - `'never'` – scrollbars always hidden Known values: "always", "auto", "hover", "never", "scroll".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `verticalScrollbarPosition`: `"left" | "right"`. Pins the vertical scrollbar to a physical side (`left` or `right`) regardless of direction. By default, the scrollbar follows the inline-end edge (right in LTR, left in RTL). Known values: "left", "right".
- `viewportProps`: `React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>`. Props passed down to the viewport element

- Keep visual order consistent with reading order.

[Upstream documentation for ScrollAreaAutosize](https://mantine.dev/core/scroll-area-autosize/)

## Scroller

@mantine/core; content; safety: wrapped.

- `attributes`: `{ content?: Record<string, any>; root?: Record<string, any>; chevron?: Record<string, any>; control?: Record<string, any>; container?: Record<...>; }`.
- `color`: `string`.
- `controlSize`: `string | number`. Size of the control buttons,
- `draggable`: `false | true`. Determines whether content can be scrolled by dragging with mouse, `true` by default Known values: false, true.
- `edgeGradientColor`: `string`. Background color for the gradient fade on controls, `'var(--mantine-color-body)'` by default
- `endControlIcon`: `React.ReactNode`. Icon component for the end control, AccordionChevron by default
- `endControlProps`: `React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>`. Props passed to the end control button
- `scrollAmount`: `number`. Amount of pixels to scroll when clicking the control buttons, `200` by default
- `showEndControl`: `false | true`. Determines whether end control should always be visible regardless of scroll position, `false` by default Known values: false, true.
- `showStartControl`: `false | true`. Determines whether start control should always be visible regardless of scroll position, `false` by default Known values: false, true.
- `startControlIcon`: `React.ReactNode`. Icon component for the start control, AccordionChevron by default
- `startControlProps`: `React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>`. Props passed to the start control button
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for Scroller](https://mantine.dev/core/scroller/)

## SegmentedControl

@mantine/core; interaction; safety: wrapped.

Bind a temporary string input with `bind`. Initialize with `defaultValue`; reset with `resetKey`.

- `attributes`: `{ input?: Record<string, any>; label?: Record<string, any>; root?: Record<string, any>; control?: Record<string, any>; indicator?: Record<...>; innerLabel?: Record<...>; }`.
- `autoContrast`: `false | true`. If set, automatically adjusts label text color for optimal contrast against the indicator background color Known values: false, true.
- `color`: `DefaultMantineColor`. Key of `theme.colors` or any valid CSS color, changes indicator background color. By default, uses white in light mode and dark.5 in dark mode Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `data`: `(Value | SegmentedControlItem<Value>)[]`. Required. Data based on which controls are rendered
- `defaultValue`: `Value`. Uncontrolled component default value
- `fullWidth`: `false | true`. Determines whether the component should take 100% width of its parent Known values: false, true.
- `orientation`: `"horizontal" | "vertical"`. Component orientation Known values: "horizontal", "vertical".
- `size`: `MantineSize | (string & {})`. Controls `font-size`, `padding` and `height` properties Known values: "lg", "md", "sm", "xl", "xs".
- `transitionDuration`: `number`. Indicator `transition-duration` in ms, set `0` to turn off transitions
- `transitionTimingFunction`: `string`. Indicator `transition-timing-function` property
- `unstyled`: `false | true`.  Known values: false, true.
- `value`: `Value`. Controlled component value
- `variant`: `string`.
- `withItemsBorders`: `false | true`. Determines whether there should be borders between items Known values: false, true.

- Provide a visible label or aria-label.

[Upstream documentation for SegmentedControl](https://mantine.dev/core/segmented-control/)

## Select

@mantine/core; interaction; safety: wrapped.

Bind a temporary string input with `bind`. Initialize with `defaultValue`; reset with `resetKey`.

- `allowDeselect`: `false | true`. Allows deselecting the selected option by clicking it Known values: false, true.
- `attributes`: `{ input?: Record<string, any>; label?: Record<string, any>; option?: Record<string, any>; section?: Record<string, any>; ... 11 more ...; groupLabel?: Record<...>; }`.
- `autoSelectOnBlur`: `false | true`. Automatically selects the highlighted option when input loses focus Known values: false, true.
- `checkIconPosition`: `"left" | "right"`. Position of the check icon relative to the option label Known values: "left", "right".
- `chevronColor`: `DefaultMantineColor`. Controls color of the default chevron, by default depends on the color scheme Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `clearButtonProps`: `InputClearButtonProps`. Props passed down to the clear button
- `clearSectionMode`: `"both" | "rightSection" | "clear"`. Determines how the clear button and rightSection are rendered Known values: "both", "clear", "rightSection".
- `clearable`: `false | true`. Displays clear button in the right section when component has value Known values: false, true.
- `color`: `string`.
- `comboboxProps`: `ComboboxProps`. Props passed down to `Combobox` component
- `data`: `ComboboxData<Value>`. Data used to generate options. Values must be unique, otherwise an error will be thrown and component will not render.
- `defaultDropdownOpened`: `false | true`. Uncontrolled dropdown initial opened state Known values: false, true.
- `defaultSearchValue`: `string`. Default search value
- `defaultValue`: `Value | null`. Uncontrolled component default value
- `description`: `React.ReactNode`. Contents of `Input.Description` component. If not set, description is not displayed.
- `descriptionProps`: `(InputDescriptionProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Description` component
- `dropdownOpened`: `false | true`. Controlled dropdown opened state Known values: false, true.
- `error`: `React.ReactNode`. Contents of `Input.Error` component. If not set, error is not displayed.
- `errorProps`: `(InputErrorProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Error` component
- `floatingHeight`: `"viewport"`. If set to `'viewport'`, the dropdown grows to fill the available vertical space in the viewport. Disables the `flip` middleware. Known values: "viewport".
- `hiddenInputProps`: `Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "value">`. Props passed down to the hidden input
- `inputSize`: `string`. HTML `size` attribute for the input element (number of visible characters)
- `inputWrapperOrder`: `("input" | "label" | "description" | "error")[]`. Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.
- `label`: `React.ReactNode`. Contents of `Input.Label` component. If not set, label is not displayed.
- `labelProps`: `(InputLabelProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Label` component
- `leftSection`: `React.ReactNode`. Content section displayed on the left side of the input
- `leftSectionPointerEvents`: `"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "all" | "fill" | "stroke" | "painted" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke"`. Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). Known values: "-moz-initial", "all", "auto", "fill", "inherit", "initial", "none", "painted", "revert", "revert-layer", "stroke", "unset", "visible", "visibleFill", "visiblePainted", "visibleStroke".
- `leftSectionProps`: `React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>`. Props passed down to the `leftSection` element
- `leftSectionWidth`: `Property.Width<string | number>`. Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height
- `limit`: `number`. Maximum number of options displayed at a time, `Infinity` by default
- `loading`: `false | true`. Displays loading indicator in the left or right section Known values: false, true.
- `loadingPosition`: `"left" | "right"`. Position of the loading indicator Known values: "left", "right".
- `maxDropdownHeight`: `string | number`. `max-height` of the dropdown, only applicable when `withScrollArea` prop is `true`, `250` by default
- `nothingFoundMessage`: `React.ReactNode`. Message displayed when no options match the search query or when there is no data
- `openOnFocus`: `false | true`. Opens dropdown when input receives focus (requires searchable={true}) Known values: false, true.
- `pointer`: `false | true`. Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component="button"` for Select/DatePicker). Known values: false, true.
- `rightSection`: `React.ReactNode`. Content section displayed on the right side of the input
- `rightSectionPointerEvents`: `"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "all" | "fill" | "stroke" | "painted" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke"`. Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). Known values: "-moz-initial", "all", "auto", "fill", "inherit", "initial", "none", "painted", "revert", "revert-layer", "stroke", "unset", "visible", "visibleFill", "visiblePainted", "visibleStroke".
- `rightSectionProps`: `React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>`. Props passed down to the `rightSection` element
- `rightSectionWidth`: `Property.Width<string | number>`. Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height
- `scrollAreaProps`: `ScrollAreaProps`. Props passed down to the underlying `ScrollArea` component in the dropdown
- `searchValue`: `string`. Controlled search value
- `searchable`: `false | true`. Determines whether the select should be searchable Known values: false, true.
- `selectFirstOptionOnChange`: `false | true`. If set, the first option is selected when value changes, `false` by default Known values: false, true.
- `selectFirstOptionOnDropdownOpen`: `false | true`. If set, the first option is selected when dropdown opens, `false` by default Known values: false, true.
- `size`: `MantineSize | (string & {})`. Controls input `height`, horizontal `padding`, and `font-size` Known values: "lg", "md", "sm", "xl", "xs".
- `success`: `React.ReactNode`. Contents of `Input.Success` component. If not set, success is not displayed.
- `successProps`: `(InputSuccessProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Success` component
- `type`: `HTMLInputTypeAttribute`.  Known values: "button", "checkbox", "color", "date", "datetime-local", "email", "file", "hidden", "image", "month", "number", "password", "radio", "range", "reset", "search", "submit", "tel", "text", "time", "url", "week".
- `unstyled`: `false | true`.  Known values: false, true.
- `value`: `Value | null`. Controlled component value
- `variant`: `(string & {}) | InputVariant`.  Known values: "default", "filled", "unstyled".
- `withAlignedLabels`: `false | true`. Aligns unchecked labels with the checked one Known values: false, true.
- `withAsterisk`: `false | true`. If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. Known values: false, true.
- `withCheckIcon`: `false | true`. Displays check icon near the selected option label Known values: false, true.
- `withErrorStyles`: `false | true`. Determines whether the input should have red border and red text color when the `error` prop is set Known values: false, true.
- `withScrollArea`: `false | true`. Determines whether the options should be wrapped with `ScrollArea.AutoSize`, `true` by default Known values: false, true.
- `withSuccessStyles`: `false | true`. Determines whether the input should have green border when the `success` prop is set Known values: false, true.
- `wrapperProps`: `WrapperProps`. Props passed down to the root element

- Provide a visible label or aria-label.

[Upstream documentation for Select](https://mantine.dev/core/select/)

## SemiCircleProgress

@mantine/core; feedback; safety: wrapped.

- `attributes`: `{ label?: Record<string, any>; svg?: Record<string, any>; root?: Record<string, any>; emptySegment?: Record<string, any>; filledSegment?: Record<...>; }`.
- `color`: `string`.
- `emptySegmentColor`: `DefaultMantineColor`. Key of `theme.colors` or any valid CSS color value Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `fillDirection`: `"right-to-left" | "left-to-right"`. Direction from which the circle is filled Known values: "left-to-right", "right-to-left".
- `filledSegmentColor`: `DefaultMantineColor`. Key of `theme.colors` or any valid CSS color value Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `label`: `React.ReactNode`. Label rendered inside the circle
- `labelPosition`: `"center" | "bottom"`. Label position relative to the circle center Known values: "bottom", "center".
- `orientation`: `"up" | "down"`. Orientation of the circle Known values: "down", "up".
- `size`: `number`. Width of the component and diameter of the full circle in px. The visible SVG height will be size/2
- `thickness`: `number`. Stroke width of the circle segments in px
- `transitionDuration`: `number`. Transition duration for the filled segment progress changes in ms. Does not affect color transitions
- `unstyled`: `false | true`.  Known values: false, true.
- `value`: `number`. Required. Progress value from `0` to `100`
- `variant`: `string`.

- Do not rely on color alone to communicate status.

[Upstream documentation for SemiCircleProgress](https://mantine.dev/core/semi-circle-progress/)

## SimpleGrid

@mantine/core; layout; safety: wrapped.

- `attributes`: `{ root?: Record<string, any>; container?: Record<string, any>; }`.
- `autoFlow`: `"auto-fit" | "auto-fill"`. Grid repeat type when minColWidth is set Known values: "auto-fill", "auto-fit".
- `autoRows`: `string`. Sets the size of implicitly created grid rows
- `color`: `string`.
- `cols`: `StyleProp<number>`. Number of columns
- `minColWidth`: `string | number`. Minimum column width when using auto-fit/auto-fill. When set, cols prop is ignored
- `spacing`: `StyleProp<MantineSpacing>`. Spacing between columns Known values: "lg", "md", "sm", "xl", "xs".
- `type`: `"media" | "container"`. Determines type of queries that are used for responsive styles Known values: "container", "media".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `verticalSpacing`: `StyleProp<MantineSpacing>`. Spacing between rows. When not set, falls back to spacing value Known values: "lg", "md", "sm", "xl", "xs".

- Keep visual order consistent with reading order.

[Upstream documentation for SimpleGrid](https://mantine.dev/core/simple-grid/)

## Skeleton

@mantine/core; feedback; safety: wrapped.

- `animate`: `false | true`. Enables animation Known values: false, true.
- `attributes`: `{ root?: Record<string, any>; }`.
- `circle`: `false | true`. If set, Skeleton `width` and `border-radius` are equal to its `height` Known values: false, true.
- `color`: `string`.
- `height`: `Property.Height<string | number>`. Skeleton `height`, numbers are converted to rem
- `radius`: `Property.BorderRadius<string | number>`. Key of `theme.radius` or any valid CSS value to set border-radius. Numbers are converted to rem.
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `visible`: `false | true`. Determines whether Skeleton overlay should be displayed Known values: false, true.
- `width`: `Property.Width<string | number>`. Skeleton `width`, numbers are converted to rem, ignored when `circle` prop is set.

- Do not rely on color alone to communicate status.

[Upstream documentation for Skeleton](https://mantine.dev/core/skeleton/)

## Slider

@mantine/core; interaction; safety: wrapped.

Bind a temporary number input with `bind`. Initialize with `defaultValue`; reset with `resetKey`.

- `attributes`: `{ label?: Record<string, any>; mark?: Record<string, any>; track?: Record<string, any>; root?: Record<string, any>; ... 4 more ...; markLabel?: Record<...>; }`.
- `color`: `DefaultMantineColor`. Key of `theme.colors` or any valid CSS color, controls color of track and thumb Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `defaultValue`: `number`. Uncontrolled component default value
- `domain`: `[number, number]`. Domain of the slider, defines the selectable value range independently of min/max. Useful when you want to display a wider track range (min/max) but restrict actual selection to a subset (domain).
- `hiddenInputProps`: `React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>`. Props passed down to the hidden input
- `inverted`: `false | true`. Determines whether track value representation should be inverted Known values: false, true.
- `labelAlwaysOn`: `false | true`. Determines whether the label should be visible when the slider is not being dragged or hovered Known values: false, true.
- `labelTransitionProps`: `Partial<Omit<TransitionProps, "mounted">>`. Props passed down to the `Transition` component
- `marks`: `SliderMark[]`. Marks displayed on the track
- `max`: `number`. Maximum possible value
- `min`: `number`. Minimal possible value
- `orientation`: `"horizontal" | "vertical"`. Slider orientation Known values: "horizontal", "vertical".
- `precision`: `number`. Number of significant digits after the decimal point
- `restrictToMarks`: `false | true`. Determines whether the selection should be only allowed from the given marks array Known values: false, true.
- `showLabelOnHover`: `false | true`. Determines whether the label should be displayed when the slider is hovered Known values: false, true.
- `size`: `number | MantineSize | (string & {})`. Controls size of the track Known values: "lg", "md", "sm", "xl", "xs".
- `startPointValue`: `number`. Value at which the filled bar starts. When set, the bar extends from this point toward the current value. Ignored when `inverted` is set.
- `step`: `number`. Number by which value will be incremented/decremented with thumb drag and arrows
- `thumbChildren`: `React.ReactNode`. Content rendered inside thumb
- `thumbLabel`: `string`. Thumb `aria-label`
- `thumbProps`: `React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>`. Props passed down to thumb element
- `thumbSize`: `string | number`. Thumb `width` and `height`, by default value is computed based on `size` prop
- `unstyled`: `false | true`.  Known values: false, true.
- `value`: `number`. Controlled component value
- `variant`: `string`.

- Provide a visible label or aria-label.

[Upstream documentation for Slider](https://mantine.dev/core/slider/)

## Space

@mantine/core; layout; safety: wrapped.

- `attributes`: `undefined`.
- `color`: `string`.
- `styles`: `undefined`.
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.

- Keep visual order consistent with reading order.

[Upstream documentation for Space](https://mantine.dev/core/space/)

## Sparkline

@mantine/charts; charts; safety: wrapped.

- `areaProps`: `Omit<AreaProps<any, any>, "data" | "ref" | "dataKey">`. Props passed down to the underlying recharts `Area` component
- `attributes`: `{ root?: Record<string, any>; }`.
- `color`: `DefaultMantineColor`. Key of `theme.colors` or any valid CSS color Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `connectNulls`: `false | true`. Determines whether null values should be connected with other values Known values: false, true.
- `curveType`: `"step" | "bump" | "linear" | "natural" | "monotone" | "stepBefore" | "stepAfter"`. Type of the curve Known values: "bump", "linear", "monotone", "natural", "step", "stepAfter", "stepBefore".
- `data`: `(number | null)[]`. Required. Data used to render the chart
- `fillOpacity`: `number`. Controls fill opacity of the area
- `strokeWidth`: `number`. Area stroke width
- `trendColors`: `SparklineTrendColors`. If set, `color` prop is ignored and chart color is determined by the difference between first and last value.
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `withGradient`: `false | true`. Determines whether the chart fill should be a gradient Known values: false, true.

- Include a nearby text summary of the chart data.

[Upstream documentation for Sparkline](https://mantine.dev/charts/sparkline/)

## Splitter

@mantine/core; layout; safety: wrapped.

Subcomponents: Splitter.Pane.

- `attributes`: `{ root?: Record<string, any>; thumb?: Record<string, any>; handle?: Record<string, any>; pane?: Record<string, any>; }`.
- `color`: `string`.
- `handleColor`: `DefaultMantineColor`. Key of `theme.colors` or any valid CSS color for the separator line Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `handleIcon`: `React.ReactNode`. Custom icon displayed in the handle thumb, by default uses grip icon based on orientation
- `lineSize`: `string | number`. CSS value for separator line thickness between panes
- `orientation`: `"horizontal" | "vertical"`. Layout direction Known values: "horizontal", "vertical".
- `resetOnDoubleClick`: `false | true`. Restore the two panes adjacent to a handle to their default ratio (preserving their combined size) when the handle is double-clicked Known values: false, true.
- `shiftStep`: `SplitterStep`. Shift+arrow step size, a `number`/`%` is a percentage, `px`/`rem` is resolved to pixels
- `sizes`: `SplitterPaneSize[]`. Controlled sizes, each value keeps the unit it was declared in (number/`%` flexible, `px`/`rem` fixed)
- `step`: `SplitterStep`. Keyboard step size, a `number`/`%` is a percentage, `px`/`rem` is resolved to pixels
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `withHandle`: `false | true`. Determines whether the thumb with grip icon is displayed on the handle Known values: false, true.

- Keep visual order consistent with reading order.

[Upstream documentation for Splitter](https://mantine.dev/core/splitter/)

## Splitter.Pane

@mantine/core; layout; safety: wrapped.

- `collapseThreshold`: `SplitterPaneSize`. Size below which the pane snaps to collapsed, defaults to `min`
- `collapsible`: `false | true`. Whether this pane can be collapsed Known values: false, true.
- `color`: `string`.
- `defaultSize`: `SplitterPaneSize`. Required. Initial size, a `number`/`%` is a flexible size (shares leftover space), `px`/`rem` is a fixed size. A bare number is treated as a percentage.
- `max`: `SplitterPaneSize`. Maximum size in the same units as `defaultSize`, no limit by default
- `min`: `SplitterPaneSize`. Minimum size in the same units as `defaultSize`
- `styles`: `Partial<Record<"pane", CSSProperties>>`.
- `variant`: `string`.

- Keep visual order consistent with reading order.

[Upstream documentation for Splitter.Pane](https://mantine.dev/core/splitter/)

## SplitterPane

@mantine/core; layout; safety: wrapped.

- `collapseThreshold`: `SplitterPaneSize`. Size below which the pane snaps to collapsed, defaults to `min`
- `collapsible`: `false | true`. Whether this pane can be collapsed Known values: false, true.
- `color`: `string`.
- `defaultSize`: `SplitterPaneSize`. Required. Initial size, a `number`/`%` is a flexible size (shares leftover space), `px`/`rem` is a fixed size. A bare number is treated as a percentage.
- `max`: `SplitterPaneSize`. Maximum size in the same units as `defaultSize`, no limit by default
- `min`: `SplitterPaneSize`. Minimum size in the same units as `defaultSize`
- `styles`: `Partial<Record<"pane", CSSProperties>>`.
- `variant`: `string`.

- Keep visual order consistent with reading order.

[Upstream documentation for SplitterPane](https://mantine.dev/core/splitter-pane/)

## Spoiler

@mantine/core; navigation; safety: wrapped.

- `attributes`: `{ content?: Record<string, any>; root?: Record<string, any>; control?: Record<string, any>; }`.
- `color`: `string`.
- `defaultExpanded`: `false | true`. Initial expanded state in uncontrolled mode. If `true`, content starts expanded. If `false`, content starts collapsed Known values: false, true.
- `expanded`: `false | true`. Controlled expanded state value Known values: false, true.
- `hideAriaLabel`: `string`. Accessible label for the toggle button when expanded. If not set, `hideLabel` is used
- `hideLabel`: `React.ReactNode`. Content displayed in the toggle button when content is expanded (to collapse)
- `maxHeight`: `number`. Maximum height of visible content in px. When content exceeds this height, the toggle control appears
- `showAriaLabel`: `string`. Accessible label for the toggle button when collapsed. If not set, `showLabel` is used
- `showLabel`: `React.ReactNode`. Content displayed in the toggle button when content is collapsed (to expand)
- `transitionDuration`: `number`. Spoiler reveal transition duration in ms. Set to 0 to disable animation
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.

- Provide an accessible label for controls without visible text.

[Upstream documentation for Spoiler](https://mantine.dev/core/spoiler/)

## Stack

@mantine/core; layout; safety: wrapped.

- `align`: `Property.AlignItems`. Controls `align-items` CSS property Known values: "-moz-initial", "anchor-center", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "normal", "revert", "revert-layer", "self-end", "self-start", "start", "stretch", "unset".
- `attributes`: `{ root?: Record<string, any>; }`.
- `color`: `string`.
- `gap`: `MantineSpacing`. Key of `theme.spacing` or any valid CSS value to set `gap` property, numbers are converted to rem Known values: "lg", "md", "sm", "xl", "xs".
- `justify`: `Property.JustifyContent`. Controls `justify-content` CSS property Known values: "-moz-initial", "center", "end", "flex-end", "flex-start", "inherit", "initial", "left", "normal", "revert", "revert-layer", "right", "space-around", "space-between", "space-evenly", "start", "stretch", "unset".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.

- Keep visual order consistent with reading order.

[Upstream documentation for Stack](https://mantine.dev/core/stack/)

## StatBar

@homarr/widgets; interaction; safety: allowed. Displays a compact labeled statistic and progress value.

- `color`: `string`.
- `label`: `string`.
- `max`: `number`.
- `value`: `number`. Required.

- Provide a visible label or aria-label.

[Upstream documentation for StatBar](https://homarr.dev/docs/management/custom-widgets/)

## Stepper

@mantine/core; navigation; safety: wrapped.

Bind a temporary number input with `bind`. Initialize with `defaultValue`; reset with `resetKey`.

Subcomponents: Stepper.Completed, Stepper.Step.

- `active`: `number`. Required. Index of the active step
- `allowNextStepsSelect`: `false | true`. When true, users can click and jump to any step. When false, users can only navigate to completed steps Known values: false, true.
- `attributes`: `{ content?: Record<string, any>; root?: Record<string, any>; separator?: Record<string, any>; step?: Record<string, any>; ... 9 more ...; stepDescription?: Record<...>; }`.
- `autoContrast`: `false | true`. When true, automatically adjusts the icon color in completed steps to ensure sufficient contrast against the step background color Known values: false, true.
- `color`: `DefaultMantineColor`. Key of `theme.colors` or any valid CSS color, controls colors of active and progress steps Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `contentPadding`: `MantineSpacing`. Key of `theme.spacing` or any valid CSS value to set `padding-top` of the content Known values: "lg", "md", "sm", "xl", "xs".
- `iconPosition`: `"left" | "right"`. Icon position relative to the step body. Ignored if `labelPosition="bottom"` is set – with the label below the icon there is no left/right to place it on. Known values: "left", "right".
- `iconSize`: `string | number`. Controls size of the step icon, by default icon size is inferred from `size` prop
- `keepMounted`: `false | true`. If set, all step content is kept mounted. React 19 `Activity` is used to preserve state while content is hidden. Known values: false, true.
- `labelPosition`: `"right" | "bottom"`. Controls position of the step label and description relative to the step icon. Takes precedence over `iconPosition`. Ignored if `orientation="vertical"` is set. Known values: "bottom", "right".
- `orientation`: `"horizontal" | "vertical"`. Stepper orientation Known values: "horizontal", "vertical".
- `size`: `"xs" | "sm" | "md" | "lg" | "xl"`. Controls size of various Stepper elements Known values: "lg", "md", "sm", "xl", "xs".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `wrap`: `false | true`. Determines whether steps should wrap to the next line if no space is available Known values: false, true.

- Provide an accessible label for controls without visible text.

[Upstream documentation for Stepper](https://mantine.dev/core/stepper/)

## Stepper.Completed

@mantine/core; navigation; safety: wrapped.

- Provide an accessible label for controls without visible text.

[Upstream documentation for Stepper.Completed](https://mantine.dev/core/stepper/)

## Stepper.Step

@mantine/core; navigation; safety: wrapped.

- `allowStepClick`: `false | true`. Set to false to disable clicks on step Known values: false, true.
- `allowStepSelect`: `false | true`. Should step selection be allowed Known values: false, true.
- `color`: `DefaultMantineColor`. Key of `theme.colors`, by default controlled by Stepper component Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `iconPosition`: `"left" | "right"`. Icon position relative to step body, controlled by Stepper component Known values: "left", "right".
- `iconSize`: `string | number`. Icon wrapper size
- `loading`: `false | true`. Indicates loading state of the step Known values: false, true.
- `orientation`: `"horizontal" | "vertical"`. Component orientation Known values: "horizontal", "vertical".
- `state`: `"stepInactive" | "stepProgress" | "stepCompleted"`. Step state, automatically set by Stepper component based on active prop. stepInactive: not reached, stepProgress: current, stepCompleted: passed Known values: "stepCompleted", "stepInactive", "stepProgress".
- `step`: `number`. 0-based step index, automatically set by Stepper component
- `styles`: `Partial<Record<StepperStepStylesNames, CSSProperties>>`.
- `type`: `"button" | "submit" | "reset"`.  Known values: "button", "reset", "submit".
- `variant`: `string`.
- `withIcon`: `false | true`. When false, hides the step icon. Useful for creating compact steppers with only labels Known values: false, true.

- Provide an accessible label for controls without visible text.

[Upstream documentation for Stepper.Step](https://mantine.dev/core/stepper/)

## StepperCompleted

@mantine/core; navigation; safety: wrapped.

- Provide an accessible label for controls without visible text.

[Upstream documentation for StepperCompleted](https://mantine.dev/core/stepper-completed/)

## StepperStep

@mantine/core; navigation; safety: wrapped.

- `allowStepClick`: `false | true`. Set to false to disable clicks on step Known values: false, true.
- `allowStepSelect`: `false | true`. Should step selection be allowed Known values: false, true.
- `color`: `DefaultMantineColor`. Key of `theme.colors`, by default controlled by Stepper component Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `iconPosition`: `"left" | "right"`. Icon position relative to step body, controlled by Stepper component Known values: "left", "right".
- `iconSize`: `string | number`. Icon wrapper size
- `loading`: `false | true`. Indicates loading state of the step Known values: false, true.
- `orientation`: `"horizontal" | "vertical"`. Component orientation Known values: "horizontal", "vertical".
- `state`: `"stepInactive" | "stepProgress" | "stepCompleted"`. Step state, automatically set by Stepper component based on active prop. stepInactive: not reached, stepProgress: current, stepCompleted: passed Known values: "stepCompleted", "stepInactive", "stepProgress".
- `step`: `number`. 0-based step index, automatically set by Stepper component
- `styles`: `Partial<Record<StepperStepStylesNames, CSSProperties>>`.
- `type`: `"button" | "submit" | "reset"`.  Known values: "button", "reset", "submit".
- `variant`: `string`.
- `withIcon`: `false | true`. When false, hides the step icon. Useful for creating compact steppers with only labels Known values: false, true.

- Provide an accessible label for controls without visible text.

[Upstream documentation for StepperStep](https://mantine.dev/core/stepper-step/)

## SubData

@homarr/widgets; network; safety: wrapped. Reads a nested value from a named manual-query result.

- `as`: `'Text' | 'Title' | 'Badge' | 'Code' | 'Image'`.  Known values: "Text", "Title", "Badge", "Code", "Image".
- `c`: `string`.
- `color`: `string`.
- `fit`: `string`.
- `fw`: `number`.
- `h`: `string | number`.
- `order`: `1 | 2 | 3 | 4 | 5 | 6`.  Known values: 1, 2, 3, 4, 5, 6.
- `radius`: `string | number`.
- `size`: `string`.
- `variant`: `string`.
- `w`: `string | number`.

- Action labels must describe their effect; destructive actions require confirmation.

[Upstream documentation for SubData](https://homarr.dev/docs/management/custom-widgets/)

## SubFetch

@homarr/widgets; network; safety: wrapped. Runs a named manual query with invocation-time parameters.

- `as`: `'json' | 'text'`.  Known values: "json", "text".
- `errorMessage`: `string`.
- `fallback`: `ReactNode`.
- `loadingLabel`: `string`.
- `params`: `Record<string, string | number | boolean>`.
- `refreshInterval`: `number`.
- `requestId`: `string`. Identifier of the named Custom Widget query.
- `trigger`: `'auto' | 'manual'`.  Known values: "auto", "manual".
- `triggerAriaLabel`: `string`. Accessible label for a custom manual-query trigger.
- `triggerContent`: `ReactNode`. Custom accessible trigger shown before a manual query runs.

- Action labels must describe their effect; destructive actions require confirmation.

[Upstream documentation for SubFetch](https://homarr.dev/docs/management/custom-widgets/)

## SunburstChart

@mantine/charts; charts; safety: wrapped.

- `attributes`: `{ root?: Record<string, any>; tooltip?: Record<string, any>; tooltipItem?: Record<string, any>; tooltipItemBody?: Record<...>; ... 4 more ...; tooltipBody?: Record<...>; }`.
- `color`: `string`.
- `data`: `SunburstChartData[]`. Required. Data used to render chart
- `dataKey`: `string`. Key in data object for the value
- `endAngle`: `number`. Angle in degrees at which the chart should end
- `gap`: `number`. Gap between sectors and rings in px
- `innerRadius`: `number`. Controls the radius of the inner circle at the center of the chart
- `size`: `number`. Controls chart width and height
- `startAngle`: `number`. Angle in degrees from which the chart should start
- `strokeColor`: `DefaultMantineColor`. Controls color of the sectors stroke, by default depends on color scheme Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `sunburstChartProps`: `Partial<Omit<RechartsSunburstChartProps, "data" | "ref" | "dataKey">>`. Props passed down to recharts `SunburstChart` component
- `tooltipAnimationDuration`: `number`. Tooltip animation duration in ms
- `tooltipProps`: `Omit<TooltipProps<any, any>, "ref">`. Props passed down to `Tooltip` recharts component
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `withLabels`: `false | true`. Determines whether value labels are displayed inside each sector Known values: false, true.
- `withTooltip`: `false | true`. Determines whether the tooltip should be displayed when a node is hovered Known values: false, true.

- Include a nearby text summary of the chart data.

[Upstream documentation for SunburstChart](https://mantine.dev/charts/sunburst-chart/)

## Switch

@mantine/core; interaction; safety: wrapped.

Bind a temporary boolean input with `bind`. Initialize with `defaultChecked`; reset with `resetKey`.

Subcomponents: Switch.Group.

- `attributes`: `{ body?: Record<string, any>; input?: Record<string, any>; label?: Record<string, any>; track?: Record<string, any>; ... 5 more ...; trackLabel?: Record<...>; }`.
- `color`: `DefaultMantineColor`. Key of `theme.colors` or any valid CSS color to set input color in checked state Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `description`: `React.ReactNode`. Description displayed below the label
- `error`: `React.ReactNode`. Error displayed below the label
- `label`: `React.ReactNode`. Content of the label associated with the switch
- `labelPosition`: `"left" | "right"`. Position of the label relative to the input Known values: "left", "right".
- `offLabel`: `React.ReactNode`. Inner label when the `Switch` is in unchecked state
- `size`: `MantineSize | (string & {})`. Controls size of all elements Known values: "lg", "md", "sm", "xl", "xs".
- `thumbIcon`: `React.ReactNode`. Icon inside the thumb of the switch
- `type`: `HTMLInputTypeAttribute`.  Known values: "button", "checkbox", "color", "date", "datetime-local", "email", "file", "hidden", "image", "month", "number", "password", "radio", "range", "reset", "search", "submit", "tel", "text", "time", "url", "week".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `withThumbIndicator`: `false | true`. If set, displays a colored dot inside the thumb that matches the track background color Known values: false, true.
- `wrapperProps`: `(React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & DataAttributes)`. Props passed down to the root element

- Provide a visible label or aria-label.

[Upstream documentation for Switch](https://mantine.dev/core/switch/)

## Switch.Group

@mantine/core; interaction; safety: wrapped.

Bind a temporary string[] input with `bind`. Initialize with `defaultValue`; reset with `resetKey`.

- `attributes`: `{ label?: Record<string, any>; root?: Record<string, any>; description?: Record<string, any>; error?: Record<string, any>; success?: Record<...>; required?: Record<...>; }`.
- `color`: `string`.
- `defaultValue`: `Value[]`. Default value for uncontrolled component
- `description`: `React.ReactNode`. Contents of `Input.Description` component. If not set, description is not displayed.
- `descriptionProps`: `(InputDescriptionProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Description` component
- `error`: `React.ReactNode`. Contents of `Input.Error` component. If not set, error is not displayed.
- `errorProps`: `(InputErrorProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Error` component
- `hiddenInputProps`: `(React.ClassAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLInputElement> & DataAttributes)`. Props passed down to the hidden input for uncontrolled forms
- `hiddenInputValuesSeparator`: `string`. Separator for values in the hidden input for uncontrolled forms
- `inputWrapperOrder`: `("input" | "label" | "description" | "error")[]`. Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.
- `label`: `React.ReactNode`. Contents of `Input.Label` component. If not set, label is not displayed.
- `labelElement`: `"div" | "label"`. Root element for the label. Use `'div'` when wrapper contains multiple input elements and you need to handle `htmlFor` manually. Known values: "div", "label".
- `labelProps`: `(InputLabelProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Label` component
- `maxSelectedValues`: `number`. Maximum number of switches that can be selected. When the limit is reached, unselected switches will be disabled
- `size`: `MantineSize | (string & {})`. Controls size of the `Input.Wrapper` Known values: "lg", "md", "sm", "xl", "xs".
- `success`: `React.ReactNode`. Contents of `Input.Success` component. If not set, success is not displayed.
- `successProps`: `(InputSuccessProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Success` component
- `unstyled`: `false | true`.  Known values: false, true.
- `value`: `Value[]`. Controlled component value
- `variant`: `string`.
- `withAsterisk`: `false | true`. If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. Known values: false, true.
- `wrapperProps`: `(React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & DataAttributes)`. Props passed down to the `Input.Wrapper`

- Provide a visible label or aria-label.

[Upstream documentation for Switch.Group](https://mantine.dev/core/switch/)

## SwitchGroup

@mantine/core; content; safety: wrapped.

Bind a temporary string[] input with `bind`. Initialize with `defaultValue`; reset with `resetKey`.

- `attributes`: `{ label?: Record<string, any>; root?: Record<string, any>; description?: Record<string, any>; error?: Record<string, any>; success?: Record<...>; required?: Record<...>; }`.
- `color`: `string`.
- `defaultValue`: `Value[]`. Default value for uncontrolled component
- `description`: `React.ReactNode`. Contents of `Input.Description` component. If not set, description is not displayed.
- `descriptionProps`: `(InputDescriptionProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Description` component
- `error`: `React.ReactNode`. Contents of `Input.Error` component. If not set, error is not displayed.
- `errorProps`: `(InputErrorProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Error` component
- `hiddenInputProps`: `(React.ClassAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLInputElement> & DataAttributes)`. Props passed down to the hidden input for uncontrolled forms
- `hiddenInputValuesSeparator`: `string`. Separator for values in the hidden input for uncontrolled forms
- `inputWrapperOrder`: `("input" | "label" | "description" | "error")[]`. Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.
- `label`: `React.ReactNode`. Contents of `Input.Label` component. If not set, label is not displayed.
- `labelElement`: `"div" | "label"`. Root element for the label. Use `'div'` when wrapper contains multiple input elements and you need to handle `htmlFor` manually. Known values: "div", "label".
- `labelProps`: `(InputLabelProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Label` component
- `maxSelectedValues`: `number`. Maximum number of switches that can be selected. When the limit is reached, unselected switches will be disabled
- `size`: `MantineSize | (string & {})`. Controls size of the `Input.Wrapper` Known values: "lg", "md", "sm", "xl", "xs".
- `success`: `React.ReactNode`. Contents of `Input.Success` component. If not set, success is not displayed.
- `successProps`: `(InputSuccessProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Success` component
- `unstyled`: `false | true`.  Known values: false, true.
- `value`: `Value[]`. Controlled component value
- `variant`: `string`.
- `withAsterisk`: `false | true`. If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. Known values: false, true.
- `wrapperProps`: `(React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & DataAttributes)`. Props passed down to the `Input.Wrapper`

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for SwitchGroup](https://mantine.dev/core/switch-group/)

## TabPanel

@homarr/widgets; interaction; safety: allowed. Renders content for one declarative tab.

- `label`: `string`.
- `value`: `string`. Required.

- Provide a visible label or aria-label.

[Upstream documentation for TabPanel](https://homarr.dev/docs/management/custom-widgets/)

## Table

@mantine/core; content; safety: wrapped.

Subcomponents: Table.Caption, Table.DataRenderer, Table.ScrollContainer, Table.Tbody, Table.Td, Table.Tfoot, Table.Th, Table.Thead, Table.Tr.

- `align`: `"center" | "left" | "right"`.  Known values: "center", "left", "right".
- `attributes`: `{ caption?: Record<string, any>; table?: Record<string, any>; tbody?: Record<string, any>; td?: Record<string, any>; tfoot?: Record<...>; th?: Record<...>; thead?: Record<...>; tr?: Record<...>; }`.
- `borderColor`: `DefaultMantineColor`. Color of table borders, key of `theme.colors` or any valid CSS color Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `captionSide`: `"bottom" | "top"`. Side of the `Table.Caption` Known values: "bottom", "top".
- `color`: `string`.
- `data`: `TableData`. Data used to generate table, ignored if `children` prop is set
- `highlightOnHover`: `false | true`. If set, table rows background changes to `highlightOnHoverColor` when hovered Known values: false, true.
- `highlightOnHoverColor`: `DefaultMantineColor`. Background color of table rows when hovered, key of `theme.colors` or any valid CSS color Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `horizontalSpacing`: `MantineSpacing`. Horizontal cells spacing, key of `theme.spacing` or any valid CSS value for padding, numbers are converted to rem Known values: "lg", "md", "sm", "xl", "xs".
- `layout`: `"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "fixed"`. Value of `table-layout` style Known values: "-moz-initial", "auto", "fixed", "inherit", "initial", "revert", "revert-layer", "unset".
- `stickyHeader`: `false | true`. If set, `Table.Thead` is sticky Known values: false, true.
- `stickyHeaderOffset`: `string | number`. Offset from top at which `Table.Thead` should become sticky
- `striped`: `false | true | "odd" | "even"`. If set, every odd/even row background changes to `stripedColor`, if set to `true`, then `odd` value will be used Known values: "even", false, "odd", true.
- `stripedColor`: `DefaultMantineColor`. Background color of striped rows, key of `theme.colors` or any valid CSS color Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `tabularNums`: `false | true`. If set, `font-variant-numeric: tabular-nums` style is applied Known values: false, true.
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `(string & {}) | TableVariant`.  Known values: "default", "vertical".
- `verticalSpacing`: `MantineSpacing`. Vertical cells spacing, key of `theme.spacing` or any valid CSS value for padding, numbers are converted to rem Known values: "lg", "md", "sm", "xl", "xs".
- `withColumnBorders`: `false | true`. If set, the table has borders between columns Known values: false, true.
- `withRowBorders`: `false | true`. If set, the table has borders between rows Known values: false, true.
- `withTableBorder`: `false | true`. If set, the table has the outer border Known values: false, true.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for Table](https://mantine.dev/core/table/)

## Table.Caption

@mantine/core; content; safety: wrapped.

- `color`: `string`.
- `variant`: `(string & {}) | TableVariant`.  Known values: "default", "vertical".

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for Table.Caption](https://mantine.dev/core/table/)

## Table.DataRenderer

@mantine/core; content; safety: wrapped.

- `data`: `TableData`. Required.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for Table.DataRenderer](https://mantine.dev/core/table/)

## Table.ScrollContainer

@mantine/core; content; safety: wrapped.

- `attributes`: `{ scrollContainer?: Record<string, any>; scrollContainerInner?: Record<string, any>; }`.
- `color`: `string`.
- `maxHeight`: `Property.MaxHeight<string | number>`. `max-height` of the `Table` at which it should become scrollable
- `minWidth`: `Property.MinWidth<string | number>`. `min-width` of the `Table` at which it should become scrollable
- `scrollAreaProps`: `ScrollAreaProps`. Props passed down to `ScrollArea` component, not applicable with `type="native"`
- `type`: `"native" | "scrollarea"`. Type of the scroll container, `native` to use native scrollbars, `scrollarea` to use `ScrollArea` component Known values: "native", "scrollarea".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for Table.ScrollContainer](https://mantine.dev/core/table/)

## Table.Tbody

@mantine/core; content; safety: wrapped.

- `color`: `string`.
- `variant`: `(string & {}) | TableVariant`.  Known values: "default", "vertical".

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for Table.Tbody](https://mantine.dev/core/table/)

## Table.Td

@mantine/core; content; safety: wrapped.

- `align`: `"center" | "left" | "right" | "justify" | "char"`.  Known values: "center", "char", "justify", "left", "right".
- `color`: `string`.
- `variant`: `(string & {}) | TableVariant`.  Known values: "default", "vertical".

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for Table.Td](https://mantine.dev/core/table/)

## Table.Tfoot

@mantine/core; content; safety: wrapped.

- `color`: `string`.
- `variant`: `(string & {}) | TableVariant`.  Known values: "default", "vertical".

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for Table.Tfoot](https://mantine.dev/core/table/)

## Table.Th

@mantine/core; content; safety: wrapped.

- `align`: `"center" | "left" | "right" | "justify" | "char"`.  Known values: "center", "char", "justify", "left", "right".
- `color`: `string`.
- `variant`: `(string & {}) | TableVariant`.  Known values: "default", "vertical".

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for Table.Th](https://mantine.dev/core/table/)

## Table.Thead

@mantine/core; content; safety: wrapped.

- `color`: `string`.
- `variant`: `(string & {}) | TableVariant`.  Known values: "default", "vertical".

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for Table.Thead](https://mantine.dev/core/table/)

## Table.Tr

@mantine/core; content; safety: wrapped.

- `color`: `string`.
- `variant`: `(string & {}) | TableVariant`.  Known values: "default", "vertical".

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for Table.Tr](https://mantine.dev/core/table/)

## TableCaption

@mantine/core; content; safety: wrapped.

- `color`: `string`.
- `variant`: `(string & {}) | TableVariant`.  Known values: "default", "vertical".

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for TableCaption](https://mantine.dev/core/table-caption/)

## TableOfContents

@mantine/core; blocked; safety: denied.

Unavailable: Observes headings and scrolling outside the widget root

[Upstream documentation for TableOfContents](https://mantine.dev/core/table-of-contents/)

## TableScrollContainer

@mantine/core; content; safety: wrapped.

- `attributes`: `{ scrollContainer?: Record<string, any>; scrollContainerInner?: Record<string, any>; }`.
- `color`: `string`.
- `maxHeight`: `Property.MaxHeight<string | number>`. `max-height` of the `Table` at which it should become scrollable
- `minWidth`: `Property.MinWidth<string | number>`. `min-width` of the `Table` at which it should become scrollable
- `scrollAreaProps`: `ScrollAreaProps`. Props passed down to `ScrollArea` component, not applicable with `type="native"`
- `type`: `"native" | "scrollarea"`. Type of the scroll container, `native` to use native scrollbars, `scrollarea` to use `ScrollArea` component Known values: "native", "scrollarea".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for TableScrollContainer](https://mantine.dev/core/table-scroll-container/)

## TableTbody

@mantine/core; content; safety: wrapped.

- `color`: `string`.
- `variant`: `(string & {}) | TableVariant`.  Known values: "default", "vertical".

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for TableTbody](https://mantine.dev/core/table-tbody/)

## TableTd

@mantine/core; content; safety: wrapped.

- `align`: `"center" | "left" | "right" | "justify" | "char"`.  Known values: "center", "char", "justify", "left", "right".
- `color`: `string`.
- `variant`: `(string & {}) | TableVariant`.  Known values: "default", "vertical".

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for TableTd](https://mantine.dev/core/table-td/)

## TableTfoot

@mantine/core; content; safety: wrapped.

- `color`: `string`.
- `variant`: `(string & {}) | TableVariant`.  Known values: "default", "vertical".

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for TableTfoot](https://mantine.dev/core/table-tfoot/)

## TableTh

@mantine/core; content; safety: wrapped.

- `align`: `"center" | "left" | "right" | "justify" | "char"`.  Known values: "center", "char", "justify", "left", "right".
- `color`: `string`.
- `variant`: `(string & {}) | TableVariant`.  Known values: "default", "vertical".

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for TableTh](https://mantine.dev/core/table-th/)

## TableThead

@mantine/core; content; safety: wrapped.

- `color`: `string`.
- `variant`: `(string & {}) | TableVariant`.  Known values: "default", "vertical".

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for TableThead](https://mantine.dev/core/table-thead/)

## TableTr

@mantine/core; content; safety: wrapped.

- `color`: `string`.
- `variant`: `(string & {}) | TableVariant`.  Known values: "default", "vertical".

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for TableTr](https://mantine.dev/core/table-tr/)

## TablerIcon

@homarr/widgets; content; safety: wrapped. Resolves an installed Tabler icon by its safe name.

- `color`: `string`.
- `name`: `string`. Required.
- `size`: `string | number`.
- `stroke`: `string | number`.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for TablerIcon](https://homarr.dev/docs/management/custom-widgets/)

## Tabs

@mantine/core; navigation; safety: wrapped.

Bind a temporary string input with `bind`. Initialize with `defaultValue`; reset with `resetKey`.

Subcomponents: Tabs.List, Tabs.Panel, Tabs.Tab.

- `activateTabWithKeyboard`: `false | true`. If set, tab is activated with arrow key press Known values: false, true.
- `allowTabDeactivation`: `false | true`. If set, tab can be deactivated Known values: false, true.
- `attributes`: `{ root?: Record<string, any>; panel?: Record<string, any>; list?: Record<string, any>; tab?: Record<string, any>; tabSection?: Record<...>; tabLabel?: Record<...>; }`.
- `autoContrast`: `false | true`. If set, adjusts text color based on background color for `pills` variant Known values: false, true.
- `color`: `DefaultMantineColor`. Changes colors of `Tabs.Tab` components when variant is `pills` or `default`, does nothing for other variants Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `defaultValue`: `null | string`. Uncontrolled component default value
- `inverted`: `false | true`. Determines whether tabs should have inverted styles Known values: false, true.
- `keepMounted`: `false | true`. If set to `false`, `Tabs.Panel` content will be unmounted when the associated tab is not active Known values: false, true.
- `keepMountedMode`: `"activity" | "display-none"`. Controls how inactive tabs content is hidden when `keepMounted` is `true`, `'activity'` – hidden with `Activity` component, `'display-none'` – hidden with `display: none` styles Known values: "activity", "display-none".
- `loop`: `false | true`. If set, arrow key presses loop though items (first to last and last to first) Known values: false, true.
- `orientation`: `"horizontal" | "vertical"`. Tabs orientation Known values: "horizontal", "vertical".
- `placement`: `"left" | "right"`. `Tabs.List` placement relative to `Tabs.Panel`, applicable only when `orientation="vertical"` Known values: "left", "right".
- `unstyled`: `false | true`.  Known values: false, true.
- `value`: `null | string`. Controlled component value
- `variant`: `(string & {}) | TabsVariant`.  Known values: "default", "outline", "pills".

- Provide an accessible label for controls without visible text.

[Upstream documentation for Tabs](https://mantine.dev/core/tabs/)

## Tabs.List

@mantine/core; navigation; safety: wrapped.

- `color`: `string`.
- `grow`: `false | true`. Determines whether tabs should take all available space Known values: false, true.
- `justify`: `Property.JustifyContent`. Tabs alignment Known values: "-moz-initial", "center", "end", "flex-end", "flex-start", "inherit", "initial", "left", "normal", "revert", "revert-layer", "right", "space-around", "space-between", "space-evenly", "start", "stretch", "unset".
- `styles`: `Partial<Record<"list", CSSProperties>>`.
- `variant`: `string`.

- Provide an accessible label for controls without visible text.

[Upstream documentation for Tabs.List](https://mantine.dev/core/tabs/)

## Tabs.Panel

@mantine/core; navigation; safety: wrapped.

- `color`: `string`.
- `keepMounted`: `false | true`. If set, the content is kept mounted, even if `keepMounted` is set `false` in the parent `Tabs` component Known values: false, true.
- `styles`: `Partial<Record<"panel", CSSProperties>>`.
- `value`: `string`. Required. Value of associated control
- `variant`: `string`.

- Provide an accessible label for controls without visible text.

[Upstream documentation for Tabs.Panel](https://mantine.dev/core/tabs/)

## Tabs.Tab

@mantine/core; navigation; safety: wrapped.

- `attributes`: `{ root?: Record<string, any>; }`.
- `color`: `DefaultMantineColor`. Key of `theme.colors` or any valid CSS color, controls tab color based on `variant` Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `leftSection`: `React.ReactNode`. Content displayed on the left side of the label
- `rightSection`: `React.ReactNode`. Content displayed on the right side of the label
- `size`: `string | number`. Size passed from parent component, sets `data-size` if value is not number like
- `styles`: `Partial<Record<TabsTabStylesNames, CSSProperties>>`.
- `type`: `"button" | "submit" | "reset"`.  Known values: "button", "reset", "submit".
- `unstyled`: `false | true`.  Known values: false, true.
- `value`: `string`. Required. Value of associated panel
- `variant`: `string`.

- Provide an accessible label for controls without visible text.

[Upstream documentation for Tabs.Tab](https://mantine.dev/core/tabs/)

## TabsContainer

@homarr/widgets; interaction; safety: allowed. Renders a declarative tab container.

- `defaultTab`: `string`.

- Provide a visible label or aria-label.

[Upstream documentation for TabsContainer](https://homarr.dev/docs/management/custom-widgets/)

## TabsList

@mantine/core; navigation; safety: wrapped.

- `color`: `string`.
- `grow`: `false | true`. Determines whether tabs should take all available space Known values: false, true.
- `justify`: `Property.JustifyContent`. Tabs alignment Known values: "-moz-initial", "center", "end", "flex-end", "flex-start", "inherit", "initial", "left", "normal", "revert", "revert-layer", "right", "space-around", "space-between", "space-evenly", "start", "stretch", "unset".
- `styles`: `Partial<Record<"list", CSSProperties>>`.
- `variant`: `string`.

- Provide an accessible label for controls without visible text.

[Upstream documentation for TabsList](https://mantine.dev/core/tabs-list/)

## TabsPanel

@mantine/core; navigation; safety: wrapped.

- `color`: `string`.
- `keepMounted`: `false | true`. If set, the content is kept mounted, even if `keepMounted` is set `false` in the parent `Tabs` component Known values: false, true.
- `styles`: `Partial<Record<"panel", CSSProperties>>`.
- `value`: `string`. Required. Value of associated control
- `variant`: `string`.

- Provide an accessible label for controls without visible text.

[Upstream documentation for TabsPanel](https://mantine.dev/core/tabs-panel/)

## TabsTab

@mantine/core; navigation; safety: wrapped.

- `attributes`: `{ root?: Record<string, any>; }`.
- `color`: `DefaultMantineColor`. Key of `theme.colors` or any valid CSS color, controls tab color based on `variant` Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `leftSection`: `React.ReactNode`. Content displayed on the left side of the label
- `rightSection`: `React.ReactNode`. Content displayed on the right side of the label
- `size`: `string | number`. Size passed from parent component, sets `data-size` if value is not number like
- `styles`: `Partial<Record<TabsTabStylesNames, CSSProperties>>`.
- `type`: `"button" | "submit" | "reset"`.  Known values: "button", "reset", "submit".
- `unstyled`: `false | true`.  Known values: false, true.
- `value`: `string`. Required. Value of associated panel
- `variant`: `string`.

- Provide an accessible label for controls without visible text.

[Upstream documentation for TabsTab](https://mantine.dev/core/tabs-tab/)

## TagsInput

@mantine/core; interaction; safety: wrapped.

Bind a temporary string[] input with `bind`. Initialize with `defaultValue`; reset with `resetKey`.

- `acceptValueOnBlur`: `false | true`. If set, the value typed in by the user but not submitted is accepted when the input is blurred Known values: false, true.
- `allowDuplicates`: `false | true`. If set, duplicate tags are allowed Known values: false, true.
- `attributes`: `{ input?: Record<string, any>; label?: Record<string, any>; option?: Record<string, any>; section?: Record<string, any>; ... 14 more ...; inputField?: Record<...>; }`.
- `clearButtonProps`: `InputClearButtonProps`. Props passed down to the clear button
- `clearSectionMode`: `"both" | "rightSection" | "clear"`. Determines how the clear button and rightSection are rendered Known values: "both", "clear", "rightSection".
- `clearable`: `false | true`. If set, the clear button is displayed in the right section when the component has value Known values: false, true.
- `color`: `string`.
- `comboboxProps`: `ComboboxProps`. Props passed down to `Combobox` component
- `data`: `ComboboxGenericData`. Data displayed in the dropdown. Values must be unique.
- `defaultDropdownOpened`: `false | true`. Uncontrolled dropdown initial opened state Known values: false, true.
- `defaultSearchValue`: `string`. Default search value
- `defaultValue`: `string[]`. Uncontrolled component default value
- `description`: `React.ReactNode`. Contents of `Input.Description` component. If not set, description is not displayed.
- `descriptionProps`: `(InputDescriptionProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Description` component
- `dropdownOpened`: `false | true`. Controlled dropdown opened state Known values: false, true.
- `error`: `React.ReactNode`. Contents of `Input.Error` component. If not set, error is not displayed.
- `errorProps`: `(InputErrorProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Error` component
- `floatingHeight`: `"viewport"`. If set to `'viewport'`, the dropdown grows to fill the available vertical space in the viewport. Disables the `flip` middleware. Known values: "viewport".
- `hiddenInputProps`: `Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "value">`. Props passed down to the hidden input
- `hiddenInputValuesDivider`: `string`. Divider used to separate values in the hidden input `value` attribute
- `inputSize`: `string`. HTML `size` attribute for the input element (number of visible characters)
- `inputWrapperOrder`: `("input" | "label" | "description" | "error")[]`. Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.
- `label`: `React.ReactNode`. Contents of `Input.Label` component. If not set, label is not displayed.
- `labelProps`: `(InputLabelProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Label` component
- `leftSection`: `React.ReactNode`. Content section displayed on the left side of the input
- `leftSectionPointerEvents`: `"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "all" | "fill" | "stroke" | "painted" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke"`. Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). Known values: "-moz-initial", "all", "auto", "fill", "inherit", "initial", "none", "painted", "revert", "revert-layer", "stroke", "unset", "visible", "visibleFill", "visiblePainted", "visibleStroke".
- `leftSectionProps`: `React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>`. Props passed down to the `leftSection` element
- `leftSectionWidth`: `Property.Width<string | number>`. Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height
- `limit`: `number`. Maximum number of options displayed at a time, `Infinity` by default
- `loading`: `false | true`. Displays loading indicator in the left or right section Known values: false, true.
- `loadingPosition`: `"left" | "right"`. Position of the loading indicator Known values: "left", "right".
- `maxDropdownHeight`: `string | number`. `max-height` of the dropdown, only applicable when `withScrollArea` prop is `true`, `250` by default
- `maxTags`: `number`. Maximum number of tags
- `openOnFocus`: `false | true`. If set, the dropdown opens when the input receives focus Known values: false, true.
- `pointer`: `false | true`. Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component="button"` for Select/DatePicker). Known values: false, true.
- `rightSection`: `React.ReactNode`. Content section displayed on the right side of the input
- `rightSectionPointerEvents`: `"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "all" | "fill" | "stroke" | "painted" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke"`. Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). Known values: "-moz-initial", "all", "auto", "fill", "inherit", "initial", "none", "painted", "revert", "revert-layer", "stroke", "unset", "visible", "visibleFill", "visiblePainted", "visibleStroke".
- `rightSectionProps`: `React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>`. Props passed down to the `rightSection` element
- `rightSectionWidth`: `Property.Width<string | number>`. Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height
- `scrollAreaProps`: `ScrollAreaProps`. Props passed down to the underlying `ScrollArea` component in the dropdown
- `searchValue`: `string`. Controlled search value
- `selectFirstOptionOnChange`: `false | true`. If set, the first option is selected when value changes, `false` by default Known values: false, true.
- `selectFirstOptionOnDropdownOpen`: `false | true`. If set, the first option is selected when dropdown opens, `false` by default Known values: false, true.
- `size`: `MantineSize | (string & {})`. Controls input `height`, horizontal `padding`, and `font-size` Known values: "lg", "md", "sm", "xl", "xs".
- `splitChars`: `string[]`. Characters that should trigger tags split, `[',']` by default
- `success`: `React.ReactNode`. Contents of `Input.Success` component. If not set, success is not displayed.
- `successProps`: `(InputSuccessProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Success` component
- `type`: `HTMLInputTypeAttribute`.  Known values: "button", "checkbox", "color", "date", "datetime-local", "email", "file", "hidden", "image", "month", "number", "password", "radio", "range", "reset", "search", "submit", "tel", "text", "time", "url", "week".
- `unstyled`: `false | true`.  Known values: false, true.
- `value`: `string[]`. Controlled component value
- `variant`: `string`.
- `withAsterisk`: `false | true`. If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. Known values: false, true.
- `withErrorStyles`: `false | true`. Determines whether the input should have red border and red text color when the `error` prop is set Known values: false, true.
- `withPillsReorder`: `false | true`. If set, tags can be reordered by dragging pills. Disabled when `disabled` or `readOnly` is set. Known values: false, true.
- `withScrollArea`: `false | true`. Determines whether the options should be wrapped with `ScrollArea.AutoSize`, `true` by default Known values: false, true.
- `withSuccessStyles`: `false | true`. Determines whether the input should have green border when the `success` prop is set Known values: false, true.
- `wrapperProps`: `WrapperProps`. Props passed down to the root element

- Provide a visible label or aria-label.

[Upstream documentation for TagsInput](https://mantine.dev/core/tags-input/)

## Text

@mantine/core; content; safety: wrapped.

- `attributes`: `{ root?: Record<string, any>; }`.
- `gradient`: `MantineGradient`. Gradient configuration, ignored when `variant` is not `gradient`
- `inherit`: `false | true`. Determines whether font properties should be inherited from the parent Known values: false, true.
- `inline`: `false | true`. Sets `line-height` to 1 for centering Known values: false, true.
- `lineClamp`: `number`. Number of lines after which Text will be truncated
- `size`: `"xs" | "sm" | "md" | "lg" | "xl" | (string & {})`. Controls `font-size` and `line-height` Known values: "lg", "md", "sm", "xl", "xs".
- `span`: `false | true`. Shorthand for `component="span"` Known values: false, true.
- `textWrap`: `"wrap" | "nowrap" | "balance" | "pretty" | "stable"`. Controls `text-wrap` CSS property Known values: "balance", "nowrap", "pretty", "stable", "wrap".
- `truncate`: `false | true | "end" | "start"`. Side on which Text must be truncated, if `true`, text is truncated from the start Known values: "end", false, "start", true.
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `(string & {}) | TextVariant`.  Known values: "gradient", "text".

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for Text](https://mantine.dev/core/text/)

## TextInput

@mantine/core; interaction; safety: wrapped.

Bind a temporary string input with `bind`. Initialize with `defaultValue`; reset with `resetKey`.

- `attributes`: `{ input?: Record<string, any>; label?: Record<string, any>; section?: Record<string, any>; root?: Record<string, any>; ... 5 more ...; bottomSection?: Record<...>; }`.
- `color`: `string`.
- `description`: `React.ReactNode`. Contents of `Input.Description` component. If not set, description is not displayed.
- `descriptionProps`: `(InputDescriptionProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Description` component
- `error`: `React.ReactNode`. Contents of `Input.Error` component. If not set, error is not displayed.
- `errorProps`: `(InputErrorProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Error` component
- `inputSize`: `string`. HTML `size` attribute for the input element (number of visible characters)
- `inputWrapperOrder`: `("input" | "label" | "description" | "error")[]`. Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.
- `label`: `React.ReactNode`. Contents of `Input.Label` component. If not set, label is not displayed.
- `labelProps`: `(InputLabelProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Label` component
- `leftSection`: `React.ReactNode`. Content section displayed on the left side of the input
- `leftSectionPointerEvents`: `"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "all" | "fill" | "stroke" | "painted" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke"`. Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). Known values: "-moz-initial", "all", "auto", "fill", "inherit", "initial", "none", "painted", "revert", "revert-layer", "stroke", "unset", "visible", "visibleFill", "visiblePainted", "visibleStroke".
- `leftSectionProps`: `React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>`. Props passed down to the `leftSection` element
- `leftSectionWidth`: `Property.Width<string | number>`. Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height
- `loading`: `false | true`. Displays loading indicator in the left or right section Known values: false, true.
- `loadingPosition`: `"left" | "right"`. Position of the loading indicator Known values: "left", "right".
- `pointer`: `false | true`. Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component="button"` for Select/DatePicker). Known values: false, true.
- `rightSection`: `React.ReactNode`. Content section displayed on the right side of the input
- `rightSectionPointerEvents`: `"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "all" | "fill" | "stroke" | "painted" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke"`. Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). Known values: "-moz-initial", "all", "auto", "fill", "inherit", "initial", "none", "painted", "revert", "revert-layer", "stroke", "unset", "visible", "visibleFill", "visiblePainted", "visibleStroke".
- `rightSectionProps`: `React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>`. Props passed down to the `rightSection` element
- `rightSectionWidth`: `Property.Width<string | number>`. Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height
- `size`: `MantineSize | (string & {})`. Controls input `height`, horizontal `padding`, and `font-size` Known values: "lg", "md", "sm", "xl", "xs".
- `success`: `React.ReactNode`. Contents of `Input.Success` component. If not set, success is not displayed.
- `successProps`: `(InputSuccessProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Success` component
- `type`: `HTMLInputTypeAttribute`.  Known values: "button", "checkbox", "color", "date", "datetime-local", "email", "file", "hidden", "image", "month", "number", "password", "radio", "range", "reset", "search", "submit", "tel", "text", "time", "url", "week".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `(string & {}) | InputVariant`.  Known values: "default", "filled", "unstyled".
- `withAsterisk`: `false | true`. If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. Known values: false, true.
- `withErrorStyles`: `false | true`. Determines whether the input should have red border and red text color when the `error` prop is set Known values: false, true.
- `withSuccessStyles`: `false | true`. Determines whether the input should have green border when the `success` prop is set Known values: false, true.
- `wrapperProps`: `WrapperProps`. Props passed down to the root element

- Provide a visible label or aria-label.

[Upstream documentation for TextInput](https://mantine.dev/core/text-input/)

## Textarea

@mantine/core; interaction; safety: wrapped.

Bind a temporary string input with `bind`. Initialize with `defaultValue`; reset with `resetKey`.

- `attributes`: `{ input?: Record<string, any>; label?: Record<string, any>; section?: Record<string, any>; root?: Record<string, any>; ... 5 more ...; bottomSection?: Record<...>; }`.
- `autoComplete`: `string`.
- `autosize`: `false | true`. If set, enables textarea height growing with its content Known values: false, true.
- `bottomSection`: `React.ReactNode`. Content rendered at the bottom of the input, inside the border
- `bottomSectionProps`: `React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>`. Props passed down to the `bottomSection` element
- `color`: `string`.
- `description`: `React.ReactNode`. Contents of `Input.Description` component. If not set, description is not displayed.
- `descriptionProps`: `(InputDescriptionProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Description` component
- `error`: `React.ReactNode`. Contents of `Input.Error` component. If not set, error is not displayed.
- `errorProps`: `(InputErrorProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Error` component
- `inputSize`: `string`. HTML `size` attribute for the input element (number of visible characters)
- `inputWrapperOrder`: `("input" | "label" | "description" | "error")[]`. Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.
- `label`: `React.ReactNode`. Contents of `Input.Label` component. If not set, label is not displayed.
- `labelProps`: `(InputLabelProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Label` component
- `leftSection`: `React.ReactNode`. Content section displayed on the left side of the input
- `leftSectionPointerEvents`: `"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "all" | "fill" | "stroke" | "painted" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke"`. Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). Known values: "-moz-initial", "all", "auto", "fill", "inherit", "initial", "none", "painted", "revert", "revert-layer", "stroke", "unset", "visible", "visibleFill", "visiblePainted", "visibleStroke".
- `leftSectionProps`: `React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>`. Props passed down to the `leftSection` element
- `leftSectionWidth`: `Property.Width<string | number>`. Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height
- `loading`: `false | true`. Displays loading indicator in the left or right section Known values: false, true.
- `loadingPosition`: `"left" | "right"`. Position of the loading indicator Known values: "left", "right".
- `maxRows`: `number`. Maximum rows for autosize textarea to grow, ignored if `autosize` prop is not set
- `minRows`: `number`. Minimum rows of autosize textarea, ignored if `autosize` prop is not set
- `pointer`: `false | true`. Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component="button"` for Select/DatePicker). Known values: false, true.
- `resize`: `"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "block" | "inline" | "both" | "horizontal" | "vertical"`. Controls `resize` CSS property Known values: "-moz-initial", "block", "both", "horizontal", "inherit", "initial", "inline", "none", "revert", "revert-layer", "unset", "vertical".
- `rightSection`: `React.ReactNode`. Content section displayed on the right side of the input
- `rightSectionPointerEvents`: `"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "all" | "fill" | "stroke" | "painted" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke"`. Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). Known values: "-moz-initial", "all", "auto", "fill", "inherit", "initial", "none", "painted", "revert", "revert-layer", "stroke", "unset", "visible", "visibleFill", "visiblePainted", "visibleStroke".
- `rightSectionProps`: `React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>`. Props passed down to the `rightSection` element
- `rightSectionWidth`: `Property.Width<string | number>`. Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height
- `size`: `MantineSize | (string & {})`. Controls input `height`, horizontal `padding`, and `font-size` Known values: "lg", "md", "sm", "xl", "xs".
- `success`: `React.ReactNode`. Contents of `Input.Success` component. If not set, success is not displayed.
- `successProps`: `(InputSuccessProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Success` component
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `withAsterisk`: `false | true`. If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. Known values: false, true.
- `withErrorStyles`: `false | true`. Determines whether the input should have red border and red text color when the `error` prop is set Known values: false, true.
- `withSuccessStyles`: `false | true`. Determines whether the input should have green border when the `success` prop is set Known values: false, true.
- `wrapperProps`: `WrapperProps`. Props passed down to the root element

- Provide a visible label or aria-label.

[Upstream documentation for Textarea](https://mantine.dev/core/textarea/)

## ThemeIcon

@mantine/core; content; safety: wrapped.

- `attributes`: `{ root?: Record<string, any>; }`.
- `autoContrast`: `false | true`. If set, adjusts text color based on background color for `filled` variant Known values: false, true.
- `color`: `DefaultMantineColor`. Key of `theme.colors` or any valid CSS color. Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `gradient`: `MantineGradient`. Gradient data used when `variant="gradient"`
- `size`: `number | MantineSize | (string & {})`. Controls width and height of the button. Numbers are converted to rem. Known values: "lg", "md", "sm", "xl", "xs".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `(string & {}) | ThemeIconVariant`.  Known values: "default", "filled", "gradient", "light", "outline", "transparent", "white".

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for ThemeIcon](https://mantine.dev/core/theme-icon/)

## TimeGrid

@mantine/dates; dates; safety: wrapped.

- `allowDeselect`: `false | true`. Determines whether the value can be deselected when the current active option is clicked or activated with keyboard Known values: false, true.
- `amPmLabels`: `TimePickerAmPmLabels`. Labels used for am/pm values
- `attributes`: `{ root?: Record<string, any>; control?: Record<string, any>; simpleGrid?: Record<string, any>; }`.
- `color`: `string`.
- `data`: `string[]`. Required. Time data in 24h format to be displayed in the grid, for example `['10:00', '18:30', '22:00']`. Time values must be unique.
- `defaultValue`: `null | string`. Uncontrolled component default value
- `format`: `"12h" | "24h"`. Time format displayed in the grid Known values: "12h", "24h".
- `maxTime`: `string`. All controls after this time are disabled
- `minTime`: `string`. All controls before this time are disabled
- `simpleGridProps`: `SimpleGridProps`. Props passed down to the underlying `SimpleGrid` component
- `size`: `"xs" | "sm" | "md" | "lg" | "xl"`. Control `font-size` of controls, key of `theme.fontSizes` or any valid CSS value Known values: "lg", "md", "sm", "xl", "xs".
- `unstyled`: `false | true`.  Known values: false, true.
- `value`: `null | string`. Controlled component value
- `variant`: `string`.
- `withSeconds`: `false | true`. Determines whether the seconds part should be displayed Known values: false, true.

- Include a textual date when the visual calendar carries meaning.

[Upstream documentation for TimeGrid](https://mantine.dev/dates/time-grid/)

## TimeInput

@mantine/dates; dates; safety: wrapped.

Bind a temporary string input with `bind`. Initialize with `defaultValue`; reset with `resetKey`.

- `attributes`: `{ input?: Record<string, any>; label?: Record<string, any>; section?: Record<string, any>; root?: Record<string, any>; ... 5 more ...; bottomSection?: Record<...>; }`.
- `color`: `string`.
- `description`: `React.ReactNode`. Contents of `Input.Description` component. If not set, description is not displayed.
- `descriptionProps`: `(InputDescriptionProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Description` component
- `error`: `React.ReactNode`. Contents of `Input.Error` component. If not set, error is not displayed.
- `errorProps`: `(InputErrorProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Error` component
- `inputSize`: `string`. HTML `size` attribute for the input element (number of visible characters)
- `inputWrapperOrder`: `("input" | "label" | "description" | "error")[]`. Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.
- `label`: `React.ReactNode`. Contents of `Input.Label` component. If not set, label is not displayed.
- `labelProps`: `(InputLabelProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Label` component
- `leftSection`: `React.ReactNode`. Content section displayed on the left side of the input
- `leftSectionPointerEvents`: `"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "all" | "fill" | "stroke" | "painted" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke"`. Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). Known values: "-moz-initial", "all", "auto", "fill", "inherit", "initial", "none", "painted", "revert", "revert-layer", "stroke", "unset", "visible", "visibleFill", "visiblePainted", "visibleStroke".
- `leftSectionProps`: `React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>`. Props passed down to the `leftSection` element
- `leftSectionWidth`: `Property.Width<string | number>`. Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height
- `loading`: `false | true`. Displays loading indicator in the left or right section Known values: false, true.
- `loadingPosition`: `"left" | "right"`. Position of the loading indicator Known values: "left", "right".
- `maxTime`: `string`. Maximum possible string time, if `withSeconds` is true, time should be in format HH:mm:ss, otherwise HH:mm
- `minTime`: `string`. Minimum possible string time, if `withSeconds` is true, time should be in format HH:mm:ss, otherwise HH:mm
- `pointer`: `false | true`. Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component="button"` for Select/DatePicker). Known values: false, true.
- `rightSection`: `React.ReactNode`. Content section displayed on the right side of the input
- `rightSectionPointerEvents`: `"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "all" | "fill" | "stroke" | "painted" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke"`. Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). Known values: "-moz-initial", "all", "auto", "fill", "inherit", "initial", "none", "painted", "revert", "revert-layer", "stroke", "unset", "visible", "visibleFill", "visiblePainted", "visibleStroke".
- `rightSectionProps`: `React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>`. Props passed down to the `rightSection` element
- `rightSectionWidth`: `Property.Width<string | number>`. Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height
- `size`: `MantineSize | (string & {})`. Controls input `height`, horizontal `padding`, and `font-size` Known values: "lg", "md", "sm", "xl", "xs".
- `success`: `React.ReactNode`. Contents of `Input.Success` component. If not set, success is not displayed.
- `successProps`: `(InputSuccessProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Success` component
- `type`: `HTMLInputTypeAttribute`.  Known values: "button", "checkbox", "color", "date", "datetime-local", "email", "file", "hidden", "image", "month", "number", "password", "radio", "range", "reset", "search", "submit", "tel", "text", "time", "url", "week".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `withAsterisk`: `false | true`. If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. Known values: false, true.
- `withErrorStyles`: `false | true`. Determines whether the input should have red border and red text color when the `error` prop is set Known values: false, true.
- `withSeconds`: `false | true`. Determines whether seconds input should be displayed Known values: false, true.
- `withSuccessStyles`: `false | true`. Determines whether the input should have green border when the `success` prop is set Known values: false, true.
- `wrapperProps`: `WrapperProps`. Props passed down to the root element

- Include a textual date when the visual calendar carries meaning.

[Upstream documentation for TimeInput](https://mantine.dev/dates/time-input/)

## TimePicker

@mantine/dates; dates; safety: wrapped.

Bind a temporary string input with `bind`. Initialize with `defaultValue`; reset with `resetKey`.

- `amPmInputLabel`: `string`. `aria-label` of am/pm input
- `amPmLabels`: `TimePickerAmPmLabels`. Labels used for am/pm values
- `amPmSelectProps`: `(React.ClassAttributes<HTMLSelectElement> & React.SelectHTMLAttributes<HTMLSelectElement> & DataAttributes)`. Props passed down to am/pm select
- `attributes`: `{ input?: Record<string, any>; label?: Record<string, any>; section?: Record<string, any>; root?: Record<string, any>; ... 17 more ...; presetControl?: Record<...>; }`.
- `clearButtonProps`: `(CloseButtonProps & ElementProps<"button"> & DataAttributes)`. Props passed down to clear button
- `clearSectionMode`: `"both" | "rightSection" | "clear"`. Determines how the clear button and rightSection are rendered Known values: "both", "clear", "rightSection".
- `clearable`: `false | true`. Determines whether the clear button should be displayed Known values: false, true.
- `closeDropdownOnPresetSelect`: `false | true`. If set, the dropdown is closed when a value is selected from the presets list Known values: false, true.
- `color`: `string`.
- `defaultValue`: `string`. Uncontrolled component default value
- `description`: `React.ReactNode`. Contents of `Input.Description` component. If not set, description is not displayed.
- `descriptionProps`: `(InputDescriptionProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Description` component
- `error`: `React.ReactNode`. Contents of `Input.Error` component. If not set, error is not displayed.
- `errorProps`: `(InputErrorProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Error` component
- `format`: `"12h" | "24h"`. Time format, `'24h'` by default Known values: "12h", "24h".
- `hiddenInputProps`: `(React.ClassAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLInputElement> & DataAttributes)`. Props passed down to the hidden input
- `hoursInputLabel`: `string`. `aria-label` of hours input
- `hoursInputProps`: `(React.ClassAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLInputElement> & DataAttributes)`. Props passed down to hours input
- `hoursPlaceholder`: `string`. Hours input placeholder,
- `hoursStep`: `number`. Number by which hours are incremented/decremented
- `inputSize`: `string`. HTML `size` attribute for the input element (number of visible characters)
- `inputWrapperOrder`: `("input" | "label" | "description" | "error")[]`. Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.
- `label`: `React.ReactNode`. Contents of `Input.Label` component. If not set, label is not displayed.
- `labelProps`: `(InputLabelProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Label` component
- `leftSection`: `React.ReactNode`. Content section displayed on the left side of the input
- `leftSectionPointerEvents`: `"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "all" | "fill" | "stroke" | "painted" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke"`. Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). Known values: "-moz-initial", "all", "auto", "fill", "inherit", "initial", "none", "painted", "revert", "revert-layer", "stroke", "unset", "visible", "visibleFill", "visiblePainted", "visibleStroke".
- `leftSectionProps`: `React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>`. Props passed down to the `leftSection` element
- `leftSectionWidth`: `Property.Width<string | number>`. Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height
- `loading`: `false | true`. Displays loading indicator in the left or right section Known values: false, true.
- `loadingPosition`: `"left" | "right"`. Position of the loading indicator Known values: "left", "right".
- `max`: `string`. Max possible time value in `hh:mm:ss` format
- `maxDropdownContentHeight`: `number`. Maximum height of the content displayed in the dropdown in px
- `min`: `string`. Min possible time value in `hh:mm:ss` format
- `minHoursDigits`: `number`. Minimum number of digits displayed in the hours input, applicable only when `type="duration"` is set
- `minutesInputLabel`: `string`. `aria-label` of minutes input
- `minutesInputProps`: `(React.ClassAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLInputElement> & DataAttributes)`. Props passed down to minutes input
- `minutesPlaceholder`: `string`. Minutes input placeholder,
- `minutesStep`: `number`. Number by which minutes are incremented/decremented
- `pointer`: `false | true`. Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component="button"` for Select/DatePicker). Known values: false, true.
- `popoverProps`: `PopoverProps`. Props passed down to `Popover` component
- `presets`: `TimePickerPresets`. Time presets to display in the dropdown
- `reverseTimeControlsList`: `false | true`. If set, the time controls list are reversed, Known values: false, true.
- `rightSection`: `React.ReactNode`. Content section displayed on the right side of the input
- `rightSectionPointerEvents`: `"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "all" | "fill" | "stroke" | "painted" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke"`. Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). Known values: "-moz-initial", "all", "auto", "fill", "inherit", "initial", "none", "painted", "revert", "revert-layer", "stroke", "unset", "visible", "visibleFill", "visiblePainted", "visibleStroke".
- `rightSectionProps`: `React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>`. Props passed down to the `rightSection` element
- `rightSectionWidth`: `Property.Width<string | number>`. Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height
- `scrollAreaProps`: `ScrollAreaProps`. Props passed down to all underlying `ScrollArea` components
- `secondsInputLabel`: `string`. `aria-label` of seconds input
- `secondsInputProps`: `(React.ClassAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLInputElement> & DataAttributes)`. Props passed down to seconds input
- `secondsPlaceholder`: `string`. Seconds input placeholder,
- `secondsStep`: `number`. Number by which seconds are incremented/decremented
- `size`: `MantineSize | (string & {})`. Controls input `height`, horizontal `padding`, and `font-size` Known values: "lg", "md", "sm", "xl", "xs".
- `success`: `React.ReactNode`. Contents of `Input.Success` component. If not set, success is not displayed.
- `successProps`: `(InputSuccessProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Success` component
- `type`: `"time" | "duration"`. TimePicker type, `'time'` for regular time input, `'duration'` for duration input that allows values greater than 24 hours Known values: "duration", "time".
- `unstyled`: `false | true`.  Known values: false, true.
- `value`: `string`. Controlled component value
- `variant`: `(string & {}) | InputVariant`.  Known values: "default", "filled", "unstyled".
- `withAsterisk`: `false | true`. If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. Known values: false, true.
- `withDropdown`: `false | true`. Determines whether the dropdown with time controls list should be visible when the input has focus Known values: false, true.
- `withErrorStyles`: `false | true`. Determines whether the input should have red border and red text color when the `error` prop is set Known values: false, true.
- `withSeconds`: `false | true`. Determines whether the seconds input should be displayed Known values: false, true.
- `withSuccessStyles`: `false | true`. Determines whether the input should have green border when the `success` prop is set Known values: false, true.
- `wrapperProps`: `WrapperProps`. Props passed down to the root element

- Include a textual date when the visual calendar carries meaning.

[Upstream documentation for TimePicker](https://mantine.dev/dates/time-picker/)

## TimeValue

@mantine/dates; dates; safety: wrapped.

- `amPmLabels`: `TimePickerAmPmLabels`. AM/PM labels
- `format`: `"12h" | "24h"`. Time format Known values: "12h", "24h".
- `value`: `string | Date`. Required. Time to format
- `withSeconds`: `false | true`. Determines whether seconds should be displayed Known values: false, true.

- Include a textual date when the visual calendar carries meaning.

[Upstream documentation for TimeValue](https://mantine.dev/dates/time-value/)

## Timeline

@mantine/core; content; safety: wrapped.

Subcomponents: Timeline.Item.

- `active`: `number`. Index of the active element
- `align`: `"left" | "right"`. Position of content relative to the bullet Known values: "left", "right".
- `attributes`: `{ root?: Record<string, any>; item?: Record<string, any>; itemTitle?: Record<string, any>; itemBody?: Record<string, any>; itemContent?: Record<...>; itemBullet?: Record<...>; itemOpposite?: Record<...>; }`.
- `autoContrast`: `false | true`. If set, adjusts text color based on background color for `filled` variant Known values: false, true.
- `bulletSize`: `string | number`. Size of the bullet
- `color`: `DefaultMantineColor`. Key of `theme.colors` or any valid CSS color to control active item colors Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `lineWidth`: `string | number`. Control width of the line
- `reverseActive`: `false | true`. If set, the active items direction is reversed without reversing items order Known values: false, true.
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for Timeline](https://mantine.dev/core/timeline/)

## Timeline.Item

@mantine/core; content; safety: wrapped.

- `alternate`: `false | true`. If set, switches the position of content and opposite Known values: false, true.
- `bullet`: `React.ReactNode`. React node that should be rendered inside the bullet – icon, image, avatar, etc. By default, large white dot is displayed.
- `color`: `DefaultMantineColor`. Key of `theme.colors` or any valid CSS color to control active item colors Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `lineVariant`: `"dashed" | "dotted" | "solid"`. Controls line border style Known values: "dashed", "dotted", "solid".
- `opposite`: `React.ReactNode`. Content displayed on the opposite side of the timeline item
- `styles`: `Partial<Record<TimelineItemStylesNames, CSSProperties>>`.
- `title`: `React.ReactNode`. Item title, displayed next to the bullet
- `variant`: `string`.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for Timeline.Item](https://mantine.dev/core/timeline/)

## TimelineItem

@mantine/core; content; safety: wrapped.

- `alternate`: `false | true`. If set, switches the position of content and opposite Known values: false, true.
- `bullet`: `React.ReactNode`. React node that should be rendered inside the bullet – icon, image, avatar, etc. By default, large white dot is displayed.
- `color`: `DefaultMantineColor`. Key of `theme.colors` or any valid CSS color to control active item colors Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `lineVariant`: `"dashed" | "dotted" | "solid"`. Controls line border style Known values: "dashed", "dotted", "solid".
- `opposite`: `React.ReactNode`. Content displayed on the opposite side of the timeline item
- `styles`: `Partial<Record<TimelineItemStylesNames, CSSProperties>>`.
- `title`: `React.ReactNode`. Item title, displayed next to the bullet
- `variant`: `string`.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for TimelineItem](https://mantine.dev/core/timeline-item/)

## Title

@mantine/core; content; safety: wrapped.

- `attributes`: `{ root?: Record<string, any>; }`.
- `lineClamp`: `number`. Number of lines after which heading will be truncated
- `order`: `2 | 3 | 4 | 5 | 6 | 1`. Heading order (1-6), controls `font-size` style if `size` prop is not set Known values: 1, 2, 3, 4, 5, 6.
- `size`: `TitleSize`. Changes title size, if not set, then size is controlled by `order` prop
- `textWrap`: `"wrap" | "nowrap" | "balance" | "pretty" | "stable"`. Heading `text-wrap` CSS property Known values: "balance", "nowrap", "pretty", "stable", "wrap".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for Title](https://mantine.dev/core/title/)

## ToggleSwitch

@homarr/widgets; network; safety: wrapped. Runs named actions for the enabled and disabled states.

- `color`: `string`.
- `disabled`: `boolean | string`.
- `disabledParams`: `Record<string, string | number | boolean>`.
- `enabledParams`: `Record<string, string | number | boolean>`.
- `errorMessage`: `string`.
- `initialValue`: `boolean | string`.
- `label`: `string`.
- `requestId`: `string`. Identifier of the named Custom Widget action.
- `size`: `string`.

- Action labels must describe their effect; destructive actions require confirmation.

[Upstream documentation for ToggleSwitch](https://homarr.dev/docs/management/custom-widgets/)

## Tooltip

@mantine/core; navigation; safety: wrapped.

Subcomponents: Tooltip.Floating, Tooltip.Group.

- `arrowOffset`: `number`. Arrow offset in px
- `arrowPosition`: `"center" | "side" | "merge"`. Arrow position relative to the tooltip Known values: "center", "merge", "side".
- `arrowRadius`: `number`. Arrow `border-radius` in px
- `arrowSize`: `number`. Arrow size in px
- `attributes`: `{ tooltip?: Record<string, any>; arrow?: Record<string, any>; }`.
- `autoContrast`: `false | true`. If set, adjusts text color based on background color for `filled` variant Known values: false, true.
- `closeDelay`: `number`. Close delay in ms
- `color`: `DefaultMantineColor`. Key of `theme.colors` or any valid CSS color, controls tooltip background, by default set based on current color scheme Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `defaultOpened`: `false | true`. Uncontrolled tooltip initial opened state Known values: false, true.
- `events`: `{ hover: boolean; focus: boolean; touch: boolean; }`. Determines which events will be used to show tooltip
- `floatingStrategy`: `"fixed" | "absolute"`. Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy) Known values: "absolute", "fixed".
- `inline`: `false | true`. Must be set if the tooltip target is an inline element Known values: false, true.
- `interactive`: `false | true`. If set, the tooltip stays open while the pointer moves from the target to the tooltip and remains over it. Required by [WCAG 1.4.13](https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html) if the tooltip contains interactive content. Note that an interactive tooltip intercepts pointer events of the content it overlaps Known values: false, true.
- `keepMounted`: `false | true`. If set, the tooltip is not unmounted from the DOM when hidden, `display: none` styles are applied instead Known values: false, true.
- `label`: `React.ReactNode`. Tooltip content
- `middlewares`: `TooltipMiddlewares`. Floating ui middlewares to configure position handling, `{ flip: true, shift: true, inline: false }` by default
- `multiline`: `false | true`. Determines whether content should be wrapped on to the next line, `false` by default Known values: false, true.
- `offset`: `number | FloatingAxesOffsets`. Space between target element and tooltip in px
- `openDelay`: `number`. Open delay in ms
- `opened`: `false | true`. Controlled opened state Known values: false, true.
- `position`: `"left" | "right" | "bottom" | "top" | "left-end" | "left-start" | "right-end" | "right-start" | "bottom-end" | "bottom-start" | "top-end" | "top-start"`. Tooltip position relative to target element (`Tooltip` component) or mouse (`Tooltip.Floating` component) Known values: "bottom", "bottom-end", "bottom-start", "left", "left-end", "left-start", "right", "right-end", "right-start", "top", "top-end", "top-start".
- `transitionProps`: `Partial<Omit<TransitionProps, "mounted">>`. Props passed down to the `Transition` component that used to animate tooltip presence, use to configure duration and animation type
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `withArrow`: `false | true`. If set, the tooltip has an arrow Known values: false, true.

- `target` is blocked: String targets can select elements outside the widget root
- Provide an accessible label for controls without visible text.

[Upstream documentation for Tooltip](https://mantine.dev/core/tooltip/)

## Tooltip.Floating

@mantine/core; navigation; safety: wrapped.

- `attributes`: `{ tooltip?: Record<string, any>; arrow?: Record<string, any>; }`.
- `color`: `DefaultMantineColor`. Key of `theme.colors` or any valid CSS color, controls tooltip background, by default set based on current color scheme Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `defaultOpened`: `false | true`. Uncontrolled tooltip initial opened state Known values: false, true.
- `label`: `React.ReactNode`. Tooltip content
- `middlewares`: `TooltipMiddlewares`. Floating ui middlewares to configure position handling, `{ flip: true, shift: true, inline: false }` by default
- `multiline`: `false | true`. Determines whether content should be wrapped on to the next line, `false` by default Known values: false, true.
- `offset`: `number`. Offset from mouse in px
- `position`: `"left" | "right" | "bottom" | "top" | "left-end" | "left-start" | "right-end" | "right-start" | "bottom-end" | "bottom-start" | "top-end" | "top-start"`. Tooltip position relative to target element (`Tooltip` component) or mouse (`Tooltip.Floating` component) Known values: "bottom", "bottom-end", "bottom-start", "left", "left-end", "left-start", "right", "right-end", "right-start", "top", "top-end", "top-start".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.

- Provide an accessible label for controls without visible text.

[Upstream documentation for Tooltip.Floating](https://mantine.dev/core/tooltip/)

## Tooltip.Group

@mantine/core; navigation; safety: wrapped.

- `closeDelay`: `number`. Close delay in ms
- `openDelay`: `number`. Open delay in ms

- Provide an accessible label for controls without visible text.

[Upstream documentation for Tooltip.Group](https://mantine.dev/core/tooltip/)

## TooltipFloating

@mantine/core; navigation; safety: wrapped.

- `attributes`: `{ tooltip?: Record<string, any>; arrow?: Record<string, any>; }`.
- `color`: `DefaultMantineColor`. Key of `theme.colors` or any valid CSS color, controls tooltip background, by default set based on current color scheme Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `defaultOpened`: `false | true`. Uncontrolled tooltip initial opened state Known values: false, true.
- `label`: `React.ReactNode`. Tooltip content
- `middlewares`: `TooltipMiddlewares`. Floating ui middlewares to configure position handling, `{ flip: true, shift: true, inline: false }` by default
- `multiline`: `false | true`. Determines whether content should be wrapped on to the next line, `false` by default Known values: false, true.
- `offset`: `number`. Offset from mouse in px
- `position`: `"left" | "right" | "bottom" | "top" | "left-end" | "left-start" | "right-end" | "right-start" | "bottom-end" | "bottom-start" | "top-end" | "top-start"`. Tooltip position relative to target element (`Tooltip` component) or mouse (`Tooltip.Floating` component) Known values: "bottom", "bottom-end", "bottom-start", "left", "left-end", "left-start", "right", "right-end", "right-start", "top", "top-end", "top-start".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.

- Provide an accessible label for controls without visible text.

[Upstream documentation for TooltipFloating](https://mantine.dev/core/tooltip-floating/)

## TooltipGroup

@mantine/core; navigation; safety: wrapped.

- `closeDelay`: `number`. Close delay in ms
- `openDelay`: `number`. Open delay in ms

- Provide an accessible label for controls without visible text.

[Upstream documentation for TooltipGroup](https://mantine.dev/core/tooltip-group/)

## Transition

@mantine/core; blocked; safety: denied.

Unavailable: Requires an authored render callback

[Upstream documentation for Transition](https://mantine.dev/core/transition/)

## Tree

@mantine/core; navigation; safety: wrapped.

- `allowRangeSelection`: `false | true`. If set, tree nodes range can be selected with click when `Shift` key is pressed Known values: false, true.
- `attributes`: `{ label?: Record<string, any>; root?: Record<string, any>; node?: Record<string, any>; subtree?: Record<string, any>; }`.
- `checkOnSpace`: `false | true`. If set, tree node is checked on space key press Known values: false, true.
- `clearSelectionOnOutsideClick`: `false | true`. If set, selection is cleared when user clicks outside of the tree Known values: false, true.
- `color`: `string`.
- `data`: `TreeNodeData[]`. Required. Data used to render nodes
- `expandOnClick`: `false | true`. If set, tree node with children is expanded on click Known values: false, true.
- `expandOnSpace`: `false | true`. If set, tree node with children is expanded on space key press Known values: false, true.
- `keepMounted`: `false | true`. If set, subtree content is kept mounted when collapsed. React 19 `Activity` is used to preserve state. Known values: false, true.
- `levelOffset`: `MantineSpacing`. Horizontal padding of each subtree level, key of `theme.spacing` or any valid CSS value Known values: "lg", "md", "sm", "xl", "xs".
- `selectOnClick`: `false | true`. If set, tree node is selected on click Known values: false, true.
- `tree`: `UseTreeReturnType`. Use-tree hook instance that can be used to manipulate component state
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `withDragHandle`: `false | true`. If set, drag-and-drop must be initiated from an element that spreads `dragHandleProps` from the `renderNode` payload, rather than anywhere on the node. Known values: false, true.
- `withLines`: `false | true`. If set, connecting lines are rendered showing parent-child relationships Known values: false, true.

- Provide an accessible label for controls without visible text.

[Upstream documentation for Tree](https://mantine.dev/core/tree/)

## TreeSelect

@mantine/core; navigation; safety: wrapped.

Bind a temporary string input with `bind`. Initialize with `defaultValue`; reset with `resetKey`.

- `allowDeselect`: `false | true`. Allows deselecting in single mode Known values: false, true.
- `attributes`: `{ input?: Record<string, any>; label?: Record<string, any>; option?: Record<string, any>; section?: Record<string, any>; ... 14 more ...; inputField?: Record<...>; }`.
- `checkStrictly`: `false | true`. Disables parent-child cascade in checkbox mode Known values: false, true.
- `checkedStrategy`: `"all" | "parent" | "child"`. Controls which checked nodes appear in value/pills in checkbox mode Known values: "all", "child", "parent".
- `chevronAriaLabels`: `TreeSelectChevronAriaLabels`. aria-label values for the expand/collapse chevron button
- `chevronColor`: `DefaultMantineColor`. Controls the default chevron color Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `clearButtonProps`: `InputClearButtonProps`. Props for the clear button
- `clearSearchOnChange`: `false | true`. Clear search on selection change Known values: false, true.
- `clearSectionMode`: `"both" | "rightSection" | "clear"`. Determines how the clear button and rightSection are rendered Known values: "both", "clear", "rightSection".
- `clearable`: `false | true`. Shows clear button Known values: false, true.
- `color`: `string`.
- `comboboxProps`: `Record<string, any>`. Props passed to the underlying Combobox
- `data`: `TreeNodeData[]`. Required. Tree data
- `defaultDropdownOpened`: `false | true`. Default dropdown state Known values: false, true.
- `defaultExpandAll`: `false | true`. Expand all nodes by default Known values: false, true.
- `defaultExpandedValues`: `string[]`. Default expanded node values
- `defaultSearchValue`: `string`. Default search value
- `defaultValue`: `TreeSelectValue<Mode>`. Default value
- `description`: `React.ReactNode`. Contents of `Input.Description` component. If not set, description is not displayed.
- `descriptionProps`: `(InputDescriptionProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Description` component
- `dropdownOpened`: `false | true`. Controlled dropdown state Known values: false, true.
- `error`: `React.ReactNode`. Contents of `Input.Error` component. If not set, error is not displayed.
- `errorProps`: `(InputErrorProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Error` component
- `expandOnClick`: `false | true`. Also toggle expand when clicking a parent node (not just the chevron). In `single` and `multiple` modes, parent clicks only expand; only leaves can be selected. In `checkbox` mode, parent clicks both check and expand. Known values: false, true.
- `expandedValues`: `string[]`. Controlled expanded state
- `hiddenInputProps`: `Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "value">`. Props for the hidden input
- `hiddenInputValuesDivider`: `string`. Divider for hidden input values
- `inputSize`: `string`. HTML `size` attribute for the input element (number of visible characters)
- `inputWrapperOrder`: `("input" | "label" | "description" | "error")[]`. Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.
- `label`: `React.ReactNode`. Contents of `Input.Label` component. If not set, label is not displayed.
- `labelProps`: `(InputLabelProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Label` component
- `leftSection`: `React.ReactNode`. Content section displayed on the left side of the input
- `leftSectionPointerEvents`: `"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "all" | "fill" | "stroke" | "painted" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke"`. Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). Known values: "-moz-initial", "all", "auto", "fill", "inherit", "initial", "none", "painted", "revert", "revert-layer", "stroke", "unset", "visible", "visibleFill", "visiblePainted", "visibleStroke".
- `leftSectionProps`: `React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>`. Props passed down to the `leftSection` element
- `leftSectionWidth`: `Property.Width<string | number>`. Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height
- `loading`: `false | true`. Displays loading indicator in the left or right section Known values: false, true.
- `loadingPosition`: `"left" | "right"`. Position of the loading indicator Known values: "left", "right".
- `maxDisplayedValues`: `number`. Maximum displayed pills before "+N more"
- `maxDropdownHeight`: `string | number`. Max dropdown height
- `maxValues`: `number`. Maximum selectable values (multiple/checkbox mode)
- `mode`: `Mode`. Selection mode: 'single', 'multiple', or 'checkbox' (with cascade)
- `nothingFoundMessage`: `React.ReactNode`. Message when no nodes match search
- `openOnFocus`: `false | true`. Opens dropdown on focus (searchable mode) Known values: false, true.
- `pointer`: `false | true`. Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component="button"` for Select/DatePicker). Known values: false, true.
- `rightSection`: `React.ReactNode`. Content section displayed on the right side of the input
- `rightSectionPointerEvents`: `"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "all" | "fill" | "stroke" | "painted" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke"`. Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). Known values: "-moz-initial", "all", "auto", "fill", "inherit", "initial", "none", "painted", "revert", "revert-layer", "stroke", "unset", "visible", "visibleFill", "visiblePainted", "visibleStroke".
- `rightSectionProps`: `React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>`. Props passed down to the `rightSection` element
- `rightSectionWidth`: `Property.Width<string | number>`. Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height
- `scrollAreaProps`: `ScrollAreaProps`. Props for the ScrollArea in the dropdown
- `searchValue`: `string`. Controlled search value
- `searchable`: `false | true`. Enables search filtering Known values: false, true.
- `size`: `MantineSize | (string & {})`. Controls input `height`, horizontal `padding`, and `font-size` Known values: "lg", "md", "sm", "xl", "xs".
- `success`: `React.ReactNode`. Contents of `Input.Success` component. If not set, success is not displayed.
- `successProps`: `(InputSuccessProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Success` component
- `type`: `HTMLInputTypeAttribute`.  Known values: "button", "checkbox", "color", "date", "datetime-local", "email", "file", "hidden", "image", "month", "number", "password", "radio", "range", "reset", "search", "submit", "tel", "text", "time", "url", "week".
- `unstyled`: `false | true`.  Known values: false, true.
- `value`: `TreeSelectValue<Mode>`. Controlled value
- `variant`: `(string & {}) | InputVariant`.  Known values: "default", "filled", "unstyled".
- `withAsterisk`: `false | true`. If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. Known values: false, true.
- `withErrorStyles`: `false | true`. Determines whether the input should have red border and red text color when the `error` prop is set Known values: false, true.
- `withLines`: `false | true`. Show tree connection lines between parent and child nodes Known values: false, true.
- `withSuccessStyles`: `false | true`. Determines whether the input should have green border when the `success` prop is set Known values: false, true.
- `wrapperProps`: `WrapperProps`. Props passed down to the root element

- Provide an accessible label for controls without visible text.

[Upstream documentation for TreeSelect](https://mantine.dev/core/tree-select/)

## TreeSelectOption

@mantine/core; navigation; safety: wrapped.

- `checked`: `false | true`. Required.  Known values: false, true.
- `chevronAriaLabels`: `TreeSelectChevronAriaLabels`.
- `expanded`: `false | true`. Required.  Known values: false, true.
- `hasChildren`: `false | true`. Required.  Known values: false, true.
- `indeterminate`: `false | true`. Required.  Known values: false, true.
- `isLastChild`: `false | true`. Required.  Known values: false, true.
- `level`: `number`. Required.
- `lineGuides`: `boolean[]`. Required.
- `node`: `TreeNodeData`. Required.
- `selected`: `false | true`. Required.  Known values: false, true.
- `showCheckbox`: `false | true`. Required.  Known values: false, true.
- `withLines`: `false | true`. Required.  Known values: false, true.

- Provide an accessible label for controls without visible text.

[Upstream documentation for TreeSelectOption](https://mantine.dev/core/tree-select-option/)

## Treemap

@mantine/charts; charts; safety: wrapped.

- `aspectRatio`: `number`. The treemap will try to keep every single rectangle's aspect ratio near the aspectRatio given
- `attributes`: `{ root?: Record<string, any>; tooltip?: Record<string, any>; tooltipItem?: Record<string, any>; tooltipItemBody?: Record<...>; ... 4 more ...; tooltipBody?: Record<...>; }`.
- `autoContrast`: `false | true`. Determines whether text color should be adjusted based on background color to improve contrast Known values: false, true.
- `color`: `string`.
- `data`: `TreemapData[]`. Required. Data used to render chart
- `dataKey`: `string`. Key in data object for the value
- `height`: `number`. Controls chart height
- `strokeColor`: `DefaultMantineColor`. Controls color of the node stroke, by default depends on color scheme Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `strokeWidth`: `number`. Controls width of node stroke
- `textColor`: `DefaultMantineColor`. Controls text color of labels Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `tooltipAnimationDuration`: `number`. Tooltip animation duration in ms
- `tooltipProps`: `Omit<TooltipProps<any, any>, "ref">`. Props passed down to `Tooltip` recharts component
- `treemapProps`: `Partial<Omit<RechartsTreemapProps<TreemapDataType, any>, "data" | "ref" | "dataKey">>`. Props passed down to recharts `Treemap` component
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `withTooltip`: `false | true`. Determines whether the tooltip should be displayed when a node is hovered Known values: false, true.

- Include a nearby text summary of the chart data.

[Upstream documentation for Treemap](https://mantine.dev/charts/treemap/)

## TypeBadge

@homarr/widgets; interaction; safety: allowed. Displays a compact semantic type badge.

- `size`: `'xs' | 'sm' | 'md' | 'lg' | 'xl'`.  Known values: "xs", "sm", "md", "lg", "xl".
- `type`: `string`. Required.

- Provide a visible label or aria-label.

[Upstream documentation for TypeBadge](https://homarr.dev/docs/management/custom-widgets/)

## Typography

@mantine/core; layout; safety: wrapped.

- `attributes`: `{ root?: Record<string, any>; }`.
- `color`: `string`.
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.

- Keep visual order consistent with reading order.

[Upstream documentation for Typography](https://mantine.dev/core/typography/)

## UnstyledButton

@mantine/core; interaction; safety: wrapped.

- `attributes`: `{ root?: Record<string, any>; }`.
- `size`: `string | number`. Size passed from parent component, sets `data-size` if value is not number like
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.

- Provide a visible label or aria-label.

[Upstream documentation for UnstyledButton](https://mantine.dev/core/unstyled-button/)

## VisuallyHidden

@mantine/core; content; safety: wrapped.

- `attributes`: `{ root?: Record<string, any>; }`.
- `color`: `string`.
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.

- Provide meaningful text alternatives for non-text content.

[Upstream documentation for VisuallyHidden](https://mantine.dev/core/visually-hidden/)

## WaffleChart

@mantine/charts; charts; safety: wrapped.

- `attributes`: `{ legend?: Record<string, any>; grid?: Record<string, any>; root?: Record<string, any>; cell?: Record<string, any>; legendItem?: Record<...>; legendLabel?: Record<...>; legendSwatch?: Record<...>; }`.
- `cellRadius`: `number`. Cell border radius,
- `color`: `string`.
- `columns`: `number`. Number of columns,
- `data`: `WaffleChartCell[]`. Required. Array of data segments with name, value, and color
- `emptyColor`: `DefaultMantineColor`. Color of empty (unfilled) cells Known values: "blue", "cyan", "dark", "grape", "gray", "green", "indigo", "lime", "orange", "pink", "red", "teal", "violet", "yellow".
- `fillDirection`: `"right-to-left" | "left-to-right" | "top-to-bottom" | "bottom-to-top"`. Fill direction, Known values: "bottom-to-top", "left-to-right", "right-to-left", "top-to-bottom".
- `gap`: `number`. Gap between cells in px,
- `legendPosition`: `"left" | "right" | "bottom" | "top"`. Legend position, Known values: "bottom", "left", "right", "top".
- `size`: `number`. Chart size (width), auto-calculated from columns if not set
- `total`: `number`. Total value for the chart, determines how many cells are filled vs empty, sum of all values by default
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `withLegend`: `false | true`. Whether to show legend, Known values: false, true.
- `withTooltip`: `false | true`. Whether to show tooltip on hover, Known values: false, true.

- Include a nearby text summary of the chart data.

[Upstream documentation for WaffleChart](https://mantine.dev/charts/waffle-chart/)

## WeekdaysRow

@mantine/dates; dates; safety: wrapped.

- `attributes`: `{ weekday?: Record<string, any>; weekdaysRow?: Record<string, any>; }`.
- `cellComponent`: `"td" | "th"`. Sets cell type that is used for weekdays Known values: "td", "th".
- `color`: `string`.
- `firstDayOfWeek`: `0 | 2 | 3 | 4 | 5 | 6 | 1`. Number 0-6, 0 – Sunday, 6 – Saturday Known values: 0, 1, 2, 3, 4, 5, 6.
- `locale`: `string`. dayjs locale
- `size`: `"xs" | "sm" | "md" | "lg" | "xl"`. Controls size Known values: "lg", "md", "sm", "xl", "xs".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `withWeekNumbers`: `false | true`. If set, heading for week numbers is displayed Known values: false, true.

- Include a textual date when the visual calendar carries meaning.

[Upstream documentation for WeekdaysRow](https://mantine.dev/dates/weekdays-row/)

## YearLevel

@mantine/dates; dates; safety: wrapped.

- `attributes`: `{ calendarHeader?: Record<string, any>; calendarHeaderControl?: Record<string, any>; calendarHeaderLevel?: Record<string, any>; ... 5 more ...; monthsListControl?: Record<...>; }`.
- `color`: `string`.
- `fullWidth`: `false | true`. Determines whether the calendar should take the full width of its container Known values: false, true.
- `hasNextLevel`: `false | true`. Determines whether next level button should be enabled Known values: false, true.
- `headerControlsOrder`: `("next" | "previous" | "level")[]`. Controls order
- `levelControlAriaLabel`: `string`. `aria-label` for change level control
- `locale`: `string`. Dayjs locale, defaults to value defined in DatesProvider
- `maxDate`: `string | Date`. Maximum possible date in `YYYY-MM-DD` format or Date object
- `minDate`: `string | Date`. Minimum possible date in `YYYY-MM-DD` format or Date object
- `nextDisabled`: `false | true`. Disables next control Known values: false, true.
- `nextIcon`: `React.ReactNode`. Change next icon
- `nextLabel`: `string`. Next button `aria-label`
- `previousDisabled`: `false | true`. Disables previous control Known values: false, true.
- `previousIcon`: `React.ReactNode`. Change previous icon
- `previousLabel`: `string`. Previous button `aria-label`
- `size`: `"xs" | "sm" | "md" | "lg" | "xl"`. Component size Known values: "lg", "md", "sm", "xl", "xs".
- `styles`: `Partial<Record<string, React.CSSProperties>>`.
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `withCellSpacing`: `false | true`. Determines whether controls should be separated Known values: false, true.
- `withNativeLevelSelect`: `false | true`. Determines whether level select controls should be rendered as native `<select>` elements Known values: false, true.
- `withNext`: `false | true`. Determines whether next control should be rendered Known values: false, true.
- `withPrevious`: `false | true`. Determines whether previous control should be rendered Known values: false, true.
- `year`: `string`. Required. Displayed year value in `YYYY-MM-DD` format
- `yearsSelectRange`: `[number, number]`. Year range for native level select, tuple of `[startYear, endYear]`. Defaults to `[currentYear - 100, currentYear + 50]` or values derived from `minDate`/`maxDate` if set.

- Include a textual date when the visual calendar carries meaning.

[Upstream documentation for YearLevel](https://mantine.dev/dates/year-level/)

## YearLevelGroup

@mantine/dates; dates; safety: wrapped.

- `attributes`: `{ calendarHeader?: Record<string, any>; calendarHeaderControl?: Record<string, any>; calendarHeaderLevel?: Record<string, any>; ... 6 more ...; monthsListControl?: Record<...>; }`.
- `color`: `string`.
- `fullWidth`: `false | true`. Determines whether the calendar should take the full width of its container Known values: false, true.
- `hasNextLevel`: `false | true`. Determines whether next level button should be enabled Known values: false, true.
- `headerControlsOrder`: `("next" | "previous" | "level")[]`. Controls order
- `locale`: `string`. Dayjs locale, defaults to value defined in DatesProvider
- `maxDate`: `string | Date`. Maximum possible date in `YYYY-MM-DD` format or Date object
- `minDate`: `string | Date`. Minimum possible date in `YYYY-MM-DD` format or Date object
- `nextDisabled`: `false | true`. Disables next control Known values: false, true.
- `nextIcon`: `React.ReactNode`. Change next icon
- `nextLabel`: `string`. Next button `aria-label`
- `numberOfColumns`: `number`. Number of columns displayed next to each other
- `previousDisabled`: `false | true`. Disables previous control Known values: false, true.
- `previousIcon`: `React.ReactNode`. Change previous icon
- `previousLabel`: `string`. Previous button `aria-label`
- `size`: `"xs" | "sm" | "md" | "lg" | "xl"`. Component size Known values: "lg", "md", "sm", "xl", "xs".
- `styles`: `Partial<Record<string, React.CSSProperties>>`.
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `withCellSpacing`: `false | true`. Determines whether controls should be separated Known values: false, true.
- `withNativeLevelSelect`: `false | true`. Determines whether level select controls should be rendered as native `<select>` elements Known values: false, true.
- `year`: `string`. Required. Displayed year
- `yearsSelectRange`: `[number, number]`. Year range for native level select, tuple of `[startYear, endYear]`. Defaults to `[currentYear - 100, currentYear + 50]` or values derived from `minDate`/`maxDate` if set.

- Include a textual date when the visual calendar carries meaning.

[Upstream documentation for YearLevelGroup](https://mantine.dev/dates/year-level-group/)

## YearPicker

@mantine/dates; dates; safety: wrapped.

Bind a temporary string input with `bind`. Initialize with `defaultValue`; reset with `resetKey`.

- `allowDeselect`: `(Type extends "default" ? boolean : never)`. Determines whether user can deselect the date by clicking on selected item, applicable only when type="default"
- `allowSingleDateInRange`: `(Type extends "range" ? boolean : never)`. Determines whether a single day can be selected as range, applicable only when type="range"
- `ariaLabels`: `CalendarAriaLabels`. `aria-label` attributes for controls on different levels
- `attributes`: `{ calendarHeader?: Record<string, any>; calendarHeaderControl?: Record<string, any>; calendarHeaderLevel?: Record<string, any>; ... 9 more ...; yearPickerRoot?: Record<...>; }`.
- `color`: `string`.
- `columnsToScroll`: `number`. Number of columns to scroll with next/prev buttons, same as `numberOfColumns` if not set explicitly
- `date`: `string | Date`. Displayed date in controlled mode
- `defaultDate`: `string | Date`. Initial displayed date in uncontrolled mode
- `defaultValue`: `DatePickerValue<Type, DateValue>`. Default value for uncontrolled component
- `fullWidth`: `false | true`. Determines whether the list should take the full width of its container Known values: false, true.
- `locale`: `string`. Dayjs locale, defaults to value defined in DatesProvider
- `maxDate`: `string | Date`. Maximum possible date in `YYYY-MM-DD` format or Date object
- `minDate`: `string | Date`. Minimum possible date in `YYYY-MM-DD` format or Date object
- `nextLabel`: `string`. Next button `aria-label`
- `numberOfColumns`: `number`. Number of columns displayed next to each other
- `presets`: `YearPickerPreset<Type>[]`. Predefined values to pick from
- `previousLabel`: `string`. Previous button `aria-label`
- `size`: `"xs" | "sm" | "md" | "lg" | "xl"`. Component size Known values: "lg", "md", "sm", "xl", "xs".
- `type`: `DatePickerType | Type`. Picker type: range, multiple or default Known values: "default", "multiple", "range".
- `unstyled`: `false | true`.  Known values: false, true.
- `value`: `DatePickerValue<Type, DateValue>`. Value for controlled component
- `variant`: `string`.
- `withCellSpacing`: `false | true`. Determines whether controls should be separated Known values: false, true.
- `withNativeLevelSelect`: `false | true`. Determines whether level select controls should be rendered as native `<select>` elements Known values: false, true.

- Include a textual date when the visual calendar carries meaning.

[Upstream documentation for YearPicker](https://mantine.dev/dates/year-picker/)

## YearPickerInput

@mantine/dates; dates; safety: wrapped.

Bind a temporary string input with `bind`. Initialize with `defaultValue`; reset with `resetKey`.

- `allowDeselect`: `(Type extends "default" ? boolean : never)`. Determines whether user can deselect the date by clicking on selected item, applicable only when type="default"
- `allowSingleDateInRange`: `(Type extends "range" ? boolean : never)`. Determines whether a single day can be selected as range, applicable only when type="range"
- `ariaLabels`: `CalendarAriaLabels`. `aria-label` attributes for controls on different levels
- `attributes`: `{ input?: Record<string, any>; label?: Record<string, any>; section?: Record<string, any>; root?: Record<string, any>; ... 19 more ...; yearPickerRoot?: Record<...>; }`.
- `clearButtonProps`: `React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>`. Props passed down to the clear button
- `clearSectionMode`: `"both" | "rightSection" | "clear"`. Determines how the clear button and rightSection are rendered Known values: "both", "clear", "rightSection".
- `clearable`: `false | true`. If set, clear button is displayed in the `rightSection` when the component has value. Ignored if `rightSection` prop is set. Known values: false, true.
- `closeOnChange`: `false | true`. Determines whether the dropdown is closed when date is selected, not applicable with `type="multiple"` Known values: false, true.
- `color`: `string`.
- `columnsToScroll`: `number`. Number of columns to scroll with next/prev buttons, same as `numberOfColumns` if not set explicitly
- `date`: `string | Date`. Displayed date in controlled mode
- `defaultDate`: `string | Date`. Initial displayed date in uncontrolled mode
- `defaultValue`: `DatePickerValue<Type, DateValue>`. Default value for uncontrolled component
- `description`: `React.ReactNode`. Contents of `Input.Description` component. If not set, description is not displayed.
- `descriptionProps`: `(InputDescriptionProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Description` component
- `error`: `React.ReactNode`. Contents of `Input.Error` component. If not set, error is not displayed.
- `errorProps`: `(InputErrorProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Error` component
- `fullWidth`: `false | true`. Determines whether the list should take the full width of its container Known values: false, true.
- `inputSize`: `string`. HTML `size` attribute for the input element (number of visible characters)
- `inputWrapperOrder`: `("input" | "label" | "description" | "error")[]`. Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.
- `label`: `React.ReactNode`. Contents of `Input.Label` component. If not set, label is not displayed.
- `labelProps`: `(InputLabelProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Label` component
- `labelSeparator`: `string`. Separator between range value
- `leftSection`: `React.ReactNode`. Content section displayed on the left side of the input
- `leftSectionPointerEvents`: `"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "all" | "fill" | "stroke" | "painted" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke"`. Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). Known values: "-moz-initial", "all", "auto", "fill", "inherit", "initial", "none", "painted", "revert", "revert-layer", "stroke", "unset", "visible", "visibleFill", "visiblePainted", "visibleStroke".
- `leftSectionProps`: `React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>`. Props passed down to the `leftSection` element
- `leftSectionWidth`: `Property.Width<string | number>`. Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height
- `loading`: `false | true`. Displays loading indicator in the left or right section Known values: false, true.
- `loadingPosition`: `"left" | "right"`. Position of the loading indicator Known values: "left", "right".
- `locale`: `string`. Dayjs locale, defaults to value defined in DatesProvider
- `maxDate`: `string | Date`. Maximum possible date in `YYYY-MM-DD` format or Date object
- `minDate`: `string | Date`. Minimum possible date in `YYYY-MM-DD` format or Date object
- `nextLabel`: `string`. Next button `aria-label`
- `numberOfColumns`: `number`. Number of columns displayed next to each other
- `pointer`: `false | true`. Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component="button"` for Select/DatePicker). Known values: false, true.
- `popoverProps`: `Partial<Omit<PopoverProps, "children">>`. Props passed down to `Popover` component
- `presets`: `YearPickerPreset<Type>[]`. Predefined values to pick from
- `previousLabel`: `string`. Previous button `aria-label`
- `rightSection`: `React.ReactNode`. Content section displayed on the right side of the input
- `rightSectionPointerEvents`: `"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "auto" | "all" | "fill" | "stroke" | "painted" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke"`. Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). Known values: "-moz-initial", "all", "auto", "fill", "inherit", "initial", "none", "painted", "revert", "revert-layer", "stroke", "unset", "visible", "visibleFill", "visiblePainted", "visibleStroke".
- `rightSectionProps`: `React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>`. Props passed down to the `rightSection` element
- `rightSectionWidth`: `Property.Width<string | number>`. Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height
- `size`: `"xs" | "sm" | "md" | "lg" | "xl"`. Component size Known values: "lg", "md", "sm", "xl", "xs".
- `sortDates`: `false | true`. Determines whether dates values should be sorted before `onChange` call, only applicable with type="multiple" Known values: false, true.
- `success`: `React.ReactNode`. Contents of `Input.Success` component. If not set, success is not displayed.
- `successProps`: `(InputSuccessProps & DataAttributes & PlaceholderPolymorphicProps)`. Props passed down to the `Input.Success` component
- `type`: `DatePickerType | Type`. Picker type: range, multiple or default Known values: "default", "multiple", "range".
- `unstyled`: `false | true`.  Known values: false, true.
- `value`: `DatePickerValue<Type, DateValue>`. Value for controlled component
- `valueFormat`: `string`. `dayjs` format to display input value
- `variant`: `(string & {}) | InputVariant`.  Known values: "default", "filled", "unstyled".
- `withAsterisk`: `false | true`. If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. Known values: false, true.
- `withCellSpacing`: `false | true`. Determines whether controls should be separated Known values: false, true.
- `withErrorStyles`: `false | true`. Determines whether the input should have red border and red text color when the `error` prop is set Known values: false, true.
- `withNativeLevelSelect`: `false | true`. Determines whether level select controls should be rendered as native `<select>` elements Known values: false, true.
- `withSuccessStyles`: `false | true`. Determines whether the input should have green border when the `success` prop is set Known values: false, true.
- `wrapperProps`: `WrapperProps`. Props passed down to the root element

- `dropdownType` is blocked: Modal picker mode escapes the widget overlay boundary
- `modalProps` is blocked: Modal picker configuration escapes the widget overlay boundary
- Include a textual date when the visual calendar carries meaning.

[Upstream documentation for YearPickerInput](https://mantine.dev/dates/year-picker-input/)

## YearsList

@mantine/dates; dates; safety: wrapped.

- `align`: `"center" | "left" | "right"`.  Known values: "center", "left", "right".
- `attributes`: `{ yearsListControl?: Record<string, any>; yearsList?: Record<string, any>; yearsListCell?: Record<string, any>; yearsListRow?: Record<...>; }`.
- `color`: `string`.
- `decade`: `string`. Required. Decade value to display
- `fullWidth`: `false | true`. Determines whether the list should take the full width of its container Known values: false, true.
- `locale`: `string`. Dayjs locale, defaults to value defined in DatesProvider
- `maxDate`: `string | Date`. Maximum possible date in `YYYY-MM-DD` format or Date object
- `minDate`: `string | Date`. Minimum possible date in `YYYY-MM-DD` format or Date object
- `size`: `"xs" | "sm" | "md" | "lg" | "xl"`. Component size Known values: "lg", "md", "sm", "xl", "xs".
- `unstyled`: `false | true`.  Known values: false, true.
- `variant`: `string`.
- `withCellSpacing`: `false | true`. Determines whether controls should be separated Known values: false, true.

- Include a textual date when the visual calendar carries meaning.

[Upstream documentation for YearsList](https://mantine.dev/dates/years-list/)

# Use the safe JSX runtime (/docs/management/custom-widgets/custom-jsx)

Templates are JSX expressions interpreted inside a widget-local safety and render budget. They can read:

* `data.requestId` — the latest response
* `status.requestId` — `{ loading, ok, status, statusText, error }`
* `options.name` — saved widget configuration
* `inputs.name` — temporary values from declarative `bind`

The v2 manifest requires a `default` source and supports up to eight sources, 64 requests, and 64 options. Source IDs are
case-insensitively unique. Each request allows up to 32 static headers and 32 invalidation targets; a widget can contain
up to 24 secrets, each up to 8,192 characters, and templates are limited to 50,000 characters. Validation reports the
exact field when a limit is exceeded.

Authoring input accepts either `template` or `templateLines`, not both. `templateLines` accepts 1–2,000 lines, each up to
10,000 characters; after joining lines with newlines, the complete template must still fit the 50,000-character limit.

The safe interpreter also bounds JSX evaluation: AST depth 64, 25,000 operations, 4,000 collection items, 10,000 rendered
nodes, and 200,000 characters in one string or rendered value. API responses are bounded separately before they reach the
template.

Use normal Mantine layouts, typography, feedback, dates, and charts. Official compound names such as `Card.Section`, `Tabs.List`, and `Radio.Group` are supported. Ordinary safe props pass through; a dangerous capability produces an explicit error.
Unsafe URLs, callback props, and unapproved style properties are stripped. Response data is deep-sanitized and budgeted
before it reaches `data`, so treat it as untrusted input even when the source is private.

## Temporary inputs [#temporary-inputs]

```jsx
<Stack>
  <TextInput bind="search" defaultValue="" label="Search" />
  <Pagination bind="page" resetKey={inputs.search} defaultValue={1} total={5} />
  <SubFetch requestId="search" trigger="manual" params={{ query: inputs.search, page: inputs.page ?? 1 }}>
    {(results, meta) => (
      <Stack>
        {(results ?? []).map((item) => (
          <Text key={item.id}>{item.name}</Text>
        ))}
      </Stack>
    )}
  </SubFetch>
</Stack>
```

Bound values live only in React memory while the widget is mounted. They are not saved to the database, board options, exports, browser storage, or `localStorage`. Remounting resets them. Components can share a binding when their adapter types agree.

Bindable controls accept a scalar `resetKey`. When it changes, Homarr restores that control to its declared `defaultValue` or `defaultChecked` without running a request. This keeps dependent pagination correct while a manual `SubFetch` waits for the user to submit the new query.

## Expression language [#expression-language]

Use expressions, conditionals, optional chaining, arrays, objects, template strings, safe standard helpers, and expression callbacks for `map`, `filter`, `sort`, and trusted runtime slots. Callback blocks, authored `const`, IIFEs, authored recursion, arbitrary functions, imports, hooks, refs, raw events, browser requests, `eval`, and bigint are blocked.

For user-facing timestamps, use the safe static helpers instead of `new Date` or an invented component. `Date.toLocaleString(value, "en-US", "UTC")` produces a concise absolute date and time for an explicitly labeled UTC value. `Date.toISOString`, `Date.toLocaleDateString`, and `Date.toLocaleTimeString` are also available.

Bounded regex literals are supported for string matching, splitting, search, and replacement. Regex literals are limited to
128 characters and flags `gimsu`; lookarounds, backreferences, repeated alternatives/groups, unsupported flags, and more
than one variable quantifier are rejected.

## Runtime components [#runtime-components]

* `SubFetch` runs a named query. Automatic queries run when the widget loads; set `trigger="manual"` to defer one and pass
  primitive `params` for its invocation references. With `triggerContent`, any content node (commonly a card or image) becomes
  the accessible click and keyboard trigger instead of showing the default load button.
* `SubFetch` with `trigger="manual"` keeps its result local to that instance; it does not populate the shared
  `data.requestId` or `status.requestId` roots. The child callback receives `(result, meta)`, while loading, errors, and
  retry are handled by `SubFetch`. Provide both `triggerContent` and `triggerAriaLabel` when custom content launches it.
* `SubFetch`, `ActionButton`, and `ToggleSwitch` require a quoted literal `requestId`. Independent JSX validation rejects
  missing or computed IDs before a complete manifest or preview must be sent.
* `ActionButton` and `ToggleSwitch` run actions only when the widget is mounted outside edit mode. A toggle needs both
  enabled and disabled request parameters and rolls back its visual state if the action fails.
* `RefreshButton` renders a compact, accessible icon control that invalidates the client's load-query cache so active load
  queries can refetch. Set `requestId` inside a successful manual `SubFetch` result to rerun only that named query with the
  same parameters. A targeted rerun respects an explicit request `cacheSeconds`; an untargeted button also clears the
  widget's server cache. It is disabled when there is no active item/preview or while the board is in edit mode.
* `Icon`/`TablerIcon` resolves installed safe icons.

Always include responsive loading, empty, error, and success states. Runtime failures remain inside the widget tile.

# Custom Widgets (/docs/management/custom-widgets)

A **Custom Widget** is a validated `homarr-custom-widget-v2` definition containing API sources, queries and actions,
optional settings, and a safe JSX template.

Homarr executes requests on the server and renders the template in a restricted runtime. Source credentials are
encrypted separately and are not included in exports, prompts, browser data, or Workshop submissions.

<CustomWidgetFlowDiagram />

<img alt="The Custom Widgets management page" src="__img0" />

## Manage Custom Widgets [#manage-custom-widgets]

Administrators can create, import, duplicate, enable, export, publish, and delete definitions under
**Management → Custom Widgets**. Adding or configuring one on a board also requires permission to modify that board.
Use **Actions → Configure sources** to update deployment-specific URLs, network access, and encrypted credentials
without reopening the authoring workbench.

Once placed, normal board permissions control rendering and requests. Queries can run for anonymous viewers on public
boards; actions require authentication and the permission declared by the request.

## Authoring [#authoring]

* [Create a Custom Widget](/docs/management/custom-widgets/authoring) in the workbench or from a copied AI prompt.
* [Use the safe JSX runtime](/docs/management/custom-widgets/custom-jsx) for data bindings, temporary inputs, and components.
* [Browse the component reference](/docs/management/custom-widgets/component-reference).
* [Configure requests and security](/docs/management/custom-widgets/requests-and-security).
* [Connect an agent](/docs/management/custom-widgets/agent-authoring) through MCP and the Homarr skill.
* [Troubleshoot a definition](/docs/management/custom-widgets/troubleshooting).

The workbench validates the same schema used by imports, Workshop, HTTP authoring resources, and MCP. Test every query
and simulate relevant actions before saving. Live preview actions are opt-in because they can change the source service.

## Import and Workshop [#import-and-workshop]

Use **Import from Workshop** while adding board content or import a v2 JSON definition directly. Review the source,
requested permissions, API hosts, and actions before installation, then configure deployment-specific URLs and
credentials in Homarr.

Legacy definitions show **Migration required**. The migration prompt excludes credentials and the old display template;
describe the visible behavior separately, import the returned v2 definition, and verify it before removing the archived
version.

Keep `SECRET_ENCRYPTION_KEY` unchanged when updating Homarr so existing credentials remain readable. Multi-replica
installations must use the same Redis service so cached responses invalidate consistently.

# Configure requests and security (/docs/management/custom-widgets/requests-and-security)

Most widgets use a single source named `default`; the manifest must contain it. Extra keyed sources are available for widgets
that combine APIs. Source IDs are case-insensitively unique. Base URLs must use HTTP(S), contain no embedded credentials,
query string, or fragment, and sources can be `public`, `private`, or `loopback`. Authentication is `none`, `bearer`,
`basic`, an API-key header, or an API-key query parameter. HTTP source credentials belong to the widget but remain outside its manifest.
Source origins are fixed by the definition and source-setup flow; widget options and invocation parameters cannot redirect a
request to a different origin.

## Existing integrations [#existing-integrations]

Available types come from Homarr's integration registry. An integration must declare HTTP request support and expose
its authentication through its native adapter; new compatible integrations appear automatically without Custom Widget changes.
Integrations that require login sessions are not currently supported.

```json
{
  "sources": { "default": { "type": "integration", "integrationKind": "sonarr" } },
  "requests": { "queue": { "path": "/api/v3/queue" } }
}
```

Select the local instance during source setup. Homarr uses its current URL, API key, and trusted certificates;
paths append to the saved URL, including reverse-proxy subpaths. Changing the integration updates all sources bound to it.
Deleting it leaves the widget unconfigured until another instance is selected. The binding is shared by every placement
of that widget definition. Exports and Workshop submissions retain the required type and omit the local integration ID.

Arbitrary integration requests require integration `full` access, including GET requests: service APIs can expose credentials or change state through reads. Board permissions still apply separately. Requests inherit saved authentication unless `auth: "none"` explicitly disables it. Credentials used for authentication are redacted from upstream responses. Non-GET integration requests must be actions. Requests stay within the configured URL path; authenticated requests do not follow redirects.

## Named requests [#named-requests]

Requests are keyed by ID. `source`, `kind`, `method`, `trigger`, `auth`, and `permission` have sensible defaults, so a load query can be as small as:

```json
{ "status": { "path": "/api/status" } }
```

The request `path` is appended to the source `baseUrl`, including a base path such as `/api/v2`.

For HTTP sources, GET, POST, PUT, and PATCH work for queries and actions. Integration queries use GET. DELETE is restricted to actions so it can never run while a
board loads. Kind controls the remaining behavior: load queries run automatically, manual queries run through
`SubFetch`, and actions run only from `ActionButton` or `ToggleSwitch`.

Bind values directly where they are used:

```json
{
  "containers": {
    "path": "/api/endpoints/{option:endpointId}/docker/containers/json",
    "query": { "all": { "$option": "showAll" } }
  },
  "restart": {
    "kind": "action",
    "method": "POST",
    "path": "/api/endpoints/{option:endpointId}/docker/containers/{param:id}/restart",
    "invalidates": ["containers"]
  }
}
```

`{option:name}` and `$option` read saved widget options. `{param:name}` and `$param` read invocation-time `params`. Load queries cannot use invocation parameters. Homarr infers the exact parameter names and primitive values from these references, rejecting missing or extra invocation params at the request boundary.

Path placeholders and query values must resolve to text, numbers, or booleans. `$option` and `$param` references may appear
recursively in JSON bodies; invocation parameters remain primitive, and load queries cannot use `$param`. JSON bodies can
also use structured `json` and `multiSelect` option values, for example `{ "entity_ids": { "$option": "entities" } }`.

## Protection [#protection]

Every request uses Homarr's existing server executor: same-origin source enforcement, network scope, DNS and redirect validation, SSRF protection, board permissions, rate and request limits, body and response limits, timeouts, and encrypted credential injection. Static headers cannot override credentials, cookies, routing, proxy, forwarding, or hop-by-hop headers.

The executor caps request bodies at 10 KiB and response bodies at 1 MiB. Parsed JSON is limited to depth 32 and 50,000 nodes;
each network hop has a ten-second timeout, unauthenticated queries follow at most three same-origin redirects, actions and authenticated queries do not follow redirects,
and the total request deadline is 45 seconds.

The limiter allows four concurrent requests per user/item and eight per definition. Per minute, a user/item can make up to 60
queries, 10 actions, or 3 DELETE actions; a definition can receive up to 240, 40, or 12 of those request categories.
Integration metadata refreshes have a separate allowance of 60 per user/item and 240 per definition per minute, and share
the same concurrency limits.

Queries default to view permission and actions to modify. DELETE always requires full permission and confirmation. Actions are never cached, retried, or run on load.

Management and runtime are intentionally separate. A Homarr administrator with board-modify permission places and
configures the widget. After placement, query and action authorization follows the request's board permission. Public
boards may execute HTTP-source queries for anonymous viewers; integration sources require an authenticated viewer with full integration access. Mutations stay authenticated. This includes shared-cache
invalidation: `RefreshButton` is disabled only without an active item or preview session, or in edit mode, while ordinary
scheduled query rendering remains available to anonymous viewers.

Responses use bounded, versioned shared-Redis cache keys. Action invalidation advances the shared version so every
Homarr replica stops serving the previous response without scanning or deleting a key prefix.

# Custom Widget troubleshooting (/docs/management/custom-widgets/troubleshooting)

## Definition problems [#definition-problems]

| Symptom                  | Resolution                                                                                                 |
| ------------------------ | ---------------------------------------------------------------------------------------------------------- |
| Definition unavailable   | Restore or recreate the definition, or remove the unavailable board item.                                  |
| **Migration required**   | Copy the migration prompt, describe the visible behavior without secrets, and import the returned v2 JSON. |
| Invalid saved definition | Read the displayed schema errors, then recreate or import a valid definition.                              |
| Invalid item options     | Open the board item's settings and correct values that no longer match the definition.                     |

Migrating a v1 definition keeps the archived v1 record and encrypted secret for rollback. The migrated v2 definition
uses the same ID and takes precedence.

## Validation errors [#validation-errors]

Start with the first diagnostic and its field path. Common causes are:

* invalid or duplicate source, request, or option IDs;
* a request referencing a missing source;
* an option default that does not match its control;
* `{param:name}` in a load query;
* missing invocation parameters;
* an invalid source or icon URL;
* a runtime component using the wrong request kind.

The Diagnostics tab also shows JSX errors, accessibility checks, and the redacted request journal.

## Request errors [#request-errors]

Check the source URL, network scope, authentication, request method, path, body bindings, and board permission. The
journal records the request ID, method, path template, status, and duration without credentials.

For `invalid placeholder`, use `{option:name}` or `{param:name}`. Load queries can reference options only.

In multi-replica deployments, connect every Homarr replica to the same Redis database. Otherwise an action can leave a
stale cached query on another replica.

## Runtime warnings [#runtime-warnings]

`UNKNOWN_MANTINE_PROP` means the installed Mantine component does not document that property. Check the
[component reference](/docs/management/custom-widgets/component-reference). `BLOCKED_CAPABILITY` means the runtime rejected an unsafe component,
property, URL, or style capability.

## Workshop unavailable [#workshop-unavailable]

Check `WORKSHOP_API_URL` and PocketBase health. Installed widgets continue to run without Workshop.

## Rollback [#rollback]

Preserve a database backup and the exact `SECRET_ENCRYPTION_KEY`. Roll back the Homarr application without manually
removing the v1 tables. Workshop's PocketBase data has a separate backup lifecycle.

## Report a bug [#report-a-bug]

Use the [Custom Widget bug form](https://github.com/homarr-labs/homarr/issues/new?template=custom_widget_bug.yml)
with a minimal exported definition and sanitized request diagnostics. Remove credentials, private URLs, and personal data
from exports, responses, logs, and screenshots before sharing.

# Media (/docs/management/media)

Using the media feature, you can upload images for custom icons to Homarr.
Images will be stored in the database. They can be selected in the [icon picker](/docs/advanced/icons).

<img alt="Media page with search, user visibility filter, upload action, and an uploaded file" src="__img0" />

<img alt="The Media management page" src="__img1" />

# Settings (/docs/management/settings)

Settings apply to the entire Homarr instance. The save bar appears after a change; use **Save changes** to apply it or
**Discard** to revert it. Some changes require a full page reload.

## Boards [#boards]

**Global home board** is the fallback for users without a personal home board and for anonymous users. **Global mobile
board** overrides it on mobile devices. Both must be public.

**Enable status by default** sets the initial status-check state for new app items. **Force disable status** turns app
status off instance-wide.

<img alt="Instance-wide board defaults" src="__img0" />

## Users [#users]

**Enable Gravatar** uses Libravatar or Gravatar when a user has an email address but no custom avatar.

<img alt="Instance-wide user settings" src="__img1" />

## Search [#search]

**Global default search engine** is the instance fallback. Integration-backed search engines are configured per user,
not here.

<img alt="Global default search engine" src="__img2" />

## Appearance [#appearance]

**Default color scheme** is the fallback for users without a personal color-scheme preference.

<img alt="Default instance color scheme" src="__img3" />

## Instance branding [#instance-branding]

Branding is stored server-side and applies across the instance after saving.

### Identity and appearance [#identity-and-appearance]

Set the application name, logo, browser icon, primary and secondary colors, and corner style. **Keep this color on every
board** prevents board colors from replacing the application accent. The browser icon falls back to the application
logo when empty.

Images accept HTTP(S) URLs or app-relative paths.

<img alt="Instance branding identity and appearance settings" src="__img4" />

### Global custom CSS [#global-custom-css]

**Global custom CSS** applies to every page. Write CSS directly or import a theme from the Workshop. Board custom CSS
loads later and can override it.

<img alt="Global custom CSS editor" src="__img5" />

See [Styling](/docs/advanced/styling) for selectors, theme variables, and board-level CSS.

### Authentication pages [#authentication-pages]

Set a greeting, background image, background overlay, and whether the application name, logo, and greeting appear on
authentication pages.

<img alt="Authentication branding and current branding summary" src="__img6" />

## Culture [#culture]

**Default language** is the fallback for users without a personal language preference.

<img alt="Default instance language" src="__img7" />

## Crawling and indexing [#crawling-and-indexing]

These options set crawler directives:

* **No index** asks crawlers not to index the instance.
* **No follow** asks crawlers not to follow links.
* **No translate** asks supported services not to offer translated search results.
* **No site links search box** asks Google not to add a search box to the result.

Crawlers can ignore these requests.

<img alt="Crawler directives" src="__img8" />

## Analytics [#analytics]

When **Help us improve Homarr** is enabled, Homarr sends analytics to its PostHog server at `https://hog.homarr.dev`.
The weekly server report also runs when Homarr starts.

The report contains the Homarr version, database and platform details, enabled authentication providers, default
language, and counts or types of configured resources such as boards, apps, widgets, integrations, users, and groups.
Selected setup flows also send coarse events such as the entry point, intent, outcome, and elapsed time.

Homarr does not send names, URLs, usernames, email addresses, credentials, integration secrets, API keys, logs, or error
messages. Browser page views, page leaves, and automatic interaction capture are disabled.

Disable the setting and reload the page to stop analytics. `NO_EXTERNAL_CONNECTION=true` blocks analytics together with
all other external requests. See [Environment variables](/docs/advanced/environment-variables).

<img alt="Analytics setting" src="__img9" />

# Search Engines (/docs/management/search-engines)

Using the search engines, terms can be quickly searched simply by opening the search bar at the top or using the keyboard shortcut `MOD + K`.
The management page provides a searchable list with the shortcut, URL template, source, and available row actions for each engine.

The default **Search** mode lists every configured search engine as a fallback action for the current query. To discover
engines by shortcut, switch to **Web** with `!`. DuckDuckGo bang discovery is intentionally limited to Web mode so an
ordinary search term never expands into similarly named bang providers.

<img alt="The Search engines management page" src="__img0" />

You can add any search engine that has a search URL that accepts a search term as a parameter.

## Create search engine [#create-search-engine]

To create a custom search engine, you can click the button at the top of the page.

<img alt="New search engine form with name, shortcut, icon, and URL template fields" src="__img1" />

### Name [#name]

The name can be chosen freely. It will be displayed in the search box popover.

### Short [#short]

Prefix that is used to choose the search engine in the popover using the keyboard.
It is recommended that this value is kept short (for example `g` for Google and `e` for Ecosia).
Type `!` in Spotlight to browse these shortcuts and, when DuckDuckGo bangs are enabled in preferences, discover
additional bang providers.

### Configuration [#configuration]

In the configuration section you can select between two options.

#### Search template [#search-template]

The template must be a valid URL that includes the `%s` placeholder.
Homarr will replace the `%s` with the term that the user entered.

##### Examples [#examples]

* Google: `https://www.google.com/search?q=%s`
* Ecosia: `https://www.ecosia.org/search?q=%s`
* DuckDuckGo: `https://duckduckgo.com/?q=%s`
* Bing: `https://www.bing.com/search?q=%s`
* YouTube: `https://www.youtube.com/results?search_query=%s`

## Media request search [#media-request-search]

Jellyseerr, Overseerr, and Seerr integrations have a dedicated **Spotlight mode** for searching and requesting media.
This mode does not require creating a search engine entry - it is available automatically when you have a compatible integration configured.

You can access it from:

* The **Modes list** in Spotlight (opened with `CTRL + K`)
* The **search button** on the media request list and stats widgets

### Availability indicators [#availability-indicators]

Search results display colored status badges showing the media's current state in your integration:

* **Available** - fully available in your media library
* **Partial** - some content (e.g. seasons) is available
* **Processing** - currently being downloaded or processed
* **Requested** - requested but not yet available

### Requesting TV show seasons [#requesting-tv-show-seasons]

For partially available TV shows, you can request additional seasons.
The request modal shows which seasons are already requested (marked with a status badge and not selectable), so you can select only the missing seasons.

# Tasks (/docs/management/tasks)

The tasks page controls scheduled background jobs used by integrations and widgets. It is available to administrators
under **Management → Tools → Tasks**.

Each task exposes:

* its current status and schedule;
* a cron-based schedule interval;
* a manual run action;
* an enable or disable action.

<img alt="The scheduled Tasks management page" src="__img0" />

Disabling a task stops scheduled runs but does not prevent a manual run.

# Fix usernames (/docs/advanced/command-line/fix-usernames)

<CalloutContainer type="info">
<CalloutDescription>
This guide requires that you understand [how to access the CLI](../).
</CalloutDescription>
</CalloutContainer>

If you somehow get into a situation where you have users with usernames that contain uppercase characters and you are no longer able to log in, you can use the following command to fix the usernames.

```bash
homarr fix-usernames
```

This will convert all credential usernames to lowercase and update the database accordingly.

<img alt="Terminal output confirming credential usernames were converted to lowercase" src="__img0" />

# Developer Docker CLI (/docs/advanced/command-line/development)

The host-side developer CLI builds and runs local Homarr images and pull-request previews with non-blocking background operations. Run it directly from a checkout with `pnpm dev:cli -- ...`; no shell-specific setup script is required. It is separate from the recovery CLI included in production images.

To install an optional `homarr` binary, run `pnpm dev:cli:install` and make your Go bin directory available on `PATH`. GitHub CLI authentication (`gh auth login`) is only needed for pull-request features.

## Requirements [#requirements]

* Docker or OrbStack
* Go 1.25+ (when building the CLI from source)
* GitHub CLI authenticated with `gh auth login` (for pull-request and CI features)
* A [Nerd Font](https://www.nerdfonts.com/) enabled in your terminal (recommended for icons, status indicators, and TUI glyphs)

## Interactive Development Browser [#interactive-development-browser]

```bash
pnpm dev:cli --
# or with global binary:
homarr
```

The main browser combines local `homarr:*` images with open pull requests and their GHCR preview status. Select an image to start or stop it, use `R` to build a remote pull request locally in the background or rebuild a local image, or use `p` to force a remote preview pull. Press `d` (or `1`/`2`) to toggle between the image browser and the instance dashboard.

A locally built PR image is folded into its remote PR row only when its recorded revision matches the current GitHub head SHA (marked `◆ local`). When the matching GHCR image is also available, pressing `Enter` opens a local/remote selector with local preselected. Outdated local builds remain separate rows.

### Multi-Source Sidebar [#multi-source-sidebar]

Press `Tab` to cycle between sidebar tabs:

* **`[logs]`**: Live container output streams (press `f` to follow/pause, `L` to pin to the selected container, `Page Up`/`Page Down` to scroll).
* **`[build]`**: Real-time BuildKit step streaming for active local builds.
* **`[ci]`**: GitHub Actions CI check statuses, run duration, and workflow links for pull requests.

### Background Task Overlay [#background-task-overlay]

Pulls and builds run asynchronously in the background. Press `t` to open the tasks overlay, showing:

* Layer-by-layer download progress and transfer speeds (via Docker Engine API).
* Active build stages and logs.
* Task cancellation and status.

### Browser Shortcuts [#browser-shortcuts]

| Key                    | Action                                                                                        |
| ---------------------- | --------------------------------------------------------------------------------------------- |
| `/`                    | Filter rows by PR number, title, author, branch, CI, image, state, or port                    |
| `↑` / `↓` or `j` / `k` | Navigate rows                                                                                 |
| `Enter` or `Space`     | Start the available image; choose local or remote when both exist; stop if running            |
| `R`                    | Build locally in background (or rebuild local image)                                          |
| `p`                    | Pull remote PR image in background and start container                                        |
| `m`                    | Manage mode (`b` rebuild, `i` delete image, `d` delete data, `c` remove container, `p` prune) |
| `t`                    | Toggle background tasks overlay                                                               |
| `Tab`                  | Cycle sidebar tabs (`[logs]`, `[build]`, `[ci]`)                                              |
| `l` / `L`              | Toggle sidebar visibility / Pin logs to selected instance                                     |
| `f`                    | Follow or pause logs                                                                          |
| `M`                    | Toggle demo mode for next launch                                                              |
| `b`                    | Toggle bot pull requests                                                                      |
| `o` / `a`              | Open PR on GitHub / Open running instance in browser                                          |
| `c`                    | Copy instance URL to clipboard                                                                |
| `r`                    | Refresh data                                                                                  |
| `1` / `2` / `d`        | Switch screen (development browser / instance dashboard)                                      |
| `?` / `q`              | Help overlay / Quit (cancels active background tasks)                                         |

## Instance Dashboard [#instance-dashboard]

```bash
homarr dash
# or
pnpm dev:cli -- dash
```

The instance dashboard displays all running and stopped Homarr containers, published ports, health states, and resource volumes.

| Key                | Action                                   |
| ------------------ | ---------------------------------------- |
| `Enter` or `Space` | Start or stop selected instance          |
| `s` / `S`          | Stop / Restart instance                  |
| `x`                | Remove container (preserves data volume) |
| `m`                | Manage mode for selected instance        |
| `R`                | Rebuild from recorded build provenance   |

## CLI Commands [#cli-commands]

The commands below use the installed `homarr` binary. Without global installation, prefix each command with `pnpm dev:cli --` (for example, `pnpm dev:cli -- list`).

### Launch Instances [#launch-instances]

```bash
homarr run dev
homarr run --detach dev
homarr run --pr 6441
homarr run --pr 6441 --demo
homarr --pr 6441 --env WORKSHOP_WEB_URL=https://workshop.example.com/workshop
```

* `--pr <number>`: Pull and run a PR image from GHCR (shorthand: `homarr --pr <number>`).
* `--demo` (`-m`): Start with mock integrations and sample data.
* `--detach`: Start container in background.
* `--env` (`-e`): Pass additional environment variables (repeatable: `--env KEY=VALUE`).

### Build & Rebuild [#build--rebuild]

```bash
# Build current checkout as homarr:<name>
homarr build feature

# Build a pull request locally in a temporary checkout
homarr build --pr 6441

# Rebuild an existing image from recorded provenance
homarr rebuild feature
```

Images built with the CLI record their source checkout, revision SHA, and optional PR number. `homarr rebuild` reads this provenance to reconstruct the build without manual configuration.

### GitHub CI Checks [#github-ci-checks]

```bash
# View CI checks for a specific PR
homarr ci 6441

# View CI checks for the current branch
homarr ci

# Watch CI checks until completion
homarr ci 6441 --watch
```

### Interactive Shell [#interactive-shell]

```bash
# Open interactive shell in running container
homarr shell homarr-dev

# Run specific command in container
homarr shell homarr-dev pnpm db:migration:sqlite:run
```

### Image & Volume Management [#image--volume-management]

```bash
# List local images with build provenance (source, revision, PR)
homarr images

# Delete local image
homarr images rm feature

# List data volumes with owner PR/tag and in-use status
homarr data

# Preview deleting a data volume and its owning container
homarr data rm homarr_feature_data

# Permanently delete the data after reviewing the preview
homarr data rm homarr_feature_data --force

# Remove stopped containers (prompts without --force)
homarr prune --force
```

Forced data deletion removes the derived owner container only when it mounts the exact selected volume. A same-named container that does not own that volume stops the operation.

### Instance Operations & Diagnostics [#instance-operations--diagnostics]

```bash
# List instances in a script-friendly table
homarr list

# Follow container logs
homarr logs homarr-dev

# Stop, restart, remove, or open container in browser
homarr stop homarr-dev
homarr restart homarr-dev
homarr remove homarr-dev
homarr open homarr-dev

# Verify Docker daemon, Engine API, GHCR access, and gh CLI authentication
homarr doctor
```

# Users (/docs/management/users)

A **user** is a Homarr identity with preferences, sessions, group memberships, and optional resource access. Homarr can
use local credentials, LDAP, or OIDC; see [Single sign-on](/docs/advanced/single-sign-on).

Manage users under **Management → Users → Manage**. Administrators can change a user's profile, language, home boards,
search preferences, data-size units (binary KiB/MiB or decimal KB/MB), week start, accessibility preference, and local
password. Decimal units are the default. Change them from the user form or **Command menu (Ctrl/Cmd + K) →
Preferences → Data size units**. Byte rates follow the same preference; bit rates stay decimal and use labels such as
Mb/s. Deleting a user does not delete boards they created.

In demo mode (`DEMO_MODE=true`), user deletion, password changes, and local username changes are disabled for everyone,
including administrators, even when `DEMO_READ_ONLY=false` allows other changes. With demo editing enabled, other
profile preferences remain editable. This applies to the UI and API.

<img alt="The Users management page" src="__img0" />

## Groups [#groups]

Groups provide permissions and default desktop or mobile home boards. A user receives permissions from every group they
belong to. The `Everyone` group automatically contains every user and cannot be renamed or have members removed.

<img alt="The user groups management page" src="__img1" />

Group order controls preference defaults when a user belongs to several groups. Permissions are cumulative across
groups; a more privileged group cannot be cancelled by a less privileged one.

## Permission model [#permission-model]

Most resource categories combine an access level with separate capabilities such as creation.

| Category       | Access levels, from lowest to highest     | Separate capabilities |
| -------------- | ----------------------------------------- | --------------------- |
| Boards         | View all → Modify all → Full access       | Create boards         |
| Apps           | Modify all → Full access                  | Use all, create apps  |
| Integrations   | Use all → Interact with any → Full access | Create integrations   |
| Search engines | Modify all → Full access                  | Create search engines |
| Media          | View all → Full access                    | Upload media          |
| Other          | View logs                                 | —                     |
| Administration | Administrator                             | —                     |

Higher levels include the lower levels in the same category. **Administrator** grants every permission and disables the
other permission controls.

Apps are an exception: modifying every app does not by itself allow using every app on a board. Grant **Use all apps**
or full app access when both behaviors are required.

The Viewer, Editor, and Admin presets fill common permission sets. **Effective permissions** shows the complete result,
including inherited permissions.

Custom Widget management, import, preview, secrets, Workshop installation, and placement configuration require an
administrator. Normal board permissions still control viewing and using a placed Custom Widget.

## Resource access [#resource-access]

Global group permissions apply to every resource in a category. Boards and integrations can also grant access to
specific users or groups:

* Board access uses View, Modify, and Full levels.
* Integration access uses Use, Interact, and Full levels.

See [Boards](/docs/management/boards#access-control) and [Integrations](/docs/management/integrations#permissions).

## Invitations [#invitations]

Invitations let a user create a local-credentials account before an expiry time. They require the credentials
authentication provider.

Create an invitation under **Management → Users → Invitations**, choose an expiry, and copy the generated URL. The token
is shown once. Deleting the invitation or reaching its expiry invalidates the URL.

# Integrations (/docs/advanced/command-line/integrations)

<CalloutContainer type="info">
<CalloutDescription>
This guide requires that you understand [how to access the CLI](../).
</CalloutDescription>
</CalloutContainer>

Using these commands, you can manage the integrations from the CLI:

```bash
Group of commands to manage integrations

Usage:
  homarr integrations [command]

Available Commands:
  list     List all integrations (id and name)
  delete   Delete an integration by id or name

Flags:
  -h, --help      help for integrations
  -v, --version   version for homarr-cli

Use "homarr integrations [command] --help" for more information about a command.
```

## List Integrations [#list-integrations]

* Requires a database connection
* Lists all configured integrations

```bash
List all integrations (id and name)

Usage:
  homarr integrations list [flags]

Flags:
  -h, --help      help for integrations list
  -v, --version   version for homarr-cli
```

## Delete Integration [#delete-integration]

* Requires a database connection
* Requires one parameter: `id` or `name`
* Deletes an integration permanently from the database

```bash
Delete an integration by id or name

Usage:
  homarr integrations delete [flags]

Flags:
  -i, --id string     ID of the integration
  -n, --name string   Name of the integration
  -h, --help          help for integrations delete
  -v, --version       version for homarr-cli
```

# Users (/docs/advanced/command-line/users)

<CalloutContainer type="info">
<CalloutDescription>
This guide requires that you understand [how to access the CLI](../).
</CalloutDescription>
</CalloutContainer>

Using these commands, you can manage the users from the CLI:

```bash
Group of commands to manage users

Usage:
  homarr users [command]

Available Commands:
  list              List all users (id, username, email)
  delete            Delete a user by id or username
  update-password   Update the password for a user (credentials provider only)

Flags:
  -h, --help      help for users
  -v, --version   version for homarr-cli

Use "homarr users [command] --help" for more information about a command.
```

## List Users [#list-users]

* Requires a database connection

```bash
ID                              Username        Email
yj52ek5cyb6du4bp4osbkjry        admin           xxxx@example.com
yj52ek5cyb6du4bp4osbkjry        admin           xxxx@example.com
yj52ek5cyb6du4bp4osbkjry        admin           xxxx@example.com
yj52ek5cyb6du4bp4osbkjry        admin           xxxx@example.com
yj52ek5cyb6du4bp4osbkjry        admin           xxxx@example.com
yj52ek5cyb6du4bp4osbkjry        admin           xxxx@example.com
```

## Delete User [#delete-user]

* Requires a database connection
* Requires one parameter: `id` or `username`

```bash
Delete a user by id or username

Usage:
  homarr users delete [flags]

Flags:
  -i, --id string         ID of the user
  -u, --username string   Name of the user
  -h, --help              help for users delete
  -v, --version           version for homarr-cli
```

## Update Password [#update-password]

* Updates the password of an user
* Requires database connection
* Requires either a username or id
* Requires a password (which will be encrypted by Homarr)

```bash
Update the password for a user (credentials provider only)

Usage:
  homarr users update-password [flags]

Flags:
  -i, --id string         ID of the user
  -u, --username string   Name of the user
  -p, --password          New password
  -h, --help              help for users update-password
  -v, --version           version for homarr-cli
```

# Password Recovery (/docs/advanced/command-line/password-recovery)

<CalloutContainer type="info">
<CalloutDescription>
This guide requires that you understand [how to access the CLI](../).
</CalloutDescription>
</CalloutContainer>

Using this command, you can forcefully reset the password of a user.
It will be set to a random value and the hash for the user will be updated.
All sessions for that user will be terminated and the user must re-login.

<img alt="Reset-password command help showing that username is required" src="__img0" />

Using the `--username` parameter, you can specify who you want to reset the password for.
Executing the command will create a new random password, update the database and display the new password.
All sessions for this user will be terminated and they must re-login.

<img alt="Terminal output confirming a password reset and session deletion" src="__img1" />

# Air Quality & UV (/docs/widgets/air-quality)

Displays air quality, ultraviolet index, pollutants and pollen for a location.

Categories: Health, Weather

The Air Quality & UV widget shows current and forecast AQI, UV, pollutant, and pollen data for a location. Choose the
European or US AQI scale; automatic mode uses the US scale for US locales and the European scale elsewhere.

**Supports advanced view.** See the [advanced keyboard shortcuts](/docs/advanced/keyboard-shortcuts/).

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Configuration [#configuration]

**Air quality location**: Location used for air quality, UV and pollen data

Values: Select a location through search or longitude/latitude. Default: Paris / 48.85341, 2.3488.

**AQI standard**: Choose the European or US air quality scale, or select one from the viewer's locale

Values: Automatic for locale, European AQI, US AQI. Default: Automatic for locale.

**Show UV index**: Display the current UV index and its forecast

Values: yes / no. Default: yes.

**Show pollutant concentrations**: Display particulate matter and gaseous pollutant concentrations

Values: yes / no. Default: yes.

**Show pollen concentrations**: Display available pollen concentrations

Values: yes / no. Default: yes.

### Data source [#data-source]

Data comes from the Open-Meteo Air Quality API and refreshes every 15 minutes. A recent successful response can remain
visible for up to 24 hours when the API is unavailable.

Set `NO_EXTERNAL_CONNECTION=true` to disable this and other internet-backed requests. If you need to allowlist the
service, use `https://air-quality-api.open-meteo.com`.

# Anchor Note (/docs/widgets/anchor-note)

Display and edit a selected note from Anchor

Categories: Notes

The Anchor Note widget shows a selected note from your Anchor integration. If your note permissions allow it, you can also edit the note title and content directly in Homarr.

Advanced view always shows the note title and update time alongside the complete formatted document, permission, creation date, and pinned or archived state. Compact title and update-time switches do not hide that information in advanced view.

### Screenshots [#screenshots]

<img src="anchorNoteWidgetScreenshot.src" alt="anchor-note-widget" width="256" height="256" />

### Supported Integrations [#supported-integrations]

[Anchor](/docs/integrations/anchor): Anchor is a self-hosted note-taking application. The Anchor integration lets Homarr display and edit selected notes directly from the dashboard.

### Interactions [#interactions]

* Hover the widget, focus within it, or use a touch device to reveal **Edit**, then select it to start editing the note.
* Click **Save** to persist changes to Anchor.
* Click **Cancel** to discard unsaved changes.

**Supports advanced view.** See the [advanced keyboard shortcuts](/docs/advanced/keyboard-shortcuts/).

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Configuration [#configuration]

**Note**: Select the note from your Anchor integration to display in the widget.

Values: One of the notes from your Anchor integration. Default: -.

**Show title**: Show the note title at the top of the widget.

Values: yes / no. Default: yes.

**Show last updated**: Show the relative last updated time of the note.

Values: yes / no. Default: yes.

# App (/docs/widgets/app)

Embeds an app into the board.

Categories: Links, Apps

The App widget opens an application or website and can show whether Homarr can reach it. Configure the target and status
check from the tile's edit actions. In view mode, right-click uses the browser's link menu; Homarr's widget menu remains available in edit mode.

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Configuration [#configuration]

**Choose app**: Select one of your created apps.

Values: App from your apps list. Default: -.

**Open in new tab**: Whether to open the link in a new tab.

Values: yes / no. Default: yes.

**Show app name**: Whether to show the name of the app on the widget.

Values: yes / no. Default: yes.

**Description display mode**: Choose how to display the app description

Values: Within widget, As tooltip, Hidden. Default: Hidden.

**Layout**: How to arrange the app widget.

Values: Horizontal, Horizontal (reversed), Vertical, Vertical (reversed). Default: Vertical.

**Enable status check**: Whether to enable the status check for the app.

Values: yes / no. Default: yes.

# ArchiveTeam Warrior (/docs/widgets/archive-team-warrior)

Monitor ArchiveTeam Warrior status, projects, bandwidth, and active archival jobs.

Categories: Archiving, Monitoring

The ArchiveTeam Warrior widget shows the current project, runner state, jobs, bandwidth, and broadcast message. Advanced
view adds active-job and session details. A failed refresh keeps the last snapshot with a stale-data warning.

### Supported integration [#supported-integration]

[ArchiveTeam Warrior](/docs/integrations/archiveteam-warrior): ArchiveTeam Warrior is an easy-to-run virtual machine that helps preserve websites by using some of your bandwidth and disk space to download and upload content to ArchiveTeam’s archive. Shows status and active archival work from one Warrior instance

**Supports advanced view.** See the [advanced keyboard shortcuts](/docs/advanced/keyboard-shortcuts/).

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Configuration [#configuration]

**Show broadcast message**: Show the message broadcast by the selected Warrior project when space allows.

Values: yes / no. Default: yes.

# Logs (/docs/management/logs)

The logs page shows recent Homarr application logs and continues updating as new events occur. Use it to investigate
widget, integration, and server errors without opening the container logs separately.

<img alt="The live Logs management page" src="__img0" />

## Opening the logs page [#opening-the-logs-page]

Navigate to **Management** > **Tools** > **Logs**. The page and widget log links are only available to users with the
**View logs** permission.

When a widget reports an error, **Check logs for more details** opens the logs page in a new tab and marks the time when
the widget displayed the error. The related server error normally appears immediately above that marker. If those logs
have already been removed from the retained history, the marker explains that they are no longer available.

## Retained and live logs [#retained-and-live-logs]

Homarr retains the latest 5,000 log events in Redis. Opening the page first loads this history and then continues with
live events without a gap. The history is bounded, so older events are removed automatically.

The history survives normal application restarts when the configured Redis instance persists its data. For complete
platform-level history, startup failures, or events older than the retained limit, use the logs provided by Docker or
your deployment platform.

## Display controls [#display-controls]

The severity selector applies to both retained and live events. Selecting a different level redraws the existing view
using that threshold. The font-size control changes the terminal text size and is remembered in the browser.

# Assistant (/docs/widgets/assistant)

Have a complete assistant conversation directly on a board.

Categories: Productivity

The Assistant widget provides the same active conversation as the app-wide Assistant. Messages, tool calls, and
approvals stay synchronized between surfaces.

An administrator must first configure [Assistant](/docs/management/assistant). Short widget layouts show an action to
open the full Assistant instead of compressing the conversation.

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

# Audio Stats (/docs/widgets/audio-stats)

Displays library statistics from Navidrome or Audiobookshelf, adapting its display based on the linked integration.

Categories: Media

This widget adapts its display based on the linked integration:

* **Navidrome**: Shows artist, album, and song counts
* **Audiobookshelf**: Shows library count, audiobook/podcast totals, listening time, and active sessions

Only options relevant to your linked integration are shown in the configuration panel.

Compact mode keeps every configured statistic visible in the familiar filled tile layout, including a vertical stack for narrow Navidrome cards. Advanced mode retains the complete expanded statistics and stream details.

### Supported Integrations [#supported-integrations]

[Navidrome](/docs/integrations/navidrome): Navidrome is a self-hosted music server and streamer compatible with the Subsonic API. Displays music library statistics

[Audiobookshelf](/docs/integrations/audiobookshelf): Audiobookshelf is a self-hosted audiobook and podcast server that lets you manage and stream your audio library. Displays audiobook/podcast library stats and listening time

**Supports advanced view.** See the [advanced keyboard shortcuts](/docs/advanced/keyboard-shortcuts/).

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Configuration [#configuration]

**Show artists**: Displays the artist count (Navidrome only)

Values: yes / no. Default: yes.

**Show albums**: Displays the album count (Navidrome only)

Values: yes / no. Default: yes.

**Show songs**: Displays the song count (Navidrome only)

Values: yes / no. Default: yes.

**Show library count**: Displays the number of libraries (Audiobookshelf only)

Values: yes / no. Default: yes.

**Show audiobooks**: Displays the total audiobook count (Audiobookshelf only)

Values: yes / no. Default: yes.

**Show podcasts**: Displays the total podcast count (Audiobookshelf only)

Values: yes / no. Default: yes.

**Show listening time**: Displays total listening time (Audiobookshelf only)

Values: yes / no. Default: yes.

**Show active sessions**: Displays the number of active listening sessions (Audiobookshelf only)

Values: yes / no. Default: yes.

**Compact mode**: Uses a more compact layout with smaller icons and tighter spacing

Values: yes / no. Default: no.

# Bazarr (/docs/widgets/bazarr)

Displays missing subtitle counts and health indicators from your Bazarr instance.

Categories: Subtitles, Media

This widget shows subtitle status from your Bazarr instance, including missing episode and movie subtitles, provider issues, and health warnings.

### Screenshots [#screenshots]

<div className="flex flex-col gap-2">
  <img src="widgetOverview.src" alt="bazarr-widget-overview" width="128 * 4" />
</div>

### Supported Integrations [#supported-integrations]

[Bazarr](/docs/integrations/bazarr): Bazarr is a companion application to Sonarr and Radarr that manages and downloads subtitles for your media library. Displays missing subtitle counts and health indicators

Advanced view shows every missing-subtitle and health summary regardless of compact visibility options, together with the already-fetched Sonarr and Radarr SignalR states and announcement count.

**Supports advanced view.** See the [advanced keyboard shortcuts](/docs/advanced/keyboard-shortcuts/).

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Configuration [#configuration]

**Show missing episodes**: Displays the number of episodes with missing subtitles

Values: yes / no. Default: yes.

**Show missing movies**: Displays the number of movies with missing subtitles

Values: yes / no. Default: yes.

**Show provider issues**: Displays the number of subtitle providers with issues

Values: yes / no. Default: yes.

**Show health issues**: Displays the number of Bazarr health issues

Values: yes / no. Default: yes.

# Beszel Systems (Grid) (/docs/widgets/beszel-system-grid)

Card grid view of all Beszel-monitored systems with real-time metrics.

Categories: System Monitoring

This widget displays all your Beszel-monitored systems as a responsive card grid. Each card shows real-time metrics like CPU, memory, disk, network, temperature, and more. Resizing the widget adjusts its rows and columns to keep the cards balanced. If Beszel reports multiple filesystems, the disk bar exposes a hover breakdown for the root disk and each extra mount.

Select a system card to open the complete statistics view, including system, filesystem, Docker, historical, and realtime charts.

### Screenshots [#screenshots]

<img src="beszelSystemGrid.src" alt="Beszel System Grid widget showing system cards with metrics" />

### Supported Integrations [#supported-integrations]

[Beszel](/docs/integrations/beszel): Beszel is a lightweight server monitoring platform with Docker stats, historical data, and alert functions. Displays all monitored systems as a card grid

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Configuration [#configuration]

**Status filter**: Filter systems by their current status

Values: All Systems, Up, Down, Paused. Default: All Systems.

**Show CPU**: Displays CPU usage on each system card

Values: yes / no. Default: yes.

**Show memory**: Displays memory usage on each system card

Values: yes / no. Default: yes.

**Show disk**: Displays disk usage on each system card

Values: yes / no. Default: yes.

**Show GPU**: Displays GPU usage on each system card

Values: yes / no. Default: yes.

**Show load average**: Displays system load average

Values: yes / no. Default: yes.

**Show network**: Displays network throughput

Values: yes / no. Default: yes.

**Show temperature**: Displays system temperature

Values: yes / no. Default: yes.

**Show battery**: Displays battery level (if available)

Values: yes / no. Default: yes.

**Show services**: Displays running Docker services count

Values: yes / no. Default: yes.

**Show uptime**: Displays system uptime

Values: yes / no. Default: yes.

**Show agent version**: Displays the Beszel agent version

Values: yes / no. Default: yes.

# Beszel Alerts (/docs/widgets/beszel-alerts)

View Beszel alert configurations and history with triggered/ok status indicators.

Categories: System Monitoring, Alerts

This widget displays your Beszel alert configurations separated by status (triggered and ok). It also shows alert history with timestamps. Compact mode keeps configured OK alerts and descriptions visible alongside triggered alerts, and keeps history visible when the history option is enabled. Alerts are updated in real time via WebSocket subscriptions.

### Screenshots [#screenshots]

<img src="beszelAlerts.src" alt="Beszel Alerts widget showing triggered and ok alerts with history" />

### Supported Integrations [#supported-integrations]

[Beszel](/docs/integrations/beszel): Beszel is a lightweight server monitoring platform with Docker stats, historical data, and alert functions. Displays alert configurations and trigger history

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Configuration [#configuration]

**Show history**: Displays the alert trigger history

Values: yes / no. Default: yes.

**Max history items**: Maximum number of history entries to display (1-100)

Values: Number (1-100). Default: 10.

# Beszel System Stats (/docs/widgets/beszel-system-stats)

Time-series charts for CPU, memory, disk, network, and Docker container metrics from Beszel.

Categories: System Monitoring, Charts

This widget displays time-series charts for a selected Beszel system, including CPU, memory, disk, network, and Docker container metrics. The Disk Usage chart combines the root disk and every extra filesystem reported by Beszel. Use the widget controls to switch between the realtime Live view and historical periods ranging from 1 hour to 30 days. Live view keeps a one-minute window and pauses while the browser tab is hidden. If the live stream drops, the widget now shows the connection failure state immediately and can switch back to historical data.

### Screenshots [#screenshots]

<img src="beszelSystemStats.src" alt="Beszel System Stats widget showing CPU, memory, disk and network charts" />

### Supported Integrations [#supported-integrations]

[Beszel](/docs/integrations/beszel): Beszel is a lightweight server monitoring platform with Docker stats, historical data, and alert functions. Displays time-series charts for a selected system

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Configuration [#configuration]

**System**: The Beszel system to display stats for. Searchable select populated from the integration.

Values: String. Default: First available system.

**Time period**: The time range for chart data. '1 Minute' enables live streaming via PocketBase SSE (requires Beszel agent >= 0.13.0)

Values: 1 Minute, 1 Hour, 12 Hours, 24 Hours, 1 Week, 30 Days. Default: 1 Hour.

**Show CPU**: Displays the CPU usage chart

Values: yes / no. Default: yes.

**Show memory**: Displays the memory usage chart

Values: yes / no. Default: yes.

**Show disk**: Displays the disk usage chart

Values: yes / no. Default: yes.

**Show disk I/O**: Displays the disk I/O chart

Values: yes / no. Default: yes.

**Show network**: Displays the network chart

Values: yes / no. Default: yes.

**Show Docker CPU**: Displays Docker container CPU usage chart

Values: yes / no. Default: yes.

**Show Docker memory**: Displays Docker container memory usage chart

Values: yes / no. Default: yes.

**Show Docker network**: Displays Docker container network chart

Values: yes / no. Default: yes.

# Beszel Systems (Table) (/docs/widgets/beszel-system-table)

Table view of all Beszel-monitored systems with sortable columns and status indicators.

Categories: System Monitoring

This widget displays all your Beszel-monitored systems in a sortable data table. Each row shows system metrics like CPU, memory, disk, network, temperature, and more. System and load-average status dots are displayed inline with their values. Columns can be toggled on or off, dragged into a different order, and resized from their headers. Column order and widths are saved automatically for each widget. When Beszel reports extra filesystems, the disk column adds a hover breakdown for each mount alongside the root disk.

Select a system row to open the complete statistics view.

### Interactions [#interactions]

* **Reorder columns** by hovering a header to reveal its grab handle, then dragging it
* **Resize columns** by dragging a header's right edge
* **Sort systems** by selecting a sortable column header
* **Open system statistics** by selecting a row

### Supported Integrations [#supported-integrations]

[Beszel](/docs/integrations/beszel): Beszel is a lightweight server monitoring platform with Docker stats, historical data, and alert functions. Displays all monitored systems in a sortable table

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Configuration [#configuration]

**Status filter**: Filter systems by their current status

Values: All Systems, Up, Down, Paused. Default: All Systems.

**Sort by**: Default column to sort the table by

Values: System, CPU, Memory, Disk, GPU, Load Avg, Net, Temp, Services, Uptime, Agent. Default: System.

**Sort direction**: Default sort direction

Values: Ascending, Descending. Default: Ascending.

**Show CPU**: Displays the CPU column

Values: yes / no. Default: yes.

**Show memory**: Displays the memory column

Values: yes / no. Default: yes.

**Show disk**: Displays the disk column

Values: yes / no. Default: yes.

**Show GPU**: Displays the GPU column

Values: yes / no. Default: yes.

**Show load average**: Displays the load average column

Values: yes / no. Default: yes.

**Show network**: Displays the network column

Values: yes / no. Default: yes.

**Show temperature**: Displays the temperature column

Values: yes / no. Default: yes.

**Show battery**: Displays the battery column

Values: yes / no. Default: yes.

**Show services**: Displays the services column

Values: yes / no. Default: yes.

**Show uptime**: Displays the uptime column

Values: yes / no. Default: yes.

**Show agent version**: Displays the agent version column

Values: yes / no. Default: yes.

# Bookmarks (/docs/widgets/bookmarks)

Keeps useful links together

Categories: Links, Apps

The Bookmarks widget keeps direct URLs and Homarr Apps in one ordered list. URLs do not require an App record; Homarr
uses the site's favicon when available. Choose adaptive, compact-grid, or other layouts from the widget configuration.
Vertical uses consistent compact rows and keeps bookmark names visible whenever the widget is wide enough, regardless
of how many bookmarks are configured. Adaptive and grid layouts reduce card height and spacing to show as many
bookmarks as possible before scrolling. Horizontal uses a compact, centered scrolling row with narrower cards in
one-row widgets. Horizontal, vertical, compact-grid, and icon-only layouts keep their gaps tight. Compact grid also
preserves its configured columns when the dashboard is scaled. Bookmark cards, icons, text, and gaps keep the same
visual density when a low-column dashboard is enlarged to fill the screen.

Right-click a bookmark link in view mode to use the browser menu, including opening it in a new tab or copying its address.

### Screenshots [#screenshots]

<div className="flex gap-1">
  <div className="flex flex-col gap-1">
    <img src="gridIconsOnly.src" alt="bookmarks grid icons-only" width="128" height="128" />

    <img src="verticalListSimple.src" alt="bookmarks vertical-list no-domain" width="128" height="128" />
  </div>

  <img src="gridWithTitle.src" alt="bookmarks grid with-title" width="256 + 4" height="256 + 4" />

  <img src="verticalListAll.src" alt="bookmarks vertical-list all-elements" width="128" height="256 + 4" />
</div>

**Supports advanced view.** See the [advanced keyboard shortcuts](/docs/advanced/keyboard-shortcuts/).

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Configuration [#configuration]

The widget title controls are independent of **Hide bookmark names**, which affects individual links. Hiding the
widget title preserves its text and gives the space back to the bookmarks. Existing widgets keep their 11px heading.

**Title**: Title shown on top of the widget.

Values: String. Default: -.

**Show widget title**: Hide the widget heading without clearing its saved text. Does not affect bookmark names.

Values: yes / no. Default: yes.

**Widget title size (px)**: Heading font size before preview or dashboard scaling. Does not resize bookmark names.

Values: 8–32. Default: 11.

**Layout**: How bookmarks use the available widget space. Vertical keeps compact rows and stable title visibility.

Values: Adaptive, Vertical, Horizontal, Grid, Compact grid, Icons. Default: Adaptive.

**Appearance**: Card surface style.

Values: Soft, Filled, Outline, Plain. Default: Soft.

**Card spacing**: Space between bookmark cards. Horizontal, compact-grid, and icon-only layouts cap larger gaps.

Values: Extra small, Small, Medium, Large, Extra large. Default: Extra small.

**Hide bookmark names**: Whether to hide the title of the bookmark items.

Values: yes / no. Default: no.

**Hide icons**: Whether to hide the icon of the bookmark items.

Values: yes / no. Default: no.

**Hide hostnames**: Whether to hide the hostname of the bookmark items.

Values: yes / no. Default: no.

**Open in new tab**: Whether to open the bookmark items in a new tab.

Values: yes / no. Default: yes.

**Expand cards to fill row**: Whether cards in an incomplete final row expand to use the remaining width.

Values: yes / no. Default: no.

**Bookmarks**: URLs and existing Apps shown by the widget.

Values: Paste one or many URLs, or find an existing App. Drag to reorder.. Default: No bookmarks selected.

# Calendar (/docs/widgets/calendar)

Display events from your integrations in a calendar view within a certain relative time period

Categories: Media manager, Servarr

The Calendar widget combines events and upcoming releases in a month view. Advanced view shows a grouped event list with
source, title, location, and description. Healthy integrations remain visible when another source fails.

### Month view [#month-view]

<img src="currentView.src" alt="Calendar month view with marked events" />

### Advanced view [#advanced-view]

<img src="advancedView.src" alt="Calendar advanced view with grouped events" />

### Supported integrations [#supported-integrations]

[Nextcloud](/docs/integrations/nextcloud): Nextcloud is a self-hosted productivity platform that provides file storage, collaboration tools, and more.

[Lidarr](/docs/integrations/lidarr): Lidarr is a music management tool that automates the process of downloading, sorting, and renaming music.

[Radarr](/docs/integrations/radarr): Radarr is a movie management tool that automates the process of downloading, sorting, and renaming movies.

[Readarr](/docs/integrations/readarr): Readarr is a book management tool that automates the process of downloading, sorting, and renaming books.

[Sonarr](/docs/integrations/sonarr): Sonarr is a TV series management tool that automates the process of downloading, sorting, and renaming episodes.

[iCal](/docs/integrations/ical): iCal is a standard for calendar data exchange, allowing users to share and manage calendar events across different platforms.

[Home Assistant](/docs/integrations/home-assistant): Home Assistant is an open-source home automation platform that focuses on privacy and local control, allowing you to automate and control your smart home devices.

### Interactions [#interactions]

* Hover or select a marked date to inspect its events.
* Use advanced view to browse grouped events by month.

**Supports advanced view.** See the [advanced keyboard shortcuts](/docs/advanced/keyboard-shortcuts/).

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Configuration [#configuration]

**Radarr release type**: Select what type of release date to see.

Values: List of: 'In cinemas', 'Digital release', 'Physical release'. Default: 'In cinemas' and 'Digital release'.

**Start from**: Amount of months in past that Homarr should load in background. Higher number means more memory usage.

Values: 2-9999. Default: 2.

**End at**: Amount of months in future that Homarr should load in background. Higher number means more memory usage.

Values: 2-9999. Default: 2.

**Show unmonitored**: Whether to show releases that are not monitored in the integration.

Values: yes / no. Default: no.

# Date and time (/docs/widgets/clock)

Displays the current date and time.

Categories: Time

The Date and time widget shows a configurable clock and optional weather. Advanced view adds a world clock with up to
six named timezones. Time and date formats use Day.js tokens and follow current timezone and daylight-saving rules.

### Screenshots [#screenshots]

<div className="flex gap-1">
  <img src="localClock.src" alt="clock format-24-hours timezone-local" width="128" height="128" />

  <img src="londonClock.src" alt="clock format-24-hours with-seconds timezone-london" width="256" height="128" />

  <img src="tokyoClock.src" alt="clock format-12-hours timezone-tokyo" width="256" height="128" />
</div>

**Supports advanced view.** See the [advanced keyboard shortcuts](/docs/advanced/keyboard-shortcuts/).

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Configuration [#configuration]

**Custom Title/City display**: Show off a custom title or the name of the city/country on top of the clock.

Values: yes / no. Default: no.

**Title**: Title shown on top of the widget. Only shown if "Custom Title/City display" is enabled.

Values: String. Default: -.

**Use fixed timezone**: Select custom timezone to display instead of the client timezone.

Values: yes / no. Default: no.

**Timezone**: Choose the timezone following the IANA standard. Only shown if "Use fixed timezone" is enabled.

Values: Any IANA timezone, e.g. 'Europe/Berlin', 'America/New_York', 'Asia/Tokyo'. Default: Europe/London.

**Show the date**: Whether to show the date below the clock.

Values: yes / no. Default: yes.

**Date format**: Choose a common Day.js date format with a live example and its tokens.

Values: YYYY-MM-DD, DD/MM/YYYY, MM/DD/YYYY, or common long and short date formats. Default: dddd, MMMM D.

**Time format**: Choose a common Day.js time format with a live example. The format controls 12/24-hour display and seconds.

Values: HH:mm, HH:mm:ss, h:mm A, or h:mm:ss A. Default: HH:mm.

**Show weather**: Show a compact weather summary from an independently configured location.

Values: yes / no. Default: no.

**Weather location**: Location used by the weather summary. Only shown if "Show weather" is enabled.

Values: A searched city or custom latitude and longitude. Default: Brisbane.

**Use Fahrenheit**: Use Fahrenheit in the weather summary. Only shown if "Show weather" is enabled.

Values: yes / no. Default: no.

**Animate weather icon**: Animate the weather icon unless the device requests reduced motion.

Values: yes / no. Default: no.

**World clock cities**: Add, label, and order up to six IANA timezones for advanced view.

Values: Up to six labeled IANA timezones. Default: New York, Paris, and Tokyo.

# Coolify (/docs/widgets/coolify)

Overview of your Coolify instance with servers, applications, and services.

Categories: System monitoring, Deployment

The Coolify widget shows servers, applications, and services with their status, project, environment, and Coolify links.

### Supported Integrations [#supported-integrations]

[Coolify](/docs/integrations/coolify): Self-hosted PaaS and deployment platform

Advanced view shows all sections, source integrations, reachability fields, and nested applications. IP addresses remain
masked until revealed. Healthy integrations remain visible when another source fails.

**Supports advanced view.** See the [advanced keyboard shortcuts](/docs/advanced/keyboard-shortcuts/).

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Configuration [#configuration]

**Show servers**: Display the servers section with reachability status and resource counts.

Values: yes / no. Default: yes.

**Show applications**: Display the applications section with status, project, environment, and links.

Values: yes / no. Default: yes.

**Show services**: Display the services section with status, project, environment, and links.

Values: yes / no. Default: yes.

### Sections [#sections]

| Section          | Description                                                                                                                        |
| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| **Servers**      | Lists Coolify servers, reachability status, and application/service counts per server.                                             |
| **Applications** | Lists applications with runtime status, project and environment context, public URL links, Coolify dashboard links, and log links. |
| **Services**     | Lists services with runtime status, project and environment context, public URL links, Coolify dashboard links, and log links.     |

The Coolify API token is team-scoped; Homarr shows only resources available to that team.

# Countdowns (/docs/widgets/countdown)

Tracks upcoming events and recurring anniversaries.

Categories: Time

The Countdowns widget tracks up to 20 one-time or yearly events without an integration. Events use an IANA timezone and
can be reordered; the first event is shown in compact view.

Optional progress uses the configured start date. Browser notifications are local to the current browser and can fire
only while Homarr is open.

**Supports advanced view.** See the [advanced keyboard shortcuts](/docs/advanced/keyboard-shortcuts/).

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Configuration [#configuration]

**Events**: Add, edit, and order one-time or yearly events with a date, time, and IANA timezone.

Values: Up to 20 events. Default: No events.

**Show progress**: Show progress from an optional start date, or between yearly occurrences.

Values: yes / no. Default: yes.

**Show seconds**: Keep seconds visible for every upcoming event, including events more than a day away.

Values: yes / no. Default: no.

# Custom API (/docs/widgets/custom-api)

Renders an administrator-defined Custom JSX v2 widget with server-side API requests, options, and actions.

Categories: Custom, API

A Custom API widget renders a saved [Custom Widget definition](/docs/management/custom-widgets). The definition provides
API sources, named requests, widget options, and safe JSX. Credentials remain encrypted on the server.

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

Select a definition, configure its generated options, and choose a refresh interval.

<CalloutContainer type="info">
<CalloutDescription>
Custom Widgets must be created under **Management → Custom Widgets** before they appear in the widget picker.
</CalloutDescription>
</CalloutContainer>

### Permissions and requests [#permissions-and-requests]

Each request declares its minimum board permission. Public boards may run queries for anonymous viewers, but actions
require authentication. DELETE actions require full board permission and confirmation.

The refresh interval reruns load queries. Manual queries run through `SubFetch`; successful actions can invalidate their
declared queries.

See [Custom Widgets](/docs/management/custom-widgets) for authoring, network scopes, and security limits.

# DNS Hole Controls (/docs/widgets/dns-hole-controls)

Control the blocking feature of your Pi-hole, AdGuard Home or Technitium DNS from your dashboard

Categories: DNS Hole

The DNS Hole Controls widget enables, disables, or temporarily pauses one or more DNS services. Actions require Interact
access. Healthy controls remain available when another selected integration fails.

### Screenshots [#screenshots]

<img src="bigSize.src" alt="dns-hole-controls big-size with-toggle-all-buttons" width="256" height="128" />

<img src="smallSize.src" alt="dns-hole-controls small-size no-toggle-all-buttons" width="128" height="128" />

### Supported Integrations [#supported-integrations]

[AdGuard Home](/docs/integrations/adguard-home): AdGuard Home is a network-wide software for blocking ads and trackers, providing a safer and faster internet experience.

[Pi-hole](/docs/integrations/pi-hole): Pi-hole is a network-wide ad blocker that acts as a DNS sinkhole, blocking unwanted content and improving your browsing experience.

[Technitium DNS](/docs/integrations/technitium-dns): Technitium DNS Server is a self-hosted DNS server with ad-blocking and network-wide filtering capabilities.

### Interactions [#interactions]

* Enable or disable one DNS service by clicking its status badge.
* Temporarily disable one service with the clock action.
* Apply an action to all available services from the top action row. Homarr keeps successful results visible and reports how many sources failed.
* Interaction controls only appear when the current user has permission for that integration.

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Configuration [#configuration]

**Show Toggle All Buttons**: Show or not the 2 buttons that may be redundant when having only one DNS Hole.

Values: yes / no. Default: yes.

# Docker stats (/docs/widgets/docker-containers)

Stats of your containers

Categories: Containers

Displays container resource usage and management actions for Docker environments configured through environment
variables.

<CalloutContainer type="info">
<CalloutDescription>
This widget does not use an integration from **Management → Integrations** and is restricted to administrators.
</CalloutDescription>
</CalloutContainer>

### Screenshots [#screenshots]

<img src="dockerTable.src" alt="docker-stats table docker-containers" width="128 * 3" height="128 * 2" />

### Interactions [#interactions]

Column order and width are saved per widget. These controls are unavailable while the board is in edit mode.

Each container row has an action menu, accessible via the three-dot icon or by right-clicking the row, with the following options:

* **View logs** - opens a dedicated terminal page streaming the container's logs
* **Start** / **Stop** / **Restart** - manage the container's state
* **Remove** - permanently remove the container after a second confirmation click
* **Add to Homarr** - create a bookmark app from the container

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Configuration [#configuration]

**Docker environments**: Select one or more automatically discovered Docker environments, or leave empty to show all

Values: Any Docker socket or host configured for Homarr. Default: All Docker environments.

**Columns to show**: Select which columns are visible in the table

Values: Name, State, Host, CPU usage, Memory usage, and Actions. Default: All columns.

**Enable items sorting**: Allows to sort containers by clicking on the column headers

Values: yes / no. Default: No.

**Column used for sorting by default**: Select which column to use for sorting the containers when the widget is loaded

Values: Name, State, CPU usage, Memory usage. Default: Name.

**Invert sorting**: Invert the sorting order (ascending / descending) for the default sorting column

Values: yes / no. Default: No.

# DNS Hole Summary (/docs/widgets/dns-hole-summary)

Displays the summary of your Pi-hole, AdGuard Home or Technitium DNS blocks and queries statistics

Categories: DNS Hole

The DNS Hole Summary widget combines total queries, blocked queries, and blocklist size from selected DNS services.
Healthy sources remain visible when another integration fails.

### Screenshots [#screenshots]

<div className="flex gap-2">
  <img src="gridLayout.src" alt="grid-layout pi-hole-colors" width="256 + 8" height="256 + 8" />

  <div className="flex flex-col gap-2">
    <img src="verticalLayout.src" alt="vertical-layout no-colors" width="128" height="128" />

    <img src="horizontalLayout.src" alt="horizontal-layout pi-hole-colors" width="128 * 3" height="128" />
  </div>
</div>

### Supported Integrations [#supported-integrations]

[AdGuard Home](/docs/integrations/adguard-home): AdGuard Home is a network-wide software for blocking ads and trackers, providing a safer and faster internet experience.

[Pi-hole](/docs/integrations/pi-hole): Pi-hole is a network-wide ad blocker that acts as a DNS sinkhole, blocking unwanted content and improving your browsing experience.

[Technitium DNS](/docs/integrations/technitium-dns): Technitium DNS Server is a self-hosted DNS server with ad-blocking and network-wide filtering capabilities.

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Configuration [#configuration]

**Layout**: Choose the layout of the widget

Values: Horizontal, Vertical, Grid. Default: Grid.

**Use Pi-Hole colors**: Color the tiles using the background color, that is used by default in Pi-hole, AdGuard Home or Technitium DNS.

Values: yes / no. Default: yes.

# Download Client (/docs/widgets/downloads)

Allows you to view and manage your Downloads from both Torrent and Usenet clients.

Categories: Torrent client, Usenet client, Downloads

The Download Client widget combines active jobs from supported Torrent, Usenet, and other download clients. Rows can be
sorted, filtered, expanded, and configured by column. Advanced view adds queue statistics and the complete selected
column set.

Pause, resume, and delete actions require Interact access to the source integration. `slskd` is list-only. If one source
fails, jobs from healthy integrations remain available.

### Advanced view [#advanced-view]

<img src="advancedView.src" alt="Downloads advanced view with queue statistics and expanded job details" />

### Filtering [#filtering]

<img src="filterPanel.src" alt="Downloads advanced view filtered by client and state" />

### Supported integrations [#supported-integrations]

[SABnzbd](/docs/integrations/sabnzbd): SABnzbd is an Open Source Binary Newsreader. Usenet client

[NZBGet](/docs/integrations/nzbget): NZBGet is a lightweight and efficient Usenet downloader. Usenet client

[Deluge](/docs/integrations/deluge): Deluge is a lightweight, Free Software, cross-platform BitTorrent client. Torrent client

[Transmission](/docs/integrations/transmission): A Fast, Easy and Free Bittorrent Client. Torrent client

[qBittorrent](/docs/integrations/q-bittorent): qBittorrent is a free and open-source BitTorrent client. Torrent client

[Aria2](/docs/integrations/aria2): Lightweight multi-protocol & multi-source command-line download utility. It supports HTTP/HTTPS, FTP, SFTP, BitTorrent and Metalink Multi-protocol download client

[Slskd](/docs/integrations/slskd): A modern client-server application for the Soulseek file sharing network. Soulseek client; list-only

### Interactions [#interactions]

* Select a row to expand its details.
* Right-click a row to copy identifiers or run permitted actions.
* Use the footer to filter clients and states, show statistics, or pause and resume actionable queues.

**Supports advanced view.** See the [advanced keyboard shortcuts](/docs/advanced/keyboard-shortcuts/).

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Configuration [#configuration]

**Columns to show**: Select the columns you want to display in the widget. Compact layouts automatically hide/show selected columns based on widget width and height; advanced view keeps the selected columns visible.

Values: List of columns: name, progress, size, downSpeed, upSpeed, time, state, added, ratio, received, sent, category, integration, index, type. Default: name, progress, downSpeed, time, state.

**Default sort column**: The column used for initial sorting when the widget loads. Clicking a column header changes the current view only.

Values: List of columns: name, progress, size, downSpeed, upSpeed, time, added, ratio, received, sent, index, type. Default: progress.

**Invert sorting**: This sets the initial sorting direction.

Values: yes / no. Default: no.

**Show usenet entries marked as completed**: This will show entries that have been completed in your Usenet client.

Values: yes / no. Default: yes.

**Show torrent entries marked as completed**: This will show entries that have been completed in your Torrent client.

Values: yes / no. Default: yes.

**Show Miscellaneous entries marked as completed**: This will show entries that have been completed in your Miscellaneous client.

Values: yes / no. Default: yes.

**Hide completed torrent under this threshold**: This hides completed torrents whose upload speed is below the threshold. The input uses KiB/s with binary units and KB/s with decimal units.

Values: Any number above 0, 0 to disable. Default: 0.

**Categories/labels to filter**: You can filter the items by categories or labels. Use a comma to separate multiple values.

Values: Comma-separated list of categories or labels. Default: -.

**Filter as a whitelist**: If enabled, only items that match the filter will be shown. If disabled, items that do not match the filter will be hidden.

Values: yes / no. Default: no.

**Use category filter for global torrent ratio**: When enabled, the configured category/label filter is applied to the global torrent ratio. Footer client/status filters do not change this ratio.

Values: yes / no. Default: yes.

**Limit items per integration**: This will limit the number of items shown per integration, not globally.

Values: Any whole number from 1 upward. Default: 50.

# Firewall Monitoring (/docs/widgets/firewall)

Displays a summary of firewalls.

Categories: Firewall

Compact mode keeps the configured firewall summary and interface section visible without dropping interfaces based on widget height.

### Screenshots [#screenshots]

<img alt="Firewall Widget" src="__img0" />

### Supported Integrations [#supported-integrations]

[OPNsense](/docs/integrations/opnsense): OPNsense is an open-source, easy-to-use, and easy-to-build firewall and routing platform

**Supports advanced view.** See the [advanced keyboard shortcuts](/docs/advanced/keyboard-shortcuts/).

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

# System Health Monitoring (/docs/widgets/health-monitoring)

Displays information showing the health and status of your system(s).

Categories: Health monitoring

This widget displays information about the health and status of your system(s), including CPU, memory, disk usage, and more.

CPU usage, CPU temperature, memory usage, and GPU utilization are shown as compact gauges with threshold colors and their original units.

Advanced view is a complete health workspace: it shows every available CPU, temperature, memory, GPU, filesystem, update, reboot, and system-information section even when compact visibility switches hide some of them on the board. Proxmox clusters likewise show uptime, CPU, memory, and every node, VM, container, and storage section. Storage-volume filters, units, and permissions remain in effect.

### Screenshots [#screenshots]

<img src="systemView.src" alt="health-monitoring system-view" width="256" height="256" />

<img src="clusterView.src" alt="health-monitoring cluster-view" width="256" height="256" />

### Supported Integrations [#supported-integrations]

[Dash.](/docs/integrations/dash-dot): Dash. is a system performance and resource monitoring tool Will display information on the system tab

[Open Media Vault](/docs/integrations/open-media-vault): Open Media Vault is a free network-attached storage server based on the Debian operating system. Will display information on the system tab

[TrueNAS](/docs/integrations/truenas): Enterprise network-attached storage for your home, office, and cloud. Will display information on the system tab

[Synology DiskStation](/docs/integrations/synology): Monitor CPU, memory, storage volumes, and system health from Synology DSM. Will display information on the system tab

[Glances](/docs/integrations/glances): Glances is a cross-platform system monitoring tool. Will display information on the system tab

[Proxmox](/docs/integrations/proxmox): Proxmox is a powerful open-source virtualization platform that allows you to run virtual machines and containers. Will display information on the cluster tab, only supports one integration at a time

**Supports advanced view.** See the [advanced keyboard shortcuts](/docs/advanced/keyboard-shortcuts/).

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Configuration [#configuration]

**CPU Temp in Fahrenheit**: Display the CPU temperature in Fahrenheit or Celsius

Values: yes / no. Default: no.

**Show CPU Info**: Displays CPU info in the system tab

Values: yes / no. Default: yes.

**Show Memory Info**: Displays memory info in the system tab

Values: yes / no. Default: yes.

**Show Uptime**: Show uptime in the cluster tab

Values: yes / no. Default: yes.

**Show Filesystem Info**: Displays filesystem info in the system tab

Values: yes / no. Default: yes.

**Visible storage volumes**: Only available when all selected integrations are Synology. Leave empty to show all detected storage volumes.

Values: List of storage volumes. Default: Empty list.

**Default tab**: Tab that should be visible by default. Only used when multiple integrations are available.

Values: System, Cluster. Default: System.

**Visible cluster sections**: Select which sections should be visible in the cluster tab

Values: List of Nodes, VMs, LXCs, Storage. Default: Nodes, VMs, LXCs, Storage.

**Section indicator requirement**: 'All' requires that all items be online for the indicator to be green. 'Any' requires at least one item to be online.

Values: All, Any. Default: All.

# iFrame (/docs/widgets/iframe)

Embed any content from the internet. Some websites may restrict access.

Categories: Embed

If your application is not supported natively by Homarr, you can integrate it using the iframe widget.
It uses the [iframe element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe),
which embeds the desired page in the browser.
This means, no traffic is routed through Homarr (and the URL must be reachable from the client).

### Screenshots [#screenshots]

<div>
  <img src="wikipediaHomepage.src" alt="iframe wikipedia-homepage" width="128 * 3" />

  <img src="youtubeStream.src" alt="iframe youtube-iss-stream" width="128 * 3" />
</div>

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Limitations [#limitations]

Although you can integrate many websites, some may not work.
This is because the administrators of those sites disallow iframes
for security reasons, as users could easily be tricked
by embedding the original site on a malicious page.

Some proxies disallow iframes by default for this reason.
You can use [https://iframetest.com](https://iframetest.com) to check whether the site allows iframes.

If you manage all of your own applications, you can usually change that by configuring
the `Content-Security-Policy` header and its `frame-ancestors` directive. The obsolete
`X-Frame-Options: ALLOW-FROM` directive is not supported by modern browsers.

For example, to allow your site to be embedded in iframes from specific domains:

**Apache (.htaccess or httpd.conf):**

```apache
Header set Content-Security-Policy "frame-ancestors 'self' https://trusted-domain.com"
```

**Nginx:**

```nginx
add_header Content-Security-Policy "frame-ancestors 'self' https://trusted-domain.com";
```

### Example URLs [#example-urls]

* **Wikipedia homepage:** [https://en.wikipedia.org/wiki/Main\_Page](https://en.wikipedia.org/wiki/Main_Page)
* **Any YouTube video or stream:** [https://www.youtube.com/embed/dQw4w9WgXcQ?si=MWUbbG66UNTla\_Ni](https://www.youtube.com/embed/dQw4w9WgXcQ?si=MWUbbG66UNTla_Ni)

Homarr passes the configured URL directly to the browser. The iframe sandbox and configured permissions still apply.

### Configuration [#configuration]

**Embed URL**: The URL of the content to embed in the widget.

Values: Any valid URL. Default: -.

**Allow full screen**: Whether to allow the embedded content to be displayed in full screen mode.

Values: yes / no. Default: no.

**Allow scrolling**: Whether to allow the embedded content to be scrolled.

Values: yes / no. Default: yes.

**Allow payment**: Whether to allow the embedded content to process payments.

Values: yes / no. Default: no.

**Allow auto play**: Whether to allow the embedded content to auto play media.

Values: yes / no. Default: no.

**Allow microphone**: Whether to allow the embedded content to access the microphone.

Values: yes / no. Default: no.

**Allow camera**: Whether to allow the embedded content to access the camera.

Values: yes / no. Default: no.

**Allow geolocation**: Whether to allow the embedded content to access the geolocation.

Values: yes / no. Default: no.

**Allow modals**: Whether to allow the embedded content to open modal windows.

Values: yes / no. Default: no.

### Transparent iframes [#transparent-iframes]

To create a transparent iframe like below you can use the following html code and load it into your iframe:

```html
<html style="color-scheme: dark;">
  <body style="background: none; display: flex; justify-content: center; align-items: center;">
    <img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/homarr.svg" width="90" height="90" />
  </body>
</html>
```

<img alt="transparent iframe" src="__img0" />

### Third-party content [#third-party-content]

<CalloutContainer type="warning">
<CalloutDescription>
The content below is an overview of third-party projects. All support requests/problems must be redirected to the appropriate repository.
We cannot guarantee the functionality nor security of these tools.
</CalloutDescription>
</CalloutContainer>

### homarr-iframes from Diogo Valentim [#homarr-iframes-from-diogo-valentim]

The project [homarr-iframes](https://github.com/diogovalentte/homarr-iframes) has iframes designed to be used with Homarr, these iframes offer a minimalist view of other systems:

* [Vikunja](https://github.com/go-vikunja/vikunja): overview of your tasks with links to them.
* [Linkwarden](https://github.com/linkwarden/linkwarden): overview of your bookmarks with links to them.
* [Cinemark Brazil](https://www.cinemark.com.br): overview of the movies in Cinemark theaters in your city (*only in Brazil*).

<img alt="Image of the Vikunja (left), Linkwarden (middle), and Cinemark Brazil (right) iframes on a Homarr dashboard" src="__img1" title="Image of the Vikunja (left), Linkwarden (middle), and Cinemark Brazil (right) iframes on a Homarr dashboard" />

You can [configure the iframes appearance and behavior](https://github.com/diogovalentte/homarr-iframes?tab=readme-ov-file#adding-to-homarr) using query arguments when adding them to your dashboard, like selecting the iframe theme and limit of items to show, and other options specific to each iframe.

# Immich Album Carousel (/docs/widgets/immich-album-carousel)

Shows a slideshow of pictures from an Immich album or your full library

Categories: Photos Service

### Screenshots [#screenshots]

<img src="screen.src" height="256" alt="immich album size-big" />

### Supported Integrations [#supported-integrations]

[Immich](/docs/integrations/immich): Self-hosted photo and video management solution

**Supports advanced view.** See the [advanced keyboard shortcuts](/docs/advanced/keyboard-shortcuts/).

Hover or focus the widget to pause its slideshow; touch devices keep the control available. A paused slideshow keeps its resume control visible. The advanced view displays the complete photo without cropping, groups previous, pause or resume, and next together, and includes every loaded photo in its thumbnail strip. If an Immich refresh fails, the last loaded album stays visible with a stale-data warning.

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Configuration [#configuration]

**Album**: Select an Immich album or All photos. An empty selection also shows random photos from your full library.

Values: String. Default: All photos.

**Interval in seconds**: Rotate between pictures in the album every X seconds. Must be at least 1. Must be below 3600

Values: String. Default: .

**Show photo info**: Display date of the picture and the current index at the bottom of the slideshow

Values: yes / no. Default: no.

**Randomize photos**: Show photos in a random order instead of always starting with the same album order.

Values: yes / no. Default: no.

# Indexer manager status (/docs/widgets/indexer-manager)

View the status of your indexers.

Categories: Indexer

Compact mode keeps the titled indexer list, per-indexer status indicators, and full-width **Test all** action together.

### Screenshots [#screenshots]

<div className="flex gap-1">
  <img src="bigItem.src" height="256" alt="indexer-manager size-big" />

  <img src="smallItem.src" height="128" alt="indexer-manager size-small" />
</div>

### Supported Integrations [#supported-integrations]

[Prowlarr](/docs/integrations/prowlarr): Prowlarr is an indexer manager for Usenet and BitTorrent, providing a unified interface to manage your indexers.

### Interactions [#interactions]

* Test all indexers by clicking on the test button.

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Configuration [#configuration]

**Open in new tab**: Open indexer site in new tab

Values: yes / no. Default: yes.

# Immich Server Stats (/docs/widgets/immich-server-stats)

Information about your Immich instance

Categories: Photos server

Compact mode presents every enabled statistic as a vertical icon, label, and value card.

### Screenshots [#screenshots]

<img src="screen.src" height="256" alt="immich server stats size-big" />

### Supported Integrations [#supported-integrations]

[Immich](/docs/integrations/immich): Self-hosted photo and video management solution

In advanced mode, the widget also ranks the largest albums by asset count. To keep the dashboard response lightweight, it shows up to 50 albums.

**Supports advanced view.** See the [advanced keyboard shortcuts](/docs/advanced/keyboard-shortcuts/).

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Configuration [#configuration]

**Show users**: Show count of users on your instance

Values: yes / no. Default: yes.

**Show photos**: Show count of photos on your instance

Values: yes / no. Default: yes.

**Show videos**: Show count of videos on your instance

Values: yes / no. Default: yes.

**Show storage**: Show the total amount of storage used

Values: yes / no. Default: yes.

# llama.cpp (/docs/widgets/llama-cpp)

Shows the health, loaded model and generation speed of a local llama.cpp llama-server.

Categories: System Monitoring

This widget shows the live status of your local [llama.cpp](https://github.com/ggml-org/llama.cpp) `llama-server`: whether it is online, which model is loaded (with quantization, context size, file size and parameter count), the generation speed in tokens per second, and how many requests are being processed. When the server is started with `--metrics`, it also reports total token counts and the prompt cache hit rate.

### Generation speed [#generation-speed]

The widget picks the most meaningful speed for the current state (hover the speed for an explanation of which one is shown):

* **While a request is being generated** — the average speed of that request since it started, derived from the token count reported by `/slots`.
* **While the server is busy but the per-request data is unavailable** — the live speed from the `/metrics` rate gauge.
* **While the server is idle** — the average generation speed since the server started (cumulative tokens ÷ seconds), so the value stays meaningful instead of dropping to zero.

### Supported Integrations [#supported-integrations]

[llama.cpp](/docs/integrations/llama-cpp): Connect to a local llama.cpp llama-server to show model, throughput and request status on your dashboard. Displays health, model details, generation speed and request status

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Configuration [#configuration]

**Show title**: Displays the llama.cpp label and status badge at the top of the widget

Values: yes / no. Default: yes.

**Show model info**: Displays the loaded model name, quantization, context size and file size

Values: yes / no. Default: yes.

**Show cache hit rate**: Displays the prompt cache hit rate as a percentage bar

Values: yes / no. Default: yes.

**Show context usage**: Displays the context (KV cache) token usage as a progress bar

Values: yes / no. Default: yes.

# Media releases (/docs/widgets/media-releases)

Display newly added medias or upcoming releases from different integrations

Categories: Releases, Media

The Media releases widget shows newly added media or upcoming releases with their source, date, artwork, and configured
metadata. Advanced view adds descriptions and tags. Healthy integrations remain visible when another source fails.

### Screenshots [#screenshots]

<div className="flex gap-1">
  <img src="backdrop.src" alt="media-releases layout-backdrop" width="256" />

  <img src="poster.src" alt="media-releases layout-poster" width="256" />
</div>

### Supported Integrations [#supported-integrations]

[Emby](/docs/integrations/emby): Emby is a media server platform that allows you to organize, manage, and stream your personal media collection.

[Jellyfin](/docs/integrations/jellyfin): Jellyfin is a free and open-source media server software that allows you to organize, manage, and share your media files.

[Plex](/docs/integrations/plex): Plex is a media server platform that allows you to organize, manage, and stream your personal media collection.

**Supports advanced view.** See the [advanced keyboard shortcuts](/docs/advanced/keyboard-shortcuts/).

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Configuration [#configuration]

**Layout**: How the image should be displayed

Values: Backdrop, Poster. Default: Backdrop.

**Show description tooltip**: Show a tooltip with the description of the media when hovering over the media item

Values: yes / no. Default: true.

**Show media type badge**: Show a badge indicating the type of media (e.g., movie, series)

Values: yes / no. Default: true.

**Show source integration**: Show avatar of the source integration

Values: yes / no. Default: true.

# Media Missing & Queue (/docs/widgets/media-missing)

Track missing media and active downloads from Radarr and Sonarr

Categories: Media, Downloads

The Media Missing & Queue widget shows monitored movies and episodes that are not yet available and items currently in
the Radarr or Sonarr download queue. Advanced view shows both groups with queue status and time remaining.

### Screenshots [#screenshots]

<div className="flex gap-2 flex-wrap">
  <img src="widgetMissing.src" alt="media-missing widget showing missing movies and episodes in a grid" width="360" />

  <img src="widgetQueued.src" alt="media-missing tab showing download queue with progress bars" width="256" />

  <img src="widgetCompact.src" alt="media-missing widget in a compact wide-and-short size" width="256" />
</div>

### Supported Integrations [#supported-integrations]

[Radarr](/docs/integrations/radarr): Radarr is a movie management tool that automates the process of downloading, sorting, and renaming movies.

[Sonarr](/docs/integrations/sonarr): Sonarr is a TV series management tool that automates the process of downloading, sorting, and renaming episodes.

### Tabs [#tabs]

| Tab         | Description                                                                                           |
| ----------- | ----------------------------------------------------------------------------------------------------- |
| **Missing** | Lists movies (Radarr) and episodes (Sonarr) that are monitored but not yet available in your library. |
| **Queued**  | Shows items currently being downloaded with a progress bar and estimated time remaining.              |

**Supports advanced view.** See the [advanced keyboard shortcuts](/docs/advanced/keyboard-shortcuts/).

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Configuration [#configuration]

**Show Missing**: Display the missing media tab, listing movies or episodes not yet downloaded

Values: yes / no. Default: true.

**Show Queued**: Display the download queue tab with progress for each item

Values: yes / no. Default: true.

**Page Size**: Maximum number of items to fetch per integration

Values: String. Default: 10.

# Media Request List (/docs/widgets/media-request-list)

See a list of all media requests from your integration

Categories: Media requests

Provides a list of all open and recently closed requests. It also provides the functionality to approve or reject requests. Compact request cards retain their full artwork, request metadata, title, status, and permitted actions.

You can limit the list to specific request statuses (for example, only show `pending`) and restrict it to requests created within the last N days.

### Screenshots [#screenshots]

<img src="mediaRequestList.src" alt="media-request-list" width="256" height="256" />

### Supported Integrations [#supported-integrations]

[Jellyseerr](/docs/integrations/jellyseerr): Jellyseerr is a self-hosted media request management system that integrates with Jellyfin and other media servers.

[Overseerr](/docs/integrations/overseerr): Overseerr is a self-hosted media request management system that integrates with Plex.

[Seerr](/docs/integrations/seerr): Seerr is a self-hosted media request management system that integrates with various media servers.

### Interactions [#interactions]

* Approve / decline a request by clicking on the thumbs up or down icon.
* Hover over the widget to reveal a **search button** that opens Spotlight in media request search mode, scoped to the widget's integrations.
* When no requests exist yet, the widget offers the same media search action instead of reporting an integration error.
* A warning indicator identifies unavailable integrations without hiding requests returned by healthy integrations.

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Configuration [#configuration]

**Open links in new tab**: If enabled, links will open in a new tab.

Values: yes / no. Default: yes.

**Statuses to show**: Only requests with these statuses will be shown. Defaults to all statuses.

Values: List of: 'pending', 'approved', 'declined', 'failed', 'completed'. Default: All statuses.

**Show only recent requests**: Limit to requests created within this many days. Set to 0 to disable the time filter.

Values: 0-365. Default: 0.

# Media Requests Stats (/docs/widgets/media-request-stats)

Statistics about your media requests

Categories: Media requests

Provides an overview of media requests, including totals, availability, approvals, and rejections. Compact mode keeps every configured stat and section title visible; the user ranking remains scrollable instead of being truncated.

### Supported Integrations [#supported-integrations]

[Jellyseerr](/docs/integrations/jellyseerr): Jellyseerr is a self-hosted media request management system that integrates with Jellyfin and other media servers.

[Overseerr](/docs/integrations/overseerr): Overseerr is a self-hosted media request management system that integrates with Plex.

[Seerr](/docs/integrations/seerr): Seerr is a self-hosted media request management system that integrates with various media servers.

### Screenshots [#screenshots]

<img src="mediaRequestStats.src" alt="media-request-stats" width="256" height="256" />

### Interactions [#interactions]

* Hover over the widget to reveal a **search button** that opens Spotlight in media request search mode, scoped to the widget's integrations.
* When no requests exist yet, the widget offers media search and explains when statistics will appear.
* A warning indicator identifies unavailable integrations while totals from healthy integrations remain visible.

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

# Media server streams (/docs/widgets/media-server)

Show the current streams on your media servers

Categories: Media server

The Media server streams widget combines active sessions from selected servers. It shows playback progress, resolution,
bitrate, location, and direct-play or transcoding state according to the widget configuration. Advanced view adds search,
sorting, and session metadata.

Healthy integrations remain available when another source fails. Navidrome and Plex return currently playing sessions
rather than every connected session.

### Supported integrations [#supported-integrations]

[Emby](/docs/integrations/emby): Emby is a media server platform that allows you to organize, manage, and stream your personal media collection.

[Jellyfin](/docs/integrations/jellyfin): Jellyfin is a free and open-source media server software that allows you to organize, manage, and share your media files.

[Navidrome](/docs/integrations/navidrome): Navidrome is a self-hosted music server and streamer compatible with the Subsonic API. Currently playing audio only

[Plex](/docs/integrations/plex): Plex is a media server platform that allows you to organize, manage, and stream your personal media collection. Currently playing streams only

**Supports advanced view.** See the [advanced keyboard shortcuts](/docs/advanced/keyboard-shortcuts/).

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Configuration [#configuration]

**Show only currently playing**: Plex and Navidrome always show only currently playing streams.

Values: yes / no. Default: yes.

# Media transcoding (/docs/widgets/media-transcoding)

Statistics, current queue and worker status of your media transcoding

Categories: Media transcoding

The media transcoding widget provides you with an overview of your media transcoding status.
It shows you the current queue, worker status, and statistics about your transcoding jobs.
Advanced view presents all three panels together. If refreshes fail after data has loaded, Homarr keeps the last useful result visible and marks it as stale.

### Screenshots [#screenshots]

<div className="flex gap-1 flex-wrap">
  <img src="workersCard.src" alt="media-transcoding workers-tab" width="128 * 3" />

  <img src="queueCard.src" alt="media-transcoding  queue-tab" width="128 * 3" />

  <img src="statisticsCard.src" alt="media-transcoding statistics-tab" width="128 * 3" />
</div>

### Supported Integrations [#supported-integrations]

[Tdarr](/docs/integrations/tdarr): Tdarr is a distributed media transcoding system that allows you to process and optimize your media files across multiple nodes.

**Supports advanced view.** See the [advanced keyboard shortcuts](/docs/advanced/keyboard-shortcuts/).

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Configuration [#configuration]

**Default view**: Tab that is shown by default when the widget is opened

Values: Queue, Workers, Statistics. Default: Statistics.

**Queue page size**: Number of items shown per page in the queue

Values: 1-30. Default: 10.

# Network Status (/docs/widgets/network-controller-status)

Display connected devices on a network

Categories: Network controller

The Network Status widget shows connected users and guests on wired or wireless networks. Advanced view separates totals
by controller. Healthy controllers remain visible when another source fails.

### Screenshots [#screenshots]

<img src="wifiCard.src" alt="network-controller-status wifi" width="128 * 1.5" height="128 * 1.5" />

<img src="wiredCard.src" alt="network-controller-status wired" width="128 * 1.5" height="128 * 1.5" />

### Supported Integrations [#supported-integrations]

[Unifi Controller](/docs/integrations/unifi-controller): Unifi Controller is a network management platform for Unifi devices.

**Supports advanced view.** See the [advanced keyboard shortcuts](/docs/advanced/keyboard-shortcuts/).

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Configuration [#configuration]

**Widget Content**: Select the type to display in the widget

Values: Wired, Wi-Fi. Default: Wi-Fi.

# Minecraft Server Status (/docs/widgets/minecraft-server-status)

Displays the status of a Minecraft server.

Categories: Gaming, Minecraft

Shows the status and amount of players on a Minecraft server. Compact mode keeps the server icon and player count visible instead of hiding them based on tile size. It supports both Java and Bedrock editions, but only public servers accessible through the [mcsrvstat.us API](https://api.mcsrvstat.us) are supported.

### Screenshots [#screenshots]

<div className="flex gap-1">
  <img src="javaItem.src" alt="minecraft-server-status java-edition" width="128 * 1.5" height="128 * 1.5" />

  <img src="bedrockItem.src" alt="minecraft-server-status bedrock-edition" width="128 * 1.5" height="128 * 1.5" />
</div>

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Configuration [#configuration]

**Title**: Title to show on top. Leave empty to show server address.

Values: String. Default: -.

**Server address**: Public address of the Minecraft server

Values: String. Default: hypixel.net.

**Bedrock server**: Wheter the server is a Bedrock server

Values: yes / no. Default: no.

### Data source [#data-source]

We use the Minecraft Server Status API to fetch the server status.
If you need to whitelist the API, use the following URL: `https://api.mcsrvstat.us`.

# Network Controller Summary (/docs/widgets/network-controller-summary)

Displays the summary of a Network Controller

Categories: Network controller

The Network Controller Summary widget shows WAN, internet, Wi-Fi, and VPN status, including latency and connected-user
counts.

### Screenshots [#screenshots]

<img src="summaryCard.src" alt="network-controller-summary" width="128 * 1.5" height="128 * 1.5" />

### Supported Integrations [#supported-integrations]

[Unifi Controller](/docs/integrations/unifi-controller): Unifi Controller is a network management platform for Unifi devices.

Advanced view separates status and user counts by controller.

**Supports advanced view.** See the [advanced keyboard shortcuts](/docs/advanced/keyboard-shortcuts/).

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

# Notebook (/docs/widgets/notebook)

A simple notebook widget that supports markdown.

Categories: Notes

The Notebook widget stores rich text on a board. Its editor supports headings, formatting, lists, links, images, tables,
text direction, and alignment.

Select the edit action or double-click the document to edit it. Save or cancel from the same action area. Editing follows
the board's permissions.

The toolbar includes collapsible sections and table controls for inserting tables, coloring selected cells, editing rows
and columns, toggling headers, and merging or splitting cells.

### View mode [#view-mode]

<img src="normalView.src" alt="Notebook widget showing a saved note" width="550" />

### Editing [#editing]

<img src="editView.src" alt="Notebook editor with its formatting toolbar" width="550" />

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Configuration [#configuration]

**Show the toolbar to help you write markdown**: Upon editing, enables a toolbar at the top with document editing functions.

Values: yes / no. Default: yes.

**Allow check in read only mode**: Allows the ability to check the boxes from checklists outside of editing

Values: yes / no. Default: yes.

# Notifications (/docs/widgets/notifications)

Display notification history from an integration

Categories: Notifications, Messaging

Displays notification history from the configured integration. Advanced view shows full message bodies, sources, and
available service icons.

### Supported Integrations [#supported-integrations]

[Ntfy](/docs/integrations/ntfy): Ntfy is a simple, open-source notification service that allows you to send and receive notifications across devices.

[Nextcloud](/docs/integrations/nextcloud): Nextcloud is a self-hosted productivity platform that provides file storage, collaboration tools, and more.

[Gotify](/docs/integrations/gotify): Gotify is a simple, self-hosted server for sending and receiving messages in real time.

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Message formatting and deletion [#message-formatting-and-deletion]

Automatic formatting follows Gotify's `extras["client::display"].contentType`: `text/markdown` renders Markdown,
`text/html` renders sanitized HTML, and absent or unknown types remain plain text. Markdown ignores embedded HTML.
For producers without this metadata, select Markdown or HTML in the widget's message format setting.
Scripts, event handlers, and unsafe links are removed; remote images in formatted messages may load in your browser.

The service link is a separate icon, so selecting message text or using message links does not open Gotify.
Deleting a Gotify notification requires **Interact** permission on its integration and permanently removes the
message from Gotify for all clients. Other notification integrations remain read-only.

# Paperless-ngx (/docs/widgets/paperless-ngx)

Displays document management statistics including inbox ratio, document counts, and metadata.

Categories: Documents

This widget displays statistics from your Paperless-ngx instance, including an inbox ratio ring showing how many documents are in your inbox versus total, along with counts for correspondents, tags, and document types. Compact mode keeps every configured statistic in the familiar filled tile layout and uses a vertical stack on narrow cards.

### Supported Integrations [#supported-integrations]

[Paperless-ngx](/docs/integrations/paperless-ngx): Paperless-ngx is a document management system that transforms your physical documents into a searchable online archive. Displays document statistics and inbox ratio

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Configuration [#configuration]

**Show inbox ratio**: Displays the inbox-to-total documents ratio as a hero section

Values: yes / no. Default: yes.

**Show inbox ring**: Displays a ring progress indicator for the inbox ratio

Values: yes / no. Default: yes.

**Show documents total**: Displays the total number of documents

Values: yes / no. Default: yes.

**Show documents inbox**: Displays the number of documents in the inbox

Values: yes / no. Default: yes.

**Show correspondents**: Displays the number of correspondents

Values: yes / no. Default: yes.

**Show tags**: Displays the number of tags

Values: yes / no. Default: yes.

**Show document types**: Displays the number of document types

Values: yes / no. Default: yes.

# PatchMon (/docs/widgets/patchmon)

Displays host patch statistics including total hosts, hosts needing updates, and security update counts.

Categories: Health Monitoring

The PatchMon widget shows host compliance, available updates, security updates, outdated packages, and optional operating
system distribution. Thresholds can use counts or percentages. Advanced view shows the complete posture summary.

## Authentication [#authentication]

PatchMon data requires a signed-in Homarr session, including on public boards. Visibility options change presentation,
not the integration response available to an authorized user.

### Supported integration [#supported-integration]

[PatchMon](/docs/integrations/patchmon): PatchMon is a patch management and monitoring solution for Linux hosts, tracking package updates and security patches across your infrastructure.

**Supports advanced view.** See the [advanced keyboard shortcuts](/docs/advanced/keyboard-shortcuts/).

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Configuration [#configuration]

**Show compliance hero**: Display a compliance ring showing the percentage of up-to-date hosts

Values: yes / no. Default: yes.

**Show total hosts**: Displays the total number of monitored hosts

Values: yes / no. Default: yes.

**Show hosts needing updates**: Displays hosts with at least one outdated package

Values: yes / no. Default: yes.

**Show security updates**: Displays the total number of security updates available

Values: yes / no. Default: yes.

**Show up-to-date hosts**: Displays hosts with zero outdated packages

Values: yes / no. Default: no.

**Show hosts with security updates**: Displays hosts requiring security patches

Values: yes / no. Default: no.

**Show recent updates (24h)**: Displays the number of updates applied in the last 24 hours

Values: yes / no. Default: no.

**Show outdated packages**: Displays the total number of outdated packages across all hosts

Values: yes / no. Default: no.

**Show repositories**: Displays the number of active repositories being monitored

Values: yes / no. Default: no.

**Enable threshold colors**: Colors stat values green, yellow, or red based on built-in severity presets

Values: yes / no. Default: yes.

**Advanced thresholds**: Customize warning and critical thresholds per stat (absolute count or % of total hosts)

Values: yes / no. Default: no.

**Needs updates threshold mode**: Compare the needs-updates count as an absolute value or percentage of total hosts. Shown when threshold colors and advanced thresholds are enabled.

Values: Absolute count, Percent of total hosts. Default: Absolute count.

**Needs updates warning threshold**: Enter yellow when the value reaches this threshold

Values: Integer ≥ 0. Default: 1.

**Needs updates critical threshold**: Enter red when the value reaches this threshold

Values: Integer ≥ 0. Default: 5.

**Security updates threshold mode**: Compare the security-updates count as an absolute value or percentage of total hosts. Shown when threshold colors and advanced thresholds are enabled.

Values: Absolute count, Percent of total hosts. Default: Absolute count.

**Security updates warning threshold**: Enter yellow when the value reaches this threshold

Values: Integer ≥ 0. Default: 1.

**Security updates critical threshold**: Enter red when the value reaches this threshold

Values: Integer ≥ 0. Default: 10.

**Hosts with security updates threshold mode**: Compare the host count as an absolute value or percentage of total hosts. Shown when threshold colors and advanced thresholds are enabled.

Values: Absolute count, Percent of total hosts. Default: Absolute count.

**Hosts with security updates warning threshold**: Enter yellow when the value reaches this threshold

Values: Integer ≥ 0. Default: 1.

**Hosts with security updates critical threshold**: Enter red when the value reaches this threshold

Values: Integer ≥ 0. Default: 1.

**Up-to-date hosts threshold mode**: Compare the up-to-date host count as an absolute value or percentage of total hosts. Shown when threshold colors and advanced thresholds are enabled.

Values: Absolute count, Percent of total hosts. Default: Percent of total hosts.

**Up-to-date hosts warning threshold**: Enter yellow when the value is at or above this threshold but below full coverage

Values: Integer ≥ 0. Default: 90.

**Up-to-date hosts critical threshold**: Enter red when the value falls below this threshold

Values: Integer ≥ 0. Default: 90.

**Outdated packages threshold mode**: Compare the outdated-packages count as an absolute value or percentage of total hosts. Shown when threshold colors, advanced thresholds, and Show outdated packages are enabled.

Values: Absolute count, Percent of total hosts. Default: Absolute count.

**Outdated packages warning threshold**: Enter yellow when the value reaches this threshold

Values: Integer ≥ 0. Default: 1.

**Outdated packages critical threshold**: Enter red when the value reaches this threshold

Values: Integer ≥ 0. Default: 50.

**Show OS distribution**: Displays a horizontal bar breakdown of monitored hosts by operating system

Values: yes / no. Default: no.

**OS display mode**: Choose how to display the operating system distribution. Shown when Show OS distribution is enabled.

Values: Horizontal bars, Donut chart. Default: Horizontal bars.

**OS distribution limit**: Maximum number of operating systems to display in the distribution section

Values: Top 3, Top 5, Top 10, All. Default: All.

**Show OS version**: Append the OS version to each distribution label when available

Values: yes / no. Default: yes.

# Releases (/docs/widgets/releases)

Displays a list of the current version of the given repositories with the given version regex.

Categories: Releases, Software

The releases widget enables you to track a list of repositories and see their respective latest release. Compact mode keeps repositories in the familiar full-width stack.
It also supports importing releases from your local docker containers.

### Screenshots [#screenshots]

<div className="flex gap-1">
  <img src="fullCard.src" alt="releases full" width="128 * 3" />

  <img src="collapsibleCard.src" alt="releases collapsible" width="128 * 3" />

  <img src="noDetailsCard.src" alt="releases no details" width="128 * 3" />
</div>

### Supported Providers [#supported-providers]

GitHub, Docker Hub, GitLab, NPM, Codeberg, GitHub Container Registry, Quay, and LinuxServer.io are configured per repository in the widget.

For GitHub Container Registry, use `owner/package` identifiers such as `homarr-labs/homarr`.
Full image references such as `ghcr.io/homarr-labs/homarr:latest` are also accepted.

Advanced view shows every configured repository in a roomier responsive layout. Repository names and details remain visible, and selecting a repository still expands its description and links.

**Supports advanced view.** See the [advanced keyboard shortcuts](/docs/advanced/keyboard-shortcuts/).

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Configuration [#configuration]

**New Release Within**: The time period in which a new release is marked as new.

Values: Any timespan in format '12h', '3d', '2w', '6M', '1y'.. Default: 1w.

**Stale Release Within**: The time period in which a release is marked as stale.

Values: Any timespan in format '12h', '3d', '2w', '6M', '1y'.. Default: 6M.

**Show Only Highlighted**: Show only new or stale releases. As per the above.

Values: yes / no. Default: no.

**Show Details**: Show the row below the repository with stats about the repository.

Values: yes / no. Default: yes.

**Show only icon**: Hides the repository name or identifier

Values: yes / no. Default: no.

**Top Releases**: The max number of latest releases to show. Zero means no limit.

Values: Any positive integer or zero to disable the limit.. Default: 0.

**Repositories**: The repositories to show releases for.

Values: Repositories[]. Default: None.

**Provider**: Provider to fetch the repository or package releases from.

Values: Select from the available providers.. Default: -.

**Identifier**: The identifier of the repository or package, e.g. "homarr-labs/homarr".

Values: Any valid provider identifier. GHCR also accepts full image refs like "ghcr.io/owner/package:tag".. Default: -.

**Provider URL**: Base URL for the provider.

Values: Any valid URL.. Default: Provider default.

**Name**: Display name of the repository.

Values: String. Default: -.

**Icon URL**: URL to the icon of the repository.

Values: String. Default: -.

**Version Regex**: The regex to extract the version from the release tag.

Values: Version Regex. Default: None.

**Prefix**: The prefix to match before the version.

Values: String. Default: .

**Precision**: The precision of the version

Values: None, #, #.#, #.#.#, #.#.#.#, #.#.#.#.#. Default: None.

**Suffix**: The suffix to match after the version.

Values: String. Default: .

<CalloutContainer type="info">
<CalloutDescription>
The version filter is used to match the version tag of the release. It is a combination of the prefix, precision and suffix.

Setting the Prefix to `v`, precision to `2` and the Suffix to `-alpha`, will match `v1.0-alpha` but not `v1.0-beta`.\
Setting the Prefix to `v`, precision to `3`, will match `v5.2.0` but not `v1.0.2-alpha` or `Beta v5.2.1`.
</CalloutDescription>
</CalloutContainer>

# RSS Feed (/docs/widgets/rss-feed)

Monitor and display one or more generic RSS, ATOM or JSON feeds.

Categories: Feeds

Using the RSS standard, you can integrate most News websites, applications and more on your dashboard. Compact mode uses a vertical card list and keeps enclosure images as the familiar poster and blurred backdrop.

### Screenshots [#screenshots]

<img src="screenshot.src" alt="rss-feed noted-lol" width="128 * 4" />

Advanced view keeps the configured feeds and post limit unchanged while showing each fetched post's full description, image, source, relative time, and exact publication timestamp. Right-to-left text and safe external links continue to follow the widget configuration.

**Supports advanced view.** See the [advanced keyboard shortcuts](/docs/advanced/keyboard-shortcuts/).

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Configuration [#configuration]

**Feed URLs**: A list of RSS feed URLs. They must conform to one of the following standards [RSS](https://www.rssboard.org/rss-specification), [ATOM](https://datatracker.ietf.org/doc/html/rfc5023) or [JSON Feed](https://www.jsonfeed.org/version/1.1/).

Values: List of URLs. Default: Empty list.

**Enable RTL**: Enable right-to-left layout for feeds in such languages

Values: yes / no. Default: no.

**Description line clamp**: Maximum number of lines to show for the feed description

Values: 1-50. Default: 5.

**Amount posts limit**: Maximum number of posts to show

Values: 1-9999. Default: 100.

**Hide description**: Hide the description of individual feeds

Values: yes / no. Default: no.

**Show poster image**: Show the poster image beside the content

Values: yes / no. Default: no.

If one configured feed fails, the widget keeps entries from healthy feeds visible and shows a warning. If a refresh fails after entries have loaded, the previous entries stay visible with a stale-data warning.

### Examples [#examples]

Here's a small collection of examples, that you can use for testing or actual use (in no particular order):

* [https://noted.lol/rss/](https://noted.lol/rss/)
* [https://blog.google/products/chrome/rss/](https://blog.google/products/chrome/rss/)
* [https://www.w3.org/blog/feed/](https://www.w3.org/blog/feed/)
* [https://partner-feeds.beta.20min.ch/rss/20minuten](https://partner-feeds.beta.20min.ch/rss/20minuten)
* [http://rss.cnn.com/rss/money\_topstories.rss](http://rss.cnn.com/rss/money_topstories.rss)
* [https://www.wired.com/rss/](https://www.wired.com/rss/)
* [http://www.chinadaily.com.cn/rss/world\_rss.xml](http://www.chinadaily.com.cn/rss/world_rss.xml)
* [https://www.srf.ch/news/bnf/rss/1646](https://www.srf.ch/news/bnf/rss/1646)
* [https://torrentfreak.com/feed/](https://torrentfreak.com/feed/)
* [http://rss.nytimes.com/services/xml/rss/nyt/HomePage.xml](http://rss.nytimes.com/services/xml/rss/nyt/HomePage.xml)
* [http://feeds.foxnews.com/foxnews/latest](http://feeds.foxnews.com/foxnews/latest)

There is a good list of feeds here:
[https://github.com/greysonp/rss-feeds/blob/master/feeds.json](https://github.com/greysonp/rss-feeds/blob/master/feeds.json)

# Entity State (/docs/widgets/smart-home-entity-state)

Display the state of an entity and toggle it optionally

Categories: Smart home

The Entity State widget shows a Home Assistant entity's state and can optionally toggle it. Advanced view includes the
entity ID, unit, device class, icon, and update timestamps; arbitrary attributes are not exposed.

### Screenshots [#screenshots]

<img src="sun.src" alt="smart-home-entity-state sun" width="128 * 1.5" height="128 * 1.5" />

<img src="lightSwitch.src" alt="smart-home-entity-state light-switch" width="128 * 1.5" height="128 * 1.5" />

<img src="temperature.src" alt="smart-home-entity-state temperature" width="128 * 1.5" height="128 * 1.5" />

### Supported Integrations [#supported-integrations]

[Home Assistant](/docs/integrations/home-assistant): Home Assistant is an open-source home automation platform that focuses on privacy and local control, allowing you to automate and control your smart home devices.

### Interactions [#interactions]

* Toggle entity state by clicking on the entity (only when clickable enabled).
* After a successful toggle, the displayed state refreshes immediately.
* If Homarr cannot refresh an entity, the last known state stays visible but toggling is disabled until the connection recovers.

**Supports advanced view.** See the [advanced keyboard shortcuts](/docs/advanced/keyboard-shortcuts/).

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Configuration [#configuration]

**Entity ID**: The ID of the entity to display. This can be any entity that is available in your smart home integration.

Values: String. Default: sun.sun.

**Display Name**: Display name for the entity, if not set the entity ID will be used.

Values: String. Default: Sun.

**Entity unit**: Optional unit for the entity (will be displayed after the value).

Values: String. Default: .

**Clickable**: If enabled, the entity will be clickable and will toggle the state of the entity.

Values: yes / no. Default: no.

### Entity ID [#entity-id]

Find the entity under **Home Assistant → Developer Tools → States** and copy its `domain.object_id` value.

<img src="retrieveEntityId.src" alt="Home Assistant entity IDs under Developer Tools and States" width="256 * 2" />

# Speedtest Tracker (/docs/widgets/speedtest-tracker)

Displays speed test results from your Speedtest Tracker instance.

Categories: Speedtest

This widget displays internet speed test results from your [Speedtest Tracker](https://docs.speedtest-tracker.dev/) instance,
including the latest result, historical averages, and a live chart of the last 12 hours.

The widget keeps every configured overview section in a compact card layout and names its healthy sources when multiple integrations are selected.

When multiple Speedtest Tracker integrations are selected, results from healthy sources remain visible if another source fails. A warning indicator identifies each unavailable integration without exposing private request details. If every selected integration fails, the widget reports an error; if cached data remains visible after a later total failure, a stale-data warning is shown.

### Screenshots [#screenshots]

<img src="screenshot.src" alt="speedtest-tracker image" width="500" height="355" />

### Supported Integrations [#supported-integrations]

[Speedtest Tracker](/docs/integrations/speedtest-tracker): Speedtest Tracker is a self-hosted internet performance tracking application.

**Supports advanced view.** See the [advanced keyboard shortcuts](/docs/advanced/keyboard-shortcuts/).

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Configuration [#configuration]

**Show latest result**: Displays the most recent speed test result, including download speed, upload speed, ping, and health status.

Values: yes / no. Default: yes.

**Show averages**: Displays average download speed, upload speed, and ping across all recorded tests.

Values: yes / no. Default: yes.

**Show recent results**: Displays an area chart of the last 12 hours of speed test results.

Values: yes / no. Default: yes.

**Show ping results**: Displays a chart of ping results. Only shown if 'Show recent results' is disabled.

Values: yes / no. Default: no.

# Execute Automation (/docs/widgets/smart-home-execute-automation)

Trigger an automation with one click

Categories: Automation

The Execute Automation widget triggers a Home Assistant automation. Advanced view shows the automation ID, permission,
latest error, and last successful run in the current browser session.

### Screenshots [#screenshots]

<div className="flex gap-1">
  <img src="empty.src" alt="smart-home-execute-automation empty" width="128 * 1.5" height="128 * 1.5" />

  <img src="withDisplayname.src" alt="smart-home-execute-automation with-displayname" width="128 * 1.5" height="128 * 1.5" />
</div>

### Supported Integrations [#supported-integrations]

[Home Assistant](/docs/integrations/home-assistant): Home Assistant is an open-source home automation platform that focuses on privacy and local control, allowing you to automate and control your smart home devices.

**Supports advanced view.** See the [advanced keyboard shortcuts](/docs/advanced/keyboard-shortcuts/).

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Configuration [#configuration]

Use the Home Assistant entity ID (for example, `automation.turn_on_lights`) in the **Automation ID** field, not the automation's internal ID.

**Display name**: Title that will be displayed on the widget.

Values: String. Default: -.

**Automation ID**: The ID of the automation to execute.

Values: String. Default: .

# Statistics (/docs/widgets/stats)

Combine selected statistics from multiple integrations in cards, compact rows, or grouped tables.

Categories: Statistics

Sonarr shows, Paperless-ngx documents, Navidrome songs: pick metrics from your configured integrations and combine them in one widget.

## Layouts [#layouts]

Use **cards** for prominent values, **rows** for a compact overview, or **tables** to group metrics by integration. Labels, order and number formatting are configurable.

<img alt="Cards showing playback counts and library statistics from Jellystat, Komga and Tube Archivist" src="__img0" />

<img alt="Compact rows combining Homebox inventory, Spoolman filament and Trilium notes" src="__img1" />

The widget toolbar lets you try layout changes locally; they reset on reload. Use widget settings to save changes for everyone.

## See more [#see-more]

Click a metric to reveal its full value and related fields. **Right-click → Advanced view** shows all available metrics from your selected integrations, including those you haven't added to the widget.

<img alt="Advanced view with collapsible tables for each integration" src="__img2" />

## Refresh [#refresh]

These are saved snapshots, not live readings. **Right-click → Refresh** fetches new data; the menu shows the age of the oldest snapshot. Failed refreshes keep the previous values.

Opening a board reuses saved data. Multiple metrics from the same integration share retrieval. Snapshots have no time-based expiry, but clearing the cache or changing integration credentials can remove them.

## New service integrations in v2 [#new-service-integrations-in-v2]

These 31 integrations work with Statistics, alongside existing providers such as Sonarr, Radarr, Paperless-ngx and Navidrome. The metric picker shows what's available for each source.

<details>
  <summary>
    Integration setup guides and available metrics
  </summary>

  | Integration                                              | Available statistics                                                    |
  | -------------------------------------------------------- | ----------------------------------------------------------------------- |
  | [Caddy](/docs/integrations/caddy)                        | Upstreams, active requests, failed requests                             |
  | [Changedetection.io](/docs/integrations/changedetection) | Unviewed changed watches, total watched pages                           |
  | [FileFlows](/docs/integrations/fileflows)                | Queued, processing, processed, processing time                          |
  | [Gatus](/docs/integrations/gatus)                        | Up, down, unknown, total                                                |
  | [Healthchecks](/docs/integrations/healthchecks)          | Up, down, grace, new checks                                             |
  | [Homebox](/docs/integrations/homebox)                    | Items, locations, labels, warranty items, value, users                  |
  | [Karakeep](/docs/integrations/karakeep)                  | Bookmarks, favorites, archived, highlights, lists, tags                 |
  | [Linkwarden](/docs/integrations/linkwarden)              | Links, collections, tags                                                |
  | [Maintainerr](/docs/integrations/maintainerr)            | Handled items/episodes/movies, reclaimable storage                      |
  | [Mealie](/docs/integrations/mealie)                      | Recipes, users, categories, tags                                        |
  | [Miniflux](/docs/integrations/miniflux)                  | Read and unread entries                                                 |
  | [Netdata](/docs/integrations/netdata)                    | Warning and critical alarms                                             |
  | [Plant-it](/docs/integrations/plantit)                   | Plants, species, photos, events                                         |
  | [Prometheus](/docs/integrations/prometheus)              | Targets, up, down                                                       |
  | [RomM](/docs/integrations/romm)                          | Platforms, ROMs, saves, states, screenshots, file size                  |
  | [Spoolman](/docs/integrations/spoolman)                  | Active spools, remaining weight                                         |
  | [Stash](/docs/integrations/stash)                        | Scenes/size/duration, images/size, galleries, performers, studios, tags |
  | [Syncthing Relay](/docs/integrations/syncthing-relay)    | Sessions, connections, bytes proxied                                    |
  | [Tandoor](/docs/integrations/tandoor)                    | Users, recipes, keywords                                                |
  | [Trilium](/docs/integrations/trilium)                    | Version, active notes, database size                                    |
  | [Unmanic](/docs/integrations/unmanic)                    | Active/total workers, pending records                                   |
  | [xTeVe](/docs/integrations/xteve)                        | All streams, active streams, XEPG streams                               |
  | [Your Spotify](/docs/integrations/your-spotify)          | Songs listened, listening time, distinct artists                        |
  | [Autobrr](/docs/integrations/autobrr)                    | Approved/rejected pushes, filters, indexers                             |
  | [Jellystat](/docs/integrations/jellystat)                | 30-day plays by media type                                              |
  | [Scrutiny](/docs/integrations/scrutiny)                  | Passed, failed, unknown devices                                         |
  | [Tube Archivist](/docs/integrations/tubearchivist)       | Pending downloads, videos, channels, playlists                          |
  | [Frigate](/docs/integrations/frigate)                    | Cameras, uptime, version                                                |
  | [Komga](/docs/integrations/komga)                        | Libraries, series, books                                                |
  | [NetAlertX](/docs/integrations/netalertx)                | Total, connected, new, down alerts                                      |
  | [Jackett](/docs/integrations/jackett)                    | Configured indexers; existing indexer widget                            |
</details>

# Stock Price (/docs/widgets/stock-price)

Displays the current stock price of a company.

Categories: Finance, Market

Using the Stocks widget, you can show the current stock prices of your favorite companies on your dashboard.
The widget prioritizes the symbol, current price, and trend. Company name, change, time range, and a taller chart appear progressively when both widget dimensions can support them.

In advanced view, the widget always shows the returned symbol and company name, configured range and interval, current and previous close, absolute and percentage change, range minimum and maximum, and the full price-history chart. These values use the same configured Yahoo Finance query as the compact widget; advanced view does not change the symbol, range, or interval.

### Screenshots [#screenshots]

<div className="flex gap-1">
  <div className="flex flex-col gap-1">
    <div className="flex gap-1">
      <img src="apple.src" alt="stock-price apple" width="128" height="128" />

      <img src="google.src" alt="stock-price google" width="128" height="128" />
    </div>

    <img src="ethereum.src" alt="stock-price ethereum" width="128 * 2 + 4" height="128 + 2" />
  </div>

  <img src="nvidia.src" alt="stock-price nvidia" width="128 * 2 + 2" height="128 * 2 + 4" />
</div>

**Supports advanced view.** See the [advanced keyboard shortcuts](/docs/advanced/keyboard-shortcuts/).

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Configuration [#configuration]

**Stock symbol**: The stock symbol of the company you want to track

Values: List of URLs. Default: AAPL.

**Time Range**: Time range of the diagram

Values: 1 Day, 5 Day, 1 Month, 3 Months, 6 Months, Year to Date, 1 Year, 2 Years, 5 Years, 10 Years, Max. Default: 1 Month.

**Time Interval**: Interval between data points

Values: 5 Minutes, 15 Minutes, 30 Minutes, 1 Hour, 1 Day, 5 Days, 1 Week, 1 Month. Default: 1 Day.

### Examples [#examples]

Here's a small collection of examples, that you can use for testing or actual use (in no particular order):

* AAPL
* GOOGL
* AMZN
* TSLA
* MSFT
* META
* NVDA
* NFLX
* BTC-USD
* ETH-USD

### Data source [#data-source]

We use the Yahoo Finance API to fetch the stock prices.
If you need to whitelist the api, please use the following URL: `https://query1.finance.yahoo.com`

# System disks (/docs/widgets/system-disks)

Disk usage of your system

Categories: Storage, Disks

This widget displays filesystem and SMART disk usage for supported server and NAS integrations. Compact mode uses a one-column card list with the configured primary value, available temperature, and solid health bar.

### Supported Integrations [#supported-integrations]

[Dash.](/docs/integrations/dash-dot): Dash. is a system performance and resource monitoring tool

[Open Media Vault](/docs/integrations/open-media-vault): Open Media Vault is a free network-attached storage server based on the Debian operating system.

[TrueNAS](/docs/integrations/truenas): Enterprise network-attached storage for your home, office, and cloud.

[Unraid](/docs/integrations/unraid): Versatile operating system that lets you run applications, virtual machines, and storage devices on your server

[Synology DiskStation](/docs/integrations/synology): Monitor CPU, memory, storage volumes, and system health from Synology DSM. Supports storage volume filtering when only Synology integrations are selected

Advanced view keeps your configured volume filters while showing each integration name, usage percentage, used and total space, free-space percentage, SMART status, available temperature, and the usage background bar regardless of compact display options.

**Supports advanced view.** See the [advanced keyboard shortcuts](/docs/advanced/keyboard-shortcuts/).

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Configuration [#configuration]

**Show temperature if available**: Display disk temperature when the integration provides it

Values: yes / no. Default: Yes.

**Display mode**: How disk usage values are shown

Values: Percentage (e.g., 76%), Absolute values, Free space percentage (e.g., 24% free). Default: Percentage (e.g., 76%).

**Show background usage bar**: Fill the area below the usage value with a background bar

Values: yes / no. Default: Yes.

**Visible storage volumes**: Only available when all selected integrations are Synology. Leave empty to show all detected storage volumes.

Values: List of storage volumes. Default: All volumes.

# System Resources (/docs/widgets/system-resources)

Displays CPU, RAM and network of your host

Categories: CPU, RAM, Memory, Network, Interface

Displays CPU, RAM and network of your host in real time. Compact view keeps every configured chart in its familiar stacked layout, while advanced view adds the expanded per-source presentation.

### Screenshots [#screenshots]

<div className="flex gap-1">
  <div className="flex flex-col gap-1">
    <img src="network.src" alt="system-resources-widget network-only icon-label" width="256 + 4" height="128" />

    <div className="flex gap-1">
      <img src="cpu.src" alt="system-resources-widget cpu-only no-label item-title" width="128" height="128" />

      <img src="memory.src" alt="system-resources-widget memory-only text-label" width="128" height="128" />
    </div>
  </div>

  <img src="cpuAndMemory.src" alt="system-resources-widget cpu-and-memory icon-text-label" width="256 + 4" height="256 + 4" />
</div>

### Supported Integrations [#supported-integrations]

[Dash.](/docs/integrations/dash-dot): Dash. is a system performance and resource monitoring tool

[Open Media Vault](/docs/integrations/open-media-vault): Open Media Vault is a free network-attached storage server based on the Debian operating system.

[TrueNAS](/docs/integrations/truenas): Enterprise network-attached storage for your home, office, and cloud.

[Synology DiskStation](/docs/integrations/synology): Monitor CPU, memory, storage volumes, and system health from Synology DSM.

[Glances](/docs/integrations/glances): Glances is a cross-platform system monitoring tool.

**Supports advanced view.** See the [advanced keyboard shortcuts](/docs/advanced/keyboard-shortcuts/).

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Configuration [#configuration]

**Visible charts**: Select the charts you want to be visible.

Values: CPU, Memory, Network. Default: CPU, Memory, Network.

**Label display mode**: Select how the graphs should be labeled

Values: Show text with icon, Show only text, Show only icon, Hide label. Default: Show text with icon.

**Enable chart shading**: Not only show a line, but also fill the area below

Values: yes / no. Default: Yes.

# Timer / Pomodoro (/docs/widgets/timer)

Runs a simple timer or a configurable Pomodoro sequence.

Categories: Productivity, Time

The Timer / Pomodoro widget runs in the browser without an integration. Timer mode uses one duration; Pomodoro mode
alternates configurable focus, short-break, and long-break phases.

Progress and alert preferences are stored per board and widget in the current browser. Notifications can fire only
while Homarr is open.

**Supports advanced view.** See the [advanced keyboard shortcuts](/docs/advanced/keyboard-shortcuts/).

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Configuration [#configuration]

**Mode**: Run one reusable timer or a repeating focus and break sequence

Values: Timer, Pomodoro. Default: Pomodoro.

**Timer minutes**: Duration of the reusable timer

Values: 1-1440 minutes. Default: 10.

**Focus minutes**: Duration of each Pomodoro focus session

Values: 1-180 minutes. Default: 25.

**Short break minutes**: Duration of breaks between most focus sessions

Values: 1-60 minutes. Default: 5.

**Long break minutes**: Duration of the break at the end of a Pomodoro cycle

Values: 1-180 minutes. Default: 15.

**Focus sessions before a long break**: Number of completed focus sessions in one Pomodoro cycle

Values: 1-12 sessions. Default: 4.

**Automatically start breaks**: Start the next short or long break when a focus session completes

Values: yes / no. Default: no.

**Automatically start focus sessions**: Start the next focus session when a break completes

Values: yes / no. Default: no.

# Timetable (/docs/widgets/timetable)

Displays departure times for a station.

Categories: Timetable

The Timetable widget provides real-time departure times for a selected station. Compact mode keeps configured titles, line names, and platform fields visible while adapting dense rows to the available space.

### Screenshots [#screenshots]

<div className="flex gap-2">
  <img src="trainDepartures.src" alt="timetable-widget-train-departures" width="128 * 2" />

  <img src="streetDepartures.src" alt="timetable-widget-bus-and-tram-departures" width="128 * 2" />
</div>

**Supports advanced view.** See the [advanced keyboard shortcuts](/docs/advanced/keyboard-shortcuts/).

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Configuration [#configuration]

**Search.ch URL**: Base URL for the Search.ch timetable API.

Values: An HTTP(S) URL that resolves to a public IP address.. Default: https://search.ch.

**Station**: Select the station

Values: List of station names. Default: -.

For security, all custom base URLs must resolve to a public IP address whenever Homarr uses them. Private and local hosts are rejected.

If a timetable refresh fails after departures have loaded, the widget keeps the previous departures visible and marks them as stale. The advanced view also shows their last update time.

# Tracearr (/docs/widgets/tracearr)

Monitor media server streams, user activity, and policy violations.

Categories: Media Monitoring

The Tracearr widget shows active streams, user statistics, recent activity, and policy violations. Rows identify their
source integration, and healthy sources remain visible when another source fails.

### Sections [#sections]

| Section             | Description                                                                                                                            |
| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| **Stats Bar**       | Displays Active Streams, Total Users, Transcode Count, and Total Bandwidth at a glance.                                                |
| **Active Streams**  | Shows currently playing media with poster art, user info, progress bar, resolution, and transcoding status (Direct Play or Transcode). |
| **Recent Activity** | A paginated list of watching history with user avatars and watched status.                                                             |
| **Violations**      | Alerts for policy violations (e.g., concurrent stream limits) with severity levels.                                                    |

**Supports advanced view.** See the [advanced keyboard shortcuts](/docs/advanced/keyboard-shortcuts/).

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Supported Integrations [#supported-integrations]

[Tracearr](/docs/integrations/tracearr): Tracearr is a comprehensive media monitoring solution that tracks streams, user activity, and policy violations in your media server.

### Configuration [#configuration]

**Show Streams**: Display the active streams section.

Values: yes / no. Default: yes.

**Show Stats**: Display the stats bar with active streams, total users, transcode count, and bandwidth.

Values: yes / no. Default: yes.

**Show Recent Activity**: Display the recent activity list with user watch history.

Values: yes / no. Default: yes.

**Show Violations**: Display the violations alerts for policy breaches.

Values: yes / no. Default: yes.

# Traefik (/docs/widgets/traefik)

Overview of Traefik routers, services, middlewares, and entry points.

Categories: Monitoring, Reverse proxy

This widget displays a compact overview of your Traefik instance, including total routers, entry points, protocol-specific router/service/middleware counts, and warning or error totals when Traefik reports them.

Advanced view shows every protocol and entry point, identifies every healthy Traefik source and version, and labels each resource or failed endpoint with its owning integration. Compact mode keeps every configured protocol card and entry-point label visible and names each healthy source when multiple integrations are selected.

When multiple Traefik integrations are selected, data from healthy sources remains visible if another source fails. A warning indicator identifies each unavailable integration without exposing private request details. If every selected integration fails, the widget reports an error; if cached data remains visible after a later total failure, a stale-data warning is shown.

### Supported Integrations [#supported-integrations]

[Traefik](/docs/integrations/traefik): Cloud-native reverse proxy and load balancer Reads data from Traefik's dashboard/API endpoints

**Supports advanced view.** See the [advanced keyboard shortcuts](/docs/advanced/keyboard-shortcuts/).

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Configuration [#configuration]

**Show TCP**: Display TCP routers, services, and middlewares.

Values: yes / no. Default: yes.

**Show UDP**: Display UDP routers and services.

Values: yes / no. Default: yes.

**Show entry points**: Display the configured Traefik entry point names.

Values: yes / no. Default: yes.

# UPS (/docs/widgets/ups)

Monitor the status of your UPS devices through a NUT server.

Categories: UPS

The UPS widget shows NUT device state, battery charge, runtime, load, and voltage. Advanced view identifies each source
integration. Devices from healthy integrations remain visible when another source fails.

### Supported Integrations [#supported-integrations]

[PeaNUT](/docs/integrations/peanut): A tiny dashboard for Network UPS Tools (NUT) servers.

**Supports advanced view.** See the [advanced keyboard shortcuts](/docs/advanced/keyboard-shortcuts/).

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Configuration [#configuration]

**Show battery**: Displays the battery charge ring and estimated runtime for each UPS device.

Values: yes / no. Default: yes.

**Show load**: Displays the current output load percentage for each UPS device.

Values: yes / no. Default: yes.

**Show voltage**: Displays the input and output voltage for each UPS device.

Values: yes / no. Default: yes.

# Umami Analytics (/docs/widgets/umami)

Display visitor stats from your Umami analytics instance

Categories: Analytics

The Umami Analytics widget displays key visitor metrics from a website tracked by your [Umami](https://umami.is) instance - pageviews, unique visitors, visits, bounce rate, avg. visit duration, and real-time active visitor count. The widget body can be switched between a visitor/event chart, a multi-event chart, and ranked top pages or referrers lists. Compact mode keeps configured axes and secondary statistics visible regardless of widget height.

### Supported Integrations [#supported-integrations]

[Umami](/docs/integrations/umami): Privacy-focused, open-source web analytics

**Supports advanced view.** See the [advanced keyboard shortcuts](/docs/advanced/keyboard-shortcuts/).

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Configuration [#configuration]

**Website**: Select a website tracked by your Umami instance. Populated automatically from the connected integration.

Values: Website selector. Default: None.

**Time frame**: The time period to display visitor data for

Values: Today, Last 24 hours, Last 7 days, Last 30 days, This month, Last month. Default: Last 24 hours.

**View**: What to display in the widget body. Visible once a website is selected.

Values: Chart, Events chart, Top pages, Top referrers. Default: Chart.

**Chart type**: Display style for the chart. Visible when View is "Chart" or "Events chart".

Values: Bar chart, Sparkline. Default: Bar chart.

**Chart style**: How to render the event series alongside visitors. Visible when View is "Chart", Chart type is "Bar chart", and an Event is selected.

Values: Side by side, Overlay (subset). Default: Side by side.

**Event**: Overlay a single named event on the visitor chart. Populated from event names recorded by Umami. Visible when View is "Chart".

Values: Event name selector. Default: None.

**Events**: Select one or more events to plot as individual series with no visitors baseline. Populated from event names recorded by Umami. Visible when View is "Events chart".

Values: Multi-select event name selector. Default: None.

**Items to show**: Number of top items to display. Visible when View is "Top pages" or "Top referrers".

Values: Number (1–500). Default: 5.

### View modes [#view-modes]

| View              | Description                                                                                                                         |
| ----------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| **Chart**         | Bar chart or sparkline of unique visitors over the selected time frame. Optionally overlay a single named event as a second series. |
| **Events chart**  | Multi-select one or more named events and chart each as its own colored series - no visitor baseline. Supports bar and sparkline.   |
| **Top pages**     | Ranked list of URLs by pageview count for the selected time frame.                                                                  |
| **Top referrers** | Ranked list of referrer sources by session count. Direct traffic (no referrer) is labeled "Direct".                                 |

### Notes [#notes]

* The **Website** selector is populated automatically from the websites tracked by the connected Umami integration. No manual ID entry is required.
* **Event names** for the Event and Events selectors are fetched from Umami's metrics API based on the past 30 days of activity.
* Active visitor count refreshes every 30 seconds independently of the main data cache.
* All other data is cached for 5 minutes and refreshed in the background by a cron job.

# Uptime Kuma (/docs/widgets/uptime-kuma)

Displays monitor uptime statistics, average uptime percentage, and service status counts.

Categories: Monitoring

This widget displays uptime statistics from your Uptime Kuma status page, including a visual uptime ring, average uptime percentage, and per-status monitor counts. Compact mode shows every configured ring and statistic without dropping them based on widget height.

Advanced view always shows the uptime ring, all status totals, and the complete monitor list with source identity, regardless of compact visibility switches.

When multiple Uptime Kuma integrations are selected, monitors from healthy sources remain visible if another source fails. A warning indicator identifies each unavailable integration without exposing private request details. If every selected integration fails, the widget reports an error; if cached data remains visible after a later total failure, a stale-data warning is shown.

### Supported Integrations [#supported-integrations]

[Uptime Kuma](/docs/integrations/uptime-kuma): Uptime Kuma is a self-hosted monitoring tool that tracks the availability of your services and websites. Displays monitors from the configured status page

**Supports advanced view.** See the [advanced keyboard shortcuts](/docs/advanced/keyboard-shortcuts/).

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Configuration [#configuration]

**Show average uptime**: Displays the average uptime percentage across all monitors

Values: yes / no. Default: yes.

**Show uptime ring**: Displays a ring progress indicator for average uptime

Values: yes / no. Default: yes.

**Show total monitors**: Displays the total number of monitors

Values: yes / no. Default: yes.

**Show up count**: Displays the number of monitors that are up

Values: yes / no. Default: yes.

**Show down count**: Displays the number of monitors that are down

Values: yes / no. Default: yes.

**Show paused count**: Displays the number of paused monitors

Values: yes / no. Default: yes.

# Video Stream (/docs/widgets/video)

Embed a video stream or video from a camera or a website.

Categories: Video, Surveillance

Do you run surveilance cameras? Or maybe you have a favourite video?
The video widget enables you to integrate both seamlessly into your dashboard.
This widget uses [video.js](https://videojs.com/) to play HLS or DASH video natively.

DRM content is not yet supported. More info here:
[https://videojs.com/guides/faqs/#q-what-is-videojs](https://videojs.com/guides/faqs/#q-what-is-videojs)

You can use the following URL to test:
[http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4](http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4)

### Screenshots [#screenshots]

<img alt="video big-buck-bunny" src="__img0" />

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Configuration [#configuration]

**Feed URL**: The URL of the video feed or video file

Values: URL to video. Default: -.

**Autoplay**: Autoplay only works when muted because of browser restrictions

Values: yes / no. Default: yes.

**Muted**: Mute the video stream

Values: yes / no. Default: yes.

**Show controls**: Show video controls like play, pause, volume etc.

Values: yes / no. Default: no.

# VPN (/docs/widgets/vpn)

Monitor the connection status, public IP, and provider details of your VPN integrations.

Categories: Network, Security

The VPN widget provides a compact overview of each configured VPN integration. It shows whether the tunnel and DNS
services are up, the currently exposed public IP address, and the VPN provider and protocol being used.

When multiple VPN integrations are attached, the widget renders one card per integration so you can compare their
current status at a glance.

### Screenshots [#screenshots]

<div>
  <img src="singleIntegrationImage.src" alt="VPN widget showing a single integration" width="128 * 3" />
</div>

### Supported Integrations [#supported-integrations]

[Gluetun](/docs/integrations/gluetun): VPN control server integration for Homarr's VPN widget.

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

# Weather (/docs/widgets/weather)

Displays the current weather information of a set location.

Categories: Weather

The Weather widget shows current conditions and a responsive forecast. Select a forecast day for details; advanced view
adds hourly temperature and precipitation charts and the complete seven-day forecast.

**Supports advanced view.** See the [advanced keyboard shortcuts](/docs/advanced/keyboard-shortcuts/).

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Configuration [#configuration]

**Temperature in Fahrenheit**: Display temperature in Fahrenheit instead of Celsius

Values: yes / no. Default: no.

**Disable temperature decimals**: Show temperature as full number

Values: yes / no. Default: no.

**Show current wind speed**: Display current wind speed, only for current weather

Values: yes / no. Default: no.

**Show humidity**: Display humidity in current conditions, hourly details, and daily forecasts

Values: yes / no. Default: yes.

**Animate weather icons**: Animate condition icons unless the operating system requests reduced motion

Values: yes / no. Default: no.

**Use imperial speed units**: Display wind speed in mph instead of km/h

Values: yes / no. Default: no.

**Weather location**: Location for which to display the weather information

Values: Select location through search or longitude/latitude. Default: Paris / 48.85341, 2.3488.

**Date format**: Format for displaying the date in the widget

Values: dddd, MMMM D, dddd, D MMMM, MMM D, D MMM, DD/MM/YYYY, MM/DD/YYYY, DD/MM, MM/DD. Default: dddd, MMMM D.

**Show city**: Display the city name in the widget

Values: yes / no. Default: yes.

**Has forecast**: Display a forecast for the next few days

Values: yes / no. Default: yes.

**Amount of forecast days**: Number of days to show in the forecast

Values: 1-7. Default: 3.

### Data source [#data-source]

Weather and location data come from Open-Meteo. Active weather refreshes every ten minutes; identical location requests
can reuse a server response for five minutes. Failed refreshes keep the last successful data with an error indicator.

Set `NO_EXTERNAL_CONNECTION=true` to disable this and other internet-backed requests. Weather data and the city search
inside the widget configuration are unavailable while it is enabled. Allowlist `https://open-meteo.com` when outbound
access is restricted.

# What's Up Docker (/docs/widgets/whats-up-docker)

Displays how many watched containers have image updates available.

Categories: Health Monitoring

This widget shows two stats from your WUD instance: the total number of monitored containers, and how many of them currently have an image update available. Optionally, it can also list each outdated container with its current and new version, linking to the release notes when WUD provides one.

### Supported Integrations [#supported-integrations]

[What's Up Docker](/docs/integrations/whats-up-docker): What's Up Docker (WUD) watches your Docker containers and reports which ones have newer image versions available. Displays monitored container and available-update counts

**Supports advanced view.** See the [advanced keyboard shortcuts](/docs/advanced/keyboard-shortcuts/).

In advanced view, the widget always shows its title, update ring, monitored-container summary, and the full list of available container updates. The configured horizontal or vertical layout still applies. Visibility options only affect the compact board view. A failed refresh keeps the last WUD snapshot visible with a stale-data warning.

### Adding the widget [#adding-the-widget]

Add the widget from the board's **Add board content** menu in edit mode.

### Configuration [#configuration]

**Show title**: Displays the icon and "What's Up Docker" label above the stats

Values: yes / no. Default: yes.

**Show update ring**: Displays a ring showing the percentage of monitored containers with a pending update

Values: yes / no. Default: yes.

**Layout**: Arrange the two stats side by side (Horizontal) or stacked (Vertical)

Values: Horizontal, Vertical. Default: Horizontal.

**Show container update list**: Lists each monitored container that has an image update available, linking to its release notes when known

Values: yes / no. Default: no.

# Migration of Documentation (/blog/documentation-migration)



We are happy to announce that the documentation of Homarr has been migrated to Docusaurus - An opensource documentation tool.
The documentation has been re-written partly and includes now many animations, guides and additional crucial information.

We are still figuring things out and highly depend on your feedback.

{/* Historical excerpt boundary. */}

## Why we migrated [#why-we-migrated]

The default GitHub Wiki feature is decent - but very confusing to read.
Our possibilites for searching the documentation in the Wiki are highly limited.
Additionally, Users are unable to contribute to the documentation if they have not sufficient permissions.

We could not review any chanegs made to the documentation. This is why we migrated to Docusaurus.

## How you can contribute [#how-you-can-contribute]

The documentation will soon be merged into the master branch of Homarr.
You'll find a `doc/` directory in the root of Homarr.
We'll obviously not include this in our Docker images.
In the future, everyone may modify the documentation by creating a pull request.
After we've reviewed your changes, we'll merge your PR and this documentation will automatically update.

## TL;DR [#tldr]

The documentation on GitHub Wiki will soon disappear. It will be replaced with this Docusaurus-powered website. You'll find much more information here with higher detail and searchability.


# Help us make Homarr multilingual (/blog/translations)





We've been working hard to offer Homarr in many languages. The next update of Homarr will be using [i18next](https://www.i18next.com/) to translate almost any part of your Dashboard.

### We need your help [#we-need-your-help]

<img src="__img0" /> <br />
Yes, we need **YOU**! We want to make Homarr accessible to as many people as possible. Thus, we need to translate all content into many different languages. We need your help for that! [You can help us now to translate Homarr into as many languages as possible](/docs/community/translations).

{/* Historical excerpt boundary. */}

### About global translations / translations per user [#about-global-translations--translations-per-user]

We are aware that many people would like to configure translations globally or configure language per user. Currently, translations are stored in the Cookies, which will expire after some time (currently, it's set to 30 days). We will implement more granular language settings in future versions of Homarr, since it requires major changes to Homarr. Stay tuned! 😎


# We present: Homarr 0.11 - the most complex Homarr version yet! (/blog/2023/01/11/version0.11)









We are *incredibly* proud to serve you Homarr 0.11!
It contains many breaking changes and huge improvements to your favourite dashboard app:

* Integration of Gridstack for much more complex dashboard configuration and drag and drop
* Added icon picker with smart search and automatic icons
* Complete overhaul of the module system
* Added an edit mode for making changes easier
* Form validation for better user experience
* Better security with new built-in credentials system
* Huge design and usability improvements to older components to Homarr
* Better handeling of exceptions and unexpected issues

{/* Historical excerpt boundary. */}

## Complete implementation of highly customizable drag and drop library "Gridstack" [#complete-implementation-of-highly-customizable-drag-and-drop-library-gridstack]

In 0.11, we have replaced our quite limited drag and drop system with Gridstack.
Gridstack enables you to create much more complex and advanced dashboards while keeping everything organized.

<video style="{ maxWidth: &#x22;min(100%, 600px)&#x22;, borderRadius: &#x22;0.5rem&#x22;}" preload="auto">
  <source src="https://user-images.githubusercontent.com/30572287/217098893-5880e7de-13d0-42c5-b505-f7921593396f.mp4" type="video/mp4" />

  <p>
    To view this video please enable JavaScript, and consider upgrading to a
    web browser that

    <a href="https://videojs.com/html5-video-support/" target="_blank">
      supports HTML5 video
    </a>
  </p>
</video>

We've also introduced more advanced categories this time:

<img src="__img0" />

We'll continute to improve this system according to your feedback.

## Modules have been overhauled and renamed to widgets [#modules-have-been-overhauled-and-renamed-to-widgets]

Widgets are now much snappier and have been completely recoded.
This fixes some of the bugs a few users have previously experienced and improves overall customization.

<img src="__img1" />

## Fancy icon picker for speeding up your creation process [#fancy-icon-picker-for-speeding-up-your-creation-process]

We've also added a new fancy icon picker, you can use to get access to any icons much faster.
We will add more icon sources in the future, as we made this icon picker very modular, and we plan to make local icons accessible via this picker very soon.

<img src="__img2" />

## Design and documentation improvements to homarr.dev [#design-and-documentation-improvements-to-homarrdev]

[https://homarr.dev](https://homarr.dev) has been overhauled with better design, updated documentation, more images and better explanations.

## Download Homarr now! [#download-homarr-now]

Homarr is completly free, even for commercial usage!


# We present: Homarr 0.12 - The fastest homarr version ever! (/blog/2023/04/16/version0.12-more-widgets)



## Multiple widgets of the same type [#multiple-widgets-of-the-same-type]

**It's finally here!** You can decorate your dashboard now with as many widgets as you want.
This applies to all widgets, but in the case of the IFrame widget, it enables you to:

* Integrate as many websites as you want
* Integrate monitoring tools like Grafana, Splunk or Elasticsearch
* Integrate your services (for example Sonarr, Radarr and Overseerr) directly into Homarr

## Edit mode password [#edit-mode-password]

We've added a setting to disable editing completely. This will allow you to restrict edit access without password-protection.
use the `EDIT_MODE_PASSWORD` ENV variable to set a password for edit mode.
turn on `DISABLE_EDIT_MODE=TRUE` to disable edit mode on startup.

{/* Historical excerpt boundary. */}

## 😎 Blazingly fast [#-blazingly-fast]

We've implemented a new caching system, that will cache all data in your browser, meaning that Homarr will load within milliseconds, as if it was *powered by rust and blazingly fast* !!!

## Media request widgets (Overseerr & Jellyseerr) [#media-request-widgets-overseerr--jellyseerr]

We've implemented a new widget, that displays a history of all requests.
You can't approve from the widget yet, but we plan to add this in the future.

![image](https://user-images.githubusercontent.com/30572287/231829411-f61f03e9-79a0-45fc-9a87-94d69ea3ea84.png)

## Multiple RSS feeds [#multiple-rss-feeds]

You can now consume multiple RSS feeds at the same time:

![image](https://user-images.githubusercontent.com/30572287/231829886-69133a84-3ae7-4fa3-a6d2-c582f4cc9eea.png)

## Tab refresh / close confirmation [#tab-refresh--close-confirmation]

Since some have lost their changes, by refreshing the page in the edit mode. We've added a popup that will ask you to confirm you want to reload the page :

![image](https://user-images.githubusercontent.com/30572287/231823776-9cbb12d4-3cb3-422e-b2e8-f9917bb3f8cc.png)

## Environment variable for default theme [#environment-variable-for-default-theme]

You can now set the default color scheme using environment variables:

`DEFAULT_COLOR_SCHEME` = `[dark, light]`

## Global error catching for widgets [#global-error-catching-for-widgets]

Previously, widgets were able to crash your entire dashboard and just a blank page would be displayed.
Now, users will still be able to use their dashboard and an information message will be displayed instead.

## Migration to Mantine V6 [#migration-to-mantine-v6]

We've migrated Mantine to version 6. This will bring some upstream changes for responsiveness and usability.

## Fix width and height in the calendar [#fix-width-and-height-in-the-calendar]

In 0.11.5 and previous versions, the calendar scaled poorly if the widget was resized.
Now, the calendar will fill out the entire available space and scale nicely with your dashboard.



## Performance improvements [#performance-improvements]

We now use several methods to improve performance and reduce network requests.
Homarr will load now within milliseconds and cache data in your browser.

## Docker Socket via TCP [#docker-socket-via-tcp]

Previously, it was not possible to mount sockets via TCP (eg. `tcp://traefik-docker-socket-proxy:2375`).
Now, you can use the following environment variables to configure this:

* `DOCKER_HOST`
* `DOCKER_PORT`

**Full Changelog**: [https://github.com/ajnart/homarr/compare/v0.11.5...v0.12.0](https://github.com/ajnart/homarr/compare/v0.11.5...v0.12.0)


# Authentication in Homarr - 0.14 is here! (/blog/2023/11/10/authentication)



One of the most requested features ever has arrived.
We worked for months to prepare Homarr for this update and we're happy that we can finally
provide you a viable solution today.

## Highlights at a glance [#highlights-at-a-glance]

* \:rocket: Completly overhauled authentication system with user management
* \:sparkles: Improved UI for boards (renamed dashboards to boards).
* \:computer: Server side preferences -> Dark mode and language are not synced accross all your devices
* \:link: Invitation links to easily onboard new users
* \:busts\_in\_silhouette: Overhauled board management with easy control if anonymous users can view your board
* \:brain:  AI assistant on the documentation to answer your questions: [https://homarr.dev/](https://homarr.dev/)
* 📝 Overhauled notepad widget with a complex graphical editor that enables easy editing right from your browser.
* \:globe\_with\_meridians:  Live Translation on Crowdin that enable you to directly translate using images to see what exactly you're translating

{/* Historical excerpt boundary. */}

## Breaking changes [#breaking-changes]

* Removed `PASSWORD` environment variable
* Removed `DISABLE_EDIT_MODE` environment variable
* Removed `EDIT_MODE_PASSWORD` environment variable
* Added mounting point `/data` for your database
* Require at least one administrator account on your instance. An onboarding process will automatically set this up.
* We've added analytics to the documentation and Homarr itself. We use [Umami Analytics](https://umami.is/) which collects anonymous data exclusively and protects your personal data rights. You can disable this using the environment variable `DISABLE_ANALYTICS`.

## Changes in detail [#changes-in-detail]

### Management pages [#management-pages]

![image](https://github.com/ajnart/homarr/assets/30572287/b325eb92-57a6-4b07-a281-f10f7471642e&#x29;
One of the most requested features ever has been &#x2A;**authentication***. We've completely *removed* the `PASSWORD`, `DISABLE_EDIT_MODE` and `EDIT_MODE_PASSWORD` and replaced it by [a secure authentication system](https://next-auth.js.org/) that enables you to manage multiple users easily. We will allow for more detailed permission and user management soon. LDAP and OIDC integrations are currently also in progress and will arrive in a future version.

### New dashboard layout [#new-dashboard-layout]

![image](https://github.com/ajnart/homarr/assets/30572287/3396da13-816a-434f-a4c1-0efc7f86154c)

We've updated the dashboard user interface slightly to an updated design.

### Server side preferences page [#server-side-preferences-page]

![image](https://github.com/ajnart/homarr/assets/30572287/2c1f4dbe-7aa7-4c56-aaa3-d6c49e2beeec)

Previously, preferences were stored per dashboard and applied to all users.
In this release, we moved this page to a separate link and store this on the server.
This means that regardless what device your on - your preferences will stay the same when you're logged in.

### Invitations for new users [#invitations-for-new-users]

![image](https://github.com/ajnart/homarr/assets/30572287/a929b345-c014-48fb-aef9-ea2c3c581376)

Tired of creating user accounts by yourself? With the new "invites" feature you can invite new users by simply sending them a link.
This link is valid only once and must have an expiration date - more info on that in our documentation.

Additionally, you can deny users, that are not logged into an account, to access your board with a simple toggle:

![image](https://github.com/ajnart/homarr/assets/30572287/aa3ff3fb-66fc-4f88-93fb-b2dd819599a8)

### New "boards" page [#new-boards-page]

Previously, dashboards were managed in an ugly and hard to control popup.
We've moved this now to the new management pages as well and it's now much easier to control:

![image](https://github.com/ajnart/homarr/assets/30572287/2b24222e-da33-45eb-a54f-89a33a21881d)

### Read-only for non-administrators and guests [#read-only-for-non-administrators-and-guests]

Yes, managing access to your dashboard is now much easier!
Guests and non-administrators cannot edit your dashboard in any way (edit is hidden):

![image](https://github.com/ajnart/homarr/assets/30572287/01c48beb-5453-4626-ac4d-f8d7177e999b)

This is not an definite solution and will be significantly improved in an upcoming update.

***

We are aware that this update has many breaking changes and may confuse some users.
For that reason, we updated our documentation and will enhance it further within the next few weeks.
We've also added this small button at the bottom of the page were you can ask **your questions** to an AI assistant:

![image](https://github.com/ajnart/homarr/assets/30572287/a56f721a-d022-42ad-813a-d85c89462a8c)


# Updated documentation with better organization & design (/blog/2023/12/22/updated-documentation)



We'd like to let you know that we've updated our documentation and reorganized the pages.
This means, that some links may no longer be valid - we apologise if this causes any inconvenience for you.

{/* Historical excerpt boundary. */}

A few highlights include:

* Updated navigation bar for much easier navigation
* Improvements to the landing page
* Completely revamped [about us page.](/about-us)
* Bug fixes for image zoom
* Added documentation for management pages and [new CLI tool](/docs/advanced/command-line/password-recovery/)

Please [let us know](/docs/community/get-in-touch) is something is not working as expected.


# Homarr 1.0 - complete rewrite of all systems (/blog/2024/09/23/version-1.0)



We proudly present to you - Homarr `1.0`.
We have started work on this new version back in 2023 and have worked tirelessly for months on this brand-new dashboard.

This isn't our usual update. `1.0` doesn't use the same code from previous versions, but has been written from the ground up.
Therefore, this version contains an unusual amount of breaking changes.
This will be a one time occurrence and version > `1.0` will have less breaking changes.
This time more important than every; **read the breaking changes** list and **create a backup** before updating.
Some third party installation methods may take multiple days or weeks to update to the new version.

## Changes at a glance [#changes-at-a-glance]

* **Asynchronous integrations system**: In versions prior to `1.0`, we fetched data upon each request synchronously.
  This means that the user had to wait for the requests to finish so any data would appear.
  A page reload will trigger another request - and worse, this will happen for every user accessing your dashboard.
  In `1.0`, we have implemented a new system that gets rid of this system and scales linearly.
  It will fetch data in background, even if you are not on the page.
* **Permissions system**: You can now use detailed permissions to allow or prohibit users from certain actions.
  For easier management, you can organize users into groups and manage them all at the same time.
* **Integration testing**: Starting from `1.0`, we will require you to test the integration before you can use it.
  This guarantees that you've configured your integration correctly and helps you find errors faster.
* **Re-imagined widgets**: All widgets have been rewritten & improved. They offer much better performance,
  reliability and scalability compared to \< `1.0`.
* **Improved performance**: We have upgraded the underlying framework of Homarr and take advantage
  of an in-memory message bus and websockets to deliver data near realtime to you.

{/* Historical excerpt boundary. */}

## Breaking changes [#breaking-changes]

<CalloutContainer type="warning">
  <CalloutDescription>
    Please consult the breaking changes list & upgrade guide if you used third-party installation methods.
  </CalloutDescription>
</CalloutContainer>

* Docker Image
  * Removed support for `arm/v7` -> upgrade to newer architectures as an alternative
  * Renamed image from `ghcr.io/ajnart/homarr` to `ghcr.io/homarr-labs/homarr`. We now use semantic versioning for our release numbers.
* Environment Variables
  * New required env variable `SECRET_ENCRYPTION_KEY` used for encryption of secrets in the database
  * Removed `DISABLE_ANALYTICS`, can now be configured via UI
  * Renamed `AUTH_PROVIDER` to `AUTH_PROVIDERS`
  * Renamed `DATABASE_URL` to `DB_URL` and made it optional conditionally. If `DB_HOST` is set, this is optional - otherwise it's required.
  * Changed `DOCKER_HOST` to two new variables for hostnames (`DOCKER_HOSTNAMES`) and ports (`DOCKER_PORTS`). This allows for multiple docker integrations to be configured.
  * `AUTH_LOGOUT_REDIRECT_URL` must now be a valid Url
  * Increased minimum length of `AUTH_OIDC_CLIENT_ID` to 1
  * Increased minimum length of `AUTH_OIDC_CLIENT_SECRET` to 1
  * Removed `AUTH_OIDC_TIMEOUT`
  * Removed `AUTH_LDAP_ADMIN_GROUP`, `AUTH_LDAP_OWNER_GROUP`, `AUTH_OIDC_ADMIN_GROUP` and `AUTH_OIDC_OWNER_GROUP` -> groups are now managed without manual env binding
  * `CI` will now also trigger an env validation skip like `SKIP_ENV_VALIDATION`
* Mounts
  * Removed `/app/data/configs` -> JSON configs have been removed in favour of relation databases
  * Removed `/app/public/icons` -> Images can not be uploaded via the [media management](/docs/management/media/) in the UI
  * Moved `/data` to `/appdata` and restructured contents (not backwards compatible!) -> Create a backup before migration of the entire directory to copy data to new Homarr
* Widgets:
  * Calendar:
    * Removed option `Use Sonarr v4 API`
    * Removed option `Use Sonarr v5 API`
    * Removed option `Font Size`
    * Removed option `Hide week days`
  * Download speed: We have removed this widget in favour of the brand new download widget which will also display this data.
  * Dash. widget: We have removed this widget in favour of the System Health Widget. It will also display all data and some more than the old widget.
* Database:
  * Changed schema of the database to a completely new schema. They are not backwards compatible. Please export the data from old Homarr in the UI and import it in `1.0`
  * Removed all usage of JSON files to store data. Import JSON files in Homarr `1.0` to import your dashboards.
  * Removed `schemaVersion` from JSON and use the drizzle migrations to keep track of schema versions and take care of migrations.
* Web Server:
  * Added an internal Nginx proxy to forward requests to two servers inside the container for technical reasons.
    This could impact edge cases with iframes, cookies and custom setups.
* Dependencies
  * We now depend on [Redis](https://redis.io/) as a real time messaging bus
* Development (relevant for contributors):
  * Migrated to [pnpm](https://pnpm.io/)
  * Migrated to a mono-repository
  * All source code has been migrated to the [homarr-labs GitHub organization](https://github.com/homarr-labs)
* Platform specific breaking changes:
  * TrueNAS
    * The TrueCharts app chart is permanently deprecated and no longer maintained / supported. Please migrate to Electric Eel or a different Kubernetes platform.
  * Unraid
    * The Homarr app must be reinstalled. The existing directories on your disk are not compatible with Homarr 1.0. Export your old data in \< ` 1.0` and install using different file system locations.
  * Kubernetes
    * The official Helm chart has moved from [https://github.com/oben01/charts](https://github.com/oben01/charts) to [https://github.com/homarr-labs/charts](https://github.com/homarr-labs/charts)


# Open Beta 1.0 (/blog/2024/12/17/open-beta-1.0)



We are proud to announce the open beta of Homarr 1.0. This is a major milestone for us and we are excited to share it with you.
The open beta allows us to polish the last rough edges and gather feedback from you.
We are looking forward to your feedback and hope you enjoy the new features.
Let us know throgh discord or a [github issues](https://github.com/homarr-labs/homarr/issues/new/choose) if you encounter any issues.

{/* Historical excerpt boundary. */}

## How to use the beta with docker [#how-to-use-the-beta-with-docker]

To use the beta with docker you can use the following docker-compose.yml configuration:

```yml title="docker-compose.yml"
#---------------------------------------------------------------------#
#     Homarr - A simple, yet powerful dashboard for your server.      #
#---------------------------------------------------------------------#
services:
  homarr:
    container_name: homarr
    image: ghcr.io/homarr-labs/homarr:beta
    restart: unless-stopped
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock # Optional, only if you want docker integration
      - ./homarr/appdata:/appdata
    environment:
      - SECRET_ENCRYPTION_KEY=your_64_character_hex_string # <--- can be generated with `openssl rand -hex 32`
    ports:
      - '7575:7575'
```

Then, run `docker compose up -d` in the same directory. This will start the Homarr container in the background.
Please note that the mounts have changed and it's not backwards compatible with versions before 1.0.0-beta.1.
You can find a list of all breaking changes [here](/blog/2024/09/23/version-1.0)


# Migrate from 0.15.10+ to 1.0.0 (/blog/2025/01/19/migration-guide-1.0)





In this guide, we will show you how to migrate from Homarr 0.15.10+ to 1.0.0.
If you are still on a version before 0.15.10, please update to 0.15.10 where we introduced the migration export page.

{/* Historical excerpt boundary. */}

## Preserve your old installation [#preserve-your-old-installation]

Homarr 1.0 is a complete rewrite and cannot reuse the old Docker mounts. Keep the 0.15 installation and its data intact while you build the replacement. The historical `Management` > `Tools` > `Migrate to 1.0` export can still be kept as a record, but current Homarr releases cannot import that ZIP or its secret key.

Plan to recreate your apps, integrations, and boards manually in the new installation. A SQLite database backup can be restored from the onboarding welcome screen only when it was created by a compatible current Homarr release; it is not a conversion path for a 0.15 database.

<img alt="Export page" src="__img0" />

## Create a parallel installation [#create-a-parallel-installation]

We highly recommend to create a parallel installation of Homarr 1.0.0.
So if something with for example the import does not quite work, the data in the old installation is still available.
To do this you can follow the appropriate [installation guide](/docs/getting-started) for your system.
Please note that if you are using docker you need to specify a diffrent external port for the new installation as the old one had the same port.
So in your compose file the ports would be `7576:7575` instead of `7575:7575`.

## Import your data [#import-your-data]

<CalloutContainer type="warning">
  <CalloutTitle>
    Legacy guide
  </CalloutTitle>

  <CalloutDescription>
    The pre-1.0 ZIP importer is no longer included in current Homarr releases. Keep the old installation available until you have manually verified the replacement. Compatible SQLite backups from current releases can still be restored from the onboarding welcome screen.
  </CalloutDescription>
</CalloutContainer>

## Remove the old installation [#remove-the-old-installation]

After you are happy with the new installation and everything is working as expected you can remove the old installation.
Please make sure to backup the data before you remove the old installation.
Also once the port 7575 is free again you can change the port mapping of the new installation to `7575:7575` if you want to.


# How to use Argus with Homarr (/blog/2025/08/02/using-argus)







In `v1.32.0` we added the endpoint `/api/info` which returns the current version of Homarr and can therefore be used in Argus to watch for updates.
This guide will show you how to set up a user with apiKey to access the endpoint without providing admin access through it.

{/* Historical excerpt boundary. */}

<img alt="Argus" src="__img0" />

Currently an apiKey has the same permissions as the user who created it, however you can only create an apiKey with admin permissions.
This means we have to do some extra steps to create a user with only the permissions we need for Argus.

## Create a group [#create-a-group]

In a first step we have to create a group which will allow us to restrict the permissions of the user we will create later.

1. Go to `Management` > `Users` > `Groups`
2. Click on `Create group`
3. Enter a name for the group, e.g. `Argus`
4. Click on `Create group`
5. Click on the newly created group to edit it
6. In the `Permissions` tab, select the admin permission and save the changes

## Create a user [#create-a-user]

Now we can create a user which will be used by Argus to access the `/api/info` endpoint.

1. Go to `Management` > `Users` > `Manage`
2. Click on `Create new user`
3. Enter a username, e.g. `argus`, click next
4. Enter a password for the user, click next
5. Add previously created group `Argus` to the user, click next
6. Click on next to confirm the user creation

## Create an apiKey [#create-an-apikey]

Now we want to create therefore we have to log in with the user we just created.

1. Log out of Homarr
2. Log in with the user we just created
3. Go to `Management` > `Tools` > `API Keys`
4. Click on `Create API Key`
5. Copy the generated API key and save it somewhere, you will not be able to see it again
6. Logout of Homarr

## Reduce permissions of the user [#reduce-permissions-of-the-user]

Now we can reduce the permissions of the user to only allow access to general authenticated, but not permission restricted endpoints.

1. Log in with your admin user
2. Go to `Management` > `Users` > `Groups`
3. Click on the `Argus` group
4. In the `Permissions` tab, remove all permissions
5. Save the changes

## Configure Argus [#configure-argus]

Now you can configure Argus to use the user and apiKey we created.

<img alt="Argus configuration" src="__img1" />

Replace the `<secret>` with the apiKey you created and the deployed version url with the url of your Homarr instance.


# Homarr 2.0.0 - Workshop, Custom Widgets and a rebuilt board (/blog/2026/09/03/homarr-2.0)





























# Homarr 2.0.0 - Workshop, Custom Widgets and a rebuilt board [#homarr-200---workshop-custom-widgets-and-a-rebuilt-board]

<img alt="Homarr v2 release recap showing Community Workshop, how to make any widget with Custom Widgets, Homarr Assistant, the new drag-and-drop system, advanced widgets, and 32 new integrations" src="__img0" />

First, thank you.

Many of you used the v2 demo when it was still rough, found bugs and came back to test the next build. Others translated Homarr, answered questions, contributed code or simply kept using it. We would not be shipping this without you.

We are also planning a small batch of **free, limited-edition Homarr swag** for Workshop contributors and a few randomly picked community members. It is not for sale and it is not for profit. No Homarr merch empire, sorry.

If you're thinking, “I ain't reading all dat,” don't worry—we made a video for your short attention span. No Subway Surfers gameplay, though.

<figure style="{ margin: &#x22;1.5rem 0&#x22; }">
  <video preload="metadata" poster="require(&#x22;./img/homarr-v2-overview.webp&#x22;).default.src" width="1920" height="1080" style="{ width: &#x22;100%&#x22;, height: &#x22;auto&#x22;, borderRadius: &#x22;0.5rem&#x22; }" aria-label="Homarr 2.0 feature overview.">
    <source src="/media/homarr-2.0/homarr-v2-overview.mp4" type="video/mp4" />
  </video>

  <figcaption>
    Homarr 2.0 in under two minutes.
  </figcaption>
</figure>

Homarr 2.0 builds on the dashboard you already use. Here is what changed.

<img alt="A populated Homarr 2.0 dashboard with compact widgets, an Assistant, and an application rail" src="__img1" />

{/* Historical excerpt boundary. */}

SQLite and PostgreSQL users can update their Homarr image as usual; database migrations run automatically at startup. **MySQL users must convert before upgrading**, as explained below. Workshop uses the production service by default, with no preview URL configuration required.

## Database support in v2 [#database-support-in-v2]

Homarr v2 drops MySQL support and keeps SQLite (the default) and PostgreSQL. Supporting fewer database engines lets us focus migration testing on those two. Existing MySQL installations have a standalone conversion script to move their data to SQLite before upgrading.

<details>
  <summary>
    Using MySQL? How to migrate
  </summary>

  1. Update to the latest stable v1 release, then back up your MySQL database, appdata, and encryption key.
  2. Stop Homarr and run the MySQL-to-SQLite converter. It checks the copied data and leaves MySQL unchanged.
  3. Start v2 with the converted database, your existing appdata, and the &#x2A;*same `SECRET_ENCRYPTION_KEY`**.

  The converter is verified against the v1.77.1 schema and rejects unknown schemas. See the [migration guide](/docs/advanced/mysql-to-sqlite) for commands, supported inputs, and rollback instructions.
</details>

## Custom Widgets v2 and Workshop [#custom-widgets-v2-and-workshop]

### Build almost any widget [#build-almost-any-widget]

**This is the big one.** We think it is the most important Homarr update we have made.

Custom Widgets v2 lets you build widgets from JSX, API requests, actions and typed settings. Write one yourself or describe it to Assistant, then test it in the workbench. We think this is enough to make almost any dashboard widget—even that oddly specific component only three people need. Those three people no longer have to wait for us.

This was partly inspired by [Google's upcoming Create My Widget feature](https://blog.google/products-and-platforms/platforms/android/gemini-intelligence/): describe a widget in normal language and let AI make it. Coding knowledge is optional. Knowing what the API does still helps; AI has not fixed bad documentation. Yet.

<img alt="The Custom Widget workbench displaying a Sonarr response through a saved integration" src="__img2" />

<img alt="A working Pokédex Custom Widget on a local Homarr dashboard, with a search field, Pokémon artwork and stats" src="__img3" />

A `homarr-custom-widget-v2` definition can use several fixed-origin API sources. Credentials are encrypted separately and stay out of exports and Workshop submissions. Actions support `GET`, `POST`, `PUT`, `PATCH` and `DELETE`; requests have host checks, timeouts, size limits, permissions and rate limits.

### Share widgets and Custom CSS [#share-widgets-and-custom-css]

**Workshop is the other half.** Publish and install Custom Widgets, then update, vote on, comment on and report submissions. Workshop is not only for widgets: you can share your **Custom CSS** there too. Deployment URLs and credentials stay on your Homarr instance.

<img alt="The Community Workshop catalog inside Custom Widget management" src="__img4" />

<CalloutContainer type="warning">
  <CalloutTitle>
    Workshop is moderated
  </CalloutTitle>

  <CalloutDescription>
    AI makes widgets easy to produce. It does not make the first thing it coughs up worth publishing. &#x2A;*Do not dump untested slop into Workshop.** Test it, add a useful screenshot and explain its setup. Workshop is moderated.
  </CalloutDescription>
</CalloutContainer>

### Docusaurus + PocketBase for the docs and Workshop [#docusaurus--pocketbase-for-the-docs-and-workshop]

Our docs and Workshop now share a Docusaurus + PocketBase deployment. Docusaurus compiles the website into static HTML, CSS and JavaScript at build time. A Go service built on PocketBase serves those files and provides the Workshop backend for accounts, submissions, votes, comments and moderation.

The production image packages both together under the same origin. Node.js is used to build the website, but is not needed to serve it in production. Workshop's persistent data lives separately in `/pb_data`, so replacing the image does not replace community content. This is the website and Workshop architecture; your self-hosted Homarr dashboard remains a separate application.

### The ultimate Homarr update [#the-ultimate-homarr-update]

We have called this the &#x2A;*"ultimate Homarr update"**. Not because work stops, but because every new service or widget idea no longer needs a full Homarr release; the community can build and share it instead.

## Board editing, rebuilt [#board-editing-rebuilt]

### Drag and drop [#drag-and-drop]

We threw out the old drag-and-drop system and rebuilt it on [`dnd-kit`](https://dndkit.com/). Moves and eight-direction resizes are transactional: Homarr previews the result, checks collisions and only saves a valid layout. Bad moves roll back instead of wrecking the board. In short: less fighting with your own dashboard.

<figure style="{ margin: &#x22;1.5rem 0&#x22; }">
  <video preload="none" poster="require(&#x22;./img/drag-and-resize-poster.webp&#x22;).default.src" width="1770" height="706" style="{ width: &#x22;100%&#x22;, height: &#x22;auto&#x22;, borderRadius: &#x22;0.5rem&#x22; }" aria-label="Move and resize a tile with the new drag-and-drop system.">
    <source src="/media/homarr-2.0/drag-and-resize.mp4" type="video/mp4" />

    <track kind="captions" src="/media/homarr-2.0/drag-and-resize.vtt" srcLang="en" label="English" />
  </video>

  <figcaption>
    Move and resize a tile with the new drag-and-drop system.
  </figcaption>
</figure>

### Goodbye Groups and sections, bonjour Containers [#goodbye-groups-and-sections-bonjour-containers]

Groups and dynamic sections did nearly the same job, so **Containers replace both**. They hold apps, widgets and other Containers. Move a Container with its contents, or collapse it when you need the space.

<figure style="{ margin: &#x22;1.5rem 0&#x22; }">
  <video preload="none" poster="require(&#x22;./img/containers-poster.webp&#x22;).default.src" width="1770" height="716" style="{ width: &#x22;100%&#x22;, height: &#x22;auto&#x22;, borderRadius: &#x22;0.5rem&#x22; }" aria-label="Move, collapse and reopen a Container without rearranging its contents.">
    <source src="/media/homarr-2.0/containers.mp4" type="video/mp4" />

    <track kind="captions" src="/media/homarr-2.0/containers.vtt" srcLang="en" label="English" />
  </video>

  <figcaption>
    Move, collapse and reopen a Container without rearranging its contents.
  </figcaption>
</figure>

Hold <kbd>Ctrl</kbd> or <kbd>Command</kbd> while clicking to select several items, then use **Move to** to put them in a Container.

<figure style="{ margin: &#x22;1.5rem 0&#x22; }">
  <video preload="none" poster="require(&#x22;./img/multi-select-poster.webp&#x22;).default.src" width="1770" height="716" style="{ width: &#x22;100%&#x22;, height: &#x22;auto&#x22;, borderRadius: &#x22;0.5rem&#x22; }" aria-label="Command-click two apps, then move them into the same Container.">
    <source src="/media/homarr-2.0/multi-select.mp4" type="video/mp4" />

    <track kind="captions" src="/media/homarr-2.0/multi-select.vtt" srcLang="en" label="English" />
  </video>

  <figcaption>
    Command-click two apps, then move them into the same Container.
  </figcaption>
</figure>

### One board, several layouts [#one-board-several-layouts]

Boards also have Base and Mobile layouts, plus optional breakpoints. **Reset from Base** creates a Mobile starting point without duplicating the board.

### Fixed sidebars [#fixed-sidebars]

Keep app shortcuts or widgets in a sidebar while the main board scrolls. Enable a sidebar and choose its width in board settings.

<figure style="{ margin: &#x22;1.5rem 0&#x22; }">
  <video preload="none" poster="require(&#x22;./img/sidebar-settings-poster.webp&#x22;).default.src" width="1600" height="700" style="{ width: &#x22;100%&#x22;, height: &#x22;auto&#x22;, borderRadius: &#x22;0.5rem&#x22; }" aria-label="Enable the right sidebar and set its width.">
    <source src="/media/homarr-2.0/sidebar-settings.mp4" type="video/mp4" />

    <track kind="captions" src="/media/homarr-2.0/sidebar-settings.vtt" srcLang="en" label="English" />
  </video>

  <figcaption>
    Enable the right sidebar and set its width.
  </figcaption>
</figure>

<figure style="{ margin: &#x22;1.5rem 0&#x22; }">
  <video preload="none" poster="require(&#x22;./img/fixed-sidebar-poster.webp&#x22;).default.src" width="1580" height="640" style="{ width: &#x22;100%&#x22;, height: &#x22;auto&#x22;, borderRadius: &#x22;0.5rem&#x22; }" aria-label="The board scrolls; the app shortcuts stay in place.">
    <source src="/media/homarr-2.0/fixed-sidebar.mp4" type="video/mp4" />

    <track kind="captions" src="/media/homarr-2.0/fixed-sidebar.vtt" srcLang="en" label="English" />
  </video>

  <figcaption>
    The board scrolls; the app shortcuts stay in place.
  </figcaption>
</figure>

## Homarr Assistant [#homarr-assistant]

### Work with live Homarr data [#work-with-live-homarr-data]

Assistant reads live Homarr data and has tools for boards, apps, integrations, widgets, Docker and supported services. It can answer questions, make approved changes and build Custom Widgets. It follows your permissions: reads can run automatically, while changes require approval by default.

<img alt="The Homarr Assistant expanded over a live dashboard with health, exploration, media, and board actions" src="__img5" />

Open it with <kbd>Shift</kbd> + <kbd>A</kbd>. <kbd>Cmd</kbd>/<kbd>Ctrl</kbd> + <kbd>/</kbd> searches it.

### The Homarr provider [#the-homarr-provider]

<CalloutContainer type="info">
  <CalloutDescription>
    Assistant ships with a &#x2A;*"Homarr provider"**. It is free, will never offer paid plans, and is paid for by [Ajnart](https://github.com/ajnart) using the ad revenue from this website.

    It only uses zero-data-retention (ZDR) providers. [The provider is open source](https://github.com/homarr-labs/homarr/blob/release/v2/apps/workshop/homarr_provider.go), and neither prompts nor responses are logged. We are not selling your data. Pinky promise.
  </CalloutDescription>
</CalloutContainer>

### External assistants through MCP [#external-assistants-through-mcp]

External assistants can use the same permission-checked tools through `/api/mcp`, with an API key or OAuth 2.1 with PKCE.

## The rest (there is a lot) [#the-rest-there-is-a-lot]

### Brand-new onboarding [#brand-new-onboarding]

A six-stage setup studio handles the first admin, core settings, Docker discovery, apps, integrations and the first board.

<img alt="The Homarr 2.0 setup studio on its Essentials step, with all six setup stages shown" src="__img6" />

### Board switcher [#board-switcher]

Boards now live in a searchable gallery with keyboard navigation. Open it from the header or press <kbd>Shift</kbd> + <kbd>C</kbd>.

<figure style="{ margin: &#x22;1.5rem 0&#x22; }">
  <video preload="none" poster="require(&#x22;./img/board-switcher-poster.webp&#x22;).default.src" width="1920" height="778" style="{ width: &#x22;100%&#x22;, height: &#x22;auto&#x22;, borderRadius: &#x22;0.5rem&#x22; }" aria-label="Open the switcher, filter by name and press Enter to open a board.">
    <source src="/media/homarr-2.0/board-switcher.mp4" type="video/mp4" />

    <track kind="captions" src="/media/homarr-2.0/board-switcher.vtt" srcLang="en" label="English" />
  </video>

  <figcaption>
    Open the switcher, filter by name and press Enter to open a board.
  </figcaption>
</figure>

### Command menu and keybinds [#command-menu-and-keybinds]

<kbd>Cmd</kbd>/<kbd>Ctrl</kbd> + <kbd>K</kbd> finds resources, pages, settings, users, groups and commands. More
keybinds cover Assistant, editing, selection and advanced widget views.

### Customizable header [#customizable-header]

Add direct links to boards and shortcuts to features such as search, Docker and settings. Put them on the left, center or right, and change their order.

<img alt="A customized header with a board link on the left, board switching and search in the center, and Docker, theme and settings on the right" src="__img7" />

<details>
  <summary>
    Arrange it in the Header studio
  </summary>

    <img alt="The Header studio showing left, center, and right zones plus available controls" src="__img8" />
</details>

### Instance branding [#instance-branding]

Change the name, logo, favicon, colors, corner styles and login page. Global CSS applies instance-wide; board CSS can override it. Only give that power to admins you trust. CSS remains CSS.

<img alt="Instance branding controls for application identity, palette, corner style, and global CSS" src="__img9" />

### Widgets [#widgets]

Add content without leaving the board. Settings have live previews. Weather and Clock were redesigned; Air Quality, Countdown and Timer are new.

<img alt="The Air Quality widget showing the current AQI and a location trend" src="__img10" />

<img alt="The Countdown widget showing time remaining until an event" src="__img11" />

<figure style="{ margin: &#x22;1.5rem 0&#x22; }">
  <video preload="none" poster="require(&#x22;./img/timer-poster.webp&#x22;).default.src" width="950" height="500" style="{ width: &#x22;100%&#x22;, height: &#x22;auto&#x22;, borderRadius: &#x22;0.5rem&#x22; }" aria-label="Start, pause and reset Timer without leaving the board.">
    <source src="/media/homarr-2.0/timer.mp4" type="video/mp4" />

    <track kind="captions" src="/media/homarr-2.0/timer.vtt" srcLang="en" label="English" />
  </video>

  <figcaption>
    Start, pause and reset Timer without leaving the board.
  </figcaption>
</figure>

Supported widgets also have **advanced views**. Hover over a widget and hold <kbd>Shift</kbd> for **one second** to open one.

<figure style="{ margin: &#x22;1.5rem 0&#x22; }">
  <video preload="none" poster="require(&#x22;./img/advanced-widget-poster.webp&#x22;).default.src" width="864" height="600" style="{ width: &#x22;100%&#x22;, height: &#x22;auto&#x22;, borderRadius: &#x22;0.5rem&#x22; }" aria-label="Hold Shift for one second over Downloads to open its advanced view.">
    <source src="/media/homarr-2.0/advanced-widget.mp4" type="video/mp4" />

    <track kind="captions" src="/media/homarr-2.0/advanced-widget.vtt" srcLang="en" label="English" />
  </video>

  <figcaption>
    Hold Shift for one second over Downloads to open its advanced view.
  </figcaption>
</figure>

### Statistics and 31 new integrations [#statistics-and-31-new-integrations]

The new [Statistics widget](/docs/widgets/stats) combines fields from different services in one grid: Sonarr shows beside Paperless-ngx documents, Navidrome songs or Homebox inventory. Choose cards, compact rows or tables grouped by integration. Click a metric for related fields, or open **Advanced view** from the context menu to see every available field from the selected sources.

Add your services in **Management → Integrations**, then select them and their metrics in Statistics settings. Labels, order and abbreviated values are configurable; the widget's local view controls let you try a different arrangement without changing the shared board. The demo board includes mocked cards, rows and tables.

This release adds:

* **Media and libraries:** Autobrr, FileFlows, Jackett, Jellystat, Komga, Maintainerr, RomM, Stash, Tube Archivist, Unmanic, xTeVe and Your Spotify.
* **Monitoring and networking:** Caddy, Changedetection.io, Frigate, Gatus, Healthchecks, NetAlertX, Netdata, Prometheus, Scrutiny and Syncthing Relay.
* **Collections and home:** Homebox, Karakeep, Linkwarden, Mealie, Miniflux, Plant-it, Spoolman, Tandoor and Trilium.

The [integration and metric reference](/docs/widgets/stats#new-service-integrations-in-v2) links to each setup guide. Jackett also joins the Indexer Manager widget. Existing supported integrations reuse their Homarr clients.

Statistics keeps saved snapshots until you refresh them. Multiple metrics from one source share retrieval, and dashboard loads read cached data instead of refetching every service. **Right-click → Refresh** retrieves new source data and shows the oldest saved snapshot's age; unsuccessful refreshes keep the previous values. These are on-demand snapshots, not live monitoring.

### Docker and Podman [#docker-and-podman]

`DOCKER_ENDPOINTS` supports several hosts. Assisted setup and container labels can create apps, integrations, Containers, widgets and health checks.

<img alt="Assisted Docker setup listing discovered services that can become apps or integrations" src="__img12" />

Homepage-compatible labels work too.

### Permissions [#permissions]

Groups use a new Viewer, Editor and Admin matrix. The API, Assistant and MCP follow the same rules. LDAP can create users on first sign-in; OIDC can link verified accounts and synchronize groups.

### Performance [#performance]

Board startup work runs in parallel, heavy screens load when opened, and identical integration requests share work instead of doing it twice.

## Deploy on Hostinger [#deploy-on-hostinger]

[Hostinger now offers a one-click Docker deployment of Homarr](https://www.hostinger.com/applications/homarr) on its VPS plans. They maintain the deployment template, and you manage the resulting VPS and Homarr instance. Our new [Hostinger installation guide](/docs/getting-started/installation/hostinger) walks through deployment and first setup.

We deploy the Homarr Workshop and the compiled Docusaurus docs on the VPS provided by Hostinger. Thank you for hosting this part of Homarr's infrastructure. We have an affiliate partnership as well: purchases through a referral link may support Homarr. For now, the links above go directly to their Homarr application page.

## Compatibility notes [#compatibility-notes]

* Legacy Custom JSX definitions enter a migration state. Homarr keeps encrypted credentials and an archived copy until the v2 definition validates.
* Mobile layouts place rail content in the main flow instead of displaying rails.
* Assistant and MCP do not bypass permissions.

## Links [#links]

* Try the [live demo](https://demo.homarr.dev/).
* See [installation and update instructions](/docs/getting-started/installation/docker).
* Browse [Workshop](https://homarr.dev/workshop).
* Read the guides for [Boards](/docs/management/boards), [Custom Widgets](/docs/management/custom-widgets), [Assistant](/docs/management/assistant), [MCP](/docs/management/mcp) and [Docker labels](/docs/integrations/docker-labels).