From c2f5171de2a687d600d13c2b602a1a78d403a819 Mon Sep 17 00:00:00 2001
From: nemo shen <nemoshen94@gmail.com>
Date: Sun, 7 Jan 2024 22:03:02 +0800
Subject: [PATCH] chore: update readme

---
 README.md | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/README.md b/README.md
index d0d369b..8c3bcd1 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,29 @@
 
 NOI is a hight performance/light weight headless UI library.
 
+Your can easily use it to create your own UI library.
+
+For example, if you want to create a toast component and via a function to open it.
+Your just focus on your UI and logic, and then use NOI to implement the function:
+
+```ts
+<script setup lang="ts">
+import { useToast } from '@noi/core'
+
+const { open } = useToast()
+const openToast = () => {
+  open(h('div', { class: 'my-class-name' }, 'hello world'))
+}
+</script>
+```
+
+```html
+<template>
+  <button @click="open('hello world')">show toast</button>
+  <button @click="openToast">show toast with node</button>
+</template>
+```
+
 原名应该叫做: no ui (为什么叫noi而不是noui，是因为noi比较顺手)
 
 类似 vueuse