Practitioner cards with illustrated portraits, years of experience, specialty chips and a booking link that lift on hover.
The chairs at Maison Rose
Four stylists, one shared obsession with healthy hair. Every visit starts with a ten-minute consultation, on us.
npx shadcn@latest add https://hyperblur.dev/r/local-team-grid.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/local-team-grid.tsx.
import { LocalTeamGrid } from "@/components/hyperblur/local-team-grid"
<LocalTeamGrid members={[{ name: "Ana Silva", role: "Dentist", specialties: ["Implants"], years: 12 }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "The chairs at Maison Rose" | Small line above the heading. |
| title | string | "Meet the hands behind your hair." | Heading. The last two words are set in italic accent. |
| subtitle | string | "Four stylists, ..." | Paragraph under the heading. |
| members | { name: string; role: string; specialties: string[]; years: number; colors?: [string, string]; href?: string }[] | 4 stylists | Team cards. colors sets the portrait background gradient; href adds the booking link. |
| bookLabel | string | "Book with" | Text before the first name on each booking link. |
| cta | { label: string; href: string } | { label: "Book a chair", href: "#book" } | Button next to the heading. |
| accent | string | "#d0667a" | Accent color used for highlights, selected states and buttons. |
| className | string | Extra classes on the section root. | |
| style | React.CSSProperties | Inline styles on the section root. |