---
title: useTranslations
description: Access the current language's translations for building custom consent UI.
---
`useTranslations()` returns the `Translations` object for the currently active language. Use it when building custom consent UI that needs translated text.

```tsx
import { useTranslations } from '@c15t/nextjs';

function CustomBanner() {
  const translations = useTranslations();

  return (
    <div>
      <h2>{translations.cookieBanner.title}</h2>
      <p>{translations.cookieBanner.description}</p>
      <button>{translations.common.acceptAll}</button>
      <button>{translations.common.rejectAll}</button>
    </div>
  );
}
```

## Translation Sections

The returned `Translations` object has these sections:

| Property             | Type                                                                                                                                                                                                                                                                                                                    | Description | Default |  Required  |
| :------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :------ | :--------: |
| common               | Partial\<CommonTranslations>                                                                                                                                                                                                                                                                                            |             | -       | ✅ Required |
| cookieBanner         | Partial\<CookieBannerTranslations>                                                                                                                                                                                                                                                                                      |             | -       | ✅ Required |
| consentManagerDialog | Partial\<ConsentManagerDialogTranslations>                                                                                                                                                                                                                                                                              |             | -       | ✅ Required |
| consentTypes         | \{ experience?: Partial\<ConsentTypeTranslations> \| undefined; functionality?: Partial\<ConsentTypeTranslations> \| undefined; marketing?: Partial\<ConsentTypeTranslations> \| undefined; measurement?: Partial\<ConsentTypeTranslations> \| undefined; necessary?: Partial\<ConsentTypeTranslations> \| undefined; } |             | -       | ✅ Required |
| frame                | Partial\<FrameTranslations> \| undefined                                                                                                                                                                                                                                                                                |             | -       |  Optional  |
| legalLinks           | Partial\<LegalLinksTranslations> \| undefined                                                                                                                                                                                                                                                                           |             | -       |  Optional  |
| iab                  | DeepPartial\<IABTranslations> \| undefined                                                                                                                                                                                                                                                                              |             | -       |  Optional  |

## With setLanguage

Translations update automatically when the language changes:

```tsx
import { useConsentManager, useTranslations } from '@c15t/nextjs';

function LocalizedConsent() {
  const { setLanguage } = useConsentManager();
  const translations = useTranslations();

  return (
    <div>
      <p>{translations.cookieBanner.description}</p>
      <button onClick={() => setLanguage('de')}>Deutsch</button>
      <button onClick={() => setLanguage('fr')}>Français</button>
    </div>
  );
}
```