CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-docusaurus--theme-classic

Classic theme for Docusaurus static site generator providing comprehensive React component library for documentation sites

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

index.mddocs/

Docusaurus Classic Theme

Docusaurus Classic Theme is a comprehensive React component library that provides the complete user interface for Docusaurus documentation sites. It offers 172+ React components covering layout, navigation, content rendering, and interactive elements with built-in dark mode, internationalization, and accessibility support.

Package Information

  • Package Name: @docusaurus/theme-classic
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @docusaurus/theme-classic
  • Peer Dependencies: react ^18.0.0 || ^19.0.0, react-dom ^18.0.0 || ^19.0.0
  • Node Engine: >=18.0

Core Imports

The theme is primarily configured as a Docusaurus plugin:

import type { Config } from '@docusaurus/types';

const config: Config = {
  themes: ['@docusaurus/theme-classic'],
  themeConfig: {
    // Theme configuration options
  },
};

For component imports (when swizzling/customizing):

import type { Props } from '@theme/Layout';
import Layout from '@theme/Layout';
import Navbar from '@theme/Navbar';
import Footer from '@theme/Footer';

Named plugin exports:

import { validateThemeConfig, validateOptions, getSwizzleConfig } from '@docusaurus/theme-classic';

CommonJS:

const { validateThemeConfig, validateOptions, getSwizzleConfig } = require('@docusaurus/theme-classic');

Basic Usage

Simple theme configuration:

// docusaurus.config.js
export default {
  title: 'My Site',
  themes: ['@docusaurus/theme-classic'],
  themeConfig: {
    navbar: {
      title: 'My Site',
      items: [
        {
          type: 'doc',
          docId: 'intro',
          position: 'left',
          label: 'Docs',
        },
      ],
    },
  },
};

Advanced configuration with custom CSS and full theme options:

// docusaurus.config.js
import { themes } from 'prism-react-renderer';

export default {
  title: 'My Site',
  themes: [
    [
      '@docusaurus/theme-classic',
      {
        customCss: require.resolve('./src/css/custom.css'),
      },
    ],
  ],
  themeConfig: {
    colorMode: {
      defaultMode: 'light',
      disableSwitch: false,
      respectPrefersColorScheme: true,
    },
    navbar: {
      title: 'My Site',
      logo: {
        alt: 'My Site Logo',
        src: 'img/logo.svg',
      },
      items: [
        {
          type: 'doc',
          docId: 'intro',
          position: 'left',
          label: 'Tutorial',
        },
        {
          href: 'https://github.com/facebook/docusaurus',
          label: 'GitHub',
          position: 'right',
        },
      ],
    },
    footer: {
      style: 'dark',
      links: [
        {
          title: 'Docs',
          items: [
            {
              label: 'Tutorial',
              to: '/docs/intro',
            },
          ],
        },
      ],
      copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc.`,
    },
    prism: {
      theme: themes.github,
      darkTheme: themes.dracula,
    },
  },
};

Architecture

The theme is organized around several key architectural components:

  • Plugin System: Main theme plugin that registers components and handles configuration
  • Component Library: 172+ React components organized by functional areas (Layout, Navigation, Content, etc.)
  • Theming System: CSS custom properties and theme context for dark/light mode support
  • Swizzling System: Component customization mechanism allowing safe overrides
  • Internationalization: Built-in i18n support with translation management
  • Type System: Comprehensive TypeScript definitions for all components and configuration

Capabilities

Core Plugin Functionality

Main theme plugin that configures Docusaurus with the classic theme components and styling.

export default function themeClassic(
  context: LoadContext,
  options: PluginOptions,
): Plugin<undefined>;

interface PluginOptions {
  customCss: string[];
}

interface Options {
  customCss?: string[] | string;
}

Core Plugin

Layout Components

Fundamental layout components that structure the page layout including the main layout wrapper, navigation, footer, and responsive design elements.

// Main layout wrapper
interface LayoutProps {
  readonly children?: ReactNode;
  readonly noFooter?: boolean;
  readonly wrapperClassName?: string;
  readonly title?: string;
  readonly description?: string;
}

function Layout(props: LayoutProps): ReactNode;

// Layout provider for theme context
interface LayoutProviderProps {
  readonly children: ReactNode;
}

function LayoutProvider(props: LayoutProviderProps): ReactNode;

Layout Components

Navigation Components

Navigation system including navbar, mobile sidebar, navigation items, and breadcrumb components.

// Main navbar
function Navbar(): ReactNode;

// Navbar items with multiple types
interface NavbarItemProps {
  readonly position?: 'left' | 'right';
  readonly type?: 'default' | 'doc' | 'dropdown' | 'search' | 'localeDropdown' | 'docsVersionDropdown';
}

function NavbarItem(props: NavbarItemProps): ReactNode;

// Navigation link component
interface NavbarNavLinkProps {
  readonly activeBasePath?: string;
  readonly activeBaseRegex?: string;
  readonly exact?: boolean;
  readonly label?: ReactNode;
  readonly html?: string;
  readonly prependBaseUrlToHref?: boolean;
  readonly isDropdownLink?: boolean;
}

function NavbarNavLink(props: NavbarNavLinkProps): ReactNode;

Navigation Components

Documentation Components

Documentation-specific components including document pages, sidebars, table of contents, and document navigation.

// Document item wrapper
interface DocItemProps {
  readonly children: ReactNode;
}

function DocItem(props: DocItemProps): ReactNode;

// Documentation sidebar
interface DocSidebarProps {
  readonly path: string;
  readonly sidebar: readonly PropSidebarItem[];
  readonly onCollapse: () => void;
  readonly isHidden: boolean;
}

function DocSidebar(props: DocSidebarProps): ReactNode;

// Table of contents
interface TOCProps {
  readonly toc: readonly TOCItem[];
  readonly minHeadingLevel?: number;
  readonly maxHeadingLevel?: number;
  readonly className?: string;
}

function TOC(props: TOCProps): ReactNode;

Documentation Components

Blog Components

Blog functionality including blog layout, post items, author components, and blog navigation.

// Blog layout
interface BlogLayoutProps {
  readonly children?: ReactNode;
  readonly sidebar?: BlogSidebar;
  readonly toc?: ReactNode;
  readonly title?: string;
  readonly description?: string;
}

function BlogLayout(props: BlogLayoutProps): ReactNode;

// Blog post item
interface BlogPostItemProps {
  children: ReactNode;
  className?: string;
}

function BlogPostItem(props: BlogPostItemProps): ReactNode;

// Blog author component
interface BlogAuthorProps {
  readonly as?: 'h1' | 'h2';
  readonly author: Author;
  readonly className?: string;
  readonly count?: number;
}

function BlogAuthor(props: BlogAuthorProps): ReactNode;

Blog Components

Content Components

Content rendering components including MDX components, code blocks, admonitions, and interactive elements.

// Code block with syntax highlighting
interface CodeBlockProps {
  readonly children: ReactNode;
  readonly className?: string;
  readonly metastring?: string;
  readonly title?: ReactNode;
  readonly language?: string;
  readonly showLineNumbers?: boolean | number;
}

function CodeBlock(props: CodeBlockProps): ReactNode;

// Admonition callouts
interface AdmonitionProps {
  readonly children: ReactNode;
  readonly type: string;
  readonly icon?: ReactNode;
  readonly title?: ReactNode;
  readonly className?: string;
}

function Admonition(props: AdmonitionProps): ReactNode;

// Tabs component
interface TabsProps {
  readonly children: ReactNode;
  readonly defaultValue?: string;
  readonly values?: TabItem[];
  readonly className?: string;
  readonly queryString?: string | boolean;
  readonly lazy?: boolean;
}

function Tabs(props: TabsProps): ReactNode;

Content Components

Theme Configuration

Theme configuration system including color mode, styling options, and component swizzling.

// Theme configuration validation
function validateThemeConfig(params: {
  themeConfig: ThemeConfig;
  validate: ValidationContext;
}): ThemeConfig;

// Plugin options validation  
function validateOptions(params: {
  options: Options;
  validate: ValidationContext;
}): PluginOptions;

// Swizzle configuration
function getSwizzleConfig(): SwizzleConfig;

interface SwizzleConfig {
  components: {
    [componentName: string]: {
      actions: {
        eject: 'safe' | 'unsafe' | 'forbidden';
        wrap: 'safe' | 'unsafe' | 'forbidden';
      };
      description: string;
    };
  };
}

Theme Configuration

Icon Components

Standardized SVG icons for UI elements, navigation, and social media platforms used throughout the theme.

// Core UI icons
function IconArrow(props: ComponentProps<'svg'>): ReactNode;
function IconDarkMode(props: ComponentProps<'svg'>): ReactNode;
function IconLightMode(props: ComponentProps<'svg'>): ReactNode;
function IconMenu(props: ComponentProps<'svg'>): ReactNode;
function IconEdit(props: ComponentProps<'svg'>): ReactNode;

// Social media icons
function IconGitHub(props: ComponentProps<'svg'>): ReactNode;
function IconTwitter(props: ComponentProps<'svg'>): ReactNode;
function IconLinkedIn(props: ComponentProps<'svg'>): ReactNode;

Icon Components

Utility Components

Utility components for search, accessibility, error handling, content visibility, and enhanced media support.

// Search and metadata
function SearchBar(): ReactNode;
function SearchMetadata(props: {locale?: string; version?: string; tag?: string}): ReactNode;

// Accessibility
function SkipToContent(): ReactNode;
function BackToTopButton(): ReactNode;

// Content management
function NotFound(): ReactNode;
function ThemedImage(props: {sources: {light: string; dark: string}}): ReactNode;
function Heading(props: {as: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'}): ReactNode;

Utility Components

Types

// Load context from Docusaurus core
interface LoadContext {
  siteDir: string;
  siteConfig: DocusaurusConfig;
  outDir: string;
  baseUrl: string;
  i18n: I18nConfig;
  ssrTemplate: string;
  codeTranslations: {[locale: string]: Record<string, string>};
  siteStorage: SiteStorage;
}

// Plugin interface
interface Plugin<T = unknown> {
  name: string;
  loadContent?(): Promise<T> | T;
  contentLoaded?(args: {
    content: T;
    actions: PluginContentLoadedActions;
  }): Promise<void> | void;
  routesLoaded?(routes: RouteConfig[]): void;
  postBuild?(props: Props): Promise<void> | void;
  postStart?(props: Props): Promise<void> | void;
  getThemePath?(): string;
  getTypeScriptThemePath?(): string;
  getClientModules?(): string[];
  configureWebpack?(
    config: Configuration,
    isServer: boolean,
    utils: ConfigureWebpackUtils,
    content: T,
  ): Configuration | void;
  configurePostCss?(options: PostCssOptions): PostCssOptions;
  injectHtmlTags?(args: {content: T}): {
    headTags?: HtmlTags;
    preBodyTags?: HtmlTags;
    postBodyTags?: HtmlTags;
  };
  getTranslationFiles?(): TranslationFileObject[];
  translateContent?(args: {
    content: T;
    translationFiles: TranslationFile[];
  }): T;
  translateThemeConfig?(args: {
    themeConfig: ThemeConfig;
    translationFiles: TranslationFile[];
  }): ThemeConfig;
  getDefaultCodeTranslationMessages?(): Record<string, string>;
}

// Theme configuration interface
interface ThemeConfig {
  // Color mode configuration
  colorMode?: {
    defaultMode: 'light' | 'dark';
    disableSwitch: boolean;
    respectPrefersColorScheme: boolean;
  };
  
  // Navbar configuration
  navbar?: {
    title?: string;
    logo?: {
      alt?: string;
      src: string;
      srcDark?: string;
      href?: string;
      target?: string;
      width?: string | number;
      height?: string | number;
      className?: string;
      style?: CSSProperties;
    };
    items: NavbarItem[];
    hideOnScroll?: boolean;
    style?: 'primary' | 'dark';
  };
  
  // Footer configuration
  footer?: {
    style: 'light' | 'dark';
    links?: FooterLinks;
    copyright?: string;
    logo?: {
      alt?: string;
      src: string;
      srcDark?: string;
      href?: string;
      width?: string | number;
      height?: string | number;
    };
  };
  
  // Prism configuration
  prism?: {
    theme?: PrismTheme;
    darkTheme?: PrismTheme;
    additionalLanguages?: string[];
    defaultLanguage?: string;
    magicComments?: MagicCommentConfig[];
  };
  
  // Docs configuration
  docs?: {
    versionPersistence: 'localStorage' | 'none';
    sidebar: {
      hideable: boolean;
      autoCollapseCategories: boolean;
    };
  };
  
  // Blog configuration
  blog?: {
    sidebar: {
      groupByYear: boolean;
    };
  };
  
  // Announcement bar
  announcementBar?: {
    id: string;
    content: string;
    backgroundColor?: string;
    textColor?: string;
    isCloseable?: boolean;
  };
}

// React node type for components
type ReactNode = React.ReactNode;

// Component props base
interface ComponentProps<T extends keyof JSX.IntrinsicElements> 
  extends React.ComponentProps<T> {}

Install with Tessl CLI

npx tessl i tessl/npm-docusaurus--theme-classic

docs

blog-components.md

content-components.md

core-plugin.md

documentation-components.md

icon-components.md

index.md

layout-components.md

navigation-components.md

theme-configuration.md

utility-components.md

tile.json