​

Components

Solana App Kit provides a rich set of pre-built UI components that you can use to quickly build your Solana application. These components are designed to be modular, customizable, and easy to integrate.

​

Component Categories

The components are organized into several categories based on their functionality:

​

Social Components

• Thread - A complete social feed system with posts, replies, and reactions
• ThreadItem - Individual post items within a thread
• ThreadComposer - UI for creating new posts and replies
• Tweet - Simplified post display component

​

Wallet Components

• WalletCard - Display wallet information and balance
• WalletSlide - Slide-in wallet panel with portfolio information
• EmbeddedWallet - Embedded wallet authentication component
• PriorityFeeSelector - UI for selecting transaction priority fees

​

Trading Components

• TradeCard - Card for displaying and executing trades
• PumpfunCard - Interface for Pumpfun token trading
• PumpfunBuySection - UI for buying tokens via Pumpfun
• PumpfunSellSection - UI for selling tokens via Pumpfun

​

Token Management Components

• TokenMillScreen - Complete screen for token creation and management
• BondingCurveCard - Configure token bonding curves
• MarketCreationCard - Create new token markets
• SwapCard - Interface for token swapping
• StakingCard - Interface for token staking

​

Profile Components

• OtherProfile - Display another user’s profile
• ProfileInfo - Display profile information
• BuyCard - Interface for buying creator tokens
• PerksCard - Display token holder perks

​

Navigation Components

• TopNavigation - Top navigation bar
• AnimatedTabIcon - Animated icons for tab navigation

​

Using Components

Most components can be imported directly from the main package:

import { Thread, WalletCard, TradeCard } from 'solana-app-kit';

For more specific components, you may need to import from their specific path:

import PumpfunBuySection from 'solana-app-kit/components/pumpfun/PumpfunBuySection';

​

Component Props

Each component accepts a set of props for customization. Here are some examples:

​

Thread Component

<Thread
  rootPosts={posts}                // Array of root-level posts
  currentUser={user}               // Current user object
  onPostCreate={handlePostCreate}  // Function called when a post is created
  onReplyCreate={handleReply}      // Function called when a reply is created
  onReaction={handleReaction}      // Function called when a reaction is added
  themeOverrides={customTheme}     // Custom theme overrides
/>

​

WalletCard Component

<WalletCard
  publicKey={wallet.publicKey}     // Wallet public key
  balance={wallet.balance}         // Wallet balance
  username={user.username}         // Username to display
  onDisconnect={handleDisconnect}  // Function called when disconnect is clicked
  showActions={true}               // Whether to show action buttons
/>

​

PumpfunBuySection Component

<PumpfunBuySection
  tokenMint="your-token-mint"      // Token mint address
  initialAmount={1.0}              // Initial amount to buy
  onSuccess={handleSuccess}        // Function called on successful purchase
  onError={handleError}            // Function called on error
/>

​

Component Composition

Many components are designed to work together. For example, you can combine the Thread component with the ThreadComposer:

import React from 'react';
import { View } from 'react-native';
import { Thread, ThreadComposer } from 'solana-app-kit';

const SocialFeed = () => {
  const [posts, setPosts] = useState([]);
  
  const handlePostCreate = (newPost) => {
    setPosts([newPost, ...posts]);
  };
  
  return (
    <View style={{ flex: 1 }}>
      <ThreadComposer 
        currentUser={currentUser}
        onPostCreate={handlePostCreate}
      />
      <Thread 
        rootPosts={posts}
        currentUser={currentUser}
      />
    </View>
  );
};

​

Styling and Theming

Most components accept style overrides and theme customizations:

1. Direct style props - Many components accept a style prop for direct styling
2. Theme overrides - Components accept a themeOverrides prop for theme-based styling
3. Global theming - Use the CustomizationProvider for app-wide theming

Example of theme overrides:

const themeOverrides = {
  colors: {
    primary: '#3498db',
    secondary: '#2ecc71',
    background: '#f5f5f5',
    text: '#333333',
  },
  spacing: {
    small: 8,
    medium: 16,
    large: 24,
  },
};

<Thread 
  rootPosts={posts}
  currentUser={user}
  themeOverrides={themeOverrides}
/>

​

Component Documentation

For detailed documentation on each component, including all available props and usage examples, refer to the specific component pages in the Reference section.