Global Defaults

Call setTheuiDefaults once with the values you want. Every component that has the matching prop uses it instead of its own built-in default.

<script module lang="ts">
  import { setTheuiDefaults } from "theui-svelte/function";

  setTheuiDefaults({
    rounded: false,
    animationSpeed: "fast"
  });
</script>

<script lang="ts">
  let { children } = $props();
</script>

{@render children()}

Keys you leave out keep their built-in value, so you only name what you want to change. Calling it again merges the new keys into the old ones rather than replacing them.

Call it once, at module scope: a <script module> block, or a plain module your app imports. The value is a single setting shared by everything the process renders.

Pass plain, fixed values for the same reason. A default that depends on the request, such as a per-tenant theme, does not belong here; use the rounded prop on a Form, a Fieldset or the components themselves.

rounded is an off switch, and the one key that is not a fallback. false squares off every component whatever its rounded prop says, so <Badge rounded="full"> and a Form with rounded="lg" both come out square. After that only a class of your own can round a corner. true, or leaving the key out, keeps every rounded prop working as usual.

There is no global radius size, because the right value differs per component: a Badge is a pill, a Card is not. To give a group of fields one radius, set rounded on the Form or Fieldset around them.

size and variant are deliberately not here. They mean different things on different components. size is "default" on an Accordion, "xs" to "xl" on a Button and a number on an Svg, while variant is "card" on an Alert, "rect" on a Skeleton and "pills" on Tabs. One value could not mean the same thing everywhere. Set those on a Form or a Fieldset, which cover a whole group of fields at once.

animationSpeed, shadow and reset are the last fallback, so anything you set closer to the component beats them. From strongest to weakest:

1. The prop on the component itself
2. The nearest Fieldset
3. The Form around it
4. setTheuiDefaults
5. The component's own built-in default

<!-- setTheuiDefaults({ animationSpeed: "slow" }) -->

<Modal>Slow, from the global default</Modal>
<Modal animationSpeed="fast">Fast, the prop wins</Modal>

<Form animationSpeed="normal">
  <Input name="a">Normal, from the Form</Input>

  <Fieldset animationSpeed="faster">
    <Input name="b">Faster, the Fieldset is nearer</Input>
  </Fieldset>
</Form>

rounded does not work that way. It is an off switch, so it beats every rounded prop rather than falling behind them:

<!-- setTheuiDefaults({ rounded: false }) -->

<Button>Square</Button>
<Button rounded="full">Square too, the switch beats the prop</Button>
<Badge rounded="2xl">Square too</Badge>

<Form rounded="lg">
  <Input name="a">Square too</Input>
</Form>

<!-- Only your own class still rounds a corner -->
<Button class="rounded-lg">Rounded</Button>

A few components are built around a shape rather than merely decorated with one, so their built-in default is not "md". Turning the switch off squares these as well:

So setTheuiDefaults({ rounded: false }) does square off a Badge and a Toggle, because you asked for it everywhere. Leaving rounded out keeps each of these as it is.

The switch only covers the rounded prop. A shape a component needs in order to read correctly stays as it is: the ring of a Spinner, the dot on an Avatar, the handle of a Range, the step markers of a FormWizard and the panels of the date and time pickers. Restyle those with a class where you need to.

The argument is the CORE type, and every key is optional.

import type { CORE } from "theui-svelte/type";

type CORE = {
  rounded?: boolean;
  animationSpeed?: ANIMATE_SPEED;
  reset?: boolean;
  shadow?: SHADOW;
};

See the Types page for ANIMATE_SPEED and SHADOW.