Thanks to visit codestin.com
Credit goes to Github.com

Skip to content

Conversation

@alexcarpenter
Copy link
Member

@alexcarpenter alexcarpenter commented Oct 9, 2025

πŸ”Ž Previews:

What does this solve?

  • Replaces static component images with dynamic previews.

What changed?

Checklist

  • I have clicked on "Files changed" and performed a thorough self-review
  • All existing checks pass

@vercel
Copy link

vercel bot commented Oct 9, 2025

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

Project Deployment Review Updated (UTC)
clerk-docs Ready Ready Preview Jan 23, 2026 7:05pm

Request Review

@alexcarpenter alexcarpenter changed the title init sign-in preview Oct 9, 2025
@alexcarpenter alexcarpenter changed the title sign-in preview feat: Add sign-in and sign-up previews Oct 21, 2025
@alexcarpenter alexcarpenter changed the title feat: Add sign-in and sign-up previews feat: Add component previews Dec 15, 2025
@manovotny
Copy link
Contributor

Looks like the clerk/clerk changes to allow this came in on https://github.com/clerk/clerk/pull/1840.

@NWylynko how do you feel about using frontmatter to control the rendering of this?

@alexcarpenter
Copy link
Member Author

Looks like the clerk/clerk changes to allow this came in on clerk/clerk#1840.

@NWylynko how do you feel about using frontmatter to control the rendering of this?

Correct, we need to control the positioning of the elements (outside the contents of the body of the pages), which is why I went with frontmatter as opposed to exposing a component to be used.

@NWylynko
Copy link
Contributor

Looks like the clerk/clerk changes to allow this came in on clerk/clerk#1840.
@NWylynko how do you feel about using frontmatter to control the rendering of this?

Correct, we need to control the positioning of the elements (outside the contents of the body of the pages), which is why I went with frontmatter as opposed to exposing a component to be used.

Yup frontmatter definitely makes sense here. But adds to the point that we need to be transforming markdown before exposing it to LLMs as things like this will just confuse them.

@alexcarpenter
Copy link
Member Author

alexcarpenter commented Dec 15, 2025

Looks like the clerk/clerk changes to allow this came in on clerk/clerk#1840.
@NWylynko how do you feel about using frontmatter to control the rendering of this?

Correct, we need to control the positioning of the elements (outside the contents of the body of the pages), which is why I went with frontmatter as opposed to exposing a component to be used.

Yup frontmatter definitely makes sense here. But adds to the point that we need to be transforming markdown before exposing it to LLMs as things like this will just confuse them.

Should we just strip the frontmatter and inject an h1 tag and description with the page?

---
title: '`<SignIn />` component'
description: Clerk's <SignIn /> component renders a UI for signing in users.
sdk: astro, chrome-extension, expo, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend
preview:
  src: '/sign-in'
  shadcn:
    nextjs: 'nextjs-sign-in-page'
---

...

becomes

# `<SignIn />` component

> Clerk's <SignIn /> component renders a UI for signing in users.

...

This looks to be what mintlify does.

@alexisintech
Copy link
Member

Looks like the clerk/clerk changes to allow this came in on clerk/clerk#1840.
@NWylynko how do you feel about using frontmatter to control the rendering of this?

Correct, we need to control the positioning of the elements (outside the contents of the body of the pages), which is why I went with frontmatter as opposed to exposing a component to be used.

Yup frontmatter definitely makes sense here. But adds to the point that we need to be transforming markdown before exposing it to LLMs as things like this will just confuse them.

Should we just strip the frontmatter and inject an h1 tag and description with the page?

---
title: '`<SignIn />` component'
description: Clerk's <SignIn /> component renders a UI for signing in users.
sdk: astro, chrome-extension, expo, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend
preview:
  src: '/sign-in'
  shadcn:
    nextjs: 'nextjs-sign-in-page'
---

...

becomes

# `<SignIn />` component

> Clerk's <SignIn /> component renders a UI for signing in users.

...

This looks to be what mintlify does.

for context,
we used to do that (h1 and description) but moved to frontmatter so that we could support more frontmatter keys, such as meta, search, etc.
then there was one point where we had both frontmatter and h1's + descriptions and the inconsistency started messing things up (and sometimes pages even had both, which was kind of confusing like "which was being used for the h1 for the page, and which for the meta title?")

imo, i think we should stick with frontmatter - for the sake of maintaining consistency across docs pages

@alexisintech
Copy link
Member

Screenshot 2025-12-15 at 23 16 47

is there a way to control the sizing of these?

@alexcarpenter
Copy link
Member Author

@alexisintech

imo, i think we should stick with frontmatter - for the sake of maintaining consistency across docs pages

Yeah, my recommendation was only for the transformed content for LLMs. You'd still author everything using frontmatter.

is there a way to control the sizing of these?

Yeah, I can tweak the avatar sizing today

@alexcarpenter
Copy link
Member Author

@alexisintech here is a PR to reduce the height of the avatar component https://github.com/clerk/clerk/pull/1922

@alexisintech
Copy link
Member

is it supposed to 404, or is it supposed to do nothing at all?

Screen.Recording.2026-01-05.at.17.40.24.mov

@alexisintech
Copy link
Member

alexisintech commented Jan 5, 2026

if it's possible, I think that when a user goes to delete their account in these mock components:

Screen.Recording.2026-01-05.at.17.46.39.mov

Instead of it taking the user to that vercel preview, we should show a similar error message to this one:
Screenshot 2026-01-05 at 17 45 50

@alexisintech
Copy link
Member

In the theme editor, we have "reset to default" - how much of a hassle would it be to add an "undo" functionality? πŸ‘€

@alexcarpenter
Copy link
Member Author

In the theme editor, we have "reset to default" - how much of a hassle would it be to add an "undo" functionality? πŸ‘€

Here is a PR to implement undo/redo functionality https://github.com/clerk/clerk/pull/1956

@alexcarpenter
Copy link
Member Author

@alexisintech working on the mock fixes!

@alexcarpenter
Copy link
Member Author

if it's possible, I think that when a user goes to delete their account in these mock components:

Screen.Recording.2026-01-05.at.17.46.39.mov
Instead of it taking the user to that vercel preview, we should show a similar error message to this one: Screenshot 2026-01-05 at 17 45 50

Good catch! Mocked

Screenshot 2026-01-08 at 2 06 34β€―PM

@alexcarpenter
Copy link
Member Author

is it supposed to 404, or is it supposed to do nothing at all?

Screen.Recording.2026-01-05.at.17.40.24.mov

this should be fixed too

@alexisintech
Copy link
Member

alexisintech commented Jan 8, 2026

last nit pick - for task-choose-organization , when selecting an organization or creating a new, it leads the user to a 404
https://github.com/user-attachments/assets/fb80e12d-a538-4a5e-b12e-6f182cb65cc8

@alexisintech
Copy link
Member

and for the waitlist component, do we want the error to show the same as the other components - the "this is mock data" error? if its too much hassle, then its probably not a big deal

Screenshot 2026-01-08 at 15 31 42

@SarahSoutoul
Copy link
Contributor

SarahSoutoul commented Jan 8, 2026

@alexcarpenter have just taken a look at this. It looks awesome πŸŽ‰

Noticed some weird behaviour with the <OrganizationSwitcher /> component that I wanted to flag. Might be expected behaviour but as a tester, I found it weird so thought I'd report.

Two things:

  • When switching to the Dark theme while being in Light mode, the Personal account text next to the avatar isn't visible anymore as it stays white against the light background. This isn't a problem when in dark mode.
  • With the same exact settings (dark theme and light mode), when I go and create an organization and we're redirected to the switcher, again the switcher isn't visible due to color contrasting being wrong. Again, not an issue when in dark mode.
Screen.Recording.2026-01-08.at.3.50.08.pm.mov

As another note, if I select a theme for a component, and then click on another component, I understand the theme will propagate across components. And also applies when I go to customize the theme, and say apply a red background, that red background will propagate to the other components I click on after that. Just curious to know if that was the intention here, or a bug?

@alexcarpenter
Copy link
Member Author

@SarahSoutoul the two bullets are expected. Since its the light theme being displayed on a dark background. The default theme atm of this deployment doesn't support switching between light/dark mode, only shadcn theme does.

As another note, if I select a theme for a component, and then click on another component, I understand the theme will propagate across components. And also applies when I go to customize the theme, and say apply a red background, that red background will propagate to the other components I click on after that. Just curious to know if that was the intention here, or a bug?

Intentional, yes

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants