Pharmacy website sections

For pharmacies. Opening hours with a live status, the emergency service by date on a drawn map, reservations for pick up, consultation dates and a travel kit checklist.

5 variants

Switch category

Open, on duty and ready for pick up

Most visits to a pharmacy website are short and urgent, is it open, who is on duty tonight, can I reserve my medicine. These sections answer at once, with a live status, the emergency service by date and a reservation that ends with a pick up code. Consultations and the travel kit bring people in for more than a prescription.

Opening hours shows whether the pharmacy is open and until when, with the week on a time axis and today marked. Emergency service lists the pharmacies on duty for a chosen date, sorted by distance with call and route, their pins on a drawn map. Reservation covers e-prescriptions, paper prescriptions and products without one, with packs, a pick up time and a code. Consultation lists topics with duration and price and books a date. Travel kit builds a checklist by kind of trip that fills a drawn bag and can be printed.

Keep the opening status at the top of every page, it is the question asked most often. Link the emergency service from the status as soon as the pharmacy closes. The reservation saves customers a second trip, mention it on the bag and at the till.

Opening hoursNew in 1.2

After loading the status shows whether the pharmacy is open and until when, with a pulsing dot. The week sits on a time axis whose bars grow while scrolling, today carries a marker for the current time.

Installv1.0.0

aiw add @ai-website/pharmacy

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

Usage

<Pharmacy variant="opening-hours" hours={[{ day: 0, from: "08:00", to: "18:30" }]} phone="…" address="…" services={[{ label, icon }]} media={<img … />} dutyHref="#duty" />

Source

Emergency serviceNew in 1.2

Pick a date on the strip, the pharmacies on duty slide in sorted by distance with their hours, call and route. Their pins drop onto a drawn map while scrolling, the chosen one grows in the accent.

Installv1.0.0

aiw add @ai-website/pharmacy

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

Usage

<Pharmacy variant="emergency-duty" duty={[{ date: "2026-10-26", pharmacies: [{ id, name, address, phone, distance, x, y, from: "08:30", to: "08:30" }] }]} dutyFee={2.5} />

Source

ReservationNew in 1.2

E-prescription, paper prescription or products without one, the fields swap with a soft blur. Add products with packs, pick a pick up time, the form names every missing field and ends with a pick up code.

Installv1.0.0

aiw add @ai-website/pharmacy

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

Usage

<Pharmacy variant="reservation" pickupDays={[{ id, label, times: ["16:00"] }]} steps={[{ title, text, icon }]} onReserve={(data) => …} />

Source

ConsultationNew in 1.2

Topics rise in one after another with duration and price, the icon tilts on hover. Picking one swaps in what to bring, the dates and the times, booking needs a name and a phone number.

Installv1.0.0

aiw add @ai-website/pharmacy

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

Usage

<Pharmacy variant="consultation" consultations={[{ id, title, text, icon, duration, price, bring: [], slots: [{ date, times: [] }] }]} onBook={(data) => …} />

Source

Travel kitNew in 1.2

Pick the kind of trip, the checklist rearranges by group and rises in. Every tick pops and fills the drawn bag and the bar, a full list says so in green. Print it or book a consultation.

Installv1.0.0

aiw add @ai-website/pharmacy

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

Usage

<Pharmacy variant="travel-kit" trips={[{ id, label, icon }]} kit={[{ id, label, group, trips: ["beach"], note }]} adviceHref="#" />

Source

Details

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

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

Props

The PharmacyProps interface from components/ui/pharmacy.tsx, with the comments from the code.

variantoptional
PharmacyVariant
opening-hoursemergency-dutyreservationconsultationtravel-kit
eyebrowoptional
React.ReactNode
titleoptional
React.ReactNode
descriptionoptional
React.ReactNode
hoursoptional
PharmacyHours[]
opening-hours
servicesoptional
PharmacyService[]
phoneoptional
string
addressoptional
string
mediaoptional
React.ReactNode
opening-hours: a photo of the pharmacy
dutyHrefoptional
string
opening-hours: link to the emergency service
nowoptional
{ day: number; time: string }
Fixed clock for previews: day 0 is Monday, time HH:MM. Without it the visitor's clock is used after loading.
dutyoptional
PharmacyDutyDay[]
emergency-duty
dutyFeeoptional
number
emergency-duty: the emergency fee
pickupDaysoptional
PharmacyPickupDay[]
reservation
stepsoptional
{ title: string; text?: string; icon?: IconName }[]
reservation: steps shown next to the form
onReserveoptional
(data: { kind: string; code: string; items: { name: string; qty: number }[]; day: string; time: string; name: string; phone: string; note: string }) => void
consultationsoptional
PharmacyConsultation[]
consultation
onBookoptional
(data: { topic: string; date: string; time: string; name: string; phone: string }) => void
tripsoptional
PharmacyTrip[]
travel-kit
kitoptional
PharmacyKitItem[]
adviceHrefoptional
string
currencyoptional
string

Built-in texts

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

Show all 76 texts

Key	English	German
days	English Monday,Tuesday,Wednesday,Thursday,Friday,Saturday,Sunday	German Montag,Dienstag,Mittwoch,Donnerstag,Freitag,Samstag,Sonntag
daysShort	English Mon,Tue,Wed,Thu,Fri,Sat,Sun	German Mo,Di,Mi,Do,Fr,Sa,So
hours	English Opening hours	German Öffnungszeiten
openNow	English Open now	German Jetzt geöffnet
closedNow	English Closed right now	German Gerade geschlossen
untilTime	English until {time}	German bis {time} Uhr
breakUntil	English Lunch break until {time}	German Mittagspause bis {time} Uhr
opensToday	English Opens today at {time}	German Öffnet heute um {time} Uhr
opensTomorrow	English Opens tomorrow at {time}	German Öffnet morgen um {time} Uhr
opensDay	English Opens {day} at {time}	German Öffnet {day} um {time} Uhr
today	English Today	German Heute
closed	English Closed	German Geschlossen
to	English to	German bis
call	English Call {phone}	German {phone} anrufen
duty	English Find the pharmacy on duty	German Notdienst-Apotheke finden
dutyHint	English Outside our hours a pharmacy nearby is always on duty.	German Außerhalb unserer Zeiten hat immer eine Apotheke in der Nähe Notdienst.
services	English In the pharmacy	German In der Apotheke
dutyDate	English Date of the emergency service	German Datum des Notdienstes
onDuty	English On duty	German Notdienst
nextDay	English next day	German Folgetag
km	English {n} km	German {n} km
route	English Route	German Route
callShort	English Call	German Anrufen
you	English You are here	German Du bist hier
select	English Show {name} on the map	German {name} auf der Karte zeigen
fee	English A fee of {fee} applies during emergency hours.	German Im Notdienst fällt eine Gebühr von {fee} an.
noDuty	English No pharmacy on duty is listed for this day.	German Für diesen Tag ist keine Notdienst-Apotheke eingetragen.
what	English What would you like to reserve?	German Was möchtest du reservieren?
ePrescription	English E-prescription	German E-Rezept
ePrescriptionText	English Send the code, we prepare everything.	German Code schicken, wir legen alles bereit.
paper	English Paper prescription	German Papierrezept
paperText	English Bring it along when you collect.	German Bring es zur Abholung mit.
otc	English Without prescription	German Ohne Rezept
otcText	English Products from the shelf or the counter.	German Aus der Freiwahl oder vom Tresen.
code	English Prescription code	German Rezeptcode
codeHint	English The code from your app or the printout	German Der Code aus der App oder vom Ausdruck
items	English Products	German Produkte
itemLabel	English Product or active ingredient {n}	German Produkt oder Wirkstoff {n}
itemPlaceholder	English e.g. Ibuprofen 400, 20 tablets	German z. B. Ibuprofen 400, 20 Tabletten
qty	English Packs	German Packungen
less	English One pack less	German Eine Packung weniger
more	English One pack more	German Eine Packung mehr
addItem	English Add a product	German Produkt hinzufügen
removeItem	English Remove product {n}	German Produkt {n} entfernen
pickup	English Pick up	German Abholung
pickupDay	English Day	German Tag
pickupTime	English Time	German Uhrzeit
name	English Name	German Name
phone	English Phone	German Telefon
note	English Note for the team	German Hinweis an das Team
reserve	English Reserve for pick up	German Zur Abholung reservieren
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.
errItem	English Please name at least one product.	German Bitte nenne mindestens ein Produkt.
errCode	English Please enter the prescription code.	German Bitte gib den Rezeptcode ein.
errTime	English Please pick a time.	German Bitte wähle eine Uhrzeit.
reserved	English Reserved. We call you if anything changes.	German Reserviert. Wir rufen an, falls sich etwas ändert.
pickupCode	English Your pick up code	German Dein Abholcode
pickupAt	English Ready {day} from {time}	German Liegt bereit {day} ab {time} Uhr
again	English Start a new reservation	German Neue Reservierung starten
howTitle	English How it works	German So läuft es
topics	English Consultation topics	German Beratungsthemen
free	English Free	German Kostenlos
min	English {n} min	German {n} Min.
bring	English Please bring	German Bitte mitbringen
date	English Date	German Datum
time	English Time	German Uhrzeit
book	English Book {topic}	German {topic} buchen
booked	English Booked for {date} at {time}. We look forward to seeing you.	German Gebucht für {date} um {time} Uhr. Wir freuen uns auf dich.
newBooking	English Book another topic	German Weiteres Thema buchen
trip	English Kind of trip	German Art der Reise
packed	English {n} of {total} packed	German {n} von {total} eingepackt
packedAll	English All packed. Have a good trip.	German Alles eingepackt. Gute Reise.
print	English Print the list	German Liste drucken
kitNote	English Medicines you take regularly and vaccinations are best discussed in person.	German Dauermedikamente und Impfungen besprechen wir am besten persönlich.
advice	English Book a consultation	German Beratung buchen

Read from the source of the component.

Pharmacy handles the keys Arrow up, Arrow down, Arrow left and Arrow right itself.
Sets aria-checked, aria-invalid, aria-label, aria-live and aria-pressed, 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. 4 places in the code switch motion off then.

Frequent questions

How do I install Pharmacy?

With aiw add @ai-website/pharmacy. The command puts components/ui/pharmacy.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 Pharmacy have?

5 variants, Opening hours, Emergency service, Reservation, Consultation and Travel kit. You pick one with the variant prop, for example variant="emergency-duty".

Can I translate the texts of Pharmacy?

Yes. Pharmacy carries 76 texts of its own in English and German, such as “Monday,Tuesday,Wednesday,Thursday,Friday,Saturday,Sunday”, “Mon,Tue,Wed,Thu,Fri,Sat,Sun” and “Opening hours”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Pharmacy?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Pharmacy with aiw_components and install it with aiw_add @ai-website/pharmacy. Name the variant in your prompt, for example variant="opening-hours", 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 Pharmacy on a page.

Open, on duty and ready for pick up

Pharmacy

Opening hoursNew in 1.2

Emergency serviceNew in 1.2

ReservationNew in 1.2

ConsultationNew in 1.2

Travel kitNew in 1.2

Details

Props

Built-in texts

Accessibility

Motion

Frequent questions

Similar components, Often combined with

Similar components

Often combined with