Skip to main content

​
Installation

Zayne Labs Toolkit is available as a monorepo with three packages. You can install individual packages based on your needs or install all of them together.

​
Prerequisites

Node.js 18.x or higher is required. Verify your Node version:
node --version

​
Package Overview

The toolkit consists of three main packages:
PackageDescriptionSize Limit
@zayne-labs/toolkit-coreCore utilities and helpers~6.5 KB
@zayne-labs/toolkit-reactReact hooks and utilities~6.5 KB (hooks)
@zayne-labs/toolkit-type-helpersTypeScript type utilities~600 B

​
Installation Methods

​
Install Core Utilities

For framework-agnostic utilities that work anywhere: 
npm install @zayne-labs/toolkit-core

​
Install React Package

For React-specific hooks and utilities: 
npm install @zayne-labs/toolkit-react
The React package has peer dependencies:
  • react >= 19.0.0
  • @types/react >= 19.0.0 (optional)
  • zustand 5.x.x (optional, only if using Zustand utilities)
  • tailwind-merge ^2.5.0 || ^3.0.0 (optional)

​
Install Type Helpers

For TypeScript type utilities and helpers: 
npm install @zayne-labs/toolkit-type-helpers

​
Install Multiple Packages

Install all packages you need in a single command: 
npm install @zayne-labs/toolkit-core @zayne-labs/toolkit-react @zayne-labs/toolkit-type-helpers

​
TypeScript Configuration

For the best experience with TypeScript, ensure your tsconfig.json includes:
tsconfig.json
{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "module": "ESNext",
    "target": "ES2020",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "strict": true,
    "skipLibCheck": true
  }
}
The toolkit uses ESM modules exclusively. Make sure your project is configured to handle ESM imports.

​
Optional: Type Reset

The type helpers package includes optional TypeScript resets for improved type safety:
tsconfig.json
{
  "compilerOptions": {
    // ... other options
  },
  "include": [
    "node_modules/@zayne-labs/toolkit-type-helpers/resets/recommended.d.ts"
  ]
}

​
Verify Installation

Create a simple test file to verify the installation:
test.ts
import { copyToClipboard } from "@zayne-labs/toolkit-core";
import type { Prettify } from "@zayne-labs/toolkit-type-helpers";

type User = Prettify<{ id: number } & { name: string }>;

console.log("Zayne Labs Toolkit is ready!");
Run it with: 
node test.ts

​
Package Exports

Each package provides specific export paths for tree-shaking:

​
Core Package

import { /* utilities */ } from "@zayne-labs/toolkit-core";

​
React Package

// Hooks
import { useToggle, useDisclosure } from "@zayne-labs/toolkit-react";

// Utils
import { composeRefs, mergeProps } from "@zayne-labs/toolkit-react/utils";

// Zustand helpers
import { createStoreContext } from "@zayne-labs/toolkit-react/zustand";

// Zustand compatible mode
import { /* compat helpers */ } from "@zayne-labs/toolkit-react/zustand-compat";

​
Type Helpers Package

import type { Prettify, DeepPrettify } from "@zayne-labs/toolkit-type-helpers";
import { isString, isBoolean } from "@zayne-labs/toolkit-type-helpers";

​
Next Steps

Quick Start

Build your first app with the toolkit.

Core Utilities

Explore available core utilities.

React Hooks

Discover React hooks and utilities.

Type Helpers

Learn about TypeScript utilities.

​
Troubleshooting

Ensure you’re using a bundler that supports ESM (Vite, Webpack 5+, or Rollup) and that your package.json has "type": "module" if using Node.js directly.
Make sure you have @types/react >= 19.0.0 installed and that your TypeScript version is 5.0 or higher.
The React package has optional peer dependencies. You only need to install zustand if you’re using Zustand utilities, and tailwind-merge if you’re using style utilities.

Build docs developers (and LLMs) love

Get started for freeTalk to us