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

# Account screens

> Profile, plan, usage and the paywall - as one screen or separate blocks

`<UserProfile>` is the whole account area: a sidebar and three tabs.

```tsx theme={"system"}
import { UserProfile } from '@kerne/react/ui';

<UserProfile />;
```

| Tab      | Contains                                                |
| -------- | ------------------------------------------------------- |
| Profile  | Name, and the email address with its verification state |
| Security | Password, delete account                                |
| Billing  | Current plan, usage meters, plan switcher               |

Picking a plan there behaves like [`<PricingTable>`](/sdks/client/react/ui/pricing-table): a confirm step and an in-place switch for whoever's already subscribed, a straight checkout for whoever isn't.

Show only the tabs you need:

```tsx theme={"system"}
<UserProfile tabs={['profile', 'security']} />
```

Add your own:

```tsx theme={"system"}
<UserProfile extraTabs={[{ id: 'team', label: 'Team', content: <TeamSettings /> }]} />
```

To drive tabs from your router, pass `activeTab` and `onTabChange`.

## Using the blocks on their own

If you already have a settings page, mount just the part you want. Each one works standalone:

```tsx theme={"system"}
import { SubscriptionCard, UsageMeters, ChangePasswordForm } from '@kerne/react/ui';

<SubscriptionCard />
<UsageMeters />
<ChangePasswordForm />
```

### `<UsageMeters>`

Shows what has been consumed against the plan's limits. It only meters what can be metered: features with no ceiling are hidden, and the rows closest to their limit come first, so what is about to run out is at the top.

```tsx theme={"system"}
<UsageMeters featureKeys={['api_calls', 'team_seats']} />
```

Pass `labels` if your feature keys are not the wording you want users to read:

```tsx theme={"system"}
<UsageMeters labels={{ api_calls: 'Requests' }} />
```

### `<SubscriptionCard>`

Current plan, price, renewal date, and a button through to your payment provider's portal. Renders a real "you are on the free plan" state rather than nothing when there is no subscription.

## Paywalling a feature

`<UpgradePrompt>` renders your feature when the user is entitled to it, and an upgrade message when they are not:

```tsx theme={"system"}
import { UpgradePrompt } from '@kerne/react/ui';

<UpgradePrompt featureKey="advanced_analytics" upgradeUrl="/pricing">
  <AnalyticsDashboard />
</UpgradePrompt>;
```

The message follows the reason. Someone who ran out of a monthly quota sees a different sentence from someone whose plan never included the feature — telling the first to upgrade when they only need to wait for the reset is a good way to lose them.

## After checkout

`<CheckoutResult>` renders a checkout outcome screen - mount it wherever your app confirms a checkout, passing the outcome:

```tsx theme={"system"}
<CheckoutResult outcome="success" continueUrl="/dashboard" />
```

It confirms the subscription really exists before saying so. Coming back from Stripe only means the payment went through on the provider' side — the subscription lands a moment later, over a webhook. This waits for it instead of announcing a success the rest of your app cannot see yet.