diff --git a/README.md b/README.md
index 19fbf692..3d0d2733 100644
--- a/README.md
+++ b/README.md
@@ -28,9 +28,50 @@ npm run lint
You are welcome to add new features or components, but please open an issue to discuss your idea first.
-## TODO
+## Usage
-* [ ] Documentation
+```shell
+npm i svelte-toolbox
+```
+
+There is detailed documentation about each of the components [below](#documentation), but the basic usage looks like this:
+
+```html
+
+
+Click me!
+
+
+ There is a nice ripple effect on this text.
+
+```
+
+### Global Styles
+
+We recommend adding these lines to your global stylesheet. These will be the default styles for the components you import from `svelte-toolbox`.
+
+```css
+:root {
+ /* buttons */
+ --buttons: #303ba6;
+ --primary-buttons-text-color: white;
+ --buttons-hover-color: #303ca649;
+ --primary-buttons-hover-color: var(--buttons);
+ --buttons-ripple-color: #303ca69d;
+ --primary-buttons-ripple-color: rgba(255, 255, 255, 0.5);
+}
+.button-disabled {
+ opacity: 0.4;
+ cursor: not-allowed;
+}
+```
+
+### Documentation
+
+- [Ripple](https://github.com/svelte-toolbox/svelte-toolbox/tree/master/src/components/ripple/README.md)
+- [Button](https://github.com/svelte-toolbox/svelte-toolbox/tree/master/src/components/button/README.md)
## Inspiration
diff --git a/src/components/README.md b/src/components/README.md
deleted file mode 100644
index 6288df0b..00000000
--- a/src/components/README.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# Hold up!
-
-Before you continue, we recommend adding these lines to your global stylesheet:
-
-```css
-:root {
- /* buttons */
- --buttons: #303ba6;
- --primary-buttons-text-color: white;
- --buttons-hover-color: #303ca649;
- --primary-buttons-hover-color: var(--buttons);
- --buttons-ripple-color: #303ca69d;
- --primary-buttons-ripple-color: rgba(255, 255, 255, 0.5);
-}
-.button-disabled {
- opacity: 0.4;
- cursor: not-allowed;
-}
-```