External References¶

This document provides links to official PatternFly documentation, repositories, and helpful external resources for AI coders working with PatternFly React applications.

Introduction¶

External resources are essential for staying current with PatternFly updates, finding implementation examples, and troubleshooting issues. This curated list provides direct access to the most important PatternFly resources and community support channels.

PatternFly Guidelines - Core development principles.
Setup Guide - Initial project setup resources
Troubleshooting - Problem-solving resources

Official PatternFly Documentation¶

Primary Documentation¶

PatternFly.org - Main documentation site with component APIs and examples
PatternFly Design Guidelines - Design principles and patterns
PatternFly React Components - Complete component library documentation
PatternFly Layouts - Layout system and grid documentation

Component-Specific Documentation¶

Button Component - Button variants and usage
Table Component - Composable table implementation
Dropdown Component - Dropdown and menu patterns
Toolbar Component - Toolbar with filters and actions
Page Component - Page layout and structure
Icon Component - Icon usage and sizing

Specialized Features¶

PatternFly Charts - Data visualization guidelines
PatternFly AI - Chatbot - AI chatbot components
Accessibility Guidelines - WCAG compliance and best practices

Official Repositories¶

Core Repositories¶

PatternFly React - Main React component library
PatternFly Core - HTML/CSS foundation
PatternFly React Seed - Starter template for new projects

Specialized Packages¶

PatternFly Charts Repository - Charts package source and examples
PatternFly Icons - Icon library source
PatternFly Tokens - Design tokens package

Example Applications¶

PatternFly Demo App - Complete demo application
PatternFly Quickstarts - Interactive tutorials and guides

Component Examples and Code Snippets¶

"View Code" Sections¶

Most PatternFly component pages include "View Code" sections that provide working examples:

Navigate to any component page on patternfly.org
Look for the "View Code" button or link
Copy and adapt the provided code snippets
Use these as starting points for your implementations

Repository Examples¶

Find practical examples in the PatternFly repositories:

Component Examples: patternfly-react/packages/react-core/src/components/[ComponentName]/examples/
Demo Files: *.tsx and *.jsx files in component directories
Test Files: Component test files often contain usage examples

Useful Repository Paths¶

patternfly-react/
├── packages/react-core/src/components/
│   ├── Button/examples/
│   ├── Table/examples/
│   ├── Dropdown/examples/
│   └── [ComponentName]/examples/
├── packages/react-table/src/components/
└── packages/react-charts/src/components/

Charts and Visualization Resources¶

PatternFly Charts¶

Charts README - Installation and usage guide
Victory.js Documentation - Underlying charting library
ECharts Documentation - Alternative charting library

Chart Examples¶

Chart Component Examples - Source code examples
PatternFly Chart Demos - Interactive chart examples

Chatbot Resources¶

PatternFly Chatbot¶

Chatbot Overview - Main chatbot documentation
Basic Chatbot Demo - Simple chatbot implementation
Embedded Chatbot Demo - Embedded chatbot pattern
Chatbot Demos Overview - All chatbot demo variations

Implementation Resources¶

Demo Source Code: Available on each demo page via "View Code" sections
Component API: Detailed props and usage information
Integration Examples: How to integrate with existing PatternFly applications

Community and Support¶

GitHub Resources¶

Issues - Bug reports and feature requests
Discussions - Community Q&A and discussions
Pull Requests - Code contributions and reviews

Communication Channels¶

PatternFly Slack - Real-time community support
PatternFly Forum - Long-form discussions and help
Stack Overflow - Technical Q&A with patternfly tag

Development Tools and Extensions¶

Browser Extensions¶

React Developer Tools - React component debugging
PatternFly DevTools - PatternFly-specific debugging tools

IDE Extensions¶

VS Code PatternFly Snippets - Code snippets for VS Code
ES7+ React/Redux/React-Native snippets - React development shortcuts

Learning Resources¶

Tutorials and Guides¶

Getting Started Guide - Development setup and first steps
Migration Guides - Upgrading between PatternFly versions
Design System Principles - Understanding PatternFly design philosophy

Video Resources¶

PatternFly YouTube Channel - Tutorials and presentations
Red Hat Developer - Related development content

Version-Specific Resources¶

PatternFly v6 (Current)¶

v6 Documentation - Current version documentation
v6 Migration Guide - Upgrading from v5 to v6
v6 Release Notes - Latest changes and updates

Legacy Versions¶

v5 Documentation - Previous version (for reference only)
v4 Documentation - Older version (for legacy projects)

API References¶

Node.js and npm¶

Node.js Downloads - Official Node.js installation
npm Documentation - Package manager documentation
nvm (Node Version Manager) - Managing multiple Node.js versions

React Ecosystem¶

React Documentation - Official React documentation
React Router - Client-side routing
React Testing Library - Component testing

Accessibility Resources¶

WCAG Guidelines¶

WCAG 2.1 Guidelines - Web accessibility standards
ARIA Authoring Practices - ARIA implementation patterns
WebAIM - Accessibility evaluation and guidance

Testing Tools¶

axe DevTools - Accessibility testing browser extension
WAVE - Web accessibility evaluation tool
Lighthouse - Performance and accessibility auditing

Performance Resources¶

Optimization Guides¶

React Performance - React rendering optimization
Webpack Bundle Analyzer - Bundle size analysis
Web Vitals - Core web performance metrics

Monitoring Tools¶

React DevTools Profiler - Component performance profiling
Chrome DevTools - Browser performance tools

Best Practices for Using External Resources¶

Documentation Strategy¶

Start with Official Docs: Always check patternfly.org first
Use "View Code" Sections: Copy working examples from component pages
Check Repository Examples: Look at *.tsx/*.jsx files in PatternFly repos
Provide Context to AI: Share links and code snippets when asking for help

Staying Current¶

Follow Release Notes: Monitor GitHub releases
Join Community Channels: Participate in Slack or forum discussions
Subscribe to Updates: Watch PatternFly repositories for notifications
Regular Documentation Review: Periodically review component documentation for updates

Troubleshooting Approach¶

Search Issues First: Check GitHub issues for similar problems
Consult Multiple Sources: Cross-reference documentation with examples
Test Incrementally: Isolate problems with minimal examples
Share Specific Context: Provide version numbers and code snippets when seeking help

Quick Reference Links¶

Most Frequently Used¶

Emergency Resources¶

Remember: Always consult the official PatternFly documentation for your project's specific package versions. Providing AI assistants with working code snippets or links to versioned documentation is highly effective for getting accurate implementation guidance.