# Introduction

URL: https://docs.blux.cc/

The complete wallet infrastructure for Stellar dApps.

Blux is wallet infrastructure for Stellar dApps — designed to make onboarding seamless, even for
users who don't have a Stellar wallet.

Users can sign in instantly with **email**, **social accounts** (Google, Apple, and more), **passkeys**, or an existing **wallet**. No friction, no setup, no barriers.

## What's Included

<Cards>
  <Card title="Multiple Auth Methods" icon={<LogIn />} description="Email, social, passkeys, and wallets — all out of the box." />
  <Card title="Built-in Hooks" icon={<Webhook />} description="Transaction signing, balances, swap, history, and on/off-ramp modals." />
  <Card title="Customizable UI" icon={<Palette />} description="Match your dApp's branding with a fully configurable modal." />
  <Card title="TypeScript Ready" icon={<Code2 />} description="Full type safety with clean, modern APIs." />
</Cards>

## Quick Start

The only required config is your **App ID**. Leave out `networks` and the app uses Mainnet. Leave out `appName` and Blux uses `"App"`. Everything else — appearance, login methods, language, wallets — has defaults too.

<Tabs items={['React', 'JavaScript']} defaultIndex={0}>
<Tab value="React">
```bash
npm install @bluxcc/react
```

```tsx

function App() {
  const { login, isAuthenticated } = useBlux();

  return (
    <button onClick={login}>
      {isAuthenticated ? "Connected" : "Connect"}
    </button>
  );
}

export default function Root() {
  return (
    <BluxProvider
      config={{
        appId: "your-app-id",
      }}
    >
      <App />
    </BluxProvider>
  );
}
```
</Tab>
<Tab value="JavaScript">
```bash
npm install @bluxcc/core
```

```ts

createConfig({
  appId: "your-app-id",
});

document.querySelector("#connect")?.addEventListener("click", () => {
  blux.login();
});
```
</Tab>
</Tabs>

Get an App ID from the [dashboard](https://dashboard.blux.cc), then follow the full setup guide for your stack:

<Cards>
  <Card title="React" href="/react" icon={<Blocks />} description="For React, Next.js, Vite, and CRA projects." />
  <Card title="JavaScript" href="/javascript" icon={<FileCode />} description="For framework-agnostic or vanilla JS projects." />
</Cards>

<Callout type="info">
  Want to see Blux in action before integrating? [Try the live demo →](https://demo.blux.cc)
</Callout>