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

@magic-engineering/components

v2.2.9

Published

This repo contains a set of React components that we at Magic can use to build our apps. We use scss to author our styles and bootstrap. The goal of this project is to be able to integrate as seamless as possible in existing and new projects built with Re

Downloads

25

Readme

Magic Components

This repo contains a set of React components that we at Magic can use to build our apps. We use scss to author our styles and bootstrap. The goal of this project is to be able to integrate as seamless as possible in existing and new projects built with React.

Table of contents

Installing

The Magic Components package can be installed via npm with a regular install command:

npm install @magic-engineering/components
# or
yarn add @magic-engineering/components

Using the Magic Components

In order to successfully use Magic Components you need to import the compiled css file that defines the styling rules for entire set of components. Afterwards you can import any component and it'll be ready and styled.

import "@magic-engineering/components/dist/magic-components.css";
import { Button } from "@magic-engineering/components";

// Now you can use it
<Button label="Sign up" onClick={handleOnSignup} />;

Contributing

Everyone is more than welcomed to contribute and maintain the components that we have. Before starting to write any component code please read the following description of how to do it and how the repository is structured.

Packaging

The entire suite of components is getting bundled as one package. That package is then published onto npm under @magic-engineering/components. The bundle is created using microbundle a tool that compiles to modern output formats and compresses the static assets.

Testing

For actual testing we use unit tests in order to lock functionality of a certain component. For viewing the end result of a certain component we use storybook. For exploring different uses of a certain component we have a local ./sandbox folder where you can play around with the production version of the package.

Publishing new version

This component library is maintain independently of the other projects that we own. How we consume this library is by publishing it to npm and install it where we need. That means in order to publish new versions of the library we need to actually publish a new version onto the npm network.

Bumping versions

Before we can publish we need to make sure we properly bump the version of the package. The process of actually compiling the library is done separately, so that is not something you need to be worried about to be doing manually.

Let's get started!

  1. First create a new branch. Name it as you wish.
  2. On the new branch run the following command:
npm version patch

patch here refers to the type of version we wanna bump. The version should respect the semver spectrum: <major>.<minor>.<patch>.

  1. Commit the newly bumped version

After all that, open a MR against master branch and merge it when pipeline succeeds.

Publishing

After the above step is done, the master pipeline will have a Publish manual step enabled. Click on that step which will trigger the npm publishing process of the new version.

That's it.