BlocksProvider
A context provider that configures all descendant components. Set global defaults for slotClasses per component type, or switch all components to unstyled mode at once.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
unstyled | boolean | false | Strip all default styles from all child components. They render only their HTML structure. |
defaults | Record<string, { slotClasses?: …; overrides?: ConditionalOverride[] }> | {} | Per-component defaults. slotClasses apply to every instance; overrides are prop-conditional rules (e.g. only variant="outlined"). Keys are component names (e.g. "Button", "Card"). |
presets | Record<string, Record<string, { slotClasses?: …; overrides?: ConditionalOverride[] }>> | {} | Named looks per component, opt-in via the preset="name" prop. Each preset may carry its own conditional overrides. Useful for reusable variants beyond the semantic intent palette. |
children | Snippet | - | Child content (your app). |
Global Component Defaults
Pass per-component slotClasses via the defaults prop.
Every instance of that component type inherits the classes. Instance-level slotClasses are merged
on top (both class lists apply).
Setting global defaults
Merge Behavior
Global defaults and instance overrides are merged per slot. Conflicting Tailwind utilities are
resolved by bucket — a later source in the chain wins (e.g. an instance rounded-none defeats a default rounded-full); non-conflicting classes accumulate.
Override behavior
tv()variant styles (library default)defaults.slotClasses(unconditional)defaults.overrides(prop-conditional)presets[name].slotClasses/.overrides- Instance
slotClassesprop - Instance
classprop
Presets
defaults apply globally to every instance. Presets are different: register named looks once,
then opt-in per component via the preset="name" prop. Use this when the requested look falls outside the semantic intent palette but should stay
reusable across the project — round-icon tiles, interactive stat cards, brand spinners, compact
toolbars, etc.
class? - Reusable — define once, opt-in everywhere with a short name.
- Maintains slot-level control — hover/focus/dark-mode logic stays inside the
slotClassesmap, not scattered across instance class strings. - Compose with intent — a card with
preset="stat-card"still honorsintent,size, etc.
Three curated presets
The full type definition for PresetMap:
PresetMap type
preset="foo" but no entry exists in presets[ComponentName].foo, the resolver logs a console warning
(development only). The component falls back to its default look.Conditional Defaults (overrides)
slotClasses apply to every instance regardless of variant. When a rule must target a specific
variant / intent / state — e.g. a 1px border only on the outlined variant — use overrides. Each
entry is a compoundVariant-shaped matcher (prop conditions →
per-slot classes); on a match its classes join the cascade, where the tv() conflict resolver strips the library's conflicting class
(here the outlined variant's border-2).
Style only the outlined variant
slotClasses— unconditional, every instance.preset— opt-in per instance viapreset="name"; for reusable named looks.overrides— automatic but prop-conditional; for "only this variant/state" rules.
Global Unstyled Mode
Set unstyled to strip
all default styles from every component. They render their HTML structure but no visual styling.
This is useful when building a completely custom design system on top of Urbicon UI components.
Unstyled mode
Combine unstyled with defaults to build a
complete custom design system:
Unstyled + custom defaults (Brutalist example)
Slot Names Reference
Each component defines its own set of named slots. Use the API reference for each component to
see its available slot names, or check the slotClasses type in
the Props interface.