diff --git a/docs/customization/themes.mdx b/docs/customization/themes.mdx index 8b974378ae..9e5ed88f77 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) @@ -18,6 +19,20 @@ Applied by default when no other theme is provided. ![A sign-in form with a light theme](/docs/images/themes/default.svg) +## "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 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_dark_mode.svg b/public/images/themes/shadcn_dark_mode.svg new file mode 100644 index 0000000000..c1c3e3b3a1 --- /dev/null +++ b/public/images/themes/shadcn_dark_mode.svg @@ -0,0 +1,201 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/themes/shadcn_light_mode.svg b/public/images/themes/shadcn_light_mode.svg new file mode 100644 index 0000000000..e11e791cf1 --- /dev/null +++ b/public/images/themes/shadcn_light_mode.svg @@ -0,0 +1,185 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +