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 Name | Prop Type | Required | Default |
---|---|---|---|
title | string ǀ React.ReactNode | No | - |
titleComponent | React.ReactNode | No | - |
description | string ǀ React.ReactNode | No | - |
descriptionComponent | React.ReactNode | No | - |
featureItems | FeatureListItem[] | Yes | - |
withBackground | boolean | No | false |
withBackgroundGlow | boolean | No | false |
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.