> For the complete documentation index, see [llms.txt](https://docs.billingjs.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.billingjs.com/getting-started/add-to-your-app/setup-customer-portal.md).

# Setup Customer Portal

Show the customer portal to allow your users to self-manage their subscriptions.

[`App`](/getting-started/add-to-your-app.md#app-structure)`/`[`Pages`](/getting-started/add-to-your-app.md#app-structure)`/ CustomerPortal.tsx` *- Customer Portal component*

Return the default Customer Portal Component directly

```tsx
import { CustomerPortal } from "@billing-js/react-billing-js"

export default () => {
    return (
        <div>
            {/* full Customer Portal component */}
            <CustomerPortal />
        </div>
    )
}
```

Or create your own custom Customer Portal

{% hint style="warning" %}
Always wrap your custom customer portal with the **\<CustomerPortal/>** component

It will automatically manage the customer session
{% endhint %}

```tsx
import { CustomerPortal, CustomerProfile, Subscriptions, PaymentMethods, InvoicesHistory } from "@billing-js/react-billing-js"

export default () => {
    return (
        <div>
            {/* /!\ Always wrap your customer portal with the <CustomerPortal/> component */}
            <CustomerPortal>
                <CustomerProfile />
                <Subscriptions />
                <div>Custom component to display additional information to the user</div>
                <PaymentMethods />
                <InvoicesHistory />
            </CustomerPortal>
        </div>
    )
}
```