Getting Started
Templates
Components
import { TestimonialsSplitTabs } from "@/components/ui/testimonials-split-tabs"
const items = [
{
id: 1,
image: "/images/testimonials/01.jpg",
eyebrow: "Operations",
quote: "A calm system that scales without fighting you.",
author: "Sahil M.",
role: "Founder",
company: "Bravado",
},
// ...
]
export default function Page() {
return (
<TestimonialsSplitTabs
items={items}
defaultActive={1}
hoverToActivate
showGrid
label="Testimonials"
/>
)
}TestimonialsSplitTabs| Prop | Type | Default | Description |
|---|---|---|---|
items | TestimonialSplitTabItem[] | — | Testimonial items to display |
defaultActive | number | 0 | Default active tab index |
hoverToActivate | boolean | true | If true, hovering changes the active tab (desktop). Clicking always works. |
showGrid | boolean | true | Show subtle background grid |
label | string | "Testimonials" | Header label for the component |
desktopHeightClass | string | "md:h-[520px]" | Height class on desktop |
mobileCollapsedHeightClass | string | "h-[110px]" | Collapsed height class on mobile |
mobileExpandedHeightClass | string | "h-[420px]" | Expanded height class on mobile |
expandedFlexClass | string | "md:flex-[7]" | Flex width for expanded tab on desktop |
collapsedFlexClass | string | "md:flex-[1.15]" | Flex width for collapsed tabs on desktop |
onActiveChange | (index: number) => void | undefined | Callback when active tab changes |
TestimonialSplitTabItem| Prop | Type | Default | Description |
|---|---|---|---|
id | string | number | — | Unique id for the testimonial |
image | string | — | Image URL shown in collapsed and expanded states |
alt | string | undefined | Alt text for the image |
eyebrow | string | undefined | Small label shown in the expanded content panel |
quote | string | — | Quote text (shown only when expanded) |
author | string | — | Author name |
role | string | undefined | Author role |
company | string | undefined | Author company |