Komponenten

Alle IVRY-UI-Elemente basieren auf Nuxt UI v4 Primitives. Hier die wichtigsten mit Live-Demo und Copy-Snippet.

Buttons

Primary = Forest (Standard-CTA), Secondary = Gold (Upsell, Premium), Neutral = Zinc (sekundäre Aktionen). Varianten: solid, outline, soft, ghost, link.

Farben · Solid

Varianten · Primary

Größen & Icons

vue

<UButton color="primary" variant="solid">
  Jetzt starten
</UButton>
<UButton color="primary" variant="outline" icon="i-lucide-arrow-right">
  Mehr erfahren
</UButton>

Form-Inputs

Inputs, Selects und Textarea im IVRY-Look. Labels sind Pflicht, Error-State via color='error'.

Domain

Plan

Notizen

Cards

Der Grundbaustein fürs Portal. Header, Body, Footer über Slots.

Pro-Plan

Business-Plan

Priority Support

1 GB RAM, 2 vCPU, 50 GB SSD, 25 Mailboxen, dedizierter Support.

vue

<UCard>
  <template #header>
  <h3 class="text-lg font-semibold">Pro-Plan</h3>
  </template>
  <p>14,90 € / Monat inkl. 19 % MwSt.</p>
  <template #footer>
  <UButton color="primary">Plan wählen</UButton>
  </template>
</UCard>

Alerts & Badges

Für Feedback im Flow. Alert für ganze Blöcke, Badge für Status-Labels inline.

Domain verfügbar

ivry.de kann direkt registriert werden.

DNS-Propagation läuft

Die Nameserver-Umstellung kann bis zu 24 Stunden dauern.

Zahlung fehlgeschlagen

Bitte hinterlege eine gültige SEPA- oder Kartenverbindung.

Wartungsfenster geplant

Sonntag 03:00–04:00 Uhr, ausschließlich read-only Phase.

Forest Subtle Outline Gold · Premium aktiv pending fehlgeschlagen gekündigt

vue

<UAlert
  color="success"
  variant="subtle"
  title="Domain verfügbar"
  description="ivry.de kann direkt registriert werden."
  icon="i-lucide-check-circle"
/>

Tabs

Im Portal für Context-Switches innerhalb einer Seite. Props nutzen default-value statt v-model.

Inhalt für Übersicht — hier steht der tab-spezifische Content.

Modal & Drawer

Modals für Confirms und kleine Flows, Drawer für längere Formulare auf Mobile.