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

1. Install the package

   First, install Zayne Labs UI and its peer dependencies:

   npm install @zayne-labs/ui-react react@19 react-dom@19
   
2. Import components

   Import the components you need. Each component is available as a separate module:

   import { Switch } from "@zayne-labs/ui-react/common/switch";
   import { Card } from "@zayne-labs/ui-react/ui/card";
   
3. Start building

   Use the components in your app. All components are headless - bring your own styles!

Basic examples

Conditional rendering with Switch

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

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:

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:

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:

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:

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

Card component

Build card layouts

Form component

Create forms with validation

Switch component

Pattern matching for rendering

TypeScript guide

Learn about TypeScript support