# Utilities
> Helper components for conditional rendering, translations, and theming.
*Canonical: https://makerkit.dev/docs/tanstack-drizzle/ui-components/utilities*
---
Utility components for common patterns like conditional rendering, internationalization, and theme management.
## If
Conditional rendering component with type inference.
```typescript
import { If } from '@kit/ui/if';
```
```tsx
{/* Basic usage */}
}>
{/* With type inference */}
{(err) => }
{/* Render prop pattern */}
{(user) => }
```
## Trans
Translation component for internationalization.
```typescript
import { Trans } from '@kit/ui/trans';
```
```tsx
{/* Simple translation */}
{/* With variables */}
{/* With default text */}
{/* Rich text with components */}
,
PrivacyLink: ,
}}
/>
```
## Lazy Render
Lazy load content when visible using IntersectionObserver.
```typescript
import { LazyRender } from '@kit/ui/lazy-render';
```
```tsx
{/* With options */}
console.log('Component visible')}
>
```
## Error Boundary
Catch and handle React errors.
```typescript
import { ErrorBoundary } from '@kit/ui/error-boundary';
```
```tsx
Something went wrong
Please refresh the page.
}
>
```
## Stepper
Multi-step progress indicator.
```typescript
import { Stepper } from '@kit/ui/stepper';
```
```tsx
{/* Numbers variant */}
{/* Dots variant */}
```
## Mode Toggle
Dark/light theme switcher.
```typescript
import { ModeToggle } from '@kit/ui/mode-toggle';
```
```tsx
```
### Sub Menu Variant
```typescript
import { SubMenuModeToggle } from '@kit/ui/mode-toggle';
```
```tsx
```
### Theme Preference Card
```typescript
import { ThemePreferenceCard } from '@kit/ui/mode-toggle';
```
```tsx
```
Displays cards for Light, Dark, and System theme options. The `currentTheme` prop sets the initial theme value.
## Cookie Banner
GDPR cookie consent banner.
```typescript
import { CookieBanner, useCookieConsent } from '@kit/ui/cookie-banner';
```
```tsx
```
### Using Consent Hook
```tsx
const { status, accept, reject, clear } = useCookieConsent();
// status: 'unknown' | 'accepted' | 'rejected'
```
## Language Selector
Language/locale switcher.
```typescript
import { LanguageSelector, LanguagePreferenceCard } from '@kit/ui/language-selector';
```
```tsx
// Locale switching is handled internally (cookie-based via useChangeLocale).
// Optionally react to a change with onChange.
console.log('Selected locale:', locale)}
/>
```
### Language Preference Card
Card UI for language selection in settings pages.
```tsx
```
## cn Utility
Class name merging utility.
```typescript
import { cn } from '@kit/ui/utils';
```
```tsx
Content
```
---
**Next:** [Marketing →](./marketing)