open-index/open-npm huggingface dataset:
npm package: @risc0/ui
Description: Building blocks for UI applications at Boundless.
Latest version: 0.0.429

# 🎨 Boundless UI

Building blocks for UI applications at Boundless.

https://www.npmjs.com/package/@risc0/ui

***

#### Prerequisites

* Install [Node](https://nodejs.org/en) (≥ v20.x.x)
* Install [bun](https://bun.sh/) (≥ v1.1.30)

> \[!TIP]\
> When making code changes, it helps to have the [Biome VSCode extension](https://marketplace.visualstudio.com/items?itemName=biomejs.biome) installed.

### Coverage

| Statements                  | Branches                | Functions                 | Lines             |
| --------------------------- | ----------------------- | ------------------------- | ----------------- |
| ![Statements](https://img.shields.io/badge/statements-28.6%25-red.svg?style=flat) | ![Branches](https://img.shields.io/badge/branches-82.2%25-yellow.svg?style=flat) | ![Functions](https://img.shields.io/badge/functions-78.94%25-red.svg?style=flat) | ![Lines](https://img.shields.io/badge/lines-28.6%25-red.svg?style=flat) |
npm package: @risc0/zkauth
Description: ## In order to implement this flow you need to:
Author: RISC Zero
Latest version: 0.0.30

# zkAuth

## In order to implement this flow you need to:

1. Ask us to add your domain to the list of allowed redirects (Google, Twitch, Facebook,etc)
2. Integrate the following code to your project:

##### React Example:

### 1. Install

```bash
bun install @risc0/zkauth
```

### 2. For local development, make sure you are using port 3000

### 3. Usage

```tsx
import "@risc0/zkauth/style.css"; // load the zkAuth stylesheet
import { ZkAuth } from "@risc0/zkauth";

function App() {
  return (
    <>
      <h1>My App</h1>
      
      <ZkAuth 
        address="0xc8915cc592583036e18724b6a7cBE9685f49FC98" // address to prove ownership of
        onStarkComplete={(starkResults) => {
          console.info("Stark completed:", starkResults);
        }}
        onSnarkComplete={(snarkResults) => {
          console.info("Snark completed:", snarkResults);
        }}
      />
    </>
  );
}
```

*Note: if you are using Next.js, you need to mark the page as a client component with `"use client"`.*



---

### Unsupported providers

* LinkedIn (no way to pass a nonce)
* PayPal (no way to pass a nonce)
* Discord (doesn't support OIDC)
* Twitter/X (doesn't support OIDC)