FreeComponent · Hero sections
Hero Split
Split Vue 3 hero section with copy and two CTAs on the left and a Tailwind-drawn app window mockup on the right. Dark mode, typed props, no images.
by Vueplay1 installs
Vue hero section components
The hero is the first thing a visitor reads, so it has one job: say what the product does and point to the next step. These hero sections are Vue 3 components written with <script setup lang="ts"> and styled with Tailwind CSS 4, including class-based dark mode.
Each one is a normal single-file component with typed props for the headline, supporting text and actions. Install it with npm, paste the source, or open it in the Vueplay Studio and adjust the layout visually.
Free
FreeComponent · Hero sections
Hero Centered
Centered Vue 3 hero with an announcement pill, gradient headline, grid background, two CTAs and a row of wordmarks. Tailwind CSS with dark mode.
by Vueplay
FreeComponent · Hero sections
Hero Email Capture
Vue 3 waitlist hero with an accessible email form: inline validation, loading and success states, and a typed submit event. Tailwind CSS, dark mode.
by Vueplay
Good to know
Building hero sections that hold up
- Keep one h1 per page
- The hero headline is usually the page h1. If you drop a hero into a page that already has one, make the heading level a prop so you do not end up with two.
- Size hero images deliberately
- The hero image is often the Largest Contentful Paint element. Give it explicit width and height, skip loading="lazy" on it, and consider fetchpriority="high".
- Use fluid type, not breakpoint jumps
- Tailwind 4 makes it easy to use clamp() through arbitrary values like text-[clamp(2rem,5vw,3.5rem)], which avoids awkward size jumps between breakpoints.
- Make actions real links
- A primary CTA that navigates should be an <a> or RouterLink, not a button with a click handler, so it works with middle-click, keyboard and crawlers.
FAQ
Questions
Do these hero components work with Nuxt?
Yes. They are plain Vue 3 SFCs with no runtime dependencies besides vue, so they render on the server in Nuxt as well as in a Vite SPA.
How do I change the colors?
Colors are regular Tailwind utility classes, so you can edit them directly or map them to theme variables defined with @theme in your Tailwind 4 CSS.