Desiderio: shadcn/ui-Design als natives TYPO3-v14-Theme

Ein modernes Design-System und ein klassisches Enterprise-CMS gelten oft als zwei getrennte Welten. Desiderio führt sie zusammen: ein eigenständiges TYPO3-v14-Theme, das die Design-Sprache von shadcn/ui in native Fluid-5-Komponenten übersetzt – inklusive 255 fertiger Content-Elemente und eines vorkompilierten Tailwind-v4-Builds.

Der Anspruch ist bewusst zurückhaltend formuliert: kein „revolutionäres" Frontend-Framework, sondern eine saubere, typisierte Komponentenarchitektur, die sich an etablierten Standards orientiert und Redaktion wie Entwicklung das Leben erleichtert.

Inhaltsverzeichnis  

Überblick  

Desiderio ist ein in sich geschlossenes Theme-Paket für TYPO3 v14.3 LTS. Es bündelt eine Fluid-5-Komponentenbibliothek, 255 Content-Elemente, Backend-Layouts, Seitentemplates und fünf umschaltbare visuelle Presets – mit einem fest eingecheckten Tailwind-v4/shadcn-CSS-Build, sodass kein Node-Build-Schritt zum Rendern nötig ist.

Für Agenturen bedeutet das: ein konsistentes, getestetes Fundament statt eines leeren Sitepackages. Für Redaktionen: ein reichhaltiger, sofort nutzbarer Baukasten an Inhaltselementen.

Architektur  

Desiderio ist in drei klar getrennte Ebenen gegliedert. Diese Trennung ist der Kern: Sie hält die Komponenten wiederverwendbar, die Content-Elemente redaktionsfreundlich und das Theme austauschbar.

Die unterste Ebene besteht aus typisierten Fluid-5-Komponenten (16 Atome, 17 Moleküle, 4 Layouts), die ihre Parameter über <f:argument> strikt deklarieren. Darüber liegen die 255 Content-Elemente, die über TYPO3 Content Blocks definiert sind und sich überwiegend aus den Komponenten zusammensetzen. Die oberste Ebene – das eigentliche Theme – stellt Seitentemplates und Backend-Layouts bereit.

Optisch orientiert sich Desiderio an shadcn/ui: Tokens, Varianten und Komposition folgen demselben Prinzip. Den CSS-Unterbau liefert ein vorkompilierter, im Repository versionierter Build auf Basis von Tailwind CSS v4 – ein eigener Build-Schritt entfällt damit. Dass dieser Ansatz nativ in TYPO3 möglich ist, verdankt sich der mit v14.1 eingeführten Fluid-5-Generation und dem modernisierten Backend.

Funktionen im Detail  

Desiderio liefert sieben Backend-Layouts mit zugehörigen Seitentemplates – von Startseite über Inhaltsseite mit Sidebar bis zu Blog-, News- und Styleguide-Seiten. Header und Footer sind bewusst statische Partials, damit die Bearbeitungsfläche auf den eigentlichen Inhalt fokussiert bleibt. Jeder Inhaltsbereich arbeitet mit dem TYPO3 Visual Editor zusammen.

Themes: Farben, Fonts und Presets  

Das Erscheinungsbild ist nicht fest verdrahtet, sondern über fünf umschaltbare Presets steuerbar. Wie beim shadcn/ui-Theme-Generator unter ui.shadcn.com/create lassen sich Farben, Schriftarten und Radien über token-basierte Werte definieren – ohne die Komponentenlogik anzufassen. Ein Preset-Wechsel tauscht das komplette Token-Set für Light- und Dark-Mode aus.

Installation  

Desiderio benötigt TYPO3 v14.3 LTS und PHP 8.3 – 8.5. Nach der Installation wird das Basis-Set plus eines der fünf Presets im Site Management aktiviert.

composer require webconsulting/desiderio
vendor/bin/typo3 extension:setup
vendor/bin/typo3 cache:flush

Häufige Fragen  

Fazit  

Desiderio zeigt, dass ein zeitgemäßes, token-basiertes Design-System und TYPO3 kein Widerspruch sind. Die strikte Drei-Schichten-Architektur trennt sauber zwischen wiederverwendbaren Komponenten, redaktionellen Content-Elementen und dem Theme – das senkt langfristig die Wartungskosten und hält das Frontend konsistent. Für neue Projekte auf TYPO3 v14 ist es ein solider, getesteter Startpunkt.