Use the Default Library

Beta

These docs rely on Slice Machine, which is in active development and subject to change. Content Relationships are not currently supported with Slices.

This article will teach you how to add and customize the default library in your project.


Connect the Default Library

If you have Slice Machine enabled on your Prismic repo then the default library will be automatically added and set up for you in your repository. You'll just need to select them in your custom types.

Install the library in your project

You'll need to install the essential-slices package in your project with the package manager of your choice. (If you used the setup command this is already done for you.)

  • npm
  • Yarn
Copy
npm install essential-slices
Copy
yarn add essential-slices

Then specify the library in your sm.json.

Copy
{
  "apiEndpoint": "https://your-repo-name.cdn.prismic.io/api/v2",
  "libraries": [
    "@/slices",
    "essential-slices"
  ],
  "_latest": "0.0.44",
  "storybook": "http://localhost:8888"
}

Customize the Default Library

You've built a page with the library, now it's time to customize it. We provide a theme option to make these excellent components your own.

Example Video:

Themes

Open the _app.js file at the root of your page folder where you will be able to customize the style of your components.

You can create a custom theme by creating a variable to hold your style and spreading it on top of the predefined theme or you can import your own pre-defined theme. In the following example, we will give the variable name customTheme.

You need to pass your customTheme to the ThemeProvider theme prop.

Copy
// pages/_app.js
import React from "react";
import NextApp from "next/app";

import { theme } from "essential-slices";

import { ThemeProvider, BaseStyles } from "theme-ui";

const customTheme = {
  ...theme,
  colors: {
    ...theme.colors,
    primary: "purple",
    text: "orange",
  },
  container: {
    ...theme.container,
    slice: {
      bg: "primary",
    },
    eyebrow: {
      color: "tomato",
    },
    item: {
      background: "#FFF",
      border: "1px solid #111",
      padding: "12px",
    },
  },
};

export default class App extends NextApp {
  render() {
    const { Component, pageProps } = this.props;
    return (
      <ThemeProvider theme={customTheme}>
        <BaseStyles>
          <Component {...pageProps} />
        </BaseStyles>
      </ThemeProvider>
    );
  }
}

Related Articles


Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Get in touch with us on our Community Forum.