AccountMenu
page.tsx
import AccountMenu from '@/components/AccountMenu';

You can use the Billing redirect to show the billing page when the user clicks on the billing option. You only need to add the useBilling prop and it must be exist an CustomerID of the user of the payment service in the database.

​
Properties

name
string
required

The name of the user to display in the menu

email
string
required

The email of the user to display in the menu

image
string
required

The URL of the user’s avatar image

useBilling
boolean
default: "true"

Whether to show the billing option in the menu

​
Usage

Example usage of the AccountMenu component with the useSession hook from next-auth/react:

example.tsx
import { useSession } from "next-auth/react"
import AccountMenu from '@/components/AccountMenu';

export default function Example() {
  const { data: session } = useSession()

  return (
    <>
        {session && (
            <AccountMenu 
                name={session.user.name} 
                email={session.user.email} 
                image={session.user.image}
                useBilling={true}
            />
        )}
    </>
  )
}

If you need basic components like buttons, inputs, and more, they are available with Shadcn UI.

Was this page helpful?

Shadcn UIAnimated