Services

What a business offers, in seven layouts: cards with prices, a price list, an accordion, detail rows with pictures, a bento, steps to the result and an inquiry with estimate.

7 variants

Switch category

Service cards

Six services with icon, two points, price and a link that covers the card.

Open in Studio

Installv1.0.0

aiw add @ai-website/services

Brings along utils, kit, icon, section, button, reveal

Usage

<Services variant="cards" title="…" items={[{ icon, title, description, price, priceNote, points, href }]} />

Source

Price list

Grouped like a menu, with dotted leaders, durations and a tag for favorites.

Open in Studio

Installv1.0.0

aiw add @ai-website/services

Brings along utils, kit, icon, section, button, reveal

Usage

<Services variant="price-list" items={[{ category, title, description, price, duration }]} />

Source

Accordion

Heading stays on the left, each service opens into details, scope and timing.

Open in Studio

Installv1.0.0

aiw add @ai-website/services

Brings along utils, kit, icon, section, button, reveal

Usage

<Services variant="accordion" items={[{ icon, title, description, price, duration, points }]} />

Source

Detail rows with picture

One wide card per service, picture and text change sides, duration and price at the bottom.

Open in Studio

Installv1.0.0

aiw add @ai-website/services

Brings along utils, kit, icon, section, button, reveal

Usage

<Services variant="detail-rows" items={[{ title, description, media, points, duration, price }]} />

Source

Bento

Five services as a mosaic, the lead service large, each with a picture and a price.

Open in Studio

Installv1.0.0

aiw add @ai-website/services

Brings along utils, kit, icon, section, button, reveal

Usage

<Services variant="bento" items={[{ title, description, media, price, href }]} />

Source

Steps to the result

The way from the first call to the finished service, with what the client holds in the end.

Open in Studio

Installv1.0.0

aiw add @ai-website/services

Brings along utils, kit, icon, section, button, reveal

Usage

<Services variant="steps" steps={[{ title, description, duration }]} result={{ title, points, price, action }} items={[]} />

Source

With inquiry

Pick services, watch the estimate add up and send an inquiry with validation.

Open in Studio

Installv1.0.0

aiw add @ai-website/services

Brings along utils, kit, icon, section, button, reveal

Usage

<Services variant="with-inquiry" currency="EUR" items={[{ title, description, price, amount }]} onInquiry={(data) => …} />

Source

Details

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

Area: Marketing
Variants: 7
Version: 1.0.0 · since 1.0.0
File: components/ui/services.tsx
Brings along: utilskiticonsectionbuttonreveal
npm packages: None
Languages: English and German, 21 texts of its own
Studio: All 7 variants editable
In collections: Local business
Build with AI: Over MCP in Claude, Cursor, Copilot and Codex

Props

The ServicesProps interface from components/ui/services.tsx, with the comments from the code.

variantoptional
ServicesVariant
cardsprice-listaccordiondetail-rowsbentostepswith-inquiry
eyebrowoptional
React.ReactNode
titleoptional
React.ReactNode
descriptionoptional
React.ReactNode
actionsoptional
React.ReactNode
itemsrequired
ServiceItem[]
stepsoptional
ServiceStep[]
steps: the way to the service
resultoptional
{ title: string; description?: React.ReactNode; points?: string[]; price?: string; action?: React.ReactNode }
steps: what the client holds in the end
currencyoptional
string
with-inquiry: currency for the estimate, e.g. "EUR"
onInquiryoptional
(data: { services: string[]; name: string; email: string; message: string }) => void
with-inquiry: called with the form data. Without it the block only shows the thank-you note.

Built-in texts

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

Show all 21 texts

Key	English	German
more	English Details	German Details
included	English Included	German Enthalten
duration	English Duration	German Dauer
price	English Price	German Preis
services	English Services	German Leistungen
step	English Step	German Schritt
result	English Result	German Ergebnis
choose	English Choose services	German Leistungen wählen
selected	English selected	German gewählt
estimate	English Estimate	German Richtwert
estimateNote	English A first figure, the offer follows after a short call.	German Ein erster Wert, das Angebot folgt nach einem kurzen Gespräch.
name	English Name	German Name
email	English Email	German E-Mail
message	English What should we know?	German Was sollten wir wissen?
messagePh	English A few words about your project	German Ein paar Worte zu deinem Projekt
send	English Send inquiry	German Anfrage senden
sent	English Thank you. We reply within one working day.	German Danke. Wir antworten innerhalb eines Werktags.
pickOne	English Pick at least one service.	German Bitte wähle mindestens eine Leistung.
invalidEmail	English Please enter a valid email address.	German Bitte gib eine gültige E-Mail-Adresse ein.
required	English Please fill in this field.	German Bitte fülle dieses Feld aus.
none	English Nothing selected yet	German Noch nichts gewählt

Read from the source of the component.

Sets aria-busy, aria-describedby, aria-invalid, aria-label and aria-live, so screen readers announce purpose and state.
Uses the roles alert 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

Rises in briefly the first time it comes into view (kit-rise, useInView).
Moves with the scroll, its progress follows the position on the page.
Brings animations of its own, calmly timed and without wobble.
With reduced motion (prefers-reduced-motion) it stays still. 15 places in the code switch motion off then.

Frequent questions

How do I install Services?

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

Which variants does Services have?

7 variants, Service cards, Price list, Accordion, Detail rows with picture, Bento, Steps to the result and With inquiry. You pick one with the variant prop, for example variant="price-list".

Can I translate the texts of Services?

Yes. Services carries 21 texts of its own in English and German, such as “Details”, “Included” and “Duration”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Services?

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

Can I adjust Services without code?

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

Similar components

More from Marketing, the same area of the kit.

Often combined with

Sections that usually sit next to Services on a page.

Services

Service cards

Price list

Accordion

Detail rows with picture

Bento

Steps to the result

With inquiry

Details

Props

Built-in texts

Accessibility

Motion

Part of these collections

Part of these collections

Frequent questions

Similar components, Often combined with

Similar components

Often combined with