Shadcn.io is not affiliated with official shadcn/ui
Gallery Workflow Steps
A step-by-step visual workflow with screenshots, step numbers, and connecting lines built with React, Next.js, shadcn/ui, and Tailwind CSS. Perfect for onboarding guides and process documentation.
Guide users through complex processes visually. This workflow steps gallery displays each step with a screenshot, number, title, and description connected by flowing lines to create a clear sequential journey.
Related Components
Milestone Wall Gallery
Milestone Wall gallery layout
Feature Highlight Gallery
Feature Highlight gallery layout
User Generated Gallery
User Generated gallery layout
Data Visualization Gallery
Data Visualization gallery layout
Process Flow Gallery
Process Flow gallery layout
Tutorial Steps Gallery
Tutorial Steps gallery layout
FAQ
Was this page helpful?
Sign in to leave feedback.
With Caption
A gallery grid where each image has a prominent caption below with title, photographer credit, and date in React with Next.js, shadcn/ui, and Tailwind CSS
Zoom Pan
A gallery with zoom and pan functionality on individual images with click to zoom and drag to pan interactions built with React, Next.js, shadcn/ui, and Tailwind CSS