Liquid

Liquid 是符合 如视 B 端交互设计风格 的 Web 样式解决方案，借助 React / Tailwindcss / Floating-ui 实现。

🤖 For AI Assistants (Copilot, Cursor, etc.): START HERE → Read llms.txt for a context-optimized documentation index with scenario-based lookup. For the full documentation map, see ai_guides/README.md.

If this package is installed locally, read node_modules/@realsee/liquid/llms.txt directly. If not installed, use a CDN mirror:

• https://cdn.jsdelivr.net/npm/@realsee/liquid@latest/llms.txt
• https://unpkg.com/@realsee/liquid@latest/llms.txt

✨ 特性

• 🎨 Tailwindcss 预设：开箱即用的如视 B 端设计风格配置。
• 🧩 React 组件库：高质量、可复用的交互式组件。
• 🖼️ 图标库：丰富的 SVG 图标集合。

📚 文档 (Documentation)

详细文档请参考 ai_guides 目录，该目录旨在帮助开发者和 AI 助手更好地理解和使用 Liquid。

• 文档首页 (Index)
• 安装指南 (Installation)
• 快速上手 (Quick Start)
• 组件列表 (Components)
• 图标列表 (Symbols)
• 文档编写规范 (Guidelines)

🚀 快速开始

安装

npm install @realsee/liquid tailwindcss tailwind-merge @tailwindcss/vite @tailwindcss/postcss postcss-load-config postcss-preset-env

基础用法

import { Button } from '@realsee/liquid/components'
import { TrashSymbol } from '@realsee/liquid/symbols'

export default function Home() {
  return (
    <div>
      <Button prefix={<TrashSymbol />}>Delete</Button>
    </div>
  )
}

更多配置详情请查看 安装指南。