Service Selector

A service picker with tabs for Massage, Hair, Nails, and Skincare. Each tab shows a grid of service cards with an icon, name, short description, duration, and price, so customers can browse offerings by category before booking.

By Staaarter Team

Booking

Docs

Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its tabs dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/service-selector.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/booking/booking4.tsx instead.

Usage

The file also exports booking4Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Booking4, booking4Demo } from "@/components/blocks/booking/booking4";

export default function Page() {
  return <Booking4 {...booking4Demo} />;
}

Props

Prop	Type	Default	Description
heading	string	"Choose a service"	Section heading.
description	string	"Browse by category and pick the treatment you'd like to book."	Short subheading under the heading.
categories	Booking4Category[]	[]	Service categories, each rendered as a tab.
defaultCategory	string	none	Value of the tab selected by default. Falls back to the first category.
className	string	none	Extra classes for the outer section element.

Types

interface Booking4Service {
  id: string;
  name: string;
  description: string;
  duration: string;
  price: string;
  selected?: boolean;
}

interface Booking4Category {
  value: string;
  label: string;
  services: Booking4Service[];
}

Behavior notes

Category tabs are real (powered by the Tabs primitive); the highlighted 'selected' service card is a static demo styling, not a click handler.

More Booking Blocks

View all →

date-time-picker

Date & Time Picker

Split-panel scheduler: a real monthly calendar on the left, morning/afternoon time slots on the right, and a live booking summary footer.

reservation-summary

Reservation Summary

A static booking confirmation card with service, date/time, provider avatar, price breakdown, promo code field, and cancellation policy.

appointment-list

Appointment List

Upcoming and past appointments grouped by date, with provider avatar, status badge, and reschedule/cancel actions.

provider-picker

Provider Picker

A selectable grid of staff/provider cards with rating, reviews, availability, and an Any Provider fallback.

restaurant-reservation

Restaurant Reservation

Table reservation form with a guest stepper, date/time inputs, seating pills, and a live summary panel.

hotel-room-booking

Hotel Room Booking

Selectable room cards with photos and amenities, plus check-in/out dates and a live-computed total.