user-dropdown-1
A simple user dropdown best used in a navigation bar.
Installation
npx shadcn@latest add https://shadcn-ui-clerk-blocks.vercel.app/r/user-dropdown-1.jsonUsage
Basic
import UserDropdown1 from "@/components/user-dropdown-1";<UserDropdown1 />With Manual Fetching
Server
import UserDropdown1 from "@/components/user-dropdown-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 <UserDropdown1 user={formatUser(user)} />;
}Client
"use client";
import UserDropdown1 from "@/components/user-dropdown-1";
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 <UserDropdown1 user={user} />;
}Props
Prop
Type