Type overrides

Extend Bridge UI TypeScript types for custom tokens and provider config.

Bridge UI uses empty override interfaces and declaration merging so you can add custom prop values and tighten provider config types without forking the library.

There are two layers:

1. Prop overrides — ButtonColorOverrides, ButtonSizeOverrides, … on the framework package. They enlarge unions like color and size.
2. Config overrides — ButtonConfigOverrides, … on @bridge-ui/core. Framework packages ship augments.d.ts that fills classes and defaultProps with framework-specific types.

Load framework augments

augments.d.ts wires @bridge-ui/core config interfaces to React or Vue component types. Include it once in your project so components.Button.classes is typed as ButtonClasses.

Create src/bridge-ui.d.ts (or similar):

/// <reference path="../node_modules/@bridge-ui/vue/dist/augments.d.ts" />

export {};

/// <reference path="../node_modules/@bridge-ui/react/dist/augments.d.ts" />

export {};

Adjust the relative path so it points at node_modules/@bridge-ui/<framework>/dist/augments.d.ts, and ensure that file is part of your TypeScript include.

After that, provider config gets precise classes and defaultProps keys for each component.

Prop overrides for custom tokens

When you register a new token with tokens, augment the matching override interface so TypeScript accepts the new value:

import "@bridge-ui/vue";

declare module "@bridge-ui/vue" {
  interface ButtonColorOverrides {
    brand: true;
  }

  interface ButtonRoundedOverrides {
    pill: true;
  }
}

export {};

import "@bridge-ui/react";

declare module "@bridge-ui/react" {
  interface ButtonColorOverrides {
    brand: true;
  }

  interface ButtonRoundedOverrides {
    pill: true;
  }
}

export {};

MergeProps turns keys on the override interface into allowed prop values, so color="brand" and rounded="pill" type-check.

Other common interfaces: ButtonSizeOverrides, ButtonVariantOverrides, ButtonDensityOverrides, and the same pattern on Avatar, Badge, Alert, FormField, and so on.

Extending config overrides further

You can deepen config typing the same way the framework does—by merging into @bridge-ui/core:

declare module "@bridge-ui/core" {
  interface ButtonConfigOverrides {
    // example: lock defaultProps.color to your brand token only
    defaultProps: {
      color?: "brand" | "primary";
    };
  }
}

export {};

Overwrite replaces matching keys on the base config, so only ship the fields you intend to redefine.

Checklist

Related

• Tokens — runtime token registration
• Default props — app-wide defaults
• Classes — slot class maps