Composants

Créez des interfaces utilisateur belles, accessibles et réactives avec plus de 125 composants Vue optimisés par Tailwind CSS et Reka UI.

Laiement

Composants structurels de base pour organiser la mise en page de votre application et établir une base cohérente pour votre interface utilisateur.

App

Un wrapper pour fournir une configuration globale, des toasts et des infobulles à votre application.

Container

Un élément de mise en page pour centrer et contraindre la largeur de votre contenu.

Error

Un componente de error preconstruido con soporte para NuxtError.

Footer

Un pied de page responsive pour vos liens de site et mentions légales.

Header

Un header responsive pour la navigation de votre site.

Main

Un élément principal qui remplit la hauteur de la fenêtre d

Sidebar

Une barre latérale pliable avec de multiples variantes visuelles.

Splitter

Un ensemble de panneaux redimensionnables séparés par des poignées glissables.

Theme

Un composant headless pour les composants enfants du thème.

Les blocs de construction de l'interface utilisateur essentiels, y compris les boutons, les badges, les avatars, les icônes et d'autres éléments d'interface fondamentaux pour créer des expériences utilisateur intuitives et cohérentes.

Alert

Un appel pour attirer l'attention de l'utilisateur.

Avatar

Un élément img avec support de repli et de Nuxt Image.

avatargroupe

Plusieurs avatars dans un groupe.

Badge

Un texte court pour représenter un statut ou une catégorie.

Banner

Affichez une bannière en haut de votre site Web pour informer les utilisateurs des informations importantes.

Button

Un élément de bouton qui peut agir comme un lien ou déclencher une action.

Calendar

Un composant de calendrier pour sélectionner des dates uniques, plusieurs dates ou des plages de dates.

Card

Afficher le contenu dans une carte avec un en-tête, un corps et un pied de page.

Chip

Un indicateur d'une valeur numérique ou d'un état.

Collapsible

Un élément pliable pour basculer la visibilité de son contenu.

Groupe FieldGroup

Groupe plusieurs éléments de type bouton.

Icon

Un composant pour afficher n'importe quelle icône d'Iconify ou d'un autre composant.

Kbd

Un élément kbd pour afficher une touche de clavier.

Progress

Indicateur indiquant l'avancement d'une tâche.

Progresseur

Une barre de progression divisée en plusieurs segments qui s'additionnent pour un total.

Separator

Sépare le contenu horizontalement ou verticalement.

Skeleton

Un espace réservé à afficher pendant le chargement du contenu.

Formulaire

Composants de formulaire complets pour créer des expériences de saisie utilisateur interactives, notamment des entrées de texte, des sélections, des cases à cocher, des groupes radio, des commutateurs, des curseurs et une validation complète du formulaire.

Checkbox

Un élément d'entrée pour basculer entre les états vérifiés et non vérifiés.

CheckboxGroupe

Ensemble de cases à cocher pour sélectionner plusieurs options dans une liste.

Colorées

Un composant pour sélectionner une couleur.

Fileupload

Un élément d

Form

Un composant de formulaire avec validation intégrée et gestion de la soumission.

Formées Field

Un wrapper pour les éléments de formulaire qui fournit la validation et la gestion des erreurs.

Input

Un élément d'entrée pour entrer du texte.

Inputées

Un composant d

inputMenu

Une saisie automatique avec des suggestions en temps réel.

InputNuméro

Une entrée pour des valeurs numériques avec une plage personnalisable.

Inputrating

Un composant pour afficher et collecter les évaluations des utilisateurs.

Les inputtags

Un élément d'entrée qui affiche des balises interactives.

Inputtemps

Une entrée pour sélectionner un temps.

Listbox

Une liste sélectionnable d'éléments avec recherche, virtualisation et rendu d'éléments enrichi.

Pininput

Un élément d'entrée pour entrer un pin.

Le radiogroupe

Un ensemble de boutons radio pour sélectionner une seule option dans une liste.

Select

Un élément select pour choisir parmi une liste d'options.

SélectionneMenu

Un élément select avancé.

Slider

Une entrée pour sélectionner une valeur numérique dans une plage.

Switch

Un contrôle qui bascule entre deux états.

Textarea

Un élément textarea pour entrer du texte multiligne.

Données

Composants pour l'affichage et l'organisation des données, y compris les tableaux, les accordéons, les carrousels, les chronologies, les arbres et les profils utilisateur.

Accordion

Un ensemble empilé de panneaux pliables.

Carousel

Un carrousel avec mouvement et balayage construit avec Embla.

Empty

Un composant pour afficher un état vide.

Marquee

Un composant pour créer du contenu à défilement infini.

Scrollaire

Un conteneur de défilement flexible avec support de virtualisation.

Table

Un élément de table réactif pour afficher les données en lignes et en colonnes.

Timeline

Un composant qui affiche une séquence d

Tree

Un composant de vue en arborescence pour afficher et interagir avec les structures de données hiérarchiques.

User

Afficher les informations de l

Navigation

Composants pour la navigation de l'utilisateur et l'orientation, y compris les menus, les fils d'Ariane, la pagination, les onglets, les steppers, les liens et les palettes de commandes.

Breadcrumb

Une hiérarchie de liens pour naviguer à travers un site Web.

Commandée

Une palette de commandes avec recherche en texte intégral optimisée par Fuse.js pour une correspondance floue efficace.

Footercolonnes

Une liste de liens sous forme de colonnes à afficher dans votre pied de page.

Link

Un wrapper autour de NuxtLink avec des accessoires supplémentaires.

NavigationMenu

Une liste de liens qui peuvent être affichés horizontalement ou verticalement.

Pagination

Une liste de boutons ou de liens pour naviguer dans les pages.

Stepper

Un ensemble d'étapes qui sont utilisées pour indiquer les progrès à travers un processus en plusieurs étapes.

Tabs

Un ensemble de panneaux d'onglets qui sont affichés un à la fois.

Découvrir

Éléments d'interface utilisateur flottants qui apparaissent au-dessus du contenu principal, y compris les modaux, les popovers, les infobulles, les tiroirs, les diapositives et les menus contextuels.

Contexte Menu

Un menu pour afficher les actions lorsque vous faites un clic droit sur un élément.

Drawer

Un tiroir qui glisse doucement dans et hors de l'écran.

dropdownmenu

Un menu pour afficher les actions lorsque vous cliquez sur un élément.

Modal

Fenêtre de dialogue qui peut être utilisée pour afficher un message ou demander une entrée utilisateur.

Popover

Un dialogue non modal qui flotte autour d'un élément trigger.

Slideover

Une boîte de dialogue qui glisse de n'importe quel côté de l'écran.

Toast

Un message succinct pour fournir des informations ou des commentaires à l'utilisateur.

Tooltip

Pop-up qui révèle des informations lorsque vous survolez un élément.

Page d'accueil

Des sections de marketing et de contenu prédéfinies pour créer des pages de destination, des blogs, des pages de tarification et d'autres documents marketing.

Authentique

Un formulaire personnalisable pour créer des formulaires de login, d

Le blogpost

Un article personnalisable à afficher dans une page de blog.

Les blogposts

Affichez une liste d

Changelogversión

Un article personnalisable à afficher dans un changelog.

Changées versions

Afficher une liste des versions du changelog dans une timeline.

Page

Une mise en page de grille pour vos pages avec des colonnes de gauche et de droite.

Pageancheurs

Une liste d

Pagées

Un côté collant pour afficher votre navigation de page.

Pagebody

Le contenu principal de votre page.

Page-carte

Un composant de carte pré-stylé qui affiche un titre, une description et un lien facultatif.

Pagecolonnes

Un système de mise en page multi-colonnes réactif pour organiser le contenu côte à côte.

PageCta

Une section d

Pagefeature

Un composant pour présenter les caractéristiques clés de votre application.

PageGrid

Un système de grille réactif pour afficher le contenu dans une mise en page flexible.

pageheader

Un header responsive pour vos pages.

Pagehéros

Un héros réactif pour vos pages.

Pagelinaires

Une liste de liens à afficher dans la page.

PageLire

Une disposition de liste verticale pour afficher du contenu dans un format empilé.

PageLogos

Une liste de logos ou d

Pagesection

Une section responsive pour vos pages.

PricePlan

Un plan de tarification personnalisable à afficher dans une page de tarification.

PricePlans

Affichez une liste de plans tarifaires dans une mise en page de grille réactive.

PriceTable

Un composant de tableau de tarification réactif qui affiche des plans de tarification à plusieurs niveaux avec des comparaisons de fonctionnalités.

Découvrez le template **SaaS ph008x sur GitHub pour un exemple concret.

tableau de bord

Composants spécialisés pour la création de tableaux de bord dynamiques avec panneaux redimensionnables, barres latérales pliables, barres d'outils et fonctionnalités de recherche.

DashboardGroupe

Un composant de mise en page fixe qui fournit un contexte pour les composants du tableau de bord avec la gestion et la persistance de l

DashboardDécouvrez

Une barre de navigation responsive à afficher dans un tableau de bord.

dashboardpanneau

Un panneau redimensionnable à afficher dans un dashboard.

DashboardDéveloppement

Une poignée pour redimensionner une barre latérale ou un panel.

DashboardRecherche

Une CommandPalette prête à l

Dashboardsearchbutton

Un bouton prédéfini pour ouvrir le modal DashboardSearch.

Dashboardsavoir

Une barre latérale redimensionnable et pliable à afficher dans un tableau de bord.

DashboardsaisonnièreCollapse

Un bouton pour effondrer la barre latérale sur le desktop.

DashboardsidebarToggle

Un bouton pour basculer la barre latérale sur mobile.

DashboardToolbar

Une barre d

Découvrez les modèles de tableau de bord Nuxt et Vue sur GitHub pour un exemple réel.

AI Chat

Composants pour la construction d'interfaces conversationnelles et de chatbots, alimentés par le [Vercel AI SDKph022xhttps://ai-sdk.dev/).

Chatmessage

Affichez un message de chat avec une icône, un avatar et des actions.

chatmessages

Affichez une liste de messages de chat, conçus pour fonctionner de manière transparente avec le SDK Vercel AI.

Chatière

Une palette de chat pour créer une interface de chatbot à l

Chatprompt

Une Textarea améliorée pour soumettre des invites dans les interfaces de chat AI.

chatpromptsoumission

Un bouton pour soumettre des invites de chat avec gestion automatique du statut.

Chatraisonnement

Afficher un raisonnement ou un processus de réflexion d'IA pliable.

Chatière

Afficher un effet d'animation de miroitement de texte.

chattool

Afficher un état d'invocation d'outil AI pliable.

Découvrez les modèles Nuxt et Vue AI Chat sur GitHub pour un exemple réel.

Editeur: badge{label="4.3+" class="align-text-top"}.

Composants pour la construction d'un éditeur de texte enrichi prenant en charge les types de contenu Markdown, HTML et JSON, optimisés par TipTap.

Editor

Un éditeur de texte enrichi basé sur TipTap avec prise en charge des types de contenu Markdown, HTML et JSON.

ÉditeurDragons

Une poignée glissable pour réorganiser et sélectionner des blocs dans l'éditeur.

Éditeur Emojimu

Un menu de sélection d'emoji qui affiche des suggestions d'emoji lorsque vous tapez le caractère: dans l'éditeur.

ÉditeurMenu

Menu de mention qui affiche les suggestions de l'utilisateur lors de la saisie d'un caractère de déclenchement dans l'éditeur.

ÉditeurSuggestionMenu

Un menu de commande qui affiche des suggestions de mise en forme et d'action lors de la saisie du caractère/dans l'éditeur.

EditeurToolbar

Une barre d'outils personnalisable pour les actions de l'éditeur qui peuvent être affichées sous forme de menu fixe, à bulles ou flottant.

Découvrez le templatesph042x **Editor sur GitHub pour un exemple réel.

Contenu

Composants qui s'intègrent à Content pour les sites de documentation, y compris la table des matières, la recherche, les arbres de navigation et les liens de pages environnantes.