Install official tech brand logos from the Elements registry. Use when user needs logos for tech companies (Clerk, Vercel, GitHub, etc.), AI providers (OpenAI, Anthropic, Claude), social platforms, or any brand assets. Triggers on "logo", "brand", "icon for [company]", "add [company] logo", placeholder logo detection, or when building landing pages, auth UIs, or integrations showcases.
Install official, theme-aware brand logos from the Elements registry.
npx shadcn@latest add @elements/{name}-logo
Examples: clerk-logo, github-logo, openai-logo, vercel-logo
Option A: Scan registry (if in elements repo)
ls registry/default/blocks/logos/ | sed 's/-logo$//'
Option B: Browse https://tryelements.dev/docs/logos
Logos install to components/logos/{name}.tsx:
import { ClerkLogo } from "@/components/logos/clerk"
<ClerkLogo className="h-8 w-auto" />
<ClerkLogo variant="wordmark" mode="dark" />
variant: "icon" | "wordmark"mode: "light" | "dark" (auto-detects theme)className: Standard className prop| Need | Command |
|---|---|
| All logos | @elements/logos |
| AI providers | @elements/ai-services |
| Social platforms | @elements/social-media |
| Package managers | @elements/package-managers |
# Auth stack
npx shadcn@latest add @elements/clerk-logo @elements/better-auth-logo
# AI models
npx shadcn@latest add @elements/openai-logo @elements/anthropic-logo @elements/claude-logo
# Social footer
npx shadcn@latest add @elements/twitter-logo @elements/github-logo @elements/discord-logo
# Tech stack
npx shadcn@latest add @elements/vercel-logo @elements/supabase-logo @elements/stripe-logo
If the logo doesn't exist in the registry, help the user request it:
Generate a pre-filled GitHub issue URL: