@ng-solid/design-system

Arvisfy is the default ng-solid design-system preset. It combines Angular standalone components, Tailwind CSS composition from SCSS, BEM ns-* class contracts and a strict three-tier token architecture.

Installation

pnpm add @ng-solid/design-system @ng-solid/icons
pnpm add -D tailwindcss @tailwindcss/postcss

Tailwind is optional unless the application consumes the semantic utility bridge. Configure @tailwindcss/postcss in the application's PostCSS setup.

Import the Tailwind semantic bridge once in the application stylesheet:

@import '@ng-solid/design-system/themes/tailwind.css';

Arvisfy assumes box-sizing: border-box throughout, and that bridge carries the rule for it. See the packaged themes/README.md for why it's copied literally and what that means if you don't import it.

Register Arvisfy in the Angular application configuration:

import { Arvisfy, provideNsTheme } from '@ng-solid/design-system';

export const appConfig = {
  providers: [provideNsTheme({ preset: Arvisfy, colorScheme: 'system' })]
};

system follows prefers-color-scheme. Explicit light and dark choices are persisted by NsThemeService and applied without reloading:

import { inject } from '@angular/core';
import { NsThemeService } from '@ng-solid/design-system';

const theme = inject(NsThemeService);
theme.setScheme('dark');

Extend the preset

Use defineNsPreset so custom presets retain the primitive → semantic → component dependency contract:

import { defineNsPreset, Arvisfy } from '@ng-solid/design-system';

export const ProductTheme = defineNsPreset(Arvisfy, {
  name: 'product',
  primitive: {
    color: {
      brand: { 500: '#0052ff' }
    }
  },
  semantic: {
    colorScheme: {
      light: { color: { primary: '{primitive.color.brand.500}' } },
      dark: { color: { primary: '{primitive.color.brand.500}' } }
    }
  },
  components: {
    button: { borderColor: '{semantic.color.primary}' }
  }
});

See the packaged themes/README.md for the Arvisfy design principles and token rules.

Components

Components are imported directly from the package:

import {
  NsButtonComponent,
  NsDatePickerComponent,
  NsInputComponent,
  NsInputGroupAddonComponent,
  NsInputGroupComponent,
  NsModalComponent
} from '@ng-solid/design-system';

<ns-button variant="primary">Guardar cambios</ns-button>

<ns-input-group>
  <ns-input-group-addon>$</ns-input-group-addon>
  <ns-input formControlName="amount" ariaLabel="Amount" />
  <ns-input-group-addon>USD</ns-input-group-addon>
</ns-input-group>

ns-input-group is only a layout wrapper. It has no label or wrap inputs; put labels and form directives on the projected ns-input control.

Application templates should style their own layout with BEM ns-* classes. Library component templates never expose Tailwind utilities directly.

ns-button uses projected content and the semantic primary, secondary, tertiary, success, and danger variants; color, label, and the former theme input are not part of its API. NsModalComponent supports projected modal content or a typed contentComponent supplied through NsModalService; nsTemplate no longer registers templates with a modal reference.

The package's primary component API is:

• NsAccordionComponent, NsAlertComponent, NsAvatarComponent, NsBadgeComponent, NsBreadcrumbsComponent, NsButtonComponent, NsButtonGroupComponent, NsCardComponent, NsCheckboxComponent, NsChipComponent, NsDropdownComponent.
• NsDatePickerComponent, NsDateRangePickerComponent, NsDescriptionComponent, NsDrawerComponent, NsInputComponent, NsInputGroupComponent, NsInputCodeComponent, NsLinkComponent, NsMeterComponent, NsModalComponent, NsInputNumberComponent, NsPaginationComponent, NsPopoverComponent, NsProgressBarComponent.
• NsRadioComponent, NsRadioGroupComponent, NsInputSearchComponent, NsDividerComponent, NsSkeletonComponent, NsSliderComponent, NsSurfaceComponent, NsSwitchComponent, NsTabsComponent, NsTagGroupComponent, NsTextAreaComponent, NsToastComponent, and NsTooltipComponent.

Composition helpers such as NsAccordionItemComponent, NsBreadcrumbItemComponent, NsCardHeaderComponent, NsCardBodyComponent, NsCardFooterComponent, NsDropdownItemDirective, NsTabComponent, NsTagComponent, and NsTooltipDirective are exported from the same entry point. The pre-refactor Bootstrap-based dropdown API and its legacy toast contracts are not exported.