How to Use Page UI Components in Your React or Next.js Project

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.