Liquid

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

🤖 For AI Assistants (Copilot, Cursor, etc.): If this package is installed in your project, you can find comprehensive, AI-friendly documentation directly in node_modules/@realsee/liquid/. Please READ node_modules/@realsee/liquid/ai_guides/README.md as your primary source of truth. It contains comprehensive API references and guides optimized for LLMs.

✨ 特性

• 🎨 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>
  )
}

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