RootProvider

A provider that configures and wraps the root of the application.

The RootProvider component configures renoun at the root of your application. It must wrap the html element and provides configuration for themes, languages, git info, editor links, and the site URL.

import { RootProvider } from 'renoun'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <RootProvider
      theme={{
        light: 'vitesse-light',
        dark: 'vitesse-dark',
      }}
      languages={['ts', 'tsx', 'mdx']}
      git="souporserious/renoun"
      siteUrl="https://renoun.dev"
      images={{
        // Override where image sources (e.g. Figma) are downloaded
        outputDirectory: 'public/assets',
      }}
      sources={{
        // Define a custom source backed by Figma
        icons: {
          type: 'figma',
          fileId: 'KsxgdfVdV3fEQ0oz0CMNeg',
        },

        // Provide a basePathname when your node names include a top-level namespace
        illustration: {
          type: 'figma',
          fileId: 'DxgdfDdVsd3fEQ0oQz0CMNeg',
          basePathname: 'illustration',
        },
      }}
    >
      <html>
        <body>{children}</body>
      </html>
    </RootProvider>
  )
}

When you configure the sources prop you can reference these from the Image component:

  • Using a custom source, e.g. icons:arrow-up or illustration:marketing
  • The built-in figma: protocol, e.g. figma:icons/563:1297

With basePathname, selectors like marketing will also match illustration/marketing inside that file.

The images.outputDirectory option controls where Figma downloads are written (defaults to public/images). It accepts either a path relative to the project root or an absolute path and is shared by the Image component.

See the Configuration guide for more information on the available configuration options.

API Reference

Last updated