> ## 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.

# Quick start

> Get started with Zayne Labs UI in minutes

This guide will help you create your first components with Zayne Labs UI. We'll walk through basic usage patterns and show you how to compose components together.

## Setup

<Steps>
  <Step title="Install the package">
    First, install Zayne Labs UI and its peer dependencies:

    ```bash theme={null}
    npm install @zayne-labs/ui-react react@19 react-dom@19
    ```
  </Step>

  <Step title="Import components">
    Import the components you need. Each component is available as a separate module:

    ```tsx theme={null}
    import { Switch } from "@zayne-labs/ui-react/common/switch";
    import { Card } from "@zayne-labs/ui-react/ui/card";
    ```
  </Step>

  <Step title="Start building">
    Use the components in your app. All components are headless - bring your own styles!
  </Step>
</Steps>

## Basic examples

### Conditional rendering with Switch

The `Switch` component provides pattern matching for conditional rendering, similar to a switch statement:

```tsx theme={null}
import { Switch } from "@zayne-labs/ui-react/common/switch";

export default function App() {
  const status = "loading";

  return (
    <Switch.Root value={status}>
      <Switch.Match when="loading">
        <div>Loading...</div>
      </Switch.Match>

      <Switch.Match when="error">
        <div>Something went wrong</div>
      </Switch.Match>

      <Switch.Default>
        <div>Content loaded!</div>
      </Switch.Default>
    </Switch.Root>
  );
}
```

### List rendering with For

The `For` component makes list rendering declarative and handles empty states:

```tsx theme={null}
import { For } from "@zayne-labs/ui-react/common/for";

interface User {
  id: string;
  name: string;
}

export function UserList({ users }: { users: User[] }) {
  return (
    <For each={users} fallback={<p>No users found</p>}>
      {(user) => <div key={user.id}>{user.name}</div>}
    </For>
  );
}
```

### Building a card layout

The `Card` component provides a composable structure for card-based layouts:

```tsx theme={null}
import { Card } from "@zayne-labs/ui-react/ui/card";

export function ProductCard() {
  return (
    <Card.Root className="border rounded-lg p-4">
      <Card.Header>
        <Card.Title>Premium Headphones</Card.Title>
        <Card.Description>High-quality audio experience</Card.Description>
      </Card.Header>
      
      <Card.Content className="mt-4">
        <p>Immerse yourself in crystal-clear sound with our latest headphones.</p>
      </Card.Content>
      
      <Card.Footer className="mt-4">
        <Card.Action className="bg-blue-500 text-white px-4 py-2 rounded">
          Add to Cart
        </Card.Action>
      </Card.Footer>
    </Card.Root>
  );
}
```

### File upload with DropZone

The `DropZone` component provides a complete file upload solution with drag-and-drop support:

```tsx theme={null}
import { DropZone } from "@zayne-labs/ui-react/ui/drop-zone";

export function FileUploader() {
  return (
    <DropZone.Root
      accept={{ "image/*": [] }}
      maxFiles={5}
      maxFileSize={5 * 1024 * 1024} // 5MB
    >
      <DropZone.Area className="border-2 border-dashed rounded-lg p-8">
        {({ isDraggingOver }) => (
          <div>
            <p>{isDraggingOver ? "Drop files here" : "Drag files here or click to browse"}</p>
            <DropZone.Trigger className="mt-4 px-4 py-2 bg-blue-500 text-white rounded">
              Select Files
            </DropZone.Trigger>
          </div>
        )}
      </DropZone.Area>

      <DropZone.FileList className="mt-4 space-y-2" renderMode="per-item">
        {({ fileState }) => (
          <DropZone.FileItem fileState={fileState} className="flex items-center gap-4 p-4 border rounded">
            <DropZone.FileItemPreview className="size-12" />
            <DropZone.FileItemMetadata />
            <DropZone.FileItemDelete className="ml-auto text-red-500">
              Remove
            </DropZone.FileItemDelete>
          </DropZone.FileItem>
        )}
      </DropZone.FileList>
    </DropZone.Root>
  );
}
```

## Composing components

Zayne Labs UI components work great together. Here's an example combining `Show`, `For`, and `Card`:

```tsx theme={null}
import { Show } from "@zayne-labs/ui-react/common/show";
import { For } from "@zayne-labs/ui-react/common/for";
import { Card } from "@zayne-labs/ui-react/ui/card";

interface Product {
  id: string;
  name: string;
  price: number;
}

export function ProductGrid({ products, loading }: { products: Product[]; loading: boolean }) {
  return (
    <Show.Root when={!loading} fallback={<div>Loading products...</div>}>
      <div className="grid grid-cols-3 gap-4">
        <For each={products} fallback={<p>No products available</p>}>
          {(product) => (
            <Card.Root key={product.id} className="border rounded-lg p-4">
              <Card.Header>
                <Card.Title>{product.name}</Card.Title>
              </Card.Header>
              <Card.Content>
                <p className="text-lg font-bold">${product.price}</p>
              </Card.Content>
            </Card.Root>
          )}
        </For>
      </div>
    </Show.Root>
  );
}
```

## Next steps

<CardGroup cols={2}>
  <Card title="Card component" icon="cube" href="/components/ui/card">
    Build card layouts
  </Card>

  <Card title="Form component" icon="file-text" href="/components/ui/form">
    Create forms with validation
  </Card>

  <Card title="Switch component" icon="code" href="/components/utility/switch">
    Pattern matching for rendering
  </Card>

  <Card title="TypeScript guide" icon="brackets-curly" href="/concepts/typescript">
    Learn about TypeScript support
  </Card>
</CardGroup>