36种免费React模板和主题「干货」

没人在乎你 發表於 2020-7-8 16:29:00

<h1 class="pgc-h-arrow-right">前言</h1>
<p>在Internet上搜索模板和主题时，很难找到免费的React资源。</p>
<p>即使您不在乎质量，它们似乎也很难被发现，并出于好奇而感动，我花了数小时在Google和Github上四处挖掘，结果得到了36个免费的React模板和主题的集合。我不会对此打赌，但是它们也是高质量的资源。</p>
<p>因此，在此列表中，您将找到各种各样的模板和主题，可以构建几乎可以想象的任何东西。例如：</p>
<ul>
<li>管理仪表盘</li>
<li>网站</li>
<li>登陆页面</li>
<li>在线投资组合</li>
<li>网志</li>
<li>设计系统</li>
</ul>
<p>我没有将资源分配到各个部分（例如网站模板）中，因为该列表中的所有内容都不属于特定类别（例如组件库，UI套件等），因此，建议您浏览整篇文章并将您的书签添加为书签最喜欢的。</p>
<p>最后一点：尽管我们不能将组件库和UI Kit视为模板和主题，但它们是启动新项目的绝佳起点，因此，我认为值得在本系列中提及其中的一些。</p>
<hr>
<h1 class="pgc-h-arrow-right">1. Open</h1>
<div class="pgc-img"><img src="http://p1-tt.byteimg.com/large/pgc-image/b24d635b8d49461ba48467e60df908d8?from=pc" alt="推荐36种免费React模板和主题「干货」">
<p class="pgc-img-caption"> </p>
</div>
<p>现场演示：https://open.cruip.com/</p>
<p>github：https://github.com/cruip/open-react-template</p>
<p>Open是免费的React模板，为希望为其开源项目，在线服务，数字产品等创建快速专业的登录页面的开发人员创建。为了捕获潜在客户和电子邮件订户，Open提供了一个由光滑，简约和可重复使用的组件和元素组成的多功能库。</p>
<p>特征：</p>
<ul>
<li>专为开源产品和在线服务而设计</li>
<li>深色简约设计</li>
<li>可通过Github完全下载</li>
</ul>
<hr>
<h1 class="pgc-h-arrow-right">2. Atomize</h1>
<div class="pgc-img"><img src="http://p3-tt.byteimg.com/large/pgc-image/c44d8c3cce954a90b15172f030597416?from=pc" alt="推荐36种免费React模板和主题「干货」">
<p class="pgc-img-caption"> </p>
</div>
<p>现场演示：https://atomizecode.com/</p>
<p>github: https://github.com/proksh/atomize</p>
<p>Atomize是一个React UI框架，旨在帮助开发人员与设计师合作并毫不费力地构建一致且和谐的用户界面。得益于样式指南和灵活的网格等资源的完美结合，Atomize适合创建任何类型的响应式网站。</p>
<p>特征：</p>
<ul>
<li>优雅漂亮的React组件</li>
<li>网站和响应式应用程序的设计系统</li>
<li>完全控制以创建响应式应用程序。</li>
</ul>
<hr>
<h1 class="pgc-h-arrow-right">3. Treact</h1>
<div class="pgc-img"><img src="http://p1-tt.byteimg.com/large/pgc-image/26846877ad9c4987bfdbf4e84b1ea879?from=pc" alt="推荐36种免费React模板和主题「干货」">
<p class="pgc-img-caption"> </p>
</div>
<p>现场演示 ： https://treact.owaiskhan.me/</p>
<p>地址: https://gumroad.com/l/QaruQ</p>
<p>Treact是一个免费和现代的React模板和UI组件的画廊，这些模板和UI组件使用TailwindCSS作为前端框架进行开发。这个精美的资源档案库提供了7个预建的主页，8个辅助页以及52个预设计的元素和部分。每个内容都可以完全自定义，并且可以针对台式机，平板电脑和移动设备进行扩展。</p>
<p>特征：</p>
<ul>
<li>丰富的模板和块库</li>
<li>一致的图像和插图</li>
<li>现代而多功能的外观</li>
</ul>
<hr>
<h1 class="pgc-h-arrow-right">4. MatX</h1>
<div class="pgc-img"><img src="http://p1-tt.byteimg.com/large/pgc-image/05a79b4aa7884f9d8cf75a5435617adb?from=pc" alt="推荐36种免费React模板和主题「干货」">
<p class="pgc-img-caption"> </p>
</div>
<p>现场演示 ：http://matx-react.ui-lib.com/dashboard/analytics</p>
<p>地址：https://ui-lib.com/downloads/matx-react-dashboard/</p>
<p>MatX是在Material Design之上构建的精美的React Native模板。这个Admin Dashboard模板是使用React，Redux和Material UI构建的，它包含了使Web应用程序焕然一新所需的所有基本功能。MatX的免费版本可用于轻松设置管理面板，用户管理系统和项目管理系统。</p>
<p>特征：</p>
<ul>
<li>材质UI组件和元素</li>
<li>仪表板和分析视图</li>
<li>美丽的调色板组合</li>
</ul>
<hr>
<h1 class="pgc-h-arrow-right">5. Holly</h1>
<div class="pgc-img"><img src="http://p3-tt.byteimg.com/large/pgc-image/5ac6c66cf3ef49e7b07cff40839b8e02?from=pc" alt="推荐36种免费React模板和主题「干货」">
<p class="pgc-img-caption"> </p>
</div>
<p>现场演示：https://lukemcdonald.github.io/holly-react/</p>
<p>github: https://github.com/lukemcdonald/holly-react</p>
<p>Holly是一个响应式React JS模板，适用于希望在主要产品仍处于开发阶段时开始累积电子邮件地址的在线服务和数字产品的生产者。这个紧凑的模板最初由Cruip用HTML设计，然后在React中为此版本进行编码。</p>
<p>特征：</p>
<ul>
<li>预先设计的形状和元素</li>
<li>超级容易设置和启动</li>
<li>适应各种产品需求的时尚外观</li>
</ul>
<hr>
<h1 class="pgc-h-arrow-right">6. OAH-Admin</h1>
<div class="pgc-img"><img src="http://p6-tt.byteimg.com/large/pgc-image/b22ea14ae07145aca18493f3168265ad?from=pc" alt="推荐36种免费React模板和主题「干货」">
<p class="pgc-img-caption"> </p>
</div>
<p>现场演示 ：https://oah-admin.ahmedelywa.com/extra-components/progress/</p>
<p>github ：https://github.com/AhmedElywa/oah-admin</p>
<p>OAH-Admin是一个免费的React admin仪表盘模板，基于Gatsby，带有oah-ui组件和元素包。这个React模板带有精心开发的UI配件的色调，并且超级整洁和灵活的布局使任何人都可以轻松创建任何一种基于SaaS的Web应用程序，管理面板，仪表板等。</p>
<p>特征：</p>
<ul>
<li>精美的深色布局</li>
<li>一些额外的组件和动作</li>
<li>可扩展且优雅的应用程序界面</li>
</ul>
<hr>
<h1 class="pgc-h-arrow-right">7. Gatsby Starter Ghost</h1>
<div class="pgc-img"><img src="http://p3-tt.byteimg.com/large/pgc-image/6b76a3dff71d4e6e82ee4200192980ed?from=pc" alt="推荐36种免费React模板和主题「干货」">
<p class="pgc-img-caption"> </p>
</div>
<p>现场演示：https://gatsby.ghost.org/</p>
<p>github ：https://github.com/TryGhost/gatsby-starter-ghost</p>
<p>使用Ghost在盖茨比（Gatsby）之上的此入门模板，可以轻松创建响应迅速的网站。Gatsby Starter Ghost是博客，杂志或任何新闻网站的简洁现代模板。该产品经过专门设计，可帮助任何人在Internet上创建个人空间并分享想法，想法和更新。</p>
<p>特征：</p>
<ul>
<li>全角英雄添加图像或视频</li>
<li>预先填充的内容</li>
<li>按作者或标签排序的帖子</li>
</ul>
<hr>
<h1 class="pgc-h-arrow-right">8. Star Admin</h1>
<div class="pgc-img"><img src="http://p3-tt.byteimg.com/large/pgc-image/43c10de26b13451f8883193f32345539?from=pc" alt="推荐36种免费React模板和主题「干货」">
<p class="pgc-img-caption"> </p>
</div>
<p>现场演示 ：https://www.bootstrapdash.com/demo/star-admin-free/react/template/demo_1/preview/dashboard</p>
<p>github：https://github.com/BootstrapDash/StarAdmin-Free-React-Admin-Template</p>
<p>一个免费的React Native模板，展示了无穷多种基本元素，可将任何想法变为现实。该模板的特点是精心制作的仪表板，其中包含整齐地排列和组织的段，可以与所有最新和现代的Web浏览器完美配合，并且能够使数据可视化过程更易于管理。</p>
<p>特征：</p>
<ul>
<li>跨浏览器兼容性</li>
<li>材料设计图标</li>
<li>简单而灵活的JavaScript图表</li>
</ul>
<hr>
<h1 class="pgc-h-arrow-right">9. Carolina Admin Dashboard</h1>
<div class="pgc-img"><img src="http://p1-tt.byteimg.com/large/pgc-image/7af8e210fd2b449292db4a8a64320822?from=pc" alt="推荐36种免费React模板和主题「干货」">
<p class="pgc-img-caption"> </p>
</div>
<p>现场演示：https://demo.uifort.com/carolina-react-admin-dashboard-material-ui-free-demo/LandingPage</p>
<p>地址：https://uifort.com/template/carolina-react-admin-dashboard-material-ui-free/</p>
<p>如果您正在寻找功能强大的React仪表板模板，Carolina Admin Dashboard提供了启动和运行Web项目所需的一切。这个漂亮的模板建立在Material-UI框架之上，并遵循Google所有的Material Design指南，提供了干净整洁的设计。最后但并非最不重要的一点是，核心结构是完全响应和开源的。</p>
<p>特征：</p>
<ul>
<li>23个主要页面和内部页面</li>
<li>包括实用程序和助手</li>
<li>完全可滚动的布局</li>
</ul>
<hr>
<h1 class="pgc-h-arrow-right">10. Tabler</h1>
<div class="pgc-img"><img src="http://p3-tt.byteimg.com/large/pgc-image/467f99e670f14f139c70094fd33ac10b?from=pc" alt="推荐36种免费React模板和主题「干货」">
<p class="pgc-img-caption"> </p>
</div>
<p>现场演示：http://tabler-react.com/</p>
<p>github：https://github.com/tabler/tabler-react</p>
<p>Tabler是一个免费的React admin仪表板模板，非常适合任何类型的后端Web应用程序。该管理模板包含了一系列精心设计的演示，它们无需从头开始即可为您节省大量时间，并且还附带可重复使用的组件，例如按钮，地图，图表，表单等。</p>
<p>特征：</p>
<ul>
<li>灵活的图表和数据元素</li>
<li>无限的后端可能性</li>
<li>预先构建的响应式小部件</li>
</ul>
<hr>
<h1 class="pgc-h-arrow-right">11. React Nice Resume</h1>
<div class="pgc-img"><img src="http://p3-tt.byteimg.com/large/pgc-image/234cdb7ea9f34eaa8ad35c5d2028af90?from=pc" alt="推荐36种免费React模板和主题「干货」">
<p class="pgc-img-caption"> </p>
</div>
<p>现场演示：https://nordicgiant2.github.io/react-nice-resume-page/#home</p>
<p>github ：https://github.com/nordicgiant2/react-nice-resume</p>
<p>如果您是一般的开发人员，设计师或数字创作者，React Nice Resume是一个不错的主题，可用来宣传自己和您的作品。该资源展示了一个独特的固定英雄部分，其中包含粒子背景，工作经验时间表，技能图，显示最新项目的缩略图以及具有功能输入表单的查询部分。</p>
<p>特征：</p>
<ul>
<li>粒子成分库</li>
<li>关于我和联系方式</li>
<li>顶部标题，可平滑滚动到各部分</li>
</ul>
<hr>
<h1 class="pgc-h-arrow-right">12. Boss Lite</h1>
<div class="pgc-img"><img src="http://p1-tt.byteimg.com/large/pgc-image/389a8ef887ef44a4b12240c5ca2cac64?from=pc" alt="推荐36种免费React模板和主题「干货」">
<p class="pgc-img-caption"> </p>
</div>
<p>现场演示 ：http://boss.ux-maestro.com/app/tables/data-table</p>
<p>github：https://github.com/ilhammeidi/boss-lite</p>
<p>Boss Lite是一个基于React和Redux的令人惊叹的管理仪表板模板。该模板为您带来具有高性能应用程序和多种配色方案的新颖现代设计。它的建立是为了使开发过程对于任何类型的基于Web的项目都可以访问，并且得益于现代化的工作流程和Flexbox的灵活布局，它可以顺畅进行。</p>
<p>特征：</p>
<ul>
<li>SSR的高性能</li>
<li>可重复使用的组件和模块</li>
<li>易于管理和维护</li>
</ul>
<hr>
<h1 class="pgc-h-arrow-right">13. Chakra UI</h1>
<div class="pgc-img"><img src="http://p6-tt.byteimg.com/large/pgc-image/4b7db9ff21624249880ddb70ade8c32f?from=pc" alt="推荐36种免费React模板和主题「干货」">
<p class="pgc-img-caption"> </p>
</div>
<p>现场演示：https://chakra-ui.com/</p>
<p>github：https://github.com/chakra-ui/chakra-ui/</p>
<p>Chakra UI提供了一组可访问和可重用的React功能组件，使创建可访问网站和用户界面非常舒适。Chakra UI中的几乎所有元素都兼容暗模式，它们遵循WAI-ARIA准则规范，并基于React UI Primitive构建，以实现无限的可组合性。</p>
<p>特征：</p>
<ul>
<li>数百名贡献者</li>
<li>完整格式脚本</li>
<li>通过道具轻松造型</li>
</ul>
<hr>
<h1 class="pgc-h-arrow-right">14. Black Dashboard React</h1>
<div class="pgc-img"><img src="http://p1-tt.byteimg.com/large/pgc-image/f3fc85a4ad93460fa3d1ff626b771fd8?from=pc" alt="推荐36种免费React模板和主题「干货」">
<p class="pgc-img-caption"> </p>
</div>
<p>现场演示：https://demos.creative-tim.com/black-dashboard-react/#/admin/dashboard</p>
<p>地址：https://www.creative-tim.com/product/black-dashboard-react</p>
<p>Black Dashboard React是用于管理界面的可用于生产的React应用程序模板。该模板基于Bootstrap创建的设计准则，是基于企业的应用程序和强大的后端软件的绝佳前端选项。它引入了更高级别的细分，设计套件和可重复使用的图表，以从头到尾改善用户和开发经验。</p>
<p>特征：</p>
<ul>
<li>精心编写的文档</li>
<li>移动设备支持</li>
<li>不同菜单的动态权限</li>
</ul>
<hr>
<h1 class="pgc-h-arrow-right">15. Argon Design System</h1>
<div class="pgc-img"><img src="http://p1-tt.byteimg.com/large/pgc-image/9dab52712a3d486fa731a8b74eec0f3f?from=pc" alt="推荐36种免费React模板和主题「干货」">
<p class="pgc-img-caption"> </p>
</div>
<p>现场演示 ：https://demos.creative-tim.com/argon-design-system-react/#/</p>
<p>github：https://github.com/creativetimofficial/argon-design-system-react</p>
<p>使用用于Bootstrap 4和Reactstrap的React设计系统开始下一个Web设计项目。Argon Design System带有100多个单独的组件，预构建的示例，每个元素都有样式，悬停，焦点的多个状态，任何人都可以轻松访问和使用。该产品是从原型开发到全功能代码的理想解决方案，因为所有内容均已实现。</p>
<p>特征：</p>
<ul>
<li>预先建立的页面变体</li>
<li>现代用户界面</li>
<li>轻松更改文本和图像</li>
</ul>
<hr>
<h1 class="pgc-h-arrow-right">16.Devias Kit - Admin Dashboard</h1>
<div class="pgc-img"><img src="http://p6-tt.byteimg.com/large/pgc-image/5ca7dbbcae6c45cd824ab7ebb3872fdc?from=pc" alt="推荐36种免费React模板和主题「干货」">
<p class="pgc-img-caption"> </p>
</div>
<p>现场演示 ：https://react-material-dashboard.devias.io/dashboard</p>
<p>github：https://github.com/devias-io/react-material-dashboard</p>
<p>Devias Kit是一个响应式材料设计管理仪表板，专门针对React使用Google自己的Material Design框架进行自定义设置，指令，图标和样式等。如果您想对设计进行快速更改，则此模板随附了清晰直观的目录和文件，快速入门文档，甚至包括Sketch文件。</p>
<p>特征：</p>
<ul>
<li>多个单页</li>
<li>样式指南和版式比例</li>
<li>完整的用户流</li>
</ul>
<hr>
<h1 class="pgc-h-arrow-right">17. Dev Blog</h1>
<div class="pgc-img"><img src="http://p3-tt.byteimg.com/large/pgc-image/e8ffe2083fa94f74bfbd557aed28509a?from=pc" alt="推荐36种免费React模板和主题「干货」">
<p class="pgc-img-caption"> </p>
</div>
<p>现场演示：https://ryanfitzgerald.github.io/devblog/</p>
<p>github：https://github.com/RyanFitzgerald/devblog</p>
<p>开发博客是一个React网站模板，专门为希望为其副项目和产品建立快速专业博客的开发人员而设计。该网站模板带有首页，该首页显示博客名称，社交媒体图标以及带有文本和图像的文章缩略图。该模板还包括单个帖子页面，并带有精美且精心设计的排版。</p>
<p>特征：</p>
<ul>
<li>专业和个人博客模板</li>
<li>修复静态图片</li>
<li>该博客是完全静态生成的</li>
</ul>
<hr>
<h1 class="pgc-h-arrow-right">18. Material Pro</h1>
<div class="pgc-img"><img src="http://p1-tt.byteimg.com/large/pgc-image/50fa4efe4e0948e5a1a4759cbbdaeaa8?from=pc" alt="推荐36种免费React模板和主题「干货」">
<p class="pgc-img-caption"> </p>
</div>
<p>现场演示 ：https://wrappixel.com/demos/free-admin-templates/materialpro-reactadmin-lite/main/#/starter/starter</p>
<p>地址：https://www.wrappixel.com/templates/materialpro-react-admin-lite/</p>
<p>Material Pro是一个免费的React Native模板，是为参加管理仪表板模板的任何人精心制作的。这款精美的产品采用模块化和现代设计理念开发，可以100％免费使用和下载，其中包含许多页面，可帮助您更快，更轻松地创建项目。</p>
<p>特征：</p>
<ul>
<li>准备使用的小部件</li>
<li>集成插件</li>
<li>深色边栏版本</li>
</ul>
<hr>
<h1 class="pgc-h-arrow-right">19. Ant Design Landing</h1>
<div class="pgc-img"><img src="http://p1-tt.byteimg.com/large/pgc-image/a5fcc603140243368c5542f9214a05bb?from=pc" alt="推荐36种免费React模板和主题「干货」">
<p class="pgc-img-caption"> </p>
</div>
<p>现场演示：https://landing.ant.design/index-cn</p>
<p>github：https://github.com/ant-design/ant-design-landing</p>
<p>着陆是由Ant Design System构建的模板。这个慷慨的程序包包括您可以为项目迅速配置和启动的首页和内页的各种模块，以及一个灵活且非常强大的在线编辑器，您可以使用它创建无限的专用页面，这些外观与网站的其余部分保持一致。</p>
<p>特征：</p>
<ul>
<li>包括草图文件</li>
<li>大量的模板</li>
<li>综合风格指南</li>
</ul>
<hr>
<h1 class="pgc-h-arrow-right">20. Isomorphic</h1>
<div class="pgc-img"><img src="http://p3-tt.byteimg.com/large/pgc-image/e657883fda3741cfb23959e8505f285f?from=pc" alt="推荐36种免费React模板和主题「干货」">
<p class="pgc-img-caption"> </p>
</div>
<p>现场演示：https://isomorphic.redq.io/signin</p>
<p>github：https://github.com/pujoey/ismorphic</p>
<p>Isomorphic是一个易于管理且引人入胜的管理模板，其中包含大量的灵活组件，每个组件都是悠扬的，并结合到基于Web的漂亮应用程序中。使用同构，您可以配置不同的导航位置，大小和调色板方案，以快速适应任何类型的现有管理项目。</p>
<p>特征：</p>
<ul>
<li>自定义表格和分页</li>
<li>可读的安装指南</li>
<li>不同的软件包目录</li>
</ul>
<hr>
<h1 class="pgc-h-arrow-right">21. Shards Dashboard Lite</h1>
<div class="pgc-img"><img src="http://p1-tt.byteimg.com/large/pgc-image/ca4ca0f32a1745b28e99f6321e46e6cb?from=pc" alt="推荐36种免费React模板和主题「干货」">
<p class="pgc-img-caption"> </p>
</div>
<p>现场演示：https://designrevision.com/demo/shards-dashboard-lite-react/blog-overview</p>
<p>地址：https://designrevision.com/downloads/shards-dashboard-lite-react/</p>
<p>Shards是一个免费的React仪表板模板，具有现代化的设计系统以及许多自定义页面和部分。该模板是在遵循现代开发最佳实践的基础上从头开始构建的，具有完全的响应能力，能够适应和重排到任何视口大小，并且支持多个第三方插件，例如React Table，React Date Picker等。</p>
<p>特征：</p>
<ul>
<li>1500+个支持的图标</li>
<li>轻巧且针对性能进行了优化</li>
<li>优秀的代码质量</li>
</ul>
<hr>
<h1 class="pgc-h-arrow-right">22. uiw</h1>
<div class="pgc-img"><img src="http://p6-tt.byteimg.com/large/pgc-image/25a7c50ba3d34a7ab74341af5305912f?from=pc" alt="推荐36种免费React模板和主题「干货」">
<p class="pgc-img-caption"> </p>
</div>
<p>现场演示：https://uiwjs.github.io/#/</p>
<p>github：https://github.com/uiwjs/uiw</p>
<p>uiw是适用于React 16+的高质量React组件库和UI工具包。这个宏伟的资源是根据最新的设计趋势和最佳实践而构建的，它配有各种预先构建和预先设计的组件，例如表单，按钮，分隔符，日期选择器，切换器，时间选择器，调色板，图标，还有很多。</p>
<p>特征：</p>
<ul>
<li>根据MIT许可证发布</li>
<li>编译后的组件代码</li>
<li>反应叠加触发</li>
</ul>
<hr>
<h1 class="pgc-h-arrow-right">23. React Material Admin</h1>
<div class="pgc-img"><img src="http://p3-tt.byteimg.com/large/pgc-image/dbf5fd3057034e45a1b3ad36c2782e69?from=pc" alt="推荐36种免费React模板和主题「干货」">
<p class="pgc-img-caption"> </p>
</div>
<p>现场演示 ：https://flatlogic.github.io/react-material-admin/#/login</p>
<p>地址：https://flatlogic.com/templates/react-material-admin</p>
<p>React Material Admin是基于Material-UI框架以及100％jQuery和Bootstrap免费构建的react仪表板。这个反应模板是为SaaS应用程序，电子商务平台，IoT仪表板或您可以想象的任何面向Web的产品构建前端解决方案的不可思议的起点。模板会不断更新，并带有新的宝石和特权。</p>
<p>特征：</p>
<ul>
<li>通过票务系统完全支持</li>
<li>包括基本仪表板</li>
<li>丰富的通知栏</li>
</ul>
<hr>
<h1 class="pgc-h-arrow-right">24. Material UI KIT</h1>
<div class="pgc-img"><img src="http://p1-tt.byteimg.com/large/pgc-image/6ae9de4ff75c4308806bd84d9befa505?from=pc" alt="推荐36种免费React模板和主题「干货」">
<p class="pgc-img-caption"> </p>
</div>
<p>现场演示 ：https://demos.creative-tim.com/material-kit-react/#/</p>
<p>地址：https://www.creative-tim.com/product/material-kit-react</p>
<p>Material UI KIT是一个免费的React UI主题，其灵感来自Google的材料设计，外观清新整洁。除了对Material-UI元素进行重新样式设置外，此强大的资源还包括三个完全编码的示例页面，例如登录页面（用于展示数字产品和应用程序），作品集页面（用于展示以前的作品）和登录页面（任何Web应用程序的入口门）。</p>
<p>特征：</p>
<ul>
<li>60多个预建元素</li>
<li>3示例页面</li>
<li>完全编码和记录</li>
</ul>
<hr>
<h1 class="pgc-h-arrow-right">25. Airframe</h1>
<div class="pgc-img"><img src="http://p1-tt.byteimg.com/large/pgc-image/076bd31f5d83425ea4bfac0317d81839?from=pc" alt="推荐36种免费React模板和主题「干货」">
<p class="pgc-img-caption"> </p>
</div>
<p>现场演示：http://dashboards.webkom.co/react/airframe/dashboards/projects/</p>
<p>github：https://github.com/0wczar/airframe-react</p>
<p>Airframe是基于Bootstrap 4和React 16的免费和开源React应用程序模板。凭借其简约的设计和创新的Light UI，此模板将使您能够通过出色的用户界面构建令人惊讶且引人注目的响应式应用程序。机体是专为大规模目的而发明的，可支持逐步记录。</p>
<p>特征：</p>
<ul>
<li>10多种布局变化</li>
<li>120多个独特的页面</li>
<li>完全自适应的响应式设计</li>
</ul>
<hr>
<h1 class="pgc-h-arrow-right">26. Gatsby Simplefolio</h1>
<div class="pgc-img"><img src="http://p1-tt.byteimg.com/large/pgc-image/0ccb691de27f45488ecfbc5ea6c4aaab?from=pc" alt="推荐36种免费React模板和主题「干货」">
<p class="pgc-img-caption"> </p>
</div>
<p>现场演示：https://gatsby-simplefolio.netlify.app/</p>
<p>github：https://github.com/cobidev/gatsby-simplefolio</p>
<p>Gatsby Simplefolio是面向开发人员，工程师和程序员的干净，美观，响应迅速的React产品组合模板。布局非常直观，模板随附的说明将为您提供项目副本，并在您的本地计算机上运行以进行开发和测试。如果要在实时系统上部署项目，也可以检查注释。</p>
<p>特征：</p>
<ul>
<li>现代揭示动画</li>
<li>用Bootstrap v4.3样式</li>
<li>使用Gatsby进行图像优化</li>
</ul>
<hr>
<h1 class="pgc-h-arrow-right">27. Ant Design Pro</h1>
<div class="pgc-img"><img src="http://p6-tt.byteimg.com/large/pgc-image/872f7127f6f54015a57f9516c2820310?from=pc" alt="推荐36种免费React模板和主题「干货」">
<p class="pgc-img-caption"> </p>
</div>
<p>现场演示：https://pro.ant.design/index-cn</p>
<p>github：https://github.com/ant-design/ant-design-pro/</p>
<p>您是否需要作为React样板的企业应用程序的现成UI解决方案？Ant Design Pro是一个精美的React Native主题，可为开发人员和初创公司提供各种现成的仪表板页面，身份验证，预构建表单和UI列表，以快速草绘和部署看起来不错且效果更好的应用程序布局。</p>
<p>特征：</p>
<ul>
<li>专为不同的屏幕尺寸而设计</li>
<li>可定制的主题，配置简单</li>
<li>使用最新的开发堆栈构建</li>
</ul>
<hr>
<h1 class="pgc-h-arrow-right">28. React SaaS Template</h1>
<div class="pgc-img"><img src="http://p6-tt.byteimg.com/large/pgc-image/7f615c3e4dc6434cb15f081da47c654e?from=pc" alt="推荐36种免费React模板和主题「干货」">
<p class="pgc-img-caption"> </p>
</div>
<p>现场演示 ：https://reactsaastemplate.com/</p>
<p>github：https://github.com/designrevision/shards-react</p>
<p>React SaaS是一个轻量级的，新颖的模板，为希望为其SaaS项目，在线服务和数字产品提供简单而直接的指向页面的初创公司开发。React SaaS模板包含一个主页部分，该部分补充了应用程序功能，一个博客部分以及一个用于注册新用户的模式注册表单。</p>
<p>特征：</p>
<ul>
<li>基于视口的动画</li>
<li>表情符号选择器</li>
<li>顶部加载栏</li>
</ul>
<hr>
<h1 class="pgc-h-arrow-right">29. Shards React</h1>
<div class="pgc-img"><img src="http://p1-tt.byteimg.com/large/pgc-image/cc896af79ce2415a8eaeedf1d1c34df1?from=pc" alt="推荐36种免费React模板和主题「干货」">
<p class="pgc-img-caption"> </p>
</div>
<p>现场演示：https://designrevision.com/downloads/shards-react/</p>
<p>github：https://github.com/designrevision/shards-react</p>
<p>Shards React是一个免费的React UI套件，具有现代设计风格和数十个自定义组件。这个大型库是为产品级应用程序和工具而构建的，它合并了全面且明智的指南，移动UI元素，现成的配色方案以及新一代的图形工作解决方案。</p>
<p>特征：</p>
<ul>
<li>高质量的产品原型</li>
<li>草图设计文件</li>
<li>强大的溢价图标集</li>
</ul>
<hr>
<h1 class="pgc-h-arrow-right">30. Light Blue React Dashboard</h1>
<div class="pgc-img"><img src="http://p1-tt.byteimg.com/large/pgc-image/c28a2ef4a88b4db29c7c30df1dd74eeb?from=pc" alt="推荐36种免费React模板和主题「干货」">
<p class="pgc-img-caption"> </p>
</div>
<p>现场演示：https://baseweb.design/</p>
<p>github：https://github.com/uber/baseweb</p>
<p>Base Web是一个React组件库，用于启动，发展和统一Web产品。这个庞大的产品提供了一组强大的组件，这些组件开箱即用，包括（例如）准备使用的功能元素，例如日期选择器和低级可组合基元。Base是一个由现代，响应式，生活部分组成的设计系统。</p>
<p>特征：</p>
<ul>
<li>极高的定制水平</li>
<li>样式和有组织的组件</li>
<li>内置辅助功能</li>
</ul>
<hr>
<h1 class="pgc-h-arrow-right">31. 浅蓝色React仪表板</h1>
<div class="pgc-img"><img src="http://p3-tt.byteimg.com/large/pgc-image/10a2531a0fb24c8283075af437078e3b?from=pc" alt="推荐36种免费React模板和主题「干货」">
<p class="pgc-img-caption"> </p>
</div>
<p>现场演示 ：https://demo.flatlogic.com/light-blue-react/#/app/main/dashboard</p>
<p>github：https://github.com/flatlogic/light-blue-react-template</p>
<p>浅蓝色React是一个免费的深色管理模板，建立在React和Bootstrap 4之上。就设计而言，该模板展示了几个与数据相关的元素和分析小部件，地理位置图，功能齐全的侧栏和标题包括多个号召性用语和一个搜索输入表单。此资源中也提供UI列表和功能齐全的图表。</p>
<p>特征：</p>
<ul>
<li>美丽的深色布局</li>
<li>传统和社交媒体登录</li>
<li>交互式地图，图表和小部件</li>
</ul>
<hr>
<h1 class="pgc-h-arrow-right">32. React JS Landing</h1>
<div class="pgc-img"><img src="http://p1-tt.byteimg.com/large/pgc-image/b394b0f23f1542cc91a1cdc0bf1f6db8?from=pc" alt="推荐36种免费React模板和主题「干货」">
<p class="pgc-img-caption"> </p>
</div>
<p>现场演示 ：https://react-landing-page-template.herokuapp.com/#page-top</p>
<p>github：https://github.com/IssaafKattan/React-Landing-Page-Template</p>
<p>React JS Landing是一个简单的React应用模板，适用于初创企业，数字代理商和与产品相关的品牌。这个一页模板通过视差滚动效果，显示产品功能或优点的缩略图库，几个现成的图标，一个符合团队的组件以及一个全角英雄来显示图像或视频，从而提供了不同的可滚动部分。</p>
<p>特征：</p>
<ul>
<li>迷人的视差滚动效果</li>
<li>引人注目的图像和图标</li>
<li>与文本字段取得联系</li>
</ul>
<hr>
<h1 class="pgc-h-arrow-right">33. Admin Pro</h1>
<div class="pgc-img"><img src="http://p1-tt.byteimg.com/large/pgc-image/2657fc329b314a88806c046a63628a33?from=pc" alt="推荐36种免费React模板和主题「干货」">
<p class="pgc-img-caption"> </p>
</div>
<p>现场演示：https://wrappixel.com/demos/free-admin-templates/adminpro-react-lite/main/#/dashboard</p>
<p>地址：https://www.wrappixel.com/templates/adminpro-react-admin-lite/#comparison</p>
<p>这个React Native主题基于有趣的技术手工制作而成，具有开发强大而复杂的Web应用程序，SaaS后端接口和软件所需的一切。模板中塞满了各种不同的必要组件，这些组件将使开发和定制过程再次变得出色。</p>
<p>特征：</p>
<ul>
<li>15个以上的页面和组件</li>
<li>终身免费更新</li>
<li>多个图表选项</li>
</ul>
<hr>
<h1 class="pgc-h-arrow-right">34. Blueprint</h1>
<div class="pgc-img"><img src="http://p6-tt.byteimg.com/large/pgc-image/4d9be2c83a4740f4b704ab8215597ec5?from=pc" alt="推荐36种免费React模板和主题「干货」">
<p class="pgc-img-caption"> </p>
</div>
<p>现场演示：https://blueprintjs.com/</p>
<p>github：https://github.com/palantir/blueprint</p>
<p>蓝图是Web的React UI主题和工具包。该主题已针对为可在多种浏览器（包括IE11）上运行的桌面应用程序制造复杂的，基于数据密集的Web界面进行了完全优化。与非常相似的资源相反，Blueprint不包含移动优先方法。</p>
<p>特征：</p>
<ul>
<li>可扩展的交互式表格内容</li>
<li>与日期和时间进行交互的元素</li>
<li>时区选择组件</li>
</ul>
<hr>
<h1 class="pgc-h-arrow-right">35. Datta</h1>
<div class="pgc-img"><img src="http://p6-tt.byteimg.com/large/pgc-image/66eded92a6c94107ad6fa4d9afb8d26b?from=pc" alt="推荐36种免费React模板和主题「干货」">
<p class="pgc-img-caption"> </p>
</div>
<p>现场演示：http://lite.codedthemes.com/datta-able/react/default/dashboard/default</p>
<p>地址：https://codedthemes.com/item/datta-able-react-free-admin-template/</p>
<p>Datta是市场上所有其他管理资源中最吸引人的React免费模板之一。它以不同的以内容为中心的页面，完全对开发人员友好的代码出现，并且在最终版本发布之前，它已经经历了各种过程和测试，以使性能和设计美学达到您所知的最佳水平。</p>
<p>特征：</p>
<ul>
<li>实时页面定制器</li>
<li>准备使用仪表板小部件</li>
<li>更快的加载速度</li>
</ul>
<hr>
<h1 class="pgc-h-arrow-right">36. Flatlogic One</h1>
<div class="pgc-img"><img src="http://p6-tt.byteimg.com/large/pgc-image/e0002da9b19b4ffb978a8cc729fd0bfc?from=pc" alt="推荐36种免费React模板和主题「干货」">
<p class="pgc-img-caption"> </p>
</div>
<p>现场演示：https://flatlogic.github.io/one-react-template/#/login</p>
<p>地址：https://flatlogic.com/templates/one-free-react-template</p>
<p>Flatlogic One是由React和Bootstrap前端框架组成的全新资源。该模板非常适合创建FinTech，数据表和基于Web的应用程序。Flatlogic提供了可重复使用的React钩子，用于创建响应式Web活动，并且主导航位于左侧栏上，因此内容始终位于中心并按最佳标准排列。</p>
<p>特征：</p>
<ul>
<li>集成功能图</li>
<li>深厚的背景</li>
<li>面向开发人员的产品</li>
</ul>
<p style="text-align: center"><br class="Apple-interchange-newline"> </p>
<p style="text-align: center"><img src="https://mmbiz.qpic.cn/mmbiz_png/ic5A4V8PX4PmYRMdf2zNTI5ibzzjibIRoBHibeJpAicpgCicpjtianWkswiadC6HFadiak7v57lib7A06Z2hF2z5z2GHyZGA/640?wx_fmt=png" data-ratio="1.0416666666666667" data-type="png" data-w="72" data-width="100%"><img src="https://mmbiz.qpic.cn/mmbiz_png/ic5A4V8PX4PmYRMdf2zNTI5ibzzjibIRoBHXEFlX0W4k2AJCl5brCt69CEtoPJSErVxpKvNictXlq5ZOfiafEgCmScQ/640?wx_fmt=png" data-ratio="0.057692307692307696" data-type="png" data-w="208" data-width="100%">文章就分享到这，欢迎关注“前端大神之路”<img src="https://mmbiz.qpic.cn/mmbiz_png/ic5A4V8PX4PmYRMdf2zNTI5ibzzjibIRoBHXEFlX0W4k2AJCl5brCt69CEtoPJSErVxpKvNictXlq5ZOfiafEgCmScQ/640?wx_fmt=png" data-ratio="0.057692307692307696" data-type="png" data-w="208" data-width="100%"></p>
<p style="text-align: center"> </p>
<p><img src="https://mmbiz.qpic.cn/mmbiz_jpg/ic5A4V8PX4PlFsF8IR1HCWm1d4NkicdsocH4vNZlgibKwBuf0HbtdpsC3a7YGvDIYGrgIM88ADywXHc7rPOGqibeqg/640?wx_fmt=jpeg" width="353" height="147" class="rich_pages" style="display: block; margin-left: auto; margin-right: auto" data-ratio="0.4166666666666667" data-s="300,640" data-type="jpeg" data-w="720"></p><br><br>
来源：https://www.cnblogs.com/cczlovexw/p/13267685.html

頁: [1]

琼殿技术论坛's Archiver

36种免费React模板和主题「干货」