- Home
- /
- Software- & Webentwicklung
- /
- Webentwicklung
- /
- JavaScript
- /
- React
- /
- React – Design Systeme...
React – Design Systeme mit TailwindCSS und shadcn/ui
Schulungsinhalt
Einführung in das shadcn/ui Framework
Abgrenzung zu herkömmlichen Komponentenbibliotheken
Unterstützte React-Frameworks wie Next.js, Remix, Astro und Gatsby
Basis-Technologien für die Entwicklung
Nutzung von Radix UI
Grundlagen von TailwindCSS
Prinzipien des Utility-First-Ansatzes
Anwendung von Modifikatoren wie Hover und Focus
Gestaltung von responsive Layouts
Implementierung von Dark Mode
Anpassung und Erweiterung von Themes
Funktionen und Directives von TailwindCSS
Installation von shadcn/ui
Wichtige TailwindCSS-Klassen und deren Anwendung
Layoutgestaltung mit Flexbox und Grid
Umgang mit Abständen und Größen in TailwindCSS
Typographische Gestaltung und Textformatierung
Arbeiten mit Hintergründen und Rändern
Schritt-für-Schritt-Anleitung zur Installation und Konfiguration von shadcn/ui
Erstellung und Anwendung von Themes und Dark Mode
Grundlegende Konzepte von shadcn/ui
Integration neuer Komponenten in ein Design-System
Überblick über verfügbare Komponenten im shadcn/ui Framework
Erstellung von Komponentenvarianten
Anpassungen von Komponenten durch Sprache mit v0 (LLM)
Zielgruppe
Dieser Kurs richtet sich an Webentwickler, die ihre Fähigkeiten in der Erstellung maßgeschneiderter Design-Systeme für React-Anwendungen mit TailwindCSS und shadcn/ui erweitern möchten.
Seminarziele
In dieser Schulung lernen Sie, wie Sie ein flexibles und maßgeschneidertes Design-System für React-Anwendungen mit den Tools TailwindCSS und shadcn/ui aufbauen. Sie erhalten tiefgehende Einblicke in die Funktionsweise von shadcn/ui und erfahren, wie es sich von klassischen Komponentenbibliotheken unterscheidet. Zudem wird Ihnen gezeigt, wie shadcn/ui nahtlos in moderne React-Frameworks wie Next.js, Remix, Astro und Gatsby integriert werden kann, um eine hohe Flexibilität und Skalierbarkeit zu gewährleisten.
Der Kurs vermittelt Ihnen auch die Grundlagen von TailwindCSS, einem leistungsstarken Utility-First-CSS-Framework, das die Entwicklung effizienter und anpassbarer Benutzeroberflächen ermöglicht. Sie lernen, wie Sie TailwindCSS optimal nutzen und mit shadcn/ui kombinieren, um ein Design-System zu erstellen, das sich flexibel erweitern lässt.
Am Ende des Seminars sind Sie in der Lage, ein voll funktionsfähiges und anpassbares Design-System für React-Anwendungen zu entwickeln, das nicht nur Responsive Design und Dark Mode unterstützt, sondern auch individuelle Anpassungen durch Theming ermöglicht.
Vorkenntnisse
Die Voraussetzung zur Teilnahme ist grundlegendes Wissen in React. Erfahrung mit TailwindCSS ist von Vorteil, aber nicht zwingend erforderlich.
Seminardauer
Preis
Präsenzseminar/FLEXINAR®:
LIVEINAR®:
Individual Training: Preis auf Anfrage
Inhouse Training: Preis auf Anfrage
Seminarnummer
Fehler: Kontaktformular wurde nicht gefunden.
Ihr Berater
Martin Heubeck
Group Leader Sales
- martin.heubeck@protranet.de
Beratungszentrale und Buchungshotline:
- 0800 3400311
- beratung@protranet.de
Kataloge
Formate
Dieses Seminar können Sie als Präsenzseminar, online als LIVEINAR® oder im flexiblen Mix als FLEXINAR® buchen.





