Guide posts

A flexible inline pill component for announcements, badges, and call-to-action elements with SVG borders, gradient variants, glass backgrounds, and comprehensive customization options.

A collection of text effects for the primary CTA section. Great for adding visual interest to your landing page and making it more engaging.

A collection of animated background effects for the primary CTA section. Great for adding visual interest to your landing page and making it more engaging.

A comprehensive price comparison component that allows you to compare features across 2-5 products or services with customizable headers, footers, and feature lists.

A deep dive into all Shipixen Cursor rules: what they do, how to use them, and why they make your codebase (and AI coding) better.

Showcase your company information with elegant About, Vision, and Mission sections to build trust with your audience

A flexible bento grid component for creating visually appealing grid layouts for landing pages

A component for presenting problems and their solutions in a side-by-side comparison format

A flexible product grid section component for displaying product cards in a responsive layout

A customizable grid of statistics showcased in a clean, bordered layout for displaying key metrics and achievements

A flexible component for showcasing team members with customizable layout and styling options

A component for displaying common user problems in a visually engaging format with hover annotations

A component for displaying a series of product steps or features with alternating media positions

A responsive blog list component that displays blog posts in a grid or list format.

A component for displaying blog post cards in a clean, modern design

A versatile landing page component for showcasing a video alongside compelling call-to-action content

A component for displaying app store download buttons on landing pages. Supports iOS App Store, Mac App Store, Microsoft Store, and Google Play Store with white and black variants.

Learn how to set up a task manager MCP server (Task Master AI) to reduce AI coding errors in Cursor, Windsurf, Lovable. Write a PRD, analyze complexity and break down tasks.

Learn essential file naming and organization practices in Next.js for better code management, scalability, and maintainability.

Explore 8 Next.js templates that streamline website deployment, saving you time and effort on projects ranging from e-commerce to portfolios.

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.

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.

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.

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.

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.

Learn how to upgrade your Next.js app to version 15, the latest release with new features and improvements and React 19 support.

In this guide, we will show you how to configure the newsletter component.

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.

With a little effort, you can set up a virtual machine (VM) on Hetzner for just $4/mo with SSL, DNS, a domain, and a web app. Learn how using Caddy, Cloudflare and Github.

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. It displays text and a grid of logos/images, optionally showcasing the companies that use the product, integrations etc.

Deploy your Shipixen-generated or any Next.js app too Coolify Cloud; self-host your Next.js site on a VPS instead of Verce, Netlify, or other cloud providers.

Deploy your Shipixen-generated website to Static hosting services / Edge / GitHub Pages / S3 / Firebase etc. (or deploy any Next.js website to Static hosting services).

Deploy your Shipixen-generated website to Netlify (or deploy any Next.js website to Netlify).

Troubleshoot and fix common issues or errors with Shipixen/Next.js, as well as an overview of the codebase, components, tools and deployment.

Learn how to change the domain for an existing Shipixen site.

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.

Learn how to add metas to a page in your Shipixen/Next.js project.

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.

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

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.

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 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, 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. 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.

The Shipixen blog can be used as a knowledge base or documentation hub. This guide will show you how to add a knowledge base or documentation hub to your Shipixen template.

Learn how to customize the landing page: change existing sections, add new components, and more.

By default, the blog is located at `/all-articles`. This can be changed by editing the `allArticlesPath` variable in `site.settings.js`.

Shipixen supports importing blog posts from json to a file-based markdown blog. Here is how you can do that. The best part is you can deploy your blog to Vercel with a single click afterwards.

Changing from a Ghost blog to a file-based markdown blog is easy with Shipixen. Import posts, customize your theme, and deploy to Vercel with 1 click.

It is possible to generate a template with Shipixen without a blog. However, you can add a blog later on. This guide will show you how to do that.

Shipixen will get you started with a solid foundation in no time. However, these tools will help you keep the momentum going after you launch your first version.

The Shipixen boilerplate comes with Lucide Icons built in, a simple icon pack with over 1300 icons.

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

The Shipixen boilerplate comes with a themed UI library, built on top with Shadcn UI (a Radix UI & Tailwind CSS component library).

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

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

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.

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. 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. Use this to highlight customer testimonials or reviews as a grid. Each testimonial has text, a name, and a picture of the person.

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.

The starting point for learning how to generate a website & blog with Shipixen, as well as an overview of the codebase, components, tools and deployment

Learn how to create a custom React component that can be used in the blog. Custom components can be used to create reusable sections in the blog as well as interactive components.

Learn how to create custom layouts for your blog posts. Layouts are a great way to add a consistent look and feel to your blog posts.

An overview of the codebase in the generated boilerplate

Get an overview of the available local commands (npm scripts) for boilerplates generated with Shipixen.

An overview of other deployment options for the template.

In this article you will learn how to run the code locally after it has been deployed

Shipixen can generate boilerplate with your branding and custom configuration. This is the starting point for learning how to generate a website & blog with Shipixen, as well as an overview of the codebase and components

Learn more about what Shipixen is and what you can use it for

Read about how to use the Shipixen Vercel Integration to deploy your Shipixen project to Vercel.

Learn how to use the blog. Write blog posts by example plus get a markdown cheatsheet - headers, lists, images, tables and more!

Learn about the boilerplate configuration and how to customize it to your needs after you have generated your site.

The Shipixen boilerplate uses the app/ directory to store all of your pages and api routes.

The Shipixen boilerplate uses the components directory to store all the components used in your project.

The Shipixen boilerplate uses the contentlayer plugin to generate types for your content. This file contains the configuration for the plugin.

Learn about the .contentlayer/ directory in the mdx blog starter.

The Shipixen boilerplate uses the css/ directory to store all of your global CSS. It contains the main Tailwind "entry point" file, `globals.css`.

The Shipixen boilerplate uses the data/ directory to store all of your blog post data (mdx files), as well as author data and global configuration.

The Shipixen boilerplate uses the demo directory to showcase the UI library and landing page sections.

Learn about the env files & the .env.example file in your Shipixen boilerplate.

Learn about the .eslintignore file in your Shipixen boilerplate.

Learn about the .eslintrc file in your Shipixen boilerplate.

Learn about the .gitignore file in your Shipixen boilerplate.

Learn about the .husky/ directory in your Shipixen boilerplate.

Learn about the jsonconfig.json file in your Shipixen boilerplate.

The Shipixen boilerplate uses the layouts directory to store the layouts for the blog.

The Shipixen boilerplate uses the lib/ directory to store utilities and helper functions.

Learn about the next-env.d.ts file in your Shipixen boilerplate.

Learn about the .next/ directory in your Shipixen boilerplate.

Learn about the next.config.js file in your Shipixen boilerplate.

Learn about the node_modules/ directory in your Shipixen boilerplate.

Learn about the package.json file in your Shipixen boilerplate.

Learn about the postcss.config.js file in your Shipixen boilerplate.

Learn about the .prettierrc file in your Shipixen boilerplate.

The Shipixen boilerplate uses the public/ directory to store static files, such as images and favicons.

The Shipixen boilerplate uses the scripts/ directory to generate the rss feed.

Learn about the tailwind.config.js file in your Shipixen boilerplate.

Learn about the tsconfig.json file in your Shipixen boilerplate.

Learn about the .vscode/ directory in your Shipixen boilerplate.

A collection of landing page component demos that you can copy-paste in your own projects.

Setting up analytics with Posthog in your Next.js / Shipixen app is easy and straightforward. This guide will walk you through the process step by step.

Setting up analytics with Vercel is pre-configured and easy to use. In this tutorial, we will walk you through the process of setting up analytics with Vercel in your Next.js / Shipixen app.