18Switch language to English
تيلويند CSSابدأ مع تيلويند الإصدار 4

Templates for the Web

Clean, modern templates. Copy and paste into your apps. Works with all React frameworks. Open Source. Free forever.

Browse TemplatesAdd a template
Files
app/pricing-01/page.tsx
import { Pricing } from "@/components/pricing-01"
import { dictionary } from "@/registry/bases/base/blocks/pricing-01/pricing-01-dictionary"

export default async function Page({
  params,
}: {
  params?: Promise<{ lang?: string }>
}) {
  const { lang } = (await params) ?? {}
  const locale = lang === "ar" ? "ar" : "en"
  return <Pricing dictionary={dictionary[locale]} lang={locale} />
}
Three plan cards with a monthly/yearly billing toggle, animated prices and a highlighted plan.
pricing-01
pricing-01
Files
app/pricing-02/page.tsx
import { Pricing } from "@/components/pricing-02"
import { dictionary } from "@/registry/bases/base/blocks/pricing-02/pricing-02-dictionary"

export default async function Page({
  params,
}: {
  params?: Promise<{ lang?: string }>
}) {
  const { lang } = (await params) ?? {}
  const locale = lang === "ar" ? "ar" : "en"
  return <Pricing dictionary={dictionary[locale]} lang={locale} />
}
Compare-plans table with grouped features and info popovers, stacking into collapsible plan cards on mobile.
pricing-02
pricing-02