Clerk Blocks

email-management-1

A simple email management card.

Email Addresses

AddressActions

Installation

npx shadcn@latest add https://shadcn-ui-clerk-blocks.vercel.app/r/email-management-1.json

Usage

Basic

import EmailManagement1 from "@/components/email-management-1";
<EmailManagement1 />

With Manual Fetching

Server

page.tsx
import EmailManagement1 from "@/components/email-management-1";
import { formatUser } from "@/lib/format-user";
import { currentUser } from "@clerk/nextjs/server";

export default async function Page() {
  const user = await currentUser();

  if (!user) return;

  return <EmailManagement1 user={formatUser(user)} />;
}

Client

page.tsx
"use client";

import EmailManagement1 from "@/components/email-management-1";
import { formatUser } from "@/lib/format-user";
import { useUser } from "@clerk/nextjs";

import { Spinner } from "@/components/ui/spinner";

export default function Page() {
  const { user, isLoaded } = useUser();

  if (!isLoaded) {
    return <Spinner />;
  }

  if (!user) return;

  return <EmailManagement1 user={formatUser(user)} />;
}

Props

Prop

Type