# Component Library Specification

## Overview

Reusable component library for the explorer platform.

## Design System

**Framework**: Tailwind CSS or styled-components
**Design Tokens**: Colors, typography, spacing, shadows
**Theme**: Light/dark mode support

## Component Catalog

### Common Components

- Button
- Input
- Select
- Modal
- Table
- Card
- Badge
- Tooltip
- Loading spinner

### Blockchain-Specific Components

- Address display (with copy, ENS lookup)
- Transaction hash display
- Block number display
- Token amount display (with formatting)
- Gas price display
- Status badges (success/failed/pending)

### Data Display Components

- Transaction list
- Block list
- Token list
- Log viewer
- Trace viewer
- ABI viewer

## Component API Contracts

### Address Component

```typescript
interface AddressProps {
  address: string;
  chainId?: number;
  showCopy?: boolean;
  showENS?: boolean;
  truncate?: boolean;
}
```

### Transaction Component

```typescript
interface TransactionProps {
  hash: string;
  chainId: number;
  showDetails?: boolean;
  compact?: boolean;
}
```

## Styling Approach

**Recommendation**: Tailwind CSS

**Benefits**:
- Utility-first CSS
- Consistent design system
- Small bundle size
- Fast development

## References

- Frontend Architecture: See `frontend-architecture.md`