BigBlocks.dev
BigBlocks Docs

Components Overview

Full reference for all BigBlocks components

Components Overview

BigBlocks provides 96+ production-ready components organized into logical categories.

Component Categories

Authentication Components

Core components for Bitcoin-based authentication flows.

import { AuthButton } from 'bigblocks';

// Simple authentication button
<AuthButton />

// With custom text
<AuthButton>
  Sign In with Bitcoin
</AuthButton>

// With callback
<AuthButton 
  onSuccess={(user) => console.log('Authenticated:', user)}
/>

Key Components:

  • AuthFlowOrchestrator - Complete authentication flow
  • LoginForm - Standalone login interface
  • SignupFlow - Multi-step signup process
  • OAuthProviders - OAuth provider selection
  • BackupImport - Import encrypted backups
  • PasswordInput - Secure password field

Profile & Identity

Manage Bitcoin Attestation Protocol (BAP) profiles.

import { ProfileCard } from 'bigblocks';

<ProfileCard 
  profile={{
    id: 'bap123456',
    address: '1A1zP1eP5QGefi2DMPTfTL5SLmv7DivfNa',
    name: 'Satoshi Nakamoto',
    alternateName: '@satoshi',
    description: 'Creator of Bitcoin',
    image: 'https://api.dicebear.com/7.x/avataaars/svg?seed=satoshi',
    isPublished: true
  }}
  showActions={true}
  onEdit={() => console.log('Edit profile')}
  onViewDetails={() => console.log('View details')}
/>

Key Components:

  • ProfileCard - Display user profiles
  • ProfileEditor - Edit profile information
  • ProfileSwitcher - Switch between identities
  • ProfileManager - Complete profile system
  • IdentityGeneration - Create new identities

Wallet Components

Bitcoin wallet functionality and transaction management.

Key Components:

  • WalletConnect - Connect wallets
  • WalletOverview - Display balance and history
  • SendBSVButton - Send Bitcoin transactions
  • DonateButton - Accept donations
  • TokenBalance - Display token balances
  • TransactionHistory - Show transaction list

Social Components

Build social features with on-chain interactions.

Key Components:

  • PostCard - Display social posts
  • PostButton - Create new posts
  • LikeButton - Like content on-chain
  • FollowButton - Follow users
  • SocialFeed - Content feed display
  • FriendsDialog - Manage connections

Market Components

Ordinals marketplace and trading functionality.

Key Components:

  • MarketTable - Display marketplace listings
  • CreateListingButton - List items for sale
  • BuyListingButton - Purchase items
  • CompactMarketTable - Minimal market view

MetaLens Commenting System

Universal commenting for any context type.

Key Components:

  • MetaLensProvider - Commenting system provider
  • MetaLensComments - Full commenting interface
  • MetaLensBadge - Comment count badges
  • MetaLensEmbed - Embedded comments
  • MetaLensReactions - Like/reaction system
  • MetaLensThread - Threaded discussions

UI Primitives

Basic building blocks for your application.

import { 
  LoadingButton, 
  StepIndicator, 
  WarningCard, 
  ErrorDisplay 
} from 'bigblocks';

// Loading button states
<LoadingButton loading={false}>Save</LoadingButton>
<LoadingButton loading={true}>Saving...</LoadingButton>

// Multi-step indicator
<StepIndicator 
  steps={['Setup', 'Configure', 'Deploy']} 
  currentStep={1} 
/>

// Warning messages
<WarningCard title="Important Notice">
  This action cannot be undone.
</WarningCard>

// Error handling
<ErrorDisplay 
  error="Transaction failed" 
  details="Insufficient balance"
/>

Key Components:

  • Modal - Accessible modal dialogs
  • LoadingButton - Button with loading states
  • ErrorDisplay - Error message display
  • SuccessLayout - Success confirmations
  • StepIndicator - Multi-step indicators
  • TerminalCodeBlock - Code display

Advanced BAP Components

Advanced Bitcoin Attestation Protocol features.

Key Components:

  • KeyManager - HD key management
  • BapEncryption - Encrypt/decrypt data
  • FileSignature - Sign files
  • KeyRotation - Rotate keys
  • Type42KeyDerivation - Advanced derivation
  • ShamirSecretSharing - Split keys

Component Requirements

Provider Requirements

Most components require these providers:

<BitcoinAuthProvider config={{ apiUrl: '/api' }}>
  <BitcoinQueryProvider>
    <BitcoinThemeProvider>
      {/* Your components */}
    </BitcoinThemeProvider>
  </BitcoinQueryProvider>
</BitcoinAuthProvider>

Authentication Requirements

Components are marked with requirement badges:

  • No Auth Required - Works without authentication
  • Auth Required - Requires signed-in user
  • Funding Required - Needs BSV balance
  • Droplit Required - Uses gasless transactions

Using Components

Import Components

import { 
  AuthButton, 
  ProfileCard, 
  WalletOverview 
} from 'bigblocks';

Add Individual Components

npx bigblocks add AuthButton ProfileCard

Component Props

All components are fully typed with TypeScript. Use your IDE's IntelliSense for prop discovery or refer to individual component documentation.

Next Steps