shadcn/ui
The following examples demonstrate how to compose Clerk Elements with shadcn/ui to build custom sign-in and sign-up flows.
Before you start
To use these examples, you must first:
- Complete the shadcn/ui Next.js installation guide
- Install the Button, Card, Input, and Label components within your project
- Add the
Icons
component from the shadcn/ui docs to anicons.tsx
file within yourcomponent/ui/
directory. - Add the following animations to your
tailwind.config.js
file:
You must also configure the appropriate settings in Clerk:
- Navigate to the Clerk Dashboard.
- In the navigation sidebar, select User & Authentication > Social connections.
- Ensure that Google and GitHub are enabled.
Sign up
OTP Input
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 and sign-up examples.
Feedback
Last updated on