# @ngrok/mantle

> ngrok's UI library and design system — built with React, TypeScript, Tailwind CSS, Radix, and Ariakit. Accessible, semantic, and progressively enhanced primitives for production web apps.

Docs: https://mantle.ngrok.com/
NPM: https://www.npmjs.com/package/@ngrok/mantle
Source: https://github.com/ngrok-oss/mantle
Component manifest: https://mantle.ngrok.com/api/components.json
Hooks manifest: https://mantle.ngrok.com/api/hooks.json
Utilities manifest: https://mantle.ngrok.com/api/utils.json
Full text: https://mantle.ngrok.com/llms-full.txt

Every docs page is also available as plain markdown by appending `.md` to its URL (e.g. `/components/button.md`).

## Welcome

- [Mantle](https://mantle.ngrok.com/) ([md](https://mantle.ngrok.com/index.md)): ngrok's UI library and design system built with React, TypeScript, and Tailwind CSS
- [Philosophy](https://mantle.ngrok.com/philosophy) ([md](https://mantle.ngrok.com/philosophy.md)): The design principles and architectural philosophy behind mantle, ngrok's UI library and design system

## Base

- [Breakpoints](https://mantle.ngrok.com/base/breakpoints) ([md](https://mantle.ngrok.com/base/breakpoints.md)): Responsive breakpoints for building adaptive layouts in the mantle design system
- [Colors](https://mantle.ngrok.com/base/colors) ([md](https://mantle.ngrok.com/base/colors.md)): Color system for the mantle design system with automatic dark and high contrast mode support
- [Shadows](https://mantle.ngrok.com/base/shadows) ([md](https://mantle.ngrok.com/base/shadows.md)): Tokens for defining elevations in the mantle design system
- [Tailwind Variants](https://mantle.ngrok.com/base/tailwind-variants) ([md](https://mantle.ngrok.com/base/tailwind-variants.md)): Custom Tailwind variants registered by mantle
- [Typography](https://mantle.ngrok.com/base/typography) ([md](https://mantle.ngrok.com/base/typography.md)): Typography tokens for consistency and readability in the mantle design system

## Components

- [Alert](https://mantle.ngrok.com/components/alert) ([md](https://mantle.ngrok.com/components/alert.md)): Displays a callout for user attention.
- [Alert Dialog](https://mantle.ngrok.com/components/alert-dialog) ([md](https://mantle.ngrok.com/components/alert-dialog.md)): A modal dialog that interrupts the user with important content and expects a response.
- [Anchor](https://mantle.ngrok.com/components/anchor) ([md](https://mantle.ngrok.com/components/anchor.md)): Fundamental component for rendering links to external addresses.
- [Badge](https://mantle.ngrok.com/components/badge) ([md](https://mantle.ngrok.com/components/badge.md)): A non-interactive label used to highlight short, scannable information — a status, a category tag, or a count — in the smallest possible footprint.
- [BrowserOnly](https://mantle.ngrok.com/components/browser-only) ([md](https://mantle.ngrok.com/components/browser-only.md)): A wrapper component that ensures its children only render in the browser, after hydration has completed.
- [Button](https://mantle.ngrok.com/components/button) ([md](https://mantle.ngrok.com/components/button.md)): Initiates an action, such as completing a task or submitting information.
- [Card](https://mantle.ngrok.com/components/card) ([md](https://mantle.ngrok.com/components/card.md)): A container used to display content in a box, resembling a physical card.
- [Checkbox](https://mantle.ngrok.com/components/checkbox) ([md](https://mantle.ngrok.com/components/checkbox.md)): A form control that allows the user to toggle between checked and not checked. Supports indeterminate state.
- [Code](https://mantle.ngrok.com/components/code) ([md](https://mantle.ngrok.com/components/code.md)): Marks a short fragment of inline computer code — a function name, a variable, a CLI flag, a key.
- [Code Block](https://mantle.ngrok.com/components/code-block) ([md](https://mantle.ngrok.com/components/code-block.md)): Code blocks render and apply syntax highlighting to blocks of code using Shiki at build time.
- [Combobox](https://mantle.ngrok.com/components/combobox) ([md](https://mantle.ngrok.com/components/combobox.md)): Fill in a React input field with autocomplete & autosuggest functionalities. Choose from a list of suggested values with full keyboard support.
- [Command](https://mantle.ngrok.com/components/command) ([md](https://mantle.ngrok.com/components/command.md)): A command palette that allows users to search and execute commands.
- [Data Table](https://mantle.ngrok.com/components/data-table) ([md](https://mantle.ngrok.com/components/data-table.md)): Tables purposefully designed for dynamic, application data with features like sorting, filtering, and pagination.
- [Description List](https://mantle.ngrok.com/components/description-list) ([md](https://mantle.ngrok.com/components/description-list.md)): A semantically correct description list built on the HTML dl element. Renders a list of label/value pairs, commonly used in detail views to display metadata about a resource.
- [Dialog](https://mantle.ngrok.com/components/dialog) ([md](https://mantle.ngrok.com/components/dialog.md)): A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
- [Dropdown Menu](https://mantle.ngrok.com/components/dropdown-menu) ([md](https://mantle.ngrok.com/components/dropdown-menu.md)): Displays a menu to the user — such as a set of actions or functions — triggered by a button.
- [Empty](https://mantle.ngrok.com/components/empty) ([md](https://mantle.ngrok.com/components/empty.md)): Display a placeholder when there is no data or content to show.
- [Flag](https://mantle.ngrok.com/components/flag) ([md](https://mantle.ngrok.com/components/flag.md)): Displays a flag as an svg based on the provided country code.
- [Hover Card](https://mantle.ngrok.com/components/hover-card) ([md](https://mantle.ngrok.com/components/hover-card.md)): For sighted users to preview content available behind a link.
- [Icon](https://mantle.ngrok.com/components/icon) ([md](https://mantle.ngrok.com/components/icon.md)): Decorates an svg icon with automatic sizing. Useful when applying base styles to phosphor icons.
- [Icon Button](https://mantle.ngrok.com/components/icon-button) ([md](https://mantle.ngrok.com/components/icon-button.md)): 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.
- [Icons](https://mantle.ngrok.com/components/icons) ([md](https://mantle.ngrok.com/components/icons.md)): Custom icons used throughout ngrok UI.
- [Input](https://mantle.ngrok.com/components/input) ([md](https://mantle.ngrok.com/components/input.md)): Fundamental component for inputs.
- [Kbd](https://mantle.ngrok.com/components/kbd) ([md](https://mantle.ngrok.com/components/kbd.md)): A square, centered keyboard "key" chip for rendering keyboard shortcut hints.
- [Label](https://mantle.ngrok.com/components/label) ([md](https://mantle.ngrok.com/components/label.md)): A Label represents a caption for an item in a user interface. Renders an accessible label associated with controls.
- [Main](https://mantle.ngrok.com/components/main) ([md](https://mantle.ngrok.com/components/main.md)): A focusable `<main>` landmark for the page's primary content, designed to be paired with a skip link.
- [Media Object](https://mantle.ngrok.com/components/media-object) ([md](https://mantle.ngrok.com/components/media-object.md)): The Media Object is an image/icon (media) to the left, with descriptive content (title and subtitle/description) to the right.
- [Multi Select](https://mantle.ngrok.com/components/multi-select) ([md](https://mantle.ngrok.com/components/multi-select.md)): A typeahead multi-select combobox that allows users to select multiple values with filtering. Selected values are displayed as removable tags.
- [OTP Input](https://mantle.ngrok.com/components/otp-input) ([md](https://mantle.ngrok.com/components/otp-input.md)): Accessible one-time passcode (OTP) input with paste, autofill, and IME support.
- [Pagination](https://mantle.ngrok.com/components/pagination) ([md](https://mantle.ngrok.com/components/pagination.md)): Components and hooks for navigating through paged data with cursor-based and offset-based pagination strategies.
- [Password Input](https://mantle.ngrok.com/components/password-input) ([md](https://mantle.ngrok.com/components/password-input.md)): Fundamental component for password inputs.
- [Popover](https://mantle.ngrok.com/components/popover) ([md](https://mantle.ngrok.com/components/popover.md)): Displays rich content in a portal, triggered by a button.
- [Progress Bar](https://mantle.ngrok.com/components/progress-bar) ([md](https://mantle.ngrok.com/components/progress-bar.md)): Displays an indicator showing the completion progress of a task as a linear progress bar with customizable colors.
- [Progress Donut](https://mantle.ngrok.com/components/progress-donut) ([md](https://mantle.ngrok.com/components/progress-donut.md)): Displays an indicator showing the completion progress of a task as a circular progress bar.
- [Radio Group](https://mantle.ngrok.com/components/radio-group) ([md](https://mantle.ngrok.com/components/radio-group.md)): A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
- [SandboxedOnClick](https://mantle.ngrok.com/components/sandboxed-on-click) ([md](https://mantle.ngrok.com/components/sandboxed-on-click.md)): A container that prevents the click event from bubbling out of it.
- [Select](https://mantle.ngrok.com/components/select) ([md](https://mantle.ngrok.com/components/select.md)): Displays a list of options for the user to pick from—triggered by a button.
- [Separator](https://mantle.ngrok.com/components/separator) ([md](https://mantle.ngrok.com/components/separator.md)): Visually or semantically separates content.
- [Sheet](https://mantle.ngrok.com/components/sheet) ([md](https://mantle.ngrok.com/components/sheet.md)): A container that overlays the current view from the edge of the screen.
- [Skeleton](https://mantle.ngrok.com/components/skeleton) ([md](https://mantle.ngrok.com/components/skeleton.md)): Use to show a placeholder while content is loading.
- [SkipToMainLink](https://mantle.ngrok.com/components/skip-to-main-link) ([md](https://mantle.ngrok.com/components/skip-to-main-link.md)): A visually-hidden-until-focused "skip link" that lets keyboard users jump to the page's main content landmark.
- [Slider](https://mantle.ngrok.com/components/slider) ([md](https://mantle.ngrok.com/components/slider.md)): An input where the user selects a value from within a given range.
- [Slot](https://mantle.ngrok.com/components/slot) ([md](https://mantle.ngrok.com/components/slot.md)): Merges its props onto its immediate child.
- [Split Button](https://mantle.ngrok.com/components/split-button) ([md](https://mantle.ngrok.com/components/split-button.md)): A button group which provides a default action with one click while revealing related alternatives through a dropdown menu.
- [Switch](https://mantle.ngrok.com/components/switch) ([md](https://mantle.ngrok.com/components/switch.md)): A control that allows the user to toggle between checked and not checked.
- [Table](https://mantle.ngrok.com/components/table) ([md](https://mantle.ngrok.com/components/table.md)): A structured way to display data in rows and columns.
- [Tabs](https://mantle.ngrok.com/components/tabs) ([md](https://mantle.ngrok.com/components/tabs.md)): A set of layered sections of content—known as tab panels—that are displayed one at a time.
- [TextArea](https://mantle.ngrok.com/components/text-area) ([md](https://mantle.ngrok.com/components/text-area.md)): A multi-line plain-text editing control.
- [Theme](https://mantle.ngrok.com/components/theme) ([md](https://mantle.ngrok.com/components/theme.md)): Theme primitives — ThemeProvider, MantleStyleSheets, and FOUC prevention — for light, dark, and high-contrast modes.
- [Toast](https://mantle.ngrok.com/components/toast) ([md](https://mantle.ngrok.com/components/toast.md)): A succinct message that is displayed temporarily.
- [Tooltip](https://mantle.ngrok.com/components/tooltip) ([md](https://mantle.ngrok.com/components/tooltip.md)): A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

## Preview Components

- [Accordion](https://mantle.ngrok.com/components/preview/accordion) ([md](https://mantle.ngrok.com/components/preview/accordion.md)): A vertically stacked set of interactive headings that each reveal an associated section of content.
- [Calendar](https://mantle.ngrok.com/components/preview/calendar) ([md](https://mantle.ngrok.com/components/preview/calendar.md)): A date field component that allows users to enter and edit date.

## Hooks

- [Hooks](https://mantle.ngrok.com/hooks) ([md](https://mantle.ngrok.com/hooks.md)): Custom React hooks exported from @ngrok/mantle/hooks

## Utilities

- [color](https://mantle.ngrok.com/utils/color) ([md](https://mantle.ngrok.com/utils/color.md)): Color constants and type guards from @ngrok/mantle/color
- [composeRefs](https://mantle.ngrok.com/utils/compose-refs) ([md](https://mantle.ngrok.com/utils/compose-refs.md)): Compose multiple React refs into a single callback ref from @ngrok/mantle/utils
- [cx](https://mantle.ngrok.com/utils/cx) ([md](https://mantle.ngrok.com/utils/cx.md)): Class name composition utility from @ngrok/mantle/cx
- [highlight-utils](https://mantle.ngrok.com/utils/highlight-utils) ([md](https://mantle.ngrok.com/utils/highlight-utils.md)): React-free code highlighting helpers from @ngrok/mantle/highlight-utils
- [inView](https://mantle.ngrok.com/utils/in-view) ([md](https://mantle.ngrok.com/utils/in-view.md)): Framework-agnostic IntersectionObserver utility from @ngrok/mantle/utils
- [sorting](https://mantle.ngrok.com/utils/sorting) ([md](https://mantle.ngrok.com/utils/sorting.md)): Sorting constants, type guards, and comparators from @ngrok/mantle/utils