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-02-25T00: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": "Landing page components that look great & convertPage UI is a set of landing page components & templates that you can copy & paste into you codebase. Made for React & built on top of...",
  "links": [
    "https://pageui.shipixen.com/"
  ],
  "image": "https://pageui.shipixen.com/static/images/ogImg.jpg",
  "content": "<div><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><p><img alt=\"Landing Page Pricing Plan\" srcset=\"https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-pricing-plans-component.webp&amp;w=640&amp;q=75 640w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-pricing-plans-component.webp&amp;w=750&amp;q=75 750w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-pricing-plans-component.webp&amp;w=828&amp;q=75 828w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-pricing-plans-component.webp&amp;w=1080&amp;q=75 1080w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-pricing-plans-component.webp&amp;w=1200&amp;q=75 1200w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-pricing-plans-component.webp&amp;w=1920&amp;q=75 1920w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-pricing-plans-component.webp&amp;w=2048&amp;q=75 2048w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-pricing-plans-component.webp&amp;w=3840&amp;q=75 3840w\" src=\"https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-pricing-plans-component.webp&amp;w=3840&amp;q=75\" /></p><article><a target=\"_blank\" href=\"https://pageui.shipixen.com/docs/landing-page-components/pricing-plan\"><span>Read more about Landing Page Pricing Plan</span></a><div><div><h2>Landing Page Pricing Plan</h2><dl>Published on<dd>February 25, 2025</dd></dl></div><p>A component meant to be used for landing page pricing plan display with features and a call-to-action button. On smaller screens, the layout becomes a single column to ensure usability.</p></div></article></li><li><p><img alt=\"Landing Page Pricing Section\" srcset=\"https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-pricing-plans-component.webp&amp;w=640&amp;q=75 640w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-pricing-plans-component.webp&amp;w=750&amp;q=75 750w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-pricing-plans-component.webp&amp;w=828&amp;q=75 828w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-pricing-plans-component.webp&amp;w=1080&amp;q=75 1080w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-pricing-plans-component.webp&amp;w=1200&amp;q=75 1200w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-pricing-plans-component.webp&amp;w=1920&amp;q=75 1920w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-pricing-plans-component.webp&amp;w=2048&amp;q=75 2048w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-pricing-plans-component.webp&amp;w=3840&amp;q=75 3840w\" src=\"https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-pricing-plans-component.webp&amp;w=3840&amp;q=75\" /></p><article><a target=\"_blank\" href=\"https://pageui.shipixen.com/docs/landing-page-components/pricing\"><span>Read more about Landing Page Pricing Section</span></a><div><div><h2>Landing Page Pricing Section</h2><dl>Published on<dd>February 25, 2025</dd></dl></div><p>A component meant to be used for landing page pricing display. It can show different pricing plans or tiers, features, and a call-to-action button.</p></div></article></li><li><p><img alt=\"Landing Page Footer Section\" srcset=\"https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-footer-component.webp&amp;w=640&amp;q=75 640w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-footer-component.webp&amp;w=750&amp;q=75 750w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-footer-component.webp&amp;w=828&amp;q=75 828w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-footer-component.webp&amp;w=1080&amp;q=75 1080w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-footer-component.webp&amp;w=1200&amp;q=75 1200w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-footer-component.webp&amp;w=1920&amp;q=75 1920w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-footer-component.webp&amp;w=2048&amp;q=75 2048w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-footer-component.webp&amp;w=3840&amp;q=75 3840w\" src=\"https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-footer-component.webp&amp;w=3840&amp;q=75\" /></p><article><a target=\"_blank\" href=\"https://pageui.shipixen.com/docs/landing-page-components/footer\"><span>Read more about Landing Page Footer Section</span></a><div><div><h2>Landing Page Footer Section</h2><dl>Published on<dd>February 24, 2025</dd></dl></div><p>A component meant to be used for the footer on the landing page. It provides additional information and links related to the website, organized in columns. On smaller screens, it changes to a horizontal layout to ensure usability.</p></div></article></li><li><p><img alt=\"Landing Page Newsletter Section\" srcset=\"https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-newsletter-component.webp&amp;w=640&amp;q=75 640w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-newsletter-component.webp&amp;w=750&amp;q=75 750w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-newsletter-component.webp&amp;w=828&amp;q=75 828w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-newsletter-component.webp&amp;w=1080&amp;q=75 1080w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-newsletter-component.webp&amp;w=1200&amp;q=75 1200w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-newsletter-component.webp&amp;w=1920&amp;q=75 1920w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-newsletter-component.webp&amp;w=2048&amp;q=75 2048w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-newsletter-component.webp&amp;w=3840&amp;q=75 3840w\" src=\"https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-newsletter-component.webp&amp;w=3840&amp;q=75\" /></p><article><a target=\"_blank\" href=\"https://pageui.shipixen.com/docs/landing-page-components/newsletter\"><span>Read more about Landing Page Newsletter Section</span></a><div><div><h2>Landing Page Newsletter Section</h2><dl>Published on<dd>February 23, 2025</dd></dl></div><p>A component meant to be used for a newsletter subscription on the landing page. It allows users to enter their email to subscribe to updates. On smaller screens, the input field may adjust accordingly.</p></div></article></li><li><p><img alt=\"Landing Page Navigation / Header\" srcset=\"https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-navigation-and-header-component.webp&amp;w=640&amp;q=75 640w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-navigation-and-header-component.webp&amp;w=750&amp;q=75 750w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-navigation-and-header-component.webp&amp;w=828&amp;q=75 828w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-navigation-and-header-component.webp&amp;w=1080&amp;q=75 1080w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-navigation-and-header-component.webp&amp;w=1200&amp;q=75 1200w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-navigation-and-header-component.webp&amp;w=1920&amp;q=75 1920w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-navigation-and-header-component.webp&amp;w=2048&amp;q=75 2048w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-navigation-and-header-component.webp&amp;w=3840&amp;q=75 3840w\" src=\"https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-navigation-and-header-component.webp&amp;w=3840&amp;q=75\" /></p><article><a target=\"_blank\" href=\"https://pageui.shipixen.com/docs/landing-page-components/navigation\"><span>Read more about Landing Page Navigation / Header</span></a><div><div><h2>Landing Page Navigation / Header</h2><dl>Published on<dd>February 22, 2025</dd></dl></div><p>A component meant to be used as navigation / header in the landing page. It displays a top navigation bar with a main menu and a logo. On smaller screens, the main menu is hidden and a hamburger menu is displayed instead.</p></div></article></li></ul></div></div>",
  "author": "",
  "favicon": "https://pageui.shipixen.com/static/favicons/favicon-16x16.png",
  "source": "pageui.shipixen.com",
  "published": "",
  "ttr": 135,
  "type": "website"
}