stream：新粗野主义组件库

30 秒速读：本篇讲的是开源项目 stream/ui：一套 React 新粗野主义（neo-brutalism）组件库——2px 墨色硬边框、硬偏移阴影、荧光绿加品红的亮色，Button、Card、Dialog、Tabs、Slider、Progress、Audio Player 等 20 多个组件，加上 Hero、Pricing、FAQ 等页面区块，每个交互状态都有样式。结论先行：想做”一眼就很炸”的落地页或作品集，npm 装包和 shadcn registry 复制源码两条路都通；但它只有浅色主题、风格极其鲜明，做企业后台或品牌站之前先三思。

stream/ui 软件信息一览

版本选择：npm 装包还是 shadcn 复制源码

结论先行：全新项目直接 npm 装包，一行命令搞定；已经在用 shadcn/ui 的老项目，走 registry 复制源码，想怎么改就怎么改。两条路官方都维护，不存在”野路子”。

安装步骤（npm 路线，5 步上手）

1. 安装包：bun add @streamuilib/react（npm / yarn / pnpm 同理，据项目说明包已发布到 npm）。
2. 引入主题：按 packages/react/README 的说明引入主题 CSS，里面是全套 design tokens——纸面、墨色、亮色、硬阴影，一个都不能少，否则组件会”裸奔”。
3. 直接用组件：import { Button } from '@streamuilib/react'。全库两种画风二选一：Classic（硬边框加偏移阴影）和 Comic（手绘描边、网点、星爆、拟声词），20 多个组件从 Button、Badge、Card、Alert、Input、Select、Checkbox、Switch、Slider、Tabs、Accordion、Dialog、Tooltip、Progress，到 Battery、Skeleton、Avatar、Audio Player、Track List、Equalizer 全都有。
4. shadcn 路线：bunx shadcn@latest add https://streamui.org/r/flappy-hero.json 按件取；或注册一次命名空间 bunx shadcn@latest registry add "@streamui=https://streamui.org/r/{name}.json"，之后用短名 bunx shadcn@latest add @streamui/flappy-hero（npx 同理）。完整目录在 https://streamui.org/r/registry.json 可查。
5. 图标与动效：Lucide 全套图标可搜索，点图标直接复制 JSX；动画图标用 <AnimatedIcon> 包一层，绘制、旋转、弹跳、摆动、脉冲、抖动、弹出七种动效，纯 CSS 实现，hover、循环、单次三种触发。

拿到手先调的 4 处（体感差别最大）

1. 画风二选一（组件配置/主题）：Classic 和 Comic 全站只能选一种。体感差别：混用等于风格打架，页面会显得很”脏”；先定画风再铺页面。
2. 字体（主题配置）：官方搭配是 Archivo Black（标题）加 Space Grotesk（正文）加 Space Mono（标签/代码），registry 的 fonts 项一键引入。体感差别：标题字体一换，新粗野主义的味道至少少一半。
3. 阴影强度（shadow-brutal-sm / brutal / brutal-lg 三档）：体感差别：小组件用 sm、大卡片用 lg，全站统一档位页面才有层次；乱用档位是最常见的”违和感”来源。
4. 减少动态效果（系统级行为）：动画图标在系统”减少动态效果”开启时会自动关闭。体感差别：做无障碍合规的产品不用额外处理，但要知道有这个兜底，演示时别在开了该选项的机器上录屏。

注意事项与常见问题

• 只有浅色主题。据项目说明，主题目前只有 light only，深色模式需求强的项目要自己扩展 token，别指望官方短期内补。
• 和 shadcn/ui 冲突吗？不冲突。registry 方式复制的源码落在 streamui/ 目录（components/ui/streamui/、lib/streamui/），和你原有的 shadcn 组件并排存放，不会覆盖；theme 项加 token，fonts 项加字体，各管各的。
• 无障碍做得怎么样？官方测试套件用 Testing Library 加 happy-dom，覆盖了组件的角色、状态、键盘导航、表单提交，键盘支持和焦点状态是写进组件里的。正式用在生产前，建议对照 WCAG 把你实际用到的组件跑一遍，别全信默认。
• 文档站跑不起来？仓库的文档站要求 Bun 1.3 或更高版本；注意 bun dev 会先构建组件包再启动 Next.js，如果同时改包和站点，要另开一个终端跑 bun run ui:dev（watch 模式自动重构建）。
• 页面区块自适应：Hero、Features、Pricing、Testimonials、FAQ、Footer 这些区块用容器查询（container queries）做宽度适配，整页和窄栏都能放，往现有布局里塞区块时不用重写响应式。

适合谁：选型判断与替代方案

适合做营销落地页、个人作品集、黑客松 Demo、独立开发者产品页——风格本身就是卖点，开箱即有”设计感”，Hero、Pricing、FAQ 区块拼一拼就能上线。Lucide 图标加纯 CSS 动画图标也在同一套视觉体系里，交互表达很统一。

不适合三类项目：一是企业后台、金融、医疗这类需要克制的场景，风格太跳；二是有严格设计系统的品牌站，token 体系基本要重写；三是强依赖深色模式的产品（只有浅色主题）。替代思路：要中性风格直接用 shadcn/ui 原生；要更重的手绘感可以先试 Comic 画风，不够再找别的库。

深度补充（独家整理）：本文基于仓库真实信息（2 个 release、4 个 tag、MIT 许可、Next.js 16 + React 19 + Tailwind v4 技术栈）给出”npm 新项目 / registry 老项目 / 克隆仓库二次开发”三条路线取舍，并把源稿散落的画风、字体、阴影三处体感调参收拢成清单，源稿没有这层判断，可直接照着决策。

开源地址

前往 GitHub 查看 stream/ui

GitHub 国内访问较慢，如打不开可多刷新几次

版本对比与推荐

推荐结论：全新项目直接选 npm 装包；已经在用 shadcn/ui 的老项目选 registry 复制源码；克隆仓库只适合二次开发与贡献代码。三条路线官方都维护，没有野路子，区别只在你手头的项目处在哪个阶段。

补充设置与排错指南

补充设置：画风、动效与构建三处复核

第一，画风定死一种再铺页面：Classic 与 Comic 全站只能选一种，混用会让页面风格打架，写进主题配置后不要逐页改。第二，动画图标按场景选触发方式：hover、循环、单次三种触发各有适用处，演示页用单次、装饰位用循环，不要全站统一循环。第三，同时改包和文档站时另开终端跑 watch 模式自动重构建，避免改了包、站点却还是旧样子。

常见问题补充

第一，npm 与 registry 能否混用？同一项目建议只选一条路，两条路的组件来源不同，混用容易出现两套 token 打架。第二，深色模式怎么办？主题目前只有浅色，需要深色只能自己扩展 token，选型前先确认产品是否硬性要求深色。第三，旧项目能否渐进接入？可以，registry 方式复制的源码落在独立目录，与原有组件并排存放不覆盖，适合逐件替换。

报错排错

第一，组件显示为无样式的裸元素：先检查主题 CSS 是否按说明引入，设计 tokens 缺一个都会导致样式不全。第二，文档站跑不起来：先核对 Bun 版本是否达到 1.3，再确认是否先构建组件包再启动站点。第三，动画图标在演示时不动：检查系统是否开启了减少动态效果，该选项开启时动效会自动关闭，这是正常兜底而非故障。

推广

关注「软件教程管家」

回复软件名即取即下：网盘下载链接 + 提取码，一步直达，不用再跳转。

相关推荐

开源项目WallpaperMachine 免费下载开发node-rs 免费下载｜Rust 原生绑定包集合开发Roundhouse 免费下载｜Ruby 静态分析开发Flatcar Container Linux 免费下载开发Nature Skills 免费下载开发bddisasm 免费下载｜轻量级 C 指令解码库