--- title: "Slices" description: "Learn what slices are and how you can use them to build pages." meta_title: "What Is a Slice?" category: "concepts" audience: developers lastUpdated: "2026-04-22T21:45:54.000Z" --- # What are slices? Slices are sections of a website page — like a block of text, a hero, or a call to action. They are modeled using a collection of [fields](https://prismic.io/docs/fields.md). Content writers build website pages using a stack of slices. Slices are created from scratch by developers. A slice's fields are modeled by a developer during the [content modeling](https://prismic.io/docs/content-modeling.md) process. A developer then [builds a UI component](#slice-components) to display when the slice is used in a page. Developers control which slices are available to content writers. For example, a homepage might allow a **Hero** slice, while a blog post might allow a **Quote** slice. When needed, slices can be made available to multiple page types. A slice's files, including its model and component, are saved in the website's code. [Learn more about content modeling](https://prismic.io/docs/content-modeling.md) # How to create a slice Slices are created using the [Type Builder](https://prismic.io/docs/type-builder.md), a tool for building by hand, or the [Prismic CLI](https://prismic.io/docs/cli.md), a tool for AI agents. * **Type Builder:** > **Important** > > Type Builder is rolling out to new users. If you do not have access, use **Slice Machine**. 1. **Watch for changes** In your local website project, start the Prismic CLI's `sync` command. The CLI will watch for changes in the Type Builder and pull them into your project. ```sh npx prismic sync --watch ``` > **Tip**: You can pull Type Builder changes at any time using `npx prismic > sync`. 2. **Create a slice** In the Type Builder, select **Slices** from the sidebar and click **Create a new slice**. Provide the following in the dialog: * **Name**: The label shown to content writers in the [Page Builder](https://prismic.io/docs/guides/page-builder.md). Use an easily understood, pascal-case name. * **API ID**: The ID shown to developers in the website's code. 3. **Model your content** Slices need [fields](https://prismic.io/docs/fields.md) to hold content. Click the **Add a field** button and select a field type. Repeat for as many fields as needed. Click **Save** when finished. [See the available field types](https://prismic.io/docs/fields.md) 4. **Create a slice component** Every slice has a UI component to display the slice on your website. The `sync` CLI command generates a basic component to get you started. > Learn how to write a slice component in the [Next.js](https://prismic.io/docs/nextjs.md#write-react-components), [Nuxt](https://prismic.io/docs/nuxt.md#create-slices), or [SvelteKit](https://prismic.io/docs/sveltekit.md#create-slices) guide. 5. **Add a screenshot** Screenshots help content writers select the correct slice. Take a screenshot of your slice's design, then select "**...**" → **Update screenshot**. 6. **Add to a page type** A slice needs to be added to at least one page type before the slice can be used. Navigate to a page type and select **Add** → **Reuse an existing slice** in the Slices section. Enable your slice in the dialog, click **Add slices**, then **Save**. You can now close the Prismic CLI `sync` command or create your next slice. * **Prismic CLI:** > Your AI agent can perform these steps for you. See [Prismic with AI](https://prismic.io/docs/ai.md) for details. 1. **Create a slice** Use the `prismic slice create` command: ```sh npx prismic slice create "Call to Action" ``` 2. **Model your content** Use the `prismic field add` command to add fields to the slice. ```sh npx prismic field add rich-text text \ --to-slice CallToAction \ --allow "heading2,paragraph,strong,hyperlink" npx prismic field add link button \ --to-slice CallToAction \ --allow-text ``` TypeScript types are generated automatically each time the CLI updates a slice. [See the available field types](https://prismic.io/docs/fields.md) 3. **Create a slice component** Every slice has a UI component to display the slice on your website. The Prismic CLI generates a basic component to get you started. > Learn how to write a slice component in the [Next.js](https://prismic.io/docs/nextjs.md#write-react-components), [Nuxt](https://prismic.io/docs/nuxt.md#create-slices), or [SvelteKit](https://prismic.io/docs/sveltekit.md#create-slices) guide. 4. **Add a screenshot** Screenshots help content writers select the correct slice. Take a screenshot of your slice's design, then use the `prismic slice edit-variation` command to add the screenshot. ```sh npx prismic slice edit-variation default \ --screenshot ./my-screenshot.png \ --from-slice CallToAction \ ``` In this example, the `default` ID refers to the slice's **Default** [variation](#slice-variations), which all slices have by default. The screenshot is uploaded to Prismic and can be removed from your computer. 5. **Add to a page type** A slice needs to be added to at least one page type before the slice can be used. Use the `prismic slice connect` command to make a slice available to a specific page type. ```sh npx prismic slice connect call_to_action --to page ``` In this example, the `page` ID refers to the **Page** [page type](https://prismic.io/docs/content-modeling.md#page-types). * **Slice Machine:** There are two stages to creating a slice: 1. **Local development**: Model the slice and create its UI component. 2. **Push to Prismic**: Add it to a [page type](https://prismic.io/docs/content-modeling.md#page-types) and make it available to content writers. ## Local development Start by building your slice in your local development environment. You can spend as much time as needed in this stage before making it available to content writers. 1. **Open Slice Machine** In your Prismic project, start Slice Machine to begin editing content models. ```sh npx start-slicemachine --open ``` 2. **Create a slice** In Slice Machine, navigate to the **Slices** settings from the sidebar. Click the **Create** button in the top-right corner. The **slice name** determines the label shown to content writers in the [Page Builder](https://prismic.io/docs/guides/page-builder.md) and the name shown to developers in the website's code. Use an easily understood, pascal-case name. The **target library** determines which [slice library](#slice-libraries) the slice is added to. 3. **Model your content** Use the **Add a field** button to add fields to the slice as needed. 4. **Add a screenshot** Screenshots help content writers select the correct slice. Take a screenshot of your slice's design. Then click the "**...**" button and select **Update screenshot**. 5. **Create a slice component** Every slice has a UI component to display the slice on your website. Slice Machine generates a basic component to get you started. Where the component is generated depends on your website's framework. > Learn how to write a slice component in the [Next.js](https://prismic.io/docs/nextjs.md#write-react-components), [Nuxt](https://prismic.io/docs/nuxt.md#create-slices), or [SvelteKit](https://prismic.io/docs/sveltekit.md#create-slices) guide. ## Push to Prismic When your slice is ready to be used by content writers, add it to a [page type](https://prismic.io/docs/content-modeling.md#page-types) and push it to Prismic. 1. **Add to a page type** A slice needs to be added to at least one page type before the slice can be used. Navigate to the page type you want to update using the sidebar. In the page type's **Slices** section, click the **Add** button and choose **Select existing**. In the modal, enable your slice and click **Add**. 2. **Push to Prismic** When your slice and page type are ready for content writers, push it to your Prismic repository. Click **Review changes** in the sidebar. Then, if the changes look correct, click the **Push** button in the top-right corner. The Page Builder will now recognize your slice. # Slice variations Multiple versions of a slice can be modeled as **slice variations**. For example, a "Text with Image" slice might have a variation for "Image on Left" and another for "Image on Right." Content writers can select a variation in the [Page Builder](https://prismic.io/docs/guides/page-builder.md). Each variation has its own set of fields to account for content differences between variations. > Slices are created with a default variation named "Default." ## How to add a slice variation * **Type Builder:** > **Important** > > Type Builder is rolling out to new users. If you do not have access, use **Slice Machine**. 1. **Watch for changes** In your local website project, start the Prismic CLI's `sync` command. The CLI will watch for changes in the Type Builder and pull them into your project. ```sh npx prismic sync --watch ``` > **Tip**: You can pull Type Builder changes at any time using `npx prismic > sync`. 2. **Open a slice** In the Type Builder, navigate to the slice you want to modify. 3. **Add a variation** In the slice's variations list, click the **Add a variation** button. Provide the following in the dialog: * **Variation name**: The label shown to content writers in the [Page Builder](https://prismic.io/docs/guides/page-builder.md). Use an easily understood name. * **Variation ID**: The ID used to reference the variation in the Content API. Use a short, camel-cased name. * **Duplicate from**: The existing variation to copy fields from. 4. **Add a screenshot** Screenshots help content writers select the correct variation. Take a screenshot of your variation's design, then select "**...**" → **Update screenshot**. 5. **Update the slice component** Update the slice's UI component to recognize the slice variation. Use the slice's `variation` property to determine which variation was selected. ```ts if (slice.variation === "withButton") { // Display the "With Button" variation. } else { // Display the default variation. } ``` You can now close the Prismic CLI `sync` command or add your next variation. * **Prismic CLI:** > Your AI agent can perform these steps for you. See [Prismic with AI](https://prismic.io/docs/ai.md) for details. 1. **Add a variation** Use the `prismic slice add-variation` command: ```sh npx prismic slice add-variation "With Button" --to CallToAction ``` 2. **Add a screenshot** Screenshots help content writers select the correct variation. Take a screenshot of your variation's design, then use the `prismic slice edit-variation` command to add the screenshot. ```sh npx prismic slice edit-variation withButton \ --screenshot ./my-screenshot.png \ --from-slice CallToAction \ ``` In this example, the `withButton` ID refers to the slice's **With Button** variation. The screenshot is uploaded to Prismic and can be removed from your computer. 3. **Update the slice component** Update the slice's UI component to recognize the slice variation. Use the slice's `variation` property to determine which variation was selected. ```ts if (slice.variation === "withButton") { // Display the "With Button" variation. } else { // Display the default variation. } ``` * **Slice Machine:** 1. **Open a slice** In Slice Machine, navigate to the slice you want to modify. 2. **Add a variation** In the section next to the slice's fields, click the **Add a variation** button. The **variation name** determines the label shown to content writers in the [Page Builder](https://prismic.io/docs/guides/page-builder.md). Use an easily understood name. The **variation ID** determines the ID used to reference the variation in the Content API. Use a short, camel-cased name. The **duplicate from** dropdown determines which existing variation to use as a starting point for the new variation. 3. **Add a screenshot** A screenshot will help content writers select the correct variation. Take a screenshot of your slice's design. Then click the "**...**" button and select **Update screenshot**. 4. **Update the slice component** Update the slice's UI component to recognize the slice variation. Use the slice's `variation` property to determine which variation was selected. ```ts if (slice.variation === "withButton") { // Display the "With Button" variation. } else { // Display the default variation. } ``` 5. **Push to Prismic** When your variation is ready for content writers, push it to your Prismic repository. Click **Review changes** in the sidebar. Then, if the changes look correct, click the **Push** button in the top-right corner. The Page Builder will now recognize your variation. # Display slices Prismic provides components to display a page's slices for Next.js, Nuxt, and SvelteKit. **Next.js example:** ```tsx ``` See the [`` documentation](https://prismic.io/docs/technical-reference/prismicio-react/v3.md#slicezone) to learn more. **Nuxt example:** ```vue-html ``` See the [`` documentation](https://prismic.io/docs/technical-reference/prismicio-vue/v6.md#slicezone) to learn more. **SvelteKit example:** ```svelte ``` See the [`` documentation](https://prismic.io/docs/technical-reference/prismicio-svelte/v2.md#slicezone) to learn more. ## Slice components Each slice has a corresponding React, Vue, or Svelte component, depending on your website's framework. A slice's component is displayed whenever the slice is used in a page. All slice components are exported from a generated `index.ts` file. The export can be passed directly to ``'s `components` prop. **Next.js example:** ```tsx import { components } from "@/slices"; ; ``` **Nuxt example:** ```vue ``` **SvelteKit example:** ```svelte ``` > Learn how to write a slice component in the [Next.js](https://prismic.io/docs/nextjs.md#create-slices), [Nuxt](https://prismic.io/docs/nuxt.md#create-slices), or [SvelteKit](https://prismic.io/docs/sveltekit.md#create-slices) guide. # Simulate slices You can interactively develop slice components using the [Type Builder](https://prismic.io/docs/type-builder.md). The simulator provides a live view of your slice and a mock editor for providing the slice's content. The simulator runs off a special page on your website, typically `/slice-simulator`. > Learn how to create the simulator page in the [Next.js](https://prismic.io/docs/nextjs.md#set-up-live-previewing), [Nuxt](https://prismic.io/docs/nuxt.md#set-up-live-previewing), or [SvelteKit](https://prismic.io/docs/sveltekit.md#set-up-live-previewing) guide. ## How to simulate slices * **Type Builder:** > **Important** > > Type Builder is rolling out to new users. If you do not have access, use **Slice Machine**. 1. **Start your website's development server** The simulator runs off your website's development server. Run your website's development command to start the server. ```sh npm run dev ``` 2. **Open the simulator** In the Type Builder, navigate to the slice you want to modify and click **Preview**. 3. **Develop the slice component** Use the simulator's view of the slice to develop your [slice's component](#slice-components). The slice will update as you update your code. Use the mock editor to the right of the simulator to fill in content. * **Slice Machine:** 1. **Start your website's development server** The simulator runs off your website's development server. Run your website's development command to start the server. ```sh npm run dev ``` 2. **Open a slice** In Slice Machine, navigate to the slice you want to modify. 3. **Open the simulator** Click the **Simulate** button in the top-right corner. 4. **Develop the slice component** Use the simulator's view of the slice to develop your [slice's component](#slice-components). The slice will update as you update your code. 5. **Edit the mock content** Use the mock editor to the right of the simulator to fill in content. > You can show or hide the editor using the **Editor** toggle in the top-right corner. # Slice libraries > **Caution** > > Slice libraries are a [Slice Machine](https://prismic.io/docs/slice-machine.md)-only feature. They are not supported by the [Type Builder](https://prismic.io/docs/type-builder.md) or [Prismic CLI](https://prismic.io/docs/cli.md). Developers can use **slice libraries** to organize a website's code. A slice library is a directory containing slices and their files. For example, a developer may group slices for marketing pages into a `src/slices/marketing` directory and slices for blog posts into a `src/slices/blog` directory. Each directory is a slice library. > Slice libraries only organize a website's code. It does not affect how content writers select slices in the [Page Builder](https://prismic.io/docs/guides/page-builder.md). ## Slice library components Slice Machine generates an `index.ts` file for each slice library exporting all of the library's components. The export is useful for the `` component. See [Display slices](#display-slices) to learn more. ## How to add a slice library 1. **Open Slice Machine configuration** Slice libraries are registered in Slice Machine's configuration file: `slicemachine.config.json`. Open `slicemachine.config.json` in your text editor. 2. **Add a slice library** Slice libraries are listed in the `libraries` property. Add a directory for the new slice library. ```json filename=slicemachine.config.json {4-7} // prettier-ignore { "repositoryName": "example-prismic-repo", "adapter": "@slicemachine/adapter-next", "libraries": [ "./src/slices/marketing", "./src/slices/blog" ], "localSliceSimulatorURL": "http://localhost:3000/slice-simulator" } ``` 3. **Restart the Slice Machine server** The new slice library will be available after restarting the Slice Machine server. If Slice Machine is running, press Control + C in the terminal to stop it. Then start Slice Machine again. ```sh npx start-slicemachine --open ``` The library will now be an option when creating a new slice. # API Response Here is what a slice looks like from the Content API: ```json { "id": "quote$e568fae3-e996-43c2-af06-dbf42b215cc2", "slice_type": "quote", "variation": "default", "version": "initial", "primary": { "quote": "Lorem ipsum dolor sit amet, consectetur adipiscing elit." }, "items": [] } ``` The slice's `primary` content is determined by the slice's fields. A page's slices are returned as an array: ```json {16-25} { "id": "YCiUyRUAACQAxfZK", "uid": "my-first-post", "url": "/blog/my-first-post", "type": "blog_post", "href": "https://example-prismic-repo.cdn.prismic.io/api/v2/...", "tags": ["Tag 1", "Tag 2"], "first_publication_date": "2021-02-14T03:22:26+0000", "last_publication_date": "2022-07-09T00:36:18+0000", "slugs": ["my-first-post"], "linked_documents": [], "lang": "en-us", "alternate_languages": [], "data": { "title": "My first post", "slices": [ { "id": "quote$e568fae3-e996-43c2-af06-dbf42b215cc2" // ... }, { "id": "text$afba88d2-3ce4-46b5-b42b-b89e8dcd6dc5" // ... } ] } } ``` > **Important** > > **The `items` property is deprecated**. It is replaced by [repeatable groups](https://prismic.io/docs/fields/repeatable-group.md).