Unified Saudi Platform UI

Non-official UI Components Library for the Unified Saudi Platform Design Code

This library provides lightweight and reusable web components aligned with the Unified Saudi Platform Design Code, built with Stencil.

Installation

Install the package using NPM:

npm install @ramy-ahmed/usp-ui

Usage

Import the components in your project:

1. Add the following script to your HTML or app entry point:

<script type="module" src="https://cdn.jsdelivr.net/npm/@ramy-ahmed/usp-ui/dist/usp-ui/usp-ui.esm.js"></script>

2. Add the following style to your HTML or app entry point:

<script type="module" src="https://cdn.jsdelivr.net/npm/@ramy-ahmed/usp-ui/dist/usp-ui/usp-ui.css"></script>

3. Use the components in you HTML:

<usp-btn>Click Me</usp-btn>

Components

• <usp-btn>: Button component
• More components coming soon!

Future development

This project is continuously evolving to meet the needs of developers and align with modern standards. Here are some planned future developments:

• New Components:
  Additional reusable UI components, such as:

  • Navigation menus.
  • Form controls (e.g., input fields).

• Accessibility Enhancements:
  Improved support for accessibility to ensure compliance with international standards.

• Theme Customization:
  Add support for light and dark themes with customizable design tokens.

• Framework Integration:
  Provide specific documentation and wrappers for popular frameworks like Angular, React, and Vue.

• Testing Improvements:
  Enhance component tests with more extensive coverage using modern testing tools.

• Performance Optimizations:
  Minimize bundle sizes and improve rendering performance for larger-scale applications.

We encourage contributors to join us in shaping the future of this library. If you have suggestions or want to contribute, please feel free to submit an issue or pull request on our GitHub repository.

Font guidelines

To achieve maximum consistency with the Unified Design Standards, feel free to use IBM Plex Sans Arabic font. It is an open-source font available on Google Fonts.

For further guidance on how to use this font, please refer to the Google Fonts official website.

Contributors

Thanks to the following contributors for their efforts in building and maintaining this project:

• Amr Eissa
  

• Ramy Ahmed
  

Disclaimer

This project is provided "as is," without any warranties, whether express or implied. The contributors assume no responsibility for any damages resulting from the use of this code.

This library is an open-source project created for educational and development purposes only. The use of this code is entirely at the user's own responsibility.

License

This project is licensed under the MIT License.