Veterinary practice

For vets and animal clinics. Services per species, a 24 hour emergency dial, the vaccination plan, registering a new patient and care plans.

5 variants

Switch category

Species

Large tiles per animal, the icon gives a little wag when chosen. Services rise in one after another, beside them a hint for the first visit and the check-up price.

Open in Studio

Installv1.0.0

aiw add @ai-website/veterinary

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

Usage

<Veterinary variant="species" species={[{ id, label, icon: "dog", note, checkup, tip, services: [{ title, text }] }]} />

Source

Emergency dial

A 24 hour dial draws itself in, practice hours on top, the hand shows the time. Tick a warning sign and the advice turns urgent with the right number.

Open in Studio

Installv1.0.0

aiw add @ai-website/veterinary

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

Usage

<Veterinary variant="emergency" hours={[{ id, label, open: "08:00", close: "19:00" }]} signs={[{ id, label, icon }]} phone="…" emergencyPhone="…" />

Source

Vaccination plan

Pick the animal and the birth month, every vaccination gets its date on a line that fills while scrolling. Tick what was given, the next date glides along.

Open in Studio

Installv1.0.0

aiw add @ai-website/veterinary

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

Usage

<Veterinary variant="vaccination-plan" species={[…]} vaccines={{ dog: [{ week: 8, title, vaccines: ["…"], core: true }] }} />

Source

New patient

Three short steps with a progress bar. A patient card beside the form fills while you type, name, age and weight appear as you go.

Open in Studio

Installv1.0.0

aiw add @ai-website/veterinary

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

Usage

<Veterinary variant="pet-registration" species={[{ id, label, icon }]} reasons={["…"]} />

Source

Care plans

Dog or cat on a gliding switch, the monthly price and the savings glide to the new value. Each card lists what is included and what it would cost one by one.

Open in Studio

Installv1.0.0

aiw add @ai-website/veterinary

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

Usage

<Veterinary variant="health-plans" species={[…]} plans={[{ id, title, price: { dog: 19 }, includes: [{ label, value: { dog: 120 } }], featured }]} />

Source

Details

What Veterinary practice brings along, read from the registry and the source.

Area: Industries
Variants: 5
Version: 1.0.0 · since 1.1.0
File: components/ui/veterinary.tsx
Brings along: utilskitbutton icon inputsectionmotion
npm packages: None
Languages: English and German, 62 texts of its own
Studio: All 5 variants editable
Build with AI: Over MCP in Claude, Cursor, Copilot and Codex

Props

The VeterinaryProps interface from components/ui/veterinary.tsx, with the comments from the code.

variantoptional
VeterinaryVariant
speciesemergencyvaccination-planpet-registrationhealth-plans
eyebrowoptional
React.ReactNode
titleoptional
React.ReactNode
descriptionoptional
React.ReactNode
speciesoptional
VetSpecies[]
species, vaccination-plan, pet-registration, health-plans: the animals the practice treats
hoursoptional
VetHours[]
emergency: practice hours per day type, the emergency service covers the rest
signsoptional
{ id: string; label: string; icon?: IconName }[]
emergency: warning signs
phoneoptional
string
emergencyPhoneoptional
string
nowoptional
string
emergency: fixed time for the dial, e.g. "21:40". Defaults to the browser clock.
vaccinesoptional
Record<string, VetVaccine[]>
vaccination-plan: schedule per species id
birthMonthoptional
string
vaccination-plan: birth month, YYYY-MM. Defaults to the browser date minus two months.
reasonsoptional
string[]
pet-registration: reasons for the visit
currentYearoptional
number
pet-registration: the year to count the age from. Defaults to the browser date.
plansoptional
VetPlan[]
health-plans
currencyoptional
string

Built-in texts

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

Show all 62 texts

Key	English	German
species	English Your animal	German Dein Tier
weOffer	English What we do	German Unser Angebot
checkupLabel	English General check-up	German Allgemeinuntersuchung
from	English from {price}	German ab {price}
goodToKnow	English Good to know	German Gut zu wissen
book	English Book an appointment	German Termin buchen
practice	English Practice	German Praxis
to	English to	German bis
service	English Emergency service	German Notdienst
nowPractice	English The practice is open	German Die Praxis ist geöffnet
nowService	English Emergency service on duty	German Der Notdienst ist im Einsatz
day	English Day	German Tag
signs	English Does one of these apply?	German Trifft eines davon zu?
urgent	English Come now and call on the way	German Komm sofort und ruf unterwegs an
calm	English Book a regular appointment	German Buch einen normalen Termin
urgentText	English We prepare the treatment room while you drive.	German Wir bereiten den Behandlungsraum vor, während du fährst.
calmText	English Without these signs, a visit in the next days is enough.	German Ohne diese Anzeichen reicht ein Besuch in den nächsten Tagen.
call	English Call {phone}	German {phone} anrufen
schedule	English Book a visit	German Besuch buchen
animal	English Animal	German Tier
born	English Born in	German Geboren im
weeksN	English {n} weeks	German {n} Wochen
monthsN	English {n} months	German {n} Monate
yearly	English Every year	German Jedes Jahr
coreLabel	English Core	German Grundschutz
optional	English By lifestyle	German Je nach Haltung
done	English Given	German Geimpft
next	English Next vaccination	German Nächste Impfung
allDone	English All set for this year	German Für dieses Jahr alles erledigt
progress	English {n} of {total} given	German {n} von {total} geimpft
remind	English Remind me before each date	German Vor jedem Termin erinnern
coreHint	English Core vaccination, advised for every animal	German Grundschutz, empfohlen für jedes Tier
optionalHint	English Recommended by lifestyle and travel	German Empfohlen je nach Haltung und Reisen
tapHint	English Tap a circle once it is given	German Kreis antippen, wenn geimpft
step	English Step {n} of {total}	German Schritt {n} von {total}
stepPet	English Your animal	German Dein Tier
stepOwner	English You	German Du
stepReason	English The visit	German Der Besuch
petName	English Name	German Name
breed	English Breed	German Rasse
birthYear	English Year of birth	German Geburtsjahr
weight	English Weight in kg	German Gewicht in kg
owner	English Your name	German Dein Name
phone	English Phone	German Telefon
reason	English Why are you coming?	German Warum kommst du?
back	English Back	German Zurück
continue	English Continue	German Weiter
register	English Register {name}	German {name} anmelden
registered	English {name} is registered. We send the confirmation by text.	German {name} ist angemeldet. Die Bestätigung kommt per SMS.
card	English Patient card	German Patientenkarte
age	English Age	German Alter
years	English {n} years	German {n} Jahre
newPatient	English New patient	German Neuer Patient
chip	English Chip number at the first visit	German Chipnummer beim ersten Besuch
perMonth	English / month	German / Monat
included	English Included	German Enthalten
worth	English Worth {price} a year when booked one by one	German Einzeln gebucht {price} im Jahr
save	English You save {price} a year	German Du sparst {price} im Jahr
choose	English Choose this plan	German {name} wählen
popular	English Most chosen	German Am häufigsten gewählt
nameError	English Please enter a name	German Bitte gib einen Namen ein
phoneError	English Please enter a phone number	German Bitte gib eine Telefonnummer ein

Read from the source of the component.

Veterinary practice handles the keys Arrow up, Arrow down, Arrow left and Arrow right itself.
Sets aria-checked, aria-current, aria-label, aria-live and aria-pressed, so screen readers announce purpose and state.
Uses the roles checkbox, radio, radiogroup and status.
Announces changes through a live region without moving focus.
Every field has a label, visible or for screen readers.
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. 6 places in the code switch motion off then.

Frequent questions

How do I install Veterinary practice?

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

Which variants does Veterinary practice have?

5 variants, Species, Emergency dial, Vaccination plan, New patient and Care plans. You pick one with the variant prop, for example variant="emergency".

Can I translate the texts of Veterinary practice?

Yes. Veterinary practice carries 62 texts of its own in English and German, such as “Your animal”, “What we do” and “General check-up”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Veterinary practice?

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

Can I adjust Veterinary practice without code?

Yes, in the Studio. All 5 variants are editable there, texts, lists and switches. The Studio writes the matching Veterinary code to copy.

Similar components

More from Industries, the same area of the kit.

Often combined with

Sections that usually sit next to Veterinary practice on a page.