This post demonstrates a strict vertical Table of Contents design with smooth cubic Bézier S-curves connecting heading levels. The vertical lines stay perfectly straight (│) while diagonals transition smoothly (╲ or ╱) using cubic Bézier curves with vertically-aligned control points for perfect tangent continuity.

Features Demonstrated

  • Strict vertical lines (│) at each TOC item position
  • Smooth S-curve transitions between heading levels using cubic Bézier curves
  • Vertically-aligned control points for perfect tangent continuity
  • IntersectionObserver-based ScrollSpy with rootMargin for precise activation
  • Smooth SVG path animation with transition: d 0.35s cubic-bezier(0.4, 0, 0.2, 1)
  • Drop shadow glow on active path segment
  • Sidebar auto-scroll to keep active item visible
Strict Vertical Curvy Corners Navigation

Documentation Guide

Introduction

Welcome to the component documentation. This guide will walk you through setup, configuration, and advanced usage examples.

Getting Started

To start using the UI components, install the library package via your preferred package manager and import the base stylesheets into your root component.

Usage

Basic usage examples showing how to import, mount, and configure basic properties for standard web applications.

API Reference

Detailed API reference covering all available properties, slots, emitted events, and programmatic instance methods.

Props

Pass dynamic properties to control themes, layout variants, behavior flags, and custom dimensions.

Slots

Utilize named slots to inject custom HTML elements, icons, or nested components into designated layout areas.

Events

Listen for key lifecycle events such as click, scroll, change, and validation callbacks.

Theme Configuration

Customize primary colors, dark mode tokens, typography variables, and component radius parameters.

Dark Mode

Automatic dark mode toggle support using CSS variables or system color preference media queries.

Custom Styles

Override default utility classes or append custom CSS rules for specific brand integration needs.

Troubleshooting

Common issues, installation warnings, dependency conflicts, and their quick resolution steps.

Changelog

Version release notes, bug fixes, breaking changes, and performance optimization details.