Nextra Theme Setup and Customization

Nextra Theme Setup and Customization

The Nextra Docs Theme is customized through theme.config.tsx and component overrides. Since it's built on Next.js, you can use Tailwind, CSS Modules, or styled-components.

Custom Logo and Navbar

// theme.config.tsx
import MyLogo from './components/MyLogo';

const config: DocsThemeConfig = {
  logo: <MyLogo />,
  navbar: {
    extraContent: () => (
      <div className="flex items-center gap-2">
        <a href="https://app.myproject.com" className="btn-primary">
          Dashboard →
        </a>
      </div>
    ),
  },
};

Custom 404

// app/not-found.tsx
export default function NotFound() {
  return (
    <div className="flex flex-col items-center py-24">
      <h1 className="text-6xl font-bold">404</h1>
      <p>Page not found</p>
      <a href="/docs">← Back to docs</a>
    </div>
  );
}

Override Theme Components

// theme.config.tsx
const config: DocsThemeConfig = {
  components: {
    h1: ({ children }) => (
      <h1 className="my-custom-h1">{children}</h1>
    ),
    code: ({ children, className }) => (
      <code className={`my-code ${className}`}>{children}</code>
    ),
  },
};

Global MDX Components

// app/layout.tsx or mdx-components.tsx
import type { MDXComponents } from 'mdx/types';
import { Callout, Steps, Step } from 'nextra/components';
import ApiTable from '@/components/ApiTable';

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...components,
    ApiTable,
    // Custom table
    table: ({ children }) => (
      <div className="overflow-x-auto">
        <table className="min-w-full">{children}</table>
      </div>
    ),
  };
}

CSS Customization

/* styles/globals.css */
:root {
  --nextra-primary-hue: 212deg;
  --nextra-primary-saturation: 80%;
}

/* Override prose styles */
.nextra-content .prose {
  --tw-prose-body: #374151;
  --tw-prose-headings: #111827;
}

/* Sidebar */
.nextra-sidebar-container {
  background: #f8fafc;
}

i18n for Multilingual Documentation

// next.config.ts
const withNextra = nextra({ /* ... */ });
export default withNextra({
  i18n: {
    locales: ['en', 'ru', 'de'],
    defaultLocale: 'en',
  },
});

// content/ru/_meta.json
{
  "index": "Introduction",
  "guide": "Guide",
  "api": "API Reference"
}

Customizing the Nextra theme takes 1–3 days.