Component Library
Production-ready PHP components for building consistent UI across Workshopr apps. Import the helpers file and use simple function calls.
Quick Start
Include the helpers file to get access to all component functions.
<?php // In your page file require_once 'includes/components/helpers.php'; // In header.php, add the CSS <link rel="stylesheet" href="/includes/components/components.css">
All Components
Click a component to view full documentation, variants, and code examples.
Full-width announcements and promotions
Labels, status, categories, counts
Actions, links, form submissions
Text, email, password, textarea fields
Dropdown select fields
Content containers with variants
User images with initials fallback
Dialogs, drawers, bottom sheets
Tab navigation for content panels
Notification feedback messages
Contextual info on hover/focus
Collapsible content panels
Progress bars and loading states
Banners, warnings, status messages
Loading placeholders
Page/section titles with subtitles
Icon + title + description cards
Metric displays and stat groups
Icon-prefixed feature lists
Placeholders for empty content
Navigation trails
Full-width hero with title, actions, stats
Content library card for listings
Form field wrapper with label, helper, error
App switcher and user menu patterns
Email/tag input with add/remove chips
Card-style radio selector grid
Toggle switch list with icons
Activity recommendation with add button
Standardized modal button layout
Type-colored badge (exercise/icebreaker/break)
Animated results panel for operation outcomes
File Reference
All component library files in one place.
| File | Purpose |
|---|---|
includes/components/helpers.php |
Helper functions (ws_badge, ws_button, ws_input, ws_avatar, ws_modal, etc.) |
includes/components/components.css |
All component styles |
includes/components/components.js |
Modal and interactive component JavaScript |