feat: add render prop for custom element rendering in Link

[rohanchkrabrty]

Summary

• Add render prop to Link, forwarded to the underlying Text/useRender, so consumers can swap the rendered element (e.g. router Link) instead of always emitting <a/>.
• Type LinkProps against useRender.ComponentProps<'a'> and drop the required href (custom render targets may handle navigation themselves); default render remains <a />.
• Document the new prop in props.ts and add a "Custom render" example to the Link docs page.
• Cover the new behavior with tests verifying tag swap, prop forwarding (href, external → target/rel, custom data attrs), and class preservation.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
apsara	Ready	Preview, Comment	May 8, 2026 7:02am

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR adds a render prop to the Link component that enables custom element rendering. The href property becomes optional in LinkProps. The Link component now uses useRender.ComponentProps<'a'> for type safety and forwards the render prop to its Text child component with a default value of <a />. All link-specific props (external, download, ARIA attributes) are preserved and forwarded to the custom element. The changes include comprehensive tests validating custom element rendering and prop forwarding, plus documentation describing usage patterns for custom router integration.

Suggested reviewers

• rsbh

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description clearly explains the changes: adding render prop, updating types, removing required href, documentation, and tests—all directly related to the changeset.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title 'feat: add render prop for custom element rendering in Link' directly summarizes the main change: adding a render prop to enable custom element rendering in the Link component.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

packages/raystack/components/link/link.tsx (1)

1-1: 💤 Low value

Prefer import type for useRender since it's used only as a type namespace.

useRender is only referenced in a type position (useRender.ComponentProps<'a'>). A value import pulls in the runtime binding unnecessarily and may cause issues under verbatimModuleSyntax or isolatedModules.

♻️ Suggested fix

-import { useRender } from '@base-ui/react';
+import type { useRender } from '@base-ui/react';

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/raystack/components/link/link.tsx` at line 1, Change the import of
useRender to a type-only import because it's only used in a type position
(useRender.ComponentProps<'a'>); replace the value import "import { useRender }
from '@base-ui/react'" with a type import "import type { useRender } from
'@base-ui/react'" and confirm there are no runtime references to useRender in
link.tsx so the type-only import is valid.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@apps/www/src/content/docs/components/link/props.ts`:
- Around line 13-21: The render prop is typed only as ReactElement but should
also accept a render function like the Text and Button components; update the
Link props declaration (the render property) to a union that accepts a
ReactElement or a render function (e.g., ReactElement | ((props: any) =>
ReactElement) or the project's shared RenderFunction type), and update the JSDoc
to reflect that it can be either an element or a render function so consumers
and TS inference match other components.

---

Nitpick comments:
In `@packages/raystack/components/link/link.tsx`:
- Line 1: Change the import of useRender to a type-only import because it's only
used in a type position (useRender.ComponentProps<'a'>); replace the value
import "import { useRender } from '@base-ui/react'" with a type import "import
type { useRender } from '@base-ui/react'" and confirm there are no runtime
references to useRender in link.tsx so the type-only import is valid.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: c80932c6-145d-4ea4-a459-59237d56fce7

📥 Commits

Reviewing files that changed from the base of the PR and between f8b9b8c and a834a30.

📒 Files selected for processing (4)

• apps/www/src/content/docs/components/link/index.mdx
• apps/www/src/content/docs/components/link/props.ts
• packages/raystack/components/link/__tests__/link.test.tsx
• packages/raystack/components/link/link.tsx