Classes

Override Bridge UI component class slots from the provider or per instance.

Most components accept a classes prop that targets internal parts (root, icon, label, …). You can set those slots once in the provider or on a single instance. Layers merge with Tailwind-aware concatenation so provider styles and instance styles compose.

Provider registry

Use components.<Name>.classes for app-wide slot defaults:

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

<template>
  <BridgeUIProvider
    :components="{
      Button: {
        classes: {
          root: 'uppercase tracking-wide',
        },
      },
      Alert: {
        classes: {
          root: 'border-l-4',
          title: 'font-semibold',
        },
      },
    }"
  >
    <slot />
  </BridgeUIProvider>
</template>

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

export default function ProviderClasses({ children }: PropsWithChildren) {
  return (
    <BridgeUIProvider
      components={{
        Button: {
          classes: {
            root: "uppercase tracking-wide",
          },
        },
        Alert: {
          classes: {
            root: "border-l-4",
            title: "font-semibold",
          },
        },
      }}
    >
      {children}
    </BridgeUIProvider>
  );
}

Per-instance overrides

Pass classes on the component to refine or extend the registry:

<script setup lang="ts">
import { Button } from "@bridge-ui/vue/Components/Button";
import { Save } from "@lucide/vue";
</script>

<template>
  <Button
    :start-icon="Save"
    :classes="{
      root: 'shadow-lg',
      startIcon: 'opacity-80',
    }"
  >
    Save
  </Button>
</template>

import { Button } from "@bridge-ui/react/Components/Button";
import { Save } from "lucide-react";

export default function InstanceClasses() {
  return (
    <Button
      startIcon={Save}
      classes={{
        root: "shadow-lg",
        startIcon: "opacity-80",
      }}
    >
      Save
    </Button>
  );
}

Merge order for each slot: provider classes → instance classes. Conflicting Tailwind utilities are resolved with tailwind-merge.

Root class vs slots

• Use the framework root class (class on Vue, className on React) for the outermost element when the component forwards it.
• Use classes for named internal parts documented in each component’s API table.

Example Button slots: root, startIcon, endIcon, icon, loading.

Typing

After loading Framework augments (see Type overrides), components.Button.classes is typed as ButtonClasses instead of a loose object.

Next steps

• Tokens — register new visual tokens, not only classes
• Default props — change size/color defaults
• Button — full slot and API reference