Table of Contents

First Heading

This is the first heading.

Sub-Heading

This is a sub-heading H3 example.

Reactive ToC

The ToC reacts to changes on the page and updates when headings change or get added or removed.

Another sub-heading

This one also gets added and removed.

This H4 is excluded

H4 headings were added to the list of excluded heading tags, so this will not show up in the table of contents.

This H2 gets ignored

You can adjust the filter function to show or hide headings based on specific requirements. Check the code for an example.

Accessible by Design

Ato UI is built on top of Melt UI, an accessible headless library that follows WAI-ARIA design patterns and takes care of all the nitty-gritty details like aria attributes, role management, focus handling, and keyboard navigation. You can read more about it on the official Melt UI docs website, where each builder has a thorough description of implemented accessibility features.

Styled Components

Our styled components offer additional functionalities on top of Melt UI builders, while also staying flexible and offering ways to customize each component. This is done through our theme designer, which controls the color palette as well as things like border radiuses and text colors, and through style props that components offer, where you can overwrite default component styles.