@assistanz/carbideui

An independent, community-driven Angular component library inspired by the Carbon Design System.

Disclaimer: This project is NOT affiliated with, endorsed by, or sponsored by IBM or the Carbon Design System team. "Carbon" is a trademark of IBM Corporation.

Table of Contents

• Installation
• Setup
• Quick Start
• Components
  • Forms
  • Button
  • Data — Table & Pagination
  • Feedback — Notification & Toast
  • Modal
  • Tooltip & Skeleton
  • Navigation — Tabs & Accordion
  • Charts
  • Theming
• Reactive Forms
• Accessibility
• Troubleshooting
• Compatibility
• Resources

Installation

npm install @assistanz/carbideui @carbon/styles @carbon/charts

Setup

1. Import styles

Add the following to your global stylesheet (src/styles.scss):

@use '@carbon/styles/scss/config' with (
  $use-flexbox-grid: true,
  $font-path: '@ibm/plex'
);

@use '@carbon/styles';
@use '@assistanz/carbideui/styles';

Without this, components will render unstyled.

Quick Start

Import only the components you need — all are standalone and tree-shakeable.

import { NgccButton, NgccInput, NgccCheckbox } from '@assistanz/carbideui';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NgccButton, NgccInput, NgccCheckbox],
  template: `
    <ngcc-input label="Email" type="email" [(value)]="email" />
    <ngcc-checkbox label="I agree to terms" [(checked)]="agreed" />
    <ngcc-button label="Submit" variant="primary" (click)="submit()" />
  `,
})
export class AppComponent {
  email = '';
  agreed = false;

  submit() {}
}

Components

Forms

All form components implement ControlValueAccessor and support both template-driven ([(ngModel)]) and reactive forms.

NgccInput

import { NgccInput } from '@assistanz/carbideui';

// template
<ngcc-input
  label="Email"
  type="email"
  placeholder="[email protected]"
  [(value)]="email"
  [required]="true"
  [invalid]="isEmailInvalid()"
  errorMessage="Please enter a valid email"
  helperText="We'll never share your email"
/>

Reactive Forms

import { ReactiveFormsModule, FormGroup, FormControl } from '@angular/forms';
import { NgccInput, NgccCheckbox, NgccDropdown } from '@assistanz/carbideui';

@Component({
  imports: [ReactiveFormsModule, NgccInput, NgccCheckbox, NgccDropdown],
  template: `
    <form [formGroup]="form">
      <ngcc-input    label="Email"     formControlName="email" />
      <ngcc-checkbox label="Subscribe" formControlName="subscribe" />
      <ngcc-dropdown label="Country"   formControlName="country" [items]="countries" />
    </form>
  `,
})
export class MyComponent {
  form = new FormGroup({
    email:     new FormControl(''),
    subscribe: new FormControl(false),
    country:   new FormControl(null),
  });
}

Accessibility

All components are built to WCAG 2.1 AA standard:

• ARIA labels via ariaLabel prop on every interactive component
• Keyboard navigation — Tab, arrow keys, Enter/Space
• Focus trap inside modals
• Screen reader support (tested with NVDA / JAWS)
• Automated axe-core testing on every component

Always provide a label or ariaLabel on interactive elements:

<ngcc-button ariaLabel="Submit registration form" variant="primary" />

Troubleshooting

Components render unstyled Ensure @carbon/styles is imported before any component usage in your global stylesheet.

@use '@carbon/styles'; /* must be present */

Two-way binding [(value)] does not update Import FormsModule in your component:

import { FormsModule } from '@angular/forms';
@Component({ imports: [FormsModule, NgccInput] })

NullInjectorError for NotificationService / ToastService These services are providedIn: 'root'. Ensure you are bootstrapping with bootstrapApplication():

bootstrapApplication(AppComponent);

Theme does not change Use the signal setter — direct assignment does not trigger reactivity:

this.themeService.baseTheme.set('g90');  // correct
this.themeService.baseTheme = 'g90';     // does not work

Compatibility

| Dependency | Version | | --------------- | ------------------ | | Angular | ^20.0.0 | | @carbon/styles | ^1.98.0 | | @carbon/charts | ^1.27.0 | | TypeScript | ~5.9 | | Node.js | >=20 |

Resources

• GitHub Repository
• Storybook / Interactive Docs
• Component Usage Reference
• Changelog
• Issue Tracker
• Contributing Guide

License

MIT — Maintained by Assistanz Networks Pvt Ltd