🎩 You're Invited:Meet the Socket team at Black Hat in Las Vegas, August 3-6.RSVP →
Sign In

@conectate/components

Package Overview
Dependencies
Maintainers
1
Versions
15
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@conectate/components

> IMPORTANT: The Conectate Elements are a work in progress and subject to major changes.

latest
npmnpm
Version
1.3.0
Version published
Maintainers
1
Created
Source

@conectate/components (Conectate Components)

IMPORTANT: The Conectate Elements are a work in progress and subject to major changes.

@conectate/components is a collection of Web Components maintained by @herberthobregon that implement Material Design.

This repo builds and publishes one single npm package:

  • @conectate/components

And components are imported by subpath, for example:

  • import "@conectate/components/ct-button"
  • import "@conectate/components/ct-icon/ct-icon-button.js"

Components

All components live under src/ and are exposed via subpath imports from @conectate/components.

Examples:

  • @conectate/components/ct-button
  • @conectate/components/ct-dialog
  • @conectate/components/ct-icon
  • @conectate/components/ct-icon/icon-list.js

Quick start with ct-button

1) Install

Install from NPM:

pnpm i @conectate/components

2) Write Raw HTML and JavaScript (without frameworks)

Import the component's JavaScript module, use the component in your HTML, and control it with JavaScript, just like you would with a built-in element such as <button>:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Example App</title>

    <!-- Add support for Web Components to older browsers. -->
    <script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>

    <!-- Your application must load the Roboto and Material Icons fonts. -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
  <body>
    <!-- Use Web Components in your HTML like regular built-in elements. -->
    <ct-button id="myButton" raised>Click Me!</ct-button>

    <!-- The Conectate Elements use standard JavaScript modules. -->
    <script type="module">
      // Importing this module registers <ct-button> as an element that you
      // can use in this page.
      //
      // ====================================================================
      // Note this import is a BARE MODULE specifier, so it must be converted
      // to a path using a server such as es-dev-server.
      // ====================================================================
      import '@conectate/components/ct-button';

      // Standard DOM APIs work with Web Components just like they do for
      // built-in elements.
      const button = document.querySelector('#myButton');
      button.addEventListener('click', () => {
        alert('You clicked!');
      });
    </script>
  </body>
</html>

3) Serve

Serve your HTML with any server or build process that supports bare module specifier resolution (see next section):

npm install -g vite
vite

Bare module specifiers

The Conectate Elements are published as standard JavaScript modules that use bare module specifiers. Bare module specifiers are not yet supported by browsers, so it is necessary to use a tool that transforms them to a path (for example from @conectate/components/ct-button to ./node_modules/@conectate/components/dist/ct-button/ct-button.js).

Deep imports (optional)

If you need a specific internal module, you can deep import it as long as it exists in the published dist/ output, for example:

// for ct-button.js
import "@conectate/components/ct-button";
// Import subpath components
import "@conectate/components/ct-button/ct-button-menu.js";
import "@conectate/components/ct-icon/ct-icon-button.js";

Note: deep imports are more coupled to internal file layout. Prefer @conectate/components/<component> when possible.

Development (this repo)

pnpm install
pnpm demo

Build output is generated into dist/:

pnpm build

Two great choices for tools that do this are:

Fonts

Most applications should include the following tags in their main HTML file to ensure that text and icons render correctly:

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />

The Conectate Elements default to using the Roboto font for text. This fonts are not automatically loaded, so it is the application's responsiblity to ensure that they are loaded.

FAQs

Package last updated on 04 Aug 2026

Did you know?

Socket

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.

Install

Related posts

AWS Security Hub Adds Socket for Supply Chain Security

Company News

AWS Security Hub Adds Socket for Supply Chain Security

Socket is now in the AWS Security Hub Extended plan. Adopt it through AWS, apply committed spend, and block malicious open source packages.

By Feross Aboukhadijeh  -  Aug 04, 2026