Timeline Steps

A vertical timeline where each FAQ entry is presented as a numbered step: a filled circle marker connected by a running vertical line, with the question and answer to its right. All steps are always expanded, no accordion needed, which suits sequential or journey-based content like onboarding.

By Staaarter Team

FAQ

Docs

Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/timeline-steps.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/faq/faq33.tsx instead.

Usage

The file also exports faq33Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Faq33, faq33Demo } from "@/components/blocks/faq/faq33";

export default function Page() {
  return <Faq33 {...faq33Demo} />;
}

Props

Prop	Type	Default	Description
badge	string	"Getting started"	Small label shown above the heading.
heading	string	"Your first week, step by step"	Section heading.
description	string	"Here's what to expect as you roll the product out to your team."	Supporting copy under the heading.
items	{ question: string; answer: string }[]	none	Timeline steps, numbered in the order given.
className	string	none	Extra classes for the outer section element.

Behavior notes

Purely presentational: the numbered dots and connecting line are decorative markup (an absolutely positioned line behind z-10 dots), there is no scroll-spy or step-tracking behavior, so this is a plain server component.
All steps render open at all times, there is no collapse/expand interaction.

More FAQ Blocks

View all →

collapsible-accordion

Collapsible Accordion

Stacked cards with expandable sections, for full-length answers in a compact format.

open-list-layout

Open List Layout

Questions with answers displayed directly below in a simple always-open list.

three-column-grid

Three Column Grid

Q&A pairs arranged in a responsive grid layout, always open.

tabbed-categories

Tabbed Categories

Sidebar navigation with category tabs and an accordion of that category's questions.

searchable-accordion

Searchable Accordion

Search input that filters accordion items in real-time by question and answer text.

grouped-sections

Grouped Sections

FAQs organized into titled sections, each with its own independent accordion below it.