@ carsxe/ 设计系统
汽车设计系统 - 阴影/ ui 以卡斯克为主的部件 安装此软件包使船舶的UI一致; 不运行 shadcn add 在你的应用程序.
安装
npm install @carsxe/design-system
pnpm add @carsxe/design-system
bun add @carsxe/design-system
同伴依赖性 : react 财务报告和审定财务报表 react-dom (v19) (中文(简体) ).
装入 CSS
在您的应用程序条目附近导入主题一次 .
如果您的应用程序已经编译了 Tailwind v4 :
import "@carsxe/design-system/globals.css"
// This stylesheet does not bundle the fonts — import them so your bundler
// resolves and fingerprints the woff2 files itself.
import "@fontsource-variable/manrope"
import "@fontsource-variable/dm-sans"
import "@fontsource/dm-mono/300.css"
import "@fontsource/dm-mono/400.css"
import "@fontsource/dm-mono/500.css"
否则导入自成一体的预建样式表( fonts) 包括:
import "@carsxe/design-system/styles.css"
字体有:曼罗佩(UI,正文,输入),DM Sans(标题)和DM Mono(代码).
如果你换种方式装上它们.. next/font例如——点 --font-sans, (中文(简体) ),
--font-body, (中文(简体) ), --font-heading,以及 --font-mono 在你的家人身边
输入上述包.
使用量
偏好每个组件导入路径 :
import { Button } from "@carsxe/design-system/components/button"
export function Example() {
return <Button>Get started</Button>
}
软件包根还可以工作:
import { Button, Card, Input } from "@carsxe/design-system"
构成部分
手风琴、警报、Angle滑板、Avatar、徽章、Bradecrumb、按钮、卡片、, 复选框、剪贴板、取色器、日期输入、对话框、下放菜单、可编辑, 浮动面板、格式、高亮、图像剪接器、输入、JSON树视图、标签、, Listbox, Marquee, Mega 菜单,导航菜单, 数字输入, Pagenation, 密码输入, 进步 QR代码 无线电组 评分组 选择 分隔器 签名 Pad, 滑石、滑石、松纳、步子、相换、切换、表、目录、标签、, 标记输入,文本区域,计时器,旅游,树景,工具提示.
各处均可自 @carsxe/design-system/components/<name>. 警报和徽章
添加 success 财务报告和审定财务报表 warning 在通常的阴影集上方的变体. Input 已经
没有 size 变式——使用 className (例如:. h-8用于紧凑高地.
先进组成部分是Carsxe自有的实施工作,并不取决于
方舟UI或扎克. 交互过渡使用运动和尊重减动
偏好。 通过下列方式支持受控制和不受控制的状态:
value编号 :defaultValue 财务报告和审定财务报表 onValueChange,或 open编号 :defaultOpen 财务报告和审定财务报表
onOpenChange 在适用的情况下.
旅游
const tour = useTour({
steps: [
{ id: "welcome", type: "dialog", title: "Welcome" },
{ id: "search", target: "#search", title: "Search by VIN" },
],
})
return (
<>
<button onClick={(event) => tour.start(undefined, event.currentTarget)}>
Start tour
</button>
<Tour tour={tour} />
</>
)
他们
语义符号活在 :root 财务报告和审定财务报表 .dark中的变量
而不是伪造组件.
| 脚本 | 光线 |
|---|---|
--primary | #065774 |
--primary-hover | #387990 |
--foreground | #3A3A3A |
--background | #F9F9F9 |
--success | #00A63E |
--destructive | #DA373E |
--warning | #F79008 |
--radius | 0 |
--radius 实值 0,所以角尖; 循环控制保持 rounded-full。 。 。 .
添加阴暗模式 dark 通常在祖先上课 <html>数字 :
<html class="dark">
准则
- 不运行
shadcn add在消费者应用软件中——从这个包件起的组件船. - 不要将组件源复制到您的应用程序中, 也不要包装原始内容 .
- 自定义
variant, (中文(简体) ),size, (中文(简体) ),className,以及本地元素道具.
许可证
麻省理工学院