{ "version": "0.76.5", "origin": "https://mantle.ngrok.com", "components": [ { "name": "Accordion", "slug": "components/preview/accordion", "status": "preview", "importPath": "@ngrok/mantle/accordion", "docsUrl": "https://mantle.ngrok.com/components/preview/accordion", "markdownUrl": "https://mantle.ngrok.com/components/preview/accordion.md", "summary": "A vertically stacked set of interactive headings that each reveal an associated section of content.", "jsdoc": "A vertically stacked set of interactive headings that each reveal a section of content.", "examples": [ "Composition:\n```\nAccordion.Root\n├── Accordion.Item\n│ ├── Accordion.Heading\n│ │ └── Accordion.Trigger\n│ │ └── Accordion.TriggerIcon\n│ └── Accordion.Content\n```", "```tsx\n\n \n \n \n \n Is it accessible?\n \n \n \n Yes. It adheres to the WAI-ARIA design pattern.\n \n \n\n```" ] }, { "name": "Alert", "slug": "components/alert", "status": "stable", "importPath": "@ngrok/mantle/alert", "docsUrl": "https://mantle.ngrok.com/components/alert", "markdownUrl": "https://mantle.ngrok.com/components/alert.md", "summary": "Displays a callout for user attention.", "jsdoc": "Displays a callout for user attention.", "examples": [ "Composition:\n```\nAlert.Root\n├── Alert.Icon\n└── Alert.Content\n ├── Alert.Title\n ├── Alert.Description\n └── Alert.DismissIconButton\n```", "```tsx\n\n \n \n Alert Title\n \n \n Alert description text.\n \n \n\n```" ] }, { "name": "Alert Dialog", "slug": "components/alert-dialog", "status": "stable", "importPath": "@ngrok/mantle/alert-dialog", "docsUrl": "https://mantle.ngrok.com/components/alert-dialog", "markdownUrl": "https://mantle.ngrok.com/components/alert-dialog.md", "summary": "A modal dialog that interrupts the user with important content and expects a response.", "jsdoc": "A modal dialog that interrupts the user with important content and expects a response.", "examples": [ "Composition:\n```\nAlertDialog.Root\n├── AlertDialog.Trigger\n└── AlertDialog.Content\n ├── AlertDialog.Icon\n └── AlertDialog.Body\n ├── AlertDialog.Header\n │ ├── AlertDialog.Title\n │ └── AlertDialog.Description\n └── AlertDialog.Footer\n ├── AlertDialog.Cancel\n └── AlertDialog.Action\n```", "```tsx\n\n \n \n \n \n \n \n \n \n Are you absolutely sure?\n \n \n Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n \n \n \n Cancel\n \n Continue\n \n \n \n \n\n```" ] }, { "name": "Anchor", "slug": "components/anchor", "status": "stable", "importPath": "@ngrok/mantle/anchor", "docsUrl": "https://mantle.ngrok.com/components/anchor", "markdownUrl": "https://mantle.ngrok.com/components/anchor.md", "summary": "Fundamental component for rendering links to external addresses.", "jsdoc": "A styled hyperlink — a native `` with mantle's link styling, focus treatment, optional leading/trailing icon, and a safer default for the `rel` attribute.", "examples": [ "```tsx\nimport { Anchor } from \"@ngrok/mantle/anchor\";\nimport { BookIcon } from \"@phosphor-icons/react/Book\";\nimport { Link } from \"react-router\";\n\n// Basic external link.\nngrok.com\n\n// External link in a new tab with a leading icon.\n}\n>\n ngrok docs\n\n\n// Compose Anchor styling onto a react-router Link for internal navigation.\n\n Open dashboard\n\n```" ] }, { "name": "Badge", "slug": "components/badge", "status": "stable", "importPath": "@ngrok/mantle/badge", "docsUrl": "https://mantle.ngrok.com/components/badge", "markdownUrl": "https://mantle.ngrok.com/components/badge.md", "summary": "A non-interactive label used to highlight short, scannable information — a status, a category tag, or a count — in the smallest possible footprint.", "jsdoc": "A non-interactive label used to highlight short, scannable information — a status, a category tag, or a count — in the smallest possible footprint. **When to use** - Status indicators: `Succeeded`, `Failed`, `Pending`, `Beta`. - Category or tag chips alongside list items, table rows, or cards. - Counts (e.g. `12 new`) when paired with brief context. **When not to use** - For interactive UI.", "examples": [ "```tsx\nimport { Badge } from \"@ngrok/mantle/badge\";\nimport { CheckCircleIcon } from \"@phosphor-icons/react/CheckCircle\";\n\n}>\n Succeeded\n\n\n// Polymorphic — render the badge as a link, preserving its styling.\n\n Operational\n\n```" ] }, { "name": "Browser Only", "slug": "components/browser-only", "status": "stable", "importPath": "@ngrok/mantle/browser-only", "docsUrl": "https://mantle.ngrok.com/components/browser-only", "markdownUrl": "https://mantle.ngrok.com/components/browser-only.md", "summary": "A wrapper component that ensures its children only render in the browser, after hydration has completed.", "jsdoc": "A wrapper component that ensures its children only render in the browser, after hydration has completed.", "examples": [ "```tsx\n} >\n {() => }\n\n```" ] }, { "name": "Button", "slug": "components/button", "status": "stable", "importPath": "@ngrok/mantle/button", "docsUrl": "https://mantle.ngrok.com/components/button", "markdownUrl": "https://mantle.ngrok.com/components/button.md", "summary": "Initiates an action, such as completing a task or submitting information.", "jsdoc": "Renders a button or a component that looks like a button, an interactive element activated by a user with a mouse, keyboard, finger, voice command, or other assistive technology.", "examples": [ "```tsx\n\n```", "Submit a form — opt in with `type=\"submit\"` (the default `\"button\"` does not submit):\n```tsx\n\n```" ] }, { "name": "Calendar", "slug": "components/preview/calendar", "status": "preview", "importPath": "@ngrok/mantle/calendar", "docsUrl": "https://mantle.ngrok.com/components/preview/calendar", "markdownUrl": "https://mantle.ngrok.com/components/preview/calendar.md", "summary": "A date field component that allows users to enter and edit date.", "jsdoc": "A calendar component that allows users to select a date or a range of dates.", "examples": [ "```tsx\n\n\n\n```\n\nhttps://github.com/ngrok/mantle/issues" ] }, { "name": "Card", "slug": "components/card", "status": "stable", "importPath": "@ngrok/mantle/card", "docsUrl": "https://mantle.ngrok.com/components/card", "markdownUrl": "https://mantle.ngrok.com/components/card.md", "summary": "A container used to display content in a box, resembling a physical card.", "jsdoc": "A container that can be used to display content in a box resembling a physical card.", "examples": [ "Composition:\n```\nCard.Root\n├── Card.Header\n│ └── Card.Title\n├── Card.Body\n└── Card.Footer\n```", "```tsx\n\n \n

Laborum in aute officia adipisicing elit velit.

\n \n\n\n\n \n Card Title Here\n \n \n

Laborum in aute officia adipisicing elit velit.

\n \n \n

Card footer

\n \n\n```" ] }, { "name": "Checkbox", "slug": "components/checkbox", "status": "stable", "importPath": "@ngrok/mantle/checkbox", "docsUrl": "https://mantle.ngrok.com/components/checkbox", "markdownUrl": "https://mantle.ngrok.com/components/checkbox.md", "summary": "A form control that allows the user to toggle between checked and not checked. Supports indeterminate state.", "jsdoc": "A form control that allows the user to toggle between checked and not checked.", "examples": [ "```tsx\n
\n \n
\n```" ] }, { "name": "Code", "slug": "components/code", "status": "stable", "importPath": "@ngrok/mantle/code", "docsUrl": "https://mantle.ngrok.com/components/code", "markdownUrl": "https://mantle.ngrok.com/components/code.md", "summary": "Marks a short fragment of inline computer code — a function name, a variable, a CLI flag, a key.", "jsdoc": "Marks a short fragment of inline computer code — a function name, a variable, a CLI flag, a key.", "examples": [ "```tsx\nimport { Code } from \"@ngrok/mantle/code\";\n\n

\n Use the console.log() function to debug your code.\n

\n\n// As a link, preserving Code styling.\n\n /api/components.json\n\n```" ] }, { "name": "Code Block", "slug": "components/code-block", "status": "stable", "importPath": "@ngrok/mantle/code-block", "docsUrl": "https://mantle.ngrok.com/components/code-block", "markdownUrl": "https://mantle.ngrok.com/components/code-block.md", "summary": "Code blocks render and apply syntax highlighting to blocks of code using Shiki at build time.", "jsdoc": "Shiki-powered code blocks with build-time syntax highlighting and zero browser bundle.", "examples": [ "Composition:\n```\n# Standard\nCodeBlock.Root\n├── CodeBlock.Header\n│ ├── CodeBlock.Icon\n│ └── CodeBlock.Title\n├── CodeBlock.Body\n│ ├── CodeBlock.CopyButton\n│ └── CodeBlock.Code\n└── CodeBlock.ExpanderButton\n\n# Tabbed\nCodeBlock.Root\n├── CodeBlock.Header\n│ └── CodeBlock.TabList\n│ └── CodeBlock.TabTrigger\n├── CodeBlock.Body\n│ ├── CodeBlock.CopyButton\n│ └── CodeBlock.TabContent\n│ └── CodeBlock.Code\n└── CodeBlock.ExpanderButton\n```", "```tsx\n\n \n \n example.ts\n \n \n \n \n \n \n\n\n// Server-highlighted HTML fetched via an action route + React Query mutation\nconst highlightMutation = useMutation({\n mutationFn: async () => {\n const response = await fetch(\"/api/shiki-highlight\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ code: source, language: \"typescript\" }),\n });\n return response.json();\n },\n});\n\nconst serverValue = createMantleCodeBlockValue({\n language: \"typescript\",\n code: source,\n preHtml: highlightMutation.data?.html,\n});\n```" ] }, { "name": "Combobox", "slug": "components/combobox", "status": "stable", "importPath": "@ngrok/mantle/combobox", "docsUrl": "https://mantle.ngrok.com/components/combobox", "markdownUrl": "https://mantle.ngrok.com/components/combobox.md", "summary": "Fill in a React input field with autocomplete & autosuggest functionalities. Choose from a list of suggested values with full keyboard support.", "jsdoc": "Fill in a React input field with autocomplete & autosuggest functionalities.", "examples": [ "Composition:\n```\nCombobox.Root\n├── Combobox.Input\n└── Combobox.Content\n ├── Combobox.Group\n │ ├── Combobox.GroupLabel\n │ └── Combobox.Item\n │ └── Combobox.ItemValue\n └── Combobox.Separator\n```", "```tsx\n\n \n \n \n \n \n\n```" ] }, { "name": "Command", "slug": "components/command", "status": "stable", "importPath": "@ngrok/mantle/command", "docsUrl": "https://mantle.ngrok.com/components/command", "markdownUrl": "https://mantle.ngrok.com/components/command.md", "summary": "A command palette that allows users to search and execute commands.", "jsdoc": "The command component for the Command.", "examples": [ "Composition:\n```\nCommand.DialogRoot\n├── Command.DialogTrigger\n└── Command.DialogContent\n ├── Command.Input\n └── Command.List\n ├── Command.Empty\n ├── Command.Group\n │ └── Command.Item\n │ └── Command.Shortcut\n └── Command.Separator\n```", "```tsx\n\n \n \n \n \n \n \n No results found.\n \n \n Calendar\n \n \n \n \n \n Profile\n ⌘,\n \n \n \n \n\n```" ] }, { "name": "Data Table", "slug": "components/data-table", "status": "stable", "importPath": "@ngrok/mantle/data-table", "docsUrl": "https://mantle.ngrok.com/components/data-table", "markdownUrl": "https://mantle.ngrok.com/components/data-table.md", "summary": "Tables purposefully designed for dynamic, application data with features like sorting, filtering, and pagination.", "jsdoc": "Use `DataTable` for INTERACTIVE tabular data — sorting, filtering, pagination, row selection, and server-side or client-side data.", "examples": [ "Composition:\n```\nDataTable.Root\n├── DataTable.Head\n│ └── DataTable.Row\n│ ├── DataTable.ExpandHeader\n│ ├── DataTable.Header\n│ │ └── DataTable.HeaderSortButton\n│ └── DataTable.ActionHeader\n└── DataTable.Body\n ├── DataTable.Row\n │ ├── DataTable.Cell\n │ │ └── DataTable.RowExpandButton\n │ └── DataTable.ActionCell\n ├── DataTable.ExpandedRow\n └── DataTable.EmptyRow\n```", "Minimal — read-only table with a single sortable column:\n```tsx\nimport {\n DataTable,\n createColumnHelper,\n getCoreRowModel,\n useReactTable,\n} from \"@ngrok/mantle/data-table\";\n\ntype Row = { id: string; name: string };\n\nconst columnHelper = createColumnHelper();\nconst columns = [\n columnHelper.accessor(\"name\", {\n id: \"name\",\n header: (props) => (\n \n \n Name\n \n \n ),\n cell: (props) => {props.getValue()},\n }),\n];\n\nfunction MyTable({ data }: { data: Row[] }) {\n const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() });\n const rows = table.getRowModel().rows;\n\n return (\n \n \n \n {rows.length > 0\n ? rows.map((row) => )\n : No results.}\n \n \n );\n}\n```", "Sortable, filterable, paginated, with both empty states — a global text\nfilter, the no-data vs. no-results-for-filter empty states (an `Empty`\ndropped into `DataTable.EmptyRow`), and `CursorPagination` with a page-size\ndropdown:\n```tsx\nimport {\n DataTable,\n createColumnHelper,\n getCoreRowModel,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n} from \"@ngrok/mantle/data-table\";\nimport { Button } from \"@ngrok/mantle/button\";\nimport { CursorPagination } from \"@ngrok/mantle/pagination\";\nimport { Empty } from \"@ngrok/mantle/empty\";\nimport { Input } from \"@ngrok/mantle/input\";\nimport { MagnifyingGlassIcon } from \"@phosphor-icons/react/MagnifyingGlass\";\nimport { TrayIcon } from \"@phosphor-icons/react/Tray\";\nimport { useState } from \"react\";\n\ntype Payment = { id: string; amount: number; status: \"pending\" | \"succeeded\" | \"failed\"; email: string };\n\n// `defaultPageSize` seeds an UNCONTROLLED \n \n \n You can find this in the ngrok dashboard.\n \n\n```" ] }, { "name": "Flag", "slug": "components/flag", "status": "stable", "importPath": "@ngrok/mantle/flag", "docsUrl": "https://mantle.ngrok.com/components/flag", "markdownUrl": "https://mantle.ngrok.com/components/flag.md", "summary": "Displays a flag as an svg based on the provided country code.", "jsdoc": "Renders a country flag from an [ISO 3166-1 alpha-2](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) country code, served as an SVG from ngrok's CDN.", "examples": [ "```tsx\nimport { Flag } from \"@ngrok/mantle/flag\";\n\n\n\n\n\n// Inline next to a country label.\n\n \n United Kingdom\n\n```" ] }, { "name": "Hover Card", "slug": "components/hover-card", "status": "stable", "importPath": "@ngrok/mantle/hover-card", "docsUrl": "https://mantle.ngrok.com/components/hover-card", "markdownUrl": "https://mantle.ngrok.com/components/hover-card.md", "summary": "For sighted users to preview content available behind a link.", "jsdoc": "A floating card that appears when a user hovers over a trigger element.", "examples": [ "Composition:\n```\nHoverCard.Root\n├── HoverCard.Trigger\n└── HoverCard.Content\n```", "```tsx\n\n \n \n \n \n

This is the hover card content.

\n \n\n```" ] }, { "name": "Icon", "slug": "components/icon", "status": "stable", "importPath": "@ngrok/mantle/icon", "docsUrl": "https://mantle.ngrok.com/components/icon", "markdownUrl": "https://mantle.ngrok.com/components/icon.md", "summary": "Decorates an svg icon with automatic sizing. Useful when applying base styles to phosphor icons.", "jsdoc": "Decorates an svg icon with automatic sizing styles and a `shrink-0` class.", "examples": [ "```tsx\nimport { ShrimpIcon } from \"@phosphor-icons/react/Shrimp\";\n\n} />\n```" ] }, { "name": "Icon Button", "slug": "components/icon-button", "status": "stable", "importPath": "@ngrok/mantle/button", "docsUrl": "https://mantle.ngrok.com/components/icon-button", "markdownUrl": "https://mantle.ngrok.com/components/icon-button.md", "summary": "Initiates an action, such as completing a task or submitting information. Renders only a single icon as children with an accessible, screen-reader-only label.", "jsdoc": "Renders a button or a component that looks like a button, an interactive element activated by a user with a mouse, keyboard, finger, voice command, or other assistive technology.", "examples": [ "```tsx\n}\n label=\"Delete item\"\n appearance=\"ghost\"\n size=\"sm\"\n onClick={handleDelete}\n/>\n```", "Submit a form — opt in with `type=\"submit\"` (the default `\"button\"` does not submit):\n```tsx\n} label=\"Search\" />\n```" ] }, { "name": "Icons", "slug": "components/icons", "status": "stable", "importPath": "@ngrok/mantle/icons", "docsUrl": "https://mantle.ngrok.com/components/icons", "markdownUrl": "https://mantle.ngrok.com/components/icons.md", "summary": "Custom icons used throughout ngrok UI.", "jsdoc": "Re-exports for the Icons component." }, { "name": "Input", "slug": "components/input", "status": "stable", "importPath": "@ngrok/mantle/input", "docsUrl": "https://mantle.ngrok.com/components/input", "markdownUrl": "https://mantle.ngrok.com/components/input.md", "summary": "Fundamental component for inputs.", "jsdoc": "Used to create interactive controls for web-based forms in order to accept data from the user.", "examples": [ "```tsx\n\n```" ] }, { "name": "Label", "slug": "components/label", "status": "stable", "importPath": "@ngrok/mantle/label", "docsUrl": "https://mantle.ngrok.com/components/label", "markdownUrl": "https://mantle.ngrok.com/components/label.md", "summary": "A Label represents a caption for an item in a user interface. Renders an accessible label associated with controls.", "jsdoc": "A caption for a form control — input, checkbox, radio, switch, select.", "examples": [ "```tsx\nimport { Label } from \"@ngrok/mantle/label\";\nimport { Input } from \"@ngrok/mantle/input\";\n\n// Implicit — control nested inside the label.\n\n\n// Explicit — htmlFor matches the control's id.\n
\n \n \n
\n\n// Inline label for a checkbox.\n\n```" ] }, { "name": "Main", "slug": "components/main", "status": "stable", "importPath": "@ngrok/mantle/main", "docsUrl": "https://mantle.ngrok.com/components/main", "markdownUrl": "https://mantle.ngrok.com/components/main.md", "summary": "A focusable `
` landmark for the page's primary content, designed to be paired with a skip link.", "jsdoc": "A focusable `
` landmark for the page's primary content.", "examples": [ "```tsx\n\n
\n
\n

Page title

\n
\n```" ] }, { "name": "Media Object", "slug": "components/media-object", "status": "stable", "importPath": "@ngrok/mantle/media-object", "docsUrl": "https://mantle.ngrok.com/components/media-object", "markdownUrl": "https://mantle.ngrok.com/components/media-object.md", "summary": "The Media Object is an image/icon (media) to the left, with descriptive content (title and subtitle/description) to the right.", "jsdoc": "A small, reusable layout primitive for \"image/icon on one side, descriptive content on the other\" — the foundational {@link https://www.stubbornella.org/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/ \"media object\" pattern}.", "examples": [ "Composition:\n```\nMediaObject.Root\n├── MediaObject.Media\n└── MediaObject.Content\n```", "```tsx\nimport { MediaObject } from \"@ngrok/mantle/media-object\";\n\n\n \n \n \n \n

{user.name}

\n

{comment}

\n \n\n```" ] }, { "name": "Multi Select", "slug": "components/multi-select", "status": "stable", "importPath": "@ngrok/mantle/multi-select", "docsUrl": "https://mantle.ngrok.com/components/multi-select", "markdownUrl": "https://mantle.ngrok.com/components/multi-select.md", "summary": "A typeahead multi-select combobox that allows users to select multiple values with filtering. Selected values are displayed as removable tags.", "jsdoc": "A multi-select combobox that allows users to select multiple values with typeahead filtering.", "examples": [ "Composition:\n```\nMultiSelect.Root\n├── MultiSelect.Trigger\n│ ├── MultiSelect.TagValues\n│ └── MultiSelect.Input\n└── MultiSelect.Content\n ├── MultiSelect.Group\n │ ├── MultiSelect.GroupLabel\n │ ├── MultiSelect.GroupDescription\n │ └── MultiSelect.Item\n ├── MultiSelect.Separator\n ├── MultiSelect.Empty\n └── MultiSelect.ContentFooter\n```", "```tsx\n\n \n \n \n \n \n Apple\n Banana\n Cherry\n \n\n```" ] }, { "name": "OTP Input", "slug": "components/otp-input", "status": "stable", "importPath": "@ngrok/mantle/otp-input", "docsUrl": "https://mantle.ngrok.com/components/otp-input", "markdownUrl": "https://mantle.ngrok.com/components/otp-input.md", "summary": "Accessible one-time passcode (OTP) input with paste, autofill, and IME support.", "jsdoc": "Compound component for capturing one-time passcodes (OTP).", "examples": [ "Composition:\n```\nOtpInput.Root\n├── OtpInput.Group\n│ └── OtpInput.Slot\n├── OtpInput.Separator\n└── OtpInput.Group\n └── OtpInput.Slot\n```", "```tsx\n\n \n \n \n \n \n \n \n \n \n \n \n\n```" ] }, { "name": "Pagination", "slug": "components/pagination", "status": "stable", "importPath": "@ngrok/mantle/pagination", "docsUrl": "https://mantle.ngrok.com/components/pagination", "markdownUrl": "https://mantle.ngrok.com/components/pagination.md", "summary": "Components and hooks for navigating through paged data with cursor-based and offset-based pagination strategies.", "jsdoc": "Re-exports for the Pagination component." }, { "name": "Password Input", "slug": "components/password-input", "status": "stable", "importPath": "@ngrok/mantle/input", "docsUrl": "https://mantle.ngrok.com/components/password-input", "markdownUrl": "https://mantle.ngrok.com/components/password-input.md", "summary": "Fundamental component for password inputs.", "jsdoc": "An input optimized for password and other sensitive-value entry.", "examples": [ "```tsx\nimport { PasswordInput } from \"@ngrok/mantle/input\";\nimport { Label } from \"@ngrok/mantle/label\";\nimport { useState } from \"react\";\n\n// Basic — uncontrolled visibility.\n\n\n// Validation state.\n\n\n// Controlled visibility — one toggle reveals multiple fields.\nfunction PasswordPair() {\n const [show, setShow] = useState(false);\n return (\n <>\n \n \n \n );\n}\n```" ] }, { "name": "Popover", "slug": "components/popover", "status": "stable", "importPath": "@ngrok/mantle/popover", "docsUrl": "https://mantle.ngrok.com/components/popover", "markdownUrl": "https://mantle.ngrok.com/components/popover.md", "summary": "Displays rich content in a portal, triggered by a button.", "jsdoc": "A floating overlay that displays rich content in a portal, triggered by a button.", "examples": [ "Composition:\n```\nPopover.Root\n├── Popover.Trigger\n├── Popover.Anchor\n└── Popover.Content\n └── Popover.Close\n```", "```tsx\n\n \n \n \n \n

This is the popover content.

\n \n\n```" ] }, { "name": "Progress Bar", "slug": "components/progress-bar", "status": "stable", "importPath": "@ngrok/mantle/progress", "docsUrl": "https://mantle.ngrok.com/components/progress-bar", "markdownUrl": "https://mantle.ngrok.com/components/progress-bar.md", "summary": "Displays an indicator showing the completion progress of a task as a linear progress bar with customizable colors.", "jsdoc": "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.", "examples": [ "Composition:\n```\nProgressBar.Root\n└── ProgressBar.Indicator\n```", "```tsx\n\n \n\n\n\n \n\n\n// Indeterminate progress\n\n \n\n```" ] }, { "name": "Progress Donut", "slug": "components/progress-donut", "status": "stable", "importPath": "@ngrok/mantle/progress", "docsUrl": "https://mantle.ngrok.com/components/progress-donut", "markdownUrl": "https://mantle.ngrok.com/components/progress-donut.md", "summary": "Displays an indicator showing the completion progress of a task as a circular progress bar.", "jsdoc": "A simple circular progress bar which shows the completion progress of a task.", "examples": [ "Composition:\n```\nProgressDonut.Root\n└── ProgressDonut.Indicator\n```", "```tsx\n\n \n\n\n\n \n\n```" ] }, { "name": "QR Code", "slug": "components/qr-code", "status": "stable", "importPath": "@ngrok/mantle/qr-code", "docsUrl": "https://mantle.ngrok.com/components/qr-code", "markdownUrl": "https://mantle.ngrok.com/components/qr-code.md", "summary": "Render a scannable QR code, optionally branded with a centered logo.", "jsdoc": "A QR code.", "examples": [ "Composition:\n```\nQrCode.Root\n├── QrCode.Frame\n│ └── QrCode.Pattern\n└── QrCode.Overlay\n```", "```tsx\n\n \n \n \n \n \n \n\n```" ] }, { "name": "Radio Group", "slug": "components/radio-group", "status": "stable", "importPath": "@ngrok/mantle/radio-group", "docsUrl": "https://mantle.ngrok.com/components/radio-group", "markdownUrl": "https://mantle.ngrok.com/components/radio-group.md", "summary": "A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.", "jsdoc": "A group of radio items.", "examples": [ "Composition:\n```\n# Default radios\nRadioGroup.Root\n└── RadioGroup.Item\n ├── RadioGroup.Indicator\n └── RadioGroup.ItemContent\n\n# List layout with descriptions\nRadioGroup.List\n└── RadioGroup.ListItem\n ├── RadioGroup.Indicator\n └── RadioGroup.ItemContent\n\n# Segmented button group\nRadioGroup.ButtonGroup\n└── RadioGroup.Button\n\n# Card-style radios\nRadioGroup.Root\n└── RadioGroup.Card\n └── RadioGroup.Indicator\n```", "```tsx\n\n \n \n Option 1\n \n \n \n Option 2\n \n\n```" ] }, { "name": "SandboxedOnClick", "slug": "components/sandboxed-on-click", "status": "stable", "importPath": "@ngrok/mantle/sandboxed-on-click", "docsUrl": "https://mantle.ngrok.com/components/sandboxed-on-click", "markdownUrl": "https://mantle.ngrok.com/components/sandboxed-on-click.md", "summary": "A container that prevents the click event from bubbling out of it.", "jsdoc": "A container that prevents the click event from bubbling out of it.", "examples": [ "```tsx\n navigate(\"/somewhere\")}>\n \n \n \n See ngrok docs\n \n \n \n\n```" ] }, { "name": "Select", "slug": "components/select", "status": "stable", "importPath": "@ngrok/mantle/select", "docsUrl": "https://mantle.ngrok.com/components/select", "markdownUrl": "https://mantle.ngrok.com/components/select.md", "summary": "Displays a list of options for the user to pick from—triggered by a button.", "jsdoc": "Displays a list of options for the user to pick from—triggered by a button.", "examples": [ "Composition:\n```\nSelect.Root\n├── Select.Trigger\n│ └── Select.Value\n└── Select.Content\n ├── Select.Group\n │ ├── Select.Label\n │ └── Select.Item\n └── Select.Separator\n```", "```tsx\n\n \n \n \n \n \n Fruits\n Apple\n Banana\n Cherry\n \n \n \n Veggies\n Carrot\n Cucumber\n \n \n\n```" ] }, { "name": "Separator", "slug": "components/separator", "status": "stable", "importPath": "@ngrok/mantle/separator", "docsUrl": "https://mantle.ngrok.com/components/separator", "markdownUrl": "https://mantle.ngrok.com/components/separator.md", "summary": "Visually or semantically separates content.", "jsdoc": "Visually or semantically separates content.", "examples": [ "```tsx\n\n\n\n\n
\n Blog\n \n Docs\n \n Source\n
\n```" ] }, { "name": "Sheet", "slug": "components/sheet", "status": "stable", "importPath": "@ngrok/mantle/sheet", "docsUrl": "https://mantle.ngrok.com/components/sheet", "markdownUrl": "https://mantle.ngrok.com/components/sheet.md", "summary": "A container that overlays the current view from the edge of the screen.", "jsdoc": "A container that overlays the current view from the edge of the screen.", "examples": [ "Composition:\n```\nSheet.Root\n├── Sheet.Trigger\n└── Sheet.Content\n ├── Sheet.Header\n │ ├── Sheet.TitleGroup\n │ │ ├── Sheet.Title\n │ │ └── Sheet.Actions\n │ └── Sheet.Description\n ├── Sheet.Body\n └── Sheet.Footer\n └── Sheet.Close\n```", "```tsx\n// Triggering a stateful sheet\n\n \n \n \n \n \n \n Are you absolutely sure?\n \n }\n label=\"Delete\"\n />\n \n \n \n \n \n This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n \n \n \n

\n Consequat do voluptate culpa fugiat consequat nostrud duis\n aliqua minim. Tempor voluptate cillum elit velit. Voluptate\n aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit\n proident amet.\n

\n \n \n \n \n \n \n \n \n\n```", "```tsx\n// Sheet without a trigger (e.g. router controlled)\n onClose()}>\n \n \n \n Are you absolutely sure?\n \n }\n label=\"Delete\"\n />\n \n \n \n \n \n This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n \n \n \n

\n Consequat do voluptate culpa fugiat consequat nostrud duis\n aliqua minim. Tempor voluptate cillum elit velit. Voluptate\n aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit\n proident amet.\n

\n \n \n \n \n \n \n \n \n\n```" ] }, { "name": "Skeleton", "slug": "components/skeleton", "status": "stable", "importPath": "@ngrok/mantle/skeleton", "docsUrl": "https://mantle.ngrok.com/components/skeleton", "markdownUrl": "https://mantle.ngrok.com/components/skeleton.md", "summary": "Use to show a placeholder while content is loading.", "jsdoc": "A skeleton is a placeholder for content that is loading.", "examples": [ "```tsx\nimport { Skeleton } from \"@ngrok/mantle/skeleton\";\n\n// Text-line placeholder.\n\n\n// Avatar placeholder.\n\n\n// Announce loading state to assistive tech.\n
\n Loading profile…\n \n
\n```" ] }, { "name": "Skip to Main Link", "slug": "components/skip-to-main-link", "status": "stable", "importPath": "@ngrok/mantle/skip-to-main-link", "docsUrl": "https://mantle.ngrok.com/components/skip-to-main-link", "markdownUrl": "https://mantle.ngrok.com/components/skip-to-main-link.md", "summary": "A visually-hidden-until-focused \"skip link\" that lets keyboard users jump to the page's main content landmark.", "jsdoc": "A visually-hidden-until-focused \"skip link\" that lets keyboard users jump past repeated navigation and land directly on the page's main content landmark.", "examples": [ "```tsx\n\n
\n
\n

Page title

\n
\n```" ] }, { "name": "Slider", "slug": "components/slider", "status": "stable", "importPath": "@ngrok/mantle/slider", "docsUrl": "https://mantle.ngrok.com/components/slider", "markdownUrl": "https://mantle.ngrok.com/components/slider.md", "summary": "An input where the user selects a value from within a given range.", "jsdoc": "An input where the user selects a value from within a given range.", "examples": [ "```tsx\n// single thumb\n\n```", "```tsx\n// range\n \n```", "```tsx\n// multiple thumbs\n\n```" ] }, { "name": "Slot", "slug": "components/slot", "status": "stable", "importPath": "@ngrok/mantle/slot", "docsUrl": "https://mantle.ngrok.com/components/slot", "markdownUrl": "https://mantle.ngrok.com/components/slot.md", "summary": "Merges its props onto its immediate child.", "jsdoc": "Merges its props onto its immediate child.", "examples": [ "```tsx\n\n Home\n\n```" ] }, { "name": "Split Button", "slug": "components/split-button", "status": "stable", "importPath": "@ngrok/mantle/split-button", "docsUrl": "https://mantle.ngrok.com/components/split-button", "markdownUrl": "https://mantle.ngrok.com/components/split-button.md", "summary": "A button group which provides a default action with one click while revealing related alternatives through a dropdown menu.", "jsdoc": "A button group which provides a default action with one click while revealing related alternatives through a dropdown menu.", "examples": [ "Composition:\n```\nSplitButton.Root\n├── SplitButton.PrimaryAction\n├── SplitButton.MenuTrigger\n└── SplitButton.MenuContent\n └── SplitButton.MenuItem\n```", "```tsx\n\n } onClick={copyMarkdownPage}>\n Copy page\n \n \n \n \n } />\n Copy page\n \n \n \n } />\n View as Markdown\n \n \n \n\n```" ] }, { "name": "Switch", "slug": "components/switch", "status": "stable", "importPath": "@ngrok/mantle/switch", "docsUrl": "https://mantle.ngrok.com/components/switch", "markdownUrl": "https://mantle.ngrok.com/components/switch.md", "summary": "A control that allows the user to toggle between checked and not checked.", "jsdoc": "A form control that allows the user to toggle between checked and not checked.", "examples": [ "```tsx\n
\n \n
\n```" ] }, { "name": "Table", "slug": "components/table", "status": "stable", "importPath": "@ngrok/mantle/table", "docsUrl": "https://mantle.ngrok.com/components/table", "markdownUrl": "https://mantle.ngrok.com/components/table.md", "summary": "A structured way to display data in rows and columns.", "jsdoc": "Use `Table` for STATIC, layout-driven tabular data — read-only data dumps, simple key/value displays, plain markup tables.", "examples": [ "Composition:\n```\nTable.Root\n└── Table.Element\n ├── Table.Caption\n ├── Table.Head\n │ └── Table.Row\n │ └── Table.Header\n ├── Table.Body\n │ └── Table.Row\n │ └── Table.Cell\n └── Table.Foot\n```", "```tsx\n\n \n A list of your recent invoices.\n \n \n Invoice\n Status\n Method\n Amount\n \n \n \n {invoices.map((invoice) => (\n \n {invoice.invoice}\n {invoice.paymentStatus}\n {invoice.paymentMethod}\n {invoice.totalAmount}\n \n ))}\n \n \n \n Total\n $2,500.00\n \n \n \n\n```" ] }, { "name": "Tabs", "slug": "components/tabs", "status": "stable", "importPath": "@ngrok/mantle/tabs", "docsUrl": "https://mantle.ngrok.com/components/tabs", "markdownUrl": "https://mantle.ngrok.com/components/tabs.md", "summary": "A set of layered sections of content—known as tab panels—that are displayed one at a time.", "jsdoc": "A set of layered sections of content—known as tab panels—that are displayed one at a time.", "examples": [ "Composition:\n```\nTabs.Root\n├── Tabs.List\n│ └── Tabs.Trigger\n│ └── Tabs.Badge\n└── Tabs.Content\n```", "```tsx\n\n \n Account\n Password\n \n \n

Make changes to your account here.

\n \n \n

Change your password here.

\n \n\n```" ] }, { "name": "Text Area", "slug": "components/text-area", "status": "stable", "importPath": "@ngrok/mantle/text-area", "docsUrl": "https://mantle.ngrok.com/components/text-area", "markdownUrl": "https://mantle.ngrok.com/components/text-area.md", "summary": "A multi-line plain-text editing control.", "jsdoc": "A multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.", "examples": [ "```tsx\n
\n
\n \n \n
\n
\n```" ] }, { "name": "Theme", "slug": "components/theme", "status": "stable", "importPath": "@ngrok/mantle/theme", "docsUrl": "https://mantle.ngrok.com/components/theme", "markdownUrl": "https://mantle.ngrok.com/components/theme.md", "summary": "Theme primitives — ThemeProvider, MantleStyleSheets, and FOUC prevention — for light, dark, and high-contrast modes.", "jsdoc": "Re-exports for the Theme component." }, { "name": "Toast", "slug": "components/toast", "status": "stable", "importPath": "@ngrok/mantle/toast", "docsUrl": "https://mantle.ngrok.com/components/toast", "markdownUrl": "https://mantle.ngrok.com/components/toast.md", "summary": "A succinct message that is displayed temporarily.", "jsdoc": "A succinct message that is displayed temporarily.", "examples": [ "Composition:\n```\nToast.Root\n├── Toast.Icon\n├── Toast.Message\n└── Toast.Action\n```", "```tsx\nmakeToast(\n \n \n Operation completed successfully!\n Dismiss\n \n);\n```" ] }, { "name": "Tooltip", "slug": "components/tooltip", "status": "stable", "importPath": "@ngrok/mantle/tooltip", "docsUrl": "https://mantle.ngrok.com/components/tooltip", "markdownUrl": "https://mantle.ngrok.com/components/tooltip.md", "summary": "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.", "jsdoc": "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.", "examples": [ "Composition:\n```\nTooltip.Root\n├── Tooltip.Trigger\n└── Tooltip.Content\n```", "```tsx\n\n \n \n \n \n This is a tooltip\n \n\n```" ] }, { "name": "Well", "slug": "components/well", "status": "stable", "importPath": "@ngrok/mantle/well", "docsUrl": "https://mantle.ngrok.com/components/well", "markdownUrl": "https://mantle.ngrok.com/components/well.md", "summary": "A recessed, inset container used to group and de-emphasize content.", "jsdoc": "A recessed, inset container used to visually group and de-emphasize content relative to the surrounding surface, such as code samples, supplementary notes, or read-only summaries.", "examples": [ "```tsx\n\n

Eu ad sint laborum nostrud ullamco esse.

\n\n```", "```tsx\n\n
…
\n\n```" ] } ] }