@klein-design/klein-react

Klein Design

服务于SaaS行业的设计系统，专注更好的用户体验

🎯 介绍

从多年深耕SaaS行业实践中，我们抽象出了一套基础组件。在项目中覆盖了95%以上的页面，实现了1500+的前端页面无UI开发，前端交付质量也得到了大幅提升。同时在这些基础组件的设计上提供了细致的配置选项，以便开发者后续的拓展和定制。开发者可以根据具体需求进行灵活的配置，使组件库与开发者自身项目完美匹配，满足各种定制化的需求。

✨ 特性

• 🌈 涵盖了大多数saas业务需求，为开发者提供了丰富的选择。
• 📦 开箱即用的高质量 React 组件。
• 🛡 使用 TypeScript 开发，提供完整的类型定义文件。
• 🌍 国际化语言支持。
• 🎨 强大的主题定制能力。

🖥 兼容环境

• 现代浏览器。
• 支持服务端渲染。
• Electron

Edge	Firefox	Chrome	Safari	Electron
Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions

📦 安装

npm i @klein-design/klein-react --save

yarn add @klein-design/klein-react

🔨 示例

import { useState } from "react";
import { Button } from "@klein-design/klein-react";
import "@klein-design/klein-react/dist/@klein-design/klein-react.min.css";

function App() {
  const [count, setCount] = useState(0);

  return (
    <Button type="primary" onClick={() => setCount((count) => count + 1)}>
      count is {count}
    </Button>
  );
}

export default App;

🔗 链接

• 首页
• 所有组件
• 常见问题
• 设计资源

⌨️ 本地开发

开发指南

👥 社区互助

如果您在使用的过程中碰到问题，可以通过下面几个途径寻求帮助。

通过 GitHub Discussions 提问时，建议使用 Q&A 标签。

GitHub Discussions