Numbered steps

How-it-works section with four numbered steps on a gradient connector line, each with a small UI visual.

Library

Velora UI

Framework

React

Type

block

License

MIT

Dependencies

lucide-react

Install

npx shadcn@latest add https://velora.colorlib.com/r/features-steps.json

Files

• src/components/blocks/features-steps.tsx
• src/components/velora/avatar-circles.tsx
• src/components/velora/blur-fade.tsx
• src/components/velora/border-beam.tsx
• src/components/velora/number-ticker.tsx
• src/lib/utils.ts

Source

https://github.com/ColorlibHQ/velora-ui

Categories

• Feature Section Components
• React Feature Section Components
• Tailwind CSS Feature Section Components
• Animated Feature Section Components
• Section Components
• React Section Components
• Tailwind CSS Section Components
• Animated Section Components

More from Velora UI

• Bento feature grid
• Icon feature grid
• Alternating screenshot rows
• Tabbed product tour
• Sticky Scroll
• 3D Card
• 3D Marquee
• 3D Pin
• Animated Beam
• Animated Gradient Text
• Animated List
• Animated Modal