Why Fluid Primitives?

Fluid Primitives is a modern way to build UI components in TYPO3. It leverages the power of Zag.js for building accessible and unstyled components, while providing a composable approach inspired by popular frontend libraries.

Composable Design

Traditional (Fluid) components can quickly end up with bloated props that look like this.

<ui:card rootClass="some-additional-class" image="path/to/image" title="Hello World" titleLevel="3" text="Lorem ipsum" cta="1" ctaVariant="secondary" ctaText="Learn more" ... />

Now imagine you need a use-case where you need two buttons. You will likely end up with another prop.

This becomes hard to maintain with all the conditional logic in templates. Fluid Primitives enables a composable composition approach inspired by modern frontend libraries like Base UI, Radix Primitives or Zag.js:

<ui:card.root class="some-additional-class">
    <ui:card.image image="path/to/image" />
    <ui:card.title level="3">Hello World</ui:card.title>
    <ui:card.content>
        Lorem ipsum
        <ui:button link="1" variant="secondary">Learn more</ui:button>
    </ui:card.content>
</ui:card.root>

Unstyled

Fluid Primitives components are unstyled by default, allowing you to apply your own styles and design system without any interference. This approach promotes consistency across your application and makes it easier to adapt the components to your specific needs. Check out the Styling Guide.

Accessibility

Thanks to Zag.js, Fluid Primitives components ship with built-in accessibility, ensuring that all users can interact with your application effectively. This includes proper ARIA attributes, keyboard navigation, and focus management.