Lens Blocks

Introduction

Lens Blocks is a Registry of useful social building blocks using the official Lens React SDK, wagmi, and shadcn/ui components.

The registry includes essentials like a wallet-aware login button (using wagmi), a rich post component (Markdown, mentions, reactions), a follow button, and a WYSIWYG composer/editor. Each block deeply integrates the Lens React SDK and handles wallet connection, signing, authentication, session lifecycle, optimistic updates, and state management out of the box.

Installation

Lens Blocks are installed on a component-by-component basis using the shadcn/ui CLI. As such, you'll need to have already set up a project with shadcn/ui. If you haven't done that yet, follow the installation instructions first:

You'll also need to set up the Lens React SDK and wagmi. If you haven't done that already, here is a basic setup using ConnectKit:

Install ConnectKit

Follow the instructions in the ConnectKit docs :

You'll end up with a Web3Provider that looks something like this:

export const Web3Provider = ({ children }) => {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <ConnectKitProvider>{children}</ConnectKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
};

Install Lens React SDK

Follow the instructions in the Lens React SDK docs:

You'll end up with a LensProvider that looks something like this:

<LensProvider client={client}>{children}</LensProvider>

Add the LensProvider to Web3Provider

Now you just have to combine the providers created above, and you should end up with a Web3Provider that looks something like this:

export const Web3Provider = ({ children }) => {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <ConnectKitProvider>
          <LensProvider client={client}>{children}</LensProvider>
        </ConnectKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
};

Now you can wrap your app with the Web3Provider and you'll be ready to use the Lens Blocks!