Skip to content
Starlight Marketing Components

Getting Started

Starlight Marketing Components is a collection of marketing components designed specifically for Starlight.

Prerequisites

Section titled “Prerequisites”

You will need to have a Starlight website set up with Tailwind and Lucide Icons installed.

Terminal window
npm create astro@latest -- --template starlight/tailwind
Terminal window
npm install @lucide/astro

Installation

Section titled “Installation”

  1. Install it by running the following command in your terminal:

    Terminal window
    npm install @dlcastillop/starlight-marketing-components

  2. Replace the content of the global.css file with the following:

    src/styles/global.css
    @source "../../node_modules/@dlcastillop/starlight-marketing-components/src";
    @import "@dlcastillop/starlight-marketing-components/styles";
    

    @theme {
      /* Accent color palettes. */
      --color-accent-50: oklch(97.7% 0.013 236.62);
      --color-accent-100: oklch(95.1% 0.026 236.824);
      --color-accent-200: oklch(90.1% 0.058 230.902);
      --color-accent-300: oklch(82.8% 0.111 230.318);
      --color-accent-400: oklch(74.6% 0.16 232.661);
      --color-accent-500: oklch(68.5% 0.169 237.323);
      --color-accent-600: oklch(58.8% 0.158 241.966);
      --color-accent-700: oklch(50% 0.134 242.749);
      --color-accent-800: oklch(44.3% 0.11 240.79);
      --color-accent-900: oklch(39.1% 0.09 240.876);
      --color-accent-950: oklch(29.3% 0.066 243.157);
    

      /* Gray color palettes. */
      --color-gray-50: oklch(98.5% 0 0);
      --color-gray-100: oklch(96.7% 0.001 286.375);
      --color-gray-200: oklch(92% 0.004 286.32);
      --color-gray-300: oklch(87.1% 0.006 286.286);
      --color-gray-400: oklch(70.5% 0.015 286.067);
      --color-gray-500: oklch(55.2% 0.016 285.938);
      --color-gray-600: oklch(44.2% 0.017 285.786);
      --color-gray-700: oklch(37% 0.013 285.805);
      --color-gray-800: oklch(27.4% 0.006 286.033);
      --color-gray-900: oklch(21% 0.006 285.885);
      --color-gray-950: oklch(14.1% 0.005 285.823);
    }

  3. Import and use the components.

    ---
    title: Components that make your docs shine
    description: A collection of marketing components designed specifically for Starlight.
    template: splash
    hero:
      title: ""
    ---
    

    import { Hero } from "@dlcastillop/starlight-marketing-components";
    

    <Hero
      title={{
        fistPart: "Components that make",
        highlightedPart: "your docs shine",
      }}
      description="A collection of marketing components designed specifically for Starlight."
      primaryCta={{
        title: "Get Started",
        href: "docs/getting-started",
      }}
      secondaryCta={{
        title: "More developer tools",
        href: "https://dlcastillop.lemonsqueezy.com",
      }}
    />

    It is important to use the components in pages with the splash template of Starlight and to specify the title of the hero like this:

    ---
    title: Components that make your docs shine
    description: A collection of marketing components designed specifically for Starlight.
    template: splash
    hero:
      title: ""
    ---

  4. Start the development server to preview the library in action.