feat(elements): Add `<Link />` component #4456

alexcarpenter · 2024-11-01T17:35:55Z

Description

This PR introduces a new Elements <Link /> that ties into the internal ClerkRouter that preserves search params when moving between sign-in and sign-up flows.

Usage

import * as Clerk from '@clerk/elements/common'
import NextLink from 'next/link'

function SignInPage() {
  return <>
    <Clerk.Link navigate="sign-up">Sign up</Clerk.Link>

    <Clerk.Link navigate="sign-up">
      {url => <NextLink href={url}>Sign up</NextLink>}
    </Clerk.Link>
  </>
}

Checklist

npm test runs as expected.
npm run build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

changeset-bot · 2024-11-01T17:35:59Z

🦋 Changeset detected

Latest commit: aba7c9f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 19 packages

Name	Type
@clerk/elements	Patch
@clerk/clerk-js	Patch
@clerk/shared	Patch
@clerk/clerk-react	Patch
@clerk/types	Patch
@clerk/ui	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-expo	Patch
@clerk/astro	Patch
@clerk/backend	Patch
@clerk/express	Patch
@clerk/fastify	Patch
@clerk/nextjs	Patch
@clerk/remix	Patch
@clerk/clerk-sdk-node	Patch
@clerk/tanstack-start	Patch
@clerk/testing	Patch
@clerk/localizations	Patch
@clerk/themes	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

….com:clerk/javascript into alexcarpenter/elements-expose-link-component

packages/elements/src/react/common/link.tsx

packages/types/src/clerk.ts

packages/elements/src/react/common/link.tsx

Co-authored-by: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>

alexcarpenter · 2024-11-04T13:38:03Z

!snapshot

clerk-cookie · 2024-11-04T13:43:16Z

Hey @alexcarpenter - the snapshot version command generated the following package versions:

Package	Version
@clerk/astro	1.4.3-snapshot.v409c69b9b3f950967f11d0ca682eb536aa406684
@clerk/backend	1.15.3-snapshot.v409c69b9b3f950967f11d0ca682eb536aa406684
@clerk/chrome-extension	1.3.25-snapshot.v409c69b9b3f950967f11d0ca682eb536aa406684
@clerk/clerk-js	5.30.1-snapshot.v409c69b9b3f950967f11d0ca682eb536aa406684
@clerk/elements	0.18.1-snapshot.v409c69b9b3f950967f11d0ca682eb536aa406684
@clerk/clerk-expo	2.2.31-snapshot.v409c69b9b3f950967f11d0ca682eb536aa406684
@clerk/expo-passkeys	1.0.0-snapshot.v409c69b9b3f950967f11d0ca682eb536aa406684
@clerk/express	1.3.5-snapshot.v409c69b9b3f950967f11d0ca682eb536aa406684
@clerk/fastify	2.0.7-snapshot.v409c69b9b3f950967f11d0ca682eb536aa406684
@clerk/localizations	3.4.2-snapshot.v409c69b9b3f950967f11d0ca682eb536aa406684
@clerk/nextjs	6.1.1-snapshot.v409c69b9b3f950967f11d0ca682eb536aa406684
@clerk/clerk-react	5.14.1-snapshot.v409c69b9b3f950967f11d0ca682eb536aa406684
@clerk/remix	4.2.43-snapshot.v409c69b9b3f950967f11d0ca682eb536aa406684
@clerk/clerk-sdk-node	5.0.56-snapshot.v409c69b9b3f950967f11d0ca682eb536aa406684
@clerk/shared	2.11.1-snapshot.v409c69b9b3f950967f11d0ca682eb536aa406684
@clerk/tanstack-start	0.4.19-snapshot.v409c69b9b3f950967f11d0ca682eb536aa406684
@clerk/testing	1.3.17-snapshot.v409c69b9b3f950967f11d0ca682eb536aa406684
@clerk/themes	2.1.41-snapshot.v409c69b9b3f950967f11d0ca682eb536aa406684
@clerk/types	4.29.1-snapshot.v409c69b9b3f950967f11d0ca682eb536aa406684
@clerk/ui	0.1.12-snapshot.v409c69b9b3f950967f11d0ca682eb536aa406684

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/astro

npm i @clerk/astro@1.4.3-snapshot.v409c69b9b3f950967f11d0ca682eb536aa406684 --save-exact

@clerk/backend

npm i @clerk/backend@1.15.3-snapshot.v409c69b9b3f950967f11d0ca682eb536aa406684 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@1.3.25-snapshot.v409c69b9b3f950967f11d0ca682eb536aa406684 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@5.30.1-snapshot.v409c69b9b3f950967f11d0ca682eb536aa406684 --save-exact

@clerk/elements

npm i @clerk/elements@0.18.1-snapshot.v409c69b9b3f950967f11d0ca682eb536aa406684 --save-exact

@clerk/clerk-expo

npm i @clerk/clerk-expo@2.2.31-snapshot.v409c69b9b3f950967f11d0ca682eb536aa406684 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@1.0.0-snapshot.v409c69b9b3f950967f11d0ca682eb536aa406684 --save-exact

@clerk/express

npm i @clerk/express@1.3.5-snapshot.v409c69b9b3f950967f11d0ca682eb536aa406684 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.0.7-snapshot.v409c69b9b3f950967f11d0ca682eb536aa406684 --save-exact

@clerk/localizations

npm i @clerk/localizations@3.4.2-snapshot.v409c69b9b3f950967f11d0ca682eb536aa406684 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@6.1.1-snapshot.v409c69b9b3f950967f11d0ca682eb536aa406684 --save-exact

@clerk/clerk-react

npm i @clerk/clerk-react@5.14.1-snapshot.v409c69b9b3f950967f11d0ca682eb536aa406684 --save-exact

@clerk/remix

npm i @clerk/remix@4.2.43-snapshot.v409c69b9b3f950967f11d0ca682eb536aa406684 --save-exact

@clerk/clerk-sdk-node

npm i @clerk/clerk-sdk-node@5.0.56-snapshot.v409c69b9b3f950967f11d0ca682eb536aa406684 --save-exact

@clerk/shared

npm i @clerk/shared@2.11.1-snapshot.v409c69b9b3f950967f11d0ca682eb536aa406684 --save-exact

@clerk/tanstack-start

npm i @clerk/tanstack-start@0.4.19-snapshot.v409c69b9b3f950967f11d0ca682eb536aa406684 --save-exact

@clerk/testing

npm i @clerk/testing@1.3.17-snapshot.v409c69b9b3f950967f11d0ca682eb536aa406684 --save-exact

@clerk/themes

npm i @clerk/themes@2.1.41-snapshot.v409c69b9b3f950967f11d0ca682eb536aa406684 --save-exact

@clerk/types

npm i @clerk/types@4.29.1-snapshot.v409c69b9b3f950967f11d0ca682eb536aa406684 --save-exact

@clerk/ui

npm i @clerk/ui@0.1.12-snapshot.v409c69b9b3f950967f11d0ca682eb536aa406684 --save-exact

alexcarpenter · 2024-11-04T14:26:13Z

!snapshot

clerk-cookie · 2024-11-04T14:30:58Z

Hey @alexcarpenter - the snapshot version command generated the following package versions:

Package	Version
@clerk/astro	1.4.6-snapshot.vaba7c9f90cbdc70b2f44a3cf7178461b27ec75a3
@clerk/backend	1.15.6-snapshot.vaba7c9f90cbdc70b2f44a3cf7178461b27ec75a3
@clerk/chrome-extension	1.3.28-snapshot.vaba7c9f90cbdc70b2f44a3cf7178461b27ec75a3
@clerk/clerk-js	5.31.0-snapshot.vaba7c9f90cbdc70b2f44a3cf7178461b27ec75a3
@clerk/elements	0.18.4-snapshot.vaba7c9f90cbdc70b2f44a3cf7178461b27ec75a3
@clerk/clerk-expo	2.2.34-snapshot.vaba7c9f90cbdc70b2f44a3cf7178461b27ec75a3
@clerk/express	1.3.8-snapshot.vaba7c9f90cbdc70b2f44a3cf7178461b27ec75a3
@clerk/fastify	2.0.10-snapshot.vaba7c9f90cbdc70b2f44a3cf7178461b27ec75a3
@clerk/localizations	3.5.0-snapshot.vaba7c9f90cbdc70b2f44a3cf7178461b27ec75a3
@clerk/nextjs	6.2.0-snapshot.vaba7c9f90cbdc70b2f44a3cf7178461b27ec75a3
@clerk/clerk-react	5.15.0-snapshot.vaba7c9f90cbdc70b2f44a3cf7178461b27ec75a3
@clerk/remix	4.2.46-snapshot.vaba7c9f90cbdc70b2f44a3cf7178461b27ec75a3
@clerk/clerk-sdk-node	5.0.59-snapshot.vaba7c9f90cbdc70b2f44a3cf7178461b27ec75a3
@clerk/shared	2.11.4-snapshot.vaba7c9f90cbdc70b2f44a3cf7178461b27ec75a3
@clerk/tanstack-start	0.4.22-snapshot.vaba7c9f90cbdc70b2f44a3cf7178461b27ec75a3
@clerk/testing	1.3.20-snapshot.vaba7c9f90cbdc70b2f44a3cf7178461b27ec75a3
@clerk/themes	2.1.41-snapshot.vaba7c9f90cbdc70b2f44a3cf7178461b27ec75a3
@clerk/types	4.30.0-snapshot.vaba7c9f90cbdc70b2f44a3cf7178461b27ec75a3
@clerk/ui	0.1.15-snapshot.vaba7c9f90cbdc70b2f44a3cf7178461b27ec75a3

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/astro

npm i @clerk/astro@1.4.6-snapshot.vaba7c9f90cbdc70b2f44a3cf7178461b27ec75a3 --save-exact

@clerk/backend

npm i @clerk/backend@1.15.6-snapshot.vaba7c9f90cbdc70b2f44a3cf7178461b27ec75a3 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@1.3.28-snapshot.vaba7c9f90cbdc70b2f44a3cf7178461b27ec75a3 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@5.31.0-snapshot.vaba7c9f90cbdc70b2f44a3cf7178461b27ec75a3 --save-exact

@clerk/elements

npm i @clerk/elements@0.18.4-snapshot.vaba7c9f90cbdc70b2f44a3cf7178461b27ec75a3 --save-exact

@clerk/clerk-expo

npm i @clerk/clerk-expo@2.2.34-snapshot.vaba7c9f90cbdc70b2f44a3cf7178461b27ec75a3 --save-exact

@clerk/express

npm i @clerk/express@1.3.8-snapshot.vaba7c9f90cbdc70b2f44a3cf7178461b27ec75a3 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.0.10-snapshot.vaba7c9f90cbdc70b2f44a3cf7178461b27ec75a3 --save-exact

@clerk/localizations

npm i @clerk/localizations@3.5.0-snapshot.vaba7c9f90cbdc70b2f44a3cf7178461b27ec75a3 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@6.2.0-snapshot.vaba7c9f90cbdc70b2f44a3cf7178461b27ec75a3 --save-exact

@clerk/clerk-react

npm i @clerk/clerk-react@5.15.0-snapshot.vaba7c9f90cbdc70b2f44a3cf7178461b27ec75a3 --save-exact

@clerk/remix

npm i @clerk/remix@4.2.46-snapshot.vaba7c9f90cbdc70b2f44a3cf7178461b27ec75a3 --save-exact

@clerk/clerk-sdk-node

npm i @clerk/clerk-sdk-node@5.0.59-snapshot.vaba7c9f90cbdc70b2f44a3cf7178461b27ec75a3 --save-exact

@clerk/shared

npm i @clerk/shared@2.11.4-snapshot.vaba7c9f90cbdc70b2f44a3cf7178461b27ec75a3 --save-exact

@clerk/tanstack-start

npm i @clerk/tanstack-start@0.4.22-snapshot.vaba7c9f90cbdc70b2f44a3cf7178461b27ec75a3 --save-exact

@clerk/testing

npm i @clerk/testing@1.3.20-snapshot.vaba7c9f90cbdc70b2f44a3cf7178461b27ec75a3 --save-exact

@clerk/themes

npm i @clerk/themes@2.1.41-snapshot.vaba7c9f90cbdc70b2f44a3cf7178461b27ec75a3 --save-exact

@clerk/types

npm i @clerk/types@4.30.0-snapshot.vaba7c9f90cbdc70b2f44a3cf7178461b27ec75a3 --save-exact

@clerk/ui

npm i @clerk/ui@0.1.15-snapshot.vaba7c9f90cbdc70b2f44a3cf7178461b27ec75a3 --save-exact

Co-authored-by: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>

feat(elements): Add <Link /> component

433b611

clerk-cookie added the elements label Nov 1, 2024

alexcarpenter added 2 commits November 1, 2024 13:52

allow reading child href

5d1dd72

improve

70034b3

clerk-cookie added types clerk-js react labels Nov 1, 2024

alexcarpenter added 5 commits November 1, 2024 16:12

add changeset

2a56635

Update short-mails-brush.md

b168b08

add changeset

933434e

Merge branch 'alexcarpenter/elements-expose-link-component' of github…

8e66536

….com:clerk/javascript into alexcarpenter/elements-expose-link-component

mark as internal

5ada8c8

alexcarpenter marked this pull request as ready for review November 1, 2024 20:18

Update weak-hornets-hunt.md

3c41f08

alexcarpenter requested a review from a team November 1, 2024 20:19

alexcarpenter assigned alexcarpenter and dstaley Nov 1, 2024

panteliselef approved these changes Nov 1, 2024

View reviewed changes

alexcarpenter mentioned this pull request Nov 1, 2024

chore(Elements): Add <Link /> component references clerk/clerk-docs#1674

Merged

LauraBeatris approved these changes Nov 1, 2024

View reviewed changes

packages/elements/src/react/common/link.tsx Outdated Show resolved Hide resolved

packages/types/src/clerk.ts Show resolved Hide resolved

panteliselef reviewed Nov 1, 2024

View reviewed changes

packages/elements/src/react/common/link.tsx Outdated Show resolved Hide resolved

alexcarpenter and others added 4 commits November 1, 2024 16:47

Update packages/elements/src/react/common/link.tsx

e60ce32

Co-authored-by: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>

fix variable

7c25856

update type

cbb6952

doc block comment

409c69b

Merge branch 'main' into alexcarpenter/elements-expose-link-component

aba7c9f

tmilewski approved these changes Nov 4, 2024

View reviewed changes

alexcarpenter merged commit 1a0c8fe into main Nov 4, 2024
22 checks passed

alexcarpenter deleted the alexcarpenter/elements-expose-link-component branch November 4, 2024 15:11

clerk-cookie mentioned this pull request Nov 4, 2024

ci(repo): Version packages #4472

Merged

wobsoriano pushed a commit that referenced this pull request Feb 8, 2025

feat(elements): Add <Link /> component (#4456)

2d91b08

Co-authored-by: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>

coderabbitai bot mentioned this pull request Aug 8, 2025

feat(clerk-js): Introduce navigate for setActive #6486

Merged

9 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(elements): Add `<Link />` component #4456

feat(elements): Add `<Link />` component #4456

Uh oh!

alexcarpenter commented Nov 1, 2024 •

edited

Loading

Uh oh!

changeset-bot bot commented Nov 1, 2024 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

alexcarpenter commented Nov 4, 2024

Uh oh!

clerk-cookie commented Nov 4, 2024

Uh oh!

alexcarpenter commented Nov 4, 2024

Uh oh!

clerk-cookie commented Nov 4, 2024

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

feat(elements): Add <Link /> component #4456

feat(elements): Add <Link /> component #4456

Uh oh!

Conversation

alexcarpenter commented Nov 1, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Usage

Checklist

Type of change

Uh oh!

changeset-bot bot commented Nov 1, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

Uh oh!

Uh oh!

Uh oh!

alexcarpenter commented Nov 4, 2024

Uh oh!

clerk-cookie commented Nov 4, 2024

Uh oh!

alexcarpenter commented Nov 4, 2024

Uh oh!

clerk-cookie commented Nov 4, 2024

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

feat(elements): Add `<Link />` component #4456

feat(elements): Add `<Link />` component #4456

alexcarpenter commented Nov 1, 2024 •

edited

Loading

changeset-bot bot commented Nov 1, 2024 •

edited

Loading