Shadcn-ui posts

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

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

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

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.

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

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

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

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 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 flexible inline pill component for announcements, badges, and call-to-action elements with SVG borders, gradient variants, glass backgrounds, and comprehensive customization options.

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

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 comprehensive price comparison component that allows you to compare features across 2-5 products or services with customizable headers, footers, and feature lists.

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 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 collection of text effects for the primary CTA section. Great for adding visual interest to your landing page and making it more engaging.

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 for displaying common user problems in a visually engaging format with hover annotations

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

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 for displaying a series of product steps or features with alternating media positions

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