explorer-monorepo/docs/specs/frontend/component-library.md

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

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

Transaction Component

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