From 8dcb3efd8d3cf856282558ca89f7a02c118ee814 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Thu, 17 Jul 2025 17:03:27 -0400 Subject: [PATCH 1/9] Add shacn theme --- docs/customization/themes.mdx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/docs/customization/themes.mdx b/docs/customization/themes.mdx index 8b974378ae..8a1d634e98 100644 --- a/docs/customization/themes.mdx +++ b/docs/customization/themes.mdx @@ -18,6 +18,12 @@ Applied by default when no other theme is provided. ![A sign-in form with a light theme](/docs/images/themes/default.svg) +## "shadcn" theme + +
+ ![A sign-in form with a shadcn theme](/docs/images/themes/shadcn.svg) +
+ ## "Dark" theme
From 23ac6b74e2cd27cbaee2b61ce027fc5a85973062 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Fri, 18 Jul 2025 12:00:45 -0400 Subject: [PATCH 2/9] add image --- docs/customization/themes.mdx | 1 + public/images/themes/shadcn.svg | 117 ++++++++++++++++++++++++++++++++ 2 files changed, 118 insertions(+) create mode 100644 public/images/themes/shadcn.svg diff --git a/docs/customization/themes.mdx b/docs/customization/themes.mdx index 8a1d634e98..121afa128e 100644 --- a/docs/customization/themes.mdx +++ b/docs/customization/themes.mdx @@ -6,6 +6,7 @@ description: Clerk currently offers four prebuilt themes for you to customize th Clerk currently offers four prebuilt themes: - [The default theme](#default-theme) +- [The "shadcn" theme](#shadcn-theme) - [The "Dark" theme](#dark-theme) - [The "Shades of Purple" theme](#shades-of-purple-theme) - [The "Neobrutalism" theme](#neobrutalism-theme) diff --git a/public/images/themes/shadcn.svg b/public/images/themes/shadcn.svg new file mode 100644 index 0000000000..14347f99a7 --- /dev/null +++ b/public/images/themes/shadcn.svg @@ -0,0 +1,117 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From 2c1648514584eea6e66f1bbb45ddaba3b5256ba3 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Fri, 18 Jul 2025 13:28:49 -0400 Subject: [PATCH 3/9] use tabs to show both light/dark modes --- docs/customization/themes.mdx | 10 +- .../{shadcn.svg => shadcn_dark_mode.svg} | 110 ++++++---------- public/images/themes/shadcn_light_mode.svg | 117 ++++++++++++++++++ 3 files changed, 166 insertions(+), 71 deletions(-) rename public/images/themes/{shadcn.svg => shadcn_dark_mode.svg} (96%) create mode 100644 public/images/themes/shadcn_light_mode.svg diff --git a/docs/customization/themes.mdx b/docs/customization/themes.mdx index 121afa128e..b2f53b1986 100644 --- a/docs/customization/themes.mdx +++ b/docs/customization/themes.mdx @@ -21,10 +21,18 @@ Applied by default when no other theme is provided. ## "shadcn" theme +When using the [shadcn/ui](https://ui.shadcn.com/) library, you can use the `shadcn` theme to apply the shadcn/ui styles to your Clerk components. This will adapt to both light and dark mode automatically. + +
- ![A sign-in form with a shadcn theme](/docs/images/themes/shadcn.svg) + ![A sign-in form with a shadcn theme in light mode](/docs/images/themes/shadcn_light_mode.svg)
+
+ ![A sign-in form with a shadcn theme in dark mode](/docs/images/themes/shadcn_dark_mode.svg) +
+ + ## "Dark" theme
diff --git a/public/images/themes/shadcn.svg b/public/images/themes/shadcn_dark_mode.svg similarity index 96% rename from public/images/themes/shadcn.svg rename to public/images/themes/shadcn_dark_mode.svg index 14347f99a7..84f28b5cbd 100644 --- a/public/images/themes/shadcn.svg +++ b/public/images/themes/shadcn_dark_mode.svg @@ -1,58 +1,56 @@ - - + + - - - - - - - - - + + + + + + + + + - - + + - - + + - - + + - - + + - - + + - - + + - - - - - - - - + + + + + + + - + - - - - - + + + + @@ -60,7 +58,7 @@ - + @@ -68,49 +66,21 @@ - + - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - + diff --git a/public/images/themes/shadcn_light_mode.svg b/public/images/themes/shadcn_light_mode.svg new file mode 100644 index 0000000000..88d9968126 --- /dev/null +++ b/public/images/themes/shadcn_light_mode.svg @@ -0,0 +1,117 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From 9d25a460649d67e1a8fc931800785e529844ff7d Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Fri, 18 Jul 2025 13:35:52 -0400 Subject: [PATCH 4/9] update graphics --- public/images/themes/shadcn_dark_mode.svg | 2 +- public/images/themes/shadcn_light_mode.svg | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/public/images/themes/shadcn_dark_mode.svg b/public/images/themes/shadcn_dark_mode.svg index 84f28b5cbd..00d3b23fa7 100644 --- a/public/images/themes/shadcn_dark_mode.svg +++ b/public/images/themes/shadcn_dark_mode.svg @@ -6,7 +6,7 @@ - + diff --git a/public/images/themes/shadcn_light_mode.svg b/public/images/themes/shadcn_light_mode.svg index 88d9968126..bbc678e1f5 100644 --- a/public/images/themes/shadcn_light_mode.svg +++ b/public/images/themes/shadcn_light_mode.svg @@ -6,18 +6,18 @@ - + - + - + @@ -29,7 +29,7 @@ - + @@ -40,7 +40,7 @@ - + From 77e2706d823cf2d0d4c464bea31dfe444a438a23 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Fri, 18 Jul 2025 13:36:26 -0400 Subject: [PATCH 5/9] format --- docs/customization/themes.mdx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/customization/themes.mdx b/docs/customization/themes.mdx index b2f53b1986..9e5ed88f77 100644 --- a/docs/customization/themes.mdx +++ b/docs/customization/themes.mdx @@ -24,13 +24,13 @@ Applied by default when no other theme is provided. When using the [shadcn/ui](https://ui.shadcn.com/) library, you can use the `shadcn` theme to apply the shadcn/ui styles to your Clerk components. This will adapt to both light and dark mode automatically. -
- ![A sign-in form with a shadcn theme in light mode](/docs/images/themes/shadcn_light_mode.svg) -
+
+ ![A sign-in form with a shadcn theme in light mode](/docs/images/themes/shadcn_light_mode.svg) +
-
- ![A sign-in form with a shadcn theme in dark mode](/docs/images/themes/shadcn_dark_mode.svg) -
+
+ ![A sign-in form with a shadcn theme in dark mode](/docs/images/themes/shadcn_dark_mode.svg) +
## "Dark" theme From c9c81a585c71b28c9468a03e21062a6f46b4efff Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Fri, 18 Jul 2025 13:44:16 -0400 Subject: [PATCH 6/9] update graphics --- public/images/themes/shadcn_dark_mode.svg | 21 ++--- public/images/themes/shadcn_light_mode.svg | 92 ++++++++++------------ 2 files changed, 49 insertions(+), 64 deletions(-) diff --git a/public/images/themes/shadcn_dark_mode.svg b/public/images/themes/shadcn_dark_mode.svg index 00d3b23fa7..4749335c2b 100644 --- a/public/images/themes/shadcn_dark_mode.svg +++ b/public/images/themes/shadcn_dark_mode.svg @@ -1,9 +1,5 @@ - - - - @@ -11,29 +7,29 @@ - + - + - + - - + + - + - + - + @@ -56,7 +52,6 @@ - diff --git a/public/images/themes/shadcn_light_mode.svg b/public/images/themes/shadcn_light_mode.svg index bbc678e1f5..7bc4a3502e 100644 --- a/public/images/themes/shadcn_light_mode.svg +++ b/public/images/themes/shadcn_light_mode.svg @@ -1,66 +1,59 @@ - - - + + + + + + + + + - - - - - - - - - + + + + + - - - - - + + - - - - - + - - - + + + - - + + - - - - - + + + + + - - + + - - - + - - - - - - - - + + + + + + + + - + @@ -79,10 +72,10 @@ - + - + @@ -110,8 +103,5 @@ - - - From 585e175f8936e9adefd6ef347b35964f11a97182 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Fri, 18 Jul 2025 14:21:59 -0400 Subject: [PATCH 7/9] update images --- public/images/themes/shadcn_dark_mode.svg | 246 +++++++++++++++----- public/images/themes/shadcn_light_mode.svg | 252 +++++++++++++++------ 2 files changed, 375 insertions(+), 123 deletions(-) diff --git a/public/images/themes/shadcn_dark_mode.svg b/public/images/themes/shadcn_dark_mode.svg index 4749335c2b..2750cf27d2 100644 --- a/public/images/themes/shadcn_dark_mode.svg +++ b/public/images/themes/shadcn_dark_mode.svg @@ -1,82 +1,214 @@ - - - - - - - - - - - - - - + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - + + + + + - - - - - - - + + + + + + + + + + + + + + + + + + - + + + + + + + + + + + - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + - - + - + - + - + + - - + - + + + + + + + + + + + + + + + + + + + + + + + + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/themes/shadcn_light_mode.svg b/public/images/themes/shadcn_light_mode.svg index 7bc4a3502e..808bffac50 100644 --- a/public/images/themes/shadcn_light_mode.svg +++ b/public/images/themes/shadcn_light_mode.svg @@ -1,107 +1,227 @@ - - - - - - - - - - - - - + + + + + + + + + + + + + - - - - - - - - - - + + + + + - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + - + + + + + + + + + + + - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + - - + - + - + - + + - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + + + + + + + - - - + + + - - + + + + + + + + + + + - + - + - + + + + + + + + - + + + + + + + + + + + + + + + + From 08e5ab028038a7be6e5958e30dd45d5f51746880 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Fri, 18 Jul 2025 14:29:58 -0400 Subject: [PATCH 8/9] remove filters --- docs/customization/themes.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/customization/themes.mdx b/docs/customization/themes.mdx index 9e5ed88f77..b4dce01d22 100644 --- a/docs/customization/themes.mdx +++ b/docs/customization/themes.mdx @@ -24,11 +24,11 @@ Applied by default when no other theme is provided. When using the [shadcn/ui](https://ui.shadcn.com/) library, you can use the `shadcn` theme to apply the shadcn/ui styles to your Clerk components. This will adapt to both light and dark mode automatically. -
+
![A sign-in form with a shadcn theme in light mode](/docs/images/themes/shadcn_light_mode.svg)
-
+
![A sign-in form with a shadcn theme in dark mode](/docs/images/themes/shadcn_dark_mode.svg)
From fc7fe64b2e41ac27aeb48640401a7335fea228ac Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Fri, 18 Jul 2025 14:34:39 -0400 Subject: [PATCH 9/9] fix --- docs/customization/themes.mdx | 4 +- public/images/themes/shadcn_dark_mode.svg | 103 +++++++--------- public/images/themes/shadcn_light_mode.svg | 130 +++++++-------------- 3 files changed, 91 insertions(+), 146 deletions(-) diff --git a/docs/customization/themes.mdx b/docs/customization/themes.mdx index b4dce01d22..9e5ed88f77 100644 --- a/docs/customization/themes.mdx +++ b/docs/customization/themes.mdx @@ -24,11 +24,11 @@ Applied by default when no other theme is provided. When using the [shadcn/ui](https://ui.shadcn.com/) library, you can use the `shadcn` theme to apply the shadcn/ui styles to your Clerk components. This will adapt to both light and dark mode automatically. -
+
![A sign-in form with a shadcn theme in light mode](/docs/images/themes/shadcn_light_mode.svg)
-
+
![A sign-in form with a shadcn theme in dark mode](/docs/images/themes/shadcn_dark_mode.svg)
diff --git a/public/images/themes/shadcn_dark_mode.svg b/public/images/themes/shadcn_dark_mode.svg index 2750cf27d2..c1c3e3b3a1 100644 --- a/public/images/themes/shadcn_dark_mode.svg +++ b/public/images/themes/shadcn_dark_mode.svg @@ -1,84 +1,71 @@ - - + + - + - - - - + + + + - + - + - + - + - + - + - - - - + + + + - + - - + + - + - - - - - - - - + + + + + + + + - + - - - - - - - - - - - - - - + - - + + - + @@ -100,7 +87,7 @@ - + @@ -122,7 +109,7 @@ - + @@ -144,7 +131,7 @@ - + @@ -166,7 +153,7 @@ - + @@ -182,7 +169,7 @@ - + @@ -193,22 +180,22 @@ - + - + - + - + - + - + diff --git a/public/images/themes/shadcn_light_mode.svg b/public/images/themes/shadcn_light_mode.svg index 808bffac50..e11e791cf1 100644 --- a/public/images/themes/shadcn_light_mode.svg +++ b/public/images/themes/shadcn_light_mode.svg @@ -1,82 +1,68 @@ - - + + - + - - - - + + + + - + - + - + - + - + - + - - - - + + + + - + - - - + + + - + - - - - - - - - - + + + + + + + + - + - - - - - - - - - - - - - - + - - + + - + @@ -98,7 +84,7 @@ - + @@ -120,7 +106,7 @@ - + @@ -142,7 +128,7 @@ - + @@ -164,7 +150,7 @@ - + @@ -180,48 +166,20 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - + - + - + - +