Skip to content

Commit f383aa8

Browse files
authored
(elements) small clean up (#2180)
1 parent f6f6f1a commit f383aa8

File tree

1 file changed

+26
-26
lines changed

1 file changed

+26
-26
lines changed

docs/customization/elements/examples/shadcn-ui.mdx

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -9,31 +9,34 @@ The following examples demonstrate how to compose Clerk Elements with shadcn/ui
99

1010
To use these examples, you must first:
1111

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
14-
```shell {{ title: 'Install shadcn/ui components' }}
15-
npx shadcn@latest add button card input label
16-
```
17-
- 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:
19-
```js {{ filename: 'tailwind.config.js' }}
20-
/** @type {import('tailwindcss').Config} */
21-
module.exports = {
22-
theme: {
23-
extend: {
24-
keyframes: {
25-
'caret-blink': {
26-
'0%,70%,100%': { opacity: '1' },
27-
'20%,50%': { opacity: '0' },
28-
},
29-
},
30-
animation: {
31-
'caret-blink': 'caret-blink 1.25s ease-out infinite',
12+
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
14+
15+
```shell {{ title: 'Install shadcn/ui components' }}
16+
npx shadcn@latest add button card input label
17+
```
18+
19+
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:
21+
22+
```js {{ filename: 'tailwind.config.js' }}
23+
/** @type {import('tailwindcss').Config} */
24+
module.exports = {
25+
theme: {
26+
extend: {
27+
keyframes: {
28+
'caret-blink': {
29+
'0%,70%,100%': { opacity: '1' },
30+
'20%,50%': { opacity: '0' },
3231
},
3332
},
33+
animation: {
34+
'caret-blink': 'caret-blink 1.25s ease-out infinite',
35+
},
3436
},
35-
}
36-
```
37+
},
38+
}
39+
```
3740

3841
You must also configure the appropriate settings in Clerk:
3942

@@ -60,7 +63,6 @@ You must also configure the appropriate settings in Clerk:
6063
'use client'
6164
import * as Clerk from '@clerk/elements/common'
6265
import * as SignUp from '@clerk/elements/sign-up'
63-
import Link from 'next/link'
6466
import { Button } from '@/components/ui/button'
6567
import {
6668
Card,
@@ -326,7 +328,6 @@ You must also configure the appropriate settings in Clerk:
326328
'use client'
327329
import * as Clerk from '@clerk/elements/common'
328330
import * as SignIn from '@clerk/elements/sign-in'
329-
import Link from 'next/link'
330331
import { Button } from '@/components/ui/button'
331332
import {
332333
Card,
@@ -339,7 +340,6 @@ You must also configure the appropriate settings in Clerk:
339340
import { Input } from '@/components/ui/input'
340341
import { Label } from '@/components/ui/label'
341342
import { Icons } from '@/components/ui/icons'
342-
import { cn } from '@/lib/utils'
343343

344344
export default function SignInPage() {
345345
return (
@@ -612,7 +612,7 @@ You must also configure the appropriate settings in Clerk:
612612
```
613613
</CodeBlockDemo>
614614

615-
## OTP Input
615+
## OTP input
616616

617617
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.
618618

0 commit comments

Comments
 (0)