Installation
Install and configure Zayne UI in your project.
Install the package
npm install @zayne-labs/ui-reactPeer dependencies
The React package (@zayne-labs/ui-react) requires React 19 and is designed for TypeScript projects (Vue and Svelte support is coming soon):
npm install react react-dom @types/react @types/react-domSome components have additional peer dependencies. Install them only if you use those components:
TypeScript configuration
Ensure your tsconfig.json uses bundler module resolution — this is required for the per-component entry points to resolve correctly:
{
"compilerOptions": {
"moduleResolution": "bundler",
"jsx": "react-jsx",
"strict": true
}
}"moduleResolution": "bundler" is the standard for modern React 19 projects using Vite, Next.js, or
other bundlers. If you're on an older setup using "node", the subpath imports won't resolve.
CSS setup
Choose the setup that matches your project:
Import the Zayne UI preset after the Tailwind import in your global CSS file. This registers
theme tokens (--color-zu-*), animations (animate-shake, animate-fade-up, etc.), and utilities
(scrollbar-hidden):
@import "tailwindcss";
@import "@zayne-labs/ui-react/css/preset.css";If you're not using Tailwind, import the pre-compiled stylesheet instead. This includes the minimal structural styles that some components rely on:
@import "@zayne-labs/ui-react/style.css";Both options are thin layers of structural CSS. Zayne UI is headless — most visual styling is left to
you. See the Styling Guide for details on theme tokens, data-attribute selectors, and
the unstyled prop.
Last updated on