Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/capitec/omni-components

Modern UI component library for mobile and web.
https://github.com/capitec/omni-components
ui-library vanilla-js web-components
Last synced: 2 days ago
JSON representation
Modern UI component library for mobile and web.
Host: GitHub
URL: https://github.com/capitec/omni-components
Owner: capitec
License: mit
Created: 2022-07-21T10:54:38.000Z (over 2 years ago)
Default Branch: develop
Last Pushed: 2024-12-09T12:46:05.000Z (13 days ago)
Last Synced: 2024-12-13T02:51:31.803Z (9 days ago)
Topics: ui-library, vanilla-js, web-components
Language: TypeScript
Homepage: https://capitec.github.io/open-source/docs/omni-components/
Size: 57.2 MB
Stars: 24
Watchers: 2
Forks: 8
Open Issues: 26
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project

README

        





  



Omni Components

@capitec/omni-components

Modern UI component library for mobile and web







	

	

	

	





	








	[Introduction]

	[Usage]

	[API Reference]

	[Contributors]

	[License]






---




🚩 View our interactive documentation for more info on component usage and live previews.





[](#introduction)

## Introduction

Omni Components is a collection UI components for mobile and web that enable you to build omni-channel user experience that look great on every size of screen.

Core features of the library include:

- **Framework Agnostic** - Components are delivered as standard HTML [web components](https://developer.mozilla.org/en-US/docs/Web/Web_Components), that can be used in VanillaJS or within any framework, e.g. Lit, React, Vue, Angular, etc.

- **Theming** - Components can be styled globally and individually using CSS properties.

- **Responsive** - The components adapt responsively to the device that they render on to provide contextual user experiences.

- **Mobile Optimized** - We develop for mobile first, and scale up to larger screen sizes from there.

- **Lightweight** - The library is small, tree-shakes well, and comes with minimal dependencies, minimizing bloat to your project.




[](#usage)

## Usage

1️⃣   Install Omni Components in your project.

```bash

npm install '@capitec/omni-components'

```

2️⃣   Import the components you require. See [`INSTALLATION.md`](./INSTALLATION.md) for more detail.

```js

// JS import

import '@capitec/omni-components/button';

// or HTML import

```

3️⃣   Use the component tag in your web page.

```html

```

### 💡 Example

This example shows how to import and use a few common components. Omni Components can be combined with 3rd party libraries, e.g. here we embed a [Google Material Icons](https://fonts.google.com/icons) as a slotted element within a ````.

[CodePen](https://codepen.io/capitec-oss/pen/eYrLaGZ)

```html

    

        

        Omni Components Demo

        

      

        

        

        

        

          import "https://cdn.jsdelivr.net/npm/@capitec/omni-components@esm/dist/button/index.js";

          import "https://cdn.jsdelivr.net/npm/@capitec/omni-components@esm/dist/icon/index.js";

          import "https://cdn.jsdelivr.net/npm/@capitec/omni-components@esm/dist/check/index.js";

          import "https://cdn.jsdelivr.net/npm/@capitec/omni-components@esm/dist/radio/index.js";

          import "https://cdn.jsdelivr.net/npm/@capitec/omni-components@esm/dist/switch/index.js";

          import "https://cdn.jsdelivr.net/npm/@capitec/omni-components@esm/dist/text-field/index.js";

          import "https://cdn.jsdelivr.net/npm/@capitec/omni-components@esm/dist/number-field/index.js";

          import "https://cdn.jsdelivr.net/npm/@capitec/omni-components@esm/dist/password-field/index.js";

          import "https://cdn.jsdelivr.net/npm/@capitec/omni-components@esm/dist/select/index.js";

          document.querySelector('omni-select').items = [

            {"id":"1", "label":"Peter Parker"},

            {"id":"2","label":"James Howlett"},

            {"id":"3", "label":"Tony Stark"},

            {"id":"4","label":"Steve Rodgers"},

            {"id":"5", "label":"Bruce Banner"},

            {"id":"6","label":"Wanda Maximoff"},

            {"id":"7", "label":"TChalla"},

            {"id":"8","label":"Henry P. McCoy"},

            {"id":"9", "label":"Carl Lucas"},

            {"id":"10","label":"Frank Castle"}

          ];

        

      

        :root {

          --omni-theme-primary-color: #005AE0;

          --omni-theme-primary-hover-color: #0052D8;

          --omni-theme-primary-active-color: #004BD1;

        }

        

        body {

          display: flex;

          flex-direction: column;

          justify-content: center;

          align-items: flex-start;

          gap: 20px;

        }

        

        omni-text-field, omni-number-field, omni-password-field, omni-select {

          width: 300px;

        }

      

    

    

        

          

        

        

        

        

        

        

        

        

    

```




[](#api-reference)

## API Reference

Tag NameDescription

[omni-loading-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md)

Loading icon component.

[omni-render-element](/Users/runner/work/omni-components/omni-components/src/render-element/README.md)

Element that defers content rendering to a provided function / promise.

[omni-modal](/Users/runner/work/omni-components/omni-components/src/modal/README.md)

Control to display modal content with optional header and footer content.

[omni-button](/Users/runner/work/omni-components/omni-components/src/button/README.md)

Control that allows an action to be executed.

[omni-alert](/Users/runner/work/omni-components/omni-components/src/alert/README.md)

Component that displays an alert.

[omni-clear-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md)

Clear icon component.

[omni-search-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md)

Search icon component.

[omni-search-field](/Users/runner/work/omni-components/omni-components/src/search-field/README.md)

Search input control.

[omni-chevron-down-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md)

Chevron down icon component.

[omni-more-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md)

More icon component.

[omni-select](/Users/runner/work/omni-components/omni-components/src/select/README.md)

Control to get / set a value within a list of options.

[omni-icon](/Users/runner/work/omni-components/omni-components/src/icon/README.md)

Component that displays an icon.

[omni-color-field](/Users/runner/work/omni-components/omni-components/src/color-field/README.md)

Color input control.

[omni-text-field](/Users/runner/work/omni-components/omni-components/src/text-field/README.md)

Control to input text.

[omni-label](/Users/runner/work/omni-components/omni-components/src/label/README.md)

Label component that renders styled text.

[omni-switch](/Users/runner/work/omni-components/omni-components/src/switch/README.md)

Control to switch a value on or off.

[omni-chevron-left-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md)

Chevron left icon component.

[omni-chevron-right-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md)

Chevron right icon component.

[omni-calendar](/Users/runner/work/omni-components/omni-components/src/calendar/README.md)

Calendar component to set specific date.

[omni-indeterminate-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md)

Indeterminate icon component.

[omni-check-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md)

Check icon component.

[omni-check](/Users/runner/work/omni-components/omni-components/src/check/README.md)

Control that allows a selection to be made.

[omni-close-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md)

Close icon component.

[omni-chip](/Users/runner/work/omni-components/omni-components/src/chip/README.md)

Control that can be used for input, setting attributes, or performing actions.

[omni-arrow-right-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md)

Arrow right icon component.

[omni-backspace-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md)

Backspace icon component.

[omni-caps-off-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md)

Caps off icon component.

[omni-caps-on-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md)

Caps on icon component.

[omni-caps-lock-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md)

Caps lock icon component.

[omni-next-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md)

Next icon component.

[omni-previous-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md)

Previous icon component.

[omni-send-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md)

Send icon component.

[omni-keyboard-button](/Users/runner/work/omni-components/omni-components/src/keyboard/README.md)

An internal keyboard button control used in the keyboard component.

[omni-keyboard](/Users/runner/work/omni-components/omni-components/src/keyboard/README.md)

A responsive on-screen keyboard control component.

[omni-currency-field](/Users/runner/work/omni-components/omni-components/src/currency-field/README.md)

Control to enter a formatted currency value.

[omni-calendar-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md)

A calendar icon component.

[omni-date-picker](/Users/runner/work/omni-components/omni-components/src/date-picker/README.md)

Control to get / set a specific date using a calendar.

[omni-email-field](/Users/runner/work/omni-components/omni-components/src/email-field/README.md)

Email input control, used in forms for input validation and to display correct virtual keyboard on mobile.

[omni-expander](/Users/runner/work/omni-components/omni-components/src/expander/README.md)

Component that groups together content in an expanded box.

[omni-expander-group](/Users/runner/work/omni-components/omni-components/src/expander/README.md)

Layout container that groups expanders.

[omni-hyperlink](/Users/runner/work/omni-components/omni-components/src/hyperlink/README.md)

Control to indicate an action to be executed. Typically used for navigational purposes.

[omni-eye-hidden-icon](src/icons/README.md)

Hidden eye icon component

[omni-eye-visible-icon](src/icons/README.md)

Visible eye icon component.

[omni-lock-closed-icon](src/icons/README.md)

Closed lock icon component.

[omni-lock-open-icon](src/icons/README.md)

Open lock icon component.

[omni-minus-icon](src/icons/README.md)

Minus icon component.

[omni-plus-icon](src/icons/README.md)

Plus icon component.

[omni-number-field](/Users/runner/work/omni-components/omni-components/src/number-field/README.md)

Input control to enter a single line of numbers.

[omni-password-field](/Users/runner/work/omni-components/omni-components/src/password-field/README.md)

Password input control.

[omni-pin-field](/Users/runner/work/omni-components/omni-components/src/pin-field/README.md)

Input control to enter a masked numeric value.

[omni-radio](/Users/runner/work/omni-components/omni-components/src/radio/README.md)

Control to select a single value from a group of values.

[omni-radio-group](/Users/runner/work/omni-components/omni-components/src/radio/README.md)

Control to group radio components for single selection

[omni-tab](/Users/runner/work/omni-components/omni-components/src/tab/README.md)

Control that can be used to display slotted content, for use within an Tab Group component.

[omni-tab-header](/Users/runner/work/omni-components/omni-components/src/tab/README.md)

Control that can be used to display custom slotted content, for use within Tab Group component with associated Tab component.

[omni-tab-group](/Users/runner/work/omni-components/omni-components/src/tab/README.md)

Component that displays content in tabs.

[omni-toast-stack](/Users/runner/work/omni-components/omni-components/src/toast/README.md)

A toast container that animates in and stacks toast elements.

[omni-toast](/Users/runner/work/omni-components/omni-components/src/toast/README.md)

Component to visually notify a user of a message.




[](#contributors)

## Contributors

Made possible by these fantastic people. 💖

See the [`CONTRIBUTING.md`](./CONTRIBUTING.md) guide to get involved.

    

        

            

            


            _{chromaticWaster}

        

    

    

        

            

            


            _BOTLANNER

        

    

    

        

            

            


            _stefan505

        

    

    

        

            

            


            _jn42lm1

        

    

    

        

            

            


            _capitec-oss

        

    

    

        

            

            


            _Makhubedu

        

    

    

        

            

            


            _wscheffer

        

    




[](#license)

## License

	

Licensed under [MIT](https://opensource.org/licenses/MIT).




















    

        

        

    



We are hiring 🤝 Join us! 🇿🇦



    https://www.capitecbank.co.za/about-us/careers