npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

@limetech/lime-elements

v38.33.1

Published

Lime Elements

Downloads

45,391

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

flippareflipparecybercapcybercapspecularrainspecularrainanderssonjohananderssonjohanlime-cilime-ci

Keywords

lime elementslime crmmaterial designcomponent libraryweb components

Readme

Lime Elements

Modern Web Components for Enterprise Applications

A comprehensive design system and component library built with Stencil

Why Lime Elements?

  • 🚀 Enterprise-Ready - Battle-tested components used in production applications
  • 🎨 Design System - Consistent UX/UI design with comprehensive usage guidelines
  • ⚡ Web Standards - Built with Stencil, works with any framework
  • 👾 TypeScript - Full type safety and excellent developer experience
  • ♿ Accessible - Built with accessibility in mind
  • ⚙️ Customizable - Extensive styling options

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.

Recent Updates

Project Status

Version semantic-release npm downloads

Quality & Reliability

Build Status Quality Gate Status Bundle Size Known Vulnerabilities Dependencies

Technology & Standards

TypeScript Stencil Web Components License

Community & Activity

GitHub stars GitHub issues GitHub pull requests Commits

Quick Start

<!-- 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>

Try it live in our playground

Getting Started

  • To install, run npm install @limetech/lime-elements.

Requirements

1. Font

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;

2. Icons

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.

How to Set Up Your Icons Folder

  • 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/'}} />

Using @beta Components

Components marked as @beta are not yet stable. Here's what you need to know:

  1. Breaking changes: We may change @beta components in ways that break your code. We won't increase the major version number when we do this.
  2. Unstable: @beta components may have more bugs than other components. Use them at your own risk.
  3. Feedback wanted: We offer @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.

Community & Support

Contributing

We welcome contributions from the community! Here's how you can help:

  • 🔍 Found an issue? Feel free to fix it and submit a PR
  • 📝 Improve docs? Documentation improvements are always appreciated
  • 🎨 Design feedback? Share your UX insights
  • 🧪 Testing? Help us test new features and report bugs

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

AI-Friendly Documentation

Lime Elements generates Context7-compatible markdown documentation to help AI coding assistants and LLMs better understand and use our component library. This documentation is automatically published with each release and includes:

  • 📄 Component API docs - Detailed markdown documentation for all components
  • 📚 Design guidelines - Best practices and usage patterns
  • 🎯 Usage rules - Context7 rules for proper component usage
  • 🔗 Navigation index - Searchable overview of all components and guides

The documentation is available at:

This makes Lime Elements easier to work with when using AI pair programming tools like GitHub Copilot, Cursor, or Claude Code.

📄 License

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

⭐ Star us on GitHub • 📚 Documentation • 📦 NPM