Solana UI Stack

Production-ready Solana UI components for wallets and Jupiter swaps Built with Next.js 16 • React 19 • TypeScript • Tailwind CSS • Shadcn/ui

Why this exists

Solana builders rebuild the same UI plumbing—wallet auth & basic swaps—every hackathon. Solana UI Stack ships those blocks once, beautifully:

• ConnectWalletButton – polished modal, Phantom / Solflare / Backpack out-of-the-box
• SwapComponent – Jupiter-powered quotes & execution on devnet / mainnet
• AddressDisplay – formatted addresses with copy & explorer links
• Typed hooks (useWallet, useJupiterSwap, useJupiterPrice) for TypeScript bliss
• Shadcn/Tailwind — easy to theme, accessible by default

Installation

Option 1: CLI (Recommended)

Add individual components directly to your project, shadcn-style:

# Initialize your project
npx solana-ui-stack init

# Add components you need
npx solana-ui-stack add connect-wallet-button
npx solana-ui-stack add address-display
npx solana-ui-stack add swap-component

# List all available components
npx solana-ui-stack list

This copies component source code into your project, giving you full control to customize.

Option 2: Package Import

Install the full package:

# Install with pnpm (recommended)
pnpm add solana-ui-stack

# Or npm
npm install solana-ui-stack

# Or yarn
yarn add solana-ui-stack

Import and use:

import { ConnectWalletButton, AddressDisplay } from 'solana-ui-stack'
import 'solana-ui-stack/styles.css'

export default function App() {
  return (
    <div>
      <ConnectWalletButton variant="default" />
      <AddressDisplay address="So11...1112" />
    </div>
  )
}

CLI Commands

npx solana-ui-stack init              # Configure your project
npx solana-ui-stack add <component>   # Add component(s)
npx solana-ui-stack list              # List available components

Available Components

Wallet

• connect-wallet-button - Wallet connection button with modal
• address-display - Formatted address with copy & explorer links
• wallet-select-modal - Wallet selection modal
• wallet-provider - React context provider for wallet

Trading

• swap-component - Jupiter-powered token swap interface

UI

• button - Button with variants
• dialog - Modal dialog
• tooltip - Tooltip component

Hooks

• use-wallet - Wallet connection state & actions
• use-jupiter-price - Token price fetching
• use-jupiter-tokens - Token list fetching

Package Exports

Components

import {
  ConnectWalletButton,
  WalletSelectModal,
  AddressDisplay,
  SwapComponent,
  WalletProvider,
} from 'solana-ui-stack'

Hooks

import {
  useWallet,
  useJupiterSwap,
  useJupiterPrice,
  useJupiterTokens,
  useTheme,
} from 'solana-ui-stack/hooks'

Utilities

import {
  cn,
  formatAddress,
  copyToClipboard,
  getAddressExplorerUrl,
  getTxExplorerUrl,
} from 'solana-ui-stack/utils'

Requirements

• React 18+ or React 19
• Node.js 18+
• pnpm, npm, or yarn

Peer dependencies

pnpm add @solana/web3.js @solana/wallet-adapter-react @solana/wallet-adapter-react-ui @solana/wallet-adapter-wallets @solana/wallet-adapter-base

Development

# Clone the repo
git clone https://github.com/0xNyk/uistack-sh.git
cd uistack-sh

# Install dependencies (pnpm required)
pnpm install

# Start development server
pnpm dev

# Build everything (library + CLI + registry)
pnpm build:all

# Run tests
pnpm test

Tech stack

• Next.js 16 – App router, React Server Components
• React 19 – Latest React with concurrent features
• TypeScript 5 – Full type safety
• Tailwind CSS 4 – Utility-first styling
• Shadcn/ui – Accessible component primitives
• Radix UI – Headless accessible components
• Class Variance Authority – Type-safe variant styling

License

MIT © 0xNyk