Loading component…
Components /Developer Service Bento
Animated developer-service showcase with interactive pricing and pause states
Run the following command
npx shadcn@latest add https://raw.githubusercontent.com/Ashutoshx7/VengeanceUI/main/public/r/research-bento-grid.json| Prop Name | Type | Default | Description |
|---|---|---|---|
| monthlyPrice | number | 1990 | Highlighted subscription price shown on the invoice. |
| previousPrice | number | 32000 | Struck-through comparison price shown beside the subscription price. |
| currency | string | 'USD' | ISO 4217 currency code used to format invoice prices. |
| locale | string | 'en-US' | Locale passed to Intl.NumberFormat for invoice prices. |
| paused | boolean | - | Controlled Pause or Resume state. |
| defaultPaused | boolean | false | Initial state of the Pause or Resume control. |
| selectedBrand | number | - | Controlled index of the selected developer brand. |
| defaultSelectedBrand | number | 1 | Initial selected brand index when uncontrolled. |
| brands | readonly ResearchBentoBrand[] | developer brands | One or more named icon components displayed in the showcase. |
| copy | Partial<ResearchBentoGridCopy> | developer copy | Overrides card titles and descriptions. |
| autoPlay | boolean | true | Enables automatic brand rotation, invoice cycling, and cursor spotlight animation. |
| brandRotationInterval | number | 2600 | Milliseconds between automatic brand selections. |
| spotlightInterval | number | 4400 | Milliseconds between automatic Pause-button spotlight cycles. |
| userLabel | string | 'You' | Label displayed beside the active cursor. |
| collaboratorLabel | string | 'X7' | Label displayed beside the collaborator cursor. |
| className | string | - | Additional classes for the component root. |
| onPausedChange | (paused: boolean) => void | - | Called whenever the subscription pause state changes. |
| onSelectedBrandChange | (index: number) => void | - | Called whenever a brand is selected manually or automatically. |