ComponentsSite blocks

Feature grid

Services, treatments or product modules — without the card wall. Card-less by default: hairline rules, mono index numbers and whitespace. The tabs variant is a Radix Tabs island; sticky media swaps images with CSS view timelines and no JS.

Radix Tabs (tabs variant only) blocks/site/feature-grid.tsx, blocks/site/feature-tabs.tsx, blocks/site/_site-icon-1.tsx, blocks/site/registry-1.ts, styles/blocks.csstheme · material · accent · density · font

Services

What we build

Four things, done properly. Everything else we hand to people who do it better.

  1. 01

    Restaurant & venue sites

    Menus your floor staff edit from a phone, allergens that stay in sync, booking that lands in WhatsApp.

  2. 02

    Clinic & spa sites

    Treatment pages that rank for the district, prices with tax notes, and appointment requests without a call centre.

  3. 03

    Ad management

    Google and Meta campaigns measured against real bookings, not clicks. A monthly report in plain language.

  4. 04

    Local SEO

    Business Profile upkeep, review replies and a weekly grid of where you rank across the neighbourhood.

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { FeatureGrid } from "@vamos-ui/react/blocks";

<FeatureGrid
  eyebrow="Services"
  title="What we *build*"
  items={[
    { title: "Restaurant sites", text: "Menus your staff edit from a phone…", link: { href: "/services/restaurants" } },
    { title: "Clinic & spa sites", text: "Treatment pages that rank for the district…" },
  ]}
/>

No bento variant: it is the most recognisable AI-site pattern of 2025–26.

Examples

Grid with icons (spa)

icon takes a lucide name from the f.icon() allow-list (or a node); 20px, stroke 1.5, muted — never boxed. Two items always fall back to the list.

At the spa

Included with every treatment

  • Hammam, 20 minutes

    Warm marble and a kese scrub before any massage or facial.

  • Pool & sauna

    The 12-metre pool and Finnish sauna for the rest of the day.

  • Linden tea & lokum

    In the relaxation room, as long as you like.

  • Two hours parking

    In the Bahariye garage, validated at reception.

  • Single-use linens

    Robes, slippers and peştamal washed at 90°C between guests.

  • Free rescheduling

    Move your booking up to 6 hours before, by message or online.

Tabs (SaaS)

WAI-ARIA tabs with vertical arrow keys; the active tab carries a vertical accent rule. Below 56rem every feature is stacked, nothing hidden.

Product

How the front desk uses it

  1. One inbox for every channel

    WhatsApp Business, Instagram DMs and your website form arrive in one list, with the guest’s history beside each thread.

    Analytics dashboard on a monitor

  2. Bookings from a message

    Turn “table for 4 on Friday” into a booking in two clicks. The guest gets a confirmation in the same chat.

    Four people reviewing a site layout on a laptop

  3. Templates that pass review

    Pre-approved WhatsApp templates for reminders and no-show follow-ups, in Turkish and English.

    The studio’s long table by the window, late afternoon

Sticky media

Each item names a view timeline; the sticky frame cross-fades on it. Without support or with reduced motion, each item shows its own image inline.

Rituals

Three ways to spend an afternoon

  1. A therapist laying warm stones beside a massage table01

    The hammam ritual

    Steam, a kese scrub and a foam wash on the warm göbektaşı, then twenty minutes with linden tea. 75 minutes, ₺2,900.

    Book the ritual
  2. A treatment room with folded towels and a lit candle02

    Deep tissue massage

    For desk shoulders and runner’s calves. Our therapists ask before they press. 60 or 90 minutes, from ₺2,400.

  3. Fresh peonies on the reception desk03

    Peony facial

    A cleanse, a gentle peel and a cold-stone massage with this season’s peony oil. 50 minutes, ₺2,100.

API

FeatureGrid

PropTypeDefault
variant
Layout (see examples).
"list" | "grid" | "tabs" | "sticky-media""list"
eyebrow / title / lead
Section header; with a lead the header splits title | lead on wide containers.
ReactNode—
actions
Header links (link style by default).
SiteCta[]—
items
{ title, text?, icon?, media?, link? } — 2–12 items. A linked item is clickable as a whole through one stretched link (no nested links).
FeatureItem[]—
numbered
Mono 01, 02… index.
booleantrue for list
columns
grid: columns on wide containers (@2xl 2, @4xl 3, @6xl 4).
2 | 3 | 43
headingLevel
Title level; item titles are one level below.
1 | 2 | 32
theme / anchor / id / className / labels / locale / components / editMode
Shared block props.
BlockBaseProps—
Previous
FAQ
Next
File upload