A section of the page or article.

Each Section adds an Item in the Index. When an Index Item is clicked, the corresponding section scrolls into view.

Each Section couples the corresponding SectionHeader and SectionContent together.

Index Items are created from the Section Headers

Mastering React Hooks

Introduction

Getting Started

Advanced Techniques

Props

Prop	Type	Default
`children`	`ReactNode`	-
`className`	`string`	`""`
`style`	`CSSProperties`	`{}`

Sample Usage

page.tsx

<Suchi.Root accentColor="orangered" className="article_wrapper my-8" style={{ padding: "16px"}}>
  <Suchi.Index />
  <Suchi.Header className="my-4 text-3xl font-bold">Building a NPM Libray</Suchi.Header>
 

  <Suchi.Section className="my-4">
    <Suchi.SectionHeader/>
    <Suchi.Content>
      <Suchi.Reference/>
    </Suchi.Content>

  <Suchi.Section>
</Suchi.Root>

Section

Mastering React Hooks

Introduction

Introduction

Getting Started

Getting Started

Advanced Techniques

Advanced Techniques

Props

Sample Usage

On this page