Skip to content
UI Kit
Accent color

Winery

For wineries, wine estates and wine shops. Wines with a taste profile, the vineyard as a drawn map, tasting bookings, a case to fill and the vintage report.

5 variants
Switch category

Winery

Wine list

Filter by style on chips. Drawn bottles tilt when you point at them, the sweetness and body scales fill one dot after another while scrolling, add a bottle with a pop.

Open in Studio

Vineyards

The estate as a drawn slope with its vineyards, the rows of vines fade in while scrolling. Point at a parcel or pick it below, grape, soil, aspect and the age of the vines swap in.

Open in Studio

Tastings

Pick a format, its dates show the seats left, few seats turn amber. Set the guests with a stepper, the price on the button glides along.

Open in Studio

Case builder

Tap a wine and its bottle drops into a wooden case. Tap a bottle in the case to take it out. A full case shows the discount and the old price struck through.

Open in Studio

Vintage report

Years as tabs with a sliding line. Stars pop in, sun hours and rain count to their values and their bars grow, the harvest date and a note on the wines follow.

Open in Studio

Details

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

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

Props

The WineryProps interface from components/ui/winery.tsx, with the comments from the code.

  • variantoptional
    WineryVariant

    wine-listestatetastingcase-buildervintage

  • eyebrowoptional
    React.ReactNode
  • titleoptional
    React.ReactNode
  • descriptionoptional
    React.ReactNode
  • winesoptional
    Wine[]

    wine-list, case-builder

  • parcelsoptional
    WineParcel[]

    estate

  • tastingsoptional
    WineTasting[]

    tasting

  • caseSizeoptional
    number

    case-builder: bottles per case and the discount for a full one

  • caseDiscountoptional
    number
  • vintagesoptional
    WineVintage[]

    vintage

  • currencyoptional
    string

Built-in texts

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

Show all 46 texts
styleEnglish Wine styleGerman Weinart
vintageEnglish VintageGerman Jahrgang
allEnglish AllGerman Alle
whiteEnglish WhiteGerman Weiß
redEnglish RedGerman Rot
roseEnglish RoséGerman Rosé
sparklingEnglish SparklingGerman Sekt
dryEnglish DryGerman Trocken
sweetEnglish SweetGerman Süß
lightEnglish LightGerman Leicht
fullEnglish FullGerman Kräftig
pairsEnglish WithGerman Passt zu
addEnglish Add {name} to the basketGerman {name} in den Warenkorb
addShortEnglish AddGerman Dazu
addedEnglish AddedGerman Dabei
parcelEnglish VineyardGerman Lage
grapeEnglish GrapeGerman Rebsorte
soilEnglish SoilGerman Boden
aspectEnglish FacingGerman Ausrichtung
ageEnglish VinesGerman Reben
ageNEnglish {n} years oldGerman {n} Jahre alt
sizeEnglish AreaGerman Fläche
haEnglish {n} haGerman {n} ha
formatEnglish TastingGerman Probe
dateEnglish DateGerman Termin
guestsEnglish GuestsGerman Gäste
seatsEnglish {n} seats leftGerman noch {n} Plätze
soldOutEnglish Fully bookedGerman Ausgebucht
bookEnglish Book for {price}German Für {price} buchen
bookedEnglish Booked. See you in the cellar.German Gebucht. Wir sehen uns im Keller.
minusEnglish One guest lessGerman Ein Gast weniger
plusEnglish One guest moreGerman Ein Gast mehr
yourCaseEnglish Your caseGerman Dein Karton
bottlesEnglish {n} of {total} bottlesGerman {n} von {total} Flaschen
removeEnglish Remove {name}German {name} entfernen
discountEnglish {n}% off the full caseGerman {n} % auf den vollen Karton
toDiscountEnglish {n} more for {pct}% offGerman Noch {n} für {pct} % Rabatt
totalEnglish TotalGerman Gesamt
checkoutEnglish Order the caseGerman Karton bestellen
emptyEnglish Add bottles from the listGerman Füge Flaschen aus der Liste hinzu
ratingEnglish RatingGerman Bewertung
sunHoursEnglish Sun hoursGerman Sonnenstunden
rainMmEnglish RainGerman Regen
mmEnglish {n} mmGerman {n} mm
harvestEnglish Harvest beganGerman Lesebeginn
shopVintageEnglish Shop the {year} winesGerman Weine aus {year} kaufen

Accessibility

Read from the source of the component.

  • Winery handles the keys Arrow up, Arrow down, Arrow left and Arrow right itself.
  • Sets aria-checked, aria-label, aria-live and aria-pressed, so screen readers announce purpose and state.
  • Uses the roles radio, radiogroup and status.
  • Announces changes through a live region without moving focus.
  • 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. 3 places in the code switch motion off then.

Frequent questions

How do I install Winery?

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

Which variants does Winery have?

5 variants, Wine list, Vineyards, Tastings, Case builder and Vintage report. You pick one with the variant prop, for example variant="estate".

Can I translate the texts of Winery?

Yes. Winery carries 46 texts of its own in English and German, such as “Wine style”, “Vintage” and “All”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Winery?

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

Can I adjust Winery without code?

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

Similar components

More from Industries, the same area of the kit.

Often combined with

Sections that usually sit next to Winery on a page.

Often searched

Jump to

Copied to the clipboard