@3dsource/source-ui-native

A collection of native UI components for web applications, designed to be used with or without Angular. These components provide a consistent design system for 3D Source applications.

Overview

The Source UI Native library provides framework-agnostic UI components that can be used in any web application. These components are built with vanilla JavaScript and CSS, making them lightweight and performant.

Installation

  npm i @3dsource/source-ui-native

Usage

Importing Styles

Add the following import to your main styles file:

@use '../node_modules/@3dsource/source-ui-native/styles/source.ui.native.scss';

Using Components

The components can be used directly in your HTML:

<src-button>Click Me</src-button>

Available Components

UI Elements

• src-badge - Display badges and tags
• src-banner - Show notification banners
• src-button - Customizable button component
• src-copyright - Display copyright information
• src-divider - Horizontal divider for lists
• src-hint - Show hints or error messages
• src-icon-button - Display icon button
• src-loading - Loading indicator
• src-logo-loading - Loading indicator with logo
• src-modal - Modal element for simple modals
• src-slider - Simple slider component
• Basic styles for lists, form elements, overlays

Component Examples

Button Component

<src-button weight="primary" size="md"> Click Me </src-button>

Badge Component

<src-badge context="info">Info</src-badge>

Loading Component

<src-loading [size]="64" backgroundStrokeColor="#e0f8ee" progressStrokeColor="#007a5c"></src-loading>

Customization

Components can be customized by overriding global CSS variables or by setting values for particular components variables. Whole table of CSS custom properties is available in the documentation site

:root {
  --src-color-brand-500: #3f51b5;
  --src-color-text-default: #fff;
}

.src-button {
  --srcButtonBgColor: #3f51b5;
  --srcButtonBorderRadius: 6px;
  --srcButtonFontColor: #fff;
  --srcButtonPaddings: 8px 16px;
}

You can see all available options and examples in documentation

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)