Komponenten

Erstellen Sie schöne, zugängliche und reaktionsschnelle Benutzeroberflächen mit über 125 Vue-Komponenten, die von Tailwind CSS und Reka UI unterstützt werden.

Layout

Kernstrukturkomponenten für die Organisation des Layouts Ihrer Anwendung und die Schaffung einer konsistenten Grundlage für Ihre Benutzeroberfläche.

App

Ein Wrapper, um globale Konfiguration, Toast und Tooltips für Ihre App bereitzustellen.

Container

Ein Layout-Element, um die Breite Ihres Inhalts zu zentrieren und einzuschränken.

Error

Eine vorgefertigte Fehlerkomponente mit NuxtError-Unterstützung.

Footer

Eine ansprechende Fußzeile für Ihre Website-Links und rechtliche Hinweise.

Header

Responsive Header für die Navigation Ihrer Website.

Main

Ein Hauptelement, das die verfügbare Viewport-Höhe ausfüllt.

Sidebar

Eine zusammenklappbare Seitenleiste mit mehreren visuellen Varianten.

Splitter

Eine Reihe von größenveränderbaren Panels, die durch ziehbare Griffe getrennt sind.

Theme

Eine Headless-Komponente zum Theme-Child-Komponenten.

Element Bearbeiten

Wesentliche UI-Bausteine wie Buttons, Badges, Avatare, Icons und andere grundlegende Interface-Elemente für die Erstellung intuitiver und konsistenter Benutzererfahrungen.

Alert

Ein Callout, um die Aufmerksamkeit des Benutzers zu erregen.

Avatar

Ein img-Element mit Fallback-und Nuxt-Image-Unterstützung.

Die AvatarGroup

Mehrere Avatare in einer Gruppe.

Badge

Ein kurzer Text, der einen Status oder eine Kategorie darstellt.

Banner

Platzieren Sie ein Banner oben auf Ihrer Website, um die Benutzer über wichtige Informationen zu informieren.

Button

Ein Button-Element, das als Link oder als Auslöser einer Aktion fungieren kann.

Calendar

Eine Kalenderkomponente zum Auswählen einzelner Datumsangaben, mehrerer Datumsangaben oder Datumsbereiche.

Card

Zeigen Sie Inhalte in einer Karte mit Kopf, Körper und Fußzeile an.

Chip

Ein Indikator für einen numerischen Wert oder einen Zustand.

Collapsible

Ein zusammenklappbares Element, um die Sichtbarkeit seines Inhalts zu ändern.

Fieldgroup Bearbeiten

Gruppieren Sie mehrere knopfähnliche Elemente zusammen.

Icon

Eine Komponente, um ein beliebiges Symbol von Iconify oder einer anderen Komponente anzuzeigen.

Kbd

Ein kbd-Element, um eine Tastaturtaste anzuzeigen.

Progress

Ein Indikator, der den Fortschritt einer Aufgabe anzeigt.

Fortschrittsgruppe

Ein Fortschrittsbalken, der in mehrere Segmente unterteilt ist, die sich zu einer Gesamtsumme addieren.

Separator

Trennt Inhalte horizontal oder vertikal.

Skeleton

Ein Platzhalter, der angezeigt wird, während der Inhalt geladen wird.

Umfassende Formularkomponenten zum Erstellen interaktiver Benutzereingabeerlebnisse, einschließlich Texteingaben, Auswahlmöglichkeiten, Kontrollkästchen, Radiogruppen, Schaltern, Schiebereglern und vollständiger Formularvalidierung.

Checkbox

Ein Eingabeelement zum Umschalten zwischen checked und unchecked states.

Die CheckboxGroup

Eine Reihe von Kontrollkästchen zum Auswählen mehrerer Optionen aus einer Liste.

Der Colorpicker

Eine Komponente zum Auswählen einer Farbe.

File-Upload Bearbeiten

Ein Eingabeelement zum Hochladen von Dateien.

Form

Eine Formularkomponente mit eingebauter Validierung und Handhabung der Einreichung.

Das Formfeld

Ein Wrapper für Formularelemente, der Validierung und Fehlerbehandlung bietet.

Input

Ein Eingabeelement zum Eingeben von Text.

Inputdaten

Eine Eingabekomponente zur Datumsauswahl.

Inputmenu hinzufügen

Autocomplete-Eingabe mit Echtzeit-Vorschlägen.

Inputnummer

Eine Eingabe für numerische Werte mit einem anpassbaren Bereich.

Inputation

Eine Komponente, um Bewertungen von Benutzern anzuzeigen und zu sammeln.

Input-Tags

Ein Input-Element, das interaktive Tags anzeigt.

Inputzeit

Ein Input zur Auswahl einer Zeit.

Listbox

Eine auswählbare Liste von Elementen mit Suche, Virtualisierung und Rich Item Rendering.

PinEingang

Ein Eingabeelement, um einen Pin einzugeben.

Die Radiogruppe

Eine Reihe von Radiobuttons, um eine einzelne Option aus einer Liste auszuwählen.

Select

Ein select-Element zur Auswahl aus einer Liste von Optionen.

AuswählenMenü

Ein erweitertes durchsuchbares Select-Element.

Slider

Eine Eingabe zum Auswählen eines numerischen Werts innerhalb eines Bereichs.

Switch

Eine Kontrolle, die zwischen zwei Staaten wechselt.

Textarea

Ein Textarea-Element zur Eingabe von mehrzeiligem Text.

Data ist ein

Komponenten zur Anzeige und Organisation von Daten, einschließlich Tabellen, Akkordeons, Karussells, Zeitleisten, Bäumen und Benutzerprofilen.

Accordion

Ein gestapeltes Set von zusammenklappbaren Panels.

Carousel

Ein Karussell mit Bewegung und Swipe, das mit Embla gebaut wurde.

Empty

Eine Komponente, die einen leeren Zustand anzeigt.

Marquee

Eine Komponente, um unendlich scrollenden Inhalt zu erstellen.

Scrollarea

Ein flexibler Scroll-Container mit Virtualisierungsunterstützung.

Table

Ein responsives Tabellenelement, um Daten in Zeilen und Spalten anzuzeigen.

Timeline

Eine Komponente, die eine Abfolge von Ereignissen mit Datum, Titel, Icons oder Avataren anzeigt.

Tree

Eine Baumansichtkomponente zum Anzeigen und Interagieren mit hierarchischen Datenstrukturen.

User

Benutzerinformationen mit Name, Beschreibung und Avatar anzeigen.

Navigation (Deutsche Übersetzung)

Komponenten für die Benutzer-Navigation und Wegfindung, einschließlich Menüs, Breadcrumbs, Paginierung, Tabs, Stepper, Links und Befehlspaletten.

Breadcrumb

Eine Hierarchie von Links zum Navigieren durch eine Website.

Kommandobrücke

Eine Befehlspalette mit Volltextsuche, die von Fuse.js für effizientes Fuzzy-Matching unterstützt wird.

Footercolumns Bearbeiten

Eine Liste von Links als Spalten, die in Ihrer Fußzeile angezeigt werden sollen.

Link

Ein Wrapper um NuxtLink mit zusätzlichen Requisiten.

Navigationsmenü

Eine Liste von Links, die horizontal oder vertikal angezeigt werden können.

Pagination

Eine Liste von Schaltflächen oder Links zum Navigieren durch Seiten.

Stepper

Eine Reihe von Schritten, die verwendet werden, um den Fortschritt in einem mehrstufigen Prozess anzuzeigen.

Tabs

Eine Reihe von Tab-Panels, die jeweils einzeln angezeigt werden.

Overlay (englisch)

Floating UI-Elemente, die über dem Hauptinhalt erscheinen, einschließlich Modals, Popovers, Tooltips, Schubladen, Slideovers und Kontextmenüs.

Kontextmenü

Ein Menü zum Anzeigen von Aktionen beim Rechtsklick auf ein Element.

Drawer

Eine Schublade, die reibungslos in und aus dem Bildschirm gleitet.

Dropdownmenu hinzufügen

Ein Menü zum Anzeigen von Aktionen beim Klicken auf ein Element.

Modal

Ein Dialogfenster, in dem eine Nachricht angezeigt oder Benutzereingaben angefordert werden können.

Popover

Ein nicht-modaler Dialog, der um ein Triggerelement herum schwebt.

Slideover

Ein Dialog, der von einer beliebigen Seite des Bildschirms eingeblendet wird.

Toast

Eine kurze Nachricht, um dem Benutzer Informationen oder Feedback zu geben.

Tooltip

Ein Popup, das Informationen anzeigt, wenn der Mauszeiger über ein Element bewegt wird.

Page

Vorgefertigte Marketing-und Inhaltsabschnitte zum Erstellen von Zielseiten, Blogs, Preisseiten und anderen Marketingmaterialien.

Author sein

Ein anpassbares Formular zum Erstellen von Login-, Registrierungs-oder Passwort-Rücksetzformularen.

Blogpost zu

Ein anpassbarer Artikel, der in einer Blog-Seite angezeigt werden soll.

Blogposts Bearbeiten

Zeigt eine Liste von Blog-Posts in einem responsiven Rasterlayout an.

Changelog Version Bearbeiten

Ein anpassbarer Artikel, der in einem Changelog angezeigt werden soll.

Änderungen Versionen

Zeigt eine Liste der Changelog-Versionen in einer Zeitleiste an.

Page

Ein Raster-Layout für Ihre Seiten mit linken und rechten Spalten.

PageAncher

Eine Liste der Anker, die auf der Seite angezeigt werden sollen.

Seitenansicht

Ein Sticky zur Seite, um die Navigation Ihrer Seite anzuzeigen.

Seitenkörper

Der Hauptinhalt Ihrer Seite.

PageCard

Eine vorgestylte Kartenkomponente, die einen Titel, eine Beschreibung und einen optionalen Link anzeigt.

PageKolumnen

Ein responsives mehrspaltiges Layoutsystem zur Organisation von Inhalten nebeneinander.

Seite

Ein Call-to-Action-Abschnitt, der auf Ihren Seiten angezeigt werden soll.

PageFeature

Eine Komponente, um die wichtigsten Funktionen Ihrer Anwendung zu präsentieren.

PageGrid

Ein responsives Grid-System zur Darstellung von Inhalten in einem flexiblen Layout.

Seitenheader

Responsive Header für Ihre Seiten

PageHero ist

Ein responsive Held für Ihre Seiten.

Seitenlinks

Eine Liste von Links, die auf der Seite angezeigt werden sollen.

Seite

Ein vertikales Listenlayout zur Anzeige von Inhalten in einem gestapelten Format.

PageLogos

Eine Liste von Logos oder Bildern, die auf Ihren Seiten angezeigt werden sollen.

Pagesection

Eine responsive Seite für Ihre Seiten.

Preisplan

Ein anpassbarer Preisplan, der auf einer Preisseite angezeigt wird.

Preisplaner

Zeigen Sie eine Liste von Preisplänen in einem responsiven Rasterlayout an.

Preisliste

Eine responsive Preistabellenkomponente, die abgestufte Preispläne mit Feature-Vergleichen anzeigt.

Schauen Sie sich das SaaS template auf GitHub an, um ein Beispiel aus der Praxis zu erhalten.

dashboard (englisch)

Spezialisierte Komponenten zum Erstellen dynamischer Dashboards mit anpassbaren Panels, zusammenklappbaren Seitenleisten, Symbolleisten und Suchfunktionen.

Die Dashboard-Gruppe

Eine feste Layoutkomponente, die Kontext für Dashboard-Komponenten mit Sidebar-Statusverwaltung und Persistenz bereitstellt.

Dashboard-Anzeige

Eine responsive Navbar, die in einem Dashboard angezeigt wird.

Das DashboardPanel

Ein anpassbares Panel, das in einem Dashboard angezeigt werden kann.

Dashboard-Steuerung

Ein Handle, um eine Sidebar oder ein Panel zu skalieren.

Dashboardsuche

Eine gebrauchsfertige CommandPalette zum Hinzufügen zu Ihrem Dashboard.

Der DashboardSearchButton

Ein vordefinierter Button zum Öffnen des DashboardSearch-Modals.

Dashboard-Seitenleiste

Eine skalierbare und zusammenklappbare Seitenleiste, die in einem Dashboard angezeigt wird.

DashboardSidebarCollapse (Übersicht)

Ein Button, um die Sidebar auf dem Desktop zu reduzieren.

DashboardSeitenbarToggle

Ein Button zum Umschalten der Seitenleiste auf dem Handy.

Die DashboardToolbar

Eine Toolbar, die unter der Navbar in einem Dashboard angezeigt wird.

Schauen Sie sich die Dashboard-Vorlagen Nuxt und Vue auf GitHub an, um ein Beispiel aus der Praxis zu erhalten.

AI Chat-Funktion.

Komponenten für den Aufbau von Konversationsschnittstellen und Chatbots, unterstützt durch den Vercel AI SDK.

Chatmessage

Anzeige einer Chat-Nachricht mit Symbol, Avatar und Aktionen.

Chatnachrichten

Zeigen Sie eine Liste von Chat-Nachrichten an, die für die nahtlose Zusammenarbeit mit dem Vercel AI SDK entwickelt wurden.

ChatPalette

Eine Chat-Palette zum Erstellen einer Chatbot-Oberfläche innerhalb eines Overlays.

Chatprompt

Ein erweitertes Textarea zum Senden von Eingabeaufforderungen in KI-Chat-Schnittstellen.

ChatPromptSubmit

Eine Schaltfläche zum Senden von Chat-Aufforderungen mit automatischer Statusbehandlung.

Chatreasoning Bearbeiten

Zeigen Sie eine zusammenklappbare KI Argumentation oder Denkprozess.

Chatschimmer

Zeigt einen Text Shimmer Animationseffekt an.

Das Chattool

Zeigt den Status eines zusammenklappbaren AI-Tools an.

Schauen Sie sich die Nuxt und Vue AI Chat-Vorlagen auf GitHub an, um ein Beispiel aus der Praxis zu erhalten.

Editor: badge{label="4.3+" class="align-text-top"} Bearbeiten | Quelltext bearbeiten

Komponenten zum Erstellen eines Rich-Text-Editors mit Unterstützung für Markdown-, HTML-und JSON-Inhaltstypen, unterstützt von TipTap.

Editor

Eine Rich-Text-Editor-Komponente, die auf TipTap basiert und Markdown-, HTML-und JSON-Inhaltstypen unterstützt.

Redaktion Menu

Ein Mention-Menü, das Benutzervorschläge anzeigt, wenn ein Triggerzeichen im Editor eingegeben wird.

Redaktion Menu

Ein Befehlsmenü, das Formatierungs-und Handlungsvorschläge anzeigt, wenn Sie das Zeichen/im Editor eingeben.

Editor-Toolbar Bearbeiten

Eine anpassbare Symbolleiste für Editor-Aktionen, die als festes, Bubble-oder Floating-Menü angezeigt werden können.

Schauen Sie sich den Editor template auf GitHub an, um ein Beispiel aus der Praxis zu erhalten.

Inhalt

Komponenten, die in Content für Dokumentationswebsites integriert werden können, einschließlich Inhaltsverzeichnis, Suche, Navigationsbäume und Links zu umgebenden Seiten.