Product screenshot hero

Centered headline above a dashboard in a browser frame with a border beam and a logo row.

Library

Velora UI

Framework

React

Type

block

License

MIT

Dependencies

lucide-react

Install

npx shadcn@latest add https://velora.colorlib.com/r/hero-screenshot.json

Files

• src/components/blocks/hero-screenshot.tsx
• src/components/velora/blur-fade.tsx
• src/components/velora/border-beam.tsx
• src/components/velora/browser-mockup.tsx
• src/components/velora/logo-cloud.tsx
• src/lib/utils.ts
• src/components/ui/button.tsx

Source

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

Categories

• Hero Components
• React Hero Components
• Tailwind CSS Hero Components
• Animated Hero Components
• shadcn/ui Hero Components
• Layout Components
• React Layout Components
• Tailwind CSS Layout Components
• Animated Layout Components
• shadcn/ui Layout Components
• Logo Cloud Components
• React Logo Cloud Components

More from Velora UI

• Browser Mockup
• Container Scroll
• Split CTA with product visual
• Alternating screenshot rows
• Tabbed product tour
• Aurora hero
• Globe split hero
• Developer tool hero
• Hero Parallax
• Phone split hero
• Wavy hero
• Image Slider