account-sdk/packages/account-ui/README.md

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