Skip to content

Commit 8051345

Browse files
Add theme simple docs (#2452)
1 parent 81aa3da commit 8051345

File tree

2 files changed

+21
-2
lines changed

2 files changed

+21
-2
lines changed

docs/customization/themes.mdx

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
---
22
title: Themes
3-
description: Clerk currently offers four prebuilt themes for you to customize the overall appearance of your Clerk app.
3+
description: Clerk currently offers six prebuilt themes for you to customize the overall appearance of your Clerk app.
44
---
55

6-
Clerk currently offers four prebuilt themes:
6+
Clerk currently offers six prebuilt themes:
77

88
- [The default theme](#default-theme)
99
- [The "shadcn" theme](#shadcn-theme)
1010
- [The "Dark" theme](#dark-theme)
1111
- [The "Shades of Purple" theme](#shades-of-purple-theme)
1212
- [The "Neobrutalism" theme](#neobrutalism-theme)
13+
- [The "Simple" theme](#simple-theme)
1314

1415
## Default theme
1516

@@ -51,6 +52,24 @@ When using the [shadcn/ui](https://ui.shadcn.com/) library, you can use the `sha
5152
![A sign-in form with a neobrutalist red theme](/docs/images/themes/neobrutalism.png){{ style: { maxWidth: '400px' } }}
5253
</div>
5354

55+
## "Simple" theme
56+
57+
This theme is a stripped down "Default" theme that removes some more advanced styling techniques, making it easier to apply your own custom styles.
58+
59+
To use the simple theme, set `theme` to `simple`:
60+
61+
```tsx {{ mark: ['simple'] }}
62+
<ClerkProvider
63+
appearance={{
64+
theme: 'simple',
65+
}}
66+
/>
67+
```
68+
69+
<div style={{padding: "1rem 0"}}>
70+
![A sign-in form with a simple theme](/docs/images/themes/simple.png){{ style: { maxWidth: '400px' } }}
71+
</div>
72+
5473
## Usage
5574

5675
1. To get started, install the `@clerk/themes` package.

public/images/themes/simple.png

34.3 KB
Loading

0 commit comments

Comments
 (0)