A client-side React component that renders a styled vertical list of feature items, each with an icon, title, and description.
## Key Components
### Interfaces
- **`FeatureListItemData`** — Shape of each list item: `icon` (ReactNode), `title` (string), `description` (string)
- **`FeatureListProps`** — Component props: `items` array, optional `className`, optional `iconBoxSize` (default: `72`)
### Component
- **`FeatureList`** — Renders a bordered card list where each row displays a square icon box alongside a title and description. Dividers are automatically added between items.
## Usage Example
```typescript
import { FeatureList, FeatureListItemData } from './feature-list';
import { ShieldIcon, ZapIcon, CloudIcon } from 'lucide-react';
const features: FeatureListItemData[] = [
{
icon: ,
title: 'Secure by Default',
description: 'All connections are encrypted end-to-end.',
},
{
icon: ,
title: 'Lightning Fast',
description: 'Sub-100ms response times across all regions.',
},
{
icon: ,
title: 'Cloud Native',
description: 'Built for scalable, distributed infrastructure.',
},
];
export default function Page() {
return (
);
}
```
> **Note:** The `iconBoxSize` prop controls both width and height of the icon container in pixels. Icon content is not automatically sized — size your icon element to fit within the box.