shoelace README

The project's README from github.com/shoelace-style/shoelace. As one markdown file: README.md.

Shoelace is now Web Awesome — visit webawesome.com

[!IMPORTANT]
Shoelace is sunset. There is no active development on this codebase. The library remains available under the MIT license for existing use, but please do not open issues, pull requests, or feature requests here—direct those to Web Awesome, the successor project, at github.com/shoelace-style/webawesome.

[!TIP]
Already using Shoelace? Follow the migration guide to move to Web Awesome, or point an AI coding agent at it for a faster path.

What “Sunset” Means: Shoelace has no active development. Issues, pull requests, and feature requests belong on Web Awesome, not this repository. The published package remains available under the MIT license for existing use. Archiving this repo on GitHub (optional but recommended) is how you mark it read-only on the platform—see For Repository Maintainers below.

Web Awesome, like Shoelace before it, offers an even larger library of free components, plus themes, utilities, patterns, and more.

Shoelace

A forward-thinking library of web components.

Shoemakers 🥾

The sections below are for historical reference—for example, running the docs or a build from source, auditing the codebase, or maintaining a private fork. New components and ongoing development belong on Web Awesome, not here. You will need Node >= 14.17 to build and run the project locally.

You do not need any of this to use Shoelace as a dependency. For installation and usage, see the documentation website.

What are you using to build Shoelace?

Components are built with LitElement, a custom elements base class that provides an intuitive API and reactive data binding. The build is a custom script with bundling powered by esbuild.

Forking the Repo

You can still fork the repo on GitHub for your own experiments, then clone it locally and install dependencies.

git clone https://github.com/YOUR_GITHUB_USERNAME/shoelace
cd shoelace
npm install

Developing

Once you've cloned the repo, run the following command.

npm start

This will spin up the dev server. After the initial build, a browser will open automatically. There is currently no hot module reloading (HMR), as browsers don't provide a way to reregister custom elements, but most changes to the source will reload the browser automatically.

Building

To generate a production build, run the following command.

npm run build

New Components

Develop new components on Web Awesome, not in this repository. If you maintain a private fork and still use the old tooling, the historical scaffold was npm run create <tag-name>—that workflow is unsupported.

Contributing

Shoelace is open source under the MIT license, but this repository is not accepting contributions. For bug reports, features, and pull requests, use Web Awesome (repository). See CONTRIBUTING.md.

License

Shoelace is available under the terms of the MIT license.

Whether you are using Shoelace in a project or exploring this source tree — have fun creating! 🥾

shoelace (shoelace-style/shoelace)

Searching Database…

13.8K ·GitHub
Shoelace
archived
这是什么?Shoelace 是一个很有前瞻性的 Web 组件库——里面是一批现成的界面构建模块,可以直接放进任何网页或应用中使用。该项目现已停止维护,由其后续项目 Web Awesome 接替。
它和 React 绑定吗,还是我可以在任何框架里使用?都不是——这些组件是标准的 Web 组件,所以在任何框架里都能用,不用框架也行,甚至可以直接从 CDN 加载。
我怎么把它加到项目里?把已发布的软件包作为依赖安装——通过 npm 或 CDN——然后按照 shoelace.style 上的文档操作。只是使用的话,你不需要构建这个代码仓库。
使用它需要 Node 或任何构建工具吗?不需要,作为依赖使用时不需要。只有当你克隆仓库在本地构建或运行时——比如维护一个私有分支——才需要 Node 14.17 或更高版本。
Shoelace 还在积极开发吗?没有。项目已停止维护,仓库也已归档。已发布的软件包仍然可用,供现有使用场景继续使用,但问题反馈、拉取请求和新的开发都归 Web Awesome,不再在这里进行。
Web Awesome 是什么?它是 Shoelace 的后续项目,现在所有活跃开发都在那里进行。和之前的 Shoelace 一样,它提供了规模更大的免费组件库,还有主题、工具类、设计模式等更多内容。
这些组件开箱即用支持哪些东西?它们兼容所有框架和 CDN,可以用 CSS 完全自定义,自带官方深色主题,并且在设计时就考虑了无障碍访问。
既然软件包还能用,为什么 GitHub 仓库要归档?归档是项目在 GitHub 上把自己标记为只读的方式——README 称这是可选但推荐的。归档不影响已发布的软件包,它仍然可供现有使用场景继续使用。
参与源码开发的体验怎么样?组件基于 LitElement 构建,打包由 esbuild 驱动。克隆仓库并安装依赖后,运行 npm start 就会启动开发服务器并打开浏览器。它不支持热模块替换——因为浏览器无法重复注册自定义元素——但大多数改动会自动重新加载页面。
What are similar projects?arc-library, astryx, hyperui, fluentui, mdb-ui-kit, chakra-ui, rare-ui, material-components-web
Which topics is it in?webcomponents, ux, web-components, components, ui-library, dark-mode, design-system, accessibility, component-library, ui-components, customization, deprecated
Creator
shoelace-style
Size
19 MB
Stars
13.8K
Updated
CommitMay 14Releasev2.20.1Mar 11
Age
9y
Commits · 90 Days