Skip to main content

ComponentDefaults

Utility provider that sets the default control size for every control below it.

import { ComponentDefaults } from "@/fragments/ui";Source

Preview

<ComponentDefaultsProvider controlSize="sm">
  <div style={{ display: 'flex', gap: '8px' }}>
    <Button variant="soft">Filter</Button>
    <Button variant="ghost">Export</Button>
  </div>
</ComponentDefaultsProvider>

Installation

npx @usefragments/cli add componentdefaults

Writes src/fragments/ui/components/ComponentDefaults plus what it imports, the globals stylesheet, and .fragments/registry-lock.json, then prints the packages to add. No account, no key.

Your own registry: publish from Fragments Cloud and add --registry org/name. Connect a workspace.

Examples

Nested Override

A nested provider narrows the default for one region.

<ComponentDefaultsProvider controlSize="lg">
  <Button>Large by default</Button>
  <ComponentDefaultsProvider controlSize="sm">
    <Button>Small in this region</Button>
  </ComponentDefaultsProvider>
</ComponentDefaultsProvider>

API

Component props
Prop
Type
Default
Description
childrenRequirednodeNot setSubtree that inherits the defaults
controlSizeenumsmmdlgNot setDefault size for controls that do not pass their own size prop
valueobjectNot setFull defaults object; explicit controlSize wins over value.controlSize

Accessibility

  • sm controls still meet the kit's minimum target size through the action recipe

Guidance

Use when

  • A region needs every control at one size (dense table toolbars, compact sidebars)
  • A ThemeProvider subtree should default to sm or lg controls

Avoid when

  • Sizing a single control (pass its size prop)
  • Changing spacing or typography (use tokens, not control size)

Related

  • ThemeparentThemeProvider accepts componentDefaults and mounts this provider
  • ButtonchildControls resolve their size through useResolvedControlSize

Next steps