Switches between views with tabs or steps. Moving forward slides content to the left, moving back slides it to the right, and the container height eases to the new view.
Connect a repository
Pick where your site lives.
npx shadcn@latest add https://hyperblur.dev/r/view-direction-switch.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/view-direction-switch.tsx.
import { ViewDirectionSwitch } from "@/components/hyperblur/view-direction-switch"
<ViewDirectionSwitch controls="steps" views={[{ id: "a", label: "Connect", content: <p>Connect a repo</p> }, { id: "b", label: "Launch", content: <p>Ship it</p> }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| views | { id: string; label: string; content: ReactNode }[] | Views in order. Direction follows their position. Three billing views are used when omitted. | |
| value | string | Controlled id of the visible view. Pair with onChange. | |
| defaultValue | string | Initial view id when uncontrolled. Defaults to the first view. | |
| onChange | (id: string) => void | Called when the user picks another view. | |
| controls | "tabs" | "steps" | "none" | "tabs" | Built-in controls. Use none to drive the view with value from your own UI. |
| autoPlay | number | 0 | Milliseconds between automatic view changes. 0 turns it off. Pauses on hover and focus and wraps after the last view. |
| duration | number | 440 | Slide and height animation time in milliseconds. |
| accent | string | "#2f7bff" | Active dot, bar and focus color. |