> ## Documentation Index
> Fetch the complete documentation index at: https://docs.marzipan.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Account

> The Account component enables users to log in and manage their account.

From their account your customers can manage their subscriptions, view their orders, and update their billing and shipping details.

### Code

```javascript theme={null}
<marzipan-account>
  <div slot="stripe-card-element" id="stripe-card-element"></div>
</marzipan-account>
```

### Props

Props should be passed as attributes to the component element.

<ResponseField name="disable-pick-mix-subscription-edit" type="boolean">
  Prevents customers from editing their pick & mix subscription selections from their account. Useful if you manage subscription contents manually.

  Defaults to `false`
</ResponseField>

### Features

#### Rewards Dashboard

If you have a rewards programme enabled, the account component automatically displays a rewards section where customers can view:

* Their current reward tier and tier badge
* Points balance and points history
* Progress towards the next tier
* Available perks for their current tier

#### Subscription Upsell

You can display a product grid within the account page encouraging customers to start or upgrade a subscription. Configure the collection, heading, message, and grid layout from your [web component settings](/web-components/customisation#subscription-upsell).

#### Order History

Customers can view their complete order history with order details, tracking information, and the ability to reorder previous purchases.

#### Subscription Management

Customers can manage their active subscriptions including:

* Viewing upcoming renewal dates
* Updating payment methods
* Managing pick & mix selections (unless disabled)
* Viewing subscription history

### Styling

The following parts are available to style the account component:

<ParamField body="--button">
  The primary action buttons displayed in the account component. This is normally when a "submit" button is used.
</ParamField>

<ParamField body="--cancel-button">
  The cancel button displayed in the account component.
</ParamField>

<ParamField body="--nav-link">
  The navigation links displayed in the account component.
</ParamField>

<ParamField body="--active-nav-link">
  The navigation links displayed in the account component when they are active.
</ParamField>

<ParamField body="--form-container">
  The containing div around the login and register forms.
</ParamField>

<ParamField body="--form">
  The login and register forms
</ParamField>

<ParamField body="--h1">
  The h1 heading.
</ParamField>

<ParamField body="--h2">
  The h2 heading.
</ParamField>

<ParamField body="--label">
  The label.
</ParamField>

<ParamField body="--link">
  Links
</ParamField>

<ParamField body="--loading-spinner">
  The loading spinner displayed when various actions are loading.
</ParamField>

<ParamField body="--login-button">
  The primary action button on the login, register and verify account forms.
</ParamField>

<ParamField body="--input">
  The styling applied to form input fields, including the `<textarea>` element.
</ParamField>

<ParamField body="--marzipan-spinner">
  The loading spinner displayed when various actions are loading.
</ParamField>

<Info>
  When targetting any of the parts, you must prepend the part name with the component name. For example, to target the loading spinner in the account component, you would use the following CSS:
</Info>

```css theme={null}
marzipan-account::part(--loading-spinner) {
    @apply bg-green-500;
}
```