Skip to main content

​
Install the package

Install @zayne-labs/ui-react using your preferred package manager: 
npm install @zayne-labs/ui-react

​
Peer dependencies

Zayne Labs UI requires the following peer dependencies:

​
Required

These packages are required for the library to work: 
[email protected]
[email protected]
Make sure you have React 19 installed in your project. If you’re upgrading from an earlier version, refer to the React 19 upgrade guide.

​
Optional

These packages are only needed if you use specific components:
The Form component is a wrapper around react-hook-form. Only install this if you plan to use the Form component.
npm install [email protected]
While Zayne Labs UI components are headless, the library includes optional Tailwind CSS utilities. Install if you want to use the included cnMerge utility or pre-styled examples.
npm install [email protected] tailwind-merge

​
Import structure

Zayne Labs UI uses a modular import structure that enables tree-shaking:

​
UI components

Import UI components from @zayne-labs/ui-react/ui/*: 
import { Card } from "@zayne-labs/ui-react/ui/card";
import { DropZone } from "@zayne-labs/ui-react/ui/drop-zone";
import { Carousel } from "@zayne-labs/ui-react/ui/carousel";

​
Utility components

Import utility components from @zayne-labs/ui-react/common/*: 
import { Switch } from "@zayne-labs/ui-react/common/switch";
import { For } from "@zayne-labs/ui-react/common/for";
import { Show } from "@zayne-labs/ui-react/common/show";

​
CSS imports (optional)

If you want to use the included styles: 
import "@zayne-labs/ui-react/style.css";
Each component is exported as a separate module, so you only bundle what you use. This keeps your bundle size minimal.

​
TypeScript configuration

Zayne Labs UI is built with TypeScript and includes type definitions out of the box. No additional configuration is needed. For the best development experience, make sure your tsconfig.json has: 
{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "jsx": "react-jsx"
  }
}

​
Next steps

Quick start guide

Build your first component

Card component

Start with a simple card

Build docs developers (and LLMs) love

Get started for freeTalk to us