@limetech/lime-elements
Advanced tools
Lime ElementsModern Web Components for Enterprise Applications
A comprehensive design system and component library built with Stencil
Sponsored by 
Lime Technologies, Lime Elements is a production-ready component library and design system built with Stencil. Our enterprise-grade components help you create consistent, scalable, and accessible web applications faster.
Whether you're building from scratch or enhancing existing applications, Lime Elements provides the building blocks for exceptional user experiences that work across all modern frameworks.
Visit our 📚 Documentation for comprehensive guides and examples, or install directly from 📦 NPM.
<!-- Load the package -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@limetech/lime-elements@latest/dist/lime-elements/lime-elements.esm.js"></script>
<!-- Use components in your HTML -->
<limel-input-field
label="Name"
placeholder="Enter your full name"
></limel-input-field>
<limel-button primary label="Submit"></limel-button>
npm install @limetech/lime-elements.To achieve a blazing fast rendering, our components' user interface utilizes a default cross-browser sans-serif font stack. As web components typically inherit font-related styles such as font-family, font-size, and color, we recommend defining these styles at a higher level, such as the <body> element. This is because we do not specify these defaults on each individual component.
To maintain consistency with the look & feel demonstrated in this documentation, we suggest incorporating the following styles into your project:
font-family: ui-sans-serif, system-ui, sans-serif;
font-size: 0.875rem;
font-style: normal;
font-weight: 400;
color: rgb(var(--contrast-1500));
💡 About the color specified above, read more on our color system.
Feel free to customize the font-family and related styles to suit your project's needs. For example, you might prefer a different typeface like below:
font-family: 'Roboto', Arial, Verdana, sans-serif;
At Lime, we utilize the Windows 11 Outline icon set from Icons8. You may notice these icons in our components, such as the magnifying glass icon displayed as a leading icon on an input field.
If you're using Lime Elements in a non-Lime product, you'll need to provide your own icons. We're unable to redistribute Icons8's assets with our package due to licensing restrictions.
Providing your own icons is crucial as many of our components use an Icon interface. This interface allows you to specify an icon name, which corresponds to the filename of an SVG icon. For example, you can use this to display an icon on a button.
For Lime products:
To use @lundalogik/lime-icons8, the /assets folder from @lundalogik/lime-icons8 must be made available on the web-server.
For non-Lime products:
To use a different icon set, the icons must be placed in a folder structure that looks like this: assets/icons/<name-of-icon>.svg
If assets is placed in the root, no other setup is needed. The icons will be fetched with a relative URL from /assets/icons/<name-of-icon>.svg.
If assets is placed in a sub-folder somewhere, the easiest way to make the icons available is to use the HTML base element:
<base href="/my/parent/path/" />
If this is not enough, or if the base element is already in use for something else, a global icon path can be configured with the limel-config element:
<limel-config config={{iconPath: '/my/parent/path/'}} />
Components marked as @beta are not yet stable. Here's what you need to know:
@beta components in ways that break your code. We won't increase the major version number when we do this.@beta components may have more bugs than other components. Use them at your own risk.@beta components to get your input. Your feedback helps us improve them.Remember: All components can change, but @beta components change more often and without warning.
We welcome contributions from the community! Here's how you can help:
Quick Set Up
git clone https://github.com/Lundalogik/lime-elements.git
cd lime-elements
npm install
npm start # Starts local development server
📋 Read our full contributing guidelines
Lime Elements is open source software licensed under the Apache 2.0 License.
Built with ❤️ by your friends at Lime Technologies
Empowering developers to create amazing user experiences
FAQs
Lime Elements
The npm package @limetech/lime-elements receives a total of 14,347 weekly downloads. As such, @limetech/lime-elements popularity was classified as popular.
We found that @limetech/lime-elements demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket Firewall Enterprise is now available with flexible deployment, configurable policies, and expanded language support.
Security News
Open source dashboard CNAPulse tracks CVE Numbering Authorities’ publishing activity, highlighting trends and transparency across the CVE ecosystem.
Product
Detect malware, unsafe data flows, and license issues in GitHub Actions with Socket’s new workflow scanning support.