Index

Index renders the Table of Contents (Index).

Each item in the Index is derived from the Suchi.Section

💡

Index is required to display the Table of Contents.

Props

Prop	Description	Required
hotKey	Overrides the default hotKey to toggle the index	false
desktop	Renders the desktop version only	false
mobile	Renders the mobile version only	false

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 default hotKey to toggle the Index is Cmd + / or Ctrl + /

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.

Root Header