Fluid Functionalism: 28 shadcn-Komponenten, deren Hover dem Mauszeiger folgt

Michael Dobler

Autor Dr. Web

12. Oktober 2026

2 Min. Lesezeit

Fluid Functionalism heißt eine Komponentenbibliothek für shadcn/ui, deren Animationen jeweils einen Zustandswechsel anzeigen sollen. Der Designer Micka Touillaud aus San Francisco stellt 28 Bausteine kostenlos unter MIT-Lizenz bereit. Seit dem 11. Oktober richtet ein einziger Befehl ein neues Projekt mit allen Komponenten ein.

drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen

Mit Fluid Functionalism nimmt sich Touillaud ein Ärgernis fast jeder Weboberfläche vor: Fährt der Mauszeiger über ein Menü, erlischt die Hervorhebung in jeder Lücke zwischen zwei Zeilen und leuchtet in der nächsten wieder auf. Bei einer Fahrt über fünf Einträge blinkt der klassische CSS-Hover neunmal, Touillauds Variante gleitet in einem Zug.^[1]

Das Wichtigste in Kürze

Fluid Functionalism ergänzt shadcn/ui um Federanimationen und eine gleitende Hover-Fläche.
Die Bibliothek ist kostenlos und läuft mit React, Tailwind CSS v4 sowie wahlweise Radix oder Base UI.
Der Marktplatz 21st.dev führt nur einen Teil der Komponenten, teils ohne geklärte Lizenz.
Betreiber deutscher Websites hosten die nötige Schrift Inter besser selbst und schalten die Bewegungsreduzierung ein.

Wie funktioniert der gleitende Hover?

Ein blauer Glasstein und ein Holzschild mit der Aufschrift „HIER“ stehen auf einem grauen Schachbrettmuster — React-Hook ermittelt bei Mausbewegung das nächste Listenelement und verschiebt die Hervorhebungsfläche per CSS-Transform ohne Lücken zwischen den Zeilen

Jede Liste hat ein einziges Hervorhebungselement: Bei jeder Mausbewegung ermittelt ein React-Hook den nächstgelegenen Eintrag und schiebt die Fläche per CSS-Transform dorthin, ohne tote Zonen zwischen den Zeilen.^[1]

Eine Demo mit 200 Zeilen misst live, wie viel vom Frame-Budget von 16,7 Millisekunden die Auswahl verbraucht.

Statt fester Animationsdauern nutzt die Bibliothek Federn. Kippt jemand einen Schalter und gleich wieder zurück, kehrt die Bewegung an Ort und Stelle um. Drei Stufen von 0,08 bis 0,24 Sekunden decken alle Bausteine ab.^[2] Fett werdende Beschriftungen schieben ihre Nachbarn nicht beiseite, weil die Achse für optische Größe der Schrift Inter die Breite ausgleicht.

Was kostet die Bibliothek, und wie kommt sie ins Projekt?

Fluid Functionalism ist kostenlos und steht unter MIT-Lizenz. Die Komponenten installieren Sie über die shadcn-CLI aus der Registry der Bibliothek, wahlweise auf Basis von Radix oder Base UI. Der Code landet als Quelltext im eigenen Projekt.^[3]

Seit dem 11. Oktober erzeugt ein Starter-Befehl ein Next.js-Projekt mit allen Komponenten samt den gewählten Einstellungen. Vorhandene shadcn-Dateien wie button.tsx ersetzt die CLI nur mit --overwrite, ohne den Schalter bricht ein KI-Coding-Agent an der ersten Rückfrage ab. Für solche Agenten liefert Touillaud zudem einen eigenen Skill.

Den Umweg über den Marktplatz 21st.dev sparen Sie sich besser. Dort stehen nur 15 der Komponenten, Accordion und Dialog tragen den Lizenzvermerk „unknown“. Für die Installation verlangt der Marktplatz einen API-Schlüssel, der im Gratiskonto einem Tageslimit unterliegt.^[4]

Fluid Functionalism in Zahlen

Umfang, Bewegungsstufen und Bezugswege der Komponentenbibliothek für shadcn/ui

Umfang und Verbreitung (Stand 12. Oktober 2026)

Komponenten, die meisten für Radix und Base UI

Flächenebenen, damit Menüs im Dialog sichtbar bleiben

1.039

GitHub-Sterne seit Februar 2026

0 €

MIT-Lizenz, auch für kommerzielle Projekte

Drei Federstufen für alle Bausteine

Schnell

0,08 Sekunden

Hover, Tooltips, Fokusrahmen, Tabellenzeilen

Mittel

0,16 Sekunden

Dropdowns, Tabs, Schalter, Seitenleiste

Langsam

0,24 Sekunden

Dialoge, Rückfragen, Denkschritte

Zwei Bezugswege im Vergleich

Eigene Registry

fluidfunctionalism.com

Umfang: alle 28 Komponenten

Lizenz: MIT für das ganze Repository

Zugang: ohne Konto über die shadcn-CLI

Marktplatz

21st.dev

Umfang: 15 Komponenten

Lizenz: je Komponente, teils „unknown“

Zugang: API-Schlüssel, im Gratiskonto mit Tageslimit

Jede Animation ohne Aufgabe kostet Aufmerksamkeit, die dem Nutzer dann bei der eigentlichen Arbeit fehlt.
Markus Seyfferth, Chefredakteur Dr. Web

Für wen lohnt sich der Umstieg?

Fluid Functionalism passt zu Agenturen und Produktteams, die Web-Apps, Dashboards oder KI-Oberflächen mit React und shadcn/ui bauen. Für klassische WordPress-Themes bringt die Bibliothek nichts.

Das Original shadcn/ui zählt über 125.000 GitHub-Sterne, die Effektsammlung Magic UI rund 22.600.^[5] Fluid Functionalism kommt seit dem Start im Februar 2026 auf 1.039 Sterne und 13 offene Issues. Von den letzten 100 Commits stammen 97 von Touillaud.^[3] Weil der Code im eigenen Repository liegt, bleibt das Abhängigkeitsrisiko überschaubar, Updates holen Sie allerdings selbst nach. Ob shadcn-Baukästen für Behördenangebote taugen, bezweifelt ein früherer USWDS-Entwickler. Der Einheitslook vibecodierter Entwürfe geht oft auf unveränderte Tailwind-Standardfarben zurück, Fluid Functionalism übernimmt dagegen die Theme-Tokens des Projekts.

Für die Gewichtsanimationen zeigt die Anleitung, wie Sie die variable Schrift Inter selbst hosten. Selbst gehostete Schriften sind für deutsche Websites seit dem Münchner Urteil zu Google Fonts ohnehin die datenschutzfreundliche Wahl. Die Bewegungsreduzierung des Betriebssystems greift erst, sobald Sie die App in die Komponente MotionConfig mit der Einstellung „user“ einbetten. Das WCAG-Kriterium 2.3.3 für abschaltbare Animationen gehört zur Stufe AAA und damit nicht zu den Pflichten einer barrierefreien Website nach BFSG.^[6] Nutzern mit Schwindelbeschwerden hilft die Einstellung trotzdem.