# Fluid Primitives Documentation for Fluid Primitives, a headless component library for TYPO3 Fluid templating. Components are server-rendered with PHP/Fluid and hydrated client-side with TypeScript using Zag.js state machines. ## Overview - [Introduction](https://fluid-primitives.com/docs/introduction.md): 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... - [Getting Started](https://fluid-primitives.com/docs/getting-started.md): Get up and running with Fluid Primitives in just a few steps. This guide covers installation, basic setup, and creating your first component. ## Core Concepts - [Primitives](https://fluid-primitives.com/docs/core-concepts/primitives.md): Fluid Primitives provides headless, accessible primitives built on Zag.js state machines. These handle behavior and accessibility; you handle styling. - [File Structure](https://fluid-primitives.com/docs/core-concepts/file-structure.md): Organize your components for maintainability as your design system grows. - [Arguments](https://fluid-primitives.com/docs/core-concepts/arguments.md): Components accept typed arguments called props. Fluid Primitives extends Fluid's built-in argument system with additional features. - [Context](https://fluid-primitives.com/docs/core-concepts/context.md): Composable components need to share data between parts. Context makes this possible without prop drilling. - [Hydration](https://fluid-primitives.com/docs/core-concepts/hydration.md): Fluid Primitives components render on the server, then "hydrate" on the client to add interactivity. Here's how that works. - [Composition](https://fluid-primitives.com/docs/core-concepts/composition.md): Build complex interfaces by combining simple parts. This is the core pattern in Fluid Primitives. - [Styling](https://fluid-primitives.com/docs/core-concepts/styling.md): Fluid Primitives is completely unstyled. Use any CSS approach you prefer: Tailwind, vanilla CSS, Sass, PostCSS or whatever you like. - [Forms](https://fluid-primitives.com/docs/core-concepts/forms.md): A guide to building forms with Fluid Primitives — covering AJAX submission, Extbase integration, client-side validation, and field state management. ## Components - [Accordion](https://fluid-primitives.com/docs/components/accordion.md): A set of collapsible panels with headings. - [Checkbox](https://fluid-primitives.com/docs/components/checkbox.md): An easily stylable checkbox component. - [Checkbox Group](https://fluid-primitives.com/docs/components/checkbox-group.md): A group of checkboxes for selecting multiple values. - [Clipboard](https://fluid-primitives.com/docs/components/clipboard.md): A component to copy text to the clipboard. - [Combobox](https://fluid-primitives.com/docs/components/combobox.md): An input with a popup listbox for searching and selecting values from a collection. - [Collapsible](https://fluid-primitives.com/docs/components/collapsible.md): A collapsible panel controlled by a button. - [Dialog](https://fluid-primitives.com/docs/components/dialog.md): A popup that opens on top of the entire page. - [Field](https://fluid-primitives.com/docs/components/field.md): A form field wrapper that provides accessible labeling, error handling, and state management for form inputs. - [File Upload](https://fluid-primitives.com/docs/components/file-upload.md): A file picker with drag and drop support, file lists, and validation hooks. - [Form](https://fluid-primitives.com/docs/components/form.md): A powerful form component with client-side validation, AJAX submission, and seamless Extbase integration. - [Input](https://fluid-primitives.com/docs/components/input.md): A text input component that works with Field, with optional word count and live-region announcements. - [Navigation Menu](https://fluid-primitives.com/docs/components/navigation-menu.md): A collection of links and menus for website navigation. - [Number Input](https://fluid-primitives.com/docs/components/number-input.md): A numeric input component with increment and decrement controls. - [Popover](https://fluid-primitives.com/docs/components/popover.md): An accessible popup anchored to a button. - [Radio Group](https://fluid-primitives.com/docs/components/radio-group.md): An easily stylable radio button component. - [Scroll Area](https://fluid-primitives.com/docs/components/scroll-area.md): A native scroll container with custom scrollbars. - [Select](https://fluid-primitives.com/docs/components/select.md): A common form component for choosing a predefined value in a dropdown menu. - [Switch](https://fluid-primitives.com/docs/components/switch.md): A toggle component for turning a single option on or off. - [Tabs](https://fluid-primitives.com/docs/components/tabs.md): A component for toggling between related panels on the same page. - [Textarea](https://fluid-primitives.com/docs/components/textarea.md): A multi-line text input that works with Field, with optional word count, live-region announcements, and submit-on-Enter. - [Tooltip](https://fluid-primitives.com/docs/components/tooltip.md): A popup that appears when an element is hovered or focused, showing a hint for sighted users. ## ViewHelpers - [ui:attributes](https://fluid-primitives.com/docs/viewhelpers/attributes.md): Renders arbitrary HTML attributes. - [ui:call](https://fluid-primitives.com/docs/viewhelpers/call.md): Call a method on an object with optional arguments. - [ui:cn](https://fluid-primitives.com/docs/viewhelpers/cn.md): A ViewHelper that mimics the behavior of the popular clsx library for conditional class name merging. It allows you to combine static class names with conditional ones based on the truthiness of... - [ui:context](https://fluid-primitives.com/docs/viewhelpers/context.md): Access the context of another parent component. - [ui:error](https://fluid-primitives.com/docs/viewhelpers/error.md): Throw an error with a custom message. - [ui:exposeToClient](https://fluid-primitives.com/docs/viewhelpers/exposeToClient.md): Expose a component to the client. - [ui:hydrationData](https://fluid-primitives.com/docs/viewhelpers/hydrationData.md): Declare arbitrarily hydration data that should be exposed to the client. - [ui:id](https://fluid-primitives.com/docs/viewhelpers/id.md): Generates a base36 identifier that is unique per request. - [ui:listCollection](https://fluid-primitives.com/docs/viewhelpers/listCollection.md): Create a ListCollection from an array of items. - [ui:portal](https://fluid-primitives.com/docs/viewhelpers/portal.md): This ViewHelper allows you to render content in a different part of the DOM tree than where it is defined. This is particularly useful for modals, tooltips, or any component that needs to break out... - [ui:portalContainer](https://fluid-primitives.com/docs/viewhelpers/portalContainer.md): Renders the elements used inside the ui:portal ViewHelper into the current position in the DOM. - [ui:prop](https://fluid-primitives.com/docs/viewhelpers/prop.md): Defines a template argument (prop) for a component. - [ui:ref](https://fluid-primitives.com/docs/viewhelpers/ref.md): Generates a reference to a part of a component. - [ui:slotFilled](https://fluid-primitives.com/docs/viewhelpers/slotFilled.md): Check if a slot has content. Returns the content of the slot if it has content, otherwise returns false. - [ui:template](https://fluid-primitives.com/docs/viewhelpers/template.md): Wraps its children in a