diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index 35a75fd..805dd79 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -17,3 +17,4 @@ Tell us what this PR does or link to any related issues that describe the goal h
 - [ ] Added any changes in this PR to the `CHANGELOG.md` `Next` section
 - [ ] If this pull request includes a new component or feature, has it been exported from one of the library's entry points?
 - [ ] Does the component dispatch relevant interaction events? (ie: on:click, on:change, etc.)
+- [ ] Does the component directory include description and usage information in `.stories.svelte`?
diff --git a/CHANGELOG.md b/CHANGELOG.md
index aefa16e..6854c3e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,8 @@
 
 - Patch: Update BasicDropdown with better accessibility (icon hidden from screen readers)
 - Feature: GitHub source links for components via [@etchteam/storybook-addon-github-link](https://storybook.js.org/addons/@etchteam/storybook-addon-github-link) in storybook docs
+- Patch: Update method of declaring Storybook component descriptions and add import instructions to components
+- Patch: Remove description field from top level `meta` object in component `.stories.svelte` files (do not render)
 
 ## v0.10.2
 
diff --git a/src/docs/stories/BasicPage.stories.svelte b/src/docs/stories/BasicPage.stories.svelte
index e31b8e5..9bca511 100644
--- a/src/docs/stories/BasicPage.stories.svelte
+++ b/src/docs/stories/BasicPage.stories.svelte
@@ -1,14 +1,6 @@
 <script context="module">
   export const meta = {
-    title: "Examples/Stories/BasicPage",
-    description: "An example of collecting several components into a basic page",
-    parameters: {
-      docs: {
-        description: {
-          component: "a basic content block."
-        }
-      }
-    }
+    title: "Examples/Stories/BasicPage"
   };
 </script>
 
diff --git a/src/docs/stories/CustomSVGMap.stories.svelte b/src/docs/stories/CustomSVGMap.stories.svelte
index 200a262..fcc283e 100644
--- a/src/docs/stories/CustomSVGMap.stories.svelte
+++ b/src/docs/stories/CustomSVGMap.stories.svelte
@@ -1,25 +1,13 @@
 <script context="module">
   export const meta = {
-    title: "Examples/Stories/CustomSVGMap",
-    parameters: {
-      docs: {
-        description: {
-          component: "An custom SVGMap with a ColorLegend and tooltip."
-        }
-      }
-    }
+    title: "Examples/Stories/CustomSVGMap"
   };
 </script>
 
 <script>
   import { Story, Template } from "@storybook/addon-svelte-csf";
   import { ChartBlock } from "$lib";
-  import {
-    SVGPolygonLayer,
-    SVGLabelLayer,
-    SVGPointLayer,
-    SVGMap
-  } from "$lib/maps";
+  import { SVGPolygonLayer, SVGLabelLayer, SVGPointLayer, SVGMap } from "$lib/maps";
   import ColorLegend from "$lib/maps/ColorLegend/ColorLegend.svelte";
   import county_air_quality_topo from "../../docs/sample-data/county_air_quality_topo.json";
   import { urbanColors } from "$lib/utils";
@@ -33,7 +21,6 @@
   let airQualityScale = scaleQuantile()
     .domain(county_air_quality.features.map((d) => d.properties.index_air_quality))
     .range(urbanColors.getDivergingColors());
-
 </script>
 
 <Template></Template>
diff --git a/src/docs/stories/DatawrapperSwitching.stories.svelte b/src/docs/stories/DatawrapperSwitching.stories.svelte
index 22d6ccd..9f58366 100644
--- a/src/docs/stories/DatawrapperSwitching.stories.svelte
+++ b/src/docs/stories/DatawrapperSwitching.stories.svelte
@@ -1,7 +1,6 @@
 <script context="module">
   export const meta = {
-    title: "Examples/Stories/Datawrapper Switching",
-    description: "Examples of switching between Datawrapper iframes"
+    title: "Examples/Stories/Datawrapper Switching"
   };
 </script>
 
diff --git a/src/docs/stories/DynamicInfoStores.stories.svelte b/src/docs/stories/DynamicInfoStores.stories.svelte
index f80b797..ed1c551 100644
--- a/src/docs/stories/DynamicInfoStores.stories.svelte
+++ b/src/docs/stories/DynamicInfoStores.stories.svelte
@@ -1,7 +1,6 @@
 <script context="module">
   export const meta = {
-    title: "Examples/Stories/Dynamic Info With Stores",
-    description: "Example of writable/derived Svelte store for dynamic data lookup"
+    title: "Examples/Stories/Dynamic Info With Stores"
   };
 </script>
 
diff --git a/src/lib/Analytics/Analytics.docs.mdx b/src/lib/Analytics/Analytics.docs.mdx
index ff4f8fa..5319b3c 100644
--- a/src/lib/Analytics/Analytics.docs.mdx
+++ b/src/lib/Analytics/Analytics.docs.mdx
@@ -1,6 +1,13 @@
 import * as Stories from "./Analytics.stories.svelte";
-import { Meta, Story, Stories as StoriesDocBlock, Canvas, Controls, Primary, Source } from '@storybook/blocks';
-
+import {
+  Meta,
+  Story,
+  Stories as StoriesDocBlock,
+  Canvas,
+  Controls,
+  Primary,
+  Source
+} from "@storybook/blocks";
 
 <Meta title="Components/Analytics" of={Stories} />
 
@@ -8,6 +15,10 @@ import { Meta, Story, Stories as StoriesDocBlock, Canvas, Controls, Primary, Sou
 
 A component that adds Urban Institute's Google Analytics to your page. This will enable tracking of page views and custom events in your project.
 
+```js
+import { Analytics } from "@urbaninstitute/dataviz-components";
+```
+
 ## Properties
 
 The `Analytics` component has the following properties.
@@ -18,35 +29,44 @@ The `Analytics` component has the following properties.
 
 By default, this will add Google analytics' `gtag` to your page and fire a page view. If you are using Urban Institute's dataviz project template, you'll likely want to include this in your `+layout.svelte` or on your `+page.svelte` routes.
 
-<Source dark code={`
+<Source
+  dark
+  code={`
 <script>
 import { Analytics } from "@urbaninstitute/dataviz-components";
 </script>
 <Analytics title="My project title" />
-`} language="html"/>
+`}
+  language="html"
+/>
 
 If you'd like to avoid firing a pageview because you're creating an en embed or for any other reason, you can do so by setting `sendPageview` to `false`.
 
-<Source dark code={`
+<Source
+  dark
+  code={`
 <script>
 import { Analytics } from "@urbaninstitute/dataviz-components";
 </script>
 <Analytics title="My project title" sendPageview={false}/>
-`} language="html"/>
+`}
+  language="html"
+/>
 
 Anytime you have an event handler, use this one-line function call to send relevant data through to Google Analytics:
 
 <Source dark code={`
 import { logClickToGA } from "@urbaninstitute/dataviz-components";
 
-/**
- * sends event data to GTM and GA. call in event handlers for each event type you wish to track.
- * A function that logs a click event to Google Analytics.
- * @param {HTMLElement} target The DOM element that triggered the event.
- * @param {string} eventName A string in the format "event_name--event_specifics" where "event_name is the type of event, such as "map_click" or "dropdown_select" and "event_specifics" refers to the selected option, region, or specific function.
- */
-logClickToGA(target, eventName);
-`} language="js"/>
+/\*\*
+
+- sends event data to GTM and GA. call in event handlers for each event type you wish to track.
+- A function that logs a click event to Google Analytics.
+- @param {HTMLElement} target The DOM element that triggered the event.
+- @param {string} eventName A string in the format "event_name--event_specifics" where "event_name is the type of event, such as "map_click" or "dropdown_select" and "event_specifics" refers to the selected option, region, or specific function.
+  \*/
+  logClickToGA(target, eventName);
+  `} language="js"/>
 
 An example of logClickToGA in action:
 
@@ -54,11 +74,9 @@ An example of logClickToGA in action:
 import { logClickToGA } from "@urbaninstitute/dataviz-components";
 
 myElement.addEventListener("click", (e) => {
-  logClickToGA(
-    e.target,
-    "map_click--" + e.detail.hoverData.hoverCounty + ", " + e.detail.hoverData.hoverStateName
-  );
+logClickToGA(
+e.target,
+"map_click--" + e.detail.hoverData.hoverCounty + ", " + e.detail.hoverData.hoverStateName
+);
 });
 `} language="js"/>
-
-
diff --git a/src/lib/Analytics/Analytics.stories.svelte b/src/lib/Analytics/Analytics.stories.svelte
index 6c635bb..8ea71b1 100644
--- a/src/lib/Analytics/Analytics.stories.svelte
+++ b/src/lib/Analytics/Analytics.stories.svelte
@@ -3,14 +3,8 @@
 
   export const meta = {
     title: "Components/Analytics",
-    description: "A component that provides Google Analytics functionality to your page.",
     component: Analytics,
     parameters: {
-      docs: {
-        description: {
-          component: "A component that provides Google Analytics functionality to your page."
-        }
-      },
       githubLink: {
         url: "/Analytics/Analytics.svelte"
       }
diff --git a/src/lib/BasicDropdown/BasicDropdown.docs.md b/src/lib/BasicDropdown/BasicDropdown.docs.md
new file mode 100644
index 0000000..08eb52b
--- /dev/null
+++ b/src/lib/BasicDropdown/BasicDropdown.docs.md
@@ -0,0 +1,5 @@
+Basic HTML dropdown adhering to Urban styles.
+
+```js
+import { BasicDropdown } from "@urbaninstitute/dataviz-components";
+```
diff --git a/src/lib/BasicDropdown/BasicDropdown.stories.svelte b/src/lib/BasicDropdown/BasicDropdown.stories.svelte
index aaddf9c..8f6b820 100644
--- a/src/lib/BasicDropdown/BasicDropdown.stories.svelte
+++ b/src/lib/BasicDropdown/BasicDropdown.stories.svelte
@@ -2,10 +2,10 @@
   import BasicDropdown from "./BasicDropdown.svelte";
   import IconDownload from "$lib/Button/IconDownload.svelte";
   import urbanColors from "$lib/utils/urbanColors.js";
+  import docs from "./BasicDropdown.docs.md?raw";
 
   export const meta = {
     title: "Components/BasicDropdown",
-    description: "A basic dropdown component that uses a <select> element under the hood.",
     component: BasicDropdown,
     tags: ["autodocs"],
     argTypes: {
@@ -21,7 +21,7 @@
     parameters: {
       docs: {
         description: {
-          component: "Basic HTML dropdown adhering to Urban styles."
+          component: docs
         }
       },
       githubLink: {
diff --git a/src/lib/Block/Block.docs.md b/src/lib/Block/Block.docs.md
new file mode 100644
index 0000000..8a57b7f
--- /dev/null
+++ b/src/lib/Block/Block.docs.md
@@ -0,0 +1,5 @@
+A basic content block with several width options. This helps when building a page layout if you'd like to place your own components inside a container that aligns with the body well of a typical urban.org layout, a wider block, or a full width block.
+
+```js
+import { Block } from "@urbaninstitute/dataviz-components";
+```
diff --git a/src/lib/Block/Block.stories.svelte b/src/lib/Block/Block.stories.svelte
index 98a5aee..d904fa0 100644
--- a/src/lib/Block/Block.stories.svelte
+++ b/src/lib/Block/Block.stories.svelte
@@ -1,9 +1,9 @@
 <script context="module">
   import Block from "./Block.svelte";
+  import docs from "./Block.docs.md?raw";
 
   export const meta = {
     title: "Components/Block",
-    description: "A basic building block of a page",
     component: Block,
     tags: ["autodocs"],
     argTypes: {
@@ -16,8 +16,7 @@
     parameters: {
       docs: {
         description: {
-          component:
-            "A basic content block with several width options. This helps when building a page layout if you'd like to place your own components inside a container that aligns with the body well of a typical urban.org layout, a wider block, or a full width block."
+          component: docs
         }
       },
       githubLink: {
diff --git a/src/lib/Button/Button.docs.md b/src/lib/Button/Button.docs.md
new file mode 100644
index 0000000..2208e08
--- /dev/null
+++ b/src/lib/Button/Button.docs.md
@@ -0,0 +1,5 @@
+Basic HTML Button adhering to Urban styles.
+
+```js
+import { Button } from "@urbaninstitute/dataviz-components";
+```
diff --git a/src/lib/Button/Button.stories.svelte b/src/lib/Button/Button.stories.svelte
index 4be3327..4a658a5 100644
--- a/src/lib/Button/Button.stories.svelte
+++ b/src/lib/Button/Button.stories.svelte
@@ -1,10 +1,10 @@
 <script context="module">
   import Button from "./Button.svelte";
   import IconDownload from "./IconDownload.svelte";
+  import docs from "./Button.docs.md?raw";
 
   export const meta = {
     title: "Components/Button",
-    description: "A basic button component.",
     component: Button,
     tags: ["autodocs"],
     argTypes: {
@@ -22,7 +22,7 @@
     parameters: {
       docs: {
         description: {
-          component: "Basic HTML Button adhering to Urban styles."
+          component: docs
         }
       },
       githubLink: {
diff --git a/src/lib/ChartBlock/ChartBlock.docs.md b/src/lib/ChartBlock/ChartBlock.docs.md
new file mode 100644
index 0000000..f749080
--- /dev/null
+++ b/src/lib/ChartBlock/ChartBlock.docs.md
@@ -0,0 +1,5 @@
+A basic wrapper for charts that includes, title, description, source, and notes. The default slot can be used to include any type of content or visualization between the provided text.
+
+```js
+import { ChartBlock } from "@urbaninstitute/dataviz-components";
+```
diff --git a/src/lib/ChartBlock/ChartBlock.stories.svelte b/src/lib/ChartBlock/ChartBlock.stories.svelte
index a5c28e5..06f3aec 100644
--- a/src/lib/ChartBlock/ChartBlock.stories.svelte
+++ b/src/lib/ChartBlock/ChartBlock.stories.svelte
@@ -1,10 +1,10 @@
 <script context="module">
   import ChartBlock from "./ChartBlock.svelte";
   import DatawrapperIframe from "../DatawrapperIframe/DatawrapperIframe.svelte";
+  import docs from "./ChartBlock.docs.md?raw";
 
   export const meta = {
     title: "Components/ChartBlock",
-    description: "A basic wrapper for charts that includes, title, description, source, and notes.",
     component: ChartBlock,
     tags: ["autodocs"],
     argTypes: {
@@ -24,8 +24,7 @@
       },
       docs: {
         description: {
-          component:
-            "A basic wrapper for charts that includes, title, description, source, and notes. The default slot can be used to include any type of content or visualization between the provided text."
+          component: docs
         }
       },
       githubLink: {
diff --git a/src/lib/DatawrapperIframe/DatawrapperIframe.docs.md b/src/lib/DatawrapperIframe/DatawrapperIframe.docs.md
new file mode 100644
index 0000000..a3c611d
--- /dev/null
+++ b/src/lib/DatawrapperIframe/DatawrapperIframe.docs.md
@@ -0,0 +1,11 @@
+Datawrapper iframe with [event dispatching](https://developer.datawrapper.de/docs/listening-to-chart-interaction-events) enabled. All interaction events are accessible via `on:eventname` (**no periods**) on the `DatawrapperIframe` Svelte component itself. The complete event list and associated descriptions can be found [here](https://developer.datawrapper.de/docs/listening-to-chart-interaction-events#visualization-events).
+
+Examples of how to setup "switching" between Datawrapper charts with a dropdown or button controls can be found [in the Examples section here](/docs/examples-datawrapper-switching--docs).
+
+In April 2024, the `vis.rendered` event was added to the Datawrapper event list (per the Urban team's request) in order to track when a visualization had been rendered/painted on the page. This is useful if there is a longer loading visualization (like a large map) and you'd like to indicate to the user that the visualization is still loading.
+
+The `startrender` event is available via the component's `beforeUpdate()` function in order to track when the iframe starts to load. This can be combined with the `vis.rendered` event to track when the visualization has been rendered/painted on the page in combination with the [LoadingWrapper](/docs/components-loadingwrapper--docs) component.
+
+```js
+import { DatawrapperIframe } from "@urbaninstitute/dataviz-components";
+```
diff --git a/src/lib/DatawrapperIframe/DatawrapperIframe.stories.svelte b/src/lib/DatawrapperIframe/DatawrapperIframe.stories.svelte
index e9ebcce..8136f7e 100644
--- a/src/lib/DatawrapperIframe/DatawrapperIframe.stories.svelte
+++ b/src/lib/DatawrapperIframe/DatawrapperIframe.stories.svelte
@@ -1,16 +1,15 @@
 <script context="module">
   import DatawrapperIframe from "./DatawrapperIframe.svelte";
+  import docs from "./DatawrapperIframe.docs.md?raw";
 
   export const meta = {
     title: "Components/DatawrapperIframe",
-    description: "Datawrapper iframe",
     component: DatawrapperIframe,
     tags: ["autodocs"],
     parameters: {
       docs: {
         description: {
-          component:
-            "Datawrapper iframe with <a href='https://developer.datawrapper.de/docs/listening-to-chart-interaction-events' target='_blank'>event dispatching</a> enabled. All interaction events are accessible via <code>on:eventname</code> (<b>no periods</b>) on the `DatawrapperIframe` Svelte component itself. The complete event list and associated descriptions can be found <a href='https://developer.datawrapper.de/docs/listening-to-chart-interaction-events#visualization-events' target='_blank'>here</a>.<br/><br/>Examples of how to setup \"switching\" between Datawrapper charts with a dropdown or button controls can be found <a href='/docs/examples-datawrapper-switching--docs'>in the Examples section here</a>.<br/><br/>In April 2024, the <code>vis.rendered</code> event was added to the Datawrapper event list (per the Urban team's request) in order to track when a visualization had been rendered/painted on the page. This is useful if there is a longer loading visualization (like a large map) and you'd like to indicate to the user that the visualization is still loading.<br><br>The `startrender` event is available via the component's `beforeUpdate()` function in order to track when the iframe starts to load. This can be combined with the `vis.rendered` event to track when the visualization has been rendered/painted on the page in combination with the <a href='/docs/components-loadingwrapper--docs' >LoadingWrapper</a> component."
+          component: docs
         }
       },
       githubLink: {
diff --git a/src/lib/Fonts/Fonts.docs.mdx b/src/lib/Fonts/Fonts.docs.mdx
index 59e1ae4..520362f 100644
--- a/src/lib/Fonts/Fonts.docs.mdx
+++ b/src/lib/Fonts/Fonts.docs.mdx
@@ -10,7 +10,7 @@ If you need to load the Urban brand fonts in your SvelteKit-powered project, you
 
 Import and use either `<FontsUrban />` or `<FontsWorkrise />` to add the necessary markup to the `<head>` of you html like so:
 
-```html
+```svelte
 <script>
   import { FontsUrban } from "@urbaninstitute/dataviz-components/fonts";
 </script>
diff --git a/src/lib/HeadingAlt/HeadingAlt.docs.md b/src/lib/HeadingAlt/HeadingAlt.docs.md
new file mode 100644
index 0000000..921cdd5
--- /dev/null
+++ b/src/lib/HeadingAlt/HeadingAlt.docs.md
@@ -0,0 +1,5 @@
+Alternate title heading in all caps, useful for h2 tags and lower.
+
+```js
+import { HeadingAlt } from "@urbaninstitute/dataviz-components";
+```
diff --git a/src/lib/HeadingAlt/HeadingAlt.stories.svelte b/src/lib/HeadingAlt/HeadingAlt.stories.svelte
index 340a833..2d9a799 100644
--- a/src/lib/HeadingAlt/HeadingAlt.stories.svelte
+++ b/src/lib/HeadingAlt/HeadingAlt.stories.svelte
@@ -1,15 +1,15 @@
 <script context="module">
   import Heading from "./HeadingAlt.svelte";
+  import docs from "./HeadingAlt.docs.md?raw";
 
   export const meta = {
     title: "Components/HeadingAlt",
-    description: "A block for an alternate heading",
     component: Heading,
     tags: ["autodocs"],
     parameters: {
       docs: {
         description: {
-          component: "Alternate title heading in all caps, useful for h2 tags and lower."
+          component: docs
         }
       },
       githubLink: {
diff --git a/src/lib/Headline/Headline.docs.md b/src/lib/Headline/Headline.docs.md
new file mode 100644
index 0000000..5492a11
--- /dev/null
+++ b/src/lib/Headline/Headline.docs.md
@@ -0,0 +1,5 @@
+A basic headline component.
+
+```js
+import { Headline } from "@urbaninstitute/dataviz-components";
+```
diff --git a/src/lib/Headline/Headline.stories.svelte b/src/lib/Headline/Headline.stories.svelte
index 192a7ef..1cb9e04 100644
--- a/src/lib/Headline/Headline.stories.svelte
+++ b/src/lib/Headline/Headline.stories.svelte
@@ -1,9 +1,9 @@
 <script context="module">
   import Headline from "./Headline.svelte";
+  import docs from "./Headline.docs.md?raw";
 
   export const meta = {
     title: "Components/Headline",
-    description: "A basic headline",
     component: Headline,
     tags: ["autodocs"],
     argTypes: {
@@ -28,7 +28,7 @@
       },
       docs: {
         description: {
-          component: "A basic headline component."
+          component: docs
         }
       },
       githubLink: {
diff --git a/src/lib/LoadingWrapper/LoadingWrapper.docs.md b/src/lib/LoadingWrapper/LoadingWrapper.docs.md
new file mode 100644
index 0000000..aeb475e
--- /dev/null
+++ b/src/lib/LoadingWrapper/LoadingWrapper.docs.md
@@ -0,0 +1,5 @@
+Wrapper to display a loading spinner graphic while content is loading. Exposes `setChildLoading()` and `setChildLoaded()` to be used by children as an alternative method of setting `isChildLoading` boolean. Accepts an alternative graphic for the "graphic" named slot.
+
+```js
+import { LoadingWrapper } from "@urbaninstitute/dataviz-components";
+```
diff --git a/src/lib/LoadingWrapper/LoadingWrapper.stories.svelte b/src/lib/LoadingWrapper/LoadingWrapper.stories.svelte
index f45ee04..4f71b46 100644
--- a/src/lib/LoadingWrapper/LoadingWrapper.stories.svelte
+++ b/src/lib/LoadingWrapper/LoadingWrapper.stories.svelte
@@ -3,17 +3,16 @@
   import LoadingWrapper from "./LoadingWrapper.svelte";
   import LogoUrbanWide from "../LogoUrbanWide/LogoUrbanWide.svelte";
   import DatawrapperIframe from "../DatawrapperIframe/DatawrapperIframe.svelte";
+  import docs from "./LoadingWrapper.docs.md?raw";
 
   export const meta = {
     title: "Components/LoadingWrapper",
-    description: "Wrapper to display a loading spinner graphic while content is loading",
     component: LoadingWrapper,
     tags: ["autodocs"],
     parameters: {
       docs: {
         description: {
-          component:
-            'Wrapper to display a loading spinner graphic while content is loading. Exposes `setChildLoading()` and `setChildLoaded()` to be used by children as an alternative method of setting `isChildLoading` boolean. Accepts an alternative graphic for the "graphic" named slot.'
+          component: docs
         }
       },
       githubLink: {
diff --git a/src/lib/LogoTPCBadge/LogoTPCBadge.docs.md b/src/lib/LogoTPCBadge/LogoTPCBadge.docs.md
new file mode 100644
index 0000000..d602e53
--- /dev/null
+++ b/src/lib/LogoTPCBadge/LogoTPCBadge.docs.md
@@ -0,0 +1,5 @@
+Tax Policy Center logo in square badge format.
+
+```js
+import { LogoTPCBadge } from "@urbaninstitute/dataviz-components";
+```
diff --git a/src/lib/LogoTPCBadge/LogoTPCBadge.stories.svelte b/src/lib/LogoTPCBadge/LogoTPCBadge.stories.svelte
index 13a9e81..593b211 100644
--- a/src/lib/LogoTPCBadge/LogoTPCBadge.stories.svelte
+++ b/src/lib/LogoTPCBadge/LogoTPCBadge.stories.svelte
@@ -1,15 +1,15 @@
 <script context="module">
-  import Logo from "./LogoTPCBadge.svelte";
+  import LogoTPCBadge from "./LogoTPCBadge.svelte";
+  import docs from "./LogoTPCBadge.docs.md?raw";
 
   export const meta = {
     title: "Logos/LogoTPCBadge",
-    description: "A Tax Policy Center logo",
-    component: Logo,
+    component: LogoTPCBadge,
     tags: ["autodocs"],
     parameters: {
       docs: {
         description: {
-          component: "Tax Policy Center logo in square badge format."
+          component: docs
         }
       },
       githubLink: {
@@ -24,7 +24,7 @@
 </script>
 
 <Template let:args>
-  <Logo {...args} />
+  <LogoTPCBadge {...args} />
 </Template>
 
 <Story name="Default" />
diff --git a/src/lib/LogoUrban/LogoUrban.docs.md b/src/lib/LogoUrban/LogoUrban.docs.md
new file mode 100644
index 0000000..3b3b49d
--- /dev/null
+++ b/src/lib/LogoUrban/LogoUrban.docs.md
@@ -0,0 +1,5 @@
+Urban Institute logo in full width format.
+
+```js
+import { LogoUrban } from "@urbaninstitute/dataviz-components";
+```
diff --git a/src/lib/LogoUrban/LogoUrban.stories.svelte b/src/lib/LogoUrban/LogoUrban.stories.svelte
index 399bdec..ff8bd0e 100644
--- a/src/lib/LogoUrban/LogoUrban.stories.svelte
+++ b/src/lib/LogoUrban/LogoUrban.stories.svelte
@@ -1,10 +1,10 @@
 <script context="module">
-  import Logo from "./LogoUrban.svelte";
+  import LogoUrban from "./LogoUrban.svelte";
+  import docs from "./LogoUrban.docs.md?raw";
 
   export const meta = {
     title: "Logos/LogoUrban",
-    description: "An Urban Institute full logo",
-    component: Logo,
+    component: LogoUrban,
     tags: ["autodocs"],
     argTypes: {
       variant: {
@@ -22,7 +22,7 @@
       },
       docs: {
         description: {
-          component: "Urban Institute logo in full width format."
+          component: docs
         }
       },
       githubLink: {
@@ -37,7 +37,7 @@
 </script>
 
 <Template let:args>
-  <Logo {...args} />
+  <LogoUrban {...args} />
 </Template>
 
 <Story name="Default" />
diff --git a/src/lib/LogoUrbanAnimated/LogoUrbanAnimated.docs.md b/src/lib/LogoUrbanAnimated/LogoUrbanAnimated.docs.md
new file mode 100644
index 0000000..6d4450d
--- /dev/null
+++ b/src/lib/LogoUrbanAnimated/LogoUrbanAnimated.docs.md
@@ -0,0 +1,5 @@
+An animated Urban Institute logo icon.
+
+```js
+import { LogoUrbanAnimated } from "@urbaninstitute/dataviz-components";
+```
diff --git a/src/lib/LogoUrbanAnimated/LogoUrbanAnimated.stories.svelte b/src/lib/LogoUrbanAnimated/LogoUrbanAnimated.stories.svelte
index b68e385..6ee74fe 100644
--- a/src/lib/LogoUrbanAnimated/LogoUrbanAnimated.stories.svelte
+++ b/src/lib/LogoUrbanAnimated/LogoUrbanAnimated.stories.svelte
@@ -1,15 +1,15 @@
 <script context="module">
   import LogoUrbanAnimated from "./LogoUrbanAnimated.svelte";
+  import docs from "./LogoUrbanAnimated.docs.md?raw";
 
   export const meta = {
     title: "Logos/LogoUrbanAnimated",
-    description: "An animated Urban logo icon",
     component: LogoUrbanAnimated,
     tags: ["autodocs"],
     parameters: {
       docs: {
         description: {
-          component: "An animated Urban Institute logo icon"
+          component: docs
         }
       },
       githubLink: {
diff --git a/src/lib/LogoUrbanBadge/LogoUrbanBadge.docs.md b/src/lib/LogoUrbanBadge/LogoUrbanBadge.docs.md
new file mode 100644
index 0000000..2e72606
--- /dev/null
+++ b/src/lib/LogoUrbanBadge/LogoUrbanBadge.docs.md
@@ -0,0 +1,5 @@
+Urban Institute logo in square badge format.
+
+```js
+import { LogoUrbanBadge } from "@urbaninstitute/dataviz-components";
+```
diff --git a/src/lib/LogoUrbanBadge/LogoUrbanBadge.stories.svelte b/src/lib/LogoUrbanBadge/LogoUrbanBadge.stories.svelte
index 2b2d94b..3130d31 100644
--- a/src/lib/LogoUrbanBadge/LogoUrbanBadge.stories.svelte
+++ b/src/lib/LogoUrbanBadge/LogoUrbanBadge.stories.svelte
@@ -1,15 +1,15 @@
 <script context="module">
-  import Logo from "./LogoUrbanBadge.svelte";
+  import LogoUrbanBadge from "./LogoUrbanBadge.svelte";
+  import docs from "./LogoUrbanBadge.docs.md?raw";
 
   export const meta = {
     title: "Logos/LogoUrbanBadge",
-    description: "An Urban Institute badge logo",
-    component: Logo,
+    component: LogoUrbanBadge,
     tags: ["autodocs"],
     parameters: {
       docs: {
         description: {
-          component: "Urban Institute logo in square badge format."
+          component: docs
         }
       },
       githubLink: {
@@ -24,7 +24,7 @@
 </script>
 
 <Template let:args>
-  <Logo {...args} />
+  <LogoUrbanBadge {...args} />
 </Template>
 
 <Story name="Default" />
diff --git a/src/lib/LogoUrbanWide/LogoUrbanWide.docs.md b/src/lib/LogoUrbanWide/LogoUrbanWide.docs.md
new file mode 100644
index 0000000..03feecb
--- /dev/null
+++ b/src/lib/LogoUrbanWide/LogoUrbanWide.docs.md
@@ -0,0 +1,5 @@
+Urban Institute logo in wide format.
+
+```js
+import { LogoUrbanWide } from "@urbaninstitute/dataviz-components";
+```
diff --git a/src/lib/LogoUrbanWide/LogoUrbanWide.stories.svelte b/src/lib/LogoUrbanWide/LogoUrbanWide.stories.svelte
index 45d56df..b362f80 100644
--- a/src/lib/LogoUrbanWide/LogoUrbanWide.stories.svelte
+++ b/src/lib/LogoUrbanWide/LogoUrbanWide.stories.svelte
@@ -1,10 +1,10 @@
 <script context="module">
-  import Logo from "./LogoUrbanWide.svelte";
+  import LogoUrbanWide from "./LogoUrbanWide.svelte";
+  import docs from "./LogoUrbanWide.docs.md?raw";
 
   export const meta = {
     title: "Logos/LogoUrbanWide",
-    description: "An Urban Institute wide logo",
-    component: Logo,
+    component: LogoUrbanWide,
     tags: ["autodocs"],
     argTypes: {
       variant: {
@@ -22,7 +22,7 @@
       },
       docs: {
         description: {
-          component: "Urban Institute logo in wide format."
+          component: docs
         }
       },
       githubLink: {
@@ -37,7 +37,7 @@
 </script>
 
 <Template let:args>
-  <Logo {...args} />
+  <LogoUrbanWide {...args} />
 </Template>
 
 <Story name="Default" />
diff --git a/src/lib/Meta/Meta.stories.svelte b/src/lib/Meta/Meta.stories.svelte
index e5a6ce6..dc8a34c 100644
--- a/src/lib/Meta/Meta.stories.svelte
+++ b/src/lib/Meta/Meta.stories.svelte
@@ -3,7 +3,6 @@
 
   export const meta = {
     title: "Components/Meta",
-    description: "A component to manage meta tags for the HTML document.",
     component: Meta,
     argTypes: {
       authors: {
@@ -18,12 +17,6 @@
       }
     },
     parameters: {
-      docs: {
-        description: {
-          component:
-            "This component uses Svelt's built-in `<svelte:head>` component to include important metadata for your HTML page."
-        }
-      },
       githubLink: {
         url: "/Meta/Meta.svelte"
       }
diff --git a/src/lib/Navbar/Navbar.docs.md b/src/lib/Navbar/Navbar.docs.md
new file mode 100644
index 0000000..a5d4cf5
--- /dev/null
+++ b/src/lib/Navbar/Navbar.docs.md
@@ -0,0 +1,5 @@
+Full width navigation bar for top of page. Includes `brand` and `sticky` properties for Urban/TPC logo and absolute position controls respectively.
+
+```js
+import { Navbar } from "@urbaninstitute/dataviz-components";
+```
diff --git a/src/lib/Navbar/Navbar.stories.svelte b/src/lib/Navbar/Navbar.stories.svelte
index 1b17633..482ea19 100644
--- a/src/lib/Navbar/Navbar.stories.svelte
+++ b/src/lib/Navbar/Navbar.stories.svelte
@@ -1,9 +1,9 @@
 <script context="module">
   import Navbar from "./Navbar.svelte";
+  import docs from "./Navbar.docs.md?raw";
 
   export const meta = {
     title: "Components/Navbar",
-    description: "A basic navbar",
     component: Navbar,
     tags: ["autodocs"],
     argTypes: {
@@ -16,8 +16,7 @@
     parameters: {
       docs: {
         description: {
-          component:
-            "Full width navigation bar for top of page. Includes <code>brand</code> and <code>sticky</code> properties for Urban/TPC logo and absolute position controls respectively."
+          component: docs
         }
       },
       githubLink: {
diff --git a/src/lib/ProjectCredits/ProjectCredits.docs.md b/src/lib/ProjectCredits/ProjectCredits.docs.md
new file mode 100644
index 0000000..7d715d5
--- /dev/null
+++ b/src/lib/ProjectCredits/ProjectCredits.docs.md
@@ -0,0 +1,5 @@
+A block for project credits.
+
+```js
+import { ProjectCredits } from "@urbaninstitute/dataviz-components";
+```
diff --git a/src/lib/ProjectCredits/ProjectCredits.stories.svelte b/src/lib/ProjectCredits/ProjectCredits.stories.svelte
index 7d0b1ae..6500d14 100644
--- a/src/lib/ProjectCredits/ProjectCredits.stories.svelte
+++ b/src/lib/ProjectCredits/ProjectCredits.stories.svelte
@@ -1,15 +1,15 @@
 <script context="module">
   import ProjectCredits from "./ProjectCredits.svelte";
+  import docs from "./ProjectCredits.docs.md?raw";
 
   export const meta = {
     title: "Components/ProjectCredits",
-    description: "A block for project credits",
     component: ProjectCredits,
     tags: ["autodocs"],
     parameters: {
       docs: {
         description: {
-          component: "A block for project credits."
+          component: docs
         }
       },
       githubLink: {
diff --git a/src/lib/Pym/PymChild.stories.svelte b/src/lib/Pym/PymChild.stories.svelte
index 58bce00..516df1c 100644
--- a/src/lib/Pym/PymChild.stories.svelte
+++ b/src/lib/Pym/PymChild.stories.svelte
@@ -3,14 +3,8 @@
 
   export const meta = {
     title: "Components/PymChild",
-    description: "A component that adds PymChild support to a page",
     component: PymChild,
     parameters: {
-      docs: {
-        description: {
-          component: "A basic headline component."
-        }
-      },
       githubLink: {
         url: "/Pym/PymChild.svelte"
       }
diff --git a/src/lib/ReturnTop/ReturnTop.docs.md b/src/lib/ReturnTop/ReturnTop.docs.md
new file mode 100644
index 0000000..836e87d
--- /dev/null
+++ b/src/lib/ReturnTop/ReturnTop.docs.md
@@ -0,0 +1,5 @@
+A button for moving the browser to a specified element ID.
+
+```js
+import { ReturnTop } from "@urbaninstitute/dataviz-components";
+```
diff --git a/src/lib/ReturnTop/ReturnTop.stories.svelte b/src/lib/ReturnTop/ReturnTop.stories.svelte
index f4204e1..b48038b 100644
--- a/src/lib/ReturnTop/ReturnTop.stories.svelte
+++ b/src/lib/ReturnTop/ReturnTop.stories.svelte
@@ -1,15 +1,15 @@
 <script context="module">
   import ReturnTop from "./ReturnTop.svelte";
+  import docs from "./ReturnTop.docs.md?raw";
 
   export const meta = {
     title: "Components/ReturnTop",
-    description: "A button for moving the browser to a specified element ID",
     component: ReturnTop,
     tags: ["autodocs"],
     parameters: {
       docs: {
         description: {
-          component: "A button for moving the browser to a specified element ID."
+          component: docs
         }
       },
       githubLink: {
diff --git a/src/lib/Scorecard/Scorecard.docs.md b/src/lib/Scorecard/Scorecard.docs.md
new file mode 100644
index 0000000..bd343cb
--- /dev/null
+++ b/src/lib/Scorecard/Scorecard.docs.md
@@ -0,0 +1,5 @@
+Scorecard element, which displays a value and a label, originally developed for [this project](https://www.urban.org/policy-centers/center-labor-human-services-and-population/projects/apprenticeship-support).
+
+```js
+import { Scorecard } from "@urbaninstitute/dataviz-components";
+```
diff --git a/src/lib/Scorecard/Scorecard.stories.svelte b/src/lib/Scorecard/Scorecard.stories.svelte
index ab5bf4a..467778b 100644
--- a/src/lib/Scorecard/Scorecard.stories.svelte
+++ b/src/lib/Scorecard/Scorecard.stories.svelte
@@ -1,16 +1,15 @@
 <script context="module">
   import Scorecard from "./Scorecard.svelte";
+  import docs from "./Scorecard.docs.md?raw";
 
   export const meta = {
     title: "Components/Scorecard",
-    description: "A scorecard that displays a value and a label",
     component: Scorecard,
     tags: ["autodocs"],
     parameters: {
       docs: {
         description: {
-          component:
-            "Scorecard element, which displays a value and a label, originally developed for <a href='https://www.urban.org/policy-centers/center-labor-human-services-and-population/projects/apprenticeship-support' target='_blank'>this project</a>."
+          component: docs
         }
       },
       githubLink: {
diff --git a/src/lib/Scrolly/Scrolly.docs.mdx b/src/lib/Scrolly/Scrolly.docs.mdx
index c4b5d10..cba464e 100644
--- a/src/lib/Scrolly/Scrolly.docs.mdx
+++ b/src/lib/Scrolly/Scrolly.docs.mdx
@@ -8,7 +8,7 @@ import { Meta, Controls, ArgTypes, Markdown, Story } from "@storybook/blocks"
 A component that can be used to create "scrolly" sections and pages. This component is a wrapper around the [svelte-scroller](https://github.com/sveltejs/svelte-scroller) library. If your project has needs that go beyond what this component can support, you should consider using `svelte-scroller` directly. But for many common scenarious, the options provided here should have you covered.
 
 Basic usage:
-```html
+```svelte
 <script>
   import { Scrolly } from "@urbaninstitute/dataviz-components";
 
@@ -61,7 +61,7 @@ console.log("The slideWidth is", $slideWidth);
 
 By default, the foreground expects a simple string in the `slides` array, and it renders the provided string (including any HTML formatting) within a `<p>` element inside a basic text box. This default behaviour will work for many scenarios, but you might need more flexibility beyond including simple inline HTML inside a `<p>`. If this is the case, you can override the default markup by making use of the `foreground` slot of this component. Additionally, you can pass more complex data structures through the `slides` prop and specify how these data should be rendered with a custom `foreground` slot. The contents of the corresponding item in the array will be passed to your foreground `slot` as a `slide` prop. You can use this data in your custom markup like so:
 
-```html
+```svelte
 <script>
   import { Scrolly } from "@urbaninstitute/dataviz-components";
 
diff --git a/src/lib/SectionBreak/SectionBreak.docs.md b/src/lib/SectionBreak/SectionBreak.docs.md
new file mode 100644
index 0000000..80b8612
--- /dev/null
+++ b/src/lib/SectionBreak/SectionBreak.docs.md
@@ -0,0 +1,5 @@
+Section break element that includes a number, a subhead and a horizontal rule.
+
+```js
+import { SectionBreak } from "@urbaninstitute/dataviz-components";
+```
diff --git a/src/lib/SectionBreak/SectionBreak.stories.svelte b/src/lib/SectionBreak/SectionBreak.stories.svelte
index 2553e34..4acac6f 100644
--- a/src/lib/SectionBreak/SectionBreak.stories.svelte
+++ b/src/lib/SectionBreak/SectionBreak.stories.svelte
@@ -1,16 +1,15 @@
 <script context="module">
   import SectionBreak from "./SectionBreak.svelte";
+  import docs from "./SectionBreak.docs.md?raw";
 
   export const meta = {
     title: "Components/SectionBreak",
-    description: "Section break element that includes a number, a subhead and a horizontal rule.",
     component: SectionBreak,
     tags: ["autodocs"],
     parameters: {
       docs: {
         description: {
-          component:
-            "Section break element that includes a number, a subhead and a horizontal rule."
+          component: docs
         }
       },
       githubLink: {
diff --git a/src/lib/SocialShare/SocialShare.docs.md b/src/lib/SocialShare/SocialShare.docs.md
new file mode 100644
index 0000000..944cb85
--- /dev/null
+++ b/src/lib/SocialShare/SocialShare.docs.md
@@ -0,0 +1,5 @@
+Social share icons, available in light or dark mode.
+
+```js
+import { SocialShare } from "@urbaninstitute/dataviz-components";
+```
diff --git a/src/lib/SocialShare/SocialShare.stories.svelte b/src/lib/SocialShare/SocialShare.stories.svelte
index 23bfd5f..25c141c 100644
--- a/src/lib/SocialShare/SocialShare.stories.svelte
+++ b/src/lib/SocialShare/SocialShare.stories.svelte
@@ -1,10 +1,10 @@
 <script context="module">
   import SocialShare from "./SocialShare.svelte";
+  import docs from "./SocialShare.docs.md?raw";
   import { fn, userEvent, within, expect } from "@storybook/test";
 
   export const meta = {
     title: "Components/SocialShare",
-    description: "Social media share buttons",
     component: SocialShare,
     tags: ["autodocs"],
     args: {
@@ -27,7 +27,7 @@
       },
       docs: {
         description: {
-          component: "Social share icons, available in light or dark mode."
+          component: docs
         }
       },
       githubLink: {
diff --git a/src/lib/TextBlock/TextBlock.docs.md b/src/lib/TextBlock/TextBlock.docs.md
new file mode 100644
index 0000000..791953d
--- /dev/null
+++ b/src/lib/TextBlock/TextBlock.docs.md
@@ -0,0 +1,5 @@
+A basic text block.
+
+```js
+import { TextBlock } from "@urbaninstitute/dataviz-components";
+```
diff --git a/src/lib/TextBlock/TextBlock.stories.svelte b/src/lib/TextBlock/TextBlock.stories.svelte
index be5b7d1..26c6762 100644
--- a/src/lib/TextBlock/TextBlock.stories.svelte
+++ b/src/lib/TextBlock/TextBlock.stories.svelte
@@ -1,9 +1,9 @@
 <script context="module">
   import TextBlock from "./TextBlock.svelte";
+  import docs from "./TextBlock.docs.md?raw";
 
   export const meta = {
     title: "Components/TextBlock",
-    description: "A basic text block",
     component: TextBlock,
     tags: ["autodocs"],
     argTypes: {
@@ -28,7 +28,7 @@
       },
       docs: {
         description: {
-          component: "A basic text block."
+          component: docs
         }
       },
       githubLink: {
diff --git a/src/lib/Theme/Theme.docs.mdx b/src/lib/Theme/Theme.docs.mdx
index ded5512..9105d93 100644
--- a/src/lib/Theme/Theme.docs.mdx
+++ b/src/lib/Theme/Theme.docs.mdx
@@ -15,7 +15,7 @@ In order to display correctly, these components will also need access to Urban's
 
 You get everything you need out of the box by importing and using these components like so:
 
-```html
+```svelte
 <script>
   import { Theme, FontsUrban, Button } from "@urbaninstitute/dataviz-components";
 </script>
diff --git a/src/lib/Theme/Theme.stories.svelte b/src/lib/Theme/Theme.stories.svelte
index 16372da..986a371 100644
--- a/src/lib/Theme/Theme.stories.svelte
+++ b/src/lib/Theme/Theme.stories.svelte
@@ -3,7 +3,6 @@
 
   export const meta = {
     title: "Theming/Theme",
-    description: "A theme wrapper that provides styles for children components.",
     component: Theme,
     // tags: ["autodocs"],
     argTypes: {
@@ -24,12 +23,6 @@
           { name: "dark", value: "#0A4C6A" }
         ]
       },
-      docs: {
-        description: {
-          component:
-            "A theme wrapper that provides styles for children components. All of the components in this library rely on CSS provided by this <Theme> component. If you are working on a project that depends on this library, you should probably wrap your entire page inside of a `<Theme></Theme>`. If you are pulling in just a component or two to a project that otherwise doesn't use this library, you'll want to wrap those components directly in a `<Theme>`.\n\n```html\n<Theme>\n  <ChildComponent />\n  <ChildComponent />\n</Theme>\n```"
-        }
-      },
       githubLink: {
         url: "/Theme/Theme.svelte"
       }
diff --git a/src/lib/Toggle/Toggle.docs.md b/src/lib/Toggle/Toggle.docs.md
new file mode 100644
index 0000000..7b892b1
--- /dev/null
+++ b/src/lib/Toggle/Toggle.docs.md
@@ -0,0 +1,5 @@
+A toggle component that uses a `<button>` element with ARIA role `"switch"`. See [ARIA docs](https://www.w3.org/WAI/ARIA/apg/patterns/switch/) for more information on the switch pattern.
+
+```js
+import { Toggle } from "@urbaninstitute/dataviz-components";
+```
diff --git a/src/lib/Toggle/Toggle.stories.svelte b/src/lib/Toggle/Toggle.stories.svelte
index 1c4c723..8d7b08a 100644
--- a/src/lib/Toggle/Toggle.stories.svelte
+++ b/src/lib/Toggle/Toggle.stories.svelte
@@ -1,10 +1,9 @@
 <script context="module">
   import Toggle from "./Toggle.svelte";
+  import docs from "./Toggle.docs.md?raw";
 
   export const meta = {
     title: "Components/Toggle",
-    description:
-      'A toggle component that uses a <button> element with ARIA role "switch". See <a href="https://www.w3.org/WAI/ARIA/apg/patterns/switch/">ARIA docs</a> for more information on the switch pattern.',
     component: Toggle,
     tags: ["autodocs"],
     argTypes: {
@@ -18,7 +17,7 @@
     parameters: {
       docs: {
         description: {
-          component: "Toggle component adhering to Urban styles."
+          component: docs
         }
       },
       githubLink: {
diff --git a/src/lib/maps/ColorLegend/ColorLegend.docs.md b/src/lib/maps/ColorLegend/ColorLegend.docs.md
new file mode 100644
index 0000000..35a9022
--- /dev/null
+++ b/src/lib/maps/ColorLegend/ColorLegend.docs.md
@@ -0,0 +1,5 @@
+This component generates a color legend based on a D3 scale.
+
+```js
+import { ColorLegend } from "@urbaninstitute/dataviz-components/maps";
+```
diff --git a/src/lib/maps/ColorLegend/ColorLegend.stories.svelte b/src/lib/maps/ColorLegend/ColorLegend.stories.svelte
index aace311..760df5a 100644
--- a/src/lib/maps/ColorLegend/ColorLegend.stories.svelte
+++ b/src/lib/maps/ColorLegend/ColorLegend.stories.svelte
@@ -1,6 +1,7 @@
 <script context="module">
   import ColorLegend from "./ColorLegend.svelte";
   import urbanColors from "$lib/utils/urbanColors.js";
+  import docs from "./ColorLegend.docs.md?raw";
 
   export const meta = {
     title: "Maps/ColorLegend",
@@ -37,7 +38,7 @@
     parameters: {
       docs: {
         description: {
-          component: "This component generates a color legend based on a D3 scale."
+          component: docs
         }
       },
       githubLink: {