Kikito - TV

Layout

Hierarchical TOC navigator with scroll-aware active highlighting and depth control.

Instalação via CLI

$ npx kikitocn add table-of-contents

Interno:

@/lib/utils

Exemplo de uso

Table of ContentsExample.tsx

import { TableofContents } from "@/components/ui/cn/table-of-contents/TableofContents";

export function TableofContentsExample() {
  return (
    <TableofContents />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`items*`	`TocItem[]`	—	Itens do índice: { id, label, level: 1\|2\|3\|4 }
`title`	`string`	`undefined`	Cabeçalho acima do índice
`activeId`	`string`	`undefined`	ID do item ativo (controlled)
`onItemClick`	`(id: string) => void`	`undefined`	Callback ao clicar em um item
`maxDepth`	`1 \| 2 \| 3 \| 4`	`3`	Profundidade máxima de headings exibidos
`sticky`	`boolean`	`false`	Fixa o TOC ao rolar a página

Voltar para Layout

Carregando…