---
schema_version: "1"
id: 9cd99930b011a90aeff72faa97d388960eb62c0ff2c95f08b8e743a31b77c6df
title: Expose Style Settings for Your Custom Flow Screen Components
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/release-notes/262-0-0/rn_automate_flow_screens_styling_hooks.md
canonical_url: https://help.salesforce.com/s/articleView?id=release-notes.rn_automate_flow_screens_styling_hooks.htm&release=262.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: deeb6efe68368b6f4da7fbc20f4a184a1fd6591257bcdc344e01c56b7b06bff4
description: Let flow authors customize Lightning web components (LWC) by adding styling hooks to your code. The hooks define which properties an author can adjust in Flow Builder, such as colors and dimensions to match branding needs.
products:
  - Cross Cloud
release: "262"
---
# Expose Style Settings for Your Custom Flow Screen Components

Let flow authors customize Lightning web components (LWC) by adding styling hooks to your code. The hooks define which properties an author can adjust in Flow Builder, such as colors and dimensions to match branding needs.

**How:** In your component’s .js-meta.xml file, add a <stylingHook /> tag as a child of the <targetConfig targets="lightning\_\_FlowScreen"> tag. Specify the hook name, label, and type. For components with lots of styling options, use the <stylingHookGroup /> tag to organize the options into intuitive groups or tabs within the Flow Builder interface.

```

   <targetConfig targets="lightning__FlowScreen">
       <stylingHook name="--slds-c-button-radius-border" label="Border Radius" type="dimension"/>
       <stylingHook name="--slds-c-button-sizing-border" label="Border Weight" type="dimension"/>
       <stylingHookGroup name="default" label="Default" displayInTab="true">
           <stylingHook name="--slds-c-button-neutral-color-background" label="Background Color" type="color"/>
           <stylingHook name="--slds-c-button-text-color" label="Text Color" type="color"/>
           <stylingHook name="--slds-c-button-neutral-color-border" label="Border Color" type="color"/>
       </stylingHookGroup>
   </targetConfig>
  
```