Base Account SDK UI Components

This package provides UI components for React, Preact, Vue, and Svelte applications.

Features

• 🎯 Multi-framework support: React, Preact, Vue, and Svelte components
• 🛠️ TypeScript support: Full type safety for all frameworks
• 📦 Single package: Import from one package, use with any framework
• 🎨 Consistent API: Same props interface across frameworks

Installation

npm install @base-org/account-ui

Framework-Specific Documentation

For detailed usage examples and setup instructions for each framework:

• React - React-specific documentation and examples
• Preact - Preact-specific documentation and examples
• Vue - Vue-specific documentation and examples
• Svelte - Svelte-specific documentation and examples

Quick Start - React

SignInWithBaseButton

import { SignInWithBaseButton } from '@base-org/account-ui/react';

function App() {
  return (
    <SignInWithBaseButton 
      onClick={() => console.log('Sign in clicked!')}
      align="center"
      variant="solid"
      colorScheme="light"
    />
  );
}

BasePayButton

import { BasePayButton } from '@base-org/account-ui/react';

function App() {
  return (
    <BasePayButton 
      onClick={() => console.log('Pay with Base clicked!')}
      colorScheme="light"
    />
  );
}

Props

SignInWithBaseButton

| Prop | Type | Default | Description | |------|------|---------|-------------| | align | 'left' \| 'center' | 'center' | Button alignment | | variant | 'solid' \| 'transparent' | 'solid' | Button style variant | | colorScheme | 'light' \| 'dark' \| 'system' | 'system' | Color theme | | onClick | () => void | undefined | Click handler |

BasePayButton

| Prop | Type | Default | Description | |------|------|---------|-------------| | colorScheme | 'light' \| 'dark' \| 'system' | 'system' | Color theme | | onClick | () => void | undefined | Click handler |

Development

Build Commands

# Build all frameworks
npm run build

# TypeScript checking
npm run typecheck

# Run tests
npm run test

# Lint
npm run lint

Architecture

This package provides:

• Framework-specific exports: /react, /preact, /vue, /svelte
• Shared component logic: Preact components as the base implementation
• Framework wrappers: React, Vue, and Svelte components that mount Preact components
• Type definitions: Full TypeScript support for all frameworks