Webdev Niklas
Creating innovative web experiences
Menu
Style & Elements
This page shows a comprehensive collection of UI components, interaction elements, and design effects that can be used in modern web projects. All components are divided into logical groups and can serve as a starting point for your own projects.
Table of Contents
Buttons
Primary Buttons
Secondary Buttons
Outline Buttons
Change Language
Basic Elements
Buttons
Primary Buttons
Secondary Buttons
Icon Buttons
Forms
Navigation
Tabs
Dashboard tab content
Navbar
Breadcrumbs
Cards
Card Title
This is a description of the card with some details.
Info Card
A simple info card without an image for important information.
Max Mustermann
Web Developer
"A great platform with many useful features!"
Dropdown & Accordion
Dropdown
Accordion
Alerts & Badges
Alerts
Information
This is an information message with important details.
Success
The action was completed successfully.
Badges
Progress Indicators
Progress Bar
75%Loading Spinner
Steps
Tooltips & Modals
Tooltips
Modal Dialog
Information
This is an example of a modal dialog.
UI Components
Modales Bild/Lightbox
Datepicker
Mit Input
Permanente UI
Stepper
File Upload
Dateien hier ablegen oder klicken zum Auswählen
Unterstützt werden Bilder, Videos, Dokumente
Autocomplete/Typeahead
Chips/Tags Input
Drücken Sie Enter, um einen Tag hinzuzufügen
Skeleton Loader
Ladezustand
Notification Badge
Modal Dialog
Information
Dies ist ein Beispiel für einen Modal-Dialog. Er kann verwendet werden, um wichtige Informationen anzuzeigen oder Benutzeraktionen zu bestätigen.
Alerts
Information
Dies ist eine Informationsmeldung mit wichtigen Details für den Benutzer.
Warnung
Bitte beachten Sie diese Warnung, bevor Sie fortfahren.
Erfolg
Die Aktion wurde erfolgreich abgeschlossen.
Interactive Elements
Drag & Drop Interface
Ziehen Sie die Elemente, um ihre Reihenfolge zu ändern.
Sortierbare Listen
Nach Name sortieren
Nach Datum sortieren
Resizable Panels
Linkes Panel
Ziehen Sie den Trenner zwischen den Panels, um ihre Größe anzupassen.
Rechtes Panel
Dieser Trenner ist interaktiv. Ziehen Sie ihn, um die Größe der Panels anzupassen.
List
Diese Liste zeigt nur die sichtbaren Elemente an und optimiert so die Performance.
Listenelement 1
Dieses Element wird nur gerendert, wenn es im sichtbaren Bereich ist. Scrollen Sie, um weitere Elemente zu sehen.
Listenelement 2
Dieses Element wird nur gerendert, wenn es im sichtbaren Bereich ist. Scrollen Sie, um weitere Elemente zu sehen.
Listenelement 3
Dieses Element wird nur gerendert, wenn es im sichtbaren Bereich ist. Scrollen Sie, um weitere Elemente zu sehen.
Listenelement 4
Dieses Element wird nur gerendert, wenn es im sichtbaren Bereich ist. Scrollen Sie, um weitere Elemente zu sehen.
Listenelement 5
Dieses Element wird nur gerendert, wenn es im sichtbaren Bereich ist. Scrollen Sie, um weitere Elemente zu sehen.
Listenelement 6
Dieses Element wird nur gerendert, wenn es im sichtbaren Bereich ist. Scrollen Sie, um weitere Elemente zu sehen.
Listenelement 7
Dieses Element wird nur gerendert, wenn es im sichtbaren Bereich ist. Scrollen Sie, um weitere Elemente zu sehen.
Listenelement 8
Dieses Element wird nur gerendert, wenn es im sichtbaren Bereich ist. Scrollen Sie, um weitere Elemente zu sehen.
Listenelement 9
Dieses Element wird nur gerendert, wenn es im sichtbaren Bereich ist. Scrollen Sie, um weitere Elemente zu sehen.
Listenelement 10
Dieses Element wird nur gerendert, wenn es im sichtbaren Bereich ist. Scrollen Sie, um weitere Elemente zu sehen.
Listenelement 11
Dieses Element wird nur gerendert, wenn es im sichtbaren Bereich ist. Scrollen Sie, um weitere Elemente zu sehen.
Listenelement 12
Dieses Element wird nur gerendert, wenn es im sichtbaren Bereich ist. Scrollen Sie, um weitere Elemente zu sehen.
Listenelement 13
Dieses Element wird nur gerendert, wenn es im sichtbaren Bereich ist. Scrollen Sie, um weitere Elemente zu sehen.
Listenelement 14
Dieses Element wird nur gerendert, wenn es im sichtbaren Bereich ist. Scrollen Sie, um weitere Elemente zu sehen.
Listenelement 15
Dieses Element wird nur gerendert, wenn es im sichtbaren Bereich ist. Scrollen Sie, um weitere Elemente zu sehen.
Listenelement 16
Dieses Element wird nur gerendert, wenn es im sichtbaren Bereich ist. Scrollen Sie, um weitere Elemente zu sehen.
Listenelement 17
Dieses Element wird nur gerendert, wenn es im sichtbaren Bereich ist. Scrollen Sie, um weitere Elemente zu sehen.
Listenelement 18
Dieses Element wird nur gerendert, wenn es im sichtbaren Bereich ist. Scrollen Sie, um weitere Elemente zu sehen.
Listenelement 19
Dieses Element wird nur gerendert, wenn es im sichtbaren Bereich ist. Scrollen Sie, um weitere Elemente zu sehen.
Listenelement 20
Dieses Element wird nur gerendert, wenn es im sichtbaren Bereich ist. Scrollen Sie, um weitere Elemente zu sehen.
Farbwähler
Passwort-Stärke-Anzeige
Animations & Effects
Gradient Banner
Ein statischer Gradient-Hintergrund für Ihre Webseite
Text Typing Effekt
Scroll-Triggered Animationen
Fade In
Dieses Element wird eingeblendet, wenn Sie zu ihm scrollen.
Slide In
Dieses Element gleitet von der Seite herein, wenn Sie zu ihm scrollen.
Scale In
Dieses Element vergrößert sich, wenn Sie zu ihm scrollen.
Particle Background
Ein interaktiver Hintergrund mit beweglichen Partikeln, die auf Mausbewegungen reagieren.
Morphing Shapes
Glassmorphism
Der Glassmorphismus-Effekt erzeugt eine transluzente, verschwommene Oberfläche, die an Milchglas erinnert. Er verleiht Elementen Tiefe und eine moderne Ästhetik.
3D Transformationen
Liquid Button
Layout Components
Masonry Grid
Projekt 1
Ein modernes Webprojekt mit React und Next.js
Projekt 2
Eine E-Commerce-Plattform mit Shopify
Projekt 3
Ein Dashboard für Datenanalyse
Projekt 4
Eine mobile App mit React Native
Projekt 5
Ein Content Management System
Projekt 6
Eine Progressive Web App
Split Screen
Linke Seite
Diese Seite könnte für Bilder, Videos oder wichtige Call-to-Actions verwendet werden.
Rechte Seite
Diese Seite könnte für Texte, Formulare oder andere Inhalte verwendet werden. Split-Screen-Layouts sind ideal für Landing Pages oder Anmeldeseiten.
Sticky Header/Sidebar
Sticky Header
Sticky Sidebar
Dashboard
Hier sehen Sie eine Übersicht aller wichtigen Kennzahlen und Aktivitäten. Das Dashboard bietet einen schnellen Überblick über den aktuellen Status Ihrer Projekte und Aufgaben.
Aktiver Bereich: Dashboard
Klicken Sie auf die Links in der Sidebar, um zwischen verschiedenen Bereichen zu navigieren. Die Sidebar bleibt beim Scrollen an ihrer Position, was die Navigation erleichtert.
Inhaltselement 1
Dies ist ein Beispielinhalt für den Bereich "Dashboard". In einer echten Anwendung würden hier relevante Daten und Funktionen angezeigt.
Inhaltselement 2
Dies ist ein Beispielinhalt für den Bereich "Dashboard". In einer echten Anwendung würden hier relevante Daten und Funktionen angezeigt.
Inhaltselement 3
Dies ist ein Beispielinhalt für den Bereich "Dashboard". In einer echten Anwendung würden hier relevante Daten und Funktionen angezeigt.
Fullscreen Sections
Fullscreen Section
Fullscreen-Sections nehmen die gesamte Bildschirmhöhe ein und eignen sich hervorragend für Hero-Bereiche, wichtige Call-to-Actions oder immersive Erlebnisse.
Hero Video Background
Video Background
Video-Hintergründe können eine dynamische und ansprechende Atmosphäre schaffen. Sie eignen sich besonders für Landing Pages oder Produktpräsentationen.
Responsive Tables
| Projekt | Kunde | Status | Deadline | Budget |
|---|---|---|---|---|
| Website Redesign | Acme Inc. | In Arbeit | 15.12.2023 | €5.000 |
| Mobile App | TechCorp | Abgeschlossen | 30.09.2023 | €12.000 |
| E-Commerce Platform | Shop & Go | Geplant | 01.03.2024 | €20.000 |
| CRM Integration | DataSystems | Verzögert | 10.11.2023 | €8.500 |
Website Redesign
In ArbeitMobile App
AbgeschlossenGrid/List View Toggle
Projekte
Projekt 1
Ein modernes Webprojekt mit React und Next.js
Projekt 2
Eine E-Commerce-Plattform mit Shopify
Projekt 3
Ein Dashboard für Datenanalyse
Scrollspy Navigation
Abschnitt 1
Dies ist der Inhalt von Abschnitt 1. Scrollspy-Navigation hebt den aktuellen Abschnitt in der Navigation hervor, während der Benutzer scrollt.
Abschnitt 2
Dies ist der Inhalt von Abschnitt 2. Scrollspy-Navigation verbessert die Benutzererfahrung, indem sie dem Benutzer zeigt, wo er sich auf der Seite befindet.
Abschnitt 3
Dies ist der Inhalt von Abschnitt 3. Scrollspy-Navigation ist besonders nützlich für lange Seiten mit vielen Abschnitten.
Advanced Features
Theming System
Lokalisierung/i18n
Barrierefreiheits-Werkzeuge
Beispieltext mit normalem Kontrast.
Ein hoher Kontrast verbessert die Lesbarkeit für Menschen mit Sehbehinderungen.
Offline-Modus
Audio-Steuerung
Effects
Visual effects to enhance the user interface.
Hover Effect
Move your cursor over this element to see the effect.
Gradient Overlay
Move your cursor over this element to see the effect.
Elements
Basic UI elements for various use cases.