docs: adds how to use section to welcome (#352)

* docs: adds how to use section * chore: move index to welcome page --------- Co-authored-by: Quinton Jason <[email protected]>
Kajabi · Dec 16, 2024 · 2b77292 · 2b77292
1 parent 0c0c58b
commit 2b77292
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/libs/core/.storybook/preview.js b/libs/core/.storybook/preview.js
@@ -19,7 +19,7 @@ const preview = {
     options: {
       storySort: {
         method: 'alphabetical',
-        order: ['Foundations', 'Guides', 'Components', 'Resources'],
+        order: ['Welcome', 'Foundations', 'Guides', 'Components', 'Resources'],
         locales: 'en-US',
       },
     }

diff --git a/libs/core/src/stories/welcome.docs.mdx b/libs/core/src/stories/welcome.docs.mdx
@@ -19,3 +19,15 @@ We firmly believe in fostering an inclusive and collaborative environment where
 We continuously refine and expand our design system to meet evolving needs and expectations by encouraging open communication, feedback, and contributions from all stakeholders. This collaborative approach helps identify potential improvements and new ideas while promoting a shared sense of ownership and investment in the system's success.
 
 To facilitate this process, we provide [resources and guidelines](/docs/resources-contributing-to-the-design-system--page) for understanding, using, and contributing to the design system. By offering a clear path for participation, we aim to foster a thriving community of designers, developers, and users who work together to ensure the system remains relevant, effective, and resilient over time.
+
+## How to Use
+
+Using Pine's components involves two essential parts: the web components themselves and the design tokens for styling. The quickest way to start is by including the required files directly in your project using `<script>` and `<link>` tags.
+
+> **Note**: Replace `[VERSION]` with the desired version number.
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@pine-ds/core@[VERSION]/dist/pine-core/pine-core.css" />
+<script type="module" src="https://cdn.jsdelivr.net/npm/@pine-ds/core@[VERSION]/dist/pine-core/pine-core.esm.js"></script>
+<script nomodule src="https://cdn.jsdelivr.net/npm/@pine-ds/core@[VERSION]/dist/pine-core/index.esm.js"></script>
+```