Bitcoin UI Components

Bitcoin is for everyone, its UX should be for everyone too. Bitcoin UI is a modern, accessible React component library for Bitcoin applications, built with TypeScript.

5 Components

64+ Tests

TypeScript Ready

Get Started View Components

tsx

import { PasswordInput, Secret } from "bitcoin-ui"

function App() {
  return (
    <div>
      <PasswordInput placeholder="Enter password" />
      <Secret value="your-secret-phrase-here" />
    </div>
  )
}

Built for Bitcoin Developers

Every component is designed with security, accessibility, and developer experience in mind.

Beautiful by Default

Stunning designs with Inter font, perfect spacing, and Bitcoin-inspired color schemes that work out of the box.

Fully Accessible

WCAG 2.1 AA compliant with comprehensive screen reader support, keyboard navigation, and focus management.

Zero Dependencies

Minimal bundle size with only React and qrcode.react as dependencies. No bloated libraries or unnecessary code.

Dark Mode Ready

Automatic dark mode support with beautiful color schemes that adapt to user preferences seamlessly.

Security-Focused

Built with Bitcoin security principles in mind. Secure handling of sensitive data like private keys and seed phrases.

TypeScript Ready

Full TypeScript support with exported types, interfaces, and comprehensive IntelliSense for better DX.

Component Library

Five carefully crafted components to handle common Bitcoin application needs.

Secret

Secure display and copy functionality for seed phrases and private keys with blur protection.

Blur protection

One-click copy

Accessibility support

Customizable styling

Example

<Secret
  value="abandon abandon abandon..." 
  blurred={true}
  copyable={true}
/>

PasswordInput

Accessible password input with reveal/hide toggle and strength indicators.

Show/hide toggle

Strength indicator

ARIA compliant

Custom validation

Example

<PasswordInput
  placeholder="Enter password"
  showStrength={true}
  onValidation={handleValidation}
/>

CurrencyInput

Locale-aware inputs for BTC, USD, EUR with automatic formatting and validation.

Multi-currency

Locale formatting

Real-time validation

Custom symbols

Example

<CurrencyInput
  currency="BTC"
  locale="en-US"
  onValueChange={setValue}
/>

ExpandableText

Truncate long text like Bitcoin addresses with expand/collapse functionality.

Smart truncation

Smooth animations

Copy support

Responsive design

Example

<ExpandableText
  text="bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh"
  maxLength={20}
  copyable={true}
/>

QRCode

Generate QR codes with copy functionality and customizable styling options.

SVG generation

Copy to clipboard

Custom colors

Error correction

Example

<QRCode
  value="bitcoin:bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh"
  size={200}
  copyable={true}
/>

Try Components Live

Quick Start

Get up and running with Bitcoin UI components in minutes.

1. Install the package

bash

npm install bitcoin-ui

2. Import components and styles

tsx

import { PasswordInput, Secret, QRCode } from "bitcoin-ui"

3. Use in your app

tsx

function App() {
  const [password, setPassword] = useState("")
  const seedPhrase = "abandon abandon abandon abandon abandon abandon abandon abandon abandon abandon abandon about"
  
  return (
    <div className="space-y-6">
      <PasswordInput 
        value={password}
        onChange={setPassword}
        placeholder="Enter your password"
        showStrength={true}
      />
      
      <Secret 
        value={seedPhrase}
        blurred={true}
        copyable={true}
      />
      
      <QRCode 
        value="bitcoin:bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh"
        size={200}
        copyable={true}
      />
    </div>
  )
}

View Full Documentation