Bridge UI

Default props

Set app-wide default props for Bridge UI components.

Every Bridge UI component ships with library defaults (for example Button uses color="primary", size="md", variant="solid"). Override those defaults once in the provider so every instance inherits them unless you pass a prop.

Configure the provider

Pass components.<Name>.defaultProps to BridgeUIProvider:

<script setup lang="ts">
import { BridgeUIProvider } from "@bridge-ui/vue";
</script>

<template>
  <BridgeUIProvider
    :components="{
      Modal: {
        defaultProps: {
          size: 'lg',
          blur: 'sm',
          transition: 'fade',
        },
      },
      Button: {
        defaultProps: {
          rounded: 'lg',
          color: 'secondary',
          variant: 'outline',
        },
      },
      Snackbar: {
        defaultProps: {
          duration: 4000,
          progressbar: true,
          position: 'top-end',
        },
      },
    }"
  >
    <slot />
  </BridgeUIProvider>
</template>

import { BridgeUIProvider } from "@bridge-ui/react";
import type { PropsWithChildren } from "react";

export default function DefaultProps({ children }: PropsWithChildren) {
  return (
    <BridgeUIProvider
      components={{
        Modal: {
          defaultProps: {
            size: "lg",
            blur: "sm",
            transition: "fade",
          },
        },
        Button: {
          defaultProps: {
            rounded: "lg",
            color: "secondary",
            variant: "outline",
          },
        },
        Snackbar: {
          defaultProps: {
            duration: 4000,
            progressbar: true,
            position: "top-end",
          },
        },
      }}
    >
      {children}
    </BridgeUIProvider>
  );
}

On Vue you can also pass the same shape to createBridgeUI() in your plugin; the provider merges with those options.

Form density defaults

Set global.formDefaults to apply shared size and rounded across form controls—TextField, Select, Checkbox, Slider, OtpField, Autocomplete, NumberField, PasswordField, Textarea, Radio, and Switch.

<script setup lang="ts">
import { BridgeUIProvider } from "@bridge-ui/vue";
</script>

<template>
  <BridgeUIProvider :global="{ formDefaults: { size: 'lg', rounded: 'md' } }">
    <slot />
  </BridgeUIProvider>
</template>

import type { PropsWithChildren } from "react";

import { BridgeUIProvider } from "@bridge-ui/react";

export default function FormDefaults({ children }: PropsWithChildren) {
  return (
    <BridgeUIProvider
      global={{
        formDefaults: { size: "lg", rounded: "md" },
      }}
    >
      {children}
    </BridgeUIProvider>
  );
}

Radio and Switch receive size only—their rounded stays shape-driven (full) unless you override it per component via defaultProps or instance props.

Merge order

For each prop, Bridge UI merges (later wins):

  1. Library defaults

    Hard-coded in the component.

  2. formDefaults

    From global.formDefaults — form controls only.

  3. defaultProps

    From components on the provider (and Vue plugin).

  4. Instance props

    What you pass on <Button /> / <Button> (wins).

// Library → formDefaults → components.TextField.defaultProps → instance
// Provider sets formDefaults.size="lg" and TextField defaultProps.variant="filled"
<TextField label="Name" />
{/* Uses lg + filled */}
<TextField label="Email" size="sm" variant="outline" />
{/* Uses sm + outline */}

Global options

global configures shared app settings (not visual tokens):

Key Type Default Description
theme string "light" Theme name
locale string "en-US" Locale
direction "ltr" | "rtl" "ltr" Text direction
formDefaults BridgeUIFormDefaults — Shared size / rounded for form controls
icons IconAdapter — Icon adapter (Icons)
i18n I18nAdapter — i18n adapter (i18n) 
<BridgeUIProvider
  components={{}}
  global={{
    locale: "pt-BR",
    direction: "rtl",
    formDefaults: { size: "lg", rounded: "md" },
  }}
>
  {children}
</BridgeUIProvider>

Which keys are available?

Each component exposes a typed subset under defaultProps (for example Button: color, density, rounded, size, variant). See each component API table for the full list, or Type overrides for how Framework packages refine those types.

Next steps

  • Classes — shared class slots from the provider
  • Tokens — add new token values you can set as defaults
  • Type overrides — stronger typing for defaultProps