@sckyzo / cosmos-react
Cosmos设计系统的React 19组件库：主题表，可访问组件， 使用Tailwind 4构建，并作为ESM， CJS和types发货。
中浏览完整目录 生活故事书.
安装
npm install @sckyzo/cosmos-react @sckyzo/cosmos-theme
npm install react react-dom # peers, react 19+
@sckyzo/cosmos-theme 包含CSS（标记、字体、主题和重音变量）。这个
组件在没有它的情况下呈现无样式。三个Cosmos包共享一个版本号：
安装相同的版本。
设置样式
组件是用顺风4实用程序类设计的，所以你的应用的顺风构建必须
生成它们。顺风不扫描 node_modules，所以你 必须 点 @source 在
安装包：如果没有它，就不会生成Cosmos类，并且每个组件都呈现无样式。
在你的主CSS文件中：
@import 'tailwindcss';
/* Required. The path is relative to this CSS file; adjust the depth to your layout. */
@source '../node_modules/@sckyzo/cosmos-react/dist/**/*.{js,cjs}';
@import '@sckyzo/cosmos-theme/tailwind';
@import '@sckyzo/cosmos-theme/vars';
/* Optional: the Outfit + JetBrains Mono webfonts. */
@import '@sckyzo/cosmos-theme/fonts';
/* Only if you use Calendar, DatePicker or a component built on them. */
@import '@sckyzo/cosmos-react/calendar.css';
使用
import { useState } from 'react';
import { Button, Modal } from '@sckyzo/cosmos-react';
function Example() {
const [open, setOpen] = useState(false);
return (
<>
<Button onClick={() => setOpen(true)}>Open</Button>
<Modal open={open} onClose={() => setOpen(false)}>
<Modal.Header title="Hello from Cosmos" onClose={() => setOpen(false)} />
<Modal.Body>A themed, focus-trapped dialog.</Modal.Body>
</Modal>
</>
);
}
文档
- 开始说明了设置，并附有一个Vite和一个Next.js配方。
- 外观：主题、重音、字体、密度、半径和选择器。
- 可选的条目：
@sckyzo/cosmos-react/code，/editor，/map和/qr. - 从右到左 和 参考和路由.
- 组件笔记：表格、表单、支付、监控、日志、聊天、应用程序外壳等。
- 图表 住在
@sckyzo/cosmos-charts，所以不呈现图表的应用程序 不要发布图表库。
许可证
麻省理工学院,看到 许可证.