PHPackages                             sitegeist/fluid-components - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. sitegeist/fluid-components

ActiveTypo3-cms-extension[Templating & Views](/categories/templating)

sitegeist/fluid-components
==========================

Encapsulated frontend components with Fluid's ViewHelper syntax

3.8.6(10mo ago)55339.1k↓13.9%25[13 PRs](https://github.com/sitegeist/fluid-components/pulls)2GPL-2.0-or-laterPHPPHP ^8.2CI passing

Since Aug 16Pushed 10mo ago13 watchersCompare

[ Source](https://github.com/sitegeist/fluid-components)[ Packagist](https://packagist.org/packages/sitegeist/fluid-components)[ Docs](https://github.com/sitegeist/fluid-components)[ RSS](/packages/sitegeist-fluid-components/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (10)Dependencies (5)Versions (59)Used By (2)Security (1)

Fluid Components
================

[](#fluid-components)

This TYPO3 extensions puts frontend developers in a position to create encapsulated components in pure Fluid. By defining a clear interface (API) for the integration, frontend developers can implement components independent of backend developers. The goal is to create highly reusable presentational components which have no side effects and aren't responsible for data acquisition.

⬇️ **[TL;DR? Get started right away](#getting-started)** ⬇️

What does it do?
----------------

[](#what-does-it-do)

[Fluid](https://github.com/typo3/fluid) templates usually consist of three ingredients:

- **Templates**,
- **Layouts**, which structure and wrap the markup defined in the template, and
- **Partials**, which contain markup snippets to be reused in different templates.

In addition, **ViewHelpers** provide basic control structures and encapsulate advanced rendering and data manipulation that would otherwise not be possible. They are defined as PHP classes.

The extension adds another ingredient to Fluid: **Components**.

What are components?
--------------------

[](#what-are-components)

Fluid components are similar to ViewHelpers. The main difference is that they can be defined solely in Fluid. In a way, they are quite similar to Fluid's partials, but they have a few advantages:

- They provide a **clear interface** via predefined parameters. The implementation is encapsulated in the component. You don't need to know what the component does internally to be able to use it.
- With semantic component names your templates get more **readable**. This gets even better with [atomic design](http://bradfrost.com/blog/post/atomic-web-design/) or similar approaches.
- They can easily be used across different TYPO3 extensions because they utilize Fluid's **namespaces**. No *partialRootPath* needed.

How do components look like?
----------------------------

[](#how-do-components-look-like)

The following component implements a simple teaser card element:

*Components/TeaserCard/TeaserCard.html*

```

            {title}

```

Use the following code in your template to render a teaser card about TYPO3:

```
{namespace my=VENDOR\MyExtension\Components}

    The professional, flexible Content Management System

```

The result is the following HTML:

```

    TYPO3
    The professional, flexible Content Management System

```

*(improved indentation for better readability)*

Getting Started
---------------

[](#getting-started)

1. Install the extension either [from TER](https://typo3.org/extensions/repository/view/fluid_components)or [via composer](https://packagist.org/packages/sitegeist/fluid-components):

    ```
    composer require sitegeist/fluid-components

    ```
2. Define the component namespace in your *ext\_localconf.php*:

    ```
    $GLOBALS['TYPO3_CONF_VARS']['EXTCONF']['fluid_components']['namespaces']['VENDOR\\MyExtension\\Components'] =
    	\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::extPath('my_extension', 'Resources/Private/Components');
    ```

    Use your own vendor name for `VENDOR`, extension name for `MyExtension`, and extension key for `my_extension`.
3. Create your first component in *EXT:my\_extension/Resources/Private/Components/* by creating a directory *MyComponent* containing a file *MyComponent.html*
4. Define and apply your component according to [How do components look like?](#how-do-components-look-like). The [Extended Documentation](#extended-documentation)can be helpful as well.
5. Check out [Fluid Styleguide](https://github.com/sitegeist/fluid-styleguide), a living styleguide for Fluid Components, and [Fluid Components Linter](https://github.com/sitegeist/fluid-components-linter) to improve the quality and reusability of your components.

If you have any questions, need support or want to discuss components in TYPO3, feel free to join [\#ext-fluid\_components](https://typo3.slack.com/archives/ext-fluid_components).

Why should I use components?
----------------------------

[](#why-should-i-use-components)

- Components encourage **markup reusage and refactoring**. Only the component knows about its implementation details. As long as the interface stays compatible, the implementation can change.
- Components can be a tool to **enforce design guidelines**. If the component's implementation respects the guidelines, they are respected everywhere the component is used. A helpful tool to accomplish that is the corresponding living styleguide: [Fluid Styleguide](https://github.com/sitegeist/fluid-styleguide).
- Components **formalize and improve communication**. Frontend developers and integrators agree on a clearly defined interface instead of debating implementation details.
- Components **reduce dependencies**. Frontend developers can work independent of integrators and backend developers.

Extended Documentation
----------------------

[](#extended-documentation)

Feature References

- [ViewHelper Reference](Documentation/ViewHelperReference.md)
- [Data Structures](Documentation/DataStructures.md)
    - [Links and Typolink](Documentation/DataStructures.md#links-and-typolink)
    - [Files and Images](Documentation/DataStructures.md#files-and-images)
    - [Translations](Documentation/DataStructures.md#translations)
    - [Navigations](Documentation/DataStructures.md#navigations)
    - [DateTime](Documentation/DataStructures.md#datetime)
    - [Slots](Documentation/DataStructures.md#slots)
- [Component Prefixers](Documentation/ComponentPrefixers.md)
- [Component Settings](Documentation/ComponentSettings.md)

How-To's

- [Usage with Forms](Documentation/Forms.md)
- [Add auto-completion in your IDE](Documentation/AutoCompletion.md)
- [Updating from 1.x](Documentation/UpdateNotes.md)
- [Mitigating XSS issues with 3.5](Documentation/XssIssue.md)

Authors & Sponsors
----------------------

[](#authors--sponsors)

- Ulrich Mathes -
- Simon Praetorius -
- [All contributors](https://github.com/sitegeist/fluid-components/graphs/contributors)

*The development and the public-releases of this package is generously sponsored by my employer .*

###  Health Score

59

—

FairBetter than 99% of packages

Maintenance53

Moderate activity, may be stable

Popularity50

Moderate usage in the ecosystem

Community32

Small or concentrated contributor base

Maturity88

Battle-tested with a long release history

 Bus Factor1

Top contributor holds 77.4% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~67 days

Recently: every ~61 days

Total

38

Last Release

327d ago

Major Versions

1.3.0 → 2.0.02020-04-10

2.5.1 → 3.0.02021-09-07

PHP version history (4 changes)1.2.0PHP >=7.1.0 <8

2.0.0PHP >=7.2.0 <8

3.0.0PHP >=7.4.0

v3.8.0PHP ^8.2

### Community

Maintainers

![](https://www.gravatar.com/avatar/ca4eee1e54bccd482945cd03a170a3dfa0c4672c32d0a565dc1228a905a06c27?d=identicon)[s2b](/maintainers/s2b)

![](https://www.gravatar.com/avatar/51e0a02d8e12b73949ec858638aa7e295e103022cc5a879f86ac8532c2c170bd?d=identicon)[sitegeist](/maintainers/sitegeist)

---

Top Contributors

[![s2b](https://avatars.githubusercontent.com/u/458524?v=4)](https://github.com/s2b "s2b (356 commits)")[![ulrichmathes](https://avatars.githubusercontent.com/u/26324456?v=4)](https://github.com/ulrichmathes "ulrichmathes (48 commits)")[![Atomschinken](https://avatars.githubusercontent.com/u/3041069?v=4)](https://github.com/Atomschinken "Atomschinken (13 commits)")[![OleksandrMatsko](https://avatars.githubusercontent.com/u/108868156?v=4)](https://github.com/OleksandrMatsko "OleksandrMatsko (11 commits)")[![galoppi](https://avatars.githubusercontent.com/u/909832?v=4)](https://github.com/galoppi "galoppi (5 commits)")[![lukasniestroj](https://avatars.githubusercontent.com/u/25104879?v=4)](https://github.com/lukasniestroj "lukasniestroj (4 commits)")[![helhum](https://avatars.githubusercontent.com/u/904370?v=4)](https://github.com/helhum "helhum (4 commits)")[![t-schramm](https://avatars.githubusercontent.com/u/61553607?v=4)](https://github.com/t-schramm "t-schramm (3 commits)")[![andyhausmann](https://avatars.githubusercontent.com/u/820276?v=4)](https://github.com/andyhausmann "andyhausmann (2 commits)")[![arbonia-koehnlein](https://avatars.githubusercontent.com/u/235669314?v=4)](https://github.com/arbonia-koehnlein "arbonia-koehnlein (2 commits)")[![georgringer](https://avatars.githubusercontent.com/u/1905663?v=4)](https://github.com/georgringer "georgringer (2 commits)")[![infabo](https://avatars.githubusercontent.com/u/3999104?v=4)](https://github.com/infabo "infabo (2 commits)")[![kitzberger](https://avatars.githubusercontent.com/u/1405149?v=4)](https://github.com/kitzberger "kitzberger (2 commits)")[![rov-sf](https://avatars.githubusercontent.com/u/92857218?v=4)](https://github.com/rov-sf "rov-sf (2 commits)")[![huersch](https://avatars.githubusercontent.com/u/7778669?v=4)](https://github.com/huersch "huersch (1 commits)")[![MaxAmann-sitegeist](https://avatars.githubusercontent.com/u/165805977?v=4)](https://github.com/MaxAmann-sitegeist "MaxAmann-sitegeist (1 commits)")[![koehnlein](https://avatars.githubusercontent.com/u/16088567?v=4)](https://github.com/koehnlein "koehnlein (1 commits)")[![romm](https://avatars.githubusercontent.com/u/6342901?v=4)](https://github.com/romm "romm (1 commits)")

---

Tags

componentsfluidhtmltemplatetypo3typo3-extensiontypo3-fluidcomponentshtmltemplatetypo3typo3-extensionfluidtypo3-fluid

###  Code Quality

Code StylePHP\_CodeSniffer

### Embed Badge

![Health badge](/badges/sitegeist-fluid-components/health.svg)

```
[![Health](https://phpackages.com/badges/sitegeist-fluid-components/health.svg)](https://phpackages.com/packages/sitegeist-fluid-components)
```

###  Alternatives

[sitegeist/fluid-styleguide

Living styleguide for Fluid Components

16227.4k1](/packages/sitegeist-fluid-styleguide)[phug/phug

Pug (ex-Jade) facade engine for PHP, HTML template engine structured by indentation

67292.2k13](/packages/phug-phug)[t3brightside/microtemplate

TYPO3 CMS template – sectioned one pager with light box like sub pages

171.4k1](/packages/t3brightside-microtemplate)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)