UIProvider TypeScript helper for React
v1.0.0Added in 1.0.0
A React config provider for Wingo UI: app-wide default props for every component, the Intl locale and a reduced-motion policy.
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.
UIProvider is a free React helper in the React hooks and utilities category, written in TypeScript for React 19. It installs as source with npx wingo-ui@latest add ui-config.
Add to a project
Requirements: React 19, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup
npx wingo-ui@latest add ui-configUsage
Import UIProvider from @/lib/ui-config.
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
defaultsRecord<string, Record<string, unknown>>Default props per component, keyed by data-slot name, e.g. { button: { size: "lg", radius: "full" } }.
localedefault""stringIntl locale that locale-aware components read through useUIConfig().locale (e.g. "en-GB"). Empty leaves it to the component or an outer provider.
reducedMotiondefault"user""user" | "always" | "never"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.
inheritdefaulttruebooleanMerge with an outer UIProvider instead of replacing it, so a section can override a few defaults.
Parts
useDefaults
hookUsed inside components: merges provider defaults under the received props (undefined props do not override). Signature: <P>(name: string, props: P) => P.
useUIConfig
hookReads the merged config (defaults, locale, reducedMotion). Signature: () => UIConfig.
UIConfig
type{ defaults?, locale?, reducedMotion? }: the config a provider holds and useUIConfig returns.
UIProviderProps
typeProps of UIProvider: UIConfig plus children and inherit.
ComponentDefaults
typeDefault 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.
Dependencies
No dependencies beyond React.
Files
- lib/ui-config.tsx
FAQ
Is the UIProvider helper free?
Yes. The source is free and needs no account: copy it from the Code tab or install it with the CLI.
How do I install UIProvider?
Run npx wingo-ui@latest add ui-config. With shadcn, run npx shadcn@latest add https://wingo-ui.com/r/ui-config.json.
See also
Used in
More React hooks and utilities
Articles using this component
- shadcn Tailwind v4 Migration: Step by Step From v3
Next.js and Tailwind CSS10 min read
- Tailwind v4 Nextjs 16 Setup: Config, Fonts and 5 Fixes
Next.js and Tailwind CSS9 min read
- Claude Code Design System: Make 50 Screens Match
Building UI with AI agents12 min read
- Next.js Component Library Setup for the App Router
Next.js and Tailwind CSS8 min read