Skip to content
PowerLibs LogoPowerLibs

Component Interface

Understanding the tabs on every PowerLibs component card: Preview, Settings, Instructions and YAML.

Overview

Every PowerLibs component card uses the same tabs, shown in this order:

  1. Preview - Live component preview
  2. Settings - Customization options (shown when the component has a settings editor)
  3. Instructions - Implementation guidance (only on components that have instructions)
  4. YAML - Generated Power Apps code (always shown)

Preview Tab

The Preview tab shows you how your component will look with your current settings.

Features:

  • Live Updates - Changes in Settings are reflected instantly
  • Interactive Elements - Test buttons, dropdowns, and other interactive features
  • Theme Support - The sun/moon button in the card header switches the preview and the generated YAML between light and dark. It does not change the website theme

The preview is a browser rendering that follows your global Font setting. Always check the pasted result in Power Apps Studio.

Settings Tab

The Settings tab is where you customize your component to match your needs.

Common Settings:

  • Text Content - Labels, titles, descriptions
  • List Items - Tabs, menu entries and buttons you can add, remove and rename
  • Options - Features you can switch on or off, and variants you can pick from
  • Colors - Colour fields on the components whose editor has them; all other components follow your global Brand Color

Who can edit settings:

  • Ultra, Team, Lifetime and Legacy accounts - Can change every setting
  • Free and Components accounts - See the real editor greyed out with an Unlock button. Components accounts also see the note "Settings customization requires Ultra." See pricing for what each plan includes

A Reset to Default button at the bottom of the Settings tab puts every setting back to its starting value.

YAML Tab

The YAML tab contains the generated Power Apps code ready for export.

Features:

  • Clean Code - Readable YAML, ready to paste
  • Copy YAML - The Copy YAML button in the card header copies the code from any tab; the YAML tab also has its own Copy button. On components that offer Modern controls, Copy YAML opens a Select Version dropdown with Modern Controls and Classic Controls
  • Server Generation - While the YAML tab is open, the code is regenerated on the server shortly after you change a setting. You need to be signed in to see it

Code Structure:

This is the start of the code the Classic Button generates with its default settings. Every control starts with its name and a Control: line, and every formula value starts with =:

- btnButton:
    Control: Classic/Button@2.2.0
    Properties:
      BorderStyle: =BorderStyle.None
      Color: =RGBA(255, 255, 255, 1)
      Fill: =RGBA(59, 130, 246, 1)
      Height: =32
      HoverBorderColor: =ColorFade(Self.BorderColor, -20%)
      HoverColor: =Self.Color
      HoverFill: =ColorFade(Self.Fill, -10%)
      PressedBorderColor: =ColorFade(Self.BorderColor, -40%)
      PressedFill: =ColorFade(Self.Fill, -20%)
      RadiusBottomLeft: =5
      RadiusBottomRight: =5

The YAML code is ready to paste directly into Power Apps Studio - no modifications needed!

Instructions Tab

The Instructions tab provides quick implementation guidance for components that need it.

What You'll Find:

  • Step-by-step setup - How to implement the component
  • Integration advice - How to connect with your app logic
  • Common use cases - Real-world implementation examples

Not every component has an Instructions tab - only components that require specific implementation guidance include instructions.

Navigation Tips

Keyboard Shortcuts:

  • Left/Right arrow, Home, End - Move between the tabs once the tab list has focus
  • Ctrl/Cmd + Shift + C - Copy the YAML of the card under your mouse pointer, or of the card that has focus

Mobile Experience:

  • Tabs are optimized for touch devices
  • Settings panels are scrollable on smaller screens

What's Next?

Now that you understand the component interface, learn how to master the Settings & Customization panel to create components that perfectly match your brand and requirements.

Component Interface | PowerLibs