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

Framework

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:

No	Component	Angular	React
1	Badge	signal-badge	SignalBadgeReact
2	Banner	signal-banner	SignalBannerReact
3	Breadcrumb	signal-textfield	SignalBreadcrumbReact
4	Button	signal-button	SignalButtonReact
5	Callout	signal-callout	SignalCalloutReact
6	Checkbox	signal-checkbox	SignalCheckboxReact
7	Chips	signal-chips	SignalChipsReact
8	Dialogs	signal-dialogs	SignalDialogsReact
9	Floating Button	signal-button-floating	SignalButtonFloatingReact
10	Icon Button	signal-button-icon	SignalButtonIconReact
11	Language Selector	signal-language-selector	SignalLanguageSelectorReact
12	OTP	signal-otp	SignalOTPReact
13	Radio	signal-radio	SignalRadioReact
14	Snackbar	signal-snackbar	SignalSnackbarReact
15	Social Media Button	signal-button-socmed	SignalButtonSocmedReact
16	Tab	signal-tab	SignalTabReact
17	Text Area	signal-textarea	SignalTextAreaReact
18	Text Field	signal-textfield	SignalTextfieldReact
19	Toggle	signal-toggle	SignalToggleReact

Keywords

FAQs

What is signal-ui?

Is signal-ui well maintained?

Package last updated on 27 Jun 2023

Did you know?

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