Skip to main content
/mantle

Migrations

Step-by-step guides for migrating existing code to new @ngrok/mantle APIs and behaviors. Each guide is written to be handed directly to a coding agent — append .md to any guide’s URL to fetch its raw markdown.

Each guide has a number in the order it shipped, and the list shows the newest guide first. The number is the prefix of the guide’s URL.

0012Single Stylesheetmantle.css holds both themes, so mantle-dark.css, MantleStyleSheets, and mantleStyleSheetUrls are gone.
0011Eliminate High ContrastThe high-contrast themes, stylesheets, and variants are gone, MantleStyleSheets takes only darkCssUrl, and ThemeSwitcher is one light/dark toggle.
0010Button Icon SwapThe Button and IconButton icon now sits inside a span. Replace a [&>svg] selector on the button with [&_svg], or size the icon element itself.
0009Chart Root ModeThe chart Roots take mode in place of the decorative boolean: rewrite decorative to mode="decorative", and move sparklines to mode="static".
0008Tabs SeparatorTabs.List no longer draws a border: compose Tabs.Separator after the list, delete hideBorder, and set --tabs-gap instead of a gap-* class on Tabs.Root.
0007App Layout Header SlotsCompose AppLayout.Header from its three slots, let AppLayout.Body be the main landmark, and render the header in every route instead of the shell.
0006DataTable TanStack Table v9Move a DataTable from TanStack Table v8 to v9: useTable with a features object, columnHelper.columns, sortFn, and table.state.
0005Field.Item Control IdField.Item owns the control id: move a child id to Field.Item, drop htmlFor from Field.Label, and update PasswordInput toggle selectors.
0004Priority → Intentpriority is now intent across Button, Alert, AlertDialog, and Toast — and Button and IconButton require explicit appearance and intent.
0003Dialog.Footer DOM OrderDialog.Footer now renders children in DOM order — reverse footer children to preserve their layout.
0002DataTable Action ColumnSwitch a pinned action column's header to DataTable.ActionHeader so it stays aligned on horizontal scroll.
0001CodeBlockMigrate from PrismJS-powered code blocks to mantle's Shiki-powered CodeBlock.