@ fairmint/ ui (英语)
费尔明特共享设计系统和UI组件库.
文档
设计质量
读取 文件/设计质量 在创建或审查产品UI之前。 它记录了经批准的入职v5质量栏,共享间隔和等级规则,可重复使用的组件预期,以及创始人,投资人,入职,SAFE,赠款,和可封顶的工作的可视审查门.
快速启动
1. 安装
bun add @fairmint/ui
曼汀作为一个依赖性被包括在内——没有额外的软件包可以安装.
2. 导入样式(需要)
// In your app's entry file (main.tsx, App.tsx, etc.)
import '@fairmint/ui/styles.css';
这是必要的. 这一单项导入包括曼汀核心CSS,通知样式,和费尔明特组件动画. 没有它,组件就变无型。 您不需要安装或导入 @mantine/core/styles.css 单独——都包括在内.
3. 与提供者的包装
import { FairmintProvider } from '@fairmint/ui';
function App() {
return (
<FairmintProvider>
{/* Your app */}
</FairmintProvider>
);
}
4. 使用组件
import { PageHeader, FairmintLogo, LoadingSpinner } from '@fairmint/ui';
地方发展(实况编辑)
当在用户端库和消费者端应用一起工作时, 在不构建的情况下添加即时HMR的Vite插件:
// your-app/vite.config.ts
import { fairmintUiLocal } from '@fairmint/ui/vite';
export default defineConfig({
plugins: [fairmintUiLocal(), react()],
});
默认这没有任何作用——它使用 npm 发布的包. 要启用本地源解析 :
LOCAL_UI=1 bun run dev
插件检查 ../ui/src/index.ts 相对于你的应用。 如果找到,进口将用即时高温脉冲解决当地来源。 如果找不到, 它会发出警告, 回到 npm .
字体
添加到您的 index.html数字 :
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700&display=swap" rel="stylesheet" />
出口
| 导入 | 目录 |
|---|---|
@fairmint/ui | Fairmint 提供器,主题,组件,颜色常数 |
@fairmint/ui/styles.css | 曼汀核心 CSS + 库组件 CSS |
@fairmint/ui/mui-icons | MUI-compat 图标再导出(可抖树子路径) |
@fairmint/ui/vite | fairmintUiLocal() 本地 dev 的 Vite 插件 |
发展
cd design/ui
bun run dev # Storybook on port 6006
bun run build # Build library
bun run test # Run tests
bun run lint # Lint (Biome)
出版
自动推入 main 何时 ui/ 文件更改 。 如果当前版本已经发布, 则会自动添加补丁版本 .