18Switch language to العربية
Tailwind CSSGet Started with Tailwind v4

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