@3dsource/source-ui-native 1.0.15 → 1.0.18

package/README.md

@@ -1,10 +1,12 @@
 # @3dsource/source-ui-native
 
-### A bunch of native ui elements
+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 3dsource applications.
 
-## Installation
+## 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.
 
-### add a library
+## Installation
 
 ```shell
   npm i @3dsource/source-ui-native
@@ -12,21 +14,72 @@
 
 ## Usage
 
-#### import needed styles in your main styles file
+### Importing Styles
+
+Add the following import to your main styles file:
 
 ```scss
 @use '../node_modules/@3dsource/source-ui-native/styles/source.ui.native.scss';
 ```
 
-_List of native ui elements_
-
-- [source-badge](src/lib/components/source-badge)
-- [source-banner](src/lib/components/source-banner)
-- [source-button](src/lib/components/source-button)
-- [source-copyright](src/lib/components/source-copyright)
-- [source-divider](src/lib/components/source-divider)
-- [source-hint](src/lib/components/source-hint)
-- [source-icon-button](src/lib/components/source-icon-button)
-- [source-loading](src/lib/components/source-loading)
-- [source-logo-loading](src/lib/components/source-logo-loading)
-- [source-slider](src/lib/components/source-slider)
+### Using Components
+
+The components can be used directly in your HTML:
+
+```html
+<source-button>Click Me</source-button>
+```
+
+## Available Components
+
+### UI Elements
+
+- **[source-badge](src/lib/components/source-badge)** - Display badges and tags
+- **[source-banner](src/lib/components/source-banner)** - Show notification banners
+- **[source-button](src/lib/components/source-button)** - Customizable button component
+- **[source-copyright](src/lib/components/source-copyright)** - Display copyright information
+- **[source-divider](src/lib/components/source-divider)** - Horizontal or vertical dividers
+- **[source-hint](src/lib/components/source-hint)** - Show tooltips and hints
+- **[source-icon-button](src/lib/components/source-icon-button)** - Button with icon
+- **[source-loading](src/lib/components/source-loading)** - Loading indicator
+- **[source-logo-loading](src/lib/components/source-logo-loading)** - Loading indicator with logo
+- **[source-slider](src/lib/components/source-slider)** - Range slider component
+
+## Component Examples
+
+### Button Component
+
+```html
+<source-button variant="primary" size="medium"> Click Me </source-button>
+```
+
+### Badge Component
+
+```html
+<source-badge value="New" color="accent"></source-badge>
+```
+
+### Loading Component
+
+```html
+<source-loading size="large" color="primary"></source-loading>
+```
+
+## Customization
+
+Components can be customized using CSS variables:
+
+```css
+:root {
+  --source-primary-color: #3f51b5;
+  --source-accent-color: #ff4081;
+  --source-warn-color: #f44336;
+}
+```
+
+## Browser Support
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)