Inventur

Figma ↔ Code Mapping

Side-by-Side-Vergleich der 27 UI-Primitives in src/components/ui/ mit den Komponenten in der Figma-Library KPT Designsystem. Linke Spalte: Code-Komponente live gerendert. Rechte Spalte: Figma-Live-Embed (lädt on-demand beim Scrollen) + Link in den Figma-File.

21 Matches⚠ 2 zu prüfen3 TBD6 Lücken

Matches — Figma-Komponente vorhanden

Button

components/ui/button.tsxMatch
Code (live)
Figma — Button
157 Variants
In Figma öffnen
Notiz: Grosse Variant-Matrix: 7 Variants × 6 Sizes × 5 States. Code hat 6 Varianten (primary/secondary/tertiary/quaternary/ghost/link) und 6 Sizes — Figma hat 'Circular*'-Varianten zusaetzlich.

Input

components/ui/input.tsxMatch
Code (live)
Figma — Input
42 Variants
In Figma öffnen

Badge

components/ui/badge.tsxMatch
Code (live)
GrundversicherungZusatzversicherungenAktuelles GerätNeue GrundversicherungSuccessDangerNeutral
Figma — Badge
12 Variants
In Figma öffnen
Notiz: Variant-Mismatch: Code hat 7 Color-Varianten (alpha/beta/gamma/delta + success/danger/neutral), Figma nur 4 (alpha/beta/gamma/delta). success/danger/neutral fehlen in Figma.

Card

components/ui/card.tsxMatch
Code (live)
Card Title
Default Card mit Padding und white-Background.
Figma — card
10 Variants
In Figma öffnen
Notiz: Plus separate `Cardtitle`-Komponente (`13024:7207`).

Switch

components/ui/switch.tsxMatch
Code (live)
Figma — Switch
3 Variants
In Figma öffnen

ButtonToggleGroup

components/ui/button-toggle-group.tsxMatch
Code (live)
Figma — Toggle
4 Variants
In Figma öffnen
Notiz: Plus `BuildingBlock/Toggle items` (`2711:6770`) fuer Einzel-Items. Naming-Drift Code↔Figma.

Dialog

components/ui/dialog.tsxMatch
Code (live)
Figma — Dialog
3 Variants
In Figma öffnen
Notiz: Setzt sich aus mehreren Buildingblocks zusammen (`Dialog/Window`, `Dialog/Footer`, `DialogHeader`). Im Mapping-File ist Dialog die Container-Klammer.

Tabs

components/ui/tabs.tsxMatch
Code (live)
Figma — Tabs
5 Variants
In Figma öffnen

Popover

components/ui/popover.tsxMatch
Code (live)
Figma — Popover V2
8 Variants
In Figma öffnen
Notiz: Library hat noch eine alte `Popover` (`120:7164`) — V2 ist die neuere.

Toast

components/ui/toast.tsxMatch
Code (live)

Beispiel-Notification (info-Variante).

Figma — Toast
2 Variants
In Figma öffnen

Divider

components/ui/divider.tsxMatch
Code (live)
Figma — divider
5 Variants
In Figma öffnen

DropZone

components/ui/dropzone.tsxMatch
Code (live)

Dokumente zum Hochladen hier reinziehen und ablegen.

PNG, JPG, TIFF max. 30MB

Figma — Dropzone
3 Variants
In Figma öffnen

Label

components/ui/label.tsxMatch
Code (live)
Figma — Label
7 Variants
In Figma öffnen

Alert

components/ui/alert.tsxMatch
Code (live)
Beispiel-Hinweis im Alert-Pattern.
Figma — SimpleAlert
13 Variants
In Figma öffnen
Notiz: Naming-Drift Code (Alert) ↔ Figma (SimpleAlert). Es gibt zusaetzlich `Alert Dialog` (`2001:11670`) als andere Variante.

Checkbox

components/ui/checkbox.tsxMatch
Code (live)
Figma — Checkbox fields
24 Variants
In Figma öffnen
Notiz: Plus `.Building Block / Checkbox Item` (`92:1419`) fuer Einzel-Checkbox ohne Label-Wrapper.

CollapsibleSection

components/berater-vermittler/collapsible-section.tsxMatch
Code (live)
Kein Renderer hinterlegt.
Figma — Accordion
6 Variants
In Figma öffnen
Notiz: Plus `.Building Block / Accordionitems` (`4934:25889`, 9 Variants) fuer Einzel-Items. Code hat optional `actionRight`-Slot — pruefen ob Figma das auch hat.

DateInput

components/ui/date-input.tsxMatch
Code (live)
Figma — Input
42 Variants
In Figma öffnen
Notiz: Kein eigenes Figma-Component — Option A gewaehlt: komponiert aus Input + Trailing-Kalender-Icon. Code rendert das lucide `Calendar` (kpt-gray-600, 20px); Figma-Pendant ist das schlichte `Calendar`-Icon (NICHT `Calendar Date` mit Datumszahl). Formfield haette zwar eine Variante `Type=Date`, die rendert aber Ziffern-Slots — fuer Screen-Treue NICHT verwenden (siehe docs/figma-import.md).

FormField

components/ui/form-field.tsxMatch
Code (live)
Figma — Formfield
42 Variants
In Figma öffnen
Notiz: 42 Variants — sehr ausgepraegtes Variant-Set (vermutlich Label-Position × Required × Error × Helper × Disabled). Im Code ein duenner Wrapper (Label + Input + Error/Helper).

SelectInput

components/ui/select-input.tsxMatch
Code (live)
Figma — Input
42 Variants
In Figma öffnen
Notiz: Kein eigenes Figma-Component — Option A gewaehlt: komponiert aus Input + Trailing-`chevron-down`-Icon. Formfield haette zwar eine Variante `Type=Select`, fuer Screen-Treue wird aber Input + Chevron-Overlay genommen (analog DateInput, siehe docs/figma-import.md).

Zu prüfen — möglicher Match, noch nicht verifiziert

Diese Code-Komponenten haben in der Figma-Library einen möglichen Match, aber das UX-Pattern oder der Scope ist nicht eindeutig identisch. Bitte inhaltlich vergleichen und je nach Ergebnis nach „Matches" oder „Lücken" verschieben.

VvgSection (BV+KR)

components/{berater-vermittler,kundenrechner}/vvg-section.tsx⚠ Zu prüfen
Code (live)
Kein Renderer hinterlegt.
Figma — .Building Block / VVG Accordion
10 Variants
In Figma öffnen
⚠ Noch zu prüfen: Semantisch verwandt (VVG-Produktauswahl), aber UX-Pattern unterschiedlich: Code zeigt Multi-Select + Tier-Picker mit Tabs (KR) bzw. Liste (BV); Figma 'VVG Accordion' ist ein Accordion-Pattern. Inhaltlich vergleichen ob das die richtige Match-Komponente ist.
Notiz: Import-Befund (03.06.2026): Die EINZELNE VVG-Produktzeile (collapsed: Checkbox + Name + 'pro Monat CHF' + Chevron) ist 1:1 ein Item der Library-Komponente `InsuranceAccordion` (Set 12959:30068, Variant device=desktop). Beim Zusatzversicherungs-Screen-Import wurde die Zeile aus genau diesem Building Block (`.Building Block / Accordionitems`) instanziiert. Das Building-Block-Item ist NICHT eigenständig publiziert (Name mit '.') — Zugriff nur via Klon aus einer InsuranceAccordion-Instanz. Die Gruppen-Ebene (Multi-Select/Tabs) bleibt Custom.

InsuranceCard

components/insurance-card.tsx⚠ Zu prüfen
Code (live)
Kein Renderer hinterlegt.
Figma — InsuranceAccordion
4 Variants
In Figma öffnen
⚠ Noch zu prüfen: Code 'InsuranceCard' ist eine Card-Komponente; Figma 'InsuranceAccordion' ist ein Accordion. Naming legt nahe dass beides dieselbe Domain (Versicherungs-Darstellung) addressiert, aber UX-Pattern unterschiedlich. Pruefen ob es dasselbe Konzept oder zwei verschiedene UI-Bausteine sind.
Notiz: ACHTUNG Duplikat in der Library: `InsuranceAccordion` existiert ZWEIMAL — die hier gemappte (12959:30068, 4 Device-Varianten, aktuell) und eine aeltere (5667:8140, 6 Varianten mit State=collapsed/expanded). Beim Instanziieren die neue (12959:30068) nehmen. Verwandt: screen-level `InsuranceOverview` (3152:11244, 9 Varianten OKP/VVG/OKP+VVG x Device) + `InsuranceCostOverview` (3673:24252) + `InsuranceCostParticipation` (2929:17061) — Figma-only Composites ohne 1:1-Code-Pendant (entsprechen dem ganzen Versicherungs-Step bzw. der Kosten-/Sidebar-Darstellung).

TBD — Figma-Match unklar

Für diese Code-Komponenten ist in Figma keine klare Komponente identifizierbar. Muss im Designteam geklärt werden, ob eine passende Komponente existiert oder neu angelegt werden muss.

Lücken — kein direktes Figma-Pendant

ActionSheet

components/ui/action-sheet.tsxLücke
Code (live)
Figma
Keine direkte Figma-Komponente
  • Option A: Dialog wiederverwenden (Mobile-Variante)
    ActionSheet ist auf Mobile ein Bottom-Sheet, auf Desktop ein centered Modal. Kann mit Dialog gemappt werden.
  • Option B: Eigene Figma-Komponente bauen
    Klare Trennung in Figma als 'ActionSheet'-Komponente.

AutocompleteInput

components/ui/autocomplete-input.tsxLücke
Code (live)
Figma
Keine direkte Figma-Komponente
  • Option A: Aus Input + Dropdown komponieren
    Beim Export setzt das Script Input + Popover/Dropdown zusammen.
  • Option B: Eigene Figma-Komponente bauen
    Eigene Komponente mit Typeahead-State.

Combobox / ComboboxSingle

components/ui/combobox.tsxLücke
Code (live)
Figma
Keine direkte Figma-Komponente
  • Option A: Aus Input + Chips + Dropdown komponieren
    Beim Export aus mehreren Primitives zusammenbauen.
  • Option B: Eigene Figma-Komponente bauen
    Multi-Select mit Chips als eigene Komponente.

CompletenessRing

components/ui/completeness-ring.tsxLücke
Code (live)
Figma
Keine direkte Figma-Komponente
  • Option A: Bewusst nicht in Figma
    Beim Export als statisches PNG einbetten oder per Frame-Placeholder darstellen.
  • Option B: Eigene Figma-Komponente mit 5 Snapshots (0/25/50/75/100%)
    Diskrete Snapshots in Figma, Code interpoliert.
Notiz: Custom-SVG mit Color-Ramp. Schwer in Figma als Komponente abzubilden — eher als 'gerenderte Variant' pro Prozent-Wert.

PlzOrtInput

components/ui/plz-ort-input.tsxLücke
Code (live)
Figma
Keine direkte Figma-Komponente
Notiz: Spezialisierter AutocompleteInput. Mapping erbt von AutocompleteInput, sobald das geloest ist.

StreetAddressInput

components/ui/street-address-input.tsxLücke
Code (live)
Figma
Keine direkte Figma-Komponente
Notiz: Spezialisierter AutocompleteInput. Mapping erbt von AutocompleteInput, sobald das geloest ist.

Nur im Code — Komposite & Page-Templates

Diese Komponenten existieren ausschliesslich im Code (kein Figma-Pendant). Gruppiert nach Library-Potential: Cross-domain Komposite sollten priorisiert in Figma aufgenommen werden. Domain-Komposite sind Kandidaten für eine separate "KPT-Strecken-Komposite"-Sektion. Page-Templates gehören nicht in eine UI-Library.

Cross-domain Komposite

4 Komponenten

Werden in mehreren Strecken wiederverwendet. Hoechster Library-ROI — sollten priorisiert in Figma angelegt werden.

  • BestandViewcomponents/berater-vermittler/bestand-view.tsx
    Genutzt in: Berater-Vermittler, Kundenportal, Magic-Link, Comparis
    4 Strecken — read-only Personen-Karte. 1:1 in Figma sinnvoll.
    Hoch
  • EditPersonalDataDialogcomponents/kundenportal/edit-personal-data-dialog.tsx
    Genutzt in: Kundenportal, Magic-Link, Comparis
    3 Strecken — Modal fuer Stammdaten-Bearbeitung.
    Hoch
  • LanguageSelectorcomponents/language-selector.tsx
    Genutzt in: im Header eingebettet
    Eng mit Header gekoppelt — sollte als Header-Variant in Figma abgebildet werden, nicht als eigene Library-Komponente. Nur 1 Consumer (Header).
    Niedrig
  • PulseLeistungenDialogcomponents/berater-vermittler/pulse-leistungen-dialog.tsx
    Genutzt in: Berater-Vermittler, Kundenrechner
    Wiederverwendete Leistungstabelle Eco/Top/Premium.
    Hoch

Domain-Komposite

22 Komponenten

Nur in einer Strecke genutzt, aber als Pattern Library-wuerdig. Optional: eigene Library-Sektion 'KPT-Strecken-Komposite' in Figma.

  • PersonCardSection (BV)components/berater-vermittler/person-card-section.tsx
    Genutzt in: Berater-Vermittler
    Editor-Block-Pattern
    Hoch
  • PaymentDetailsSectioncomponents/berater-vermittler/payment-details-section.tsx
    Genutzt in: Berater-Vermittler
    Hoch
  • ContactDataSectioncomponents/berater-vermittler/contact-data-section.tsx
    Genutzt in: Berater-Vermittler
    Hoch
  • BezugspersonContentcomponents/berater-vermittler/bezugsperson-section.tsx
    Genutzt in: Berater-Vermittler
    Mittel
  • VergleichDialogcomponents/berater-vermittler/vergleich-dialog.tsx
    Genutzt in: Berater-Vermittler
    Fullscreen-Overlay-Pattern
    Mittel
  • SendOfferDialogcomponents/berater-vermittler/send-offer-dialog.tsx
    Genutzt in: Berater-Vermittler
    Mittel
  • OkpSection (BV)components/berater-vermittler/okp-section.tsx
    Genutzt in: Berater-Vermittler
    Mittel
  • ValidationBannercomponents/berater-vermittler/validation-banner.tsx
    Genutzt in: Berater-Vermittler
    Banner-Pattern — generisch wiederverwendbar
    Hoch
  • DuplicateHintcomponents/berater-vermittler/duplicate-hint.tsx
    Genutzt in: Berater-Vermittler
    Toast-Variante
    Mittel
  • DuplicateMatchDialogcomponents/berater-vermittler/duplicate-match-dialog.tsx
    Genutzt in: Berater-Vermittler
    Sehr spezifisches Dialog
    Niedrig
  • DuplicateCheckControllercomponents/berater-vermittler/duplicate-check-controller.tsx
    Genutzt in: Berater-Vermittler
    Logik-Wrapper ohne UI
    Keine
  • CheckboxWithExpansioncomponents/berater-vermittler/checkbox-with-expansion.tsx
    Genutzt in: Berater-Vermittler
    Wiederverwendbares Pattern (Checkbox + revealed Form)
    Hoch
  • OverviewSidebar (BV)components/berater-vermittler/overview-sidebar.tsx
    Genutzt in: Berater-Vermittler
    Niedrig
  • PersonCard (KR)components/kundenrechner/person-card.tsx
    Genutzt in: Kundenrechner
    Mittel
  • OkpSection (KR)components/kundenrechner/okp-section.tsx
    Genutzt in: Kundenrechner, Kundenportal, Magic-Link, Comparis
    Cross-domain — koennte auch in Gruppe Cross-domain
    Hoch
  • PraxisPickerSectioncomponents/kundenrechner/praxis-picker-section.tsx
    Genutzt in: Kundenrechner
    Mittel
  • AddPersonDialogcomponents/kundenrechner/add-person-dialog.tsx
    Genutzt in: Kundenrechner
    Mittel
  • SaveProgressDialogcomponents/kundenrechner/save-progress-dialog.tsx
    Genutzt in: Kundenrechner
    Mittel
  • OfferteAnfordernDialogcomponents/kundenrechner/offerte-anfordern-dialog.tsx
    Genutzt in: Kundenrechner
    Mittel
  • Overview / OverviewSidebar (KR)components/kundenrechner/overview.tsx
    Genutzt in: Kundenrechner
    Niedrig
  • PersonPillscomponents/kundenrechner/person-pills.tsx
    Genutzt in: Kundenrechner
    Niedrig
  • TrustCardscomponents/kundenrechner/trust-cards.tsx
    Genutzt in: Kundenrechner
    Trust-Signal-Banner, wiederverwendbar
    Hoch

Page-Layouts / Templates

25 Komponenten

Page-Level-Komponenten. Gehoeren NICHT in eine UI-Library. In Figma hoechstens als Page-Templates (separate Pages, nicht Component-Sets).

  • Step1Contentcomponents/kundenrechner/step1-content.tsx
    Keine
  • Step2Contentcomponents/kundenrechner/step2-content.tsx
    Keine
  • Step3Contentcomponents/kundenrechner/step3-content.tsx
    Keine
  • Step4Contentcomponents/kundenrechner/step4-content.tsx
    Keine
  • Step5Contentcomponents/kundenrechner/step5-content.tsx
    Keine
  • AbschlussPersoenlicheAngabenPagecomponents/kundenrechner/abschluss-persoenliche-angaben-page.tsx
    Keine
  • AbschlussGesundheitsfragenPagecomponents/kundenrechner/abschluss-gesundheitsfragen-page.tsx
    Keine
  • AbschlussZahlungPagecomponents/kundenrechner/abschluss-zahlung-page.tsx
    Keine
  • AbschlussBestaetigenPagecomponents/kundenrechner/abschluss-bestaetigen-page.tsx
    Keine
  • AbschlussPagecomponents/kundenrechner/abschluss-page.tsx
    Keine
  • KuendigungPagecomponents/kundenrechner/kuendigung-page.tsx
    Keine
  • KuendigungErfolgPagecomponents/kundenrechner/kuendigung-erfolg-page.tsx
    Keine
  • OfferteAngefordertPagecomponents/kundenrechner/offerte-angefordert-page.tsx
    Keine
  • PageShellcomponents/kundenrechner/page-shell.tsx
    Keine
  • AbschlussPageShellcomponents/kundenrechner/abschluss-page-shell.tsx
    Keine
  • StepNav / StepSidebar / StepBarcomponents/kundenrechner/step-*
    Generischer Stepper als Figma-Kit in 'UI Design exploration' (7xqWQgq3biH8Fpv2aC9rwt), Section 'Stepper — Kit': Komponente 'Menü-Item' (Key b6b41cf8b59326486258a61719ba7c982e6adec8, Status=Erledigt/Aktuell/Inaktiv) als nested Component + Komponente 'Stepper' (Key 9df1dcb651d2f54acd9dcc90bda351692d98f523) mit 8 Platzhalter-Instanzen zum Ein-/Ausblenden. Code-Pendant: src/components/ui/stepper.tsx (Stepper + StepItem). Kein Designsystem-Library-Pendant.
    Keine
  • AbschlussStepNavcomponents/kundenrechner/abschluss-step-nav.tsx
    Keine
  • OfferteOverviewPage (Magic-Link)components/kunden-offerte/offerte-overview-page.tsx
    Keine
  • OfferteAdvisorCard (Magic-Link)components/kunden-offerte/offerte-sidebar.tsx
    Berater-Herkunfts-Card, oben im geteilten Step4Sidebar der Offerten-Übersicht (Figma 2477:98597).
    Keine
  • ComparisOverviewPagecomponents/comparis/comparis-overview-page.tsx
    Keine
  • ComparisBrandCardcomponents/comparis/comparis-sidebar.tsx
    Comparis-Herkunfts-Card, oben im geteilten Step4Sidebar der Comparis-Übersicht (Figma 2477:98678).
    Keine
  • AnpassungSidebar (Kundenportal)components/kundenportal/anpassung-sidebar.tsx
    Keine
  • KundenportalSkeletonSidebarcomponents/kundenportal/skeleton-sidebar.tsx
    Keine
  • WizardSidebar / WizardStepcomponents/wizard-*.tsx
    Keine
  • SelectCard (root)components/select-card.tsx
    Dublikat zu UI-Komponente — Konsolidierung pruefen
    Niedrig