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

@lightit/light-kit

v1.2.1

Published

This is the repo for Light-Kit, our UI library and its documentation. We use it on all our internal projects to maintain visual consistency across tools.

Downloads

7

Vulnerabilities

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

Links

Maintainers

walt-itwalt-itjavier.lempertjavier.lempert

Keywords

Readme

Welcome

This is the repo for Light-Kit, our UI library and its documentation. We use it on all our internal projects to maintain visual consistency across tools.

Installation

  1. Clone this project inside a folder on your machine.
git clone https://github.com/Light-it-labs/light-kit.git
  1. Install dependencies on both the root and /docs directory
npm i
cd docs
npm i
  1. Create an index.html file with this content inside project root.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Light Kit Playground</title>
    <link rel="stylesheet" href="./src/light-kit.css">
    <script type="module">
      import * as LightKit from './src/index.ts';
    </script>
  </head>
  <body>
    <!--Test your work in progress here-->
  </body>
</html>

Commands

  1. The root directory handles our npm package for the component library. From here you can execute these commands:
npm run lib:dev
npm run lib:build
npm run lib:analyze

npm run lib:dev: will serve index.html on http://localhost:2420. This index file is git ignored and it's meant to be used as a playground to test your components in development. You'll develop your components inside /src/components. Design tokens used by the library are in src/light-kit.css.

npm run lib:build: will build a new version of the library.

npm run lib:analyze: will generate automatic documentation in markdown files for the components inside the /docs/src/specs folder.

npm publish --access public: will publish the latest build to npm. Remember to build the package first with npm run lib:build and bump the version number inside package.json. npm won't let you publish a package with a previous version number. npm will probably ask you to login when trying to publish, you can do so with the npm adduser command and following the instructions in your terminal.

  1. The /docs directory houses our documentation site. From here you can run:
npm run docs:dev
npm run docs:build
npm run docs:preview

npm run docs:dev will start a dev server on http://localhost:2421.

npm run docs:build will build a deployable static site.

npm run docs:preview will serve a preview of the built site.

Versioning

Versioning for this project loosely follows semantic versioning. The version number is composed of three parts separated by dots: MAJOR.MINOR.PATCH.

  • You should increase the MAJOR version when your new code introduces breaking changes that will require effort and changes on the library user's code.
  • The MINOR version should increase when a new non-breaking feature is added, in the case of this project, this mostly translates to a new component being added to the library.
  • Finally, the PATCH version should increase when current code is modified, this will usually mean fixing a bug or adding a feature to an existing component.