feat: create toc component

[araujogui]

Description

Creates a Table-of-contents component for use on small and medium devices

Validation

Light:

Dark:

Related Issues

Related to nodejs/doc-kit#560

Check List

• I have read the Contributing Guidelines and made commit messages that follow the guideline.
• I have run pnpm format to ensure the code follows the style guide.
• I have run pnpm test to check if all tests are passing.
• I have run pnpm build to check if the website builds without errors.
• I've covered new added functionality with unit tests if necessary.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
nodejs-org	Ready	Preview	Jan 23, 2026 6:42pm

[github-actions]

👋 Codeowner Review Request

The following codeowners have been identified for the changed files:

Team reviewers: @nodejs/nodejs-website

Please review the changes when you have a chance. Thank you! 🙏

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 75.01%. Comparing base (dbf3711) to head (ab45404).
⚠️ Report is 2 commits behind head on main.
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #8560   +/-   ##
=======================================
  Coverage   75.01%   75.01%           
=======================================
  Files         103      103           
  Lines        9037     9037           
  Branches      311      311           
=======================================
  Hits         6779     6779           
  Misses       2256     2256           
  Partials        2        2           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[Copilot]

Pull request overview

This PR introduces a new Table of Contents component designed for small and medium devices. The component provides a collapsible navigation aid that allows users to quickly jump to different sections of a page using heading anchors.

Changes:

• Created a new TableOfContents component with configurable depth filtering for headings
• Added Storybook stories demonstrating default and custom depth configurations
• Implemented responsive styling that displays only on small/medium devices (hidden on large screens) with dark mode support

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.

File	Description
packages/ui-components/src/Common/TableOfContents/index.tsx	Main component implementation with filtering logic and collapsible details element
packages/ui-components/src/Common/TableOfContents/index.stories.tsx	Storybook stories demonstrating component usage with sample heading data
packages/ui-components/src/Common/TableOfContents/index.module.css	Styling for the component with responsive breakpoints and theme variants

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[AugustinMauroy]

Any plan for an active item ?

[araujogui]

Any plan for an active item ?

I don't think it is necessary because this component is intended to link users to sections within the same page.

[AugustinMauroy]

Any plan for an active item ?

I don't think it is necessary because this component is intended to link users to sections within the same page.

Okay make sense. also I just checked on our current metabar we didn't have this kind of thing so no problem

[AugustinMauroy]

LGMT & thanks for putting effort there

[github-actions]

Lighthouse Results

URL	Performance	Accessibility	Best Practices	SEO	Report
/en	🟢 98	🟢 96	🟢 100	🟢 100	🔗
/en/about	🟢 99	🟢 97	🟢 100	🟠 88	🔗
/en/about/previous-releases	🟢 99	🟢 100	🟢 100	🟢 100	🔗
/en/download	🟢 98	🟢 100	🟢 100	🟢 100	🔗
/en/download/archive/current	🟢 100	🟢 100	🟢 100	🟢 100	🔗
/en/blog	🟢 100	🟢 100	🟢 96	🟢 100	🔗

[ovflowd]

SGTM!

[malav2110]

Great work @araujogui .
Question: Do we want to update version number in packages > ui-components > package.json by running pnpm version patch in ui-components directory ?

[araujogui]

pnpm version patch

Well remembered! I patched the version

[aymen94]

Great job @araujogui LGTM

[ovflowd]

@avivkeller you removed it from the queue?

[avivkeller]

nits

[avivkeller]

@avivkeller you removed it from the queue?

Yea, I realized I had a few nitpicks left pending. But, they are nitpicks, so feel free to re add.