Component Library
Documentation of all components used in the Swollr app. This is a reference for development and debugging.
🤖 Auto-Generated Documentation: This library automatically discovers all 81 components during build time. New components are automatically included with zero maintenance.
⚠️ Experimental Feature: This component library is a work in progress. Many components will crash or display errors because they expect specific props, context, or data that isn't provided in this isolated environment.
Known Limitations:
- Components using hooks like
useWorkoutoruseUserStatsmay fail - Components expecting exercise data, workout data, or other props will show errors
- Form components need mock handlers that aren't fully implemented
- Some components require React Context that isn't available here
Future Work: Components need to be refactored to support default values or this library needs to provide comprehensive sample data for all component types.
Select a Component
Choose a component from the dropdown above to see a live preview
81 components available across 12 categories
🤖 How This Works (Zero Maintenance)
✅ Adding New Components
Zero manual work required! Just create a new component file anywhere in src/components/ and it will automatically appear here on the next build.
2. Run: npm run build
3. Visit: /components
4. ✨ Your component appears automatically!
🔄 Auto-Categorization
Components are automatically categorized based on their folder location:
calculators/ → calculatorsexercise/ → exerciseworkout/ → workoutlayout/ → layoutforms/ → formsshared/ → sharedhome/ → homemuscle/ → muscle⚙️ Build Process
This library is automatically updated during every build:
↓
npm run generate:components
↓
scripts/generate-component-list.js
↓
Scans src/ for React components
↓
Updates src/data/component-registry.js
↓
This page shows latest components ✨
🛠️ Customization (Optional)
To modify how components are discovered or categorized, edit:
scripts/generate-component-list.js - Discovery scriptsrc/data/component-registry.js - Generated data (auto-updated)