Getting Started

Learn how to install and use Bitcoin UI components in your React application.

Installation

Install Bitcoin UI components using your preferred package manager:

bash
npm install bitcoin-ui

Or with yarn:

bash
yarn add bitcoin-ui

Basic Usage

Import the components you need and include the CSS file:

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

TypeScript Support

Bitcoin UI is built with TypeScript and includes full type definitions:

tsx
import { PasswordInput, PasswordInputProps } from "bitcoin-ui"

interface MyComponentProps {
  onPasswordChange: (password: string) => void
}

function MyComponent({ onPasswordChange }: MyComponentProps) {
  return (
    <PasswordInput
      placeholder="Enter password"
      onChange={onPasswordChange}
      showStrength={true}
    />
  )
}

Styling

Components come with beautiful default styles using Inter font. You can customize them using CSS custom properties:

css
:root {
  --bitcoin-ui-primary: #f97316;
  --bitcoin-ui-radius: 8px;
  --bitcoin-ui-font-family: 'Inter', sans-serif;
}

/* Dark mode */
[data-theme="dark"] {
  --bitcoin-ui-bg: #1f2937;
  --bitcoin-ui-text: #f9fafb;
}

Accessibility

All components are built with accessibility in mind and follow WCAG 2.1 AA guidelines:

  • Full keyboard navigation support
  • Screen reader compatibility
  • High contrast color schemes
  • Focus management
  • ARIA labels and descriptions

Next Steps

Now that you have Bitcoin UI installed, explore the components:

Component Documentation

Detailed documentation for each component with examples and API reference.

Interactive Playground

Try components live with Storybook and see them in action.