Component Interface

Understanding the four main tabs of every PowerLibs component: Preview, Settings, YAML, and Instructions.

Overview

Every PowerLibs component has a consistent interface with four tabs that guide you through the customization and export process:

Preview - Live component preview
Settings - Customization options
YAML - Generated Power Apps code
Instructions - Implementation guidance

Preview Tab

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

Features:

Live Updates - Changes in Settings are reflected instantly
Responsive Preview - See how components adapt to different sizes
Interactive Elements - Test buttons, dropdowns, and other interactive features
Theme Support - Preview in light/dark themes

The preview uses the same styling system as Power Apps, so what you see is what you'll get in your app.

Settings Tab

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

Common Settings:

Colors - Background, text, accent colors
Text Content - Labels, titles, descriptions
Spacing - Padding, margins, gaps
Behavior - Interactive states, animations
Layout - Alignment, sizing options

Pro vs Free:

Free Users - Can see all settings but cannot modify them
Pro Users - Full access to all customization options

Settings are organized into logical groups for easy navigation. Look for collapsible sections to find specific options.

YAML Tab

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

Features:

Clean Code - Optimized, readable YAML
One-Click Copy - Copy to clipboard button
Live Generation - Updates automatically when settings change
Comments - Helpful annotations in the code

Code Structure:

# Component: Navigation Bar
# Generated by PowerLibs

NavigationBar1:
  Type: Container
  Properties:
    Fill: RGBA(255, 255, 255, 1)
    Height: 80
    # ... more properties

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:

Tab - Navigate between tabs
Ctrl/Cmd + C - Copy YAML code (when in YAML tab)
Escape - Close any open modals or dropdowns

Mobile Experience:

Tabs are optimized for touch devices
Settings panels are scrollable on smaller screens
Preview adapts to mobile viewport sizes

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.