Next.js Setup

To use Prismane inside your website or app, you should install it first, by running one of the following commands:

npm i @prismane/core

yarn add @prismane/core

pnpm add @prismane/core

After installing the @prismane/core package, you have to wrap your application with our custom PrismaneProvider component. This can be either in your _app.jsx/tsx.

function App({ Component, pageProps }) {
  return (
    <PrismaneProvider>
      <Component {...pageProps} />
    </PrismaneProvider>
  );
}

export default App;

If you want to use the icons that are used inside of the examples, you must install the @phosphor-icons/react library.

If you want to use the fonts that are used inside of the examples, you must install the @fontsource/inter library.

If you want to use a custom theme, with custom colors, spacing and more, you can achieve that by providing a theme prop to the PrismaneProvider component.

You can achieve that functionality by importing the createTheme function from @prismane/core/themes. This function allows you to extend the Prismanebase theme with your custom options.

import { PrismaneProvider } from "@prismane/core";
import { createTheme } from "@prismane/core/themes";

function App({ Component, pageProps }) {
  const theme = createTheme({
    colors: {
      primary: {
        100: "#ffffff",
      },
    },
  });

  return (
    <PrismaneProvider theme={theme}>
      <Component {...pageProps} />
    </PrismaneProvider>
  );
}

export default App;