@aws-amplify/ui-react package is currently on version 6. Working with@aws-amplify/ui-react version 5 or earlier? See our migration guide.Account Settings components are a set of standalone components that add user management flows to your application with minimal boilerplate.
Account Settings components require end user to be authenticated. You can use the Authenticator component to add authentication UI to your application.
Quick Start
Next.js 13.4+ introduces App Router with the usage of Server Components. Amplify UI components are interactive and designed to work on the client side. To use them inside of Server Components you must wrap them in a Client Component with "use client". For more info, visit Next.js third party package documentation.
If you are using Next.js Pages Router, no changes are required to use Amplify UI components.
Step 1. Configure Backend
Account settings components work seamlessly with the Amplify CLI to automatically work with your backend.
First, update @aws-amplify/cli with npm or yarn
if you're using a version before 6.4.0:
npm install -g @aws-amplify/cli@latest
yarn global add @aws-amplify/cli@latest
Step 2. Install Dependencies
npm install @aws-amplify/ui-react aws-amplifyyarn add @aws-amplify/ui-react aws-amplifyStep 3. Add Account Settings Components
Get started by using AccountSettings with either the ChangePassword or DeleteUser components.