Storybook

Interactive Component Documentation

SupaWeb3 provides a comprehensive Storybook deployment where you can explore, interact with, and test all components in isolation before integrating them into your application.

Access Storybook

Explore the complete SupaWeb3 component library:

What's Inside

Our Storybook documentation includes:

📦 Component Categories

• Auth - Wallet connection and authentication flows
• Tokens - Token balances, swaps, and transfers
• NFT - NFT cards, galleries, and collections
• DeFi - Staking, liquidity pools, and yield farming
• Portfolio - Portfolio overviews and analytics
• Transactions - Transaction history and tracking
• Identity - Addresses, avatars, and profiles
• Network - Chain switching and network management
• Governance - DAO voting and proposals
• Gaming - Game assets and quest tracking
• Access - Token-gated content controls

Component Examples

Each component in Storybook includes:

• Default Story - Basic usage example
• Variants - Different visual styles and sizes
• States - Loading, error, success, and empty states
• Props Documentation - Complete API reference
• Events - Available events and their payloads
• Slots - Customization options via slots

Using Storybook

Copy Code Examples

Each story includes a "Show code" button that displays the exact code needed to implement the component:

<template>
  <WalletConnectButton
    variant="primary"
    size="lg"
    @connect="handleConnect"
  />
</template>

<script setup>
const handleConnect = (wallet) => {
  console.log('Connected:', wallet)
}
</script>

Running Storybook Locally

Want to run Storybook on your local machine?

# Clone the main repository
git clone https://github.com/thenightproject/supaweb3.git
cd supaweb3

# Install dependencies
pnpm install

# Start Storybook
pnpm storybook

# If you already have the repo
cd ~/Projects/tnp.web.supaweb3
pnpm storybook

Storybook will open at http://localhost:6006

Development Workflow

Storybook is perfect for:

1. Component Discovery - Browse and find the right component for your needs
2. API Exploration - Understand component props, events, and slots
3. Visual Testing - Test components in isolation before integration
4. Design Review - Share component previews with designers and stakeholders
5. Documentation - Reference implementation details and code examples

Contributing Stories

Want to add or improve component stories? Check out our Contributing Guide for guidelines on writing Storybook stories.

Next Steps

• Browse the Component Gallery for usage in your app
• Check out Usage Examples for common patterns
• Learn about Theming to customize component styles