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

# PoweredBy

> Shows the Algolia logo with a link to the Algolia homepage.

<Note>
  This is the **React InstantSearch v7** documentation.
  If you're upgrading from v6, see the [upgrade guide](/doc/guides/building-search-ui/upgrade-guides/react/#migrate-from-react-instantsearch-v6-to-react-instantsearch-v7).
  If you were using React InstantSearch Hooks,
  this v7 documentation applies—just check for [necessary changes](/doc/guides/building-search-ui/upgrade-guides/react/#migrate-from-react-instantsearch-hooks-to-react-instantsearch-v7).
  To continue using v6, you can find the [archived documentation](https://algolia.com/old-docs/deprecated/instantsearch/react/v6/api-reference/instantsearch/).
</Note>

```tsx Signature theme={"system"}
<PoweredBy
  // Optional props
  theme={'light' | 'dark'}
  classNames={object}
  ...props={ComponentProps<'div'>}
/>
```

## Import

```jsx JavaScript icon=code theme={"system"}
import { PoweredBy } from "react-instantsearch";
```

<Card title="See this widget in action" icon="monitor-play" href="https://instantsearchjs.netlify.app/stories/?path=/story/metadata-poweredby--default" horizontal>
  Preview this widget and its behavior.
</Card>

## About this widget

`<PoweredBy>` is a widget that lets you display the Algolia logo to redirect to the Algolia website.

[Algolia requires](https://www.algolia.com/policies/free-services-terms) that you display a
"Search by Algolia" logo with a link if you're on a community plan
(open source, not-for-profit, or [DocSearch](https://docsearch.algolia.com)).

<Tip>You can also create your own UI with [`usePoweredBy`](#hook).</Tip>

## Examples

```jsx JavaScript icon=code theme={"system"}
import React from "react";
import { liteClient as algoliasearch } from "algoliasearch/lite";
import { InstantSearch, PoweredBy } from "react-instantsearch";

const searchClient = algoliasearch("YourApplicationID", "YourSearchOnlyAPIKey");

function App() {
  return (
    <InstantSearch indexName="instant_search" searchClient={searchClient}>
      <PoweredBy />
    </InstantSearch>
  );
}
```

## Props

<ParamField body="theme" type="&#x22;light&#x22; | &#x22;dark&#x22;" default="light">
  The version of the logo to use, legible on light or dark backgrounds.

  ```jsx JavaScript icon=code theme={"system"}
  <PoweredBy theme="dark" />;
  ```
</ParamField>

<ParamField body="classNames" type="Partial<PoweredByClassNames>">
  The [CSS classes you can override](/doc/guides/building-search-ui/widgets/customize-an-existing-widget/react#style-your-widgets) and pass to the widget's elements.
  It's useful to style widgets with class-based CSS frameworks like [Bootstrap](https://getbootstrap.com) or [Tailwind CSS](https://tailwindcss.com).

  * `root`. The root element of the widget.
  * `light`. The root element of the widget with the light theme.
  * `dark`. The root element of the widget with the dark theme.
  * `link`. The link element.
  * `logo`. The SVG logo.

  ```jsx JavaScript icon=code theme={"system"}
  <PoweredBy
    classNames={{
      root: "MyCustomPoweredBy",
      link: "MyCustomPoweredByLink MyCustomPoweredByLink--subclass",
    }}
  />;
  ```
</ParamField>

<ParamField body="...props" type="React.ComponentProps<'div'>">
  Any `<div>` prop to forward to the root element of the widget.

  ```jsx JavaScript icon=code theme={"system"}
  <PoweredBy className="MyCustomPoweredBy" title="My custom title" />;
  ```
</ParamField>

## Hook

React InstantSearch let you create your own UI for the `<PoweredBy>` widget with `usePoweredBy`.
Hooks provide APIs to access the widget state and interact with InstantSearch.

The `usePoweredBy` Hook returns [APIs](#hook).

### Usage

First, create your React component:

```jsx JavaScript icon=code theme={"system"}
function CustomPoweredBy() {
  const { url } = usePoweredBy();

  return <>{/* Your JSX */}</>;
}
```

Then, render the widget:

```jsx JavaScript icon=code theme={"system"}
<CustomPoweredBy />
```

### APIs

Hooks return APIs, such as state and functions.
You can use them to build your UI and interact with React InstantSearch.

<ResponseField name="url" type="string">
  The URL to redirect to.
</ResponseField>

### Example

```jsx JavaScript icon=code theme={"system"}
import React from "react";
import { usePoweredBy } from "react-instantsearch";

function CustomPoweredBy() {
  const { url } = usePoweredBy();

  // Download the "Search by Algolia" logo for light and dark themes.
  // https://algolia.frontify.com/d/1AZwVNcFZiu7/style-guide#/basics/algolia-logo

  return <>{/* Your JSX */}</>;
}
```