1

Table of Contents

A fixed bottom-left floating block that tracks scroll position, shows the active section via IntersectionObserver, and expands into a navigable section list.

Dependencies

motion

Interaction Type

Hover for micro-clicks; click the pill to expand section list with click audio. Click any section to smooth-scroll.

Props

Options you can pass to customize this component.

Prop
Type
Description
sections*
TOCSection[]

Array of section objects with `id`, `title`, and optional `level` (defaults to 2).

scrollOffset
number

Pixel offset from the top when scrolling to a section. Defaults to 120.

showAfterScroll
number

Scroll distance in pixels before the pill appears. Defaults to 300.

scrollContainer
RefObject<HTMLElement | null>

Optional ref to a scrollable container. When provided, tracks that element instead of the window.

className
string

Extra classes merged onto the root element.

Installation

npx shadcn@latest addhttps://ui.nexvyn.dev/r/table-of-contents.json

How to use

import { useRef } from "react"
import { TableOfContents } from "@/components/ui/table-of-contents"

const sections = [
  { id: "intro", title: "Introduction" },
  { id: "setup", title: "Setup", level: 2 },
  { id: "usage", title: "Usage", level: 2 },
  { id: "api", title: "API Reference", level: 2 },
]

export function DocPage() {
  const scrollRef = useRef<HTMLDivElement>(null)

  return (
    <div ref={scrollRef} className="overflow-y-auto">
      <TableOfContents sections={sections} scrollContainer={scrollRef} />
      {/* page content with matching section IDs */}
    </div>
  )
}

Source Code

Click the code icon in the top-right corner to view the source code.

Contact

Questions or feedback? Reach out anytime.

License & Usage

  • •Free for personal and commercial use
  • •No attribution required
  • •Cannot be resold as a standalone product
  • •Anatomy/blueprint diagrams are licensed separately (CC BY-NC 4.0) and are not for commercial use
// No code loaded.

Introduction

Nexvyn/UI is a modern component library built with React, Tailwind CSS, and motion primitives. It provides production-ready, accessible, and fully typed UI components following a hybrid headless-plus-token architecture.

Every component is designed to work in both light and dark modes, with full keyboard navigation, screen reader support, and responsive layouts. The library prioritizes developer experience with clean APIs and comprehensive TypeScript support.

Getting Started

Install components individually via the shadcn registry using a single command. Each component declares its own dependencies and is fully tree-shakeable, so you only ship the code you actually use.

Components follow a consistent pattern: headless logic for behavior, composable styling via CSS variables, and full TypeScript inference. This makes them easy to customize and integrate into any project.

Features

The library includes spring-based animations, intersection observer patterns, portal-mounted overlays, and responsive design tokens. All motion respects prefers-reduced-motion for accessibility.

Theme switching is instant with no flash. Every visual element uses semantic CSS variables that adapt to light and dark modes automatically. Customizer tokens allow per-component color overrides.

Usage Examples

Import any component directly and pass the required props. All components support both controlled and uncontrolled patterns, className merging via the cn utility, and ref forwarding.

For navigation components, pass an array of items with labels and handle selection via callbacks. For overlay components, manage open state externally or let the component handle it internally.

API Reference

Each component exports a named function and a props interface prefixed with the component name. Props use enum variants via class-variance-authority instead of boolean flags.

Event handlers follow the on[Event] naming convention. All interactive components forward refs and accept standard HTML attributes. Accessibility attributes are handled internally.

Configuration

Override default styles by passing className props. The cn utility merges your classes with internal ones, allowing you to customize any visual aspect without modifying the source.

Design tokens are defined in globals.css and can be overridden at the root level. Each token has a semantic name that maps to the appropriate color in light and dark modes.

Theming

The theme system uses CSS custom properties scoped to the document root. Toggle between light and dark mode via the ThemeToggle component or the T keyboard shortcut.

All components automatically respond to theme changes. No component-level dark mode conditionals are used, ensuring consistent and instant theme switching across the entire library.

FAQ

Components are free for personal and commercial use with no attribution required. They cannot be resold as a standalone product. All implementations are original, built from scratch.

For questions or feedback, reach out via the feedback modal or email. The library is actively maintained with regular updates to fix bugs, improve accessibility, and add new components.

npx shadcn@latest addhttps://ui.nexvyn.dev/r/table-of-contents.json