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": "2024-09-08T00: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 Product Tour Component\" srcset=\"https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-tour-component.webp&amp;w=640&amp;q=75 640w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-tour-component.webp&amp;w=750&amp;q=75 750w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-tour-component.webp&amp;w=828&amp;q=75 828w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-tour-component.webp&amp;w=1080&amp;q=75 1080w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-tour-component.webp&amp;w=1200&amp;q=75 1200w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-tour-component.webp&amp;w=1920&amp;q=75 1920w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-tour-component.webp&amp;w=2048&amp;q=75 2048w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-tour-component.webp&amp;w=3840&amp;q=75 3840w\" src=\"https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-tour-component.webp&amp;w=3840&amp;q=75\" /></p><article><a target=\"_blank\" href=\"https://pageui.shipixen.com/docs/landing-page-components/product-tour\"><span>Read more about Landing Page Product Tour Component</span></a><div><div><h2>Landing Page Product Tour Component</h2><dl>Published on<dd>September 8, 2024</dd></dl></div><p>A component meant to be used in the landing page. It displays a list of features and content corresponding to each, creating a product tour. Useful to showcase many features in a compact way and guide the user through the product.</p></div></article></li><li><p><img alt=\"Landing Page Marquee\" srcset=\"https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-marquee-component.webp&amp;w=640&amp;q=75 640w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-marquee-component.webp&amp;w=750&amp;q=75 750w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-marquee-component.webp&amp;w=828&amp;q=75 828w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-marquee-component.webp&amp;w=1080&amp;q=75 1080w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-marquee-component.webp&amp;w=1200&amp;q=75 1200w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-marquee-component.webp&amp;w=1920&amp;q=75 1920w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-marquee-component.webp&amp;w=2048&amp;q=75 2048w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-marquee-component.webp&amp;w=3840&amp;q=75 3840w\" src=\"https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-marquee-component.webp&amp;w=3840&amp;q=75\" /></p><article><a target=\"_blank\" href=\"https://pageui.shipixen.com/docs/landing-page-components/marquee\"><span>Read more about Landing Page Marquee</span></a><div><div><h2>Landing Page Marquee</h2><dl>Published on<dd>August 5, 2024</dd></dl></div><p>A component meant to be used in the landing page. It displays an animated marquee that can loop through images, icons, or text.</p></div></article></li><li><p><img alt=\"Landing Page Showcase\" srcset=\"https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-showcase-component.webp&amp;w=640&amp;q=75 640w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-showcase-component.webp&amp;w=750&amp;q=75 750w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-showcase-component.webp&amp;w=828&amp;q=75 828w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-showcase-component.webp&amp;w=1080&amp;q=75 1080w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-showcase-component.webp&amp;w=1200&amp;q=75 1200w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-showcase-component.webp&amp;w=1920&amp;q=75 1920w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-showcase-component.webp&amp;w=2048&amp;q=75 2048w, https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-showcase-component.webp&amp;w=3840&amp;q=75 3840w\" src=\"https://pageui.shipixen.com/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdocs%2Flanding-page-showcase-component.webp&amp;w=3840&amp;q=75\" /></p><article><a target=\"_blank\" href=\"https://pageui.shipixen.com/docs/landing-page-components/showcase\"><span>Read more about Landing Page Showcase</span></a><div><div><h2>Landing Page Showcase</h2><dl>Published on<dd>August 5, 2024</dd></dl></div><p>A component meant to be used in the landing page. It displays text and a grid of logos/images, optionally showcasing the companies that use the product, integrations etc.</p></div></article></li><li><article><a target=\"_blank\" href=\"https://pageui.shipixen.com/docs/installation/manual-reactjs\"><span>Read more about Manual React.js installation guide</span></a><div><div><h2>Manual React.js installation guide</h2><dl>Published on<dd>May 19, 2024</dd></dl></div><p>Learn how to install Page UI landing page components manually in your React.js app. Install Tailwind CSS  to get started.</p></div></article></li><li><article><a target=\"_blank\" href=\"https://pageui.shipixen.com/docs/installation/reactjs\"><span>Read more about React.js installation guide</span></a><div><div><h2>React.js installation guide</h2><dl>Published on<dd>May 19, 2024</dd></dl></div><p>Learn how to install Page UI landing page components in your React.js app bootstrapped with Vite. Install Tailwind CSS to get started, then configure the codebase.</p></div></article></li></ul></div></div>",
  "author": "",
  "favicon": "https://pageui.shipixen.com/static/favicons/favicon-16x16.png",
  "source": "pageui.shipixen.com",
  "published": "",
  "ttr": 128,
  "type": "website"
}