# @sats-connect/ui

> A Bitcoin Web3 wallet provider selector. Built as a custom element, compatible with all major UI frameworks.

Latest version **0.0.7** (published 2024-09-19) · 0 weekly downloads

## Install

```sh
npm install @sats-connect/ui
pnpm add @sats-connect/ui
yarn add @sats-connect/ui
bun add @sats-connect/ui
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.7 |
| Published | 2024-09-19 |
| First published | 2024-03-25 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 100.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | aryzing, yknl |

## Links

- npm: https://www.npmjs.com/package/@sats-connect/ui
- npm.io page: https://npm.io/package/@sats-connect/ui

## Recent versions

- 0.0.7 (latest) — 2024-09-19
- 0.0.7-6d337ec (pr-12) — 2026-09-14
- 0.0.7-cde2f8d (pr-11) — 2025-05-26
- 0.0.7-ffbbd88 (pr-10) — 2025-04-17
- 0.0.7-b421950 (pr-9) — 2025-01-15
- 0.0.7-233a13a (pr-8) — 2024-09-04
- 0.0.6-93a9e63 (pr-7) — 2024-05-07
- 0.0.5-1eef23f (pr-6) — 2024-05-07
- 0.0.5-377ac3d (pr-5) — 2024-04-19
- 0.0.4-68c5636 (pr-4) — 2024-04-18
- 0.0.3-d27ecf4 (pr-3) — 2024-04-12
- 0.0.3-448c72a (pr-2) — 2024-04-06
- 0.0.2-1b65715 (pr-1) — 2024-04-03
- 0.0.6-cecb52b — 2024-09-04
- 0.0.6 — 2024-05-07
- … 22 more at https://npm.io/package/@sats-connect/ui/versions

## README

# `@sats-connect/ui`

A Bitcoin Web3 wallet provider selector. Built as a custom element, compatible with all major UI frameworks.

## Basic usage

```ts
import { loadSelector, selectWalletProvider } from "@sats-connect/ui";

// Call this once in your app to load the custom element.
loadSelector();

// At a later point,
//
// 1. Decide which wallet providers should be displayed to the user.
// 2. Display the selector and capture the user's selection.

// (1)
const providersToDisplay = someBusinessLogic();
// (2)
const userSelectedProviderId = await selectWalletProvider(providersToDisplay);
```

# Development

An example app using the selector is included for convenience during development. To get started, run

```bash
npm install
npm run dev
```

# Building the `@sats-connect/ui` package

To build the `@sats-connect/ui` package, run

```bash
npm run build
```

# Building the example app

To build the example app use

```bash
npm run build-app
```

## Viewing the example app live

The latest version of the example app is available at <https://sats-connect-ui.netlify.app>.

# Docs

Technical documentation is in the [`docs`](./docs/) folder.

---
_Source: https://npm.io/package/@sats-connect/ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._