diff --git a/docs/reference/components/authentication/sign-in.mdx b/docs/reference/components/authentication/sign-in.mdx
index 8b0ff39d53..ab96448cd2 100644
--- a/docs/reference/components/authentication/sign-in.mdx
+++ b/docs/reference/components/authentication/sign-in.mdx
@@ -2,10 +2,12 @@
 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'
 ---
 
-![The \<SignIn /> component renders a UI for signing in users.](/docs/images/ui-components/sign-in.png){{ style: { maxWidth: '460px' } }}
-
 The `<SignIn />` component renders a UI to allow users to sign in or sign up by default. The functionality of the `<SignIn />` component is controlled by the instance settings you specify in the [Clerk Dashboard](https://dashboard.clerk.com), such as [sign-in and sign-up options](/docs/guides/configure/auth-strategies/sign-up-sign-in-options) and [social connections](/docs/guides/configure/auth-strategies/social-connections/all-providers). You can further customize your `<SignIn />` component by passing additional [properties](#properties) at the time of rendering.
 
 > [!NOTE]
diff --git a/docs/reference/components/authentication/sign-up.mdx b/docs/reference/components/authentication/sign-up.mdx
index e641cb48e8..b50b10b9de 100644
--- a/docs/reference/components/authentication/sign-up.mdx
+++ b/docs/reference/components/authentication/sign-up.mdx
@@ -2,10 +2,12 @@
 title: '`<SignUp />` component'
 description: Clerk's <SignUp /> component renders a UI for signing up users.
 sdk: astro, chrome-extension, expo, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend
+preview:
+  src: '/sign-up'
+  shadcn:
+    nextjs: 'nextjs-sign-up-page'
 ---
 
-![The \<SignUp /> component renders a UI for signing up users.](/docs/images/ui-components/sign-up.png){{ style: { maxWidth: '460px' } }}
-
 The `<SignUp />` component renders a UI for signing up users. The functionality of the `<SignUp />` component is controlled by the instance settings you specify in the [Clerk Dashboard](https://dashboard.clerk.com), such as [sign-in and sign-up options](/docs/guides/configure/auth-strategies/sign-up-sign-in-options) and [social connections](/docs/guides/configure/auth-strategies/social-connections/all-providers). You can further customize your `<SignUp />` component by passing additional [properties](#properties) at the time of rendering.
 
 > [!NOTE]