Features

A features component.

Props

highlightedTitle (required)

type: string

The highlighted text.

title (required)

type: string

The main title of the features section.

description (required)

type: string

The description text.

features (required)

type: array

A list of features to display.

Properties:

• name (string, required): The feature name or title
• description (string, required): The feature description
• icon (typeof IconType, required): The icon component to display for the feature. Must be a Lucide icon component

Example

import { Features } from "@dlcastillop/starlight-marketing-components";
import Plug from "@lucide/astro/icons/plug";
import CircleGauge from "@lucide/astro/icons/circle-gauge";
import Moon from "@lucide/astro/icons/moon";

<Features
  highlightedTitle="Why choose our components"
  title="Everything you need to build world-class documentation"
  description="Our component library is built with the same care and attention to detail that you put into your docs."
  features={[
    {
      name: "Plug and Play",
      description:
        "Drop components into your Starlight project and they just work. No complex configuration, no setup headaches. Install, import, and start building.",
      icon: Plug,
    },
    {
      name: "Performance Optimized",
      description:
        "Lightweight and tree-shakeable. Only ship the code you use. Optimized for Core Web Vitals and fast page loads.",
      icon: CircleGauge,
    },
    {
      name: "Dark Mode Ready",
      description:
        "Beautiful in light and dark themes. All components automatically adapt to your Starlight color scheme without extra configuration.",
      icon: Moon,
    },
  ]}
/>