Avearra

A comprehensive React framework for building AI-powered applications with beautiful UI components, hooks, and utilities.

Features

• 🎨 Beautiful UI Components - Built with Radix UI and Tailwind CSS utilities
• 🪝 Comprehensive Hooks - AI, chat, data management, UI, and more
• 💬 Chat Interface - Ready-to-use ChatUI component with workflow integration
• 🎯 TypeScript First - Full type safety and IntelliSense support
• 📦 Tree-shakeable - Import only what you need
• ♿ Accessible - WCAG compliant components
• 🎭 Customizable - Easy theming and styling

Installation

npm install avearra

Peer Dependencies

Avearra requires React 18 or higher:

npm install react react-dom

Tailwind CSS Setup

Avearra components use Tailwind CSS utilities. Configure your app:

1. Install Tailwind CSS:

npm install -D tailwindcss @tailwindcss/postcss

2. Create tailwind.config.js:

export default {
  content: [
    './src/**/*.{ts,tsx,html}',
    './node_modules/avearra/**/*.{js,mjs}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

3. Add to your CSS:

@import "tailwindcss";

Quick Start

import { Button, ChatUI, useDisclosure, useChat } from 'avearra';

function App() {
  const { isOpen, onOpen, onClose } = useDisclosure();
  
  return (
    <div>
      <Button onClick={onOpen}>Open Chat</Button>
      {isOpen && <ChatUI workflowId={34} />}
    </div>
  );
}

Components

UI Components

import {
  Button,
  Badge,
  Card,
  Input,
  Select,
  Checkbox,
  Switch,
  Tabs,
  Dialog,
  Dropdown,
  Tooltip,
  // ... and many more
} from 'avearra';

function Example() {
  return (
    <Card>
      <Button variant="primary">Click me</Button>
      <Badge>New</Badge>
    </Card>
  );
}

Chat UI

import { ChatUI } from 'avearra';

function ChatExample() {
  return (
    <ChatUI 
      workflowId={34}
      title="My AI Assistant"
    />
  );
}

Hooks

Chat Hooks

import { useChat, useChatHistory, useChatStreaming } from 'avearra';

function ChatComponent() {
  const { messages, input, setInput, send } = useChat({
    onSend: async (message) => {
      // Handle message sending
      return { id: '1', role: 'assistant', content: 'Response' };
    }
  });
  
  return (
    <div>
      {messages.map(msg => (
        <div key={msg.id}>{msg.content}</div>
      ))}
      <input value={input} onChange={e => setInput(e.target.value)} />
      <button onClick={send}>Send</button>
    </div>
  );
}

AI Hooks

import { useCompletion, useModel, useToolCalls } from 'avearra';

function AIComponent() {
  const { complete, completion, isLoading } = useCompletion();
  
  const handleGenerate = async () => {
    await complete({ prompt: 'Write a story about...' });
  };
  
  return (
    <div>
      <button onClick={handleGenerate} disabled={isLoading}>
        Generate
      </button>
      <p>{completion}</p>
    </div>
  );
}

UI Hooks

import { 
  useDisclosure,
  useKeyboardShortcut,
  useOnClickOutside,
  useFocusTrap 
} from 'avearra';

function ModalComponent() {
  const { isOpen, onOpen, onClose } = useDisclosure();
  const ref = useOnClickOutside(onClose);
  
  useKeyboardShortcut('Escape', onClose);
  
  return (
    <>
      <button onClick={onOpen}>Open Modal</button>
      {isOpen && (
        <div ref={ref}>
          <h2>Modal Content</h2>
          <button onClick={onClose}>Close</button>
        </div>
      )}
    </>
  );
}

Data Hooks

import { useQuery, useMutation, usePolling } from 'avearra';

function DataComponent() {
  const { data, isLoading, error } = useQuery({
    queryFn: async () => {
      const res = await fetch('/api/data');
      return res.json();
    }
  });
  
  const { mutate } = useMutation({
    mutationFn: async (newData) => {
      await fetch('/api/data', {
        method: 'POST',
        body: JSON.stringify(newData)
      });
    }
  });
  
  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  
  return <div>{JSON.stringify(data)}</div>;
}

Form Hooks

import { useForm } from 'avearra';

function FormComponent() {
  const { register, handleSubmit, errors } = useForm({
    defaultValues: {
      name: '',
      email: ''
    }
  });
  
  const onSubmit = (data) => {
    console.log(data);
  };
  
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('name', { required: true })} />
      {errors.name && <span>Name is required</span>}
      
      <input {...register('email', { required: true })} />
      {errors.email && <span>Email is required</span>}
      
      <button type="submit">Submit</button>
    </form>
  );
}

API Client

import { createApiClient } from 'avearra';

const api = createApiClient({
  baseUrl: '/api',
  defaultHeaders: {
    'Content-Type': 'application/json'
  },
  getAuthToken: () => localStorage.getItem('token')
});

// Make requests
const data = await api.request({
  path: '/users',
  method: 'GET'
});

// Invoke workflows
const result = await api.invokeWorkflow({
  workflowId: 34,
  input: { message: 'Hello' }
});

Package Structure

Avearra is a monorepo with multiple packages:

• avearra - Main package (all-in-one)
• @avearra/components - UI components
• @avearra/hooks - React hooks
• @avearra/ui - App-level UI (ChatUI)
• @avearra/core - Core utilities
• @avearra/theme - Theme primitives
• @avearra/types - TypeScript types

You can import from the main package or individual packages:

// From main package (recommended)
import { Button, useChat } from 'avearra';

// From individual packages
import { Button } from '@avearra/components';
import { useChat } from '@avearra/hooks';

TypeScript Support

Avearra is written in TypeScript and provides full type definitions:

import type { ButtonProps, ChatMessage } from 'avearra';

const MyButton: React.FC<ButtonProps> = (props) => {
  return <Button {...props} />;
};

const messages: ChatMessage[] = [
  { id: '1', role: 'user', content: 'Hello', createdAt: Date.now() }
];

Styling

Components use Tailwind CSS utilities and can be customized:

<Button className="bg-blue-500 hover:bg-blue-600">
  Custom Styled Button
</Button>

For advanced theming, use the @avearra/theme package.

Examples

Check out the examples directory for complete working examples:

• React + Vite app
• Next.js app
• Storybook stories

Documentation

• Full Documentation
• API Reference
• Publishing Guide

Contributing

Contributions are welcome! Please read our contributing guidelines.

License

MIT © Avearra Team

Support

• GitHub Issues
• Discussions