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
Library
Vue 3 components, ready to remix.
Real Vue 3 + Tailwind code with live previews and documented props. Remix it in the Studio, install it with npm, or copy the SFC.
45 results
Free
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
FreeComponent · Data display
Changelog Timeline
Vertical changelog timeline for Vue 3 with version badges, dated releases, typed change tags and filter chips. Built with Tailwind CSS, dark mode.
by Vueplay
$9Component · Navigation
Command Palette
A ⌘K / Ctrl+K command palette for Vue 3 with fuzzy search, grouped results, recent items and full keyboard navigation. Tailwind CSS, dark mode.
by Vueplay
FreeComponent · Forms
Contact Form
Accessible Vue 3 contact form with inline validation, a live character counter and loading, success and error states. Tailwind CSS, dark mode.
by Vueplay
FreeComponent · Call to action
CTA Banner
Vue 3 call-to-action banner in three layouts (glowing panel, split card and slim band) with primary and secondary buttons. Tailwind CSS, dark mode.
by Vueplay
FreeComponent · Data tables
Data Table
Generic, typed Vue 3 data table with click-to-sort columns, search, checkbox row selection and pagination. Tailwind CSS, dark mode, mobile scroll.
by Vueplay
FreeComponent · Navigation
Dropdown Menu
Accessible Vue 3 dropdown menu button with icons, separators, headings, disabled items, arrow-key navigation and click-outside close. Tailwind CSS.
by Vueplay
FreeComponent · Accordions & FAQs
FAQ Accordion
Accessible Vue 3 FAQ accordion with single or multiple open answers, smooth height animation and full ARIA wiring. Tailwind CSS, dark mode.
by Vueplay
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 · Forms
File Dropzone
Drag-and-drop file upload zone for Vue 3 with click to browse, type and size validation, image previews and progress bars. Tailwind CSS, dark mode.
by Vueplay
FreeComponent · Footers
Footer Columns
Multi-column Vue 3 footer with a brand blurb, social icon links and a bottom bar for legal links and system status. Tailwind CSS, dark mode.
by Vueplay
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
$12Component · Data display
Kanban Board
Vue 3 kanban board with native drag and drop, keyboard moves, WIP limits and inline add card. v-model board state, Tailwind CSS, dark mode.
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
FreeComponent · Navbars
Mega Menu Navbar
Vue 3 navbar with Products and Resources mega-menu panels, keyboard navigation and a mobile accordion. Built with Tailwind CSS, dark mode ready.
by Vueplay
FreeComponent · Modals & overlays
Modal Dialog
Accessible Vue 3 modal dialog with v-model:open, focus trap, Escape and backdrop close, scroll lock and footer slot. Tailwind CSS, dark mode.
by Vueplay
FreeComponent · Forms
Multi-Step Form
Config-driven Vue 3 multi-step form wizard with a step indicator, per-step validation, back/next, a review step and a submit event. Tailwind CSS.
by Vueplay
FreeComponent · Footers
Newsletter Footer
Vue 3 footer with a newsletter signup form: email validation, loading and success states, and a subscribe event. Tailwind CSS, dark mode.
by Vueplay
FreeComponent · Navigation
Pagination Bar
Vue 3 pagination bar with v-model:page, smart ellipsis, prev/next, a page-size picker, compact mobile view and a “Showing X–Y of Z” summary. Tailwind CSS.
by Vueplay
FreeComponent · Pricing tables
Pricing Comparison
Vue 3 plan comparison table with grouped feature rows, check and dash cells, a sticky plan header on desktop and stacked cards on mobile. Tailwind CSS.
by Vueplay
FreeComponent · Pricing tables
Pricing Single
Single-plan Vue 3 pricing card with a feature checklist, a sale price, a money-back guarantee and one clear CTA. Tailwind CSS, dark mode, typed props.
by Vueplay