A vertical tab list with a progress bar that advances to the next feature every few seconds, beside a window that crossfades between product mockups. Hover pauses it and arrow keys move between tabs.
4 stepsWorkflow
Linework keeps planning, writing, review and release in the same place, so context never gets lost between tools.
npx shadcn@latest add https://hyperblur.dev/r/features-tabs.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/features-tabs.tsx.
import { FeaturesTabs } from "@/components/hyperblur/features-tabs"
<FeaturesTabs interval={6000} onChange={(i) => console.log(i)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Workflow" | Pill label above the heading, prefixed with the step count. Hidden when empty. |
| title | string | "One workspace from first sketch to production" | Section heading and the accessible name of the tab list. |
| subtitle | string | sample text | Supporting line under the heading. |
| features | { title: string; description: string; visual?: ReactNode }[] | 4 sample tabs | Tabs in order. Without `visual`, tabs cycle through the built-in plan, code, review and deploy mockups. |
| value | number | Controlled active tab index. Pair with onChange. | |
| defaultValue | number | 0 | Initial active tab when uncontrolled. |
| onChange | (index: number) => void | Called when the active tab changes, by click, keyboard or autoplay. | |
| interval | number | 5000 | Milliseconds each tab stays active before advancing. |
| autoPlay | boolean | true | Advance automatically. Turned off by reduced motion. |
| accent | string | "#2f7bff" | Color of the progress bar, focus rings and panel glow. |