@proladon/shelter-ui

Shelter UI

基於 Vue 3 和 UnoCSS 的現代組件庫

特性

• 🚀 基於 Vue 3、TypeScript 和 Vite
• 🎨 使用 UnoCSS 實現原子化 CSS
• 📦 支持按需引入
• 📚 完善的文檔和示例

安裝

yarn add @proladon/shelter-ui

使用

完整引入

import { createApp } from 'vue'
import ShelterUI from '@proladon/shelter-ui'
import '@proladon/shelter-ui/dist/index.css'
import App from './App.vue'

const app = createApp(App)
app.use(ShelterUI)
app.mount('#app')

按需引入

<template>
  <SHButton type="primary">按鈕</SHButton>
  <SHInput v-model:value="input" placeholder="請輸入內容" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { SHButton, SHInput } from '@proladon/shelter-ui'
import '@proladon/shelter-ui/dist/index.css'

const input = ref('')
</script>

給 AI Agent / 消費端專案

若你的專案安裝了 @proladon/shelter-ui 並想讓 AI coding agent（如 Claude Code）了解怎麼正確使用這個庫，請參考：

• SKILL.md — 安裝方式、命名與 v-model 慣例、常見踩雷點（v-model 例外、size 屬性因元件而異等）
• components-catalog.json — 每個元件完整的 Props / Events / Slots / Methods，機器可讀

兩者都會隨 npm 套件一起發布（node_modules/@proladon/shelter-ui/）。

開發

# 安裝依賴
yarn install

# 啟動開發伺服器
yarn dev

# 構建組件庫
yarn lib:build

# 啟動文件開發伺服器
yarn docs:dev

# 構建文檔
yarn docs:build

文檔

查看 在線文檔 獲取更多信息。

許可證

MIT