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	Button	signal-button	SignalButtonReact
2	Social Media Button	signal-button-socmed	SignalButtonSocmedReact
3	Floating Button	signal-button-floating	SignalButtonFloatingReact
4	Icon Button	signal-button-icon	SignalButtonIconReact
5	Checkbox	signal-checkbox	SignalCheckboxReact
6	Radio	signal-radio	SignalRadioReact
7	Toggle	signal-toggle	SignalToggleReact
8	Badge	signal-badge	SignalBadgeReact
9	Language Selector	signal-language-selector	SignalLanguageSelectorReact
10	Text Field	signal-textfield	SignalTextfieldReact
11	Text Area	signal-textarea	SignalTextAreaReact
12	Breadcrumb	signal-textfield	SignalBreadcrumbReact
13	Banner	signal-banner	SignalBannerReact
14	Tab	signal-tab	SignalTabReact
15	OTP	signal-otp	SignalOTPReact

Keywords

FAQs

What is signal-ui?

Is signal-ui well maintained?

Package last updated on 09 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