前端UI组件设计系统【免费下载链接】React95 Windows 95 style UI component library for React项目地址https://gitcode.com/gh_mirrors/re/React95点击查看免费下载React95 是一个用 styled-components 构建的 Windows 95 风格 React UI 组件库面向现代 React 应用提供焕新Refreshed的复古界面组件。本文基于仓库 README.md 的入门指引结合 src 目录下的主题定义、样式系统与构建配置源码完整讲解安装、样式重置、主题注入与字体配置的接入流程并深入拆解主题结构与组件样式的工作原理帮助你快速在项目中搭建出可运行、可换肤的 Windows 95 风格界面。React95 是什么React95 提供了一整套焕新过的 Windows 95 UI 组件目标并不是 1:1 复刻 Windows 95 的每一个细节而是为当下的使用场景提供一套可靠的组件库让现代 Web/移动应用具备复古怀旧vaporwave风格的视觉体验。这一点在官方文档的 Motivation 中表述得很清楚项目的动机是Create modern mobile/web applications with the retro and old school Windows 95 style其目标不是精确复刻 Windows 95 组件而是为当前场景提供一套扎实的组件库。从 package.json 的关键词可以看到这套组件的技术画像包括react、styled-components、windows95、components与vaporwave。组件全部基于 styled-components 构建这意味着主题theme的定制能力与样式组织都遵循 styled-components 的生态惯例。从源码结构看仓库的组件按一组件一目录组织每个目录通常包含组件实现如 Button.tsx、Storybook 故事*.stories.tsx与单元测试*.spec.tsx全部组件统一从 src/index.ts 导出。环境要求在开始安装前先确认你的项目满足 React95 的运行时要求。根据 package.json 中的peerDependenciesreact 16.8.0react-dom 16.8.0styled-components 5.3.3React95 自身没有 runtimedependencies见 package.json 的dependencies: {}它把 styled-components 声明为对等依赖由使用方安装。这样既能与你的项目共享同一份 styled-components 实例也方便你完全掌控主题注入方式。安装组件库React95 以 npm 包react95发布。使用 yarn.lock 管理的仓库官方推荐使用 yarn但 npm 同样支持。在你的项目目录中执行# yarn $ yarn add react95 styled-components # npm $ npm install react95 styled-components安装styled-components是必须的React95 的组件样式全部由它生成主题机制也依赖ThemeProvider注入。只安装react95而不安装 styled-components 会导致组件无法正常渲染。安装完成后包的主入口指向./dist/index.jsCommonJS同时提供./dist/index.mjsES Module与./dist/index.d.tsTypeScript 类型module与types字段均已在 package.json 中声明现代打包器与 TS 项目开箱即用。构建产物由 rollup.config.js 生成它同时产出dist下的 CJS/ESM 双格式包、dist/themes主题子包并把字体与图片资源复制到dist/fonts、dist/images。三步完成接入官方文档给出的接入流程非常精简应用样式重置styleReset→ 用 ThemeProvider 包裹应用并选择主题 → 可选配置原始 Windows 95 字体。下面结合示例逐步展开。第一步导入并应用 styleResetReact95 从主入口导出了全局样式重置styleReset见 src/index.ts它的实现是一段纯粹的全局 CSS 字符串见 src/common/styleReset.ts将所有 HTML 元素的margin、padding、border归零统一font: inherit与vertical-align: baseline去掉列表符号与a标签的下划线移除button的 outline 与移动端点击高亮并隐藏数字输入框的原生微调按钮。在 styled-components 中通过createGlobalStyle将它注入全局import { createGlobalStyle, ThemeProvider } from styled-components; import { MenuList, MenuListItem, Separator, styleReset } from react95; const GlobalStyles createGlobalStyle ${styleReset} ;styleReset是可插拔的字符串模板你也可以在其后追加自己的全局样式如字体font-face。第二步用 ThemeProvider 注入主题选择一款主题并传入 styled-components 的ThemeProvider// pick a theme of your choice import original from react95/dist/themes/original; const App () ( div GlobalStyles / ThemeProvider theme{original} MenuList MenuListItem Sing/MenuListItem MenuListItem Dance/MenuListItem Separator / MenuListItem disabled Sleep/MenuListItem /MenuList /ThemeProvider /div );注意主题的导入路径是react95/dist/themes/original构建脚本会把 src/common/themes/index.ts 单独打包到dist/themes目录见 rollup.config.js 的第二个构建目标因此每个主题都可以按名独立导入例如react95/dist/themes/ash、react95/dist/themes/candy。MenuList、MenuListItem、Separator只是组件库的一个示例组合实际使用中可以按需从react95主入口导入任意组件。第三步可选配置原始 Windows 95 字体React95 内置了微软经典 MS Sans Serif 字体的 WOFF2 版本普通与粗体两个字重源码资源位于 src/assets/fonts/src/ms-sans-serif 与 src/assets/fonts/src/ms-sans-serif-bold。构建时它们会被复制到dist/fonts见 rollup.config.js可以直接从包内导入// original Windows95 font (optionally) import ms_sans_serif from react95/dist/fonts/ms_sans_serif.woff2; import ms_sans_serif_bold from react95/dist/fonts/ms_sans_serif_bold.woff2; const GlobalStyles createGlobalStyle ${styleReset} font-face { font-family: ms_sans_serif; src: url(${ms_sans_serif}) format(woff2); font-weight: 400; font-style: normal } font-face { font-family: ms_sans_serif; src: url(${ms_sans_serif_bold}) format(woff2); font-weight: bold; font-style: normal } body, input, select, textarea { font-family: ms_sans_serif; } ;字体文件本身附带 license.txt 许可说明商用前请留意授权条款。字体为可选配置——不注入字体时组件仍会正常工作只是缺少原汁原味的像素风字型。主题系统不止一套配色README 示例使用original主题但 React95 内置了 60 套主题全部集中在 src/common/themes 目录并通过 src/common/themes/index.ts 统一导出。从命名即可看出风格跨度既有还原经典的original、windows1、millenium、powerShell也有配色激进的tooSexy、hotdogStand、ninjaTurtles、pamelaAnderson还有面向对比度需求的highContrast、monochrome、blackAndWhite以及暗色系modernDark、tokyoDark、solarizedDark等。主题的结构定义每套主题都实现了 src/common/themes/types.ts 中定义的Theme接口由 35 个颜色字段组成覆盖了组件渲染所需的所有语义色板。以original主题src/common/themes/original.ts为例几个关键字段的含义字段说明original 值name主题标识originalmaterial/materialText组件表面主色 / 主文字色#c6c6c6/#0a0a0aborderDarkest/borderDark/borderLight/borderLightest经典斜面边框的四阶明暗色#0a0a0a/#848584/#dfdfdf/#fefefedesktopBackground桌面窗口外的背景颜色#008080headerBackground/headerText窗口标题栏背景 / 标题文字#060084/#fefefecanvas/canvasText输入、内容区域底色 / 文字#ffffff/#0a0a0aprogress进度条颜色#060084tooltip提示气泡底色#fefbcccheckmark/checkmarkDisabled勾选标记颜色及其禁用态#0a0a0a/#848584flatDark/flatLight扁平风格组件的边框/表面色#9e9e9e/#d8d8d8hoverBackground/focusSecondary悬停背景 / 次要点缀色#060084/#fefe03这套色板设计有一个明显的特征把 Windows 95 经典像素级斜面拆解成了四阶边框色。组件通过 src/common/index.ts 中的createBorderStyles把button、buttonPressed、field、window等边框样式映射到这四个色阶上从而复刻出凸起、凹陷、内嵌等立体质感。例如button样式用左上亮色borderLightest/borderLight与右下暗色borderDark/borderDarkest营造凸起效果buttonPressed则完全反转见 src/common/index.ts这正是按下按钮视觉反馈的来源。可以说主题的边框四色直接决定了整个组件库的立体观感。自定义主题由于主题就是符合Theme接口的普通对象自定义主题非常直接复制一份 src/common/themes/types.ts 的字段清单填入自己的色值再传给ThemeProvider即可import { ThemeProvider } from styled-components; const myTheme { name: myTheme, material: #d0d0d0, materialText: #111111, borderLightest: #ffffff, borderLight: #e0e0e0, borderDark: #808080, borderDarkest: #000000, /* ...其余字段按 Theme 接口补齐 */ }; ThemeProvider theme{myTheme} YourApp / /ThemeProvider注意缺失字段会导致部分组件样式回退为空值因此自定义主题时建议补全全部字段。组件清单与配套能力所有组件从 src/index.ts 统一导出包括基础控件Anchor、Button、Checkbox、Radio、TextInput、NumberInput、Select另附原生实现 SelectNative.tsx、Slider、ColorInput、DatePicker、Counter布局与容器AppBar、Frame、GroupBox、Toolbar、Separator、ScrollView、Tooltip复杂组件MenuList / MenuListItem、Table 系列、Tabs 系列、TreeView、Window 系列含 WindowContent、WindowHeader装饰与反馈Avatar、Hourglass经典沙漏光标、Monitor、ProgressBar、Handle兼容层legacy 目录保留了Bar、Cutout、Desktop、Fieldset、List、TextField等旧版组件供存量项目迁移过渡每个组件都配有 Storybook 故事*.stories.tsx与基于 jest testing-library 的单元测试*.spec.tsx配置见 jest.config.js 与 test/setup-test.ts组件行为与键盘交互都有测试兜底例如Select的键盘导航状态机集中在 src/Select/useSelectState.ts公共 hook 如useForkRef、useId、useEventCallback、useControlledOrUncontrolled位于 src/common/hooks并有对应 spec 文件验证。此外主入口还导出了createScrollbarssrc/index.ts它利用::-webkit-scrollbar伪元素生成带方向箭头的经典滚动条实现在 src/common/index.ts可通过createGlobalStyle全局引入const GlobalStyles createGlobalStyle ${styleReset} ${createScrollbars()} ;createScrollbars支持default凸起立体滚动条与flat扁平风格两种变体。常见问题与工程细节为什么必须装 styled-componentsReact95 的所有组件样式与主题注入都建立在 styled-components 之上见 src/common/system.ts、src/common/index.ts它同时被声明为 peerDependencypackage.json因此必须随项目一并安装。主题从哪个路径导入官方统一约定react95/dist/themes/themeName这是由 rollup.config.js 的独立主题构建目标决定的。字体从哪个路径导入约定为react95/dist/fonts/ms_sans_serif.woff2与react95/dist/fonts/ms_sans_serif_bold.woff2构建时从 src/assets/fonts 复制到 dist。TypeScript 支持包自带dist/index.d.ts类型声明见 package.json 的types字段并额外导出 src/types.ts 供类型复用仓库内也有 types 目录存放全局声明与主题声明。如何本地开发/验证仓库提供 Storybookyarn start在 9009 端口启动见 package.json 的 scripts测试与类型检查分别通过yarn testjest ./src与yarn typescripttsc --noEmit执行。参与贡献仓库欢迎通过 Pull Request、Issue 和组件提案参与贡献。官方文档特别强调任何来自 UI/UX 设计师的帮助都极其受欢迎——项目面临的挑战是设计出 95 年不存在、但现代 UI 中广泛使用的组件/布局方案。此外如果你用 React95 构建了自己的应用可以在官方网站上提交展示你的项目详见 README.md 的 Submit your project 章节。贡献流程相关的细节可参考仓库根目录的 LICENSEMIT 协议与文档目录 docs。赞分享前端UI组件设计系统【免费下载链接】React95 Windows 95 style UI component library for React项目地址https://gitcode.com/gh_mirrors/re/React95点击查看免费下载相关推荐styled-components在React-Boilerplate中的应用CSS-in-JS实战指南styled components在React Boilerplate中的应用CSS in JS实战指南 styled components是React生态中前端示例工程开发工具Element-React 快速上手指南打造现代化React应用界面Element React 快速上手指南打造现代化React应用界面 想要为你的React项目注入专业级的UI体验吗Element React正是你需要的解Windows 11系统优化终极指南三分钟搞定臃肿系统Win11Debloat让你的电脑飞起来Windows 11系统优化终极指南三分钟搞定臃肿系统Win11Debloat让你的电脑飞起来 你的Windows 11电脑是不是越用越慢开机要等半天桌面应用CLI创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
React95 快速上手指南：用 styled-components 在 React 应用中还原 Windows 95 界面
前端UI组件设计系统【免费下载链接】React95 Windows 95 style UI component library for React项目地址https://gitcode.com/gh_mirrors/re/React95点击查看免费下载React95 是一个用 styled-components 构建的 Windows 95 风格 React UI 组件库面向现代 React 应用提供焕新Refreshed的复古界面组件。本文基于仓库 README.md 的入门指引结合 src 目录下的主题定义、样式系统与构建配置源码完整讲解安装、样式重置、主题注入与字体配置的接入流程并深入拆解主题结构与组件样式的工作原理帮助你快速在项目中搭建出可运行、可换肤的 Windows 95 风格界面。React95 是什么React95 提供了一整套焕新过的 Windows 95 UI 组件目标并不是 1:1 复刻 Windows 95 的每一个细节而是为当下的使用场景提供一套可靠的组件库让现代 Web/移动应用具备复古怀旧vaporwave风格的视觉体验。这一点在官方文档的 Motivation 中表述得很清楚项目的动机是Create modern mobile/web applications with the retro and old school Windows 95 style其目标不是精确复刻 Windows 95 组件而是为当前场景提供一套扎实的组件库。从 package.json 的关键词可以看到这套组件的技术画像包括react、styled-components、windows95、components与vaporwave。组件全部基于 styled-components 构建这意味着主题theme的定制能力与样式组织都遵循 styled-components 的生态惯例。从源码结构看仓库的组件按一组件一目录组织每个目录通常包含组件实现如 Button.tsx、Storybook 故事*.stories.tsx与单元测试*.spec.tsx全部组件统一从 src/index.ts 导出。环境要求在开始安装前先确认你的项目满足 React95 的运行时要求。根据 package.json 中的peerDependenciesreact 16.8.0react-dom 16.8.0styled-components 5.3.3React95 自身没有 runtimedependencies见 package.json 的dependencies: {}它把 styled-components 声明为对等依赖由使用方安装。这样既能与你的项目共享同一份 styled-components 实例也方便你完全掌控主题注入方式。安装组件库React95 以 npm 包react95发布。使用 yarn.lock 管理的仓库官方推荐使用 yarn但 npm 同样支持。在你的项目目录中执行# yarn $ yarn add react95 styled-components # npm $ npm install react95 styled-components安装styled-components是必须的React95 的组件样式全部由它生成主题机制也依赖ThemeProvider注入。只安装react95而不安装 styled-components 会导致组件无法正常渲染。安装完成后包的主入口指向./dist/index.jsCommonJS同时提供./dist/index.mjsES Module与./dist/index.d.tsTypeScript 类型module与types字段均已在 package.json 中声明现代打包器与 TS 项目开箱即用。构建产物由 rollup.config.js 生成它同时产出dist下的 CJS/ESM 双格式包、dist/themes主题子包并把字体与图片资源复制到dist/fonts、dist/images。三步完成接入官方文档给出的接入流程非常精简应用样式重置styleReset→ 用 ThemeProvider 包裹应用并选择主题 → 可选配置原始 Windows 95 字体。下面结合示例逐步展开。第一步导入并应用 styleResetReact95 从主入口导出了全局样式重置styleReset见 src/index.ts它的实现是一段纯粹的全局 CSS 字符串见 src/common/styleReset.ts将所有 HTML 元素的margin、padding、border归零统一font: inherit与vertical-align: baseline去掉列表符号与a标签的下划线移除button的 outline 与移动端点击高亮并隐藏数字输入框的原生微调按钮。在 styled-components 中通过createGlobalStyle将它注入全局import { createGlobalStyle, ThemeProvider } from styled-components; import { MenuList, MenuListItem, Separator, styleReset } from react95; const GlobalStyles createGlobalStyle ${styleReset} ;styleReset是可插拔的字符串模板你也可以在其后追加自己的全局样式如字体font-face。第二步用 ThemeProvider 注入主题选择一款主题并传入 styled-components 的ThemeProvider// pick a theme of your choice import original from react95/dist/themes/original; const App () ( div GlobalStyles / ThemeProvider theme{original} MenuList MenuListItem Sing/MenuListItem MenuListItem Dance/MenuListItem Separator / MenuListItem disabled Sleep/MenuListItem /MenuList /ThemeProvider /div );注意主题的导入路径是react95/dist/themes/original构建脚本会把 src/common/themes/index.ts 单独打包到dist/themes目录见 rollup.config.js 的第二个构建目标因此每个主题都可以按名独立导入例如react95/dist/themes/ash、react95/dist/themes/candy。MenuList、MenuListItem、Separator只是组件库的一个示例组合实际使用中可以按需从react95主入口导入任意组件。第三步可选配置原始 Windows 95 字体React95 内置了微软经典 MS Sans Serif 字体的 WOFF2 版本普通与粗体两个字重源码资源位于 src/assets/fonts/src/ms-sans-serif 与 src/assets/fonts/src/ms-sans-serif-bold。构建时它们会被复制到dist/fonts见 rollup.config.js可以直接从包内导入// original Windows95 font (optionally) import ms_sans_serif from react95/dist/fonts/ms_sans_serif.woff2; import ms_sans_serif_bold from react95/dist/fonts/ms_sans_serif_bold.woff2; const GlobalStyles createGlobalStyle ${styleReset} font-face { font-family: ms_sans_serif; src: url(${ms_sans_serif}) format(woff2); font-weight: 400; font-style: normal } font-face { font-family: ms_sans_serif; src: url(${ms_sans_serif_bold}) format(woff2); font-weight: bold; font-style: normal } body, input, select, textarea { font-family: ms_sans_serif; } ;字体文件本身附带 license.txt 许可说明商用前请留意授权条款。字体为可选配置——不注入字体时组件仍会正常工作只是缺少原汁原味的像素风字型。主题系统不止一套配色README 示例使用original主题但 React95 内置了 60 套主题全部集中在 src/common/themes 目录并通过 src/common/themes/index.ts 统一导出。从命名即可看出风格跨度既有还原经典的original、windows1、millenium、powerShell也有配色激进的tooSexy、hotdogStand、ninjaTurtles、pamelaAnderson还有面向对比度需求的highContrast、monochrome、blackAndWhite以及暗色系modernDark、tokyoDark、solarizedDark等。主题的结构定义每套主题都实现了 src/common/themes/types.ts 中定义的Theme接口由 35 个颜色字段组成覆盖了组件渲染所需的所有语义色板。以original主题src/common/themes/original.ts为例几个关键字段的含义字段说明original 值name主题标识originalmaterial/materialText组件表面主色 / 主文字色#c6c6c6/#0a0a0aborderDarkest/borderDark/borderLight/borderLightest经典斜面边框的四阶明暗色#0a0a0a/#848584/#dfdfdf/#fefefedesktopBackground桌面窗口外的背景颜色#008080headerBackground/headerText窗口标题栏背景 / 标题文字#060084/#fefefecanvas/canvasText输入、内容区域底色 / 文字#ffffff/#0a0a0aprogress进度条颜色#060084tooltip提示气泡底色#fefbcccheckmark/checkmarkDisabled勾选标记颜色及其禁用态#0a0a0a/#848584flatDark/flatLight扁平风格组件的边框/表面色#9e9e9e/#d8d8d8hoverBackground/focusSecondary悬停背景 / 次要点缀色#060084/#fefe03这套色板设计有一个明显的特征把 Windows 95 经典像素级斜面拆解成了四阶边框色。组件通过 src/common/index.ts 中的createBorderStyles把button、buttonPressed、field、window等边框样式映射到这四个色阶上从而复刻出凸起、凹陷、内嵌等立体质感。例如button样式用左上亮色borderLightest/borderLight与右下暗色borderDark/borderDarkest营造凸起效果buttonPressed则完全反转见 src/common/index.ts这正是按下按钮视觉反馈的来源。可以说主题的边框四色直接决定了整个组件库的立体观感。自定义主题由于主题就是符合Theme接口的普通对象自定义主题非常直接复制一份 src/common/themes/types.ts 的字段清单填入自己的色值再传给ThemeProvider即可import { ThemeProvider } from styled-components; const myTheme { name: myTheme, material: #d0d0d0, materialText: #111111, borderLightest: #ffffff, borderLight: #e0e0e0, borderDark: #808080, borderDarkest: #000000, /* ...其余字段按 Theme 接口补齐 */ }; ThemeProvider theme{myTheme} YourApp / /ThemeProvider注意缺失字段会导致部分组件样式回退为空值因此自定义主题时建议补全全部字段。组件清单与配套能力所有组件从 src/index.ts 统一导出包括基础控件Anchor、Button、Checkbox、Radio、TextInput、NumberInput、Select另附原生实现 SelectNative.tsx、Slider、ColorInput、DatePicker、Counter布局与容器AppBar、Frame、GroupBox、Toolbar、Separator、ScrollView、Tooltip复杂组件MenuList / MenuListItem、Table 系列、Tabs 系列、TreeView、Window 系列含 WindowContent、WindowHeader装饰与反馈Avatar、Hourglass经典沙漏光标、Monitor、ProgressBar、Handle兼容层legacy 目录保留了Bar、Cutout、Desktop、Fieldset、List、TextField等旧版组件供存量项目迁移过渡每个组件都配有 Storybook 故事*.stories.tsx与基于 jest testing-library 的单元测试*.spec.tsx配置见 jest.config.js 与 test/setup-test.ts组件行为与键盘交互都有测试兜底例如Select的键盘导航状态机集中在 src/Select/useSelectState.ts公共 hook 如useForkRef、useId、useEventCallback、useControlledOrUncontrolled位于 src/common/hooks并有对应 spec 文件验证。此外主入口还导出了createScrollbarssrc/index.ts它利用::-webkit-scrollbar伪元素生成带方向箭头的经典滚动条实现在 src/common/index.ts可通过createGlobalStyle全局引入const GlobalStyles createGlobalStyle ${styleReset} ${createScrollbars()} ;createScrollbars支持default凸起立体滚动条与flat扁平风格两种变体。常见问题与工程细节为什么必须装 styled-componentsReact95 的所有组件样式与主题注入都建立在 styled-components 之上见 src/common/system.ts、src/common/index.ts它同时被声明为 peerDependencypackage.json因此必须随项目一并安装。主题从哪个路径导入官方统一约定react95/dist/themes/themeName这是由 rollup.config.js 的独立主题构建目标决定的。字体从哪个路径导入约定为react95/dist/fonts/ms_sans_serif.woff2与react95/dist/fonts/ms_sans_serif_bold.woff2构建时从 src/assets/fonts 复制到 dist。TypeScript 支持包自带dist/index.d.ts类型声明见 package.json 的types字段并额外导出 src/types.ts 供类型复用仓库内也有 types 目录存放全局声明与主题声明。如何本地开发/验证仓库提供 Storybookyarn start在 9009 端口启动见 package.json 的 scripts测试与类型检查分别通过yarn testjest ./src与yarn typescripttsc --noEmit执行。参与贡献仓库欢迎通过 Pull Request、Issue 和组件提案参与贡献。官方文档特别强调任何来自 UI/UX 设计师的帮助都极其受欢迎——项目面临的挑战是设计出 95 年不存在、但现代 UI 中广泛使用的组件/布局方案。此外如果你用 React95 构建了自己的应用可以在官方网站上提交展示你的项目详见 README.md 的 Submit your project 章节。贡献流程相关的细节可参考仓库根目录的 LICENSEMIT 协议与文档目录 docs。赞分享前端UI组件设计系统【免费下载链接】React95 Windows 95 style UI component library for React项目地址https://gitcode.com/gh_mirrors/re/React95点击查看免费下载相关推荐styled-components在React-Boilerplate中的应用CSS-in-JS实战指南styled components在React Boilerplate中的应用CSS in JS实战指南 styled components是React生态中前端示例工程开发工具Element-React 快速上手指南打造现代化React应用界面Element React 快速上手指南打造现代化React应用界面 想要为你的React项目注入专业级的UI体验吗Element React正是你需要的解Windows 11系统优化终极指南三分钟搞定臃肿系统Win11Debloat让你的电脑飞起来Windows 11系统优化终极指南三分钟搞定臃肿系统Win11Debloat让你的电脑飞起来 你的Windows 11电脑是不是越用越慢开机要等半天桌面应用CLI创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
