open-index/open-npm huggingface dataset:
npm package: @react-buoy/core
Description: Floating dev tools launcher and AppHost
Latest version: 1.5.26

# @react-buoy/core

[![npm](https://img.shields.io/npm/v/@react-buoy%2Fcore)](https://www.npmjs.com/package/@react-buoy/core)


Floating dev tools launcher and host provider for React Native apps.

## Install
```bash
pnpm add @react-buoy/core @react-buoy/shared-ui
```

## Quick Start
```tsx
import { AppHostProvider, FloatingMenu } from '@react-buoy/core';
import type { InstalledApp } from '@react-buoy/core';
import { EnvVarsModal } from '@react-buoy/env';

const APPS: InstalledApp[] = [
  {
    id: 'env',
    name: 'Environment',
    icon: '🛰️',
    component: EnvVarsModal,
    singleton: true,
  },
];

export function DevToolsHost() {
  return (
    <AppHostProvider>
      <FloatingMenu apps={APPS} />
    </AppHostProvider>
  );
}
```

## Key Exports
- `AppHostProvider` – Context provider that manages installed dev tools.
- `FloatingMenu` – Cyberpunk-inspired floating entrypoint for tools.
- `AppOverlay` & `useAppHost()` – Programmatic APIs for opening tools.

The menu hosts any `InstalledApp` descriptor. Combine it with other `@react-buoy/*` packages for a full suite of debug panels.
npm package: @react-buoy/shared-ui
Description: Shared UI components, hooks, and utilities
Latest version: 1.5.26

# @react-buoy/shared-ui

[![npm](https://img.shields.io/npm/v/@react-buoy%2Fshared-ui)](https://www.npmjs.com/package/@react-buoy/shared-ui)


Design system pieces shared across the React Buoy dev tools.

## Install
```bash
pnpm add @react-buoy/shared-ui
```

## What You Get
- Icon set with cyberpunk variants (`EnvLaptopIcon`, `WifiCircuitIcon`, etc.).
- Themed UI primitives (`CyberpunkSectionButton`, `CompactRow`).
- Utility helpers (safe storage wrappers, display formatting).
- Hooks (`useSafeAreaInsets`, `useHoverState`) tuned for React Native.

## Usage
```tsx
import { CyberpunkSectionButton, ReactQueryIcon } from '@react-buoy/shared-ui';

export function LaunchReactQuery({ onPress }: { onPress: () => void }) {
  return (
    <CyberpunkSectionButton
      label="React Query"
      icon={<ReactQueryIcon size={18} />}
      onPress={onPress}
    />
  );
}
```

These primitives back every `@react-buoy/*` package, but you can also use them directly in your own tooling to stay visually consistent.