Loading component…
Components /Team Reveal Grid
Stateful team portraits with auto-cycling expertise reveals
Run the following command
npx shadcn@latest add https://raw.githubusercontent.com/Ashutoshx7/VengeanceUI/main/public/r/team-reveal-grid.json| Prop Name | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | 'The people behind the product' | Small label displayed above the heading. |
| title | string | 'Meet the team' | Main section heading with an animated underline. |
| description | string | team description | Supporting copy below the heading. |
| members | readonly TeamRevealMember[] | six sample members | Team profiles, roles, expertise, images, and accents. |
| activeMemberId | string | null | - | Controlled id of the revealed member. |
| defaultActiveMemberId | string | null | first member | Initial revealed member when uncontrolled. |
| onActiveMemberChange | (memberId: string | null) => void | - | Called when pointer, keyboard, touch, or autoplay selects a member. |
| autoPlay | boolean | true | Cycles the reveal while the component is idle. |
| rotationInterval | number | 2800 | Milliseconds between automatic member changes; values below 1200 are clamped. |
| className | string | - | Additional classes for the section root. |
| Prop Name | Type | Default | Description |
|---|---|---|---|
| id | string | - | Stable member identifier. |
| name | string | - | Member name and image fallback label. |
| role | string | - | Member role. |
| expertise | string | - | Short detail revealed by the active card. |
| image | string | - | Optional local path, data URL, or remote image URL. |
| imageAlt | string | member name | Optional image alternative text. |
| imagePosition | string | 'center top' | CSS object-position value for portrait cropping. |
| accent | string | '#fb4f43' | Any CSS color used for the active treatment. |
Designed the original Team Reveal Grid component aesthetic.