@wearenotch/ui-angular
v0.4.0
Published
Angular components for the Notch Design System
Downloads
147
Readme
@wearenotch/ui-angular
Angular components for the Notch Design System.
Install
pnpm add @wearenotch/ui-angular @wearenotch/tokens
# or
npm install @wearenotch/ui-angular @wearenotch/tokens@angular/common, @angular/core, and @angular/forms (>=17) are peer dependencies.
Usage
Import the tokens stylesheet once in your global styles:
/* src/styles.scss */
@import '@wearenotch/tokens/css';Every component is standalone — import it directly into the consuming component's imports array. No NgModule required.
import { Component } from '@angular/core';
import { ButtonComponent, InputComponent, FormFieldComponent } from '@wearenotch/ui-angular';
@Component({
selector: 'app-sign-in',
standalone: true,
imports: [ButtonComponent, InputComponent, FormFieldComponent],
template: `
<form>
<notch-form-field label="Email" htmlFor="email">
<notch-input id="email" type="email" [(ngModel)]="email" />
</notch-form-field>
<notch-button variant="primary" type="submit">Sign in</notch-button>
</form>
`,
})
export class SignInComponent {
email = '';
}Dark mode
Dark mode is CSS-only — toggle the data-theme attribute on <html>:
document.documentElement.setAttribute('data-theme', 'dark');No service, no observable — every component reads tokens that respond to data-theme="dark".
Components
35 components covering primitives, forms, feedback, navigation, layout, and data display. All use:
standalone: trueChangeDetectionStrategy.OnPushViewEncapsulation.Nonenotch-selector prefix (e.g.notch-button,notch-form-field)- Signal API (
input(),output(),signal(),computed())
Primitives Button, DangerButton, IconButton, Badge, Tag, Avatar, Spinner, Skeleton, Tooltip Forms Input, Textarea, Select, MultiSelect, Checkbox, Switch, Slider, FormField, FileUpload, DatePicker, RichTextEditor Feedback Alert, Notification, ProgressBar, EmptyState Navigation Tabs, Accordion, Breadcrumbs, Pagination, Stepper Layout Card, Modal, List, Carousel Data display Table, Chart
Forms integration
Form controls (Input, Textarea, Select, MultiSelect, Checkbox, Switch, Slider, DatePicker, FileUpload, RichTextEditor) implement ControlValueAccessor — use [(ngModel)] or reactive formControlName.
<notch-input formControlName="email" />
<notch-select [options]="countries" formControlName="country" />Services
Two singletons (providedIn: 'root') — inject anywhere:
ModalService— open / close modals imperativelyNotificationService— fire toast notifications
constructor(private modal: ModalService) {}
openConfirm() {
this.modal.open(ConfirmDialogComponent, { title: 'Delete account?' });
}Scripts
pnpm --filter @wearenotch/ui-angular test # run jestLicense
MIT