Landing Page Feature List Component

Updated on

Use this component to showcase a list of features on the landing page. Each feature has a title, description and icon.

Under the hood, this component uses the Feature component.

Nothing quite like it.

Shipixen sets up everything you need to start working on your blog, website or product.

Deploy now

Deploying to Vercel with a click.

SEO optimized

Shipixen is optimized for search engines.

MDX blog ready

Shipixen comes with a fully featured MDX blog.

Usage

import { LandingFeatureList } from '@/components/landing/LandingFeatureList';
import { SparklesIcon } from 'lucide-react';
<LandingFeatureList
  title={"Nothing quite like it."}
  description={
    'Shipixen sets up everything you need to start working on your blog, website or product.'
  }
  featureItems={[
    {
      title: 'Automatic deployment to Vercel',
      description:
        'Deploying the generated template to Vercel is as easy as clicking a button. ',
      icon: <SparklesIcon />,
    },
  ]}
/>

Examples

With background

Nothing quite like it.

Shipixen sets up everything you need to start working on your blog, website or product.

Deploy now

Deploying to Vercel with a click.

SEO optimized

Shipixen is optimized for search engines.

MDX blog ready

Shipixen comes with a fully featured MDX blog.

With Background Glow

Nothing quite like it.

Shipixen sets up everything you need to start working on your blog, website or product.

Automatic deployment to Vercel

Deploying the generated template to Vercel is as easy as clicking a button.

Dynamic Social Image

We generate an open graph image that will be visible when you share your site online.

MDX blog, no server required

Shipixen comes with a fully featured MDX blog.

API Reference

Prop NameProp TypeRequiredDefault
title string ǀ React.ReactNodeNo-
titleComponent React.ReactNodeNo-
description string ǀ React.ReactNodeNo-
descriptionComponent React.ReactNodeNo-
featureItems FeatureListItem[]Yes-
withBackground booleanNofalse
withBackgroundGlow booleanNofalse
variant 'primary' ǀ 'secondary'No'primary'
backgroundGlowVariant 'primary' ǀ 'secondary'No'primary'
export interface FeatureListItem {
  title: string;
  description: string;
  icon: React.ReactNode;
}

More Examples

For more even more examples, see our Landing Page Component Examples page or see complete landing page examples by Exploring Our Landing Page Templates.