📝 Basic Usage
The simplest form with default title and a few links:
🔗 Related Resources
View Code
<RelatedResources
links={[
{
href: '/docs/core-systems/related-resources-component',
label: '📖 Documentation',
type: 'primary'
},
{
href: '/docs/getting-started',
label: '🚀 Getting Started',
type: 'secondary'
}
]}
/>🎨 Custom Title & Description
Customize the title and add a helpful description:
🎯 Next Steps
Continue your journey with these helpful resources and guides:
View Code
<RelatedResources
title="🎯 Next Steps"
description="Continue your journey with these helpful resources and guides:"
links={[
{
href: '/docs/core-systems',
label: 'Core Systems',
type: 'primary'
},
{
href: '/demos',
label: 'More Demos',
type: 'secondary'
},
{
href: '/docs/configuration',
label: 'Configuration',
type: 'outline'
}
]}
/>🌐 External Links
Handle external links with proper security attributes:
🔗 External Resources
Explore these external documentation and resources:
View Code
<RelatedResources
title="🔗 External Resources"
description="Explore these external documentation and resources:"
links={[
{
href: 'https://docusaurus.io/docs',
label: 'Docusaurus Docs',
type: 'primary',
external: true
},
{
href: 'https://github.com/facebook/docusaurus',
label: 'GitHub Repository',
type: 'secondary',
external: true
},
{
href: 'https://docusaurus.io/community',
label: 'Community',
type: 'outline',
external: true
}
]}
/>🎨 Button Type Variations
Compare the three button types: primary, secondary, and outline:
🎭 Button Styles
Each button type serves a different purpose in the visual hierarchy:
🎯 Usage Guidelines:
- Primary: Main call-to-action, most important link
- Secondary: Supporting or alternative actions
- Outline: Subtle, less prominent links
⚙️ Technical Features
🔧 Component Features
- ✅ TypeScript Support: Full type safety
- ✅ Responsive Design: Works on all screen sizes
- ✅ Docusaurus Integration: Uses theme tokens
- ✅ Accessibility: Semantic HTML and ARIA
- ✅ External Link Safety: Proper rel attributes
🎨 Styling Features
- ✅ Card Layout: Clean, consistent design
- ✅ Button Groups: Organized link display
- ✅ Custom Classes: Extensible styling
- ✅ Theme Integration: Automatic dark/light mode
- ✅ Consistent Spacing: Docusaurus utilities
💡 Common Use Cases
📚 Documentation Pages
- Link to related topics
- Navigate tutorial series
- Reference API documentation
- Access example code
🎮 Demo Pages
- Link to component docs
- Navigate to other demos
- Access source code
- View configuration guides
🌐 External Resources
- Link to GitHub repositories
- Reference external docs
- Community resources
- Learning materials