> ## Documentation Index
> Fetch the complete documentation index at: https://www.logo.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Add Logo.dev components with shadcn/ui

> Install production-ready Logo.dev React components with the shadcn CLI: logo images with fallbacks, company autocomplete, logo walls, and attribution.

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.

<Note>
  Get your publishable key from the [Logo.dev
  dashboard](https://www.logo.dev/dashboard/api-keys) to get started.
</Note>

## Install a component

In any project set up with [shadcn/ui](https://ui.shadcn.com), install from the registry URL:

```bash theme={null}
npx shadcn@latest add https://www.logo.dev/r/logo.json
```

Or install from the [logo-dev/logo-api](https://github.com/logo-dev/logo-api) repo, pinned to a branch, tag, or commit:

```bash theme={null}
npx shadcn@latest add logo-dev/logo-api/logo
```

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](https://www.logo.dev/dashboard/api-keys).

## What's in the registry

| Component    | Install name   | What it does                                                                                                                         |
| ------------ | -------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| Logo         | `logo`         | A logo that never breaks: domain, name, ticker, crypto, or ISIN lookup with retina srcSet, dark-mode variants, and layered fallbacks |
| Logo Avatar  | `logo-avatar`  | A logo in a shadcn Avatar shell with initials fallback, for CRM rows and transaction feeds                                           |
| Brand Search | `brand-search` | Company autocomplete backed by the [Search API](/brand-search/introduction), plus a server route that keeps your secret key private  |
| Logo Wall    | `logo-wall`    | A customer or integration logo grid with grayscale-to-color hover                                                                    |
| Attribution  | `attribution`  | The [attribution link](/platform/attribution) free plans require in production                                                       |
| Logo lib     | `logo-lib`     | The typed URL builder underneath all of the above, useful on its own                                                                 |

## Logo

Render a logo from any identifier your data already has:

```tsx theme={null}
import { Logo } from "@/components/ui/logo";

<Logo domain="stripe.com" size={40} />
<Logo ticker="AAPL" label="Apple" size={40} />
<Logo domain="acme.dev" fallback="initials" size={40} />
```

`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:

```tsx theme={null}
import { LogoAvatar } from "@/components/ui/logo-avatar";

<LogoAvatar domain="stripe.com" size={32} />
<LogoAvatar ticker="AMZN" label="Amazon" size={32} />
```

## Brand Search

Let users pick their company by typing a name:

```tsx theme={null}
import { BrandSearch } from "@/components/brand-search";

<BrandSearch onSelect={(brand) => save(brand.domain)} />
```

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.

<Warning>
  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.
</Warning>

## Logo Wall

Build a customer logo grid from a list of domains:

```tsx theme={null}
import { LogoWall } from "@/components/logo-wall";

<LogoWall brands={["stripe.com", "vercel.com", "linear.app", "notion.so"]} />
```

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](/platform/attribution). 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

<CardGroup cols={2}>
  <Card title="Use cases" icon="lightbulb" href="/use-cases/introduction">
    The patterns these components implement, with live demos.
  </Card>

  <Card title="logo-dev/logo-api" icon="github" href="https://github.com/logo-dev/logo-api">
    Component source, issues, and contributions.
  </Card>
</CardGroup>