---
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/australia/platform-user-interface/tb-preview-components.html
release: australia
topic_type: task
last_updated: "2026-03-12"
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 .

## 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** > **Now Experience Framework** > **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/australia/markdown/australia/platform-user-interface/tb-edit-components.md).

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