Skip to content

Comments

feat(components): introduce Solana wallet UI component library#159

Open
cxalem wants to merge 2 commits intosolana-foundation:mainfrom
Kronos-Guild:pr/upstream-phase2-components
Open

feat(components): introduce Solana wallet UI component library#159
cxalem wants to merge 2 commits intosolana-foundation:mainfrom
Kronos-Guild:pr/upstream-phase2-components

Conversation

@cxalem
Copy link

@cxalem cxalem commented Feb 23, 2026

Summary

This PR introduces a new packages/components workspace with reusable, token-driven wallet UI building blocks and docs pages for setup and usage.

Included

  • Add packages/components with themed UI primitives and composites:
    • Foundation: Skeleton, AddressDisplay
    • Layout: DashboardShell, TransactionToast
    • Data: BalanceCard, TransactionTable
    • Input/Network: SwapInput, NetworkSwitcher
    • Wallet flows: ConnectWalletButton, WalletModal
  • Add Storybook stories and Vitest coverage for the components package.
  • Add component docs pages:
    • apps/docs/content/docs/components.mdx
    • apps/docs/content/docs/guides/01-getting-started.mdx
    • apps/docs/content/docs/guides/02-transaction-toasts.mdx
    • apps/docs/content/docs/guides/03-wallet-ui.mdx
  • Add packages/components/README.md with integration and API guidance.

How to run locally

pnpm install
pnpm --filter components lint
pnpm --filter components exec vitest run
pnpm --filter components build

Suggested review order

  1. packages/components/src/index.css (theme tokens and semantic mapping)
  2. packages/components/src/kit-components/ui/address-display and packages/components/src/kit-components/ui/skeleton
  3. packages/components/src/kit-components/ui/dashboard-shell and packages/components/src/kit-components/ui/transaction-toast
  4. packages/components/src/kit-components/ui/balance-card and packages/components/src/kit-components/ui/transaction-table
  5. packages/components/src/kit-components/ui/swap-input and packages/components/src/kit-components/ui/network-switcher
  6. packages/components/src/kit-components/ui/connect-wallet-button and packages/components/src/kit-components/ui/wallet-modal
  7. packages/components/README.md and docs pages under apps/docs/content/docs/

Validation

  • pnpm --filter components lint
  • pnpm --filter components exec vitest run ✅ (186 tests)
  • pnpm --filter components build

Screenshots / Videos

Screenshot 2026-02-23 at 8 57 38 PM
Screen.Recording.2026-02-23.at.9.00.02.PM.mov

Live components showcase:

https://framework-kit-e2e-visual.vercel.app/ (RPC working on mainnet)

Introduce the  workspace with themed, reusable wallet UI primitives (address, balance, network, swap, transaction, toast, and modal flows) plus Storybook stories and tests.

Add docs app pages and README usage guidance so maintainers can run, review, and integrate the components quickly.
@vercel
Copy link

vercel bot commented Feb 23, 2026

@cxalem is attempting to deploy a commit to the Solana Foundation Team on Vercel.

A member of the Team first needs to authorize it.

@cxalem cxalem changed the title feat(components): add reusable wallet UI component package feat(components): introduce Solana wallet UI component library Feb 23, 2026
Use less aggressive hover backgrounds for disconnected and connected button variants to preserve label readability in both light and dark themes.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant