Vue 3 components, ready to remix.

Component · Pricing tables

Pricing Tiers

Three-tier Vue 3 pricing table with a monthly/yearly toggle, a highlighted plan and a select event. Tailwind CSS, dark mode, fully typed props.

Component · Navbars

Responsive Navbar

Responsive Vue 3 navbar with logo, links, a CTA and an accessible hamburger menu that closes on Escape. Tailwind CSS, dark mode, typed props.

Component · Navigation

Sidebar Nav

Vue 3 app sidebar with sections, icons, badges, collapsible groups, an icon-only collapsed mode and a mobile off-canvas drawer. Tailwind CSS.

Component · Modals & overlays

Slide-over Panel

Vue 3 slide-over drawer that opens from the left or right, with v-model:open, focus trap, Escape close, header and footer slots. Tailwind CSS, dark mode.

Component · Data display

Stats Cards

Vue 3 KPI stat cards with trend deltas and tiny inline SVG sparklines, no chart library needed. Tailwind CSS, dark mode, typed props.

Component · Data display

Team Grid

Vue 3 team section with a responsive grid of member cards: initials avatars, role, short bio, location and social links. Tailwind CSS, dark mode.

Component · Testimonials

Testimonial Carousel

Accessible Vue 3 testimonial carousel with prev/next, dots and autoplay that pauses on hover or focus and honours reduced motion. Tailwind CSS.

Component · Testimonials

Testimonial Grid

Masonry grid of testimonial cards for Vue 3 with initials avatars, optional star ratings and highlighted quotes. Tailwind CSS, dark mode.

Component · Toasts & alerts

Toast Stack

Vue 3 toast notification stack with push/dismiss API, success, error, info and warning variants, pause-on-hover timers and six positions. Tailwind CSS.

Component · Tabs

Underline Tabs

Accessible Vue 3 tabs with underline and pills variants, a sliding indicator, roving tabindex and arrow-key navigation. Tailwind CSS, v-model.

Component · Layout

Block

Component · Data display

Board

A flexible board component built for smooth panning, zooming with a grid layout. It supports both mouse and touch input, making it a great fit for whiteboards, diagram tools, mind maps, and workflow editors. Designed for performance and responsiveness, it delivers a fluid experience on desktop and mobile with intuitive gestures and real-time interaction on a scalable canvas.

Component · Layout

Box

A layout building block based on display: flex. It offers fine-tuned controls for creating a wide range of layouts without writing custom CSS.

Component · Media & effects

Carousel

Carousel is a flexible Vue component for showcasing content with smooth horizontal or vertical rotation. Designed for both simplicity and style, it lets you present images, cards, or custom elements in an engaging, interactive way that adapts to any layout.

Component · Navigation

Link

A flexible link component that can act as a router-link for internal navigation or an href for external URLs. Can be used on its own or inside a Navigator.

Component · Navbars

Navigator

A menu container that controls the styling and behavior of all nested links. Links can be nested infinitely to create multi-level menus.

Component · Typography

Text

Adds text elements with customizable styles.

Component · Media & effects

Tilt

Tilt is an interactive Vue component that brings depth and motion to any element. It reacts smoothly to mouse movement, tilting toward the pointer while casting dynamic shadows, creating a realistic 3D effect that makes your UI feel more alive and engaging.

Component · Typography

Title

Adds headings such as h1, h2, and others. The heading level can be adjusted through properties.

Component · Modals & overlays

Tool

A lightweight and customizable tooltip component with dynamic dark/light themes, responsive positioning (top, bottom, left, right), and smooth hover effects with adaptive colors.

Component · Navigation

Toolbox

A versatile toolbox component that supports up to eight fixed positions on the screen: top-left, top-center, top-right, middle-left, middle-right, and bottom zones. Each toolbox can be freely moved using drag-and-drop with mouse or touch gestures, while preventing overlap with existing toolboxes. Inside each toolbox, items can be reordered or moved between toolboxes, with positions and order saved for persistence. Perfect for customizable dashboards, design tools, or any interface requiring dynamic tool organization.