API

DefaultsProvider

Gives every component below it default prop values. Renders no element of its own.

Props

Name	Type	Description
`defaults`	`DefaultsConfig`	Defaults for this subtree. global reaches every component that has the prop; a key per component name targets one component. Merged over any outer provider, key by key. Reactive.
`children`	`Snippet`	The content that receives the defaults. The provider renders no element.

Types

Name	Type	Description
`DefaultsConfig`	`{ global?: GlobalDefaults } & { [Name in keyof ComponentDefaults]?: Partial<…> }`	What a DefaultsProvider takes. Unknown component names and values are type errors.
`GlobalDefaults`	`Pick<SharedProps, "variant" \| "density" \| "size" \| "color" \| "rounded" \| "disabled">`	Defaults that reach every component which declares the prop.
`ComponentDefaults`	`interface`	Per-component defaults keyed by component name. Sveltier’s components register here, and so can yours, by declaration merging.

Example

Nested providers

<DefaultsProvider defaults={{ global: { size: 'sm' } }}>
  <Toolbar />

  <!-- Inner values win, key by key: size becomes lg, PriceTag gets its colour. -->
  <DefaultsProvider defaults={{ global: { size: 'lg' }, PriceTag: { color: 'up' } }}>
    <Hero />
  </DefaultsProvider>
</DefaultsProvider>

See Defaults for how values resolve and how to register your own components.