> ## Documentation Index
> Fetch the complete documentation index at: https://magenx404.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Installation

> Install and configure MagenX404

## Package Installation

Install MagenX404 using your preferred package manager:

<CodeGroup>
  ```bash npm theme={null}
  npm install magenx404
  ```

  ```bash yarn theme={null}
  yarn add magenx404
  ```

  ```bash bun theme={null}
  bun add magenx404
  ```

  ```bash pnpm theme={null}
  pnpm add magenx404
  ```
</CodeGroup>

## Framework-Specific Setup

### Next.js

See the [Next.js Setup Guide](/nextjs-setup) for detailed configuration.

### React (Create React App)

No additional configuration needed. The package works out of the box.

### Vue.js

No additional configuration needed. The package works out of the box.

### Vanilla JavaScript

The package works in any JavaScript environment that supports ES modules.

## Verify Installation

After installation, verify it works:

```typescript theme={null}
import { X404TimeLock } from "magenx404";

console.log(typeof X404TimeLock); // Should log "function"
```

## TypeScript Support

The package includes full TypeScript definitions. If you're using TypeScript, you'll get:

* Full IntelliSense support
* Type checking
* Auto-completion

```typescript theme={null}
import {
  X404TimeLock,
  X404Blacklist,
  X404MultiToken,
  X404Activity,
  X404Tier,
  X404NoDebt,
  X404Age,
} from "magenx404";
import { detectWallets, getGeolocationData } from "magenx404/utils";

// Full type safety and IntelliSense support!
const wallets = detectWallets(); // string[]
const location = await getGeolocationData(); // Promise<GeolocationData>
const result = await X404TimeLock({ ... }); // Promise<X404Result>
```

## Package Structure

The package exports:

* **Features**: Individual authentication features
* **Utilities**: Helper functions for wallet detection, geolocation, etc.
* **Types**: TypeScript type definitions

```typescript theme={null}
// Import features
import {
  X404Blacklist,
  X404TimeLock,
  X404MultiToken,
  X404Activity,
  X404Tier,
  X404NoDebt,
  X404Age,
} from "magenx404";

// Import utilities
import { detectWallets, getGeolocationData } from "magenx404/utils";
```

## Troubleshooting

### Module Not Found Errors

If you see module resolution errors:

1. **Clear cache and reinstall:**

   ```bash theme={null}
   rm -rf node_modules package-lock.json
   npm install
   ```

2. **For Next.js:** Make sure `transpilePackages` is configured (see [Next.js Setup](/nextjs-setup))

3. **Restart your dev server**

### Type Errors

If TypeScript can't find types:

1. Make sure `node_modules/magenx404` exists
2. Check that your `tsconfig.json` includes the package:
   ```json theme={null}
   {
     "include": ["**/*", "node_modules/magenx404/**/*"]
   }
   ```

### Build Errors

If you encounter build errors:

1. Ensure you're using a compatible Node.js version (18+)
2. Check that all dependencies are installed
3. Clear build cache and rebuild

## Next Steps

<Card title="Next.js Setup" icon="nextjs" href="/nextjs-setup">
  Configure Next.js for MagenX404
</Card>

<Card title="Quick Start" icon="rocket" href="/quickstart">
  Get started with your first authentication
</Card>