zoo/ui Compatibility

Complete interoperability with zoo/ui ecosystem

zoo/ui is built to be 100% compatible with the zoo/ui ecosystem. This means you can:

Use zoo/ui components in any zoo/ui project
Use zoo/ui components alongside zoo/ui components
Mix and match components from both registries
Share the same theming and configuration

Installation Methods

Package Installation

Install the complete @zooai/ui package:

npm install @zooai/ui

Then import components directly:

import { AIPlayground, CodeEditor, Dock } from "@zooai/ui"

CLI Installation (zoo Compatible)

Use our CLI to copy components into your project, just like zoo/ui:

npx @zooai/ui@latest add ai-playground

This copies the component into your project at @/components/ui/ai-playground.tsx, maintaining full zoo compatibility.

Import Patterns

zoo/ui supports both import patterns:

Package Imports (@zooai/ui)

Best for:

Quick prototyping
Consistent updates across projects
Smaller projects with fewer customizations

import { AIChat, Button, Card } from "@zooai/ui"

Relative Imports (@/components)

Best for:

Full customization control
zoo/ui compatibility
Existing zoo projects

import { AIChat } from "@/components/ui/ai-chat"
import { Button } from "@/components/ui/button"

Registry Configuration

Configure multiple registries in your components.json:

{
  "$schema": "https://ui.zoo.ngo/schema.json",
  "registries": {
    "@zoo": "https://ui.zoo.ngo/r/{name}.json",
    "@zoo": "https://ui.zoo.ngo/r/{name}.json"
  }
}

This allows you to install components from both registries:

# Install from zoo/ui
npx @zooai/ui@latest add ai-playground

# Install from zoo/ui
npx @zooai/ui@latest add button

# They work together seamlessly

MCP Server Support

zoo/ui includes native MCP (Model Context Protocol) support, allowing AI assistants to:

Browse and search all components
Install components with natural language
Generate code using our components
Access full component documentation

MCP Configuration

For Claude Code:

{
  "mcpServers": {
    "zoo-ui": {
      "command": "npx",
      "args": ["zoo-ui@latest", "mcp"]
    }
  }
}

For Cursor:

{
  "mcpServers": {
    "zoo-ui": {
      "command": "npx",
      "args": ["zoo-ui@latest", "mcp"]
    }
  }
}

Component Compatibility

All zoo/ui components:

✅ Use the same CSS variables as zoo/ui ✅ Support the same theme configurations ✅ Work with zoo/ui's dark mode ✅ Use Radix UI primitives where applicable ✅ Follow the same component patterns ✅ Support the same prop interfaces

Extended Component Library

zoo/ui extends zoo/ui with:

AI Components

AI Playground
AI Chat
AI Assistant
AI Vision
AI Agents
AI Tools

Code Components

Code Editor
Code Block
Syntax Highlighter
Code Tabs
Sandbox

Advanced UI

3D Card
Animated Cursor
Apple Cards Carousel
Interactive Grid Pattern
Particles Background

Device Mockups

iPhone 15 Pro
Android Device
Safari Browser

Dock Components

macOS Dock
Limelight Nav
Menu Dock
Message Dock

And 100+ More Components

All maintaining full zoo/ui compatibility!

Theming

zoo/ui uses the same theming system as zoo/ui:

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    /* Same variables as zoo/ui */
  }
}

Migration Guide

From zoo/ui to zoo/ui

Install zoo/ui:

npm install @zooai/ui

Update imports (optional):

// Before

// After (if using package imports)
import { Button } from "@zooai/ui"

// Or keep relative imports - both work!
import { Button, Button } from "@/components/ui/button"

Add new components:

npx @zooai/ui@latest add ai-playground dock code-editor

Using Both Together

You can use both registries in the same project:

// zoo/ui components

// zoo/ui components
import { AIPlayground, Dock } from "@zooai/ui"

import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"

// They work together perfectly!
export function MyApp() {
  return (
    <Card>
      <Button>zoo/ui Button</Button>
      <AIPlayground />
      <Dock />
    </Card>
  )
}

TypeScript Support

Full TypeScript support with proper type exports:

import type { AIChatProps, CodeEditorProps, DockProps } from "@zooai/ui"

Best Practices

Use CLI for customization: When you need to customize a component, use the CLI to copy it into your project
Package imports for stability: Use package imports when you want consistent behavior across projects
Mix and match: Don't hesitate to use components from both registries
Keep components.json updated: Ensure your registry configuration is up to date

Support

GitHub: github.com/zooai/ui
Discord: discord.gg/zoo
Documentation: ui.zoo.ngo

License

MIT - Same as zoo/ui

MCP Server Theming