# 3D Source UI Component Libraries > Two Angular UI component libraries by 3D Source: `@3dsource/source-ui-native` (lightweight, zero-dependency UI primitives) and `@3dsource/source-ui` (higher-level components built on Angular CDK/Material). Both use Angular 19+ signals API (`input()`, `output()`), zoneless change detection, `ViewEncapsulation.None`, and CSS custom properties (`--src-*`) for theming. ## Key concepts - All components use the `src-` selector prefix (e.g. ``, ``) - Inputs use Angular signals: `input()`, `input.required()`, `output()` - Enum-like inputs are typed as union types derived from `as const` objects (e.g. `SourceButtonAppearanceKeys` = `"plain" | "inline" | "filled" | "default"`) - Design tokens are SCSS CSS custom properties with `--src-` prefix, organized by category: color (light/dark themes), layout (responsive breakpoints), typeface, UI sizing - `@3dsource/source-ui` depends on `@3dsource/source-ui-native` — always install both when using source-ui - Modals have TWO approaches: native ``-based via `SourceModalElementService` (source-ui-native, no CDK needed) and CDK Dialog-based via `Dialog.open(SourceModalComponent)` (source-ui, needs `@angular/cdk/dialog`) - Popovers are opened via `SourcePopoverService`, not template binding - The library provides TWO levels of styling: Angular Components (with `input()/output()` API) AND CSS-only Source Elements (BEM classes on native HTML tags — no Angular imports needed) - The `section_3dsourcecom` class must be placed on the root app container element for Source UI styles to apply. Place it on `` inner wrapper, the root `
`, or `` as a last resort. Do NOT place it on ``. Example: `` or `
` as the first child of ``. - STRICT RULE: Do NOT use Tailwind CSS or any utility-first CSS framework. All styling must use Source UI design tokens (`--src-*` CSS custom properties), Source Element BEM classes (`src-*`), and standard CSS/SCSS. Never generate Tailwind classes (`flex`, `p-4`, `bg-blue-500`, etc.). ## Library selection priority STRICT RULE: Only install `@3dsource/source-ui` when Angular Material components (form fields, checkbox, radio, select, autocomplete, toggle) or CDK-based features (popover, color-picker, tabs, tooltip, CDK modal) are explicitly needed. Default to `@3dsource/source-ui-native` only. Choose the appropriate library based on your project type: 1. **Non-Angular projects** (Lovable, Webflow, plain HTML, React, Vue, any non-Angular framework) → Install `@3dsource/source-ui-native` via npm. Import ONLY the compiled CSS file: `@3dsource/source-ui-native/styles/source-ui-native.min.css`. Use Source Elements (BEM CSS classes on native HTML tags). Do NOT install `@3dsource/source-ui` — it requires Angular and will not work. 2. **Angular without CDK/Material** → Install only `@3dsource/source-ui-native`. Use Angular components (`SourceButtonComponent`, `SourceBadgeComponent`, etc.) + Source Elements. 3. **Angular with CDK/Material** → Install both `@3dsource/source-ui-native` and `@3dsource/source-ui`. This gives access to color-picker, popover, tabs, tooltip, CDK modal, and styled Material form fields. ## Libraries ### @3dsource/source-ui-native v3.2.0 Lightweight UI primitives with zero dependencies (only `tslib`). **No Angular peer dependency** — works without Angular entirely. Can be used in any project (React, Vue, plain HTML, Lovable, etc.) by importing just the compiled CSS stylesheet. Includes: - **Angular Components** (require Angular): badge, banner, button, copyright, divider, hint, icon-button, loading, logo-loading, modal-element, slider - **Source Elements (CSS-only, no Angular needed)**: button, icon-button, input, select, textarea, label, list, checkbox, radio, toggle, form layout, modal, popover — pure CSS classes applied to standard HTML elements ### @3dsource/source-ui v3.1.1 Higher-level components built on top of Angular CDK and Angular Material. **Requires Angular 20+** due to the `ngx-scrollbar` dependency chain. Provides custom styling for Material form fields (input, select, autocomplete, checkbox, radio, toggle) to match the Source UI design system. Peer dependencies: `@3dsource/source-ui-native >=2.0.0`, `@angular/core >=19.0.0`, `@angular/material >=19.0.0`, `ngx-scrollbar >=19.0.0` (effectively requires Angular 20+), `swiper >=11.2.6`. Components: color-picker, popover, slider-group, tabs, tooltip, toastr styling, Material form field styling. **Important:** When using `@3dsource/source-ui`, you must provide `MAT_FORM_FIELD_DEFAULT_OPTIONS` with `{ appearance: 'outline' }` globally in your app config for correct form field styling. ## Component API reference Machine-readable JSON API docs for each component. Each file contains: `name`, `selector`, `library`, `kind`, `inputs[]` (with `name`, `type`, `description`, `resolvedValues`, `defaultValue`, `isRequired`, `alias`), `outputs[]`. ### @3dsource/source-ui-native components - [SourceBadgeComponent API](https://preview.3dsource.com/front-libraries/master/docs/api/badge.json): `src-badge` — Inline status indicator. Use for labels, tags, counters, status markers. Supports `context` (info/success/warning/error) and `size` (sm/md/lg). - [SourceBannerComponent API](https://preview.3dsource.com/front-libraries/master/docs/api/banner.json): `src-banner` — Full-width notification bar. Use for page-level alerts, warnings, info messages. Supports `context` variants for severity. - [SourceButtonComponent API](https://preview.3dsource.com/front-libraries/master/docs/api/button.json): `src-button` — Primary interactive element. Use when you need Angular bindings (loading state, disabled via signal, programmatic control). Supports `appearance` (plain/inline/filled/default), `weight` (primary/secondary/ghost), `context` (info/success/error), `size` (sm/md/lg/xl). For simple HTML buttons without Angular — use Source Element `src-button` CSS class instead. - [SourceCopyrightComponent API](https://preview.3dsource.com/front-libraries/master/docs/api/copyright.json): `src-copyright` — "Powered by 3D Source" branding link. Use in footers. Supports `isCollapsed` toggle. - [SourceDividerComponent API](https://preview.3dsource.com/front-libraries/master/docs/api/divider.json): `src-divider` — Visual separator line. Use between content sections or list groups. - [SourceHintComponent API](https://preview.3dsource.com/front-libraries/master/docs/api/hint.json): `src-hint` — Contextual message below form fields or content. Use for validation messages, helper text. Supports `context` for severity (info/success/warning/error). - [SourceIconButtonComponent API](https://preview.3dsource.com/front-libraries/master/docs/api/icon-button.json): `src-icon-button` — Icon-only action button. Use for toolbars, compact actions. Supports `counter` for notification badges, and same appearance/weight/size/context as button. For simple HTML icon buttons — use Source Element `src-icon-button` CSS class instead. - [SourceLoadingComponent API](https://preview.3dsource.com/front-libraries/master/docs/api/loading.json): `src-loading` — Circular SVG progress/loading indicator. Use for inline loading states. Supports `size`, `progress`, custom stroke colors. - [SourceLogoLoadingComponent API](https://preview.3dsource.com/front-libraries/master/docs/api/logo-loading.json): `src-logo-loading` — Full-screen branded loading animation with 3D Source logo. Use for app/page-level loading states. - [SourceModalElementComponent API](https://preview.3dsource.com/front-libraries/master/docs/api/modal-element.json): `src-modal-element` — Lightweight modal using native HTML `` element. No Angular CDK dependency. Opened via `SourceModalElementService.open(data)` where `data: SourceModalElementData` configures title, content, context, footer buttons. Requires `` in app root. For advanced modals with CDK Dialog features (custom component projection, scrollbar) — use `SourceModalComponent` from `@3dsource/source-ui`. - [SourceSliderComponent API](https://preview.3dsource.com/front-libraries/master/docs/api/slider.json): `src-slider` — Low-level range slider. Supports horizontal/vertical orientation, ticks, custom thumb template, min/max/step. For slider with input field and units — use `src-slider-group` from `@3dsource/source-ui`. ### @3dsource/source-ui components - SourceModalComponent: `src-modal` — Full-featured modal using Angular CDK Dialog. Open via `inject(Dialog).open(SourceModalComponent, { data: config })` where `config: SourceModalData`. Supports context variants (info/success/error), grouped footer buttons, custom button configs, ngx-scrollbar. Can also open any custom component as modal: `dialog.open(YourComponent)` with `src-modal` CSS classes for consistent styling. - [SourceColorPickerComponent API](https://preview.3dsource.com/front-libraries/master/docs/api/color-picker.json): `src-color-picker` — HEX color picker with palette grid and hue slider. Use for color selection in configuration UIs. - [SourcePopoverTriggerComponent API](https://preview.3dsource.com/front-libraries/master/docs/api/popover-trigger.json): `src-popover-trigger` — Clickable trigger element for popover. Popovers are opened via `SourcePopoverService.open()` passing a component reference and anchor element. - [SourceSliderGroupComponent API](https://preview.3dsource.com/front-libraries/master/docs/api/slider-group.json): `src-slider-group` — Slider with synchronized numeric input field, unit labels, and range display. Use for numeric value adjustment with precision input. Wraps `src-slider` from source-ui-native. - [SourceTabsComponent API](https://preview.3dsource.com/front-libraries/master/docs/api/tabs.json): `src-tabs` — Tab container supporting swiper mode (many tabs), full-width, and compact layouts. Contains `src-tab` panels. Uses Swiper for scrollable tab lines. - [SourceTabLineComponent API](https://preview.3dsource.com/front-libraries/master/docs/api/tab-line.json): `src-tab-line` — Standalone tab navigation bar (without tab panels). Use when you need only the tab line for custom navigation. - [SourceTabComponent API](https://preview.3dsource.com/front-libraries/master/docs/api/tab.json): `src-tab` — Individual tab panel inside `src-tabs`. Each tab has a label and content projection. - [SourceTooltipDirective API](https://preview.3dsource.com/front-libraries/master/docs/api/tooltip.json): `[srcTooltip]` — Directive for hover/focus tooltips. Apply to any element: `