FreeComponent · Feature sections
Bento Grid
Bento-style Vue 3 feature grid with wide and tall tiles and small CSS-drawn visuals like maps, timelines and code. Tailwind CSS, dark mode, typed tiles.
by Vueplay
Vue feature section components
Feature sections explain what a product does after the hero has made its promise. These Vue 3 components cover icon grids, alternating text and image rows, and bento-style layouts, all styled with Tailwind CSS 4.
Features are passed as an array of typed items, so adding or reordering one is a data change. Each component supports class-based dark mode and can be remixed in the Vueplay Studio.
Free
FreeComponent · Feature sections
Feature Alternating
Alternating Vue 3 feature rows that zigzag text and CSS-drawn illustrations, with bullets and links per row. Tailwind CSS, dark mode, no images needed.
by Vueplay
FreeComponent · Feature sections
Feature Grid
Responsive Vue 3 feature grid with a heading, inline SVG icons and plain or card variants in 2, 3 or 4 columns. Tailwind CSS, dark mode, typed data.
by Vueplay
FreeComponent · Feature sections
Logo Cloud
"Trusted by" logo cloud for Vue 3 with a bordered grid or an endless marquee, using text wordmarks and SVG marks. Tailwind CSS, dark mode, reduced motion.
by Vueplay
Good to know
Building feature sections that hold up
- Lead with outcomes
- Short titles that describe what the user gets read better than feature names. Keep each description to one or two sentences so the grid stays scannable.
- Use a list for grids
- A grid of features is a list, so render it as <ul> with <li> items. Screen readers then announce how many items there are.
- Treat icons as decoration
- When the title already says what the feature is, mark the icon aria-hidden="true". Pass icons as a slot or component prop rather than baking in an icon library.
- Watch image weight in alternating rows
- Screenshots in feature rows add up quickly. Lazy load everything below the first screen and serve modern formats like WebP or AVIF with explicit dimensions.
FAQ
Questions
Which icon set do these components use?
They use inline SVG so there is no icon dependency. You can pass your own icons through slots or swap in any Vue icon library.
Can I use these components in a Nuxt site?
Yes. They are standard Vue 3 SFCs with no dependencies besides vue, so they work in Nuxt, Vite or any other Vue 3 setup with Tailwind CSS 4.