Installation

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 index.jsx/tsx or your App.jsx/tsx.

import React from "react";
import { PrismaneProvider } from "@prismane/core";

const App = () => {
  return <PrismaneProvider>{/* Rest of application */}</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 React from "react";
import Application from "../somewhere";
import { PrismaneProvider } from "@prismane/core";
import { createTheme } from "@prismane/core/themes";

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

  return (
    <PrismaneProvider theme={theme}>
      <Application />
    </PrismaneProvider>
  );
};

export default App;