A feature carousel with a list of tabs beside a large laptop. Each tab swaps the screen with a staggered build, and a progress line advances the tour on its own, pausing on hover or focus.
Pick a feature to see it in the app. The tour advances on its own and pauses while you read.
npx shadcn@latest add https://hyperblur.dev/r/showcase-device-tabs.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/showcase-device-tabs.tsx.
import { ShowcaseDeviceTabs } from "@/components/hyperblur/showcase-device-tabs"
<ShowcaseDeviceTabs interval={7000} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Inside Orbit" | Label above the title. |
| title | string | "Everything your revenue team does, on one screen" | Section heading. |
| subtitle | string | How the tour works | Paragraph above the tabs. |
| features | ShowcaseDeviceTabsFeature[] | Inbox, Pipeline, Scheduling, Automations | Tabs with title, description, screen (inbox, analytics, calendar, automations) and an optional image URL shown on the laptop instead. |
| value | number | Controlled active index. Pair with onValueChange. | |
| defaultValue | number | 0 | Active index when uncontrolled. |
| onValueChange | (index: number) => void | Called when the tab changes, by click, keys or autoplay. | |
| autoplay | boolean | true | Advance to the next tab when the progress line fills. Off under reduced motion. |
| interval | number | 6000 | Milliseconds each tab stays before advancing. |
| accent | string | "#2f7bff" | Color of the progress line, numbers, charts and focus rings. |