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 in place.

Get your API keys

Your dashboard has a publishable key for the Logo.dev CDN and a secret key for the Logo.dev API. Every plan includes both.

​
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:
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.

​
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

Put a logo in 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 endpoint 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 API credits. 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 in muted grayscale and regain color on hover. The wall includes the Logo.dev attribution link by default. If your plan does not require attribution, 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.