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

# Installation

> Detailed installation instructions for all Hermis packages

## Package Manager

Hermis supports all major Node.js package managers. Choose the one you prefer:

<Tabs>
  <Tab title="npm">
    ```bash theme={null}
    npm install @hermis/solana-headless-react
    ```
  </Tab>

  <Tab title="yarn">
    ```bash theme={null}
    yarn add @hermis/solana-headless-react
    ```
  </Tab>

  <Tab title="pnpm">
    ```bash theme={null}
    pnpm add @hermis/solana-headless-react
    ```
  </Tab>
</Tabs>

## Available Packages

### Adapter Base

Vanilla JavaScript implementation with TypeScript support. This is the foundation package that works with any JavaScript/TypeScript framework.

<Tabs>
  <Tab title="npm">
    ```bash theme={null}
    npm install @hermis/solana-headless-adapter-base
    ```
  </Tab>

  <Tab title="yarn">
    ```bash theme={null}
    yarn add @hermis/solana-headless-adapter-base
    ```
  </Tab>

  <Tab title="pnpm">
    ```bash theme={null}
    pnpm add @hermis/solana-headless-adapter-base
    ```
  </Tab>
</Tabs>

**Use when:**

* Building with vanilla JavaScript or TypeScript
* Using Other frameworks (Vue, Svelte, Angular, etc.)
* Creating custom wallet adapters
* Extending existing adapters
* Need maximum flexibility and framework independence

### React Package

React hooks and providers for seamless integration with React applications.

<Tabs>
  <Tab title="npm">
    ```bash theme={null}
    npm install @hermis/solana-headless-react
    ```
  </Tab>

  <Tab title="yarn">
    ```bash theme={null}
    yarn add @hermis/solana-headless-react
    ```
  </Tab>

  <Tab title="pnpm">
    ```bash theme={null}
    pnpm add @hermis/solana-headless-react
    ```
  </Tab>
</Tabs>

**Use when:**

* Building React applications
* Want React-specific hooks and context
* Need automatic state management

### Vue Package

<Note>
  Vue support is coming soon! Star our [GitHub repo](https://github.com/Assylum-Labs/hermis) to get notified when it's released.
</Note>

## TypeScript Support

All packages include TypeScript definitions out of the box. No additional `@types` packages are needed.

## Framework-Specific Setup

### Next.js

For Next.js 13+ with App Router:

```bash theme={null}
npm install @hermis/solana-headless-react
```

Create a client component for the provider:

```tsx app/providers.tsx theme={null}
'use client';

import { HermisProvider } from '@hermis/solana-headless-react';

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <HermisProvider network="mainnet-beta">
      {children}
    </HermisProvider>
  );
}
```

### Vite

For Vite projects, install the polyfills:

```bash theme={null}
npm install --save-dev @esbuild-plugins/node-globals-polyfill
```

Update your `vite.config.ts`:

```typescript theme={null}
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill';

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    esbuildOptions: {
      plugins: [NodeGlobalsPolyfillPlugin({ buffer: true })],
    },
  },
});
```

## Verifying Installation

After installation, verify everything works:

**For Adapter Base:**

```typescript theme={null}
import { WalletAdapterManager } from '@hermis/solana-headless-adapter-base';
import { getStandardWalletAdapters } from '@hermis/wallet-standard-base';
import { WalletAdapterNetwork } from '@hermis/solana-headless-core';

// Auto-detect wallet-standard compatible wallets
const wallets = []; // Add custom wallet adapters here if needed
const adapters = await getStandardWalletAdapters(wallets, undefined, WalletAdapterNetwork.Mainnet);
const manager = new WalletAdapterManager(adapters);
console.log('Hermis Adapter Base initialized successfully!');
```

**For React:**

```tsx theme={null}
import { HermisProvider } from '@hermis/solana-headless-react';

function App() {
  return (
    <HermisProvider>
      <YourApp />
    </HermisProvider>
  );
}

console.log('Hermis React initialized successfully!');
```

## Troubleshooting

<AccordionGroup>
  <Accordion title="Module not found errors">
    If you see module not found errors, ensure all required packages are installed. Check the package documentation for any peer dependencies that may be needed for your specific use case.
  </Accordion>

  <Accordion title="Buffer is not defined">
    This is common in browser environments. Add buffer polyfill:

    ```bash theme={null}
    npm install buffer
    ```

    Then import at the top of your entry file:

    ```javascript theme={null}
    import { Buffer } from 'buffer';
    window.Buffer = Buffer;
    ```
  </Accordion>

  <Accordion title="TypeScript errors">
    All packages include TypeScript definitions. If you encounter errors, ensure you're using a recent version of TypeScript.
  </Accordion>

  <Accordion title="Webpack 5 errors">
    Webpack 5 no longer includes Node.js polyfills by default. You'll need to configure them manually in your webpack config.
  </Accordion>
</AccordionGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="Getting Started" icon="rocket" href="/getting-started">
    Learn how to configure and use the SDK
  </Card>

  <Card title="Quick Start - React" icon="react" href="/quickstart/react">
    Jump into a React quick start guide
  </Card>
</CardGroup>