PricingTable

Inhalt

Preistabelle mit rotierendem conic-gradient-Rand am hervorgehobenen Plan (animiert über CSS @property) und Pill-Toggle für monatliche/jährliche Abrechnung mit Preis-Flip-Animation.

Live Demo

2 Monate gratis

Starter

Für den schnellen Einstieg mit einer Seite.

19 €/ Monat

Onepager
SSL-Zertifikat inklusive
Kontaktformular
Impressum & Datenschutz

Starter wählen

Business

Beliebt

Der Klassiker für Restaurants und Vereine.

39 €/ Monat

Bis zu 10 Seiten
Speisekarte & Galerie
SEO-Grundpaket
Google Maps & Social Media
Monatliche Inhaltspflege

Business wählen

Premium

Volle Ausstattung ohne Kompromisse.

79 €/ Monat

Unbegrenzte Seiten
Online-Reservierung
Mehrsprachigkeit
Newsletter-Anbindung
Priority-Support

Premium wählen

Props / API

Prop	Typ	Pflicht	Default	Beschreibung
`plans`	`PricingPlan[]`	Ja	—	Pläne {name, description?, monthly, yearly, features[], featured?, badge?, ctaLabel?, href?}
`currency`	`string`	Nein	`'€'`	Währungszeichen
`yearlyNote`	`string`	Nein	—	Hinweis am Jährlich-Toggle, z.B. '2 Monate gratis'
`accentColor`	`string`	Nein	`'#0d9488'`	Akzentfarbe
`accentColorEnd`	`string`	Nein	`'#38bdf8'`	Zweite Gradient-Farbe
`theme`	`'light' \| 'dark'`	Nein	`'light'`	Farbschema
`onSelect`	`(plan, interval) => void`	Nein	—	Auswahl-Callback
`className`	`string`	Nein	—	Zusätzliche CSS-Klasse

Code-Beispiel

<PricingTable
  yearlyNote="2 Monate gratis"
  plans={[
    { name: 'Starter', monthly: 19, yearly: 16, features: ['1 Seite', 'SSL inklusive', 'Kontaktformular'] },
    {
      name: 'Business', monthly: 39, yearly: 32, featured: true, badge: 'Beliebt',
      features: ['Bis zu 10 Seiten', 'SSL inklusive', 'Speisekarte & Galerie', 'SEO-Grundpaket'],
    },
    { name: 'Premium', monthly: 79, yearly: 65, features: ['Unbegrenzte Seiten', 'Online-Reservierung', 'Mehrsprachig', 'Priority-Support'] },
  ]}
/>