Arguments (Props)

Components accept typed arguments called props. Fluid Primitives extends Fluid's built-in argument system with additional features.

Defining Props

Use ui:prop instead of Fluid's f:argument:

<ui:prop name="variant" type="string" default="primary" />
<ui:prop name="disabled" type="boolean" optional="{true}" />
<ui:prop name="items" type="array" />

See the ui:prop ViewHelper reference for all options.

Automatic Props

Every component receives these props automatically:

class

Pass additional CSS classes to any component:

<ui:button class="mt-4 w-full">Submit</ui:button>

Inside your component, use {class} to apply them:

<button class="btn {class}">
    <f:slot />
</button>

rootId

Composable components get a unique identifier. This links parts together and enables hydration.

Usually auto-generated, but you can provide one:

<ui:accordion.root rootId="faq-accordion"></ui:accordion.root>

See Controlled Components.

asChild

Merge attributes into child element instead of rendering the default wrapper. See Composition.

ids

Override default IDs for component parts. Useful when composing multiple components together. See Composition.

controlled

Mark a component as externally controlled, preventing automatic client-side initialization. See Hydration.

attributes

Forward additional HTML attributes. See ui:attributes ViewHelper.

Client Props

Props needed for client-side behavior use client="{true}":

<ui:prop name="open" type="boolean" optional="{true}" client="{true}" />

These are serialized and passed to JavaScript during hydration.

Inheriting Props

Use ui:useProps to inherit prop definitions from another component:

<!-- Inherit all props from the primitive -->
<ui:useProps name="primitives:accordion.root" />

<!-- Inherit specific props only -->
<ui:useProps name="primitives:accordion.root" props="{0: 'multiple', 1: 'collapsible'}" />

This is how you build wrapper components without redefining every prop.