docs: update readme

Author: rijkvanzanten

license

@@ -5,8 +5,3 @@ Permission is hereby granted, free of charge, to any person obtaining a copy of
 The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
----
-
-This project also incorporates third-party software licensed under the MIT
-License. See `ATTRIBUTIONS.md` for details.

readme.md

@@ -1,3 +1,39 @@
 # Vue Split Panel
 
 Splitter component based on the usage syntax of Reka UI but using the internal rendering logic of Web Awesome's Split Panel.
+
+## Installation
+
+```
+pnpm add @directus/vue-split-panel
+```
+
+```vue
+<script lang="ts" setup>
+import { SplitPanel } from '@directus/vue-split-panel';
+import '@directus/vue-split-panel/index.css';
+</script>
+
+<template>
+<SplitPanel>
+<template #start>
+Panel A
+</template>
+
+<template #start>
+Panel B
+</template>
+</SplitPanel>
+</template>
+```
+
+## Usage
+
+Please refer to [the documentation](https://directus.github.io/vue-split-panel/) for the full usage guide.
+
+## License
+
+MIT
+
+This project also incorporates third-party software licensed under the MIT
+License. See [`ATTRIBUTIONS.md`](https://github.com/directus/vue-split-panel/blob/main/attributions.md) for details.