@ alexandernygard/ 组件
我应用背后的回放组件:在Radix上63个shadcn/ui组件,以Tailwind 4和一个共享主题为风格. 故事书是工作本.
使用 Svelte 应用程序 @alexandernygard/components-svelte,其组件和主题相同。 双方从 @alexandernygard/tokens。 。 。 .
在应用程序中使用
pnpm add @alexandernygard/components
尾风4 (lommebok,内部设计师和任何新的Vite app). 在 Tailwind 后导入主题 。 它添加了符号和字体,并将 Tailwind 标注在软件包中,从而生成各类:
@import "tailwindcss";
@import "@alexandernygard/components/theme.css";
没有尾风,一次导入预编译样式表 :
import "@alexandernygard/components/styles.css"
然后说:
import { Button, Card, CardHeader, CardTitle, TooltipProvider, Toaster } from "@alexandernygard/components"
将应用程序包入 TooltipProvider 如果它使用工具提示,并渲染 <Toaster /> 如果用土司的话. toast() 所以不需要安装声纳器 暗模式为 dark 课开始 <html>。同伴依赖关系是: react 财务报告和审定财务报表 react-dom 第18.3条或第19条.
每个模块都是自己的文件,包被标记为副作用自由,因此一个应用只捆绑它所导入的东西. 图表(recharts),语法突出(shiki),旋转木马不使用.
外观
- 颜色. 雪
#f5f7f8花岗岩#18212b霜冻#dde3e8一个口音 云莓#f2a922。 Cloudberry 只标记或选中状态: 复选框、 开关、 收音机、 滑动器、 进度、 活动标签、 按下切换、 活动侧栏项和焦点环 . - 类型. 利布伦,来自
@alexandernygard/libron为了一切 纸牌、对话框、工作表、抽屉、空状态、字段传奇和调查问卷使用中的标题font-heading,所以一个应用程序可以给标题 不同的面孔通过压倒性--font-heading。 。 。 . - 形状. 角落随大小而增长:4px为复选框,8px为控件,12px为卡片,16px为对话框,全圆为徽章和开关. 影被分层并被用墨子颜色所取出.
- 状态.
positive, (中文(简体) ),warning, (中文(简体) ),info财务报告和审定财务报表destructive标志。 徽章和警示有相匹配的变体.
在应用程序中覆盖一个符号 :
:root {
--highlight: #3fa36b;
--ring: #2f8556;
}
里面有什么东西
密码 提醒 提醒 提醒 对话框 相位比 附件 相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相.
Bubble,Message,Message卷轴,Marker,附件,Trace,工具呼叫,代码块和问卷覆盖助手和聊天界面. ToolViewsProvider 设定每个工具的输入和输出如何显示,以及 ToolTrace 由@alexandernygard/ai-kit提供工具电话.
开发
这个软件包生活在pnpm工作空间. 运行这些从 packages/react,或从 repo 根 pnpm --filter @alexandernygard/components <script>。 。 。 .
pnpm install
pnpm dev # Storybook on http://localhost:6006
pnpm typecheck
pnpm build # dist/: ES modules, .d.ts, theme.css, styles.css, fonts.css
pnpm build-storybook # static Storybook in storybook-static/
- 组员住在
src/components/ui/他们是Shadcn的radix-nova有主题编辑的源, 所以shadcn add <name>工作时 别走--overwrite以更新已有的组件,或丢失编辑. - 添加组件后运行
node scripts/gen-index.mjs,然后在src/stories/components/。 。 。 . - 鼠标和字体
packages/tokens,与斯维尔特图书馆共享.src/styles/shadcn.css由shadcn包(海关变体,scroll-fade, (中文(简体) ),shimmer) (中文(简体) ). - 故事分为基础(托盘、类型、半径、高地)、组件和模式(应用程序外壳、设置页面、助理聊天).
发布
释放通过 Repo 根的 Changersets. 见 发布 在根读取.