🌟 stellar-component-kit

A headless, accessible, and fully-typed React UI component library for building production-grade Stellar dApps — faster.

---

Overview

stellar-component-kit provides a curated set of composable React primitives purpose-built for the Stellar blockchain ecosystem. From wallet connection flows to transaction status toasts and asset balance cards, every component is:

• Headless-first — bring your own styles or use the included Tailwind theme
• Fully typed — comprehensive TypeScript generics throughout
• Wallet-agnostic — unified hook abstracts Freighter, xBull, and Lobstr
• Accessible — WCAG 2.1 AA compliant with ARIA attributes built in

---

Technical Architecture

Stack Overview

Layer	Technology
UI Framework	React 18 + TypeScript
Styling	Tailwind CSS + CVA (class-variance-authority)
Wallet Layer	@stellar/freighter-api + stellar-wallets-kit
Dev Environment	Storybook 8
Testing	Vitest + React Testing Library
Monorepo	Turborepo + pnpm workspaces
Publishing	Changesets + NPM

Component Tiers

• Atoms — WalletButton, AssetBadge, AddressChip, NetworkPill
• Molecules — ConnectWalletModal, TransactionStatusCard, AssetBalanceRow
• Organisms — WalletProviderShell, TransactionHistoryTable, SendPaymentForm

---

🌊 Drips Wave Program

This repository is an active participant in the Drips Wave Program — a decentralized funding platform that rewards open-source contributors for solving scoped GitHub issues.

How to Contribute & Earn Rewards

Follow these steps to claim an issue and earn rewards:

Step 1 — Connect to Drips Visit drips.network and connect your Ethereum wallet (MetaMask or WalletConnect). Your wallet address is your contributor identity on the platform.

Step 2 — Find This Project on Drips Search for stellar-component-kit in the Drips project registry, or follow the direct project link pinned in this repo's GitHub description.

Step 3 — Browse Funded Issues Open the Issues tab in this repository. Funded issues are tagged with one of three complexity labels:

Label	Complexity	Typical Reward Range
drips:trivial	Trivial	$10 – $50
drips:medium	Medium	$51 – $200
drips:high	High	$201 – $500+

Step 4 — Claim an Issue Comment /claim on the GitHub issue you want to work on. The maintainer will assign it to you. Do not begin work on unclaimed issues.

Step 5 — Submit Your Work Open a Pull Request referencing the issue number (Closes #XX). Ensure all tests pass and the Storybook story is updated for any UI change.

Step 6 — Get Paid Once your PR is merged, the maintainer triggers the Drips payout. Rewards are streamed directly to your connected wallet — no invoices, no middlemen.

💡 New to open source? Start with drips:trivial issues to get familiar with the codebase before tackling larger bounties.

---

Project Structure

stellar-component-kit/
├── packages/
│   ├── components/
│   │   ├── src/
│   │   │   ├── atoms/          # Smallest reusable UI units
│   │   │   ├── molecules/      # Composed multi-atom components
│   │   │   └── organisms/      # Full feature-level UI sections
│   │   └── tests/              # Vitest unit & snapshot tests
│   └── themes/
│       └── src/                # Tailwind theme config & CSS vars
├── docs/                       # Storybook static build output
├── scripts/                    # Release & codegen automation
├── .github/
│   └── workflows/              # CI: lint, test, publish
├── package.json                # Root workspace manifest
└── README.md

---

Getting Started

# Clone the repo
git clone https://github.com/Opeyemi01-del/stellar-component-kit.git
cd stellar-component-kit

# Install dependencies (requires pnpm)
pnpm install

# Start Storybook dev server
pnpm storybook

# Run all tests
pnpm test

# Build all packages
pnpm build

---

Contributing

Please read CONTRIBUTING.md before opening a PR. All contributors must follow our Code of Conduct.

---

License

MIT © stellar-component-kit contributors