Component Registry

The PropelAuth Frontend API documentation provides a set of components that can be copied into your project to build your own custom UIs around logging in, signing up, managing organizations, and everything in between.

Our shadcn component registry is an optional way to get these components into your project. You'll still need to install the frontend API library to use this component registry. If you plan on using any of the login and signup APIs, make sure to read through the Login & Signup Guide first.

Installation

The shadcn registry allows you to install individual components into your app. To do so, in your target app:

1. Follow the shadcn installation instructions to set up shadcn in your app.

2. Initialize shadcn:

   npx shadcn@latest init

CopyCopied!

3. Install components. In this example we’ll install the Enable / Disable MFA component.

   npx shadcn@latest add https://components.propelauth.com/r/enable-disable-mfa.json

CopyCopied!

4. Import and start using your new components!

Install All Components

Optionally, you can install all components within the PropelAuth registry by installing the all-fe-api-components component:

   npx shadcn@latest add https://components.propelauth.com/r/all-fe-api-components.json

CopyCopied!

Full Component List

Account Page Components

• Enable / Disable MFA: npx shadcn@latest add https://components.propelauth.com/r/enable-disable-mfa.json

• Delete User Account: npx shadcn@latest add https://components.propelauth.com/r/delete-user-account.json

• Update Email: npx shadcn@latest add https://components.propelauth.com/r/update-email.json

• Update User Property: npx shadcn@latest add https://components.propelauth.com/r/update-user-property.json

• Update User Password: npx shadcn@latest add https://components.propelauth.com/r/update-user-password.json

Organization Components

• Create Organization: npx shadcn@latest add https://components.propelauth.com/r/create-organization.json

• Update Organization Name: npx shadcn@latest add https://components.propelauth.com/r/update-organization-name.json

• Delete Organization: npx shadcn@latest add https://components.propelauth.com/r/delete-organization.json

Organization Membership Components

• Org Membership Table: npx shadcn@latest add https://components.propelauth.com/r/org-membership-table.json

• View & Revoke Org Invites: npx shadcn@latest add https://components.propelauth.com/r/view-and-revoke-org-invites.json

• View Expired Org Invites: npx shadcn@latest add https://components.propelauth.com/r/view-expired-org-invites.json

• Invite User to Org: npx shadcn@latest add https://components.propelauth.com/r/invite-user-to-organization.json

• Update Org Membership Settings: npx shadcn@latest add https://components.propelauth.com/r/update-org-membership-settings.json

• Update Org 2FA Requirement: npx shadcn@latest add https://components.propelauth.com/r/update-org-2fa-requirement.json

API Key Components

• Personal API Key Table: npx shadcn@latest add https://components.propelauth.com/r/personal-api-key-table.json

• Create Personal API Key: npx shadcn@latest add https://components.propelauth.com/r/create-personal-api-key.json

• Org API Key Table: npx shadcn@latest add https://components.propelauth.com/r/org-api-key-table.json

• Create Org API Key: npx shadcn@latest add https://components.propelauth.com/r/create-org-api-key.json

Login and Signup Components

• Email & Password Signup: npx shadcn@latest add https://components.propelauth.com/r/email-password-signup.json

• Email & Password Login: npx shadcn@latest add https://components.propelauth.com/r/email-password-login.json

• Magic Link Login & Signup: npx shadcn@latest add https://components.propelauth.com/r/magic-link-login.json

• Social Provider Login & Signup: npx shadcn@latest add https://components.propelauth.com/r/social-provider-login.json

• Enterprise SSO Login & Signup: npx shadcn@latest add https://components.propelauth.com/r/enterprise-sso-login.json

• Request Password Reset: npx shadcn@latest add https://components.propelauth.com/r/request-password-reset.json

• Confirm Your Email: npx shadcn@latest add https://components.propelauth.com/r/confirm-your-email.json

• Join an Organization: npx shadcn@latest add https://components.propelauth.com/r/join-an-organization.json

• Enroll in MFA: npx shadcn@latest add https://components.propelauth.com/r/enroll-in-mfa.json

• Verify MFA For Login: npx shadcn@latest add https://components.propelauth.com/r/verify-mfa-for-login.json