@haven1/react-sdk

The @haven1/react-sdk package provides a comprehensive library of ready-to-use React components, icons, and hooks to accelerate development with Haven1. Designed for flexibility and customization, it integrates seamlessly with the Haven1 design system and is powered by Tailwind CSS for effortless styling.

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

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:

::: code-group

npm install react @tanstack/react-query @haven1/sdk-api-client

pnpm add @haven1/sdk-api-client

yarn add @haven1/sdk-api-client

:::

Apply the styles to your project's global CSS file.

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