Onderdelen

Opmaak

Kernstructurele componenten voor het organiseren van de lay-out van uw applicatie en het leggen van een consistente basis voor uw gebruikersinterface.

App

Een wikkel om globale configuratie, toasts en tooltips aan uw app te bieden.

Container

Een lay-outelement om de breedte van uw inhoud te centreren en te beperken.

Error

Een vooraf gebouwde foutcomponent met NuxtError-ondersteuning.

Footer

Een responsieve voettekst voor uw sitelinks en juridische kennisgevingen.

Header

Een responsieve header voor uw sitenavigatie.

Main

Een hoofdelement dat de beschikbare viewport-hoogte vult.

Sidebar

Een opvouwbare zijbalk met meerdere visuele varianten.

Splitter

Een set aanpasbare panelen gescheiden door versleepbare handvatten.

Theme

Een hoofdloze component om kindcomponenten te thematiseren.

Element

Essentiële UI-bouwstenen, waaronder knoppen, badges, avatars, pictogrammen en andere fundamentele interface-elementen voor het creëren van intuïtieve en consistente gebruikerservaringen.

Alert

Een oproep om de aandacht van de gebruiker te trekken.

Avatar

Een img-element met fallback en Nuxt Image-ondersteuning.

AvatarGroep

Stapel meerdere avatars in een groep.

Badge

Een korte tekst om een status of een categorie weer te geven.

Banner

Toon een banner bovenaan uw website om gebruikers te informeren over belangrijke informatie.

Button

Een knopelement dat als link kan fungeren of een actie kan activeren.

Calendar

Een kalendercomponent voor het selecteren van enkele datums, meerdere datums of datumbereiken.

Card

Toon inhoud in een kaart met een koptekst, body en voettekst.

Chip

Een indicator van een numerieke waarde of een toestand.

Collapsible

Een opvouwbaar element om de zichtbaarheid van de inhoud te veranderen.

VeldGroep

Groepeer meerdere knopachtige elementen bij elkaar.

Icon

Een component om elk pictogram van Iconify of een ander onderdeel weer te geven.

Kbd

Een kbd-element om een toetsenbordtoets weer te geven.

Progress

Een indicator die de voortgang van een taak aangeeft.

Voortgangsgroep

Een voortgangsbalk opgesplitst in meerdere segmenten die oplopen tot een totaal.

Separator

Scheidt inhoud horizontaal of verticaal.

Skeleton

Een tijdelijke aanduiding om weer te geven terwijl de inhoud wordt geladen.

Formulier

Uitgebreide formuliercomponenten voor het bouwen van interactieve gebruikersinvoerervaringen, inclusief tekstinvoer, selecties, selectievakjes, radiogroepen, schakelaars, schuifregelaars en volledige formuliervalidatie.

Checkbox

Een invoerelement om te schakelen tussen aangevinkte en niet-aangevinkte staten.

CheckboxGroep

Een set selectievakjes om meerdere opties uit een lijst te selecteren.

Kleurkiezer

Een component om een kleur te selecteren.

Bestand uploaden

Een invoerelement om bestanden te uploaden.

Form

Een formuliercomponent met ingebouwde validatie en afhandeling van inzendingen.

FormVeld

Een wrapper voor formulierelementen die validatie en foutafhandeling biedt.

Input

Een invoerelement om tekst in te voeren.

Inputdatum

Een invoercomponent voor datumselectie.

InputMenu

Een invoer voor automatisch aanvullen met realtime suggesties.

Inputnummer

Een invoer voor numerieke waarden met een aanpasbaar bereik.

InputRating

Een component om beoordelingen van gebruikers weer te geven en te verzamelen.

InputTags

Een invoerelement dat interactieve tags weergeeft.

Inputtijd

Een ingang voor het selecteren van een tijd.

Listbox

Een selecteerbare lijst met items met zoeken, virtualisatie en rich item rendering.

PinInput

Een invoerelement om een pin in te voeren.

RadioGroep

Een set keuzerondjes om een enkele optie uit een lijst te selecteren.

Select

Een select element om uit een lijst met opties te kiezen.

SelectMenu

Een geavanceerd doorzoekbaar select element.

Slider

Een invoer om een numerieke waarde binnen een bereik te selecteren.

Switch

Een controle die wisselt tussen twee toestanden.

Textarea

Een tekstgebiedelement om tekst met meerdere regels in te voeren.

Data

Componenten voor het weergeven en organiseren van gegevens, waaronder tabellen, accordeons, carrousels, tijdlijnen, bomen en gebruikersprofielen.

Accordion

Een gestapelde set opvouwbare panelen.

Carousel

Een carrousel met beweging en veeg gebouwd met Embla.

Empty

Een component om een lege toestand weer te geven.

Marquee

Een component om oneindig veel scrollende inhoud te creëren.

ScrollArea

Een flexibele scroll container met virtualisatie ondersteuning.

Table

Een responsief tabelelement om gegevens in rijen en kolommen weer te geven.

Timeline

Een component die een reeks gebeurtenissen weergeeft met datums, titels, pictogrammen of avatars.

Tree

Een boomweergavecomponent om hiërarchische gegevensstructuren weer te geven en ermee om te gaan.

User

Geef gebruikersinformatie weer met naam, beschrijving en avatar.

Navigatie

Componenten voor gebruikersnavigatie en bewegwijzering, inclusief menu 's, broodkruimels, paginering, tabbladen, steppers, links en opdrachtpaletten.

Breadcrumb

Een hiërarchie van links om door een website te navigeren.

Opdrachtpalet

Een opdrachtpalet met zoeken in volledige tekst, mogelijk gemaakt door Fuse.js, voor efficiënte fuzzy matching.

VoetjesKolommen

Een lijst met links als kolommen die in uw voettekst moeten worden weergegeven.

Link

Een wikkel rond NuxtLink met extra rekwisieten.

Navigatiemenu

Een lijst met links die horizontaal of verticaal kunnen worden weergegeven.

Pagination

Een lijst met knoppen of links om door pagina 's te navigeren.

Stepper

Een reeks stappen die worden gebruikt om de voortgang aan te geven via een proces met meerdere stappen.

Tabs

Een set tabpanelen die één voor één worden weergegeven.

Overlay

Drijvende UI-elementen die boven de hoofdinhoud verschijnen, inclusief modals, popovers, tooltips, lades, slideovers en contextmenu 's.

ContextMenu

Een menu om acties weer te geven wanneer u met de rechtermuisknop op een element klikt.

Drawer

Een lade die soepel in en uit het scherm schuift.

DropdownMenu

Een menu om acties weer te geven bij het klikken op een element.

Modal

Een dialoogvenster dat kan worden gebruikt om een bericht weer te geven of om gebruikersinvoer te vragen.

Popover

Een niet-modaal dialoogvenster dat rond een triggerelement zweeft.

Slideover

Een dialoogvenster dat vanaf elke kant van het scherm naar binnen schuift.

Toast

Een beknopt bericht om informatie of feedback te geven aan de gebruiker.

Tooltip

Een pop-up die informatie onthult wanneer u over een element beweegt.

Pagina

Vooraf gebouwde marketing- en inhoudssecties voor het maken van bestemmingspagina 's, blogs, prijspagina 's en ander marketingmateriaal.

Auteursformulier

Een aanpasbaar formulier om aanmeldings-, register- of wachtwoordherstelformulieren te maken.

BlogPlaatsen

Een aanpasbaar artikel om weer te geven op een blogpagina.

Blogberichten

Toon een lijst met blogposts in een responsieve rasterlay-out.

ChangelogVersie

Een aanpasbaar artikel om weer te geven in een changelog.

Veranderingen

Toon een lijst met changelog-versies in een tijdlijn.

Page

Een rasterlay-out voor uw pagina

PaginaAnkers

Een lijst met ankers die op de pagina moeten worden weergegeven.

Pagina opzij

Een sticky opzij om uw paginanavigatie weer te geven.

PaginaLichaam

De belangrijkste inhoud van uw pagina.

Paginakaart

Een vooraf gestileerde kaartcomponent met een titel, beschrijving en optionele link.

PaginaKolommen

Een responsief lay-outsysteem met meerdere kolommen voor het naast elkaar organiseren van inhoud.

PaginaCTA

Een call-to-action-sectie om op uw pagina

PaginaFeature

Een onderdeel om de belangrijkste kenmerken van uw applicatie te laten zien.

PageGrid

Een responsief rastersysteem voor het weergeven van inhoud in een flexibele lay-out.

PageHeader

Een responsieve header voor uw pagina

PageHero

Een responsieve held voor uw pagina

PaginaLinks

Een lijst met links die op de pagina moeten worden weergegeven.

PaginaLijst

Een verticale lijstlay-out voor het weergeven van inhoud in een gestapeld formaat.

PaginaLogos

Een lijst met logo

PaginaSectie

Een responsieve sectie voor uw pagina

PrijzenPlan

Een aanpasbaar prijsplan om op een prijspagina weer te geven.

PrijzenPlannen

Toon een lijst met prijsplannen in een responsieve rasterlay-out.

Prijstabel

Een responsieve prijstabel die gelaagde prijsplannen weergeeft met functievergelijkingen.

Dashboard

Gespecialiseerde componenten voor het bouwen van dynamische dashboards met aanpasbare panelen, opvouwbare zijbalken, werkbalken en zoekfunctionaliteit.

DashboardGroep

Een vaste lay-outcomponent die context biedt voor dashboardcomponenten met zijbalkstatusbeheer en persistentie.

DashboardNavbar

Een responsieve navbar om weer te geven in een dashboard.

DashboardPaneel

Een aanpasbaar paneel om weer te geven in een dashboard.

DashboardResizeHandle

Een handvat om het formaat van een zijbalk of paneel te wijzigen.

DashboardZoeken

Een kant-en-klaar CommandPalette om toe te voegen aan uw dashboard.

DashboardSearchButton

Een vooraf gestileerde knop om de DashboardSearch-modal te openen.

DashboardZijbalk

Een aanpasbare en opvouwbare zijbalk om in een dashboard weer te geven.

DashboardSidebarCollapse

Een knop om de zijbalk op het bureaublad samen te vouwen.

DashboardSidebarToggle

Een knop om de zijbalk op mobiel te wisselen.

DashboardToolbar

Een werkbalk om onder de navbar in een dashboard weer te geven.

AI Chatten

Componenten voor het bouwen van gespreksinterfaces en chatbots, mogelijk gemaakt door de Vercel AI SDK.

ChatBericht

Geef een chatbericht weer met pictogram, avatar en acties.

ChatBerichten

Geef een lijst met chatberichten weer, ontworpen om naadloos samen te werken met Vercel AI SDK.

ChatPalet

Een chatpalet om een chatbot-interface in een overlay te maken.

ChatPrompt

Een verbeterd Textarea voor het indienen van prompts in AI-chatinterfaces.

ChatPromptVerzenden

Een knop voor het verzenden van chatprompts met automatische statusafhandeling.

ChatRedeneren

Toon een opvouwbaar AI-redeneer- of denkproces.

ChatShimmer

Geef een animatie-effect met tekstglans weer.

ChatTool

Geef de aanroepstatus van een opvouwbare AI-tool weer.

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

Componenten voor het bouwen van een rich text-editor met ondersteuning voor markdown-, HTML- en JSON-inhoudstypen, mogelijk gemaakt door TipTap.

Editor

Een rich text editor-component op basis van TipTap met ondersteuning voor markdown, HTML en JSON-inhoudstypen.

EditorDragHandle

Een versleepbare handgreep voor het opnieuw ordenen en selecteren van blokken in de editor.

EditorEmojiMenu

Een emoji-kiezersmenu dat emoji-suggesties weergeeft bij het typen van het :-teken in de editor.

EditorMentionMenu

Een vermeldingsmenu dat gebruikerssuggesties weergeeft bij het typen van een triggerteken in de editor.

EditorSuggestionMenu

Een opdrachtmenu dat opmaak- en actiesuggesties weergeeft bij het typen van het / -teken in de editor.

EditorToolbar

Een aanpasbare werkbalk voor editoracties die kunnen worden weergegeven als vast, bubbel- of zwevend menu.

Inhoud

Componenten die integreren met Content voor documentatiesites, waaronder inhoudsopgave, zoeken, navigatiebomen en omliggende paginalinks.

InhoudNavigatie

Een navigatiecomponent in accordeonstijl voor het organiseren van paginalinks.

InhoudZoeken

Een kant-en-klaar CommandPalette om toe te voegen aan uw documentatie.

InhoudZoekenButton

Een vooraf gestileerde knop om de ContentSearch-modaal te openen.

InhoudOmgeving

Een paar eerdere en volgende links om tussen pagina

InhoudToc

Een kleverige inhoudsopgave met automatische actieve ankerlink-markering.

Kleurmodus

Componenten die kunnen worden geïntegreerd met Color Mode voor het wisselen van thema 's tussen licht, donker en systeemvoorkeuren.

Componenten die kunnen worden geïntegreerd met Color Mode voor het wisselen van thema 's tussen licht, donker en systeemvoorkeuren.

KleurModeAvatar

Een Avatar met een andere bron voor lichte en donkere modus.

KleurModeKnop

Een knop om te schakelen tussen lichte en donkere modus.

ColorModeAfbeelding

Een beeldelement met een andere bron voor lichte en donkere modus.

ColorModeSelecteer

A Selecteer om te schakelen tussen systeem, donkere en lichte modus.

ColorModeSchakelaar

Een schakelaar om te schakelen tussen de lichte en donkere modus.

i18n

Componenten die integreren met i18n voor internationalization en locale management.

Componenten die integreren met i18n voor internationalization en locale management.

LocaleSelecteer

A Selecteer om te schakelen tussen landinstellingen.