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"
      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.

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

API Reference

Last updated