Refined UI

An opinionated, customizable superset of shadcn/ui

AgentsPrimitivesSkillsSkins
Guides
  • Overview
  • Get started
  • Shadcn compatibility
  • Architecture
  • Agent surface
Primitives
  • Accordion
  • Alert
  • Alert dialog
  • Aspect ratio
  • Autocomplete
  • Avatar
  • Badge
  • Button
  • Button group
  • Calendar
  • Card
  • Checkbox
  • Checkbox Group
  • Code
  • Code Diff
  • Collapsible
  • Color Picker
  • Combobox
  • Command
  • Date Picker
  • Dialog
  • Drawer
  • Empty
  • Field
  • Form
  • Gradient Editor
  • Hover card
  • Input
  • Input group
  • Input OTP
  • Item
  • Kbd
  • Markdown
  • Menu
  • Menubar
  • Meter
  • Native select
  • Navigation menu
  • Number Field
  • Pagination
  • Popover
  • Progress
  • Radio group
  • Resizable
  • Scroll area
  • Select
  • Sidebar
  • Skeleton
  • Slider
  • Spinner
  • Switch
  • Table
  • Table of contents
  • Tabs
  • Textarea
  • Toast
  • Toggle
  • Toolbar
  • Tooltip
  • Tree
  • Trigger Menu
  • Typography
Hooks
  • Use Chat Message
  • Use Chat Input
  • Use User Ask
  • Use Audio Recorder
  • Use Environment Variables
  • Use Copy To Clipboard
  • Use Tool Call
  • Use Sidebar Resize
Utils
  • cn
  • Skin
  • Contracts
  • Serialize
Extensions
  • Control Effects
  • View Transition
  • Send Aurora
  1. Primitives
  2. Table of contents
Primitives

Table of contents

Sticky in-page navigation with scroll-spy range highlighting.

Composition

The preferred shape for composing the installed primitive from its exported parts.

Root

Single-slot surface with no nested parts.

TableOfContents

The refined source installs this primitive from src/registry/sources/refined/ui/table-of-contents.tsx. Install it on its own with the command above, or inspect the source below.

Registry command
npx shadcn@latest add http://127.0.0.1:3000/r/refined/table-of-contents.json
See registry manifest

Raw code

Primary installed primitive source

Table of contents slot
src/registry/sources/refined/ui/table-of-contents.tsx

On this page

  • Preview
  • Composition
  • Installation
  • Source

Agent surface

A product page can expose the same registry, examples, and installation paths to people and coding agents.

Discovery

The registry index keeps search, install commands, source previews, and generated agent docs aligned.

HTTP API

Each component has a stable endpoint for source files, dependencies, and install metadata.

CLI

The command line mirrors the same catalog so automation does not need a separate contract.

Composition

Blocks compose installable primitives without taking ownership of runner, transport, or persistence logic.

Overrides

Teams can keep the generated source and reshape the markup where their workflow needs it.

Release notes

Long documentation pages stay scannable when the navigation reflects real document hierarchy.

Changelog

Nested headings remain plain anchors, so browser history and copy-link behavior keep working.

Trail

  • Agent surface
    • Discovery
      • HTTP API
      • CLI
    • Composition
      • Overrides
  • Release notes
    • Changelog

Background

  • Agent surface
    • Discovery
      • HTTP API
      • CLI
    • Composition
      • Overrides
  • Release notes
    • Changelog

Both

  • Agent surface
    • Discovery
      • HTTP API
      • CLI
    • Composition
      • Overrides
  • Release notes
    • Changelog