Component Examples Library

Overview

This centralized examples library serves as the definitive reference for component implementations across our UI Architecture Overview. All documentation pages reference these examples rather than duplicating code.

Benefits

• DRY Compliance: No duplicated examples across documentation
• Live Code: All examples are tested and functional
• GitHub Integration: Direct links to source implementations
• Versioned: Examples stay synchronized with codebase
• Searchable: Easy to find specific component patterns

Foundation Components

Essential building blocks with no business logic:

Pattern Components

Composed UI patterns built from foundation components:

Business Components

Domain-aware components with integrated business logic:

Example Structure

Each example follows a consistent structure:

---
title: Component Name
description: Brief description of the component
source: https://github.com/org/repo/blob/main/ui/foundation/ComponentName
docs: /docs/ui-development/architecture/foundation-guide#componentname
---
 
# Component Name
 
## Overview
Brief introduction to the component and its purpose.
 
## Basic Usage
<ExamplePreview>
  <ComponentExample />
</ExamplePreview>
 
\`\`\`tsx
// Basic implementation code
\`\`\`
 
## Variants
Different variations of the component...
 
## Props
Component API documentation...
 
## Accessibility
WCAG compliance notes...
 
## Related Components
Links to similar or complementary components...

Usage in Documentation

To reference an example in any documentation page:

For implementation details, see the [Button example](/docs/ui-development/development/examples/foundation/Button).

Or embed the example directly:

import { ButtonExample } from '@/examples/foundation/Button';
 
<ExamplePreview>
  <ButtonExample variant="primary" />
</ExamplePreview>

Contributing

When adding new examples:

1. Create example file in the appropriate layer directory
2. Include metadata with title, description, source, and docs links
3. Add interactive preview using ExamplePreview component
4. Document all variants and use cases
5. Link to GitHub source for the actual implementation
6. Update this index to include the new example

Maintenance

Examples are reviewed and updated:

• On component API changes
• During quarterly documentation reviews
• When new patterns emerge
• Based on developer feedback

Looking for specific examples? Use the search bar or browse by category above.