georgringer/fluid-components-backend

Components for TYPO3 Backend

dev-main 2026-01-13 13:46 UTC

Requires

• typo3/cms-fluid: ^13 || ^14

Suggests

• andersundsehr/storybook: Use storybook to render the components

GPL-2.0-or-later

README

This extension provides fluid components for the backend. This makes it faster and easier to generate e.g. previews for content elements.

Usage

composer req georgringer/fluid-components-backend

Now you can use the components

Tabs

<fb:molecule.tabs>
    <f:fragment name="header">
        <fb:atom.tabHeader id="one" active="1" header="Tab #1" />
        <fb:atom.tabHeader id="two" header="Tab #2" />
    </f:fragment>
    <f:fragment name="content">
        <fb:atom.tabContent id="one" active="1" content="Lorem ipsum" />
        <fb:atom.tabContent id="two" content="Content #2" />
    </f:fragment>
</fb:molecule.tabs>

Panel

<fb:molecule.panel
    collapseIdentifier="c{item.uid}"
    title="My header">
    {content}
</fb:molecule.panel>

Infobox

<fb:molecule.infobox
    icon="actions-brand-typo3"
    title="Infobox">{content}</fb:molecule.infobox>

Button

<fb:atom.button>{cta.label}</fb:atom.button>

Usage with storybook

Add the components to your main.ts, e.g. '../vendor/georgringer/fluid-components-backend/.storybook/**/*.stories.ts'