Components API

Complete props reference for all exported components.

Layout components

Navigation sidebar with sections and collapsible folders.

prop	type	default
`title`	string	-
`logo?`	ReactNode	-
`navigation`	SidebarSection[]	-
`basePath?`	string	"/docs"
`github?`	string	-
`collapsible?`	boolean	-
`defaultOpenLevel?`	number	0

SidebarSection

typescript

interface SidebarSection {
  title: string;
  items: (SidebarItem | SidebarFolder | DocMeta)[];
}

SidebarItem

typescript

interface SidebarItem {
  type: "item";
  title: string;
  href: string;
  icon?: ReactNode;
}

SidebarFolder

typescript

interface SidebarFolder {
  type: "folder";
  title: string;
  items: (SidebarItem | SidebarFolder)[];
  defaultOpen?: boolean;
  icon?: ReactNode;
  href?: string;
}

MobileNav

Mobile navigation drawer. No props required.

Breadcrumb navigation based on current path.

prop	type	default
`base?`	string	"/docs"

prop	type	default
`variant?`	"default" \| "minimal"	"default"
`zigzag?`	boolean	-

TocInline

Inline table of contents for embedding in content.

prop	type	default
`headings`	Heading[]	-
`title?`	string	"on this page"
`collapsible?`	boolean	true
`defaultOpen?`	boolean	false

Content components

CodeBlock

Syntax highlighted code with copy button.

prop	type	default
`children`	ReactNode	-
`lang?`	string	-
`title?`	string	-
`lines?`	boolean	-

CodeGroup

Tabbed code blocks for multiple examples.

prop	type	default
`defaultValue?`	string	-
`group?`	string	"global"
`persist?`	boolean	true
`children`	ReactNode	-

CodeTab

Individual tab in a code group.

prop	type	default
`value`	string	-
`label`	string	-
`children`	ReactNode	-

Callout

Highlighted message boxes.

prop	type	default
`type?`	"info" \| "warning" \| "error" \| "tip" \| "note"	"info"
`title?`	string	-
`children`	ReactNode	-

Steps

Numbered step list container.

prop	type	default
`children`	ReactNode	-

Step

Individual step in a steps list.

prop	type	default
`children`	ReactNode	-

Tabs

Tabbed content panels.

prop	type	default
`items`	readonly string[]	-
`defaultValue?`	string	-
`children`	ReactNode	-

Tab

Individual tab panel.

prop	type	default
`value`	string	-
`children`	ReactNode	-

Cards

Grid of linked cards.

prop	type	default
`children`	ReactNode	-

Card

Individual card in a cards grid.

prop	type	default
`title`	string	-
`description?`	string	-
`href?`	string	-
`icon?`	ReactNode	-

Accordion

Collapsible content sections.

prop	type	default
`children`	ReactNode	-

AccordionItem

Individual accordion section.

prop	type	default
`title`	string	-
`children`	ReactNode	-
`defaultOpen?`	boolean	-

Files

File tree display container.

prop	type	default
`children`	ReactNode	-

File

File in a file tree.

prop	type	default
`name`	string	-

Folder

Folder in a file tree.

prop	type	default
`name`	string	-
`defaultOpen?`	boolean	-
`children?`	ReactNode	-

TypeTable

API property documentation table.

prop	type	default
`data`	Record<string, TypeInfo>	-

TypeInfo

typescript

interface TypeInfo {
  type: string;
  description?: string;
  default?: string;
  required?: boolean;
}

Utility components

Badge

Inline status badges.

prop	type	default
`variant?`	"default" \| "success" \| "warning" \| "error" \| "info"	"default"
`children`	ReactNode	-

Dismissible page banners.

prop	type	default
`variant?`	"default" \| "rainbow"	"default"
`id?`	string	-
`children`	ReactNode	-

Link

External link with indicator icon.

prop	type	default
`href`	string	-
`children`	ReactNode	-

Zoom

Image lightbox for enlarging images.

prop	type	default
`children`	ReactNode	-

Hover hint tooltip.

prop	type	default
`content`	ReactNode	-
`children`	ReactNode	-

Github

GitHub repository info display.

prop	type	default
`repo`	string	-

Video

Embedded video player.

prop	type	default
`src`	string	-
`title?`	string	-

Mermaid

Mermaid diagram renderer.

prop	type	default
`chart`	string	-

ThemeToggle

Light/dark mode toggle button.

prop	type	default
`defaultTheme?`	"light" \| "dark" \| "system"	"system"

BackToTop

Scroll to top button.

prop	type	default
`threshold?`	number	300

Anchor

Heading with copy-link functionality.

prop	type	default
`id`	string	-
`children`	ReactNode	-

Also exported as H1, H2, H3, H4, H5, H6 with appropriate heading levels.

Complete props reference for all exported components.

Layout components

Navigation sidebar with sections and collapsible folders.

prop	type	default
`title`	string	-
`logo?`	ReactNode	-
`navigation`	SidebarSection[]	-
`basePath?`	string	"/docs"
`github?`	string	-
`collapsible?`	boolean	-
`defaultOpenLevel?`	number	0

SidebarSection

typescript

interface SidebarSection {
  title: string;
  items: (SidebarItem | SidebarFolder | DocMeta)[];
}

SidebarItem

typescript

interface SidebarItem {
  type: "item";
  title: string;
  href: string;
  icon?: ReactNode;
}

SidebarFolder

typescript

interface SidebarFolder {
  type: "folder";
  title: string;
  items: (SidebarItem | SidebarFolder)[];
  defaultOpen?: boolean;
  icon?: ReactNode;
  href?: string;
}

MobileNav

Mobile navigation drawer. No props required.

Breadcrumb navigation based on current path.

prop	type	default
`base?`	string	"/docs"

prop	type	default
`variant?`	"default" \| "minimal"	"default"
`zigzag?`	boolean	-

TocInline

Inline table of contents for embedding in content.

prop	type	default
`headings`	Heading[]	-
`title?`	string	"on this page"
`collapsible?`	boolean	true
`defaultOpen?`	boolean	false

Content components

CodeBlock

Syntax highlighted code with copy button.

prop	type	default
`children`	ReactNode	-
`lang?`	string	-
`title?`	string	-
`lines?`	boolean	-

CodeGroup

Tabbed code blocks for multiple examples.

prop	type	default
`defaultValue?`	string	-
`group?`	string	"global"
`persist?`	boolean	true
`children`	ReactNode	-

CodeTab

Individual tab in a code group.

prop	type	default
`value`	string	-
`label`	string	-
`children`	ReactNode	-

Callout

Highlighted message boxes.

prop	type	default
`type?`	"info" \| "warning" \| "error" \| "tip" \| "note"	"info"
`title?`	string	-
`children`	ReactNode	-

Steps

Numbered step list container.

prop	type	default
`children`	ReactNode	-

Step

Individual step in a steps list.

prop	type	default
`children`	ReactNode	-

Tabs

Tabbed content panels.

prop	type	default
`items`	readonly string[]	-
`defaultValue?`	string	-
`children`	ReactNode	-

Tab

Individual tab panel.

prop	type	default
`value`	string	-
`children`	ReactNode	-

Cards

Grid of linked cards.

prop	type	default
`children`	ReactNode	-

Card

Individual card in a cards grid.

prop	type	default
`title`	string	-
`description?`	string	-
`href?`	string	-
`icon?`	ReactNode	-

Accordion

Collapsible content sections.

prop	type	default
`children`	ReactNode	-

AccordionItem

Individual accordion section.

prop	type	default
`title`	string	-
`children`	ReactNode	-
`defaultOpen?`	boolean	-

Files

File tree display container.

prop	type	default
`children`	ReactNode	-

File

File in a file tree.

prop	type	default
`name`	string	-

Folder

Folder in a file tree.

prop	type	default
`name`	string	-
`defaultOpen?`	boolean	-
`children?`	ReactNode	-

TypeTable

API property documentation table.

prop	type	default
`data`	Record<string, TypeInfo>	-

TypeInfo

typescript

interface TypeInfo {
  type: string;
  description?: string;
  default?: string;
  required?: boolean;
}

Utility components

Badge

Inline status badges.

prop	type	default
`variant?`	"default" \| "success" \| "warning" \| "error" \| "info"	"default"
`children`	ReactNode	-

Dismissible page banners.

prop	type	default
`variant?`	"default" \| "rainbow"	"default"
`id?`	string	-
`children`	ReactNode	-

Link

External link with indicator icon.

prop	type	default
`href`	string	-
`children`	ReactNode	-

Zoom

Image lightbox for enlarging images.

prop	type	default
`children`	ReactNode	-

Hover hint tooltip.

prop	type	default
`content`	ReactNode	-
`children`	ReactNode	-

Github

GitHub repository info display.

prop	type	default
`repo`	string	-

Video

Embedded video player.

prop	type	default
`src`	string	-
`title?`	string	-

Mermaid

Mermaid diagram renderer.

prop	type	default
`chart`	string	-

ThemeToggle

Light/dark mode toggle button.

prop	type	default
`defaultTheme?`	"light" \| "dark" \| "system"	"system"

BackToTop

Scroll to top button.

prop	type	default
`threshold?`	number	300

Anchor

Heading with copy-link functionality.

prop	type	default
`id`	string	-
`children`	ReactNode	-

Also exported as H1, H2, H3, H4, H5, H6 with appropriate heading levels.