useConfig
Retrieve the parsed global Boltdocs configuration object.
The useConfig hook allows custom components to access properties from the active boltdocs.config.ts file, such as base paths, localized directories, navigation entries, and theme settings.
Import
import { useConfig } from 'boltdocs/client'
Response Schema
The hook returns the full parsed configurations matching the BoltdocsConfig interface:
interface BoltdocsConfig {
base?: string // The root URL directory prefix path (defaults to '/docs')
theme?: {
title?: string | Record<string, string> // Page title/branding label (with localized strings option)
logo?: string | { light: string; dark: string; alt?: string; width?: number; height?: number }
navbar?: NavbarLink[] // Global navbar links
socialLinks?: SocialLink[] // Social links (e.g. github, twitter)
githubRepo?: string // Owner/repository string for GitHub widgets
tabs?: TabConfig[] // Custom tabs/categories configuration
}
i18n?: {
locales: string[] | Record<string, string> // Supported locale keys / language labels
defaultLocale: string // Default/fallback language code
localeConfigs?: Record<string, LocaleConfig> // Translations/meta configs for locales
}
versions?: {
versions: VersionConfig[] // Available documentation version tags
defaultVersion: string // Default version path
}
directoryMeta?: Record<string, DirectoryMeta> // Metadata configurations for directories/folders
}
Usage Example
The example below shows how to access the custom metadata options from the configuration to show custom footer copyrights:
import React from 'react'
import { useConfig } from 'boltdocs/client'
export default function CustomFooter() {
const config = useConfig()
const currentYear = new Date().getFullYear()
return (
<footer className="mt-20 border-t py-8 text-center text-xs text-muted">
<p>
© {currentYear} {typeof config.theme?.title === 'string' ? config.theme.title : 'Project'}.
All rights reserved.
</p>
</footer>
)
}
Last updated on July 27, 2026