feat: add render prop for custom element rendering in Link

apps/www/src/content/docs/components/link/index.mdx

@@ -56,6 +56,16 @@ Additional style variations including underlined and external links.
 
 <Demo data={styleDemo} />
 
+### Custom render
+
+Use the `render` prop to render as a custom element such as a router `Link`. All props (including `external`, `download`, and ARIA attributes) are forwarded to the provided element.
+
+```tsx
+import { Link as RouterLink } from "react-router-dom";
+
+<Link render={<RouterLink to="/about" />}>About</Link>
+```
+
 ## Accessibility
 
 The Link component follows accessibility best practices:

apps/www/src/content/docs/components/link/props.ts

@@ -1,13 +1,25 @@
+import type { ReactElement } from 'react';
+
 export interface LinkProps {
-  /** The URL that the link points to. (Required) */
-  href: string;
+  /** The URL that the link points to. */
+  href?: string;
 
   /** Whether the link should open in a new tab. */
   external?: boolean;
 
   /** Whether the link should be downloadable or a string for the filename. */
   download?: boolean | string;
 
+  /**
+   * Custom element used to render the Link.
+   *
+   * All props are forwarded to the specified element. Useful for integrating
+   * with router libraries (e.g. `<NextLink />`, `<RouterLink />`).
+   *
+   * @default "<a />"
+   */
+  render?: ReactElement;
+
   /** Additional CSS class names. */
   className?: string;
 }

packages/raystack/components/link/__tests__/link.test.tsx

@@ -77,6 +77,47 @@ describe('Link', () => {
     });
   });
 
+  describe('Custom render', () => {
+    it('renders as the element provided via render prop', () => {
+      render(
+        <Link href='/test' render={<button type='button' />}>
+          Custom
+        </Link>
+      );
+      const link = screen.getByRole('link');
+      expect(link.tagName).toBe('BUTTON');
+      expect(link).toHaveAttribute('type', 'button');
+    });
+
+    it('forwards Link props to the custom rendered element', () => {
+      render(
+        <Link
+          href='https://example.com'
+          external
+          render={<a data-custom='yes' />}
+        >
+          External
+        </Link>
+      );
+      const link = screen.getByRole('link');
+      expect(link).toHaveAttribute('href', 'https://example.com');
+      expect(link).toHaveAttribute('target', '_blank');
+      expect(link).toHaveAttribute('rel', 'noopener noreferrer');
+      expect(link).toHaveAttribute('data-custom', 'yes');
+    });
+
+    it('preserves the link className on the custom rendered element', () => {
+      render(
+        <Link href='/test' render={<div />}>
+          Custom
+        </Link>
+      );
+      const link = screen.getByRole('link');
+      expect(link.tagName).toBe('DIV');
+      expect(link).toHaveClass(styles.link);
+    });
+  });
+
   describe('HTML Attributes', () => {
     it('supports title attribute', () => {
       render(

packages/raystack/components/link/link.tsx

@@ -1,10 +1,11 @@
+import { useRender } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { ComponentProps } from 'react';
 import { Text, type TextBaseProps } from '../text';
 import styles from './link.module.css';
 
-export interface LinkProps extends TextBaseProps, ComponentProps<'a'> {
-  href: string;
+export interface LinkProps
+  extends TextBaseProps,
+    useRender.ComponentProps<'a'> {
   external?: boolean;
   download?: boolean | string;
 }
@@ -16,6 +17,7 @@ export function Link({
   size = 'small',
   external,
   download,
+  render = <a />,
   ...props
 }: LinkProps) {
   const externalProps = external
@@ -42,7 +44,7 @@ export function Link({
       {...externalProps}
       {...downloadProps}
       {...props}
-      render={<a />}
+      render={render}
     >
       {children}
     </Text>