Features that play: the open one fills a line, then the next; beside it a product screen shows it working — sources connecting, a dashboard arranging itself, alerts arriving, a team joining.
When to use
- Features that play in turn, with a product screen beside them showing each one working.
- Home and product pages walking through three to five core features.
When not to use
- More than five features: they play in turn, so the rest wait; Features grid.
- Features best compared side by side: Features bento.
Usage
Feature tour with your own data: every prop has the sample as its default, so pass only what you have.
import { FeatureTour } from "@/components/dashral/blocks/feature-tour"
<FeatureTour
title="How it works"
features={tour}
dwell={6000}
cta={{ label: "Start free", href: "/register" }}
/>API reference
FeatureTour
A feature section that shows each feature working: a list on one side, where the open one fills a line while it's on and then moves to the next, and on the other a product screen that plays it — sources connecting, a dashboard arranging itself, alerts arriving, a team joining a chart. It waits while the pointer is on it, and a click picks a feature. On phones the screen opens inside the feature. With reduced motion, nothing moves on its own. Every part comes from props: your features, each with its own screen, and where the button goes.
| Prop | Type | Default |
|---|---|---|
eyebrow | React.ReactNode | "How it works" |
title | React.ReactNode | sample |
description | React.ReactNode | sample |
features | TourFeature[] | sample |
dwell | numberHow long each feature stays before the next, in ms. | 6000 |
cta | { label: string; href: string } | nullThe button under the list; null hides it. | sample |
type TourFeature
A feature in the tour: its words, and the product screen that shows it (a screenshot, a video, your own scene).
| Prop | Type | Default |
|---|---|---|
id | string | — |
icon | LucideIcon | — |
title | string | — |
body | string | — |
points | string[] | — |
screen | React.ReactNode | — |