diff --git a/README.md b/README.md
index afc4e9c47..51f3818c4 100644
--- a/README.md
+++ b/README.md
@@ -7,7 +7,13 @@ Seam React component library.
## Description
-Zero-backend beautiful drop-in pre-built components with everything you need to get started with Seam.
+Zero-backend beautiful drop-in pre-built components
+with everything you need to get started with [Seam].
+
+Play with them live in the [Storybook]!
+
+[Seam]: https://www.seam.co/
+[Storybook]: https://seam-react.vercel.app/
## Installation
@@ -19,6 +25,31 @@ $ npm install @seamapi/react
[npm]: https://www.npmjs.com/
+## Usage
+
+> Check out the [full example app](./examples/basic)!
+
+1. Obtain a publishable key from the [Seam Console].
+2. Wrap your app with the `SeamProvider`.
+3. Drop in Seam components.
+
+```ts
+import { SeamProvider, DeviceManager } from '@seamapi/react'
+
+export const App = () => {
+ return (
+
+
+ My App
+
+
+
+ )
+}
+```
+
+[Seam Console]: https://console.seam.co/
+
## Development and Testing
### Quickstart
@@ -28,7 +59,7 @@ $ git clone https://github.com/seamapi/react.git
$ cd react
$ nvm install
$ npm install
-$ npm run test:watch
+$ npm start
```
Primary development tasks are defined under `scripts` in `package.json`
@@ -53,6 +84,9 @@ $ git clone git@github.com:seamapi/react.git
### Requirements
You will need [Node.js] with [npm] and a [Node.js debugging] client.
+Alternately, develop in the cloud with [Codespaces].
+
+[codespaces]: https://github.com/features/codespaces
Be sure that all commands run under the correct Node version, e.g.,
if using [nvm], install the correct version with
@@ -78,6 +112,51 @@ $ npm install
[npm]: https://www.npmjs.com/
[nvm]: https://github.com/creationix/nvm
+### Storybook
+
+Develop components with [Storybook].
+
+Run Storybook in development mode with
+
+```
+$ npm start
+```
+
+The Storybook is deployed in docs mode.
+Develop the Storybook in docs mode with
+
+```
+$ npm run docs:start
+```
+
+[Storybook]: https://storybook.js.org/
+
+### Previews
+
+Every pull request deploys the Storybook with the examples
+in a [Vercel Preview Deployment]
+where you may [comment directly on the preview][Vercel Comments].
+
+[Vercel Preview Deployment]: https://vercel.com/docs/concepts/deployments/preview-deployments
+[Vercel Comments]: https://vercel.com/docs/concepts/deployments/comments
+
+### Tests
+
+Write tests with [Jest].
+
+[Jest]: https://jestjs.io/
+
+### Examples
+
+Find fully working examples apps under `examples/`.
+Each example app is built and deployed along with the Storybook documentation.
+
+Run and develop an example with, e.g.,
+
+```
+$ npm run example:basic
+```
+
### Publishing
#### Automatic
diff --git a/examples/basic/src/App.tsx b/examples/basic/src/App.tsx
index c757c9290..a43d885c9 100644
--- a/examples/basic/src/App.tsx
+++ b/examples/basic/src/App.tsx
@@ -4,11 +4,11 @@ import { DeviceManager, SeamProvider } from 'index.js'
export const App = (): ReactElement => {
return (
-
- Seam Components
-
+
+
+ Seam Components
-
-
+
+
)
}