pageui.shipixen.com

Page UI is a copy-and-paste component library for React and Next.js landing pages, built on Shadcn UI and TailwindCSS. You use it by copying a component or template section from the docs or templates gallery and pasting it directly into your own codebase, where the code becomes yours to modify. This works best if your project already uses TailwindCSS and the Shadcn UI conventions, since Page UI components are built on top of them.

What you need before copying

Page UI is not installed as a package you import from. The workflow is copy-and-paste, so the main prerequisite is a project that can render the pasted code correctly.

• React or Next.js project — Page UI is made for React and built on TailwindCSS.
• TailwindCSS configured — the components rely on Tailwind utility classes for styling.
• Shadcn UI setup — Page UI is built on top of Shadcn UI, so components assume the same primitives and conventions are available in your project.
• A target location — decide where the pasted section will live, such as a page file or a components folder.

If your project does not yet use Shadcn UI or TailwindCSS, set those up first. Otherwise pasted components may render without their expected styles or dependencies.

Step-by-step: from Page UI to your codebase

1. Open the docs or templates gallery

Go to the Page UI docs or the templates section. The docs contain hundreds of examples you can copy and modify, and templates are organized by use case — for example, Gnomie AI for a B2C AI SaaS app, Specta for a creator platform, and Minimum Via for a minimal product or productized agency.

2. Pick a component or a full section

You can start from a single component or copy an entire template section. The site describes this as "landing pages on easy mode" — copy any section of a template and own it forever in your codebase. There is also a "thief mode" that lets you copy any section with a click.

3. Copy the code

Use the copy action in the docs or template. The docs include props and code samples for each component, so you can see what the component expects before you paste it.

4. Paste into your React/Next.js project

Paste the copied code into the file where you want the section to appear. Because the code is now in your codebase, you can edit it freely — change text, colors, layout, or logic.

5. Verify it renders

Run your project and check the section in the browser. Expected result: the section renders with Tailwind styles and Shadcn UI primitives intact. If it looks unstyled or throws missing-import errors, the usual cause is that TailwindCSS or Shadcn UI is not fully configured in your project.

6. Adjust and ship

Once it renders, modify the copy and layout to match your product. Page UI's stated goal is to help you ship a landing page quickly, so the final step is replacing placeholder content with your own.

Common sticking points

• Missing Shadcn UI primitives — components built on Shadcn UI may reference primitives your project has not added yet. Add the missing ones rather than rewriting the component.
• Tailwind not picking up classes — if your Tailwind content paths do not include the folder where you pasted the component, styles may be purged. Check your Tailwind config.
• Treating it like an npm package — Page UI is copy-and-paste, not an import. There is no install step that brings components in automatically.
• Theme mismatch — the docs let you switch between themes, so a component may look different in your app than in the docs if your theme tokens differ.

What you get and what to check

Page UI also mentions an AI tool, Page AI, that builds production-ready websites using Page UI, which you can try if you want a generated starting point instead of copying sections manually.

If your project already runs TailwindCSS and Shadcn UI, the fastest path is: open a template, copy the section you want, paste it into your page, and adjust. If it does not, set up those two first — that is the step most likely to determine whether the pasted components work on the first try.

Page UI currently ships three named landing page templates — Gnomie AI, Specta, and Minimum Via — plus a broader library of copy-and-paste sections you can assemble yourself. All templates and components are free and open source, built for React on top of Shadcn UI and TailwindCSS. If your project is a B2C AI SaaS, a creator platform, or a minimal product/agency site, one of the named templates likely matches your scenario; otherwise you can copy individual sections into your own layout.

The named templates

Each template is a full landing page you can view, then copy section by section into your codebase.

What you actually get

The value isn't only the three finished templates — it's the section library behind them. Page UI is described as "landing pages on easy mode": you copy any section of a template and own it in your codebase. The site highlights a "thief mode" that lets you copy any section with a click.

Sections demonstrated across the templates include:

• Carousels — for cycling through product screenshots or examples (Gnomie AI)
• Product tours — for walking visitors through features (Gnomie AI)
• Marquee sections — scrolling logo or content strips (Specta)
• Showcase sections — for displaying work or content (Specta)
• Text-and-minimal-color layouts — clean, restrained hero and content blocks (Minimum Via)

Because these are components rather than fixed pages, you can mix a marquee from Specta with a product tour from Gnomie AI if that fits your product better than any single template.

How to decide which to start from

1. Match the audience first. B2C AI SaaS → Gnomie AI. Creator platform → Specta. Minimal product or agency → Minimum Via.
2. Check the section types you need. If your page depends on a carousel or product tour, Gnomie AI gives you a working reference. If you need scrolling social proof or a portfolio-style showcase, Specta does.
3. Copy at the section level, not the page level. The intended workflow is to take only the blocks you need and adapt them, rather than adopting a whole template wholesale.
4. Verify against the docs before committing. Page UI's documentation includes in-depth docs, props, and code samples for each component, plus a theme switcher so you can preview themes directly in the docs.

Things to know before you start

• Stack requirement: React and Next.js, built on Shadcn UI and TailwindCSS. If your project isn't on this stack, the copy-paste workflow won't drop in cleanly.
• Licensing: All templates and components are stated as free to use and open source.
• The library grows: The site says new templates and components are added continuously, so the three named templates aren't a fixed ceiling — check the templates and examples pages for the current list.
• Docs are the reference point: Since components expose props and theming, the documentation is where you confirm exact behavior rather than guessing from the template preview alone.

If none of the three named templates fits, start from a blank slate and pull individual sections from the examples library — the site frames this as "start by example to innovate" rather than forcing a full-template choice.

Use Page UI when you want a React/Next.js landing page assembled from pre-built, conversion-oriented sections rather than designed from a blank file. It is a set of copy-and-paste landing page components and templates built on Shadcn UI and TailwindCSS, and the site describes it as free and open source. It is not a hosted page builder — you still own and maintain the code in your own repository.

What you skip by not starting from scratch

The site's own framing is that "building & designing landing pages is hard." Page UI's answer is to treat landing pages as "easy mode": you copy any section of a template and, in the site's words, "own it forever in your codebase."

Concretely, that removes three tasks you would otherwise do yourself:

• Layout and visual design — sections arrive already styled, so you are not choosing spacing, type scale, and color from zero.
• Conversion structure — the templates are described as built from months of analyzing successful SaaS landing pages, so the section order and content patterns follow proven layouts.
• Component plumbing — because it sits on Shadcn UI and TailwindCSS, the pieces are ordinary React components you can edit, not a locked visual editor.

Where Page UI fits against the alternatives

The practical distinction: a general component library gives you parts, while Page UI gives you assembled pages. If your bottleneck is "I have the primitives but not the page," Page UI targets that gap directly.

What is actually in the library

The site lists both components and full templates, and says new ones are added continuously.

Templates shown on the site include:

• Gnomie AI — a B2C AI SaaS landing page with carousel examples and product tours.
• Specta — a creator-platform template with a marquee section and a showcase section.
• Minimum Via — a minimal template for a minimalistic product or productized agency, using text and restrained color.

Beyond templates, the documentation is positioned as the learning surface: hundreds of copy-and-modify examples, per-component props and code samples, and a theme switcher built into the docs so you can preview themes without leaving the page.

How to decide

Choose Page UI if all of these are true:

• Your project is React or Next.js.
• You already use, or are willing to use, TailwindCSS and Shadcn UI.
• You want a landing page shipped soon and are comfortable editing JSX rather than dragging blocks in a visual editor.
• You want the code in your own repo, not on a vendor's hosting.

Stay with building from scratch if your landing page depends on a bespoke visual identity or interactions that no template approximates, or if introducing Shadcn UI and TailwindCSS into the stack is a cost you do not want to pay.

Getting started

1. Open the docs or templates section of the site.
2. Pick a template or an individual section that matches your page's job.
3. Copy the section into your React/Next.js codebase.
4. Replace the placeholder copy, imagery, and links with your product's.
5. Adjust theme tokens and Tailwind classes so it matches your brand.

The site also mentions a "thief mode" that copies any section with a single click, and a separate Page AI tool that generates production-ready websites using Page UI — useful if you would rather start from a generated page and edit down.

One thing the site does not state: whether any paid tier or account is required. It describes the templates and components as free to use and open source, but treat that as the site's claim about the library itself rather than a statement about every related tool.

Yes. Page UI is described on its own site as free and open source, and the site states that "all templates and components are free to use and open source." You can copy sections into your own codebase and, in the site's words, "own it forever." There is no pricing page or paid tier mentioned anywhere in the available site content, so nothing in the source material suggests a paid plan, trial limit, or license fee.

What "free and open source" covers

Based on the site's own claims, the free/open-source status applies to the whole library, not a sample:

• All templates — the template gallery (Gnomie AI, Specta, Minimum Via, and others) is presented as free to use.
• All components — the component docs and examples are described as free to use and open source.
• Copy-and-own model — you copy a section into your codebase and keep it there permanently, rather than licensing it per project or per seat.

The site's tagline reinforces this: "Skip the setup" and "Free & open source" appear together in the hero area.

What you actually need to run it

Free to use doesn't mean zero dependencies. Page UI is built for React on top of TailwindCSS and Shadcn UI, so your project needs:

If your stack already matches this, adopting Page UI adds no new licensing cost — only the setup work of integrating the copied code.

What the source does not say

To avoid over-reading the site:

• No specific open-source license (MIT, Apache, etc.) is named in the available content. If license terms matter for your use case, check the GitHub repository directly.
• No pricing page, payment platform, or paid tier is referenced, so there's no evidence of a paid upgrade path.
• No usage limits, attribution requirements, or commercial-use restrictions are stated in the source material.

Practical takeaway

If you're building a landing page in a React/Next.js + Tailwind + Shadcn project and want to avoid paying for a component library, Page UI is positioned exactly for that: free, open source, copy-paste, and yours to keep. The main thing to verify before shipping commercially is the exact license text on the GitHub repo, since the marketing site doesn't spell it out.

Page UI is a free, open-source library of landing page components and templates that you copy and paste directly into a React or Next.js codebase. It is built on top of Shadcn UI and TailwindCSS. It suits developers and small teams who want to assemble a converting landing page quickly without designing sections from scratch — and who are comfortable owning the copied code inside their own project rather than installing a dependency.

What you actually get

The site describes three overlapping resources:

• Components — individual landing page sections you can drop into an app.
• Templates — full page layouts assembled from those sections. The site lists examples including Gnomie AI (a B2C AI SaaS page with carousel and product tour sections), Specta (a creator platform page with marquee and showcase sections), and Minimum Via (a minimal text-and-color page for a product or productized agency).
• Docs and examples — in-depth documentation with props and code samples for each component, plus hundreds of copyable examples. Themes can be switched directly inside the docs.

The stated workflow is "copy and paste any section in your app" and "own it forever in your codebase." The site also mentions a "thief mode" for copying a section with a click.

How it fits into a project

Because Page UI is distributed as copy-and-paste code rather than an npm package, the practical steps look like this:

1. Open the docs or a template on pageui.shipixen.com.
2. Copy the section or component you want.
3. Paste it into your React/Next.js project.
4. Adjust props, content, and Tailwind classes to match your brand.

The expected result is a working section in your own codebase that you can edit freely. The trade-off is that you maintain the copied code yourself — updates to the library do not flow into your project automatically.

Prerequisites and constraints

• Stack: React and Next.js, with TailwindCSS and Shadcn UI as the foundation. If your project does not already use Tailwind and Shadcn-style components, expect setup work before pasted sections render correctly.
• Licensing and cost: The site states that all templates and components are free to use and open source. No paid tier is described in the available material.
• Distribution model: Copy-and-paste, not a versioned package. Plan for manual updates.

Who it is for

Page UI is a reasonable fit if you:

• Are building a SaaS, creator, or product landing page in React/Next.js.
• Want proven section patterns instead of starting from a blank file.
• Prefer owning the markup over depending on a component library's release cycle.

It is a weaker fit if you need a no-code builder, use a different framework, or want automatic upstream updates.

Where to start

Go to the docs for component-level detail and props, or browse the templates if you want a full page to adapt. The site also links a GitHub repository and mentions a separate "Page AI" tool for generating production-ready websites using Page UI, which you can evaluate separately if you want generation rather than manual copying.