From d442b7f61992759e52c9e3c378ce3fb24199c209 Mon Sep 17 00:00:00 2001
From: Matt Henry <matt.henry@gsa.gov>
Date: Wed, 14 Aug 2024 13:19:52 -0400
Subject: [PATCH] add super basic installation docs

---
 storybook/getting-started.md  | 28 ++++++++++++++++++++++++++++
 storybook/getting-started.mdx |  6 ++++++
 2 files changed, 34 insertions(+)
 create mode 100644 storybook/getting-started.md
 create mode 100644 storybook/getting-started.mdx

diff --git a/storybook/getting-started.md b/storybook/getting-started.md
new file mode 100644
index 0000000..0add8a0
--- /dev/null
+++ b/storybook/getting-started.md
@@ -0,0 +1,28 @@
+# Getting Started
+
+First, install the package from NPM (note for monthly call viewers: the package isn't published yet.)
+
+```sh
+npm install @uswds/web-components
+```
+
+Once you have the package installed, you can use the components in your project. If you import the entire package, all of the components will be available as exports.
+
+```html
+<script type="module">
+    import '@uswds/web-components';
+</script>
+
+<usa-banner></usa-banner>
+<usa-link href="https://designsystem.digital.gov">It's dangerous to go alone. Here, take this.</usa-link>
+```
+
+However, if you import components individually, your build tool may be able to help you ship less code over the wire:
+
+```html
+<script type="module">
+    import { UsaLink } from '@uswds/web-components';
+</script>
+
+<usa-link href="https://designsystem.digital.gov">It's dangerous to go alone. Here, take this.</usa-link>
+```
diff --git a/storybook/getting-started.mdx b/storybook/getting-started.mdx
new file mode 100644
index 0000000..f4978b6
--- /dev/null
+++ b/storybook/getting-started.mdx
@@ -0,0 +1,6 @@
+import { Meta, Markdown, Typeset } from "@storybook/blocks";
+import content from "./getting-started.md?raw";
+
+<Meta title="Getting Started" />
+
+<Markdown>{content}</Markdown>