fix(ui): update README.md for attributify and styles reset (#724)

Author: LemonNekoGH

packages/stage-ui/src/stores/providers.ts

@@ -17,6 +17,8 @@ import type {
   VoiceProviderWithExtraOptions,
 } from 'unspeech'
 
+import type { AliyunRealtimeSpeechExtraOptions } from './providers/aliyun/stream-transcription'
+
 import { isStageTamagotchi, isUrl } from '@proj-airi/stage-shared'
 import { computedAsync, useLocalStorage } from '@vueuse/core'
 import {
@@ -58,10 +60,9 @@ import {
 import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { createAliyunNLSProvider as createAliyunNlsStreamProvider } from './providers/aliyun/stream-transcription'
 import { models as elevenLabsModels } from './providers/elevenlabs/list-models'
 import { buildOpenAICompatibleProvider } from './providers/openai-compatible-builder'
-import type { AliyunRealtimeSpeechExtraOptions } from './providers/aliyun/stream-transcription'
-import { createAliyunNLSProvider as createAliyunNlsStreamProvider } from './providers/aliyun/stream-transcription'
 
 const ALIYUN_NLS_REGIONS = [
   'cn-shanghai',

packages/ui/README.md

@@ -1,10 +1,12 @@
 # @proj-airi/ui
 
-A stylized UI component library built with [Reka UI](https://reka-ui.com/).
+A stylized UI component library built with [Reka UI](https://reka-ui.com/) and [UnoCSS](https://unocss.dev/).
 
 To preview the components, refer to the [`stage-ui`](../stage-ui) package for instructions for running the Histoire UI storyboard.
 
-## Usage
+## Get started
+
+Install the library:
 
 ```shell
 ni @proj-airi/ui -D # from @antfu/ni, can be installed via `npm i -g @antfu/ni`
@@ -13,6 +15,33 @@ yarn i @proj-airi/ui -D
 npm i @proj-airi/ui -D
 ```
 
+This library requires `unocss` with Attributify Mode and a style reset.
+
+First, install `unocss` if you haven't already:
+
+```shell
+pnpm i -D unocss
+```
+
+Next, in your `uno.config.ts`, add `presetAttributify()` to your presets array:
+```ts
+import { defineConfig, presetAttributify } from 'unocss'
+
+export default defineConfig({
+  presets: [
+    presetAttributify(),
+    // ...your other presets
+  ],
+})
+```
+
+Finally, import the reset styles in your `main.ts`:
+```ts
+import '@unocss/reset/tailwind.css'
+```
+
+## Usage
+
 ```vue
 <script setup lang="ts">
 import { Button } from '@proj-airi/ui'