Index renders the Table of Contents (Index).

Each section in Suchi generates an index item, with the item's text derived from the SectionHeader.

Props

Example:

<Index />         // Renders BOTH desktop and mobile versions
<Index desktop /> // Renders ONLY the desktop version
<Index mobile />  // Renders ONLY the mobile version

Sample Usage

<Suchi.Root accentColor="orangered" className="article_wrapper" className="my-8">
 
  // Required to render the Table of Contents

  <Suchi.Index

    hotKey="cmd + i"  // overrides the default hotKey "cmd + /"

  />
 
 
  <Suchi.Header/>
  <Suchi.Section>
    <Suchi.SectionHeader/>
    <Suchi.Content>
      <Suchi.Reference/>
    </Suchi.Content>
  <Suchi.Section>
</Suchi.Root>

Accessibility

The Index component can be easily accessed on desktop devices by pressing Cmd + / or Ctrl + /. You can also use a custom hotKey using the hotKey prop.

Additionally, users can navigate through the index items using the Arrow Up or Arrow Down keys.