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/features-01/page.tsx
import { Features } from "@/components/features-01"
import { dictionary } from "@/registry/bases/base/blocks/features-01/features-01-dictionary"

export default async function Page({
  params,
}: {
  params?: Promise<{ lang?: string }>
}) {
  const { lang } = (await params) ?? {}
  const locale = lang === "ar" ? "ar" : "en"
  return <Features dictionary={dictionary[locale]} lang={locale} />
}
A heading with a three-column grid of bordered feature cards, each with an icon that warms to the primary color on hover.
features-01
features-01
Files
app/features-02/page.tsx
import { Features } from "@/components/features-02"
import { dictionary } from "@/registry/bases/base/blocks/features-02/features-02-dictionary"

export default async function Page({
  params,
}: {
  params?: Promise<{ lang?: string }>
}) {
  const { lang } = (await params) ?? {}
  const locale = lang === "ar" ? "ar" : "en"
  return <Features dictionary={dictionary[locale]} lang={locale} />
}
Alternating image and text rows with a tag, bullet list and link; images sit in a browser-window frame and the rows mirror in RTL.
features-02
features-02
Files
app/features-03/page.tsx
import { Features } from "@/components/features-03"
import { dictionary } from "@/registry/bases/base/blocks/features-03/features-03-dictionary"

export default async function Page({
  params,
}: {
  params?: Promise<{ lang?: string }>
}) {
  const { lang } = (await params) ?? {}
  const locale = lang === "ar" ? "ar" : "en"
  return <Features dictionary={dictionary[locale]} lang={locale} />
}
A checklist of included features in a three-column grid of bordered rows with check marks.
features-03
features-03
Files
app/features-04/page.tsx
import { Features } from "@/components/features-04"
import { dictionary } from "@/registry/bases/base/blocks/features-04/features-04-dictionary"

export default async function Page({
  params,
}: {
  params?: Promise<{ lang?: string }>
}) {
  const { lang } = (await params) ?? {}
  const locale = lang === "ar" ? "ar" : "en"
  return (
    <Features
      dictionary={dictionary[locale]}
      lang={locale}
      columns={3}
      variant="muted"
    />
  )
}
An Apple-style centered feature grid with large icons and headings, configurable columns and default, muted or inverted surfaces.
features-04
features-04