Config Provider

#Basic usage

config-provider/basic Vue React

Outside — the page's own density and ink

Brush, ink, paper, and the inkstone — the same furniture.

Inside — compact controls under the qinghua accent

Density and pigment are fixed in here — mode, scene and paper still ride the page around them.

config-provider/basic.vue

<script setup lang="ts">
import { Button, Card, ConfigProvider } from "@bysages/vue";
</script>

<template>
  <div class="grid gap-4 justify-items-start">
    <Card.Root class="w-104">
      <Card.Header>
        <Card.Title>Outside — the page's own density and ink</Card.Title>
        <Card.Description>
          Brush, ink, paper, and the inkstone — the same furniture.
        </Card.Description>
      </Card.Header>
      <Card.Content class="flex flex-wrap gap-[var(--bs-gap-sm)]">
        <Button>Primary</Button>
        <Button variant="ghost">Secondary</Button>
      </Card.Content>
    </Card.Root>
    <ConfigProvider density="compact" accent="qinghua">
      <Card.Root class="w-104">
        <Card.Header>
          <Card.Title>Inside — compact controls under the qinghua accent</Card.Title>
          <Card.Description>
            Density and pigment are fixed in here — mode, scene and paper still ride the page around
            them.
          </Card.Description>
        </Card.Header>
        <Card.Content class="flex flex-wrap gap-[var(--bs-gap-sm)]">
          <Button>Primary</Button>
          <Button variant="ghost">Secondary</Button>
        </Card.Content>
      </Card.Root>
    </ConfigProvider>
  </div>
</template>

config-provider/nested Vue React

Comfortable — the outer provider's tier

Local to this host element and its descendants.

Compact — the inner provider, its own scope only

The outer scope stays where it was.

config-provider/nested.vue

<script setup lang="ts">
import { Button, Card, ConfigProvider } from "@bysages/vue";

const contentStyle = { display: "flex", flexWrap: "wrap", gap: "var(--bs-gap-sm)" };
const cardStyle = { inlineSize: "26rem" };
</script>

<template>
  <ConfigProvider density="comfortable">
    <div class="grid gap-4 justify-items-start">
      <Card.Root :style="cardStyle">
        <Card.Header>
          <Card.Title>Comfortable — the outer provider's tier</Card.Title>
          <Card.Description>Local to this host element and its descendants.</Card.Description>
        </Card.Header>
        <Card.Content :style="contentStyle">
          <Button>Primary</Button>
          <Button variant="ghost">Secondary</Button>
        </Card.Content>
      </Card.Root>
      <ConfigProvider density="compact">
        <Card.Root :style="cardStyle">
          <Card.Header>
            <Card.Title>Compact — the inner provider, its own scope only</Card.Title>
            <Card.Description>The outer scope stays where it was.</Card.Description>
          </Card.Header>
          <Card.Content :style="contentStyle">
            <Button>Primary</Button>
            <Button variant="ghost">Secondary</Button>
          </Card.Content>
        </Card.Root>
      </ConfigProvider>
    </div>
  </ConfigProvider>
</template>

#Props

#ConfigProvider

The declarative host for global configuration: one element that both carries the token layer's attributes — [data-density] and [data-accent] fire on any element — and provides the same values to descendants through useConfig, so interactive behavior (formatting, messages) and visual theming stay one decision.

Prop	Type	Default	Description
`density`	`String as PropType<ConfigDensity>`	`undefined`	—
`scene`	`String as PropType<ConfigScene>`	`undefined`	—
`accent`	`String`	`undefined`	—
`dir`	`String as PropType<"ltr" \| "rtl">`	`undefined`	—
`locale`	`String`	`undefined`	—