# Introduction

Fluid Primitives brings modern component patterns to TYPO3. Build accessible, composable UI components with the same developer experience you'd expect from React libraries like Radix or Base UI - but for Fluid templates.

<div class="relative w-full rounded-lg border px-4 py-3 text-sm grid has-[&gt;svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[&gt;svg]:gap-x-3 gap-y-0.5 items-start [&amp;&gt;svg]:size-4 [&amp;&gt;svg]:translate-y-0.5 [&amp;&gt;svg]:text-current text-warning bg-warning/5 border-warning/30 [&amp;&gt;svg]:text-warning *:[&amp;[data-scope=alert][data-part=content]]:text-warning/90 not-prose" role="alert" id="alert:«fUGyi4jQM2»" data-scope="alert" data-part="root" >

<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-5"> <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path> <path d="M12 9v4"></path> <path d="M12 17h.01"></path> </svg>

<div class="col-start-2 min-h-4 font-medium tracking-tight" id="alert:«fUGyi4jQM2»:title" data-scope="alert" data-part="title" >

<h3>Under Construction</h3>

</div>

<div class="text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&amp;_p]:leading-relaxed" id="alert:«fUGyi4jQM2»:content" data-scope="alert" data-part="content" >

<p>Fluid Primitives is in early development. Expect breaking changes until v1.0. We're actively shipping new components and features.</p>

</div>

</div>

If something is unclear, you found a bug or want a feature, please open an [issue](https://github.com/jramke/fluid-primitives/issues) or reach out via [slack](https://typo3.slack.com/archives/D07KMQW2A6N).

## What You Get

**Accessible by default.** Every interactive component handles interaction and semantics automatically in a WAI-ARIA compliant way via [Zag.js](https://zagjs.com/) state machines.

**Composable API.** No more prop drilling. Build complex UIs by composing small, focused parts that work together.

**Unstyled.** Zero design opinions. Use Tailwind, vanilla CSS, or any styling approach. You control every pixel.

**Server-rendered.** Components render on the server with PHP/Fluid, then hydrate on the client. No layout shift, great for SEO.

## Acknowledgments

- [Zag.js](https://zagjs.com/) - The state machine foundation
- [Radix UI](https://www.radix-ui.com/primitives) - API design inspiration
- [Base UI](https://base-ui.com/) - Component behavior patterns
- [Ark UI](https://ark-ui.com/) - Zag.js integration patterns