InfoThis documentation is just for PropelAuth Components, an optional library for those who want deeper design control over their UIs.Click here to view our standard documentation

LogoUI

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
  1. 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
  1. 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

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

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