Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

signal-ui

Package Overview
Dependencies
Maintainers
2
Versions
135
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

signal-ui

> IMPORTANT: Signal UI is a work in progress and subject to major changes > until 1.0 release.

  • 0.0.134
  • unpublished
  • npm
  • Socket score

Version published
Weekly downloads
0
Maintainers
2
Weekly downloads
 
Created
Source

Signal UI

IMPORTANT: Signal UI is a work in progress and subject to major changes until 1.0 release.

Signal UI is built using Web Component and Lit Element.

Roadmap

Alpha components are in-development and may have many frequent breaking changes.

Beta components are mostly polished and ready for use.

Stable components are reviewed, documented, and API complete.

  • ❌ Not started
  • 🟡 In progress
  • ✅ Complete

1.0 Components

NoComponentAlphaBetaStable
1Banner🟡
2Bottom Sheet & Modal
3Breadcrumbs🟡
4Button
5Callout🟡
6Chips🟡
7Dialogs🟡
8Filters
9Footer
10Header Hero
11Label
12Menu
13Navigation
14Quick Links
15Search
16Selection Control🟡
17Snackbar🟡
18Spacing
19Tab🟡
20Text Field🟡
21Tooltip
22Top Bar
23Uploader

Framework

  • Angular
  • React

npm:

npm install signal-ui

Getting started in Angular

Since it is using custom web component, we need to register it on app.module.ts file:

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import 'signal-ui'; --> add this

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  schemas: [CUSTOM_ELEMENTS_SCHEMA], --> add this
  bootstrap: [AppComponent]
})
export class AppModule { }

Then, you can use the component in html file. The format is <signal-${component-name}/>:

<!DOCTYPE html>
<html lang="en">
  <body>
    <signal-button variant="primary" size="xl" disabled (onClick)="() => window.alert('test')">BELI PULSA</signal-button>
  </body>
</html>

Getting started in React

No additional configuration needed, you can consume it to js/ts file:

import React from 'react';
import { SignalButtonReact } from 'signal-ui';

function App() {
  return (
    <div>
      <SignalButtonReact variant='primary' size='xl' disabled onClick={() => window.alert('test')}>BELI PULSA</SignalButtonReact>
    </div>
  );
}

export default App;

Prefix Component Name

Here is the list of prefix component name that is ready to be used:

NoComponentAngularReact
1Badgesignal-badgeSignalBadgeReact
2Bannersignal-bannerSignalBannerReact
3Breadcrumbsignal-textfieldSignalBreadcrumbReact
4Buttonsignal-buttonSignalButtonReact
5Calloutsignal-calloutSignalCalloutReact
6Checkboxsignal-checkboxSignalCheckboxReact
7Chipssignal-chipsSignalChipsReact
8Dialogssignal-dialogsSignalDialogsReact
9Floating Buttonsignal-button-floatingSignalButtonFloatingReact
10Icon Buttonsignal-button-iconSignalButtonIconReact
11Language Selectorsignal-language-selectorSignalLanguageSelectorReact
12OTPsignal-otpSignalOTPReact
13Radiosignal-radioSignalRadioReact
14Snackbarsignal-snackbarSignalSnackbarReact
15Social Media Buttonsignal-button-socmedSignalButtonSocmedReact
16Tabsignal-tabSignalTabReact
17Text Areasignal-textareaSignalTextAreaReact
18Text Fieldsignal-textfieldSignalTextfieldReact
19Togglesignal-toggleSignalToggleReact

Keywords

FAQs

Package last updated on 26 Jul 2023

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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc