Create your own Slices & Components

Beta

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

By now you've probably got your project up and running and you've used Slice Machine components to create a page. Naturally now you'll want to create your own components and link them to Prismic.

Well, thanks to Slice Machine it's super easy!

NOTE: Sending your Slice models to Prismic

Previously your Slice models were pushed to Prismic when using --create-slice, this is now the last step when building components with the Slice builder.

Create a new Slice

CLI Version

You will need the 3.8.3-beta.0 version of the Prismic CLI, check by running:

prismic --version.

You can go to that version by running the following command:

npm install --global prismic-cli@3.8.3-beta.0

If you run into any problems try uninstalling and reinstalling the CLI.

The --create-slice command will create the skeleton of a new Slice and the files needed to create a local preview of your component, including the model.json file, the mock data and a storybook file. This will give you the power to develop locally your entire component library.

Run the command and fill out the prompts:

Copy
prismic sm --create-slice

Haven't defined your framework?

If you didn't use prismic sm --setup to set up your project, you'll need to specify this to generate the correct files when you create a new slice with:

prismic sm --create-slice --framework next

or

prismic sm --create-slice --framework nuxt

If you used prismic sm --setup then this is already done for you.

Here's an example of what running the command looks like. We select the @/slices local library (or create it if it doesn't exist), then we give it the name of NewSlice:

Running the --creates-slice command in the terminal

How the --create-slice command works

Once you run this command you will be shown the following prompts.

  • Select your local lib: Select the library you're working with. By default, the
    --setup command adds a default @/slices path to your sm.json file, where @ means that the path is local.
  • Enter the name of your slice: Name of your slice made by 2 PascalCased words.

When the command finishes you'll have a new Slice and it's Component ready to be used.

The component will have this structure in Next.js:

slices / NewSlice
├── index.js
└── index.stories.js
└── mocks.json
└── model.json
└── preview.png

Next let's learn how to preview that component locally and then build it out with our Visual Editor!

Deprecated: --pull command

Previously you could update your local Slices with Slice data from the Prismic repo using the experimental prismic sm --pull command. This has been deprecated and replaced by the process described in The Slice Builder Article.