Frontend Toolkit Blocks

A curated collection of responsive Vue 3 component layouts, page blocks, and premium UI assets — ready to copy, paste, and ship.

Built with Vue 3, TypeScript, Tailwind CSS v4, and Vite.

Features

• Copy & Paste Ready — Every component is self-contained
• Fully Responsive — Mobile-first design that works on every screen size
• Dark Mode — Built-in dark/light theme support
• TypeScript — Full type safety with strict typing
• Tailwind CSS v4 — Modern utility-first styling with CSS-first configuration
• Vue 3 Composition API — Uses <script setup> and composables

What's Included

Page Blocks

• HeroBlock — Hero section with gradient text, badge, and dual CTAs
• FeaturesBlock — Configurable feature grid with icons (2/3/4 columns)
• PricingBlock — Three-tier pricing cards with popular plan highlighting
• CtaBlock — Call-to-action with gradient background and optional email input
• ContentBlock — Split content section with stats and testimonials

Page Layouts

• DashboardLayout — Admin dashboard with collapsible sidebar, search, stats, and responsive mobile nav
• AuthLayout — Split-screen authentication with social login and branding panel

UI Components

• ThemeToggle — Dark/light mode toggle using VueUse

Getting Started

# Install dependencies
pnpm install

# Start dev server
pnpm dev

# Build for production
pnpm build

# Run tests
pnpm test:unit

Deploy To Netlify

The project is configured for Netlify with:

• netlify.toml for the build command and publish directory
• public/_redirects for Vue Router history-mode fallback

Netlify settings:

• Build command: pnpm build
• Publish directory: dist
• Node version: 22

If you prefer the CLI after logging in:

pnpm --package=netlify-cli dlx netlify login
pnpm --package=netlify-cli dlx netlify init

Project Structure

src/
├── assets/
│   └── main.css          # Tailwind CSS entry + design tokens
├── components/
│   ├── app/              # App shell (header, footer)
│   ├── blocks/           # Copy-paste page sections
│   ├── layouts/          # Full page layouts
│   └── ui/               # UI primitives
├── lib/
│   └── utils.ts          # Utility functions (cn)
├── pages/                # App views/pages
├── router/               # Vue Router config
└── main.ts               # App entry point

Tech Stack

Tool	Version	Purpose
Vue	3.5+	UI framework
TypeScript	5.7+	Type safety
Tailwind CSS	4.1+	Styling
Vite	6.2+	Build tool
Pinia	2.3+	State management
Vue Router	4.5+	Routing
VueUse	12+	Composables
Lucide	Latest	Icons

License

MIT