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

# ais-powered-by

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

```vue Signature theme={"system"}
<ais-powered-by
  // Optional parameters
  theme="string"
  :class-names="object"
/>
```

## Import

<Tabs>
  <Tab title="Component">
    To ensure optimal bundle sizes,
    see [Optimize build size](/doc/guides/building-search-ui/going-further/improve-performance/vue#optimize-build-size).

    ```js Vue icon=code theme={"system"}
    import { AisPoweredBy } from "vue-instantsearch";
    // Use "vue-instantsearch/vue3/es" for Vue 3

    export default {
      components: {
        AisPoweredBy
      },
      // ...
    };
    ```
  </Tab>

  <Tab title="Plugin">
    This imports all widgets, even the ones you don't use.
    For more information, see [Get started with Vue InstantSearch](/doc/guides/building-search-ui/getting-started/vue).

    ```js JavaScript icon="code" theme={"system"}
    import Vue from "vue";
    import InstantSearch from "vue-instantsearch";
    // Use "vue-instantsearch/vue3/es" for Vue 3

    Vue.use(InstantSearch);
    ```
  </Tab>
</Tabs>

<Card title="See this widget in action" icon="monitor-play" href="https://instantsearchjs.netlify.app/stories/vue/?selectedKind=ais-powered-by" horizontal>
  Preview this widget and its behavior.
</Card>

## About this widget

The `ais-powered-by` widget is used to display the Algolia logo to redirect to the Algolia website.

[Algolia requires](https://www.algolia.com/policies/free-services-terms) that you use this widget if you're on a community plan (open source, not-for-profit, or [DocSearch](https://docsearch.algolia.com)).

## Examples

```vue Vue icon=code theme={"system"}
<ais-powered-by />
```

## Props

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

  ```vue Vue icon=code theme={"system"}
  <ais-powered-by theme="dark" />
  ```
</ParamField>

<ParamField body="class-names" type="object" default="{}">
  The [CSS classes you can override](/doc/guides/building-search-ui/widgets/customize-an-existing-widget/vue#style-your-widgets):

  * `ais-PoweredBy`. The root of the widget.
  * `ais-PoweredBy--light`. The root of the widget with the light theme.
  * `ais-PoweredBy--dark`. The root of the widget with the dark theme.
  * `ais-PoweredBy-link`. The link of the widget.
  * `ais-PoweredBy-logo`. The illustration of the widget.

  ```vue Vue icon=code theme={"system"}
  <ais-powered-by
    :class-names="{
      'ais-PoweredBy': 'MyCustomPoweredBy',
      'ais-PoweredBy--light': 'MyCustomPoweredByLight',
      // ...
    }"
  />
  ```
</ParamField>

## HTML output

```html HTML icon=code-xml theme={"system"}
<div class="ais-PoweredBy">
  <span class="ais-PoweredBy-text">Search by</span>
  <a href="..." class="ais-PoweredBy-link" aria-label="Algolia">
    <!-- <svg> ... </svg> -->
  </a>
</div>
```