Lynk: A library of web components for building web
applications with the Uplynk user interface style guide
Quick Start
pnpm install @uplynk/lynk-design
or add the following code to your page.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@uplynk/lynk-design@1.0.0/cdn/themes/light.css" /> <script type="module" src="https://cdn.jsdelivr.net/npm/@uplynk/lynk-design@1.0.0/cdn/lynk-autoloader.js"></script>
Now you have access to all of Lynk’s components! Try adding a button:
This will activate Lynk’s experimental autoloader, which registers components on the fly as you use them. To learn more about it, or for other ways to install Lynk, refer to the installation instructions.
New to Web Components?
TL;DR – we finally have a way to create our own HTML elements and use them in any framework we want!
Thanks to the popularity of frameworks such as Angular, Vue, and React, component-driven development has become a part of our every day lives. Components help us encapsulate styles and behaviors into reusable building blocks. They make a lot of sense in terms of design, development, and testing.
Unfortunately, framework-specific components fail us in a number of ways:
- You can only use them in the framework they’re designed for 🔒
- Their lifespan is limited to that of the framework’s ⏳
- New frameworks/versions can lead to breaking changes, requiring substantial effort to update components 😭
Web components solve these problems. They’re supported by all modern browsers, they’re framework-agnostic, and they’re part of the standard, so we know they’ll be supported for many years to come.
This is the technology that Lynk is built on.
Browser Support
Lynk is tested in the latest two versions of the following browsers.





Attribution
Special thanks to the following projects and individuals that help make Lynk possible.
- Components are built with Lit
- Component metadata is generated by the Custom Elements Manifest Analyzer
- Documentation is powered by 11ty
- CDN services are provided by jsDelivr
- Color primitives are inspired by Tailwind
- Icons are courtesy of Bootstrap Icons
- Positioning of dropdowns and tooltips is handled by Floating UI
- Animations are courtesy of animate.css
- Search is powered by Lunr
- And finally Shoelace.style and all the fine work of Cory LaViska on which the foundation of Lynk is shamelessly derived.