### Add Component using shadcn CLI with Registry URL

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/README.md

Install components by providing the full registry URL to the shadcn CLI. This example adds 'navbar-menu'.

```bash
npx shadcn@latest add https://ui.heygaia.io/r/navbar-menu.json
```

--------------------------------

### Installation

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/components/navbar-menu.mdx

Instructions for installing the Navbar Menu component and its dependencies.

```APIDOC
## Installation

### Automatic Installation

Use the following command to install the component automatically:
```bash
npm install @theexperiencecompany/gaia-ui
```

### Manual Installation

Copy and paste the following code into your project:
```typescript
// registry/new-york/ui/navbar-menu.tsx
// ... component code ...
```

This component requires `motion` for animations:
```bash
npm install motion
```
```

--------------------------------

### Install File Dropzone Component (Automatic)

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/components/file-dropzone.mdx

Use this command to automatically install the File Dropzone component. This is the recommended installation method.

```bash
npm install @theexperiencecompany/gaia-ui
```

--------------------------------

### Install dependencies

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/components/author-tooltip.mdx

Install the required Avatar and Tooltip components using the shadcn CLI.

```bash
npx shadcn@latest add avatar tooltip
```

--------------------------------

### Install Link Preview Dependencies

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/components/link-preview.mdx

Commands to install the required icons and the underlying tooltip component.

```bash
pnpm add @hugeicons/react @hugeicons/core-free-icons
```

```bash
npx shadcn@latest add tooltip
```

--------------------------------

### Usage Examples

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/components/navbar-menu.mdx

Examples demonstrating different ways to use the Navbar Menu component.

```APIDOC
## Usage Examples

### Full Interactive Navbar

This example shows the complete implementation of the navbar menu within an actual navbar.

```jsx
<ComponentPreview name="navbar-menu/full" />
```

### Basic Usage

A simple navbar with an expandable menu and icons.

```jsx
<ComponentPreview name="navbar-menu/basic" />
```

### With Static Links

A navbar that includes both dropdown menus and static links.

```jsx
<ComponentPreview name="navbar-menu/default" />
```

### Usage in Gaia

Demonstrates the navbar menu's role in fast navigation between Chat, Mail, and Settings within the Gaia application.

```jsx
// Example usage within Gaia's app skeleton
// ...
```
```

--------------------------------

### Install Dependencies

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/components/github-stars-button.mdx

Install the required Radix UI icons dependency for the button component.

```bash
pnpm add @radix-ui/react-icons
```

--------------------------------

### Component File Structure Example

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/AGENTS.md

Illustrates the directory structure for creating a new component, including the main component file and preview examples.

```tree
registry/
└── new-york/
    └── ui/
        └── your-component.tsx  ← Your new component
```

```tree
components/
└── previews/
    └── your-component/
        ├── default.tsx          ← Basic usage example
        ├── with-variants.tsx    ← Different variants
        └── custom-example.tsx   ← Any other demos
```

--------------------------------

### Install Todo Item Component (Manual)

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/components/todo-item.mdx

Copy and paste this code into your project to manually install the Todo Item component. Ensure you also install the required dependencies.

```tsx
import { TodoItem } from "@/components/ui/todo-item";

interface TodoLabel {
  id: string;
  name: string;
  color?: string;
}

interface TodoSubtask {
  id: string;
  title: string;
  completed: boolean;
}

interface TodoProject {
  id: string;
  name: string;
  color?: string;
}

interface TodoItemProps {
  id: string;
  title: string;
  description?: string;
  completed?: boolean;
  priority?: "high" | "medium" | "low" | "none";
  dueDate?: string | Date;
  labels?: TodoLabel[];
  subtasks?: TodoSubtask[];
  project?: TodoProject;
  onToggleComplete?: (id: string, completed: boolean) => void;
  onClick?: (id: string) => void;
  isSelected?: boolean;
  className?: string;
}

export function TodoItem(props: TodoItemProps) {
  // Implementation details...
  return (
    <div
      className={cn(
        "flex items-center justify-between p-4 border-b",
        props.isSelected && "bg-gray-100",
        props.className
      )}
    >
      <div className="flex items-center space-x-3">
        <Checkbox checked={props.completed} onCheckedChange={() => props.onToggleComplete?.(props.id, !props.completed)} />
        <div className="flex flex-col">
          <span className="font-medium text-gray-800">
            {props.title}
          </span>
          {props.description && (
            <span className="text-sm text-gray-500">
              {props.description}
            </span>
          )}
        </div>
      </div>
      <div className="flex items-center space-x-2">
        {props.dueDate && (
          <span className="text-sm text-gray-500">
            {formatDate(props.dueDate)}
          </span>
        )}
        {props.priority && (
          <div className={cn(
            "w-2 h-2 rounded-full",
            props.priority === "high" && "bg-red-500",
            props.priority === "medium" && "bg-yellow-500",
            props.priority === "low" && "bg-blue-500",
            props.priority === "none" && "bg-gray-300"
          )} />
        )}
        {props.labels && props.labels.map((label) => (
          <span key={label.id} className={cn(
            "px-2 py-1 rounded-full text-xs font-medium",
            label.color ? `bg-${label.color}-100 text-${label.color}-800` : "bg-gray-200 text-gray-700"
          )}>
            {label.name}
          </span>
        ))}
        {props.subtasks && (
          <span className="text-sm text-gray-500">
            {props.subtasks.filter(subtask => subtask.completed).length}/{props.subtasks.length} Subtasks
          </span>
        )}
        {props.project && (
          <span className={cn(
            "px-2 py-1 rounded-full text-xs font-medium",
            props.project.color ? `bg-${props.project.color}-100 text-${props.project.color}-800` : "bg-gray-200 text-gray-700"
          )}>
            {props.project.name}
          </span>
        )}
      </div>
    </div>
  );
}

function formatDate(date: string | Date): string {
  const options: Intl.DateTimeFormatOptions = { month: "short", day: "numeric" };
  return new Date(date).toLocaleDateString(undefined, options);
}

function cn(...args: string[]): string {
  return args.filter(Boolean).join(' ');
}

interface CheckboxProps {
  checked: boolean;
  onCheckedChange: (checked: boolean) => void;
}

function Checkbox(props: CheckboxProps) {
  return (
    <button
      onClick={() => props.onCheckedChange(!props.checked)}
      className="w-5 h-5 border rounded flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
      aria-checked={props.checked}
      role="checkbox"
    >
      {props.checked && (
        <svg className="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path></svg>
      )}
    </button>
  );
}

```

--------------------------------

### Install Email Compose Card

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/components/email-compose-card.mdx

Use the automatic installation command to add the component to your project.

```bash
<InstallCommand component="email-compose-card" />
```

--------------------------------

### Install Pricing Card

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/components/pricing-card.mdx

Use the CLI to add the component to your project.

```bash
npx shadcn@latest add "https://ui.heygaia.io/r/pricing-card"
```

--------------------------------

### Install Dependencies

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/components/holo-card.mdx

Install the required react-parallax-tilt package for the tilt functionality.

```bash
npm install react-parallax-tilt
```

--------------------------------

### GitHub Stars Button - Installation

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/components/github-stars-button.mdx

Instructions for installing the GitHub Stars Button component.

```APIDOC
## GitHub Stars Button - Installation

### Automatic Installation

Use the following command to install the component automatically:

```bash
<InstallCommand component="github-stars-button" />
```

### Manual Installation

Copy and paste the following code into your project:

```tsx
// filePath: registry/new-york/ui/github-stars-button.tsx
// Content of the file would be here.
```

Install required dependencies:

```bash
pnpm add @radix-ui/react-icons
```
```

--------------------------------

### Install Wave Spinner (Automatic)

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/components/wave-spinner.mdx

Use this command to automatically install the Wave Spinner component and its dependencies.

```bash
npm install class-variance-authority
```

--------------------------------

### Install Model Selector Component (Automatic)

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/components/model-selector.mdx

Use this command to automatically install the Model Selector component.

```bash
npm install @gaia/ui
# or
yarn add @gaia/ui
```

--------------------------------

### Install Dependencies via CLI

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/components/weather-card.mdx

Run this command to install the necessary UI dependencies for the Weather Card component.

```bash
npx shadcn@latest add button dropdown-menu tooltip
```

--------------------------------

### Install Base shadcn/ui Components

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/README.md

Install the standard base components from shadcn/ui that the GAIA UI registry depends on. This includes 'button', 'tooltip', 'avatar', 'dropdown-menu', 'popover', and 'skeleton'.

```bash
npx shadcn@latest add button tooltip avatar dropdown-menu popover skeleton
```

--------------------------------

### Install Composer Component (Automatic)

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/components/composer.mdx

Use this command for automatic installation of the Composer component and its dependencies.

```bash
npx shadcn@latest add file-preview slash-command-dropdown
```

--------------------------------

### Default Usage Example

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/components/tool-calls-section.mdx

Example of how to use the ToolCallsSection component with a basic array of tool calls.

```APIDOC
## Default Usage

Shows a collapsible timeline of tools an AI agent used during a conversation, with stacked icons and expandable details for each call.

### Request Example

```tsx
import { ToolCallsSection } from "@/components/ui/tool-calls-section";

const toolCalls = [
  {
    tool_name: "search_web",
    tool_category: "search",
    message: "Searched for 'React best practices'",
    inputs: { query: "React best practices" },
    output: "Found 10 relevant results.",
  },
  {
    tool_name: "send_email",
    tool_category: "gmail",
    message: "Sent email to the team",
  },
];

export default function Example() {
  return <ToolCallsSection toolCalls={toolCalls} />;
}
```
```

--------------------------------

### Install dependencies

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/components/search-results-tabs.mdx

Required packages for the component functionality.

```bash
pnpm add framer-motion @hugeicons/react @hugeicons/core-free-icons
```

```bash
npx shadcn@latest add button popover skeleton
```

--------------------------------

### GitHub Stars Button - Examples

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/components/github-stars-button.mdx

Demonstrates various examples of the GitHub Stars Button, including different repositories, sizes, and styling.

```APIDOC
## GitHub Stars Button - Examples

### Different Repositories

```tsx
<GitHubStarsButton repo="vercel/next.js" />
<GitHubStarsButton repo="facebook/react" />
<GitHubStarsButton repo="microsoft/vscode" />
```

### Without Label

```tsx
<GitHubStarsButton repo="theexperiencecompany/gaia" showLabel={false} />
```

### Different Sizes

```tsx
<GitHubStarsButton repo="theexperiencecompany/gaia" size="sm" />
<GitHubStarsButton repo="theexperiencecompany/gaia" size="default" />
<GitHubStarsButton repo="theexperiencecompany/gaia" size="lg" />
```

### Custom Styling

```tsx
<GitHubStarsButton
  repo="theexperiencecompany/gaia"
  className="hover:scale-105 transition-transform"
/>
```
```

--------------------------------

### Usage Example for TodoItem Component

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/components/todo-item.mdx

Demonstrates how to use the TodoItem component with various props including title, description, completion status, priority, and due date. Includes an example of a completion toggle handler.

```tsx
import { TodoItem } from "@/components/ui/todo-item";

export default function Example() {
  return (
    <TodoItem
      id="1"
      title="Complete project documentation"
      description="Write comprehensive docs for the new API"
      completed={false}
      priority="high"
      dueDate={new Date()}
      onToggleComplete={(id, completed) => {
        console.log(`Todo ${id} completed: ${completed}`);
      }}
    />
  );
}

```

--------------------------------

### Install Dependencies

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/components/file-preview.mdx

Required packages for icons used within the FilePreview component.

```bash
npm install @hugeicons/react @hugeicons/core-free-icons
```

--------------------------------

### Install File Dropzone Component (Manual)

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/components/file-dropzone.mdx

Manually install the File Dropzone component by copying the provided code into your project. Ensure the file path is correct.

```tsx
import { FileDropzone } from "@/components/ui/file-dropzone";

export default function Example() {
  return (
    <FileDropzone
      onFilesDropped={(files) => console.log(files)}
      accept="image/*,.pdf"
      maxSize={5 * 1024 * 1024}
      maxFiles={5}
    />
  );
}
```

--------------------------------

### Implement FilePreview Component

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/components/file-preview.mdx

Basic usage example showing how to pass an array of files and handle removal events.

```tsx
import { FilePreview } from "@/components/ui/file-preview";

export default function Example() {
  const files = [
    {
      id: "1",
      url: "/uploads/document.pdf",
      name: "report.pdf",
      type: "application/pdf",
    },
  ];

  return (
    <FilePreview
      files={files}
      onRemove={(id) => console.log("Remove:", id)}
    />
  );
}
```

--------------------------------

### Install GAIA UI Components with CLI

Source: https://context7.com/theexperiencecompany/gaia-ui/llms.txt

Use the GAIA UI CLI to add single or multiple components. Alternatively, use the shadcn CLI directly with the GAIA registry URL and configure the @heygaia namespace in components.json.

```bash
npx @heygaia/ui add composer
```

```bash
npx @heygaia/ui add raised-button chat-bubble tool-calls-section
```

```bash
npx shadcn@latest add https://ui.heygaia.io/r/navbar-menu.json
```

```json
# Configure the @heygaia namespace in components.json
# {
#   "registries": {
#     "@heygaia": "https://ui.heygaia.io/r/{name}.json"
#   }
# }
# Then use: npx shadcn@latest add @heygaia/navbar-menu
```

--------------------------------

### Install Calendar Event Card (Manual)

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/components/calendar-event-card.mdx

Copy and paste this code into your project for manual installation of the calendar-event-card component.

```tsx
import { CalendarEventCard } from "@/components/ui/calendar-event-card";

export default function Example() {
  return (
    <CalendarEventCard eventColor="#3b82f6">
      {/* Content */}
    </CalendarEventCard>
  );
}
```

--------------------------------

### Model Selector Usage Example

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/components/model-selector.mdx

Example of how to integrate and use the Model Selector component in a React application.

```typescript
import { ModelSelector } from "@/components/ui/model-selector";
import { useState } from "react";

interface AIModel {
  id: string;
  name: string;
  provider: string;
  icon?: string;
  isPro?: boolean;
  description?: string;
}

const models: AIModel[] = [
  { id: "gpt-4", name: "GPT-4", provider: "OpenAI", isPro: true },
  { id: "claude", name: "Claude", provider: "Anthropic" },
];

export default function Example() {
  const [selected, setSelected] = useState(models[0]);
  
  return (
    <ModelSelector
      models={models}
      selectedModel={selected}
      onSelect={setSelected}
    />
  );
}
```

--------------------------------

### Install clsx and tailwind-merge Dependencies

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/installation.mdx

Install the necessary npm packages for the `cn()` utility function. These are required for class merging in GAIA UI components.

```bash
npm install clsx tailwind-merge
```

--------------------------------

### Implement SearchResultsTabs

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/components/search-results-tabs.mdx

Basic usage example showing how to structure the search results object and pass it to the component.

```tsx
import { SearchResultsTabs } from "@/components/ui/search-results-tabs";

export default function Example() {
  const searchResults = {
    web: [
      {
        title: "Example Site",
        url: "https://example.com",
        content: "Description of the website...",
      },
    ],
    images: [
      "https://images.unsplash.com/photo-1...",
      "https://images.unsplash.com/photo-2...",
    ],
    news: [
      {
        title: "News Article",
        url: "https://news.example.com",
        content: "Article content...",
        score: 0.95,
        date: "2025-11-10",
      },
    ],
  };

  return <SearchResultsTabs search_results={searchResults} />;
}
```

--------------------------------

### Install Motion dependency

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/components/navbar-menu.mdx

Required dependency for handling component animations.

```bash
npm install motion
```

--------------------------------

### Install D3.js Dependency

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/components/knowledge-graph.mdx

Install the D3.js library and its types using npm. This is a prerequisite for using the Knowledge Graph component.

```bash
npm install d3 @types/d3
```

--------------------------------

### Install Radix UI dependencies

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/components/nested-menu.mdx

Required dependency for the Nested Menu component.

```bash
npm install @radix-ui/react-popover
```

--------------------------------

### MDX Documentation Structure

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/AGENTS.md

Example of an MDX file for documenting a component, including frontmatter, component previews, and usage sections.

```mdx
---
title: Your Component
description: What it does and why someone would use it.
---

<ComponentPreview name="your-component/default" />

## Usage

Show how to use it.

## Installation

<Tabs defaultValue="automatic" className="mt-4">
  <!-- Add both automatic and manual installation options -->
</Tabs>

## Props

Document all the props in a table.
```

--------------------------------

### Implement Link Preview Component

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/components/link-preview.mdx

Basic usage example for integrating the LinkPreview component into a React application.

```tsx
import { LinkPreview } from "@/components/ui/link-preview";

export default function Example() {
  return (
    <p className="text-zinc-300">
      Check out the{" "}
      <LinkPreview href="https://github.com/theexperiencecompany/gaia">
        GAIA repository
      </LinkPreview>{" "}
      to learn more about this open-source AI assistant.
    </p>
  );
}
```

--------------------------------

### Model Selector Usage Example

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/components/model-selector.mdx

Demonstrates how to use the ModelSelector component with a list of AI models and state management for selection.

```tsx
import { ModelSelector } from "@/components/ui/model-selector";
import { useState } from "react";

const models = [
  { id: "gpt-4", name: "GPT-4", provider: "OpenAI", isPro: true },
  { id: "claude", name: "Claude", provider: "Anthropic" },
];

export default function Example() {
  const [selected, setSelected] = useState(models[0]);
  
  return (
    <ModelSelector
      models={models}
      selectedModel={selected}
      onSelect={setSelected}
    />
  );
}
```

--------------------------------

### Manual Installation: Wave Spinner Component

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/components/wave-spinner.mdx

Copy this code directly into your project to manually include the Wave Spinner component. Ensure all necessary files are placed correctly.

```tsx
import { WaveSpinner } from "@/components/ui/wave-spinner";
```

--------------------------------

### Manual Installation: Wave Spinner CSS

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/components/wave-spinner.mdx

Copy this CSS file to enable the wave animations for the Wave Spinner component. This file contains the necessary styles for the visual effects.

```css
/* CSS for wave animations */

.wave-spinner {
  /* Base styles */
  position: relative;
  display: inline-block;
  width: var(--wave-spinner-size);
  height: var(--wave-spinner-size);
}

.wave-spinner::before,
.wave-spinner::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: currentColor;
  border-radius: var(--wave-spinner-dot-shape);
  opacity: 0;
  animation: wave-spinner-animation var(--wave-spinner-duration) ease-in-out infinite;
}

.wave-spinner::after {
  animation-delay: calc(var(--wave-spinner-duration) / -2);
}

@keyframes wave-spinner-animation {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  50% {
    transform: scale(0.5);
    opacity: 0.75;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

/* Grid Patterns */

.wave-spinner.pattern-square3x3 {
  --wave-spinner-grid-columns: 3;
  --wave-spinner-grid-rows: 3;
  --wave-spinner-grid-gap: 0.25em;
  display: grid;
  grid-template-columns: repeat(var(--wave-spinner-grid-columns), 1fr);
  grid-template-rows: repeat(var(--wave-spinner-grid-rows), 1fr);
  gap: var(--wave-spinner-grid-gap);
}

.wave-spinner.pattern-square3x3::before,
.wave-spinner.pattern-square3x3::after {
  position: static;
  grid-column: span 1;
  grid-row: span 1;
  width: auto;
  height: auto;
  animation: none; /* Animation handled by individual dots */
}

.wave-spinner.pattern-square3x3 .dot {
  width: 100%;
  height: 100%;
  background-color: currentColor;
  border-radius: var(--wave-spinner-dot-shape);
  opacity: 0;
  animation: wave-spinner-dot-animation var(--wave-spinner-duration) ease-in-out infinite;
}

/* Animation Styles */

.wave-spinner.animation-diagonalTL .dot {
  animation-name: wave-spinner-diagonalTL;
}

.wave-spinner.animation-diagonalTR .dot {
  animation-name: wave-spinner-diagonalTR;
}

.wave-spinner.animation-diagonalBL .dot {
  animation-name: wave-spinner-diagonalBL;
}

.wave-spinner.animation-diagonalBR .dot {
  animation-name: wave-spinner-diagonalBR;
}

.wave-spinner.animation-ripple .dot {
  animation-name: wave-spinner-ripple;
}

.wave-spinner.animation-horizontal .dot {
  animation-name: wave-spinner-horizontal;
}

.wave-spinner.animation-vertical .dot {
  animation-name: wave-spinner-vertical;
}

.wave-spinner.animation-random .dot {
  animation-name: wave-spinner-random;
}

.wave-spinner.animation-spiral .dot {
  animation-name: wave-spinner-spiral;
}

/* Dot Shapes */

.wave-spinner .dot.shape-square {
  --wave-spinner-dot-shape: 0;
}

.wave-spinner .dot.shape-rounded {
  --wave-spinner-dot-shape: 0.25em;
}

.wave-spinner .dot.shape-circle {
  --wave-spinner-dot-shape: 50%;
}

/* Sizes */

.wave-spinner.size-xs {
  --wave-spinner-size: 1rem;
  --wave-spinner-duration: 0.6s;
}

.wave-spinner.size-sm {
  --wave-spinner-size: 1.5rem;
  --wave-spinner-duration: 0.7s;
}

.wave-spinner.size-md {
  --wave-spinner-size: 2rem;
  --wave-spinner-duration: 0.8s;
}

.wave-spinner.size-lg {
  --wave-spinner-size: 2.5rem;
  --wave-spinner-duration: 0.9s;
}

.wave-spinner.size-xl {
  --wave-spinner-size: 3rem;
  --wave-spinner-duration: 1s;
}

/* Keyframes */

@keyframes wave-spinner-dot-animation {
  0%,
  100% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(0.5);
    opacity: 1;
  }
}

@keyframes wave-spinner-diagonalTL {
  0% {
    transform: translate(-100%, -100%) scale(0);
    opacity: 0;
  }
  50% {
    transform: translate(0, 0) scale(0.5);
    opacity: 1;
  }
  100% {
    transform: translate(100%, 100%) scale(1);
    opacity: 0;
  }
}

@keyframes wave-spinner-diagonalTR {
  0% {
    transform: translate(100%, -100%) scale(0);
    opacity: 0;
  }
  50% {
    transform: translate(0, 0) scale(0.5);
    opacity: 1;
  }
  100% {
    transform: translate(-100%, 100%) scale(1);
    opacity: 0;
  }
}

@keyframes wave-spinner-diagonalBL {
  0% {
    transform: translate(-100%, 100%) scale(0);
    opacity: 0;
  }
  50% {
    transform: translate(0, 0) scale(0.5);
    opacity: 1;
  }
  100% {
    transform: translate(100%, -100%) scale(1);
    opacity: 0;
  }
}

@keyframes wave-spinner-diagonalBR {
  0% {
    transform: translate(100%, 100%) scale(0);
    opacity: 0;
  }
  50% {
    transform: translate(0, 0) scale(0.5);
    opacity: 1;
  }
  100% {
    transform: translate(-100%, -100%) scale(1);
    opacity: 0;
  }
}

@keyframes wave-spinner-ripple {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes wave-spinner-horizontal {
  0% {
    transform: translateX(-100%) scale(0);
    opacity: 0;
  }
  50% {
    transform: translateX(0) scale(0.5);
    opacity: 1;
  }
  100% {
    transform: translateX(100%) scale(1);
    opacity: 0;
  }
}

@keyframes wave-spinner-vertical {
  0% {
    transform: translateY(-100%) scale(0);
    opacity: 0;
  }
  50% {
    transform: translateY(0) scale(0.5);
    opacity: 1;
  }
  100% {
    transform: translateY(100%) scale(1);
    opacity: 0;
  }
}

@keyframes wave-spinner-random {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  25% {
    transform: scale(0.3) translate(var(--random-x, 0), var(--random-y, 0));
    opacity: 0.8;
  }
  50% {
    transform: scale(0.6) translate(var(--random-x, 0), var(--random-y, 0));
    opacity: 0.6;
  }
  75% {
    transform: scale(0.8) translate(var(--random-x, 0), var(--random-y, 0));
    opacity: 0.3;
  }
  100% {
    transform: scale(1) translate(var(--random-x, 0), var(--random-y, 0));
    opacity: 0;
  }
}

@keyframes wave-spinner-spiral {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 0;
  }
  50% {
    transform: scale(0.5) rotate(180deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(360deg);
    opacity: 0;
  }
}

/* Color Presets */

.wave-spinner.color-primary {
  color: #00bbff;
}

.wave-spinner.color-success {
  color: #22c55e;
}

.wave-spinner.color-warning {
  color: #f59e0b;
}

.wave-spinner.color-danger {
  color: #ef4444;
}

.wave-spinner.color-muted {
  color: #71717a;
}

.wave-spinner.color-purple {
  color: #a855f7;
}

.wave-spinner.color-cyan {
  color: #06b6d4;
}

.wave-spinner.color-rose {
  color: #f43f5e;
}

.wave-spinner.color-indigo {
  color: #6366f1;
}

.wave-spinner.color-emerald {
  color: #10b981;
}
```

--------------------------------

### Install Raised Button Component (Manual)

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/components/raised-button.mdx

Manually copy and paste the provided code into your project for the raised-button component.

```typescript
import { RaisedButton } from "@/components/ui/raised-button";

export default function Example() {
  return <RaisedButton>Click me</RaisedButton>;
}
```

```typescript
import { cn } from "@/lib/utils/utils";

export type RaisedButtonProps = {
  children: React.ReactNode;
  className?: string;
  disabled?: boolean;
  color?: string;
  size?: "sm" | "default" | "lg" | "icon";
};

export function RaisedButton({
  children,
  className,
  disabled,
  color,
  size = "default",
}: RaisedButtonProps) {
  return (
    <button
      className={cn(
        "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2",
        {
          "h-9 px-3.5 py-1.5 text-base": size === "default",
          "h-8 px-3 py-1 text-xs": size === "sm",
          "h-12 px-5 py-3 text-lg": size === "lg",
          "h-10 w-10 p-0": size === "icon",
        },
        className
      )}
      style={{
        background: color,
      }}
      disabled={disabled}
    >
      {children}
    </button>
  );
}
```

```typescript
import Color from "color";

export const getContrast = (hexcolor: string) => {
  return Color(hexcolor).isDark() ? "#FFF" : "#000";
};
```

--------------------------------

### Install Model Selector Component (Manual)

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/components/model-selector.mdx

Manually copy and paste the Model Selector component code into your project.

```tsx
import * as React from "react";
import { cn } from "@/lib/utils";

export interface AIModel {
  id: string;
  name: string;
  provider: string;
  icon?: string;
  isPro?: boolean;
  description?: string;
}

interface ModelSelectorProps {
  models: AIModel[];
  selectedModel: AIModel;
  onSelect: (model: AIModel) => void;
  disabled?: boolean;
}

export function ModelSelector({
  models,
  selectedModel,
  onSelect,
  disabled,
}: ModelSelectorProps) {
  const [open, setOpen] = React.useState(false);

  const handleSelect = (model: AIModel) => {
    onSelect(model);
    setOpen(false);
  };

  return (
    <div className="relative inline-block text-left">
      <div>
        <button
          type="button"
          className="inline-flex w-full justify-between items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-100"
          id="menu-button"
          aria-expanded="true"
          aria-haspopup="true"
          onClick={() => setOpen(!open)}
          disabled={disabled}
        >
          {selectedModel.icon && (
            <img
              src={selectedModel.icon}
              alt={selectedModel.name}
              className="h-5 w-5 mr-2"
            />
          )}
          {selectedModel.name}
          {selectedModel.isPro && (
            <span className="ml-2 inline-flex items-center rounded-md bg-yellow-100 px-2.5 py-0.5 text-xs font-medium text-yellow-800">
              Pro
            </span>
          )}
          <svg
            className="-mr-1 ml-2 h-5 w-5"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true"
          >
            <path
              fillRule="evenodd"
              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
              clipRule="evenodd"
            />
          </svg>
        </button>
      </div>

      {open && (
        <div
          className="absolute right-0 z-10 mt-2 w-full origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
          role="menu"
          aria-orientation="vertical"
          aria-labelledby="menu-button"
          tabIndex={-1}
        >
          <div className="py-1" role="none">
            {models.map((model) => (
              <button
                key={model.id}
                onClick={() => handleSelect(model)}
                className="text-gray-700 block w-full px-4 py-2 text-left text-sm hover:bg-gray-100 hover:text-gray-900"
                role="menuitem"
                tabIndex={-1}
              >
                <div className="flex items-center">
                  {model.icon && (
                    <img
                      src={model.icon}
                      alt={model.name}
                      className="h-5 w-5 mr-2"
                    />
                  )}
                  <span>{model.name}</span>
                  {model.isPro && (
                    <span className="ml-2 inline-flex items-center rounded-md bg-yellow-100 px-2.5 py-0.5 text-xs font-medium text-yellow-800">
                      Pro
                    </span>
                  )}
                </div>
                {model.description && (
                  <p className="mt-1 text-xs text-gray-500">
                    {model.description}
                  </p>
                )}
              </button>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}
```

--------------------------------

### GitHub Stars Button - Default Usage

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/components/github-stars-button.mdx

Basic example of how to use the GitHub Stars Button component.

```APIDOC
## GitHub Stars Button - Default Usage

### Description
This is the default usage of the GitHub Stars Button component.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Request Body
N/A (Component Usage)

### Request Example
```tsx
import { GitHubStarsButton } from "@/components/ui/github-stars-button";

export default function Example() {
  return <GitHubStarsButton repo="theexperiencecompany/gaia" />;
}
```

### Response
N/A (Component Usage)

### Response Example
N/A (Component Usage)
```

--------------------------------

### Manual Installation of Code Block Component

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/components/code-block.mdx

Provides the file path for manually copying the Code Block component's source code into your project.

```tsx
<SourceCode filePath="registry/new-york/ui/code-block.tsx" />
```

--------------------------------

### Manual Installation of Email Compose Card

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/components/email-compose-card.mdx

Copy the source code directly into your project and adjust import paths as necessary.

```tsx
<SourceCode filePath="registry/new-york/ui/email-compose-card.tsx" />
```

--------------------------------

### Handle Image Clicks

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/components/search-results-tabs.mdx

Example of using the onImageClick callback to handle user interactions with images.

```tsx
const [selectedImage, setSelectedImage] = useState<string | null>(null);

<SearchResultsTabs
  search_results={{ images: [...] }}
  onImageClick={setSelectedImage}
/>
```

--------------------------------

### Nested Menu Hook Usage

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/components/nested-menu.mdx

Example of using the `useNestedMenu` hook for more granular control over menu state and behavior.

```APIDOC
## Use Nested Menu Hook Example

### Description
This example shows how to leverage the `useNestedMenu` hook to manage the open/closed state and interactions of a nested menu, offering more flexibility for custom UI elements.

### Code
```tsx
import { useNestedMenu, NestedMenuTooltip } from "@/components/ui/nested-menu";

function MyComponent() {
  const resourcesMenu = useNestedMenu();

  return (
    <>
      <button
        onMouseEnter={resourcesMenu.handleMouseEnter}
        onMouseLeave={resourcesMenu.handleMouseLeave}
      >
        Resources
      </button>

      <NestedMenuTooltip
        isOpen={resourcesMenu.isOpen}
        onOpenChange={resourcesMenu.setIsOpen}
        itemRef={resourcesMenu.itemRef}
        menuItems={[
          { key: "docs", label: "Documentation", onSelect: () => {} },
          { key: "blog", label: "Blog", onSelect: () => {} },
        ]}
        onMouseEnter={resourcesMenu.cancelClose}
        onMouseLeave={resourcesMenu.handleMouseLeave}
      />
    </>
  );
}
```
```

--------------------------------

### Pricing Card Variants

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/components/pricing-card.mdx

Examples showing different configurations for free tiers, yearly discounts, and current plan status.

```tsx
<PricingCard
  title="Free"
  price={0}
  description="Get started for free."
  features={["5 conversations per day", "Basic AI", "Community support"]}
  buttonLabel="Get Started"
/>
```

```tsx
<PricingCard
  title="Pro"
  price={9}
  originalPrice={12}
  isMonthly={false}
  description="Best value for power users."
  features={["Unlimited everything", "Priority support", "All integrations"]}
  accentColor="#00bbff"
/>
```

```tsx
<PricingCard
  title="Pro"
  price={12}
  isCurrentPlan={true}
  features={["All Pro features"]}
/>
```

--------------------------------

### Basic Chat Composer Usage

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/components/composer.mdx

Demonstrates the basic setup of the Composer component. Configure the placeholder text and handle message submission.

```tsx
import { Composer } from "@/components/ui/composer";

export default function Chat() {
  return (
    <Composer
      placeholder="What can I do for you today?"
      onSubmit={(message, files) => {
        console.log("Message:", message);
        console.log("Files:", files);
      }}
    />
  );
}
```

--------------------------------

### Add Knowledge Graph Component

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/components/knowledge-graph.mdx

Add the Knowledge Graph component to your project using the shadcn-ui CLI. This command fetches and installs the necessary files.

```bash
npx shadcn@latest add "https://ui.heygaia.io/r/knowledge-graph"
```

--------------------------------

### Notification Card Usage Example

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/components/notification-card.mdx

Demonstrates how to use the NotificationCard component with various props, including title, body, status, actions, and event handlers.

```tsx
import { NotificationCard } from "@/components/ui/notification-card";

export default function Example() {
  return (
    <NotificationCard
      id="1"
      title="New message"
      body="You have a new message from the team."
      status="unread"
      createdAt={new Date()}
      actions={[
        { id: "view", label: "View", type: "redirect", style: "primary" },
        { id: "dismiss", label: "Dismiss", type: "api_call" },
      ]}
      onAction={(notifId, actionId) => {
        console.log(`Action ${actionId} on notification ${notifId}`);
      }}
    />
  );
}
```

--------------------------------

### Add GAIA UI Component via CLI

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/installation.mdx

Use the GAIA UI CLI to add a component directly to your project. This command installs the component and any necessary dependencies.

```bash
npx shadcn@latest add https://ui.heygaia.io/r/raised-button.json
```

--------------------------------

### Minimal Weather Card Example

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/components/weather-card.mdx

Displays only the current weather conditions, hiding the forecast and detailed metrics. Ensure `weatherData` is properly formatted.

```tsx
<WeatherCard
  weatherData={weatherData}
  showForecast={false}
  showDetails={false}
/>
```

--------------------------------

### Add Multiple Components with @heygaia/ui

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/README.md

Add multiple components such as 'raised-button', 'chat-bubble', and 'tool-calls-section' simultaneously.

```bash
npx @heygaia/ui add raised-button chat-bubble tool-calls-section
```

--------------------------------

### Display News Only

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/components/search-results-tabs.mdx

Example of rendering only news search results.

```tsx
<SearchResultsTabs
  search_results={{
    news: [
      {
        title: "Article Title",
        url: "https://news.example.com",
        content: "Article excerpt...",
        score: 0.95,
        date: "2025-11-10",
      },
    ],
  }}
/>
```

--------------------------------

### Display Images Only

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/components/search-results-tabs.mdx

Example of rendering only image search results.

```tsx
<SearchResultsTabs
  search_results={{
    images: [
      "https://example.com/image1.jpg",
      "https://example.com/image2.jpg",
    ],
  }}
/>
```

--------------------------------

### Basic Knowledge Graph Usage

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/components/knowledge-graph.mdx

Demonstrates how to use the KnowledgeGraph component with sample nodes and links. Configure click handlers for node interactions. Ensure the parent container has a defined height.

```tsx
import { KnowledgeGraph } from "@/components/ui/knowledge-graph";

const nodes = [
  { id: "1", label: "React", type: "technology" },
  { id: "2", label: "TypeScript", type: "technology" },
  { id: "3", label: "User", type: "user", size: 30 },
];

const links = [
  { source: "3", target: "1", label: "uses" },
  { source: "3", target: "2", label: "uses" },
  { source: "1", target: "2" },
];

export default function Example() {
  return (
    <div className="h-[400px]">
      <KnowledgeGraph
        nodes={nodes}
        links={links}
        onNodeClick={(node) => console.log(node)}
      />
    </div>
  );
}
```

--------------------------------

### Display Web Results Only

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/components/search-results-tabs.mdx

Example of rendering only web search results.

```tsx
<SearchResultsTabs
  search_results={{
    web: [
      {
        title: "Example",
        url: "https://example.com",
        content: "Description",
      },
    ],
  }}
/>
```

--------------------------------

### Add Component using Namespace Syntax with shadcn CLI

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/README.md

After configuring the '@heygaia' namespace, use this syntax to add components like '@heygaia/navbar-menu'.

```bash
npx shadcn@latest add @heygaia/navbar-menu
```

--------------------------------

### Register a New UI Component

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/AGENTS.md

Add component details to the registry.json file to make it discoverable. Ensure all required fields like name, type, title, and file path are included.

```json
{
  "name": "your-component",
  "type": "registry:ui",
  "title": "Your Component",
  "description": "A brief, compelling description of what this component does.",
  "dependencies": ["any-npm-packages"],
  "registryDependencies": ["icons", "other-gaia-components"],
  "files": [
    {
      "path": "registry/new-york/ui/your-component.tsx",
      "type": "registry:ui"
    }
  ]
}
```

--------------------------------

### Nested Menu Usage

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/components/nested-menu.mdx

Example of how to use the NestedMenu component with sections and a trigger.

```APIDOC
## Nested Menu Usage Example

### Description
This example demonstrates how to integrate the `NestedMenu` component into your application, providing a multi-level navigation structure triggered by a button.

### Code
```tsx
import { NestedMenu } from "@/components/ui/nested-menu";
import { Button } from "@/components/ui/button";
import { Settings, ChevronRight } from "lucide-react";

const menuSections = [
  {
    title: "Actions",
    items: [
      {
        key: "settings",
        label: "Settings",
        icon: Settings,
        onSelect: () => console.log("Settings clicked"),
      },
      {
        key: "download",
        label: "Download",
        hasSubmenu: true,
        submenuItems: [
          { key: "mac", label: "macOS", onSelect: () => {} },
          { key: "windows", label: "Windows", onSelect: () => {} },
        ],
      },
    ],
  },
];

export default function Example() {
  return (
    <NestedMenu
      sections={menuSections}
      trigger={<Button>Open Menu</Button>}
      arrowIcon={ChevronRight}
    />
  );
}
```
```

--------------------------------

### Add Single Component with @heygaia/ui

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/README.md

Use this command to add a single component like 'navbar-menu' to your project.

```bash
npx @heygaia/ui add navbar-menu
```

--------------------------------

### Implement chat message group

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/components/message-bubble.mdx

Usage example for the ChatMessage component to display a sequence of messages with a timestamp.

```tsx
import { ChatMessage } from "@/components/ui/message-bubble";

export default function Example() {
  return (
    <ChatMessage
      variant="received"
      messages={["Hey!", "How are you doing?", "Long time no see!"]}
      timestamp="10:30 AM"
    />
  );
}
```

--------------------------------

### Development Workflow Commands

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/README.md

Use these commands to manage dependencies, run the development server, build the registry, and perform type checking.

```bash
# Install dependencies
pnpm install

# Run dev server
pnpm run dev

# Build registry
pnpm run registry:build

# Type check
pnpm run type
```

--------------------------------

### Implement single message bubble

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/content/docs/components/message-bubble.mdx

Usage example for the MessageBubble component to display individual sent or received messages.

```tsx
import { MessageBubble } from "@/components/ui/message-bubble";

export default function Example() {
  return (
    <>
      <MessageBubble message="Hey there!" variant="received" />
      <MessageBubble message="Hi! How are you?" variant="sent" />
    </>
  );
}
```

--------------------------------

### Configure @heygaia Namespace in components.json

Source: https://github.com/theexperiencecompany/gaia-ui/blob/main/README.md

Configure the '@heygaia' namespace in your 'components.json' file to simplify adding components using the shadcn CLI.

```json
{
  "registries": {
    "@heygaia": "https://ui.heygaia.io/r/{name}.json"
  }
}
```