Optiker Website Sections

Für Optiker. Gezeichnete Fassungen nach Gesicht und Form gefiltert, eine gezeichnete Anprobe, Sehtest buchen mit Sehtafel, Glasoptionen mit gezeichnetem Rand und ein Kontaktlinsen-Abo.

5 Variants

Kategorie wechseln

Von der Fassung bis zum richtigen Glas

Eine Brille auszusuchen ist persönlich und ein wenig technisch. Diese Sections machen beides leicht, mit Fassungen nach Gesichtsform, einer gezeichneten Anprobe, der Sehtest-Buchung und Glasoptionen, die zeigen, was ein höherer Brechungsindex mit dem Rand macht. Kontaktlinsenträger bekommen ein Abo mit ihren Werten je Auge.

„Fassungen“ filtert nach Gesichtsform, Fassungsform und Material, jedes Farbfeld färbt seine Fassung um und gemerkte Fassungen zählen für die Anprobe mit. Die „Anprobe“ setzt die gewählte Fassung auf ein gezeichnetes Gesicht, mit einem Hinweis, wie gut sie passt. Der „Sehtest“ deckt eine Sehtafel Zeile für Zeile auf und bucht Terminart, Tag und Uhrzeit. „Glasoptionen“ lässt den gezeichneten Glasrand mit jedem Index dicker oder dünner werden, markiert den besten und rechnet Veredelungen in den Preis fürs Paar. „Kontaktlinsen“ stellt die Werte je Auge mit Steppern ein, torische Linsen ergänzen Zylinder und Achse, längere Intervalle sparen.

Verlinke den Sehtest von jeder Fassung aus, die meisten Käufer brauchen zuerst neue Werte. Zeig die Glasdicke als Bild, das erklärt einen Preisunterschied besser als jede Tabelle. Halte die gemerkten Fassungen im Geschäft als kurze Liste für den Termin bereit.

FassungenNeu in 1.2

Nach Gesichtsform, Fassungsform und Material filtern. Gezeichnete Fassungen steigen nacheinander auf und neigen sich beim Zeigen, jede Farbe färbt ihre Fassung um. Vorgemerkte Fassungen zählen für die Anprobe mit.

Installv1.0.0

aiw add @ai-website/optician

Bringt mit utils, kit, button, icon, section, motion, input

Usage

<Optician variant="frames" frames={[{ id, name, shape: "round", material: "acetate", faces: ["square"], width, price, colors: [{ name, value }] }]} tryOnHref="#" />

Source

AnprobeNeu in 1.2

Ein gezeichnetes Gesicht trägt die gewählte Fassung. Gesichtsform, Fassung und Farbe wechseln, die Fassung gleitet jedes Mal auf, ein Hinweis sagt, wie gut sie passt.

Installv1.0.0

aiw add @ai-website/optician

Bringt mit utils, kit, button, icon, section, motion, input

Usage

<Optician variant="try-on" frames={[…]} tryOnHref="#" />

Source

SehtestNeu in 1.2

Eine Sehtafel erscheint beim Scrollen Zeile für Zeile. Art des Termins, Tag und Uhrzeit wählen, das Formular nennt jedes fehlende Feld und bestätigt mit Datum.

Installv1.0.0

aiw add @ai-website/optician

Bringt mit utils, kit, button, icon, section, motion, input

Usage

<Optician variant="eye-test" tests={[{ id, title, text, duration, price, icon }]} slots={[{ date: "2026-10-27", times: ["09:00"] }]} facts={[{ label, icon }]} onBook={(data) => …} />

Source

GlasoptionenNeu in 1.2

Glasart wählen, auf die eigene Stärke ziehen, der gezeichnete Glasrand wird mit jedem Index dicker oder dünner. Der passende Index ist markiert, Veredelungen werden mit kleinem Sprung angehakt, der Preis für das Paar gleitet mit.

Installv1.0.0

aiw add @ai-website/optician

Bringt mit utils, kit, button, icon, section, motion, input

Usage

<Optician variant="lens-options" lensTypes={[{ id, label, text, price }]} indexes={[{ value: 1.6, price: 40 }]} coatings={[{ id, label, text, price, included }]} power={-3} />

Source

KontaktlinsenNeu in 1.2

Linsenart wählen und die Werte je Auge mit Zählern einstellen, torische Linsen bekommen Zylinder und Achse dazu. Gezeichnete Boxen tragen die Werte und kippen herein, der Preis je Lieferung gleitet, längere Abstände sparen.

Installv1.0.0

aiw add @ai-website/optician

Bringt mit utils, kit, button, icon, section, motion, input

Usage

<Optician variant="contact-lenses" contactLenses={[{ id, label, text, price, months, toric }]} intervals={[{ months: 3, discount: 5 }]} onSubscribe={(data) => …} />

Source

Details

Was Optiker mitbringt, aus Registry und Quellcode gelesen.

Bereich: Industries
Variants: 5
Version: 1.0.0 · seit 1.2.0
Datei: components/ui/optician.tsx
Bringt mit: utilskitbutton iconsectionmotioninput
npm-Pakete: Keine
Sprachen: Englisch und Deutsch, 78 eigene Texte
Studio: Im Code anpassen
Mit KI bauen: Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle OpticianProps aus components/ui/optician.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

variantoptional
OpticianVariant
framestry-oneye-testlens-optionscontact-lenses
eyebrowoptional
React.ReactNode
titleoptional
React.ReactNode
descriptionoptional
React.ReactNode
framesoptional
OpticianFrame[]
frames, try-on
tryOnHrefoptional
string
frames: link of the try on button
testsoptional
OpticianEyeTest[]
eye-test
slotsoptional
{ date: string; times: string[] }[]
factsoptional
{ label: string; icon?: IconName }[]
eye-test: facts next to the chart
onBookoptional
(data: { test: string; date: string; time: string; name: string; phone: string; wearer: boolean }) => void
lensTypesoptional
OpticianLensType[]
lens-options
indexesoptional
OpticianLensIndex[]
coatingsoptional
OpticianCoating[]
chooseHrefoptional
string
lens-options: link of the choose button
poweroptional
number
lens-options: start value of the prescription in dioptres
contactLensesoptional
OpticianContactLens[]
contact-lenses
intervalsoptional
{ months: number; discount?: number }[]
contact-lenses: delivery intervals in months with a discount in percent
onSubscribeoptional
(data: { lens: string; months: number; right: EyeValues; left: EyeValues }) => void
currencyoptional
string

Eingebaute Texte

Diese Texte schreibt Optiker selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 78 Texte anzeigen

Schlüssel	Englisch	Deutsch
face	Englisch Face shape	Deutsch Gesichtsform
shape	Englisch Frame shape	Deutsch Fassungsform
material	Englisch Material	Deutsch Material
all	Englisch All	Deutsch Alle
oval	Englisch Oval	Deutsch Oval
round	Englisch Round	Deutsch Rund
square	Englisch Square	Deutsch Eckig
heart	Englisch Heart	Deutsch Herz
rectangle	Englisch Rectangle	Deutsch Rechteckig
cat-eye	Englisch Cat eye	Deutsch Cat-Eye
aviator	Englisch Aviator	Deutsch Pilot
panto	Englisch Panto	Deutsch Panto
acetate	Englisch Acetate	Deutsch Acetat
metal	Englisch Metal	Deutsch Metall
titanium	Englisch Titanium	Deutsch Titan
color	Englisch Colour of {name}	Deutsch Farbe von {name}
mm	Englisch {n} mm	Deutsch {n} mm
remember	Englisch Save {name} for a try-on	Deutsch {name} zur Anprobe vormerken
saved	Englisch Saved	Deutsch Vorgemerkt
save	Englisch Save	Deutsch Vormerken
savedN	Englisch {n} frames saved for a try-on	Deutsch {n} Fassungen zur Anprobe vorgemerkt
savedNone	Englisch Save frames you like, we have them ready when you visit.	Deutsch Merk dir Fassungen vor, wir legen sie zu deinem Besuch bereit.
bookTry	Englisch Book a try-on	Deutsch Anprobetermin buchen
noFrames	Englisch No frame fits this filter yet. Show all to see more.	Deutsch Zu diesem Filter passt noch keine Fassung. Zeig alle, um mehr zu sehen.
showAll	Englisch Show all frames	Deutsch Alle Fassungen zeigen
suits	Englisch A great match for this face shape	Deutsch Passt sehr gut zu dieser Gesichtsform
alsoTry	Englisch A bold contrast, worth a try in store	Deutsch Ein mutiger Kontrast, probier sie im Laden
frame	Englisch Frame	Deutsch Fassung
tryInStore	Englisch Try {name} in store	Deutsch {name} im Laden anprobieren
tests	Englisch Kind of appointment	Deutsch Art des Termins
free	Englisch Free	Deutsch Kostenlos
min	Englisch {n} min	Deutsch {n} Min.
date	Englisch Date	Deutsch Datum
time	Englisch Time	Deutsch Uhrzeit
name	Englisch Name	Deutsch Name
phone	Englisch Phone	Deutsch Telefon
glasses	Englisch I already wear glasses or contact lenses	Deutsch Ich trage schon eine Brille oder Kontaktlinsen
book	Englisch Book the appointment	Deutsch Termin buchen
booked	Englisch Booked for {date} at {time}. Your confirmation is on its way.	Deutsch Gebucht für {date} um {time} Uhr. Die Bestätigung ist unterwegs.
again	Englisch Book another appointment	Deutsch Weiteren Termin buchen
errName	Englisch Please enter your name.	Deutsch Bitte gib deinen Namen an.
errPhone	Englisch Please enter a phone number so we can reach you.	Deutsch Bitte gib eine Telefonnummer an, damit wir dich erreichen.
errTime	Englisch Please pick a time.	Deutsch Bitte wähle eine Uhrzeit.
acuity	Englisch Visual acuity	Deutsch Sehschärfe
lensType	Englisch Kind of lens	Deutsch Glasart
strength	Englisch Your prescription	Deutsch Deine Stärke
strengthHint	Englisch Drag to your value, the drawing shows the lens edge.	Deutsch Auf deinen Wert ziehen, die Zeichnung zeigt den Glasrand.
index	Englisch Lens thickness	Deutsch Glasdicke
thinner	Englisch {n}% thinner than standard	Deutsch {n} % dünner als Standard
standard	Englisch Standard	Deutsch Standard
recommended	Englisch Recommended	Deutsch Empfohlen
edge	Englisch Edge	Deutsch Rand
centre	Englisch Centre	Deutsch Mitte
coatings	Englisch Coatings	Deutsch Veredelungen
included	Englisch Included	Deutsch Inklusive
pair	Englisch Your lenses for the pair	Deutsch Deine Gläser für das Paar
choose	Englisch Choose these lenses	Deutsch Diese Gläser wählen
finalNote	Englisch We decide on the final lenses together after the eye test.	Deutsch Die endgültigen Gläser legen wir nach dem Sehtest gemeinsam fest.
lensKind	Englisch Contact lenses	Deutsch Kontaktlinsen
right	Englisch Right eye	Deutsch Rechtes Auge
left	Englisch Left eye	Deutsch Linkes Auge
same	Englisch Same values for both eyes	Deutsch Gleiche Werte für beide Augen
sph	Englisch Sphere	Deutsch Sphäre
cyl	Englisch Cylinder	Deutsch Zylinder
axis	Englisch Axis	Deutsch Achse
less	Englisch Lower {k}	Deutsch {k} senken
more	Englisch Raise {k}	Deutsch {k} erhöhen
every	Englisch Delivery	Deutsch Lieferung
everyN	Englisch Every {n} months	Deutsch Alle {n} Monate
everyOne	Englisch Every month	Deutsch Jeden Monat
save2	Englisch save {n}	Deutsch {n} sparen
boxes	Englisch {n} boxes	Deutsch {n} Packungen
perDelivery	Englisch Per delivery	Deutsch Je Lieferung
perMonth	Englisch That is {price} a month	Deutsch Das sind {price} im Monat
subscribe	Englisch Start the subscription	Deutsch Abo starten
subscribed	Englisch Subscribed. We check your values before the first delivery.	Deutsch Abo gestartet. Wir prüfen deine Werte vor der ersten Lieferung.
lensNote	Englisch Enter the values from your contact lens pass. We check them before the first delivery.	Deutsch Trag die Werte aus deinem Kontaktlinsenpass ein. Wir prüfen sie vor der ersten Lieferung.
pause	Englisch Pause or cancel at any time	Deutsch Jederzeit pausieren oder kündigen

Aus dem Quellcode der Component abgeleitet.

Optiker reagiert selbst auf die Tasten Pfeil hoch, Pfeil runter, Pfeil links, Pfeil rechts und Leertaste.
Setzt aria-checked, aria-label, aria-live, aria-pressed und aria-valuetext, damit Screenreader Zweck und Zustand ansagen.
Nutzt die Rollen alert, group, radio, radiogroup und status.
Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
Jedes Feld hat ein Label, sichtbar oder für Screenreader.
Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
Zeigt bei Bedienung mit der Tastatur einen sichtbaren Fokusring.
Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 8 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Optiker?

Mit aiw add @ai-website/optician. Der Befehl legt die Datei components/ui/optician.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind button, icon, section, motion und input. Weitere npm-Pakete braucht sie nicht.

Welche Varianten hat Optiker?

5 Varianten, Fassungen, Anprobe, Sehtest, Glasoptionen und Kontaktlinsen. Du wählst sie mit der Prop variant, zum Beispiel variant="try-on".

Kann ich die Texte von Optiker übersetzen?

Ja. Optiker bringt 78 eigene Texte auf Deutsch und Englisch mit, etwa „Gesichtsform“, „Fassungsform“ und „Material“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Optiker einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Optiker mit aiw_components und installieren sie mit aiw_add @ai-website/optician. Nenn im Prompt die Variante, etwa variant="frames", dann schreibt der Assistent deine Inhalte direkt in die Props.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Optiker stehen.

Von der Fassung bis zum richtigen Glas

Optiker

FassungenNeu in 1.2

AnprobeNeu in 1.2

SehtestNeu in 1.2

GlasoptionenNeu in 1.2

KontaktlinsenNeu in 1.2

Details

Props

Eingebaute Texte

Barrierefreiheit

Bewegung

Häufige Fragen

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit