Root

The Root component serves as the main container for all other Suchi components, providing a context (SuchiContext) for them.

It tracks all sections and references, using this information to generate the index and the list of references.

Props

Prop	Description	Required
accentColor	A color to highlight the active section in the index	false
children	Any valid JSX element, including other `Suchi` components	true
className	Custom class names for the `Root` component	false
style	Inline CSS styles	false

accentColor

The Root component accepts an accentColor prop, which is used to highlight the active Indicator and active Item.

When an accentColor is provided, it is also assigned to the --suchi-accentColor CSS variable.

For more information on how to style your Suchi Index, refer to the Styling Guide.

Sample Usage

<Suchi.Root
  accentColor="orangered"
  className="article_wrapper my-8"
  style={{ padding: "16px" }}
>
  <Suchi.Index />
  <Suchi.Header />
  <Suchi.Section>
    <Suchi.SectionHeader />
    <Suchi.Content>
      <Suchi.Reference />
    </Suchi.Content>
  </Suchi.Section>
</Suchi.Root>

Getting Started Index