← WebMCP Directory

Tool tree

heroui.com

Developer ToolsTools verified
Website
Beautiful, accessible React UI components built on React Aria and Tailwind CSS v4. The modern alternative to MUI, Chakra UI, and shadcn/ui for building production-ready applications.
Explore capabilities

    page: Every page

    search_heroui_docsAnswer

    Search the official HeroUI React and Native documentation by keyword. Returns page matches and concise relevant excerpts from up to three pages. Use get_heroui_doc when the exact page is already known or more detail is needed.

    View tool JSON
    {
      "name": "search_heroui_docs",
      "kind": "answer",
      "impl": "imperative",
      "description": "Search the official HeroUI React and Native documentation by keyword. Returns page matches and concise relevant excerpts from up to three pages. Use get_heroui_doc when the exact page is already known or more detail is needed.",
      "inputSchema": {
        "additionalProperties": false,
        "properties": {
          "includeContent": {
            "default": true,
            "type": "boolean"
          },
          "limit": {
            "default": 10,
            "maximum": 20,
            "minimum": 1,
            "type": "integer"
          },
          "platform": {
            "default": "all",
            "enum": [
              "all",
              "react",
              "native"
            ],
            "type": "string"
          },
          "query": {
            "description": "Search query, such as button, theming, migration, or native colors.",
            "type": "string"
          }
        },
        "required": [
          "query"
        ],
        "type": "object"
      },
      "page": "/"
    }
    get_heroui_docAnswer

    Retrieve one official HeroUI documentation page as markdown from a same-origin /docs/ path.

    View tool JSON
    {
      "name": "get_heroui_doc",
      "kind": "answer",
      "impl": "imperative",
      "description": "Retrieve one official HeroUI documentation page as markdown from a same-origin /docs/ path.",
      "inputSchema": {
        "additionalProperties": false,
        "properties": {
          "maxCharacters": {
            "default": 40000,
            "maximum": 40000,
            "minimum": 1000,
            "type": "integer"
          },
          "start": {
            "default": 0,
            "minimum": 0,
            "type": "integer"
          },
          "url": {
            "description": "A HeroUI docs path, for example /en/docs/react/components/button or /docs/react/components/button.",
            "type": "string"
          }
        },
        "required": [
          "url"
        ],
        "type": "object"
      },
      "page": "/"
    }
    navigate_herouiAction

    Navigate the current browser tab to a same-origin HeroUI page. Use only when the user asks to open or go to a page.

    View tool JSON
    {
      "name": "navigate_heroui",
      "kind": "act",
      "impl": "imperative",
      "description": "Navigate the current browser tab to a same-origin HeroUI page. Use only when the user asks to open or go to a page.",
      "inputSchema": {
        "additionalProperties": false,
        "properties": {
          "url": {
            "description": "A same-origin HeroUI path, for example /en/docs/react/getting-started.",
            "type": "string"
          }
        },
        "required": [
          "url"
        ],
        "type": "object"
      },
      "page": "/"
    }
    list_heroui_componentsAnswer

    Discover official HeroUI component documentation pages when the exact component is unknown. Returns at most 20 entries.

    View tool JSON
    {
      "name": "list_heroui_components",
      "kind": "answer",
      "impl": "imperative",
      "description": "Discover official HeroUI component documentation pages when the exact component is unknown. Returns at most 20 entries.",
      "inputSchema": {
        "additionalProperties": false,
        "properties": {
          "limit": {
            "default": 20,
            "maximum": 20,
            "minimum": 1,
            "type": "integer"
          },
          "platform": {
            "default": "react",
            "enum": [
              "react",
              "native"
            ],
            "type": "string"
          }
        },
        "type": "object"
      },
      "page": "/"
    }
    get_heroui_themeAnswer

    Read the current HeroUI docs theme preset, theme-builder values, vibrant-palette setting, and light, dark, or system color scheme. Use this before changing a theme when the user asks to inspect or edit it.

    View tool JSON
    {
      "name": "get_heroui_theme",
      "kind": "answer",
      "impl": "imperative",
      "description": "Read the current HeroUI docs theme preset, theme-builder values, vibrant-palette setting, and light, dark, or system color scheme. Use this before changing a theme when the user asks to inspect or edit it.",
      "inputSchema": {
        "additionalProperties": false,
        "properties": {},
        "type": "object"
      },
      "page": "/"
    }
    set_heroui_themeAction

    Change the current browser's HeroUI docs appearance when the user asks to switch or change the theme. For named themes, pass only preset to apply it immediately on the current page (default, sky, lavender, mint, netflix, uber, spotify, coinbase, airbnb, discord, or rabbit). For example, 'change the docs theme to Uber' must call this tool with preset='uber'. Never include custom theme values with a named preset. Custom accent, neutral tint, font, or radius values open the English theme builder and preserve unspecified settings.

    View tool JSON
    {
      "name": "set_heroui_theme",
      "kind": "act",
      "impl": "imperative",
      "description": "Change the current browser's HeroUI docs appearance when the user asks to switch or change the theme. For named themes, pass only preset to apply it immediately on the current page (default, sky, lavender, mint, netflix, uber, spotify, coinbase, airbnb, discord, or rabbit). For example, 'change the docs theme to Uber' must call this tool with preset='uber'. Never include custom theme values with a named preset. Custom accent, neutral tint, font, or radius values open the English theme builder and preserve unspecified settings.",
      "inputSchema": {
        "additionalProperties": false,
        "properties": {
          "base": {
            "description": "Neutral color chroma from 0 to 0.02.",
            "maximum": 0.02,
            "minimum": 0,
            "type": "number"
          },
          "chroma": {
            "description": "Accent color chroma from 0 to 0.4.",
            "maximum": 0.4,
            "minimum": 0,
            "type": "number"
          },
          "colorScheme": {
            "enum": [
              "light",
              "dark",
              "system"
            ],
            "type": "string"
          },
          "fontFamily": {
            "enum": [
              "inter",
              "figtree",
              "hanken-grotesk",
              "geist",
              "dm-sans",
              "public-sans",
              "google-sans",
              "bricolage-grotesque",
              "varela-round",
              "fraunces",
              "ibm-plex-mono",
              "fredoka",
              "jetbrains-mono",
              "instrument-sans"
            ],
            "type": "string"
          },
          "formRadius": {
            "enum": [
              "none",
              "extra-small",
              "small",
              "medium",
              "large",
              "extra-large"
            ],
            "type": "string"
          },
          "hue": {
            "description": "Accent hue from 0 to 360.",
            "maximum": 360,
            "minimum": 0,
            "type": "number"
          },
          "lightness": {
            "description": "Accent lightness from 0 to 1.",
            "maximum": 1,
            "minimum": 0,
            "type": "number"
          },
          "preset": {
            "description": "Named docs preset to apply immediately to the current page.",
            "enum": [
              "default",
              "sky",
              "lavender",
              "mint",
              "netflix",
              "uber",
              "spotify",
              "coinbase",
              "airbnb",
              "discord",
              "rabbit"
            ],
            "type": "string"
          },
          "radius": {
            "enum": [
              "none",
              "extra-small",
              "small",
              "medium",
              "large",
              "extra-large"
            ],
            "type": "string"
          },
          "vibrantPalette": {
            "type": "boolean"
          }
        },
        "type": "object"
      },
      "page": "/"
    }