> ## 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.

# Getting Started

> Start building with Hermis in minutes

## Welcome

This guide will help you get started with Hermis. Whether you're building a new dApp or integrating wallet functionality into an existing application, we'll walk you through the setup process.

## Choose Your Path

<CardGroup cols={2}>
  <Card title="React" icon="react" href="/quickstart/react">
    Start with React hooks and providers
  </Card>

  <Card title="Adapter Base" icon="plug" href="/quickstart/adapter-base">
    Vanilla TypeScript implementation for any framework
  </Card>
</CardGroup>

## Installation

Choose the package that best fits your needs:

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

    This package includes everything you need for React applications, including hooks and context providers.
  </Tab>

  <Tab title="Adapter Base">
    ```bash theme={null}
    npm install @hermis/solana-headless-adapter-base @solana/web3.js
    ```

    The base vanilla TypeScript implementation that works with any TypeScript framework.
  </Tab>
</Tabs>

<Info>
  Both packages work seamlessly with **@solana/web3.js** and **@solana/kit** with identical APIs.
</Info>

## Quick Setup

Here's a minimal example to get you started:

<CodeGroup>
  ```tsx React (web3.js) theme={null}
  import { HermisProvider, useWallet } from '@hermis/solana-headless-react';
  import { Connection, clusterApiUrl } from '@solana/web3.js';

  function App() {
    const connection = new Connection(clusterApiUrl('mainnet-beta'));

    return (
      <HermisProvider
        connection={connection}
        autoConnect={false}
      >
        <WalletButton />
      </HermisProvider>
    );
  }

  function WalletButton() {
    const { connect, disconnect, connected, publicKey } = useWallet();

    return (
      <button onClick={connected ? disconnect : connect}>
        {connected ? `Connected: ${publicKey?.toBase58()}` : 'Connect Wallet'}
      </button>
    );
  }
  ```

  ```tsx React (@solana/kit) theme={null}
  import { HermisProvider, useWallet } from '@hermis/solana-headless-react';
  import { createSolanaRpc, mainnet } from '@solana/kit';

  function App() {
    const rpc = createSolanaRpc(mainnet('https://api.mainnet-beta.solana.com'));

    return (
      <HermisProvider
        connection={rpc}
        autoConnect={false}
      >
        <WalletButton />
      </HermisProvider>
    );
  }

  function WalletButton() {
    const { connect, disconnect, connected, publicKey } = useWallet();

    return (
      <button onClick={connected ? disconnect : connect}>
        {connected ? `Connected: ${publicKey?.toBase58()}` : 'Connect Wallet'}
      </button>
    );
  }
  ```

  ```typescript Adapter Base (web3.js) theme={null}
  import { WalletAdapterManager } from '@hermis/solana-headless-adapter-base';
  import { getStandardWalletAdapters } from '@hermis/wallet-standard-base';
  import { WalletAdapterNetwork } from '@hermis/solana-headless-core';
  import { Connection, clusterApiUrl } from '@solana/web3.js';

  // Create connection
  const connection = new Connection(clusterApiUrl('devnet'));

  // Auto-detect wallet-standard compatible wallets
  const wallets = []; // Add custom wallet adapters here if needed
  const adapters = await getStandardWalletAdapters(wallets, connection.rpcEndpoint, WalletAdapterNetwork.Devnet);

  // Create wallet manager
  const manager = new WalletAdapterManager(adapters);

  // Setup event listeners
  manager.on('connect', (publicKey) => {
    console.log('Connected:', publicKey.toBase58());
  });

  manager.on('disconnect', () => {
    console.log('Disconnected');
  });

  // Connect to a wallet
  manager.selectAdapter('Phantom');
  await manager.connect();
  ```

  ```typescript Adapter Base (@solana/kit) theme={null}
  import { WalletAdapterManager } from '@hermis/solana-headless-adapter-base';
  import { getStandardWalletAdapters } from '@hermis/wallet-standard-base';
  import { WalletAdapterNetwork } from '@hermis/solana-headless-core';
  import { createSolanaRpc, devnet } from '@solana/kit';

  // Create connection
  const rpc = createSolanaRpc(devnet('https://api.devnet.solana.com'));

  // Auto-detect wallet-standard compatible wallets
  const wallets = []; // Add custom wallet adapters here if needed
  const adapters = await getStandardWalletAdapters(wallets, undefined, WalletAdapterNetwork.Devnet);

  // Create wallet manager
  const manager = new WalletAdapterManager(adapters);

  // Setup event listeners
  manager.on('connect', (publicKey) => {
    console.log('Connected:', publicKey.toBase58());
  });

  manager.on('disconnect', () => {
    console.log('Disconnected');
  });

  // Connect to a wallet
  manager.selectAdapter('Phantom');
  await manager.connect();
  ```
</CodeGroup>

<Info>
  **Zero Breaking Changes**: Notice how the Hermis integration code remains identical across @solana/web3.js and @solana/kit—only the Solana library imports and connection setup change.
</Info>

## Configuration Options

Configure Hermis to match your application's needs:

<ParamField path="network" type="string" default="mainnet-beta">
  The Solana network to connect to: `mainnet-beta`, `devnet`, or `testnet`
</ParamField>

<ParamField path="autoConnect" type="boolean" default="false">
  Automatically connect to a previously connected wallet on page load
</ParamField>

<ParamField path="commitment" type="string" default="confirmed">
  The commitment level for transactions: `processed`, `confirmed`, or `finalized`
</ParamField>

<ParamField path="wallets" type="WalletAdapter[]">
  Array of wallet adapters to support. If not provided, all available wallets are supported.
</ParamField>

## Understanding the Architecture

<Steps>
  <Step title="Choose Your Package">
    Select the package that fits your framework and use case
  </Step>

  <Step title="Initialize the Client">
    Create a connection to Solana and initialize the Hermis client
  </Step>

  <Step title="Connect Wallets">
    Let users connect their Solana wallets (Phantom, Backpack, etc.)
  </Step>

  <Step title="Perform Operations">
    Send transactions, sign messages, and interact with programs
  </Step>
</Steps>

## What's Next?

<CardGroup cols={2}>
  <Card title="Core Concepts" icon="book" href="/core-concepts/architecture">
    Learn about Hermis's architecture and design principles
  </Card>

  <Card title="Cookbook" icon="book-open" href="/cookbook/connect-wallet">
    Explore practical examples and common patterns
  </Card>

  <Card title="API Reference" icon="code" href="/api-reference/react/overview">
    Dive deep into the API documentation
  </Card>

  <Card title="Examples" icon="flask" href="/examples/react-integration">
    View complete example projects
  </Card>
</CardGroup>

## Need Help?

<CardGroup cols={2}>
  <Card title="GitHub Issues" icon="github" href="https://github.com/Assylum-Labs/hermis/issues">
    Report bugs or request features
  </Card>

  <Card title="Discussions" icon="comments" href="https://github.com/Assylum-Labs/hermis/discussions">
    Ask questions and share ideas
  </Card>
</CardGroup>