--- 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-09-17T06:13:24.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:** 1. **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. 2. **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) 3. **Add a screenshot** Screenshots help content writers select the correct slice. Take a screenshot of your slice's design, then select "**...**" → **Update screenshot**. 4. **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**. 5. **Pull your changes** When you're done modeling in the Type Builder, pull your changes into your local project with the Prismic CLI. ```sh npx prismic pull ``` 6. **Create a slice component** Every slice has a UI component to display the slice on your website. The `pull` 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. * **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 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:** 1. **Open a slice** In the Type Builder, navigate to the slice you want to modify. 2. **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. 3. **Add a screenshot** Screenshots help content writers select the correct variation. Take a screenshot of your variation's design, then select "**...**" → **Update screenshot**. 4. **Pull your changes** When you're done modeling in the Type Builder, pull your changes into your local project with the Prismic CLI. ```sh npx prismic pull ``` 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. } ``` * **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. } ``` # 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 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 preview fails on Vercel with password protection > **Important** > > This only applies when your slice simulator URL points to a Vercel deployment with **Deployment Protection** enabled. Local development is not affected. If slice preview works on localhost but fails when your simulator URL points to a hosted Vercel site, your deployment may be blocking follow-up asset requests. Common symptoms include a blank simulator or errors in the browser network tab, such as **401 Unauthorized** responses on `/_next/static/...` files. This happens because adding only `x-vercel-protection-bypass` to your `/slice-simulator` URL authorizes the first request. Static assets loaded afterward do not include that query parameter, so Vercel applies protection again. Prismic loads `/slice-simulator` in an iframe, so you also need Vercel to set a bypass cookie that works in that context. Update your slice simulator or live preview URL to include both query parameters: * `x-vercel-protection-bypass=YOUR_TOKEN` from Vercel **Deployment Protection** > **Protection Bypass for Automation** * `x-vercel-set-bypass-cookie=samesitenone` ```plain https://your-site.com/slice-simulator?x-vercel-protection-bypass=YOUR_TOKEN&x-vercel-set-bypass-cookie=samesitenone ``` When not using localhost, set this URL as your repository's slice simulator URL. # 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).