Components

Complete documentation for all Bitcoin UI components with examples, props, and usage guidelines.

Secret

Try Live →

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

Features

  • Blur protection for sensitive data
  • One-click copy to clipboard
  • Accessibility support
  • Customizable styling

Example

tsx
<Secret
  value="abandon abandon abandon abandon abandon abandon abandon abandon abandon abandon abandon about"
  blurred={true}
  copyable={true}
  className="custom-secret"
/>

PasswordInput

Try Live →

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

Features

  • Show/hide password toggle
  • Password strength indicator
  • ARIA compliant
  • Custom validation

Example

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

CurrencyInput

Try Live →

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

Features

  • Multi-currency support
  • Locale-aware formatting
  • Real-time validation
  • Custom currency symbols

Example

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

ExpandableText

Try Live →

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

Features

  • Smart text truncation
  • Smooth expand/collapse animations
  • Copy to clipboard support
  • Responsive design

Example

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

QRCode

Try Live →

Generate QR codes with copy functionality and customizable styling options.

Features

  • SVG-based QR generation
  • Copy to clipboard
  • Custom colors and styling
  • Error correction levels

Example

tsx
<QRCode
  value="bitcoin:bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh"
  size={200}
  copyable={true}
  errorCorrectionLevel="M"
  fgColor="#000000"
  bgColor="#ffffff"
/>

Need More Details?

Check out our interactive Storybook for complete API documentation, live examples, and prop controls.

Open Storybook Documentation