Optician website sections

For opticians. Drawn frames filtered by face and shape, a drawn try-on, eye test booking with an acuity chart, lens options with a drawn edge and a contact lens subscription.

5 variants

Switch category

From the frame to the right lens

Choosing glasses is personal and a little technical. These sections make both parts easy, with frames by face shape, a drawn try on, the eye test booking and lens options that show what a higher index does to the edge. Contact lens wearers get a subscription with their values per eye.

Frames filters by face shape, frame shape and material, each colour swatch recolours its frame and saved frames count up for a try on. Try on puts the chosen frame on a drawn face with a note on how well it suits. Eye test reveals an acuity chart row by row and books the kind of appointment, a day and a time. Lens options lets the drawn lens edge get thicker or thinner with every index, marks the best one and adds coatings to the price for the pair. Contact lenses sets the values per eye with steppers, toric lenses add cylinder and axis, longer intervals save.

Link the eye test from every frame, most buyers need fresh values first. Show lens thickness as a picture, it explains a price difference better than any table. Have the saved frames ready in the store as a short list for the appointment.

FramesNew in 1.2

Filter by face shape, frame shape and material. Drawn frames rise in one after another and tilt on hover, each colour swatch recolours its frame. Saved frames count up for a try-on.

Installv1.0.0

aiw add @ai-website/optician

Brings along 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

Try onNew in 1.2

A drawn face wears the chosen frame. Switch the face shape, the frame and its colour, the frame slides on each time and a note says how well it suits.

Installv1.0.0

aiw add @ai-website/optician

Brings along utils, kit, button, icon, section, motion, input

Usage

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

Source

Eye testNew in 1.2

An acuity chart reveals row by row while scrolling. Pick the kind of appointment, a day and a time, the form names every missing field and confirms with a date.

Installv1.0.0

aiw add @ai-website/optician

Brings along 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

Lens optionsNew in 1.2

Pick the kind of lens, drag to your prescription and the drawn lens edge thickens or thins with every index. The best index is marked, coatings tick with a pop, the price for the pair glides along.

Installv1.0.0

aiw add @ai-website/optician

Brings along 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

Contact lensesNew in 1.2

Pick the kind of lens and set the values per eye with steppers, toric lenses add cylinder and axis. Drawn boxes print the values and tilt in, the price per delivery glides and longer intervals save.

Installv1.0.0

aiw add @ai-website/optician

Brings along 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

What Optician brings along, read from the registry and the source.

Area: Industries
Variants: 5
Version: 1.0.0 · since 1.2.0
File: components/ui/optician.tsx
Brings along: utilskitbutton iconsectionmotioninput
npm packages: None
Languages: English and German, 78 texts of its own
Studio: Adjust in code
Build with AI: Over MCP in Claude, Cursor, Copilot and Codex

Props

The OpticianProps interface from components/ui/optician.tsx, with the comments from the code.

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

Built-in texts

Optician writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 78 texts

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

Read from the source of the component.

Optician handles the keys Arrow up, Arrow down, Arrow left, Arrow right and Space itself.
Sets aria-checked, aria-label, aria-live, aria-pressed and aria-valuetext, so screen readers announce purpose and state.
Uses the roles alert, group, radio, radiogroup and status.
Announces changes through a live region without moving focus.
Every field has a label, visible or for screen readers.
Adds text for screen readers where icons and graphics stand alone.
Shows a visible focus ring when used with the keyboard.
The server renders the starting state in full, JavaScript only adds the interaction.

Motion

Brings animations of its own, calmly timed and without wobble.
With reduced motion (prefers-reduced-motion) it stays still. 8 places in the code switch motion off then.

Frequent questions

How do I install Optician?

With aiw add @ai-website/optician. The command puts components/ui/optician.tsx into your project, the code is yours from then on. It brings along button, icon, section, motion and input. It needs no further npm packages.

Which variants does Optician have?

5 variants, Frames, Try on, Eye test, Lens options and Contact lenses. You pick one with the variant prop, for example variant="try-on".

Can I translate the texts of Optician?

Yes. Optician carries 78 texts of its own in English and German, such as “Face shape”, “Frame shape” and “Material”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Optician?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Optician with aiw_components and install it with aiw_add @ai-website/optician. Name the variant in your prompt, for example variant="frames", and the assistant writes your content straight into the props.

Similar components

More from Industries, the same area of the kit.

Often combined with

Sections that usually sit next to Optician on a page.

From the frame to the right lens

Optician

FramesNew in 1.2

Try onNew in 1.2

Eye testNew in 1.2

Lens optionsNew in 1.2

Contact lensesNew in 1.2

Details

Props

Built-in texts

Accessibility

Motion

Frequent questions

Similar components, Often combined with

Similar components

Often combined with