Skip to content
Buy
Core ElementsFree

Floating TOC

A sticky table of contents with an active-section indicator.

Usage

Theming WunderUI

Why tokens

Every color, radius and shadow in WunderUI is a token. Change one value and every component that uses it follows, in light and in dark.

Every color, radius and shadow in WunderUI is a token. Change one value and every component that uses it follows, in light and in dark.

Set up the theme

Import the stylesheet once at the root of your app. The tokens live on :root, so any element can read them without a provider.

Import the stylesheet once at the root of your app. The tokens live on :root, so any element can read them without a provider.

Dark mode

Dark values sit under the .dark class. Toggle it on <html> and the whole interface switches, including charts and focus rings.

Dark values sit under the .dark class. Toggle it on <html> and the whole interface switches, including charts and focus rings.

Brand colors

Override --primary and its foreground to rebrand. Tints and hovers are mixed from it, so they stay in tune.

Override --primary and its foreground to rebrand. Tints and hovers are mixed from it, so they stay in tune.

Ship it

Tokens compile to plain CSS custom properties. Nothing runs at build time, and nothing extra ships to the browser.

Tokens compile to plain CSS custom properties. Nothing runs at build time, and nothing extra ships to the browser.

On this page

Installation

bash
npm install @wunderui/react

Then import what you need:

tsx
import { FloatingToc } from "@wunderui/react"

Examples

Floating TOC

A table of contents whose marker follows the section you read. Scroll the article or click an entry; sub-sections are indented with depth.

What's new in 2.4

Overview

Version 2.4 brings modes to the sidebar, the navbar and the dropdown menu, and a faster data grid.

Version 2.4 brings modes to the sidebar, the navbar and the dropdown menu, and a faster data grid.

New features

Six sidebar modes, a navbar that hides on scroll, and a mega menu that works as a disclosure.

Six sidebar modes, a navbar that hides on scroll, and a mega menu that works as a disclosure.

Sidebar modes

Docked, offcanvas, icon rail, rail with flyouts, double sidebar and overlay drawer — each with its own example.

Docked, offcanvas, icon rail, rail with flyouts, double sidebar and overlay drawer — each with its own example.

Navbar

Sticky, transparent over a hero, and an overflow menu that collects links that no longer fit.

Sticky, transparent over a hero, and an overflow menu that collects links that no longer fit.

Fixes

Menus size to their content, focus returns to the trigger, and reduced motion is honoured everywhere.

Menus size to their content, focus returns to the trigger, and reduced motion is honoured everywhere.

Upgrade

Run the codemod, then check the changelog for the two renamed props.

Run the codemod, then check the changelog for the two renamed props.

On this page

In context

How the component is used inside real screens — the same compositions as the Usage section of the Figma page.

Article with contents

A long guide with its table of contents on the right. Scroll the article or click an entry: the marker follows.

Theming WunderUI

Why tokens

Every color, radius and shadow in WunderUI is a token. Change one value and every component that uses it follows, in light and in dark.

Every color, radius and shadow in WunderUI is a token. Change one value and every component that uses it follows, in light and in dark.

Set up the theme

Import the stylesheet once at the root of your app. The tokens live on :root, so any element can read them without a provider.

Import the stylesheet once at the root of your app. The tokens live on :root, so any element can read them without a provider.

Dark mode

Dark values sit under the .dark class. Toggle it on <html> and the whole interface switches, including charts and focus rings.

Dark values sit under the .dark class. Toggle it on <html> and the whole interface switches, including charts and focus rings.

Brand colors

Override --primary and its foreground to rebrand. Tints and hovers are mixed from it, so they stay in tune.

Override --primary and its foreground to rebrand. Tints and hovers are mixed from it, so they stay in tune.

Ship it

Tokens compile to plain CSS custom properties. Nothing runs at build time, and nothing extra ships to the browser.

Tokens compile to plain CSS custom properties. Nothing runs at build time, and nothing extra ships to the browser.

On this page

PreviousFile TreeNextHolo Card