# UIProvider

> A React config provider for Wingo UI: app-wide default props for every component, the Intl locale and a reduced-motion policy.

- Type: React helper (Hooks & Utilities)
- Access: Free (the source is open to everyone)
- Version: 1.0.0
- Install: `npx wingo-ui@latest add ui-config`
- Docs: https://wingo-ui.com/components/ui-config

## Interaction

Wrap the app once. Every Wingo UI component reads its defaults from the provider (keyed by its data-slot name), so a whole project can switch to large, fully rounded buttons or a de-DE locale in one place. Props passed directly to a component still win. In the demo, pick a locale or a motion policy and watch the readout card change, and turn inherit off to see the nested buttons drop the outer radius and tone.

## Installation

```bash
npx wingo-ui@latest add ui-config
```

The CLI adds the files, their dependencies and a version record for updates.

With shadcn: `npx shadcn@latest add https://wingo-ui.com/r/ui-config.json`

Files:

- `lib/ui-config.tsx`

## Usage

```tsx
import { UIProvider } from "@/lib/ui-config"

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <UIProvider
      locale="en-GB"
      defaults={{
        button: { radius: "full", size: "lg" },
        input: { variant: "filled" },
      }}
    >
      {children}
    </UIProvider>
  )
}
```

## API

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `defaults?` | `Record<string, Record<string, unknown>>` |  | Default props per component, keyed by data-slot name, e.g. { button: { size: "lg", radius: "full" } }. |
| `locale?` | `string` | `""` | Intl locale that locale-aware components read through useUIConfig().locale (e.g. "en-GB"). Empty leaves it to the component or an outer provider. |
| `reducedMotion?` | `"user" \| "always" \| "never"` | `"user"` | The reduced-motion policy stored in the config and readable through useUIConfig(): user follows prefers-reduced-motion, always or never force a choice for your own code. |
| `inherit?` | `boolean` | `true` | Merge with an outer UIProvider instead of replacing it, so a section can override a few defaults. |

## Parts

### useDefaults (hook)

Used inside components: merges provider defaults under the received props (undefined props do not override). Signature: <P>(name: string, props: P) => P.

### useUIConfig (hook)

Reads the merged config (defaults, locale, reducedMotion). Signature: () => UIConfig.

### UIConfig (type)

{ defaults?, locale?, reducedMotion? }: the config a provider holds and useUIConfig returns.

### UIProviderProps (type)

Props of UIProvider: UIConfig plus children and inherit.

### ComponentDefaults (type)

Default props per component, keyed by data-slot name: Record<string, Record<string, unknown>>.

## Examples

- **Defaults for a whole card**: One provider makes every button large and fully rounded. Props on a single button still win.
- **Nested section override**: A nested provider sets size sm. With inherit it keeps the outer radius and tone; without it, it starts fresh.
- **Locale for formatting**: Locale-aware components read useUIConfig().locale, so the same price prints as en-US or de-DE.

## See also

- [Button](https://wingo-ui.com/components/button) ([Markdown](https://wingo-ui.com/components/button.md))
- [useLocale](https://wingo-ui.com/components/use-locale) ([Markdown](https://wingo-ui.com/components/use-locale.md))
- [Motion presets](https://wingo-ui.com/components/motion) ([Markdown](https://wingo-ui.com/components/motion.md))
- [Input](https://wingo-ui.com/components/input) ([Markdown](https://wingo-ui.com/components/input.md))

---

Canonical: https://wingo-ui.com/components/ui-config
More components: https://wingo-ui.com/components · Index for agents: https://wingo-ui.com/llms.txt