You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/customization/elements/examples/shadcn-ui.mdx
+26-26Lines changed: 26 additions & 26 deletions
Original file line number
Diff line number
Diff line change
@@ -9,31 +9,34 @@ The following examples demonstrate how to compose Clerk Elements with shadcn/ui
9
9
10
10
To use these examples, you must first:
11
11
12
-
- Complete the [shadcn/ui Next.js installation guide](https://ui.shadcn.com/docs/installation/next)
13
-
- Install the [Button](https://ui.shadcn.com/docs/components/button), [Card](https://ui.shadcn.com/docs/components/card), [Input](https://ui.shadcn.com/docs/components/input), and [Label](https://ui.shadcn.com/docs/components/label) components within your project
- Add the [`Icons` component from the shadcn/ui docs](https://github.com/shadcn-ui/ui/blob/main/apps/www/components/icons.tsx) to an `icons.tsx` file within your `component/ui/` directory.
18
-
- Add the following animations to your `tailwind.config.js` file:
1. Complete the [shadcn/ui Next.js installation guide](https://ui.shadcn.com/docs/installation/next)
13
+
1. Install the [Button](https://ui.shadcn.com/docs/components/button), [Card](https://ui.shadcn.com/docs/components/card), [Input](https://ui.shadcn.com/docs/components/input), and [Label](https://ui.shadcn.com/docs/components/label) components within your project
1. Add the [`Icons` component from the shadcn/ui docs](https://github.com/shadcn-ui/ui/blob/main/apps/www/components/icons.tsx) to an `icons.tsx` file within your `component/ui/` directory.
20
+
1. Add the following animations to your `tailwind.config.js` file:
You must also configure the appropriate settings in Clerk:
39
42
@@ -60,7 +63,6 @@ You must also configure the appropriate settings in Clerk:
60
63
'use client'
61
64
import*asClerkfrom'@clerk/elements/common'
62
65
import*asSignUpfrom'@clerk/elements/sign-up'
63
-
importLinkfrom'next/link'
64
66
import { Button } from'@/components/ui/button'
65
67
import {
66
68
Card,
@@ -326,7 +328,6 @@ You must also configure the appropriate settings in Clerk:
326
328
'use client'
327
329
import*asClerkfrom'@clerk/elements/common'
328
330
import*asSignInfrom'@clerk/elements/sign-in'
329
-
importLinkfrom'next/link'
330
331
import { Button } from'@/components/ui/button'
331
332
import {
332
333
Card,
@@ -339,7 +340,6 @@ You must also configure the appropriate settings in Clerk:
339
340
import { Input } from'@/components/ui/input'
340
341
import { Label } from'@/components/ui/label'
341
342
import { Icons } from'@/components/ui/icons'
342
-
import { cn } from'@/lib/utils'
343
343
344
344
exportdefaultfunction SignInPage() {
345
345
return (
@@ -612,7 +612,7 @@ You must also configure the appropriate settings in Clerk:
612
612
```
613
613
</CodeBlockDemo>
614
614
615
-
## OTP Input
615
+
## OTP input
616
616
617
617
The following example demonstrates how to make a one-time password (OTP) input with Clerk Elements. This example will only work if placed within a `Step` in a sign-up or sign-in authentication flow, as shown in [the sign-in](#sign-in) and [sign-up](#sign-up) examples.
0 commit comments