Guide posts

Learn how to install Page UI and use landing page components into your React and Next.js app

Find out what Page UI is and how it can help you build your landing page with React and Next.js, using Tailwind CSS and Shadcn UI.

The Shipixen boilerplate comes with custom-made presentational components that you can use to build your own landing page.

Learn how to install Page UI landing page components manually in your React.js app. Install Tailwind CSS to get started.

Learn how to install Page UI landing page components in your Next.js app. Install Tailwind CSS and configure the codebase in just a few steps.

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.

This component is used to display a fullscreen, brand-colored section that displays a title, description & some product logos or icons.

A component meant to be used in the landing page. Use this to show a discount or offer to encourage users to take action, typically used under call to action buttons.

A component meant to be used in the landing page. It displays a collapsible list of frequently asked questions and their answers.

This component is used to display frequently asked questions & answers on the landing page.

A component meant to be used in the landing page. This component displays bullet points (key features) in the description of LandingProductFeature.

This component is used to display a list of features on the landing page. Each feature has a title, description and icon.

This component is used to display a single product feature. It has a title, description and icon. Used in the Features List component.

A component meant to be used in the landing page. It displays an animated marquee that can loop through images, icons, or text.

A component meant to be used in the landing page. A section that shows a title, description and an image. Optionally, it can have actions (children), leading components and a background glow.

A component meant to be used in the landing page as the primary Call to Action section. A section that shows a title & description. Optionally, it can have actions (children) and a background.

This component is used to display a product feature in the landing page. It can show an image on the left, right or center; either in perspective or flat and has many customization options

A component meant to be used in the landing page. It displays a title, description and a grid of LandingProductFeature and/or LandingProductVideoFeature (in any combination, passed as children).

A component meant to be used in the landing page. Use this to show a Product Hunt award, if applicable, to increase trust.

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.

A component meant to be used in the landing page. It displays a title, description and video of a product's feature. The video could either be left, right or center (larger). The section can have a background or not.

A component meant to be used in the landing page. Shows a rating with stars.

A component meant to be used in the landing page. Use this to prompt users to take action, such as signing up for a trial or buying a product.

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.

A component meant to be used in the landing page, as a child of Social Proof Band. Shows a social proof/key feature/milestone item with an optional graphic.

A component meant to be used in the landing page. Highlights important features, milestones or testimonials of your product. Use this to highlight key features or social proof. This is usually placed at the top of the page, but you can also use it in between sections or below your primary CTA.

A component meant to be used in the landing page. Use this to show proof of existing, happy customers & increase trust..

A component meant to be used in the landing page. Use this to highlight customer testimonials or reviews as a grid. Each testimonial has text, a name, and a picture of the person.

A component meant to be used in the landing page. It displays a single testimonial inline. Use this to highlight short customer testimonials or reviews. are meant as short validation and are usually support for a primary or secondary Call to action. Can be used with Testimonial Inline.

A component meant to be used in the landing page. It displays a grid of short testimonials. Use this to highlight short customer testimonials or reviews. These are not meant for reviews, but short validation and are usually support for a primary or secondary Call to action.

This component is used to display a list of testimonials. Each testimonial has text, a name, and a picture of the person.

This component is used to display a single testimonial. It has text, a name, and a picture of the person.