docs: Add installation instructions to storybook

IATI · May 15, 2024 · 87dd01c · 87dd01c
1 parent 3dab9fa
commit 87dd01c
Showing 1 changed file with 31 additions and 0 deletions.
diff --git a/src/start.mdx b/src/start.mdx
@@ -3,3 +3,34 @@ import { Meta, Title } from "@storybook/blocks";
 <Meta title="Get Started" />
 
 <Title>IATI Design System</Title>
+
+## Installation
+
+There are multiple ways to use the IATI Design System CSS in your product:
+
+### Option 1: CDN
+
+1. Add a link to the CSS in the `<head>` section of your HTML page:
+
+   ```html
+   <head>
+     <link
+       href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/iati.css"
+       rel="stylesheet"
+     />
+   </head>
+   ```
+
+### Option 2: NPM
+
+1. Install the package with NPM:
+
+   ```
+   npm install iati-design-system
+   ```
+
+2. The CSS can be imported from the following location:
+
+   ```javascript
+   import "iati-design-system/dist/css/iati.css";
+   ```