Frontend Toolkit Blocks is an open-source (MIT) collection of copy-paste-ready Vue 3 page blocks, full-page layouts, and UI primitives built with Tailwind CSS v4 and Vite. It provides self-contained sections such as hero, features, pricing, and call-to-action blocks that you can drop into any Vue project, or you can clone the entire starter repository and build a complete site on top of it. The project runs on Vue 3.5+, TypeScript 5.7+, Tailwind CSS v4.1+, and Vite 6.2+, and it is maintained by the developer boussadjra on GitHub.
Key Features
- Copy-paste components — Every block is self-contained, so you can lift a single section into an existing project without importing the whole toolkit.
- Mobile-first responsive design — All sections use Tailwind utility classes to adapt from small to large screens.
- Dark/light mode toggle — A ThemeToggle component powered by VueUse switches between themes and persists the user's preference.
- TypeScript strict typing — The codebase uses full type safety, and a cn utility merges class names.
- Tailwind CSS v4 configured via CSS — Design tokens and Tailwind setup live in src/assets/main.css using Tailwind's CSS-first configuration approach.
- Vue 3 Composition API — Components are written with script setup and composables for maintainable, testable code.
- Five page blocks — HeroBlock includes gradient text, a badge, and dual CTAs; FeaturesBlock renders an icon grid with 2, 3, or 4 columns; PricingBlock shows three tiers with a highlighted popular plan; CtaBlock has a gradient background and optional email input; ContentBlock splits content with stats and testimonials.
- Two full layouts — DashboardLayout provides a collapsible sidebar, search, stats, and responsive mobile navigation; AuthLayout is a split-screen authentication page with social login and a branding panel.
- Netlify deployment ready — The repo includes netlify.toml, a public/_redirects file for Vue Router history-mode fallback, Node 22, and a one-click deploy button.
Who is it for?
- Frontend developers who need battle-tested Vue 3 sections to accelerate building landing pages and admin dashboards.
- Startup teams that want a polished marketing site with pricing and CTA sections without designing from scratch.
- UI engineers who prefer to customize with Tailwind utility classes and need a type-safe, composable component base.
What can you do with it?
- Assemble a landing page — Combine HeroBlock, FeaturesBlock, PricingBlock, and CtaBlock to create a full marketing page in minutes.
- Build an admin dashboard — Start with DashboardLayout to get a collapsible sidebar, search bar, stats cards, and mobile navigation, then add your own content.
- Set up an authentication screen — Use AuthLayout with its split-screen design, social login buttons, and branding panel as the foundation for a login or signup flow.
How does it work?
Get started by cloning the repository and installing dependencies with pnpm. Run pnpm dev to launch the Vite development server, then edit components under src/components/blocks. For production, run pnpm build and the output goes to dist, ready to deploy to Netlify manually or via the provided deploy button.
Pricing
Frontend Toolkit Blocks is free and open-source under the MIT license. You can use it in personal and commercial projects without attribution, and there are no paid tiers.
FAQ
Yes, the entire toolkit is released under the MIT license, so it is free to use, modify, and distribute in both personal and commercial projects.
What Vue version does it require?
The project targets Vue 3.5 or later and leverages the Composition API with script setup. TypeScript 5.7+ is used for type safety.
Does the template include tests?
Yes, the project includes a unit test setup. You can run the test suite with the pnpm test:unit command.
Can I use it without Netlify?
Yes, Netlify is preconfigured, but the build is a standard Vite project with a dist output, so you can deploy it to any static hosting service.
