@3dsource/source-ui

@3dsource/source-ui

A comprehensive library of Angular UI components designed specifically for 3D visualization applications. This library extends Angular Material with specialized components for 3D content interaction.

Overview

The Source UI library provides Angular components that are optimized for 3D applications, offering:

• Specialized UI controls for 3D scene manipulation
• Integration with Angular Material design system
• Responsive and accessible components
• Consistent styling across 3D Source applications

Installation

Prerequisites

• Angular 19+
• Angular Material
• @3dsource/source-ui-native -- required peer dependency; provides the base design tokens and styles that Source UI components rely on

Peer Dependencies

This library requires the following peer dependencies:

{
  "@angular/common": ">=19.0.0",
  "@angular/core": ">=19.0.0",
  "@angular/material": ">=19.0.0",
  "@3dsource/source-ui-native": ">=2.0.0",
  "swiper": ">=11.2.6"
}

Library Installation

  npm i @3dsource/source-ui

Usage

Style imports

Import both styles for SourceUI Native and SourceUI in your style.scss

// Source UI Native
@use '../node_modules/@3dsource/source-ui-native/styles/source.ui.native.scss' as source-ui-native;
// Source UI
@use '../node_modules/@3dsource/source-ui/styles/source.ui.scss' as source-ui;

Material settings

For correct styling provide neccessary outline option for form elements in your appConfig

{
  provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
  useValue: { appearance: 'outline' },
}

Import

Import desired component and use it in template as described in components documentation.

import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { SourceSliderGroupComponent } from '@3dsource/source-ui';

@Component({
  selector: 'app-example',
  imports: [SourceSliderGroupComponent],
  template: ` <src-slider-group label="Slider Group" [min]="0" [max]="100" [step]="1" units="" [showRange]="true" [value]="value()" (groupValueChange)="onValueChange($event)" /> `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ExampleComponent {
  value = signal(15);

  onValueChange(value: number) {
    this.value.set(value);
  }
}

Available Components and Examples

• src-colorpicker - Highly customizable colorpicker
• src-modal - Service modal component
• src-popover - Popover with trigger or Service
• src-slider-group - Advanced variant of slider
• src-tabs - Tabs in two options of usage
• src-tooltip - Directive for custom tooltips

Customization

Customization provided in the same way as in SourceUI Native. Whole table of CSS custom properties is available in the documentation site.

You can see all available options and examples in documentation