Suchi comes with a bunch of components that you can import and use them together to create the Index.

import Suchi from "suchi";
 
<Suchi.Root>
  <Suchi.Index />
 
  <Suchi.Header/>
  <Suchi.Section>
    <Suchi.SectionHeader/>
    <Suchi.Content>
      <Suchi.Reference/>
    </Suchi.Content>
  <Suchi.Section>
</Suchi.Root>

Suchi comes with some basic styling to quickly setup an article or page. Use the accentColor prop to match the style according to your brand or site.

However, you can easily style the Index according to your design. You can style your Suchi Components by modifying these CSS Variables.

--suchi-accentColor: #ff4f18;
--suchi-inactive-indicator: rgb(166, 166, 166);
--suchi-inactive-item: rgb(88, 85, 85);
--suchi-scrollbar-color: rgb(176, 176, 176);
--suchi-background-color: white;
--suchi-mobile-elevated-padding: 20px;
--suchi-mobile-padding: 0px;

Each Suchi component can also be styled using CSS attribute selectors.

[data-suchi-indicators] 
[data-suchi-indicator] 
[data-suchi-indicator="active"] 
[data-suchi-indicator="inactive"] 
[data-suchi-desktop-items] 
[data-suchi-desktop-item] 
[data-suchi-desktop-item="active"] 
[data-suchi-desktop-item="inactive"] 

On Chrome iOS, the index tray interferes with the app switcher when one scrolls down. To handle this, we increase the bottom padding on the index tray to lift the index items above the app switcher.

This adjustment is ignored when one scrolls up by clicking on index items.

On larger screens, the desktop is accessible using the CMD + / from the keyboard. You can also use the Up and Down Arrow keys for navigating the items in the Index.

You can also choose a custom hotKey to toggle the Index using the hotkeyprop in Index Component.