Skip to main content
Fluid Primitives

Arguments

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.

Enum Props

Some props use PHP backed enums. Until Fluid supports automatic enum conversion, pass enum cases with f:constant. This should get better once PR #1271 lands.

<ui:tabs.root
    orientation="{f:constant(name: '
        Jramke\FluidPrimitives\Enum\Orientation::Horizontal
    ')}"
/>

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>

See ui:cn ViewHelper for conditional class names.

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.