Examples Hub

Capsule is moving towards a monorepo structure for our examples, making it easier for developers to find and use the integration patterns they need. Our new examples monorepo is organized into two primary folders:

1. packages/integration-examples: This shared folder contains components across frameworks. The packages/integration-examples/src/examples/ directory houses individual example files, each demonstrating an end-to-end step-by-step example for different actions you might want to execute with Capsule. These range from manual authentication via email or OAuth to setting up wallet connectors like Web3-Onboard or Leap Social Login. Our goal is to provide comprehensive E2E example files for the various flows a developer might implement using our SDK packages.

2. examples/: This folder contains framework-specific subfolders (e.g., nextjs-app, react-app, vite-app). Each subfolder includes the necessary configurations for compilation and bundling, which are often crucial for getting started with our libraries in each framework. Despite the framework-specific configs, all these app examples share the same components, ensuring consistency across different setups.

You can find our examples monorepo on GitHub.

We've also deployed a live demo of the compiled react-app for you to explore and test.

React Demo App - NFT Mint Site

In addition to our examples monorepo, we've created an example NFT demo app that showcases a simple NFT mint site using the Capsule modal. This interactive demo serves as a quick way to test out basic Capsule functionality in a real-world scenario.

We've also hosted an example for you to try out. You can test the live app or view the source code on Github.

[The main introduction remains unchanged]

Capsule Web Examples

Our Capsule Web Examples showcase how to integrate Capsule across various popular web development frameworks and setups. These examples demonstrate best practices for incorporating Capsule into different environments, from server-side rendering with Next.js to fast development with Vite. Each example is designed to provide a clear starting point for developers working with different tech stacks.

All React-based examples (Next.js, PWA, React, and Vite) share components from the packages/integration-examples directory, ensuring consistency across different React setups. The Vue example remains separate due to its distinct framework.

Next.js App

Built with Next.js, utilizing Server-Side Rendering and Tailwind CSS

PWA App

Progressive Web App built with Create React App

React App

Standard React application built with Create React App and Tailwind CSS

Vite App

React application built with Vite for faster development and building

Vue Example

Standalone Vue.js example with custom UI

Mobile Examples

Capsule provides SDK support for React Native, Flutter, and Swift, offering native experiences for mobile app development. These Mobile SDKs are primarily designed for manual integration, allowing developers to customize their flows without relying on a Capsule modal.

React Native - Expo

Includes examples across Ethers, Viem, and React Native versions

React Native

Includes examples across Ethers, Viem, and React Native versions

Flutter

Includes Native Passkeys

Swift SDK

Example for iOS integration

Wallet Pregeneration

Wallet pregeneration is a feature that allows developers to create app-specific wallets using any string identifier, such as an email or username. If the app chooses, users can then claim these pre-generated wallets for themselves, enabling them to carry their wallet across multiple apps.

Wallet Pregeneration

Includes a no-ui example of registering and claiming pregenerated wallets

For Cosmos, please reference the Cosmos Quickstart #examples

Remember, you can find framework-specific configurations in each framework's folder within the examples monorepo. For guidance on implementing various flows with Capsule SDKs, refer to any of the examples tutorials provided above.