If you are developing a Web Component, whether it is for a company, a side project or something that is open source and publicly available, you can make it available for use by other people or team members very easily by publishing your Web Component on the web.

But even before you can publish, you need to make sure that the following steps are completed:

• Your component can be installed via npm
• A proper README file is present in the repository of your component with steps to use and attributes that can be changed
• A demo folder of a working example with index.html file

Let's prepare our file for npm. In order to do that, let's do a quick npm init inside the repo directory with the help of a terminal. I am going to do it with the <profile-info> component that we discussed in the previous section. That will generate a package.json file that looks something like this:

{
  "name": "profile-info",
  "version": "0.0.1",
  "description": "A webcomponent that shows information about an employee in the form of a profile card.",
  "main": "ProfileInfo.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [
    "webcomponent",
    "component",
    "profile",
    "info",
    "employee"
  ],
  "author": "Prateek Jadhwani",
  "license": "ISC",
  "repository": "https://github.com/prateekjadhwani/profile-info"
}

We will then create a ReadMe.md file in our component directory. And add the following text at the top:

[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/owner/my-element)

I added mine with the following:

[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/prateekjadhwani/profile-info)

This will create a published on webcomponents.org site badge that can be viewed by people visiting your GitHub or GitLab page. And it looks something like this:

Once this is done, we can set up our Readme.md file for a demo section. 

You can add to the Readme.md file about the attributes, and how it can be used as shown here:

```html
<profile-info
  name="John Doe"
  designation="Frontend Engineer - Marketing"
  id-number="PRC-1455"
  picture-src="./john-doe.png"
  employee-type="ft">
</profile-info>
```

Now you are ready to publish your Web Component on to the NPM JS site. Just type npm publish and it will push your code onto the site. 

You can find the <profile-info> Web Component here at https://www.npmjs.com/package/profile-info:

Once you are done with this, you can simply go to https://www.webcomponents.org/publish and scroll down to the section where it says Ready To Publish?, and simply put your npm package name and click on the Publish button:

This will publish your Web Component, which can be used by anyone. Now your component is available to be distributed across the web.