Pricing Tables und Preistabellen
Pakete, Stufen, Rechner und Preislisten, formatiert in der Sprache des Besuchers.
11 Variants
Kategorie wechseln
Marketing
- Hero17
- Features15
- Logo Clouds8
- Stats8
- Pricing11
- Testimonials11
- Call to Action11
- FAQ7
- Newsletter12
- Banners9
- Popups und Consent7
- Services7
- Use Cases6
- Security und Trust7
- Changelog und Roadmap6
- Launch und Waitlist6
- Product Tour6
- Press und Awards10
- AI Features6
- App Download5
- Spenden und Unterstützen4
- Problem und Lösung5
- Einwände5
- Rechner10
- Quiz und Produktberater5
- Kostenlos testen5
- Empfehlung und Partner10
- Community5
- Open Source5
- Manifest5
- Angebot5
- Lead-Magnet4
- Scroll-Geschichten20
- Scroll-Reisen13
- Scroll-Effekte13
- Scroll-Reveals und Übergänge15
Content
- Blog16
- Gallery7
- Team8
- About11
- Content8
- Process7
- Contact8
- Comparison5
- Integrations5
- Error Pages5
- Careers7
- Case Studies6
- Portfolio6
- Events und Webinars6
- Help Center6
- Rechtstexte5
- Dokumentation4
- Suchergebnisse5
- Ressourcen und Downloads4
- Podcast4
- Redaktion15
- Autoren und Interviews10
- Glossar5
- Rezepte5
- Datengeschichten10
- Long Reads5
- Umfragen und Feedback14
- Formularzustände12
- Anfrageformulare16
- Bewerbungen und Anmeldungen13
- Adresse, Zahlung und Einwilligung12
App
- Auth9
- Dashboards6
- Tables6
- Settings5
- AI und Chat16
- Calendar5
- Inbox und Messages5
- Notifications6
- Files6
- Projects6
- Profiles6
- Onboarding6
- Billing und Usage10
- Developer Settings15
- Security und Zugriff10
- Import, Export und Verlauf15
- Automation und Builder14
- KI-Antworten18
- KI-Schreiben und Erstellen13
- KI-Einrichtung14
- KI-Assistenten9
E-Commerce
Industries
- Menus7
- Appointments6
- Listings6
- Courses6
- Rooms und Stays5
- Classes und Schedules6
- Arztpraxis5
- Kanzlei5
- Salon und Spa5
- Autohaus5
- Reisen5
- Sportverein5
- Coworking5
- Museum5
- Kino5
- Schule5
- Handwerk5
- Versicherung5
- Bank5
- Personal Brand15
- Speaker und Media Kits10
- Creator15
- Coaching und Beratung10
- Kunst und Musik15
- Zahnarztpraxis5
- Tierarztpraxis5
- Therapiepraxis5
- Hochzeiten und Events5
- Architekturbüro5
- Steuerberatung5
- Immobilienmakler5
- Blumenladen5
- Weingut5
- Kita5
- Fahrschule5
- Pflege5
- Festival5
Elements
- Buttons20
- Forms und Inputs22
- Picker und Auswahlfelder21
- Spezielle Eingabefelder20
- Cards10
- Overlays21
- Navigation15
- Menüleisten und Umschalter14
- Data Display15
- Fortschritt und Zustände13
- Listen, Bäume und Timelines17
- Charts22
- Vergleichs-Charts22
- Statistik-Charts20
- KPI-, Live- und Karten-Charts22
- Text Effects15
- Textakzente16
- Backgrounds19
- Beams, Partikel und Bewegung18
- Media19
- Code und JSON8
- Panels und Splitter4
Karten, Umschalter oder Vergleichstabelle
Die Preis-Section entscheidet, ob jemand bucht oder zum Vergleichen geht. Die Components hier formatieren jeden Preis in der Sprache der Seite, aus 1,290.00 im Englischen wird 1.290,00 im Deutschen, ganz ohne eigenen Code, und alle Pläne kommen aus einem Daten-Array.
Karten sind der Klassiker mit zwei bis vier Plänen nebeneinander. „Monatlich oder jährlich“ ergänzt den Umschalter für die Abrechnung und zeigt die Ersparnis, die Vergleichstabelle listet jedes Feature je Plan für Produkte, die genau verglichen werden. Der Preisrechner und „Nach Nutzung“ passen zu APIs und Diensten, die nach Menge abrechnen. Die Preisliste eignet sich für Praxen, Salons und Restaurants mit vielen Einzelpreisen, „Ein Paket“ und „Zwei Pakete“ halten ein einfaches Angebot einfach.
Heb genau einen Plan hervor, den, den die meisten nehmen sollen. Halte die Feature-Listen parallel, damit das Auge Zeile für Zeile vergleicht, und nenne die Währung einmal. Auf dem Handy stapeln sich die Karten, und die Vergleichstabelle wird zu einer Liste je Plan. Prüf beides vor dem Veröffentlichen.
Details
Was Preise mitbringt, aus Registry und Quellcode gelesen.
- Bereich
- Marketing
- Variants
- 11
- Version
- 1.0.1 · seit 1.0.0
- Datei
- components/ui/pricing.tsx
- npm-Pakete
- Keine
- Sprachen
- Englisch und Deutsch, 24 eigene Texte
- In Sammlungen
- SaaS-LandingpageKI-Produkt
- Mit KI bauen
- Per MCP in Claude, Cursor, Copilot und Codex
Props
Die Schnittstelle PricingProps aus components/ui/pricing.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.
variantoptionalPricingVariantcardstogglecomparison-tablesingle-plantwo-planscalculatorusage-basedenterprise-calloutprice-listminimalrows
eyebrowoptionalReact.ReactNodetitleoptionalReact.ReactNodedescriptionoptionalReact.ReactNodecurrencyoptionalstringISO currency, e.g. EUR or USD. Formatting follows the visitor's language.
plansoptionalPricingPlan[]comparisonoptionalPricingComparisonGroup[]comparison-table: grouped rows
calculatoroptionalPricingCalculatorcalculator: the slider and its tiers
usageoptionalPricingUsageusage-based: meters, base fee and a sample month
enterpriseoptionalPricingEnterpriseenterprise-callout: the wide band under the plans
menuoptionalPricingMenuSection[]price-list: services or a menu
yearlyLabeloptionalstringtoggle: small label on the yearly option, e.g. "2 months free"
footnoteoptionalReact.ReactNodeSmall print under the block, e.g. "All prices plus VAT"
Eingebaute Texte
Diese Texte schreibt Preise selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.
Alle 24 Texte anzeigen
| Schlüssel | Englisch | Deutsch |
|---|---|---|
| perMonth | Englisch / month | Deutsch / Monat |
| monthly | Englisch Monthly | Deutsch Monatlich |
| yearly | Englisch Yearly | Deutsch Jährlich |
| billing | Englisch Billing period | Deutsch Abrechnungszeitraum |
| billedYearly | Englisch per month, billed yearly | Deutsch pro Monat, jährliche Zahlung |
| billedMonthly | Englisch per month, billed monthly | Deutsch pro Monat, monatliche Zahlung |
| save | Englisch You save {amount} a year | Deutsch Du sparst {amount} im Jahr |
| popular | Englisch Most popular | Deutsch Beliebteste Wahl |
| included | Englisch Included | Deutsch Enthalten |
| notIncluded | Englisch Not included | Deutsch Nicht enthalten |
| from | Englisch from | Deutsch ab |
| features | Englisch Features | Deutsch Leistungen |
| whatsIncluded | Englisch What is included | Deutsch Das ist enthalten |
| perUnit | Englisch per {unit} and month | Deutsch pro {unit} und Monat |
| total | Englisch Your monthly price | Deutsch Dein Monatspreis |
| yearlyTotal | Englisch {amount} a year | Deutsch {amount} im Jahr |
| tier | Englisch Price per {unit} | Deutsch Preis pro {unit} |
| upTo | Englisch up to {n} | Deutsch bis {n} |
| above | Englisch from {n} | Deutsch ab {n} |
| freeIncluded | Englisch Included free | Deutsch Frei enthalten |
| price | Englisch Price | Deutsch Preis |
| platform | Englisch Platform | Deutsch Plattform |
| usage | Englisch Usage | Deutsch Nutzung |
| exampleTotal | Englisch Total | Deutsch Gesamt |
Barrierefreiheit
Aus dem Quellcode der Component abgeleitet.
- Setzt aria-current, aria-labelledby und aria-live, damit Screenreader Zweck und Zustand ansagen.
- Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
- Jedes Feld hat ein Label, sichtbar oder für Screenreader.
- Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
- Zeigt bei Bedienung mit der Tastatur einen sichtbaren Fokusring.
- Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.
Bewegung
- Erscheint beim ersten Sichtkontakt mit einem kurzen Auftritt (kit-rise, useInView).
- Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
- Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 11 Stellen im Code schalten Bewegung dann ab.
Häufige Fragen
Wie installiere ich Preise?
Mit aiw add @ai-website/pricing. Der Befehl legt die Datei components/ui/pricing.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind button, icon, reveal, section und motion. Weitere npm-Pakete braucht sie nicht.
Welche Varianten hat Preise?
11 Varianten, Karten, Monatlich oder jährlich, Vergleichstabelle, Ein Paket, Zwei Pakete, Preisrechner, Nach Nutzung, Mit Enterprise-Band, Preisliste, Minimal und Zeilen. Du wählst sie mit der Prop variant, zum Beispiel variant="toggle".
Kann ich die Texte von Preise übersetzen?
Ja. Preise bringt 24 eigene Texte auf Deutsch und Englisch mit, etwa „/ Monat“, „Monatlich“ und „Jährlich“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.
Kann ein KI-Assistent Preise einbauen?
Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Preise mit aiw_components und installieren sie mit aiw_add @ai-website/pricing. Nenn im Prompt die Variante, etwa variant="cards", dann schreibt der Assistent deine Inhalte direkt in die Props.
Kann ich Preise ohne Code anpassen?
Ja, im Studio. Alle 11 Varianten lassen sich dort bearbeiten, Texte, Listen und Schalter. Das Studio schreibt den passenden Pricing-Code zum Kopieren.
Ähnliche Components, Wird oft kombiniert mit
Ähnliche Components
Mehr aus Marketing, demselben Bereich des Kits.
Wird oft kombiniert mit
Sections, die auf einer Seite meist neben Pricing stehen.
components/ui/pricing.tsx
Quellcode lädt