Settings & Customization

Master the PowerLibs settings panel to create components that perfectly match your brand and requirements.

Overview

The Settings tab is where PowerLibs components come to life. Most components have a Settings tab; a few have none. The editor groups its options by what they change: text, list items, on/off options and, where available, colours.

Current Setting Types

Content & Text

The most common settings you'll find:

• Text Content - Change what text is displayed in buttons, labels, titles
• Button Labels - Customize action button text
• Titles & Headings - Update component titles and descriptions
• Placeholder Text - Set form field placeholders

Functional Settings

Settings that change how components work:

• Add/Remove Elements - Add more tabs to tab bars, more buttons to button groups
• Element Configuration - Name tabs, configure menu items
• Behavior Options - Toggle features on/off
• Layout Options - Choose between different component layouts

Theme & Colors

Some components offer basic theming:

• Color Fields - Where a component's editor has colour fields, pick a hex colour there; it wins over the global Brand Color
• Light/Dark Theme - Switched with the sun/moon button in the card header, not in Settings. Dark theme YAML on paid components needs a paid plan

Advanced Customization

Global Settings Integration

Global settings feed into every component's preview and generated code. Open them from your avatar menu, then Settings (the entry is shown to paid accounts other than the Components plan):

• Profile Information - Your name and your project name
• Brand Color - One colour used by every component; the default is #3B82F6
• Font - Written into every generated YAML. Choose one of the 14 Power Apps fonts (the default is Open Sans) or Use app theme, which leaves the Font property out so your controls inherit App.Theme.Font
• Variable Naming - Nine prefixes for generated control and variable names: lbl, btn, gal, con, ico, img, txt, var, gbl. Custom prefixes only apply on Ultra, Team, Lifetime and Legacy accounts; everyone else gets the defaults

Your preferences also store a default theme (light or dark, applied to the website when you sign in) and a fill-parent flag; neither has a control in the Settings popup today. Projects keep their own brand colour, font and prefixes: see Projects and Variable Prefix.

Component-Specific Examples

Each component type has unique functional settings:

Navigation Components:

• Text Content - Change app title, user name, menu labels
• Menu Items - Add/remove navigation items, configure labels
• User Profile - Show or hide the user profile area on Navigation Bar, NavBar with Tablist, Mega Menu Navbar, NavBar with Scrollable Content and Sidebar with Navbar
• Layout Options - Choose between different navigation styles

Tab Components:

• Add/Remove Tabs - Increase or decrease number of tabs
• Tab Labels - Name each tab (Home, Profile, Settings, etc.)

Button Components:

• Button Text - Change what the button says
• Button Style and Button Size - Available on the buttons whose editor offers them
• Add Button - Button Group components let you add more buttons

Customization Workflow

1. Start with Defaults

Every component loads with sensible defaults that work well in most Power Apps.

2. Apply Global Theme

Use global settings to establish your brand colour and font across all components.

3. Fine-tune Individual Components

Adjust specific components to meet unique requirements or design needs.

4. Test in Power Apps Studio

Paste the YAML into Power Apps Studio and check the result there. The preview has no device or screen-size switcher.

Best Practices

Content Consistency

• Use consistent language and terminology across components
• Keep button labels clear and action-oriented
• Maintain consistent naming for similar elements (tabs, menu items)
• Test all text content for clarity and length

Functional Organization

• Group related tabs or menu items logically
• Don't add too many tabs or buttons (3-7 is optimal)
• Use descriptive names that users will understand
• Consider the user's workflow when organizing elements

Theme Selection

• Choose a consistent theme (light/dark) across your app
• Test your chosen colors in the actual Power Apps environment
• Consider your organization's brand colors when available
• Ensure good contrast for accessibility

Testing & Validation

• Always test components in Power Apps Studio after customization
• Verify that all text fits properly in different screen sizes
• Check that functional elements (tabs, buttons) work as expected
• Test with real data when possible

Troubleshooting Common Issues

Settings Not Applying

• Settings can only be changed on Ultra, Team, Lifetime or Legacy accounts; other accounts see the editor locked with an Unlock button
• A colour chosen in the component's own Settings wins over the global Brand Color; use Reset to Default to go back to the brand colour
• Verify that you're in the correct settings section
• Try refreshing the component preview

Colors Not Displaying Correctly

• Colour fields take a hex value such as #3B82F6
• Ensure sufficient contrast ratios
• Test in both light and dark themes
• Verify Power Apps color compatibility

Responsive Issues

• Test components at different screen sizes
• Ensure text remains readable at smaller sizes
• Verify touch targets are adequately sized

What's Next?

Once you've customized your component, learn how to export YAML code and import it into Power Apps Studio.