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

# PoweredByNozle

> The "Powered by Nozle" badge, and the hook that says whether to show it.

`PoweredByNozle` renders "Powered by" and the Nozle logo as a link that opens nozle.dev in a new tab. From React `0.11.0`.

**When to use**

* Under a pricing page or billing screen you build with the hooks instead of the components.
* Together with `useNozleBranding()`, which returns whether to show the badge.

You do not need it with `PricingTable`, `PlanComparison`, `CurrentPlan`, `Checkout`, `UpgradeModal` or `BillingPortal`: they show the badge themselves. When one of them renders another, for example a dialog inside the portal, only the outer one shows it.

**Light**

![The Powered by Nozle badge, light theme](https://mintcdn.com/nozle-d78f01d8/8jEvxrWAvqijYzbo/images/react/components/powered-by-nozle/light.png?fit=max\&auto=format\&n=8jEvxrWAvqijYzbo\&q=85\&s=1abcf0f70a726bafd4b83dab7307574d)

**Dark**

![The Powered by Nozle badge, dark theme](https://mintcdn.com/nozle-d78f01d8/8jEvxrWAvqijYzbo/images/react/components/powered-by-nozle/dark.png?fit=max\&auto=format\&n=8jEvxrWAvqijYzbo\&q=85\&s=761229f995d3da2a899a865832c9fc37)

**Minimal**

![The Powered by Nozle badge, minimal theme](https://mintcdn.com/nozle-d78f01d8/8jEvxrWAvqijYzbo/images/react/components/powered-by-nozle/minimal.png?fit=max\&auto=format\&n=8jEvxrWAvqijYzbo\&q=85\&s=a61b0e06719d892fcf07ec334d9e6f0a)

**Neobrutal**

![The Powered by Nozle badge, neobrutal theme](https://mintcdn.com/nozle-d78f01d8/8jEvxrWAvqijYzbo/images/react/components/powered-by-nozle/neobrutal.png?fit=max\&auto=format\&n=8jEvxrWAvqijYzbo\&q=85\&s=64f1a9bb0cae7efff8bd584118f40293)

**Nozle**

![The Powered by Nozle badge, nozle theme](https://mintcdn.com/nozle-d78f01d8/8jEvxrWAvqijYzbo/images/react/components/powered-by-nozle/nozle.png?fit=max\&auto=format\&n=8jEvxrWAvqijYzbo\&q=85\&s=59400db9063a1194dacdf939814a8e49)

**Nozle Dark**

![The Powered by Nozle badge, nozleDark theme](https://mintcdn.com/nozle-d78f01d8/8jEvxrWAvqijYzbo/images/react/components/powered-by-nozle/nozle-dark.png?fit=max\&auto=format\&n=8jEvxrWAvqijYzbo\&q=85\&s=e628f0ac6905359308c9dd7ba47e1738)

## Importing PoweredByNozle

```tsx theme={null}
import { PoweredByNozle, useNozleBranding } from '@nozle-js/react'
```

## Rendering PoweredByNozle

Show the badge only when `useNozleBranding()` is `true`:

```tsx components/pricing-footer.tsx theme={null}
export function PricingFooter() {
  const branded = useNozleBranding()
  return branded ? <PoweredByNozle /> : null
}
```

The badge takes its look from the `appearance` of the surrounding `BillingProvider`, also when you render it on its own.

## Data

### Live data

Nozle decides on the server. The public plan catalog read with your publishable key returns `meta.nozle_branding`, and `useNozleBranding()` reads it from the same cached catalog request the components make. It returns `false` outside a `BillingProvider`, and until the catalog answers.

## API reference

`PoweredByNozle` takes no props.

**useNozleBranding()** `boolean`

`true` when the catalog's `meta.nozle_branding` is `true`. `false` when it is `false`, there is no `BillingProvider`, or the catalog has not answered.

### Appearance

> **Element keys**
>
> `poweredBy` (the link).
>
> Style them with `appearance.elements`. See [Elements](/sdks/react/styling#elements).

## Related

> **[PricingTable](/sdks/react/components/pricing-table)**
>
> Shows the badge below the plans.

> **[Appearance](/sdks/react/styling)**
>
> Themes and the `poweredBy` element.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.