{"slug": "show-hn-saas-landing-page-template-react-vue-html-tailwind-free-and-mit", "title": "Show HN: SaaS landing page template (React/Vue/HTML, Tailwind), free and MIT", "summary": "SaaS Design released a free, MIT-licensed SaaS landing page template built with Tailwind CSS, available in React, Vue, and plain HTML. The template includes eleven pages, light/dark mode, and is designed for easy integration with AI coding agents. It is part of a larger set of nine templates and a design system.", "body_md": "A clean, production-ready **SaaS landing page template** built on **Tailwind CSS**, in **React, Vue, and plain HTML**. This is the \"DevTools\" theme: a crisp, monochrome developer-tool style with a full multi-page layout (home, features, docs, pricing, changelog, blog, about, careers, contact, and legal pages).\n\nFree and MIT licensed. Use it in personal and commercial projects.\n\nThe fastest way to see it: open ** html/index.html** in your browser. No build step, no install. It loads Tailwind from a CDN and renders the full template.\n\nFor a real project, use the React or Vue component below.\n\nThis template is built to hand straight to an AI coding agent. Drop the folder next to your project and ask, for example:\n\n```\nAdd this SaaS landing page template to my app using the React version.\n```\n\nYour agent copies the component in and wires up the Tailwind tokens from `globals.css`\n\n.\n\nOpen `html/index.html`\n\nas-is, or copy the markup into your own page. It needs Tailwind CSS v4 and the tokens in `globals.css`\n\n. The standalone file already includes both, so it works on its own.\n\n`react/DevTools.tsx`\n\nis a single component with no required props:\n\n``` js\nimport { DevTools } from \"./DevTools\";\n\nexport default function App() {\n  return <DevTools />;\n}\n```\n\nSet up Tailwind CSS v4 and import `react/globals.css`\n\nonce (it defines the design tokens). The component uses inline SVGs, so there are no icon dependencies.\n\n`vue/DevTools.vue`\n\nis a single-file component:\n\n``` python\n<script setup>\nimport DevTools from \"./DevTools.vue\";\n</script>\n\n<template>\n  <DevTools />\n</template>\n```\n\nImport `vue/globals.css`\n\nonce for the tokens.\n\n- Eleven pages wired into one template: Home, Features, Docs, Pricing, Changelog, Blog, Post, About, Careers, Contact, and legal\n- Light and dark mode from one set of tokens (add the\n`dark`\n\nclass to a parent element) - Fully responsive, semantic markup\n- One design-token file (\n`globals.css`\n\n) so the whole look is tunable from one place\n\nThis is **1 of 9** landing page templates from ** SaaS Design**. The full set also includes the complete app UI (dashboards, data tables, settings, billing, auth, and onboarding) and the design system behind it, all as React, Vue, and HTML code you own.\n\n[See all 9 templates and the design system →](https://www.saasdesign.io/pricing/)\n\nBuilt for people shipping with AI coding tools:\n\nMIT. Free to use in personal and commercial projects. See [LICENSE](/hannah-wright/saas-landing-page-template/blob/main/LICENSE).\n\nMade by [SaaS Design](https://www.saasdesign.io).", "url": "https://wpnews.pro/news/show-hn-saas-landing-page-template-react-vue-html-tailwind-free-and-mit", "canonical_source": "https://github.com/hannah-wright/saas-landing-page-template", "published_at": "2026-06-29 01:54:05+00:00", "updated_at": "2026-06-29 02:28:40.149910+00:00", "lang": "en", "topics": ["developer-tools", "ai-tools"], "entities": ["SaaS Design", "Tailwind CSS", "React", "Vue"], "alternates": {"html": "https://wpnews.pro/news/show-hn-saas-landing-page-template-react-vue-html-tailwind-free-and-mit", "markdown": "https://wpnews.pro/news/show-hn-saas-landing-page-template-react-vue-html-tailwind-free-and-mit.md", "text": "https://wpnews.pro/news/show-hn-saas-landing-page-template-react-vue-html-tailwind-free-and-mit.txt", "jsonld": "https://wpnews.pro/news/show-hn-saas-landing-page-template-react-vue-html-tailwind-free-and-mit.jsonld"}}