diff --git a/about/link-showcase.page.tsx b/about/link-showcase.page.tsx
new file mode 100644
index 0000000000..d45d14b607
--- /dev/null
+++ b/about/link-showcase.page.tsx
@@ -0,0 +1,310 @@
+import * as React from "react";
+import { PageGrid, PageGridRow, PageGridCol } from "shared/components/PageGrid/page-grid";
+import { Link } from "shared/components/Link/Link";
+
+export const frontmatter = {
+ seo: {
+ title: 'Link Component Showcase',
+ description: "A comprehensive showcase of all Link component variants, sizes, and states in the XRPL.org Design System.",
+ }
+};
+
+export default function LinkShowcase() {
+ return (
+
+
+
+
+
Component Showcase
+
Link Component
+
+ A comprehensive showcase of all Link component variants, sizes, and states.
+
+
+
+
+
+
+
+
Size by Variant Matrix
+
+ {/* Header Row */}
+
+
+
Size
+
+
+
Internal Links
+
+
+
External Links
+
+
+
Disabled State
+
+
+ {/* Small Row */}
+
+
+ Small
+
+
+
+ Small Internal Link
+
+
+
+
+ Small External Link
+
+
+
+
+ Disabled Internal Link
+
+
+
+ {/* Medium Row */}
+
+
+ Medium
+
+
+
+ Medium Internal Link
+
+
+
+
+ Medium External Link
+
+
+
+
+ Disabled External Link
+
+
+
+ {/* Large Row */}
+
+
+ Large
+
+
+
+ Large Internal Link
+
+
+
+
+ Large External Link
+
+
+
+
+ Disabled Internal Link
+
+
+
+
+
+
+
+
+
+
+
+
Sizes
+
+
+
Small
+
+ Small Link
+
+
+
+
Medium
+
+ Medium Link
+
+
+
+
Large
+
+ Large Link
+
+
+
+
+
+
+
+
+
+
+
Color States
+
Links automatically handle color states via CSS per theme:
+
+
+ {/* Light Mode Colors */}
+
+
Light Mode
+
+
Enabled: Green 400 #0DAA3E
+
Hover/Focus: Green 500 #078139 + underline
+
Active: Green 400 #0DAA3E + underline
+
Visited: Lilac 400 #7649E3
+
Disabled: Gray 400 #A2A2A4
+
Focus Outline: Black #000000
+
+
+
+ {/* Dark Mode Colors */}
+
+
Dark Mode
+
+
Enabled: Green 300 #21E46B
+
Hover/Focus: Green 200 #70EE97 + underline
+
Active: Green 300 #21E46B + underline
+
Visited: Lilac 300 #C0A7FF
+
Disabled: Gray 500 #838386
+
Focus Outline: White #FFFFFF
+
+
+
+
+
+
+
Default (hover to see state changes and arrow animation)
+
+ Default Link
+
+
+
+
Disabled
+
+ Disabled Link
+
+
+
+
+
+
+
+
+
+
+
Icon Types
+
Arrow icons animate to chevron shape on hover (150ms cubic-bezier transition).
+
+
+
Arrow (Internal) - animates to chevron on hover
+
+ Arrow Link
+
+
+
+
External
+
+ External Link
+
+
+
+
Inline (No Icon)
+
+ This is a paragraph with an{" "}
+
+ inline link
+ {" "}
+ embedded within the text.
+
+
+
+
+
+
+
+
+
+
+
Variants
+
+
+
Internal
+
+ Internal Link
+
+
+
+
External
+
+ External Link
+
+
+
+
Inline
+
+ This is a paragraph with an{" "}
+
+ inline link
+ {" "}
+ that appears within the text flow.
+
+
+
+
+
+
+
+
+
+
+
Real-World Examples
+
+
+
Navigation Links
+
+
+ View Documentation
+
+
+ Learn More About XRPL
+
+
+ GitHub Repository
+
+
+
+
+
Inline Text Links
+
+ The XRP Ledger is a decentralized public blockchain. You can{" "}
+
+ read the technical documentation
+ {" "}
+ to learn more about how it works. The network is maintained by a{" "}
+
+ global community
+ {" "}
+ of developers and validators.
+
+
+
+
Call-to-Action Links
+
+
+ Get Started with XRPL
+
+
+ Explore Use Cases
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/shared/components/Link/Link.md b/shared/components/Link/Link.md
new file mode 100644
index 0000000000..c54e201f2b
--- /dev/null
+++ b/shared/components/Link/Link.md
@@ -0,0 +1,395 @@
+# Link Component
+
+A comprehensive, accessible link component from the XRPL.org Brand Design System (BDS). Supports multiple variants, sizes, and automatic theme-aware color states with animated arrow icons.
+
+## Table of Contents
+
+- [Installation](#installation)
+- [Basic Usage](#basic-usage)
+- [Props API](#props-api)
+- [Variants](#variants)
+- [Sizes](#sizes)
+- [Color States](#color-states)
+- [Icon Animations](#icon-animations)
+- [Accessibility](#accessibility)
+- [Best Practices](#best-practices)
+- [Examples](#examples)
+- [Related Components](#related-components)
+
+---
+
+## Installation
+
+```tsx
+import { Link } from 'shared/components/Link';
+// or
+import { Link } from 'shared/components/Link/Link';
+```
+
+---
+
+## Basic Usage
+
+```tsx
+// Internal link (default)
+View Documentation
+
+// External link
+
+ External Resource
+
+
+// Inline link (no icon)
+
+ Learn more about our mission.
+
+```
+
+---
+
+## Props API
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `href` | `string` | **required** | The URL the link points to |
+| `variant` | `'internal' \| 'external' \| 'inline'` | `'internal'` | Link variant determining icon and behavior |
+| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Size of the link text and icon |
+| `icon` | `'arrow' \| 'external' \| null` | `null` | Override icon type (auto-determined by variant if `null`) |
+| `disabled` | `boolean` | `false` | Disables the link, preventing navigation |
+| `children` | `React.ReactNode` | **required** | Link text content |
+| `className` | `string` | - | Additional CSS classes |
+| `...rest` | `AnchorHTMLAttributes` | - | All standard anchor attributes (`target`, `rel`, etc.) |
+
+---
+
+## Variants
+
+### Internal (Default)
+
+For navigation within the same website. Displays a horizontal arrow (→) that animates to a chevron (>) on hover.
+
+```tsx
+
+ Internal Documentation
+
+```
+
+### External
+
+For links to external websites. Displays a diagonal arrow with corner bracket (↗) that animates on hover. Always use with `target="_blank"` and `rel="noopener noreferrer"` for security.
+
+```tsx
+
+ GitHub Repository
+
+```
+
+### Inline
+
+For links embedded within body text. No icon is displayed, making the link flow naturally within paragraphs.
+
+```tsx
+
+ The XRP Ledger is a decentralized blockchain. You can{" "}
+ read the documentation{" "}
+ to learn more.
+
+```
+
+---
+
+## Sizes
+
+| Size | Font Size | Line Height | Icon Gap |
+|------|-----------|-------------|----------|
+| `small` | 14px | 1.5 | 6px |
+| `medium` | 16px | 1.5 | 8px |
+| `large` | 20px | 1.5 | 10px |
+
+```tsx
+Small Link
+Medium Link
+Large Link
+```
+
+---
+
+## Color States
+
+The Link component automatically handles color states based on the current theme. Colors are applied via CSS and follow the Figma design specifications.
+
+### Light Mode
+
+| State | Color Token | Hex Value | Additional Styles |
+|-------|-------------|-----------|-------------------|
+| **Enabled** | Green 400 | `#0DAA3E` | No underline |
+| **Hover** | Green 500 | `#078139` | Underline, arrow animates |
+| **Focus** | Green 500 | `#078139` | Underline, black outline |
+| **Active** | Green 400 | `#0DAA3E` | Underline |
+| **Visited** | Lilac 400 | `#7649E3` | No underline |
+| **Disabled** | Gray 400 | `#A2A2A4` | No underline, no pointer |
+
+### Dark Mode
+
+| State | Color Token | Hex Value | Additional Styles |
+|-------|-------------|-----------|-------------------|
+| **Enabled** | Green 300 | `#21E46B` | No underline |
+| **Hover** | Green 200 | `#70EE97` | Underline, arrow animates |
+| **Focus** | Green 200 | `#70EE97` | Underline, white outline |
+| **Active** | Green 300 | `#21E46B` | Underline |
+| **Visited** | Lilac 300 | `#C0A7FF` | No underline |
+| **Disabled** | Gray 500 | `#838386` | No underline, no pointer |
+
+### Focus Outline
+
+- **Light Mode**: 2px solid black (`#000000`)
+- **Dark Mode**: 2px solid white (`#FFFFFF`)
+
+---
+
+## Icon Animations
+
+Both internal and external arrow icons feature a smooth animation on hover/focus:
+
+- **Animation Duration**: 150ms
+- **Timing Function**: `cubic-bezier(0.98, 0.12, 0.12, 0.98)`
+
+### Internal Arrow Animation
+
+The horizontal line of the arrow (→) shrinks from left to right, revealing a chevron shape (>).
+
+### External Arrow Animation
+
+The diagonal line of the external arrow (↗) scales down toward the top-right corner, leaving just the corner bracket.
+
+### Disabled State
+
+When disabled, the animation is disabled and the icon opacity is reduced to 50%.
+
+---
+
+## Accessibility
+
+The Link component follows accessibility best practices:
+
+### Keyboard Navigation
+
+- Focusable via Tab key
+- Activatable via Enter key
+- Clear focus indicator with high-contrast outline
+
+### ARIA Attributes
+
+- `aria-disabled="true"` is applied when the link is disabled
+- Icons are marked with `aria-hidden="true"` to prevent screen reader announcement
+
+### Best Practices
+
+1. **Use descriptive link text** - Avoid "click here" or "read more"
+2. **External links** - Consider adding "(opens in new tab)" for screen readers
+3. **Disabled state** - Provide context for why the link is disabled
+
+```tsx
+// Good - Descriptive link text
+View pricing plans
+
+// Bad - Non-descriptive
+Click here
+
+// External with screen reader context
+
+ GitHub Repository
+
+```
+
+---
+
+## Best Practices
+
+### Do's
+
+1. **Use appropriate variants**
+ ```tsx
+ // Internal navigation
+ About Us
+
+ // External sites
+
+ GitHub
+
+
+ // Within paragraphs
+
Learn about XRP today.
+ ```
+
+2. **Match size to context**
+ ```tsx
+ // Navigation/CTA - use large
+ Get Started
+
+ // Body content - use medium
+ Documentation
+
+ // Footnotes/captions - use small
+ Terms of Service
+ ```
+
+3. **Always use security attributes for external links**
+ ```tsx
+
+ External Site
+
+ ```
+
+### Don'ts
+
+1. **Don't use disabled for navigation prevention** - Use proper routing instead
+ ```tsx
+ // Bad - Using disabled for auth gate
+ Dashboard
+
+ // Good - Handle in onClick or router
+ Dashboard
+ ```
+
+2. **Don't mix variants inappropriately**
+ ```tsx
+ // Bad - External link with internal variant
+ External Site
+
+ // Good
+ External Site
+ ```
+
+3. **Don't use inline variant for standalone links**
+ ```tsx
+ // Bad - Standalone inline link
+ Documentation
+
+ // Good - Use internal for standalone
+ Documentation
+ ```
+
+---
+
+## Examples
+
+### Navigation Menu
+
+```tsx
+
+```
+
+### Call-to-Action Section
+
+```tsx
+
+
+ Get Started with XRPL
+
+
+ Explore Use Cases
+
+
+```
+
+### Rich Text Content
+
+```tsx
+
+
+ The XRP Ledger (XRPL) is a decentralized, public blockchain led by a{" "}
+ global community{" "}
+ of businesses and developers. It supports a wide variety of{" "}
+ use cases{" "}
+ including payments, tokenization, and DeFi.
+
+
+
+ To learn more, check out the{" "}
+ official documentation{" "}
+ or visit the{" "}
+
+ GitHub repository
+ .
+
+
+```
+
+### Disabled State
+
+```tsx
+
+
+ Premium Features (Coming Soon)
+
+ This feature is not yet available.
+