Introduction

Composable, headless UI components and utilities built for flexibility and great developer experience

Welcome to Zayne UI

Zayne UI is a headless React component library that provides unstyled composable building blocks. It manages all the complex logic, accessibility and state under the hood while leaving the visual design entirely up to you.

Key features

Headless by default

Zero styling opinions. Components handle functionality and accessibility while you own the design. Override with className or opt out of base styles entirely with the unstyled prop.

TypeScript-first

Written in TypeScript with full inference. Generic render props narrow types automatically so no manual annotations are needed.

Tree-shakeable

Each component lives at its own entry point. You can import only what you use

Compound components

UI components use a compound pattern (Component.Root, Component.Part) for maximum composition flexibility without prop drilling.

Polymorphic & slottable

Change the rendered element with the as prop, or delegate rendering entirely to a child element with asChild. Full type safety is preserved either way.

Styling freedom

Ships with an optional Tailwind CSS v4 preset for theme tokens and animations. Prefer vanilla CSS? Target components via data-scope, data-part, and data-slot attributes.

What's included

The library provides two categories of components:

UI Components

Interactive, stateful components that use the compound component pattern for maximum flexibility:

Card: Composable card layouts with header, content, footer, and action sections. Every part is polymorphic and supports asChild.
Carousel: Slideshow with auto-slide, pause-on-hover, navigation controls, and customizable indicators.
DragScroll: Adds mouse drag-to-scroll to any container. Supports horizontal, vertical, or both directions with configurable scroll amount and device constraints.
DropZone: Full-featured file upload with drag-and-drop, file validation, progress tracking, image previews, and upload lifecycle callbacks.
Form: Form system built on React Hook Form with composable field components, reactive watchers, state subscriptions, and automatic error accessibility.

Utility Components

Lightweight rendering primitives that solve common React patterns declaratively:

Show: Conditional rendering with fallback support and type narrowing. Supports a multi-branch control="content" mode for complex conditions.
For: List rendering with empty-state fallbacks. Accepts arrays or numbers (for skeleton patterns). ForWithWrapper wraps output in a container element.
Switch: Pattern matching for multi-way conditional rendering. Supports both value matching and boolean matching modes.
Await: Declarative async handling with built-in Suspense and ErrorBoundary. Manages pending, success, and error states via sub-components.
Presence: Animate mount/unmount with CSS animations or transitions. Defers DOM removal until exit animations complete.
ErrorBoundary: Declarative error catching with reset via errorResetKeys or the useErrorBoundary hook.
Teleport: Portal that renders children into any DOM node by selector, ref, or element. Supports insertPosition for precise placement.
ClientGate: Guards content behind client-side hydration. Safely access window, localStorage, etc. without SSR mismatches.
Slot: The engine behind asChild. Merges parent props, event handlers, refs, and class names into a child element.
SuspenseWithBoundary: Combines Suspense and ErrorBoundary into a single wrapper for cleaner async component handling.

Framework support

React is currently available. Support for additional frameworks is planned.

Currently available:

React 19.x (with full TypeScript support)

Coming soon:

Vue 3
Svelte 5
Solid.js

Built on solid foundations

Built on top of @zayne-labs/toolkit, a collection of utilities and React hooks that power the component internals.