diff --git a/README.md b/README.md
index f2ca74c8..88da197e 100644
--- a/README.md
+++ b/README.md
@@ -18,13 +18,13 @@ In the beginning, Comet was built with a primary focus of USWDS. Today however,
## Overview
-`comet-uswds` - The base USWDS component library implemented in React with TypeScript.
+[comet-uswds](https://github.com/MetroStar/comet/tree/main/packages/comet-uswds) - The base USWDS component library implemented in React with TypeScript.
-`comet-data-viz` - A set of Victory Chart components provided as a Comet wrapper.
+[comet-data-viz](https://github.com/MetroStar/comet/tree/main/packages/comet-data-viz) - A set of Victory Chart components provided as a Comet wrapper.
-`comet-extras` - A set of custom components, intended to fill in the gaps where USWDS does not provide an implementation.
+[comet-extras](https://github.com/MetroStar/comet/tree/main/packages/comet-extras) - A set of custom components, intended to fill in the gaps where USWDS does not provide an implementation.
-`comet-cli` - A CLI for creating Comet Apps.
+[comet-cli](https://github.com/MetroStar/comet/tree/main/packages/comet-cli) - A CLI for creating Comet Apps.
## Getting Started
diff --git a/packages/comet-data-viz/README.md b/packages/comet-data-viz/README.md
index 1cbdbfa0..d912da27 100644
--- a/packages/comet-data-viz/README.md
+++ b/packages/comet-data-viz/README.md
@@ -17,4 +17,20 @@ yarn add @metrostar/comet-data-viz
```tsx
import { BarGraph } from '@metrostar/comet-data-viz';
+
+const chart = {
+ title: 'Bar graph',
+ width: 400,
+ height: 300,
+};
+
+const data = [
+ { x: 'Cat', y: 2 },
+ { x: 'Dog', y: 7 },
+ { x: 'Fish', y: 3 },
+ { x: 'Snake', y: 1 },
+ { x: 'Rabbit', y: 2 },
+];
+
+;
```
diff --git a/packages/comet-extras/README.md b/packages/comet-extras/README.md
index baf393af..a52c3e6e 100644
--- a/packages/comet-extras/README.md
+++ b/packages/comet-extras/README.md
@@ -17,4 +17,10 @@ yarn add @metrostar/comet-extras
```tsx
import Tabs, { TabPanel } from '@metrostar/comet-extras';
+
+
+
+ Content of Tab 1
+
+;
```
diff --git a/packages/comet-uswds/README.md b/packages/comet-uswds/README.md
index 6c10b179..1cb0e5d7 100644
--- a/packages/comet-uswds/README.md
+++ b/packages/comet-uswds/README.md
@@ -2,9 +2,15 @@
Comet is a React with TypeScript Component Library based on USWDS 3.0.
-## Getting Started
+In order to utilize Comet within your app, you must first ensure USWDS is pre-configured in your app. Please review the following for details specific to USWDS prior proceeding: [USWDS Documentation](https://designsystem.digital.gov/documentation/developers/).
-In order to utilize Comet within your app, you must first ensure USWDS is pre-configured in your app. Please review the following for details: [USWDS Documentation](https://designsystem.digital.gov/documentation/developers/).
+## Getting started with the Comet Starter App (recommended)
+
+1. Clone the comet starter repo here: [Comet Starter](https://github.com/MetroStar/comet-starter)
+
+2. Follow the steps for "Running the Project Locally"
+
+## Getting Started with a Custom App (pre-configured for USWDS)
1. Add Comet to your project:
@@ -19,4 +25,101 @@ yarn add @metrostar/comet-uswds
```tsx
import { Alert } from '@metrostar/comet-uswds';
+
+
+ This is the alert body
+;
+```
+
+## Getting Started with a Custom App (NOT pre-configured for USWDS)
+
+_Note: the below setup assumes your project is setup for Vite and SCSS._
+
+1. Add USWDS and Comet to your project:
+
+```sh
+# npm
+npm i --save @uswds/uswds @metrostar/comet-uswds
+
+# or yarn
+yarn add @uswds/uswds @metrostar/comet-uswds
+```
+
+2. Add uswds directory to your src folder
+3. Add base USWDS file (uswds.scss) to the uswds directory, with the following:
+
+```scss
+// Include a USWDS settings file (required)
+@forward './uswds-settings.scss';
+
+// Point to the USWDS source code (required)
+@forward '~uswds/packages/uswds';
+
+// Include your project's custom Sass (optional)
+// @forward "project-custom.scss";
+```
+
+4. Add base USWDS settings file (uswds-settings.scss) to the uswds directory, with the following:
+
+```scss
+@use 'uswds-core' with (
+ // General settings
+ $theme-show-notifications: false,
+ $theme-font-path: '~uswds/dist/fonts',
+ $theme-image-path: '~uswds/dist/img'
+);
+```
+
+5. Add uswds to the top of your your SASS entry point (styles.scss), with the following:
+
+```scss
+@forward 'uswds/uswds.scss';
+```
+
+6. Update your Vite config file (vite.config.ts) as needed with the following USWDS specific configurations:
+
+```ts
+import react from '@vitejs/plugin-react';
+import autoprefixer from 'autoprefixer';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { defineConfig } from 'vite';
+import EnvironmentPlugin from 'vite-plugin-environment';
+import eslint from 'vite-plugin-eslint';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [react(), tsconfigPaths(), eslint(), EnvironmentPlugin('all')],
+ resolve: {
+ alias: {
+ '~uswds': path.resolve(__dirname, 'node_modules/@uswds/uswds'),
+ },
+ },
+ css: {
+ preprocessorOptions: {
+ scss: {
+ includePaths: ['node_modules/@uswds/uswds/packages'],
+ },
+ },
+ postcss: {
+ plugins: [autoprefixer],
+ },
+ },
+});
+```
+
+7. Add your first Comet component:
+
+```tsx
+import { Alert } from '@metrostar/comet-uswds';
+
+
+ This is the alert body
+;
```
+
+For any further troubleshooting, please refer to the comet starter app linked above.