> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/zayne-labs/ui/llms.txt
> Use this file to discover all available pages before exploring further.

# Introduction

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

## Welcome to Zayne Labs UI

Zayne Labs UI is a modern component library that puts you in control. Built with a headless architecture, it provides powerful, composable components without imposing any styling decisions. Whether you're building a simple app or a complex design system, Zayne Labs UI adapts to your needs.

## Key features

<CardGroup cols={2}>
  <Card title="Headless components" icon="cube">
    Complete control over styling. Components provide functionality and accessibility without imposing design decisions.
  </Card>

  <Card title="TypeScript-first" icon="code">
    Built with TypeScript from the ground up. Full type safety and intelligent autocomplete out of the box.
  </Card>

  <Card title="Tree-shakeable" icon="leaf">
    Import only what you need. ESM modules ensure your bundle stays lean and efficient.
  </Card>

  <Card title="Composable API" icon="puzzle-piece">
    Components work together seamlessly. Build complex UIs from simple, reusable building blocks.
  </Card>
</CardGroup>

## What's included

Zayne Labs UI provides two categories of components to cover all your UI needs:

### UI components

Headless components for common interface patterns:

* **Card** - Composable card layouts with header, content, and footer sections
* **Carousel** - Customizable slideshow component with navigation controls
* **DragScroll** - Add drag-to-scroll behavior to any container
* **DropZone** - File upload with drag-and-drop support and progress tracking
* **Form** - Form handling with validation (wrapper around react-hook-form)

### Utility components

Declarative components for common UI patterns:

* **Await** - Handle async states declaratively
* **ClientGate** - Client-side only rendering guard
* **ErrorBoundary** - Graceful error handling
* **For** - List rendering with empty states
* **Presence** - Animation presence detection
* **Show** - Conditional rendering
* **Slot** - Component composition with slots
* **SuspenseWithBoundary** - Combined Suspense and ErrorBoundary
* **Switch** - Pattern matching for conditional rendering
* **Teleport** - Portal-based content teleportation

## Framework support

<Note>
  React is currently available. Support for Vue, Svelte, and Solid is coming soon.
</Note>

**Currently available:**

* React 19.x (with full TypeScript support)

**Coming soon:**

* Vue 3
* Svelte 5
* Solid.js

## Get started

<CardGroup cols={3}>
  <Card title="Quick start" icon="rocket" href="/quickstart">
    Get up and running in minutes
  </Card>

  <Card title="Installation" icon="download" href="/installation">
    Installation and setup guide
  </Card>

  <Card title="Card component" icon="cube" href="/components/ui/card">
    Start with a simple component
  </Card>
</CardGroup>

## Built on solid foundations

Zayne Labs UI is built on top of [@zayne-labs/toolkit](https://github.com/zayne-labs/toolkit), a collection of utility functions and React hooks that power the library's functionality.