Installation

How to install and set up Honeycomb in your project.

Install the package

Install @hiveio/honeycomb-solid via your preferred package manager:

npm install @hiveio/honeycomb-solid

Install peer dependencies

Solid package requires additional peer dependencies. @kobalte/core is optional (only needed for ApiTracker).

npm install @hiveio/wax solid-js tailwindcss @tailwindcss/vite

Wrap your app with HiveProvider

Wrap your app with HiveProvider:

App.tsx

import { HiveProvider } from "@hiveio/honeycomb-solid";

function App() {
  return (
    <HiveProvider>
      <MyComponent />
    </HiveProvider>
  );
}

Set up styles

Import the component styles and configure Tailwind CSS with Honeycomb theme tokens:

index.tsx

// Entry file (index.tsx or app.tsx)
import "@hiveio/honeycomb-solid/base.css";
import "./app.css";

app.css

/* app.css */
@import "tailwindcss";
@import "@hiveio/honeycomb-solid/theme.css";

@theme inline {
  --color-background: hsl(var(--hive-background));
  --color-foreground: hsl(var(--hive-foreground));
  --color-border: hsl(var(--hive-border));
  --color-muted: hsl(var(--hive-muted));
  --color-muted-foreground: hsl(var(--hive-muted-foreground));
  --color-card: hsl(var(--hive-card));
  --color-card-foreground: hsl(var(--hive-card-foreground));
}

Configure dark mode

Add the dark class to <html> and apply base background/foreground utilities to <body>:

index.html

<html lang="en" class="dark">
  <body class="min-h-screen antialiased bg-hive-background text-hive-foreground">

Use in your components

components/MyComponent.tsx

import { useHive } from "@hiveio/honeycomb-solid";

function MyComponent() {
  const { chain, is_loading, error } = useHive();

  return (
    <div>
      {is_loading() ? "Connecting..." : "Connected!"}
      {error() && <p>Error: {error()}</p>}
    </div>
  );
}

API Nodes

By default, HiveProvider connects to public Hive API nodes with automatic fallback. You can customize the endpoint list — see HiveProvider and API Tracker for details.

Production

Public nodes may have rate limits. For production apps, consider running your own node or using a dedicated RPC provider.

Framework Guides

Configuration varies by meta-framework. Pick your setup below.

Vite

Standard SPA setup with Solid and Tailwind plugins.

vite.config.ts

// vite.config.ts
import { defineConfig } from "vite";
import solid from "vite-plugin-solid";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [tailwindcss(), solid()],
  optimizeDeps: {
    exclude: ["@hiveio/wax"],
  },
});

Astro

Use client:only="solid-js" instead of client:load. WASM modules require the wasmUrlPlugin().

astro.config.mjs

// astro.config.mjs
import { defineConfig } from "astro/config";
import solid from "@astrojs/solid-js";
import tailwindcss from "@tailwindcss/vite";
import { wasmUrlPlugin } from "@hiveio/honeycomb-solid/plugins";

export default defineConfig({
  integrations: [solid()],
  vite: {
    plugins: [tailwindcss(), wasmUrlPlugin()],
  },
});

wasmUrlPlugin is required for projects installed from npm. Monorepo demo apps may work without it due to Vite workspace resolution.

SolidStart

Use clientOnly() from @solidjs/start. Add ssr.noExternal for the package.

app.config.ts

// app.config.ts
import { defineConfig } from "@solidjs/start/config";
import tailwindcss from "@tailwindcss/vite";
import { wasmUrlPlugin } from "@hiveio/honeycomb-solid/plugins";

export default defineConfig({
  ssr: true,
  vite: {
    plugins: [tailwindcss(), wasmUrlPlugin()],
    resolve: {
      conditions: ["solid", "browser", "module"],
    },
    optimizeDeps: {
      exclude: ["@hiveio/wax"],
    },
    ssr: {
      noExternal: ["@hiveio/honeycomb-solid"],
    },
  },
});

wasmUrlPlugin is required for projects installed from npm. Monorepo demo apps may work without it due to Vite workspace resolution.

What's Next?

Now that you have Honeycomb set up, you can start adding components:

Browse Components HiveProvider docs