@clerk/elements

@clerk/elements

Changelog · Report a Bug · Request a Feature · Ask a Question

---

Overview

Clerk Elements is a library of unstyled, composable components that can be used to build completely custom UIs on top of Clerk's APIs, without having to manage the underlying logic.

[!WARNING] Clerk Elements is currently in beta. It's not recommended to use it in production just yet, but it would be much appreciated if you give it a try. If you have any feedback, please reach out to [e-mail] or head over to the GitHub Discussion.

Getting started

Prerequisites

• Next.js ^13.5.4 || ^14.0.3 or later
• React 18 or later
• Node.js >=18.17.0 or later
• You need to use the Core 2 version (or later) of Clerk's SDKs

Installation

npm install @clerk/elements

[!NOTE] If your project uses TypeScript, make sure that moduleResolution in tsconfig.json is set to bundler. Otherwise, you might run into issues with resolving TypeScript types from Clerk Elements.

Usage

Once you've got your project set up, you can start building custom UIs with Clerk Elements. The following guides will show you how to build your own custom flows:

• Build a sign-in flow
• Build a sign-up flow

If you want to see what's possible with Clerk Elements, check out these pre-built examples from the Clerk team:

• Sign-in examples
• Sign-up examples

Finally, to learn about the available components and how to use them, check out the component reference pages:

• Common components
• Sign-in components
• Sign-up components

With the beta release, only sign-up and sign-in flows are supported. Support for building the rest of Clerk's prebuilt components with Elements is actively being worked on.

Support

You can get in touch with us in any of the following ways:

• Join our official community Discord server
• Create a GitHub Discussion
• Contact options listed on our Support page

Contributing

We're open to all community contributions! If you'd like to contribute in any way, please read our contribution guidelines.

Package development

• Navigate to examples/nextjs and install the dependencies
• You can run the example app through npm run dev:example inside packages/elements afterwards

Security

@clerk/elements follows good practices of security, but 100% security cannot be assured.

@clerk/elements is provided "as is" without any warranty. Use at your own risk.

For more information and to report security issues, please refer to our security documentation.

License

This project is licensed under the MIT license.

See LICENSE for more information.