# ResetPassword.Header

Canonical page: https://docs.ovok.com/native-sdk/guide/components/auth/reset-password/components/header

Header section component containing title and description for the password reset flow.

## Usage [#usage]

### Default Header [#default-header]

```tsx
import { ResetPassword } from "@ovok/native";
import React from "react";

const DefaultHeader = () => {
  return (
    <ResetPassword.Header>
      <ResetPassword.Header.Title />
      <ResetPassword.Header.Description />
    </ResetPassword.Header>
  );
};

export default DefaultHeader;
```

## Props [#props]

Every prop, with its type and description, is listed in the [`@ovok/native/auth` API reference](/native-sdk/reference/auth).

## Sub-Components [#sub-components]

### ResetPassword.Header.Title [#resetpasswordheadertitle]

Displays the main title for the reset password screen.

- **Default**: Uses `"reset-password.title"` translation
- **Customizable**: Can override with custom text
- **[Documentation](/native-sdk/guide/components/auth/reset-password/components/header/title)**: Complete Title component guide

### ResetPassword.Header.Description [#resetpasswordheaderdescription]

Displays descriptive text explaining the reset process.

- **Default**: Uses `"reset-password.subtitle"` translation
- **Customizable**: Can override with custom text
- **[Documentation](/native-sdk/guide/components/auth/reset-password/components/header/description)**: Complete Description component guide

## Default Styles [#default-styles]

The header uses these default styles:

```tsx
const defaultStyles = {
  gap: theme.spacing(4), // 16px gap between title and description
};
```

## Features [#features]

### Localization Support [#localization-support]

Uses translation keys for default content:

```tsx
// Default translations used:
// - "reset-password.title"
// - "reset-password.subtitle"
```