Show HN: I made open source landing page components and templates

{
  "by": "humbledev28",
  "descendants": 4,
  "id": 40249845,
  "kids": [
    40250191,
    40249904
  ],
  "score": 10,
  "text": "Hey folks,<p>For me making landing pages is an absolute chore, especially when I start from a blank slate. I&#x27;m sure many of you have the same feeling. So I bit the bullet and analyzed a bunch of SaaS landing pages and created a component library + templates based on them.<p>→ Check out <a href=\"https:&#x2F;&#x2F;github.com&#x2F;danmindru&#x2F;page-ui\">https:&#x2F;&#x2F;github.com&#x2F;danmindru&#x2F;page-ui</a><p>The way it works is you run a script and you get the source for yourself, so you have full control. If you ever used Shadcn UI, this&#x27;ll seem familiar.<p>There&#x27;s a twist though! The templates have something called &quot;Thief mode&quot;, so that&#x27;ll &quot;blow up&quot; all sections of a template so you can copy &amp; paste section by section. That&#x27;s super useful after you&#x27;ve build an initial version and just want to add some new sections.<p>Here&#x27;s what&#x27;s inside:<p>- 24 components &amp; 100s of examples + templates\n- Copy &amp; paste any section\n- Themeable\n- Responsive\n- Dark mode included\n- World class docs (I hope) and all open source<p>Currently, you can only install it for React + Next.js, but I see no reason to not support other libs as well as raw HTML + TailwindCSS. I&#x27;d love to add that and also there are a few more templates planned!<p>It&#x27;s early days, but I&#x27;ve built a few sites with it and I&#x27;m super excited about the potential.\nWhat would you like to see? Any particular components or features that&#x27;ll make it great for you?",
  "time": 1714755800,
  "title": "Show HN: I made open source landing page components and templates",
  "type": "story",
  "url": "https://pageui.shipixen.com"
}

{
  "author": null,
  "date": "2025-05-31T00:00:00.000Z",
  "description": "Page UI is a set of landing page components & templates that you can copy & paste into you React/Next.js codebase. Built on top of Shadcn UI and TailwindCSS.",
  "image": "https://pageui.shipixen.com/static/images/ogImg.jpg",
  "logo": null,
  "publisher": "Landing page components & templates that you can copy & paste",
  "title": "Landing page components & templates that you can copy & paste",
  "url": "https://pageui.shipixen.com/"
}

{
  "url": "https://pageui.shipixen.com/",
  "title": "Landing page components & templates that you can copy & paste",
  "description": "New! An AI that builds production-ready websites using Page UI.Try Page AI →Landing page components that look great & convertPage UI is a set of landing page components & templates that you can copy...",
  "links": [
    "https://pageui.shipixen.com/"
  ],
  "image": "https://pageui.shipixen.com/static/images/ogImg.jpg",
  "content": "<div><section><p><span>New!</span> An AI that builds production-ready websites using Page UI.</p><span><a href=\"https://pageai.pro/\" target=\"_blank\">Try Page AI →</a></span></section><div><h2>Landing page components that <span>look great &amp; convert</span></h2><p>Page UI is a set of landing page components &amp; templates that you can copy &amp; paste into you codebase. Made for React &amp; built on top of TailwindCSS.</p></div><div><div><h2>Building &amp; designing landing pages is hard</h2><p>Page UI is <span>landing pages on easy mode</span>.<br /> <span>Copy any section</span> of a template and own it forever<br /> in your codebase.</p><a target=\"_blank\" href=\"https://shipixen.com/demo/landing-page-templates/template/emerald-ai\"><svg width=\"24\" height=\"24\"></svg>Steal this template</a><p>Try out 🥷 thief mode and copy any section with a click!</p></div></div><div><h2>Inspired by the best</h2><p>Designing a website is hard. Making a sale is hard. We've spent months painstakingly analyzing the most successful SaaS landing pages to create <span>templates that convert</span> ― copy &amp; paste any section in your app.</p><a target=\"_blank\" href=\"https://pageui.shipixen.com/demo/landing-page-templates\"><svg width=\"24\" height=\"24\"></svg><span>See all templates</span></a></div><div><h2>Learn by example</h2><p>Page UI documentation has hundreds of examples that you can copy and modify.<br />Start from a blank slate to create, start by example to innovate.</p><dl><p><svg width=\"24\" height=\"24\"></svg> World-class docs. <dd>Explore in-depth docs, props and code samples for each component.</dd></p><p><svg width=\"24\" height=\"24\"></svg> Themes at your fingertips. <dd>Switch between themes straight 👀 in the docs. You got that right.</dd></p><p><svg width=\"24\" height=\"24\"></svg> Templates for days. <dd>We are constantly adding new templates and components to the library.</dd></p></dl><p>All templates and components are free to use and open source.</p></div><div><h2>Ship that landing page today</h2><p>Get started with Page UI and transform your landing pages into high-converting, visually stunning websites with ease.</p></div><div><h2>Page UI is a new way to build landing pages</h2><p>What's old is new again. Page UI is a fresh approach to creating landing pages inspired by Shadcn UI. Have complete control over your components by copying and pasting them into your codebase. No packages, no dependencies, no fuss. Just beautiful, high-converting landing pages.</p><div><div><h3>Easy Copy &amp; Paste</h3><p>Simply pick your preferred components and paste them into your React codebase. That’s it!</p></div><div><h3>Free Templates</h3><p>Access a variety of professionally designed templates, inspired by the best in the industry.</p></div><div><h3>Thief Mode 🥷</h3><p>Turn on Thief Mode to copy any section of a template with a single click. Steal like an artist!</p></div><div><h3>React-Compatible</h3><p>All Page UI components are made for React, making integration into your projects a breeze.</p></div><div><h3>Based on Shadcn UI</h3><p>Page UI is built on top of Shadcn UI &amp; TailwindCSS. Take your favorite UI library to the next level.</p></div><div><h3>Themeable</h3><p>All components are themeable, allowing you to match your brand’s look and feel with ease.</p></div><div><h3>Dark mode</h3><p>Dark mode is built in and ready to use. No more \"I shipped too late\", you'll ship just in time.</p></div><div><h3>World-Class Docs</h3><p>Explore in-depth docs, props and code samples for each component. Or change themes straight in the docs.</p></div><div><h3>Free and Open Source</h3><p>All templates and components are free to use and open source. We're in this together.</p></div></div></div><div><h2>Frequently Asked Questions About Page UI</h2><p>We've collected some of the most common queries about our robust landing page components and templates to help you better understand what Page UI offers.</p></div><div><h2>From the docs</h2><ul><li><article><a target=\"_blank\" href=\"https://pageui.shipixen.com/docs/landing-page-components/leading-pill\"><span>Read more about Landing Leading Pill components</span></a><div><div><h2>Landing Leading Pill components</h2><dl>Published on<dd>May 31, 2025</dd></dl></div><p>A flexible inline pill component for announcements, badges, and call-to-action elements with SVG borders, gradient variants, glass backgrounds, and comprehensive customization options.</p></div></article></li><li><article><a target=\"_blank\" href=\"https://pageui.shipixen.com/docs/landing-page-components/primary-cta-text-effects\"><span>Read more about Landing Page Primary CTA Text Effects Components</span></a><div><div><h2>Landing Page Primary CTA Text Effects Components</h2><dl>Published on<dd>May 31, 2025</dd></dl></div><p>A collection of text effects for the primary CTA section. Great for adding visual interest to your landing page and making it more engaging.</p></div></article></li><li><article><a target=\"_blank\" href=\"https://pageui.shipixen.com/docs/landing-page-components/primary-cta-effects\"><span>Read more about Landing Page Primary CTA Background Effects Components</span></a><div><div><h2>Landing Page Primary CTA Background Effects Components</h2><dl>Published on<dd>May 30, 2025</dd></dl></div><p>A collection of animated background effects for the primary CTA section. Great for adding visual interest to your landing page and making it more engaging.</p></div></article></li><li><article><a target=\"_blank\" href=\"https://pageui.shipixen.com/docs/landing-page-components/pricing-comparison\"><span>Read more about Landing Page Price Comparison</span></a><div><div><h2>Landing Page Price Comparison</h2><dl>Published on<dd>May 29, 2025</dd></dl></div><p>A comprehensive price comparison component that allows you to compare features across 2-5 products or services with customizable headers, footers, and feature lists.</p></div></article></li><li><article><a target=\"_blank\" href=\"https://pageui.shipixen.com/docs/landing-page-components/about\"><span>Read more about About Section</span></a><div><div><h2>About Section</h2><dl>Published on<dd>May 16, 2025</dd></dl></div><p>Showcase your company information with elegant About, Vision, and Mission sections to build trust with your audience</p></div></article></li></ul></div></div>",
  "author": "",
  "favicon": "https://pageui.shipixen.com/static/favicons/favicon-16x16.png",
  "source": "pageui.shipixen.com",
  "published": "",
  "ttr": 127,
  "type": "website"
}