# @haven1/react-sdk

### Key Features

#### 1. Ready-to-Use React Components

* **UI Elements**: A library of generic components such as buttons, modals, and input fields designed for quick implementation.
* **Fully Functional Components**: Advanced components like notifications, 2FA dialogs, and more, pre-configured for Haven1 integration.
* **Design System**: All components follow the Haven1 design system, ensuring consistent aesthetics and user experience across projects.
* **Customization**: Built with Tailwind CSS, allowing you to easily customize styles to match your project’s needs.

#### 2. Icon Assets

* A comprehensive set of icons representing Haven1 products and features.
* Designed to seamlessly integrate into your UI.

#### 3. React Hooks with React Query

* **API Integration Hooks**: Simplify connecting your React project to Haven1 APIs using `@tanstack/react-query`.
* **Efficiency**: Automatically manage caching, loading states, and error handling for API requests.
* **Type-Safe**: Fully typed responses ensure reliability in your code.

### Storybook Documentation

Explore all components and their usage in our **Storybook**: [Storybook for @haven1/react-sdk](https://haven1network.github.io/haven1-sdk)

### **Installation**

{% tabs %}
{% tab title="npm" %}

```sh
npm install @haven1/react-sdk
```

{% endtab %}

{% tab title="yarn" %}

```sh
yarn add @haven1/react-sdk
```

{% endtab %}

{% tab title="pnpm" %}

```sh
pnpm add @haven1/react-sdk
```

{% endtab %}
{% endtabs %}

### Dependencies

This package requires the following peer dependencies:

* **React**
* **@tanstack/react-query**: For managing API data and caching.
* **@haven1/sdk-api-client**: To connect your React project to Haven1 APIs.

Install these dependencies if not already included in your project:

Before using the UI components from this package, ensure you have installed the necessary dependencies. Then, apply the styles to your project's global CSS file.

```css
@import '@haven1/react-sdk/css';
```

### Interfaces

* ButtonColorStyles
* ButtonSizeProps
* CircularLoadingProps
* EmptyNotificationProps
* GoldIconProps
* H1IconProps
* LoadingDotsProps
* NotificationBellProps
* NotificationComponentProps
* NotificationDialogProps
* NotificationItemListProps
* NotificationItemProps
* NotificationPopoverProps
* NotificationProps
* NotificationSignInProps
* OtpModalProps
* PlatinumIconProps
* SilverIconProps
* WH1IconProps

### Type Aliases

* ButtonColor
* ButtonProps
* NotificationItemType
* SubmitOtpParams
* ValidateAuthParams
* VerifyAuthParams

### Functions

* Button
* CircularLoading
* EmptyNotification
* ESH1Icon
* GoldIcon
* H1Icon
* Haven1SDKProvider
* LoadingDots
* Notification
* NotificationBell
* NotificationComponent
* NotificationDialog
* NotificationItem
* NotificationItemList
* NotificationPopover
* NotificationSignIn
* OtpModal
* PlatinumIcon
* SilverIcon
* useAuth
* useHaven1SDK
* useIdentity
* useNotifications
* useOTP
* useSignIn
* WH1Icon
* withHaven1Tag


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.haven1.org/build/developer-tools/haven1-sdk/haven1-react-sdk.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.