SizeContext

Quick Preview

Usage

<SizeProvider size="lg">
  <Input placeholder="Visitor name" />
  <Select>{/* trigger and items */}</Select>
  <Button>Create booking</Button>
</SizeProvider>

<SizeProvider size={{ base: "sm", md: "md", lg: "lg" }}>
  {/* Responsive controls without viewport hooks or hydration changes. */}
</SizeProvider>

SizeProvider directly provides its resolved size to nested controls. Omit the child size props so inputs, input groups, pickers, selects, fields, buttons, and other size-aware primitives stay aligned. Explicit child sizes still take precedence. DialogContent and SheetContent use the same provider internally.

Responsive sizes are mobile-first. base is required, md inherits from base when omitted, and lg inherits from the resolved md. Buttons, badges, match indicators, and the core form controls support responsive values directly and through SizeProvider. Input-family controls also retain their existing xl size.

Examples

Responsive component sizes

Resize this preview to test direct responsive sizes, component-specific button sizes, and inherited provider sizes together.

Direct provider form

Use SizeProvider outside a dialog or drawer when a form, card, or page section needs one control density. Switch the provider size to see every nested control change together.

Dialog forms

Open the compact sm status form and the fuller lg booking form. The forms deliberately omit control-level size props: the dialog controls supply the context.

Drawer forms

Open the sm assignment drawer and lg booking drawer to compare inherited sizing in a scrolling panel. Inputs, phone input groups, date/time pickers, selects, textareas, and footer buttons all follow the drawer size.

Props

Accessibility

• Provide visible labels or accessible names for interactive controls.
• Preserve the component-provided focus, keyboard, disabled, and invalid-state behavior.
• Do not communicate state with color alone; include text, icons, or helper copy.