Skip to main content
Install Logo.dev’s React components with one shadcn CLI command. Each component lands in your project as code you own, with fallbacks, retina images, dark mode, and key handling already wired.
Get your publishable key from the Logo.dev dashboard to get started.

​
Install a component

In any project set up with shadcn/ui, install from the registry URL:
Or install from the logo-dev/logo-api repo, pinned to a branch, tag, or commit:
The CLI copies the source into your project, installs any shadcn primitives the component composes, and adds the environment variables it needs to .env.local:
  • NEXT_PUBLIC_LOGO_DEV_TOKEN: your publishable key, safe in client code. Every component reads it.
  • LOGO_DEV_SECRET_KEY: your secret key, server-only. Only brand-search needs it.
Both come from the dashboard.

​
What’s in the registry

Render a logo from any identifier your data already has:
theme="auto" (the default) renders light and dark variants toggled by Tailwind’s dark: variant, so the right logo shows in both color schemes without a theme provider. fallback controls what renders when no logo exists: the API’s generated monogram (default), a local initials tile, or any React node you pass.

​
Logo Avatar

Drop a logo into account lists and transaction feeds:
Let users pick their company by typing a name:
Typing is debounced at 200ms with stale requests aborted, and each suggestion shows the company’s logo. The install includes app/api/logo-dev/search/route.ts, a Next.js route that proxies the Search API so your secret key never reaches the browser. Not on Next.js? Recreate that proxy in your backend and pass its path via the endpoint prop.
The proxy route ships without authentication, so anyone who can reach it can spend your Search API quota. Add rate limiting or your own auth before you deploy it to production.

​
Logo Wall

Build a customer logo grid from a list of domains:
Logos render muted grayscale and regain color on hover. The wall includes the Logo.dev attribution link by default, which free plans require in production. On a paid plan, turn it off with attribution={false}.

​
Requirements

The components target React 19 (React 18.3 works, without ref forwarding) and Tailwind CSS v4 with shadcn/ui tokens. They have zero npm dependencies of their own: shadcn primitives like avatar, command, and popover install from ui.shadcn.com as needed.

​
Next steps

Use cases

The patterns these components implement, with live demos.

logo-dev/logo-api

Component source, issues, and contributions.