Getting Started
Templates
Blocks
Components
For solo developers, indie hackers, and freelancers shipping their own products. Pay once, keep everything forever.
Instant download · No subscription · Lifetime access
For small teams, agencies, and freelancers shipping multiple client products. Lifetime access for everyone on your team.
Instant CLI token for 5 seats · Onboarding included · Invoice on request
pnpm dlx shadcn@latest add @ruixenui-pro/testimonials-split-tabsTestimonialsSplitTabs| 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 |