Preview components

task brazil Updated Sep 10, 2026 1 min read tb-preview-components.md

As you’re creating or managing your theme, you can preview the components available for inclusion on your instance.

Before you begin

Role required: ui_builder_admin

For information on granular roles, see Granular admin roles.

About this task

The components you can preview in Theme Builder were created in the Now Design System. For more information, see Next Experience Components on the ServiceNow Developer Site.

Procedure

Navigate to All > Now Experience Framework > Theme Builder.

The Theme Builder landing page displays in the Home page view.
Use the Page drop-down list to select the Editor page view.

[Omitted image "tb-editor-page-list.png"] Alt text: Page drop-down list with Editor selected.
From the Theme drop-down list, select the theme that you want to view components for.
Select the Component styles tab.

The component styles are graphically listed.

[Omitted image "tb-component-styles-list.png"] Alt text: Component styles
You can scroll through the list to view all available components, or filter the list to view specific types of components.
1. Select the Filter icon [Omitted image "tb-icon-filter.png"] Alt text:.
  
  [Omitted image "tb-filter-component-list.png"] Alt text: Filter and search component list.
2. Expand the categories of components that you want to view and select the specific components within those categories you want to view.
  
  Note: For example, to view components for all primary buttons, open the Actionable category then expand the Button component list. Select the Primary, Primary positive, and Primary negative components. The list shows the components that you selected.
  
  [Omitted image "tb-filter-example.png"] Alt text: Filtering example
To test how the components render using different background colors, select the Canvas color check box.
Select the Background color you want to view and select Apply.

[Omitted image "tb-canvas-color.png"] Alt text: Canvas color

[Omitted image "tb-change-background-color.png"] Alt text: New background color

What to do next

After previewing and selecting the desired components, edit their properties to fine-tune their appearance. For more information, see Edit components.

Parent Topic:Working with Component styles

72 lines · 3.5 KB Wrap lines

---
title: Preview components
description: As you’re creating or managing your theme, you can preview the components available for inclusion on your instance.
locale: en-US
canonical_url: https://www.servicenow.com/docs/r/platform-user-interface/tb-preview-components.html
release: brazil
topic_type: task
last_updated: "2026-09-10"
reading_time_minutes: 1
breadcrumb: [Component styles, Manage or edit a theme, Configuring Next Experience with Theme Builder, Working with themes, Configure, Next Experience UI, Configure UIs and portals, Configure user experiences]
---

# Preview components

As you’re creating or managing your theme, you can preview the components available for inclusion on your instance.

## Before you begin

Role required: ui\_builder\_admin

For information on granular roles, see [Granular admin roles](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/brazil/markdown/platform-security/granular-admin-roles.md).

## About this task

The components you can preview in Theme Builder were created in the Now Design System. For more information, see [Next Experience Components](https://developer.servicenow.com/dev.do#!/reference/next-experience/components?releases[]=vancouver&query=&order_by=nameAsc&limit=120&offset=0&categories[]=uib_component&categories[]=uib_macroponent-component&categories[]=uib_facades) on the ServiceNow Developer Site.

## Procedure

1.  Navigate to **All** &gt; **Now Experience Framework** &gt; **Theme Builder**.

    The Theme Builder landing page displays in the Home page view.

2.  Use the **Page** drop-down list to select the Editor page view.

    \[Omitted image "tb-editor-page-list.png"\] Alt text: Page drop-down list with Editor selected.

3.  From the Theme drop-down list, select the theme that you want to view components for.

4.  Select the **Component styles** tab.

    The component styles are graphically listed.

    \[Omitted image "tb-component-styles-list.png"\] Alt text: Component styles

5.  You can scroll through the list to view all available components, or filter the list to view specific types of components.

    1.  Select the Filter icon \[Omitted image "tb-icon-filter.png"\] Alt text:.

        \[Omitted image "tb-filter-component-list.png"\] Alt text: Filter and search component list.

    2.  Expand the categories of components that you want to view and select the specific components within those categories you want to view.

        **Note:** For example, to view components for all primary buttons, open the **Actionable** category then expand the **Button** component list. Select the **Primary**, **Primary positive**, and **Primary negative** components. The list shows the components that you selected.

        \[Omitted image "tb-filter-example.png"\] Alt text: Filtering example

6.  To test how the components render using different background colors, select the **Canvas color** check box.

7.  Select the **Background color** you want to view and select **Apply**.

    \[Omitted image "tb-canvas-color.png"\] Alt text: Canvas color

    \[Omitted image "tb-change-background-color.png"\] Alt text: New background color


## What to do next

After previewing and selecting the desired components, edit their properties to fine-tune their appearance. For more information, see [Edit components](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/brazil/markdown/platform-user-interface/tb-edit-components.md).

**Parent Topic:**[Working with Component styles](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/brazil/markdown/platform-user-interface/working-with-component-styles.md)