From d03c56db0aac1324aead17d070807f79bb3173a6 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Wed, 8 Jan 2020 07:11:58 -0800
Subject: [PATCH] docs(readme): add usage instructions

---
 .prettierignore |   1 +
 README.md       | 148 +++++++++---------------------------------------
 2 files changed, 29 insertions(+), 120 deletions(-)
 create mode 100644 .prettierignore

diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 00000000..42061c01
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1 @@
+README.md
\ No newline at end of file
diff --git a/README.md b/README.md
index 5292d0b1..8732d842 100644
--- a/README.md
+++ b/README.md
@@ -1,131 +1,34 @@
 # carbon-components-svelte
 
-> 🚧 UNDER CONSTRUCTION
+[![NPM][npm]][npm-url]
+[![Build][build]][build-badge]
 
-> Svelte implementation of the Carbon Design System
+> Svelte implementation of the [Carbon Design System](https://github.com/carbon-design-system)
 
-Currently, this project is under active development. See the [ongoing project](https://github.com/IBM/carbon-components-svelte/projects/1) for the anticipated v1.0.0 release.
+**NOTE**: Currently, this project is under active development. See the [issue tracker](https://github.com/IBM/carbon-components-svelte/projects/1) for the anticipated v1.0.0 release.
 
-## [Storybook](https://ibm.github.io/carbon-components-svelte)
+## [Storybook](https://ibm.github.io/carbon-components-svelte) · [Svelte REPL](https://svelte.dev/repl/201b02d3a92440f99de9129e83a67871?version=3.16.7)
 
-## Supported Components
+## Getting Started
 
-Currently, the following components are supported:
+`carbon-components-svelte` can be installed as a development dependency.
 
-- Accordion
-- AccordionItem
-  - AccordionSkeleton
-- Breadcrumb
-- BreadcrumbItem
-  - BreadcrumbSkeleton
-- Button
-  - ButtonSkeleton
-- Checkbox
-  - CheckboxSkeleton
-- CodeSnippet
-  - CodeSnippetSkeleton
-- ComboBox
-- ComposedModal
-  - ModalHeader
-  - ModalBody
-  - ModalFooter
-- ContentSwitcher
-  - Switch
-- Copy
-- CopyButton
-- DataTable
-- DataTableSkeleton
-- DatePicker
-  - DatePickerInput
-- FileUploader
-  - FileUploaderButton
-  - FileUploaderItem
-  - FileUploaderDropContainer
-  - Filename
-- Form
-- FormGroup
-- FormItem
-- FormLabel
-- Icon
-  - IconSkeleton
-- InlineLoading
-- Link
-- ListBox
-  - ListBoxField
-  - ListBoxMenu
-  - ListBoxMenuIcon
-  - ListBoxMenuItem
-  - ListBoxSelection
-- ListItem
-- Loading
-- MultiSelect
-- Modal
-- Notification
-  - ToastNotification
-  - InlineNotification
-  - NotificationActionButton
-  - NotificationButton
-  - NotificationIcon
-  - NotificationTextDetails
-- NumberInput
-  - NumberInputSkeleton
-- OrderedList
-- OverflowMenu
-  - OverflowMenuItem
-- Pagination
-  - PaginationSkeleton
-- ProgressIndicator
-  - ProgressIndicatorSkeleton
-  - ProgressStep
-- RadioButton
-  - RadioButtonSkeleton
-- RadioButtonGroup
-- Search
-  - SearchSkeleton
-- Select
-  - SelectSkeleton
-  - SelectItem
-  - SelectItemGroup
-- SkeletonPlaceholder
-- SkeletonText
-- Slider
-  - SliderSkeleton
-- StructuredList
-  - StructuredListSkeleton
-  - StructuredListBody
-  - StructuredListHead
-  - StructuredListCell
-  - StructuredListRow
-  - StructuredListInput
-- Tabs
-  - Tab
-  - TabContent
-  - TabsSkeleton
-- Tag
-  - TagSkeleton
-- TextArea
-  - TextAreaSkeleton
-- TextInput
-  - TextInputSkeleton
-  - PasswordInput
-- Tile
-  - ClickableTile
-  - SelectableTile
-  - ExpandableTile
-  - RadioTile
-  - Tile
-  - TileGroup
-    - RadioTile
-- TimePicker
-  - TimePickerSelect
-- Toggle
-  - ToggleSkeleton
-- ToggleSmall
-  - ToggleSmallSkeleton
-- Tooltip
-- TooltipDefinition
-- TooltipIcon
-- UnorderedList
+```bash
+yarn add -D carbon-components-svelte
+```
+
+## Usage
+
+```html
+<script>
+  import { Button } from 'carbon-components-svelte';
+</script>
+
+<Button>Primary</Button>
+<Button kind="secondary">Secondary</Button>
+```
+
+Try it in the [Svelte REPL](https://svelte.dev/repl/201b02d3a92440f99de9129e83a67871?version=3.16.7).
 
 ## Contributing
 
@@ -136,3 +39,8 @@ Refer to the [Contributing guidelines](CONTRIBUTING.md).
 ## License
 
 [Apache 2.0](LICENSE)
+
+[npm]: https://img.shields.io/npm/v/carbon-components-svelte.svg?color=blue
+[npm-url]: https://npmjs.com/package/carbon-components-svelte
+[build]: https://travis-ci.com/ibm/carbon-components-svelte.svg?branch=master
+[build-badge]: https://travis-ci.com/ibm/carbon-components-svelte