---
title: Working with Component styles
description: Component styles enable you to fine-tune the appearance of individual UI elements such as buttons, form controls, and navigation without affecting global theme settings. Use component styles when you need more granular control than what Global styles provide.
locale: en-US
canonical_url: https://www.servicenow.com/docs/r/australia/platform-user-interface/working-with-component-styles.html
release: australia
topic_type: concept
last_updated: "2026-03-12"
reading_time_minutes: 1
breadcrumb: [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]
---

# Working with Component styles

Component styles enable you to fine-tune the appearance of individual UI elements such as buttons, form controls, and navigation without affecting global theme settings. Use component styles when you need more granular control than what Global styles provide.

The Component styles panel provides control over how specific elements like buttons, inputs, and navigation items look and behave across different states such as hover, focus, and disabled. This panel enables tailoring the look of specific UI elements without affecting the broader theme.

A search and filter bar at the top of the panel lets you narrow down components by name or category.

Each component is represented as a tile and grouped by function, such as Navigation, Messaging, Forms. Selecting a component tile opens a side panel with editable properties for that component and its subcomponents.

\[Omitted image "tb-component-styles.png"\] Alt text: Component styles panel with filter and component tiles displayed.

-   **[Preview components](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/platform-user-interface/tb-preview-components.md)**  
As you’re creating or managing your theme, you can preview the components available for inclusion on your instance.
-   **[Edit components](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/platform-user-interface/tb-edit-components.md)**  
Edit Theme Builder individual components to better suit your brand and to support accessibility requirements. Each component type supports specific customization options called theme hooks.

**Parent Topic:**[Manage or edit a theme with Theme Builder](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/platform-user-interface/tb-edit-theme.md)