omni-components

KO | EN

gitlite — search

#python #ai #go #golang #machine-learning #deep-learning #docker #macos #cli #vue #pytorch #mcp #openai #open-source

omni-components

(★ 25)

Modern UI component library for mobile and web.

omni-components Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<br>

<h3 align="center">Omni Components</h3>
<p align="center"><strong><code>@capitec/omni-components</code></strong></p>
<p align="center">Modern UI component library for mobile and web</p>

<br />

<br/>

<p align="center">
	[<a href="#introduction">Introduction</a>]
	[<a href="#usage">Usage</a>]
	[<a href="#api-reference">API Reference</a>]
	[<a href="#contributors">Contributors</a>]
	[<a href="#license">License</a>]
</p>

<br/>

---

<br />

<p align="center">🚩 View our <a href="https://capitec.github.io/open-source/docs/omni-components">interactive documentation</a> for more info on component usage and live previews.</p>

<br>

[](#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.

<br>

[](#usage)

## Usage

1️⃣ &nbsp; Install Omni Components in your project.

```bash
npm install '@capitec/omni-components'
```

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

```js
// JS import
import '@capitec/omni-components/button';

// or HTML import
<script type="module" src="/node_modules/omni-components/dist/button/button.js" ></script>
```

3️⃣ &nbsp; Use the component tag in your web page.
```html
<omni-button type="primary" label="Button"></omni-button>
```

### 💡 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 ``<omni-button>``.

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

```html
<!DOCTYPE html>

<title>Omni Components Demo</title>

<script type="module">
          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"}
          ];
        </script>

<omni-check label="Check" error="Required"></omni-check>

<omni-radio label="Radio"></omni-radio>

<omni-switch label="Switch"></omni-switch>

<omni-text-field label="Text Field"></omni-text-field>

<omni-number-field label="Number Field"></omni-number-field>

<omni-password-field label="Password Field"></omni-password-field>

<omni-select label="Select" display-field="label" idfield="id"></omni-select>
    </body>
</html>
```

<br>

[](#api-reference)

## API Reference

<table style="max-width: 800px;"><thead><tr><th style="width: 100px;">Tag Name</th><th style="width: 600px;">Description</th></tr></thead><tbody><tr><td>

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

</td><td>

Loading icon component.

</td></tr><tr><td>

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

</td><td>

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

</td></tr><tr><td>

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

</td><td>

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

</td></tr><tr><td>

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

</td><td>

Control that allows an action to be executed.

</td></tr><tr><td>

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

</td><td>

Component that displays an alert.

</td></tr><tr><td>

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

</td><td>

Clear icon component.

</td></tr><tr><td>

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

</td><td>

Search icon component.

</td></tr><tr><td>

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

</td><td>

Search input control.

</td></tr><tr><td>

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

</td><td>

Chevron down icon component.

</td></tr><tr><td>

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

</td><td>

More icon component.

</td></tr><tr><td>

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

</td><td>

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

</td></tr><tr><td>

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

</td><td>

Component that displays an icon.

</td></tr><tr><td>

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

</td><td>

Color input control.

</td></tr><tr><td>

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

</td><td>

Control to input text.

</td></tr><tr><td>

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

</td><td>

Label component that renders styled text.

</td></tr><tr><td>

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

</td><td>

Control to switch a value on or off.

</td></tr><tr><td>

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

</td><td>

Chevron left icon component.

</td></tr><tr><td>

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

</td><td>

Chevron right icon component.

</td></tr><tr><td>

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

</td><td>

Calendar component to set specific date.

</td></tr><tr><td>

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

</td><td>

Indeterminate icon component.

</td></tr><tr><td>

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

</td><td>

Check icon component.

</td></tr><tr><td>

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

</td><td>

Control that allows a selection to be made.

</td></tr><tr><td>

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

</td><td>

Close icon component.

</td></tr><tr><td>

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

</td><td>

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

</td></tr><tr><td>

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

</td><td>

Arrow right icon component.

</td></tr><tr><td>

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

</td><td>

Backspace icon component.

</td></tr><tr><td>

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

</td><td>

Caps off icon component.

</td></tr><tr><td>

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

</td><td>

Caps on icon component.

</td></tr><tr><td>

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

</td><td>

Caps lock icon component.

</td></tr><tr><td>

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

</td><td>

Next icon component.

</td></tr><tr><td>

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

</td><td>

Previous icon component.

</td></tr><tr><td>

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

</td><td>

Send icon component.

</td></tr><tr><td>

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

</td><td>

An internal keyboard button control used in the keyboard component.

</td></tr><tr><td>

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

</td><td>

A responsive on-screen keyboard control component.

</td></tr><tr><td>

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

</td><td>

Control to enter a formatted currency value.

</td></tr><tr><td>

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

</td><td>

A calendar icon component.

</td></tr><tr><td>

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

</td><td>

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

</td></tr><tr><td>

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

</td><td>

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

</td></tr><tr><td>

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

</td><td>

Component that groups together content in an expanded box.

</td></tr><tr><td>

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

</td><td>

Layout container that groups expanders.

</td></tr><tr><td>

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

</td><td>

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

</td></tr><tr><td>

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

</td><td>

Hidden eye icon component

</td></tr><tr><td>

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

</td><td>

Visible eye icon component.

</td></tr><tr><td>

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

</td><td>

Closed lock icon component.

</td></tr><tr><td>

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

</td><td>

Open lock icon component.

</td></tr><tr><td>

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

</td><td>

Minus icon component.

</td></tr><tr><td>

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

</td><td>

Plus icon component.

</td></tr><tr><td>

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

</td><td>

Input control to enter a single line of numbers.

</td></tr><tr><td>

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

</td><td>

Password input control.

</td></tr><tr><td>

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

</td><td>

Input control to enter a masked numeric value.

</td></tr><tr><td>

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

</td><td>

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

</td></tr><tr><td>

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

</td><td>

Control to group radio components for single selection

</td></tr><tr><td>

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

</td><td>

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

</td></tr><tr><td>

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

</td><td>

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

</td></tr><tr><td>

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

</td><td>

Component that displays content in tabs.

</td></tr><tr><td>

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

</td><td>

A toast container that animates in and stacks toast elements.

</td></tr><tr><td>

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

</td><td>

Component to visually notify a user of a message.

</td></tr></tbody></table>

<br>

[](#contributors)

## Contributors

Made possible by these fantastic people. 💖

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

<table>
<tr>
    <td align="center">
        <a href="https://github.com/chromaticWaster">
            <img src="https://avatars.githubusercontent.com/u/22874454?v=4" width="100;" alt="chromaticWaster"/>
            <br />
            <sub><b>chromaticWaster</b></sub>
        </a>
    </td>
    <td align="center">
        <a href="https://github.com/BOTLANNER">
            <img src="https://avatars.githubusercontent.com/u/16349308?v=4" width="100;" alt="BOTLANNER"/>
            <br />
            <sub><b>BOTLANNER</b></sub>
        </a>
    </td>
    <td align="center">
        <a href="https://github.com/stefan505">
            <img src="https://avatars.githubusercontent.com/u/10812446?v=4" width="100;" alt="stefan505"/>
            <br />
            <sub><b>stefan505</b></sub>
        </a>
    </td>
    <td align="center">
        <a href="https://github.com/jn42lm1">
            <img src="https://avatars.githubusercontent.com/u/54233338?v=4" width="100;" alt="jn42lm1"/>
            <br />
            <sub><b>jn42lm1</b></sub>
        </a>
    </td>
    <td align="center">
        <a href="https://github.com/capitec-oss">
            <img src="https://avatars.githubusercontent.com/u/109588738?v=4" width="100;" alt="capitec-oss"/>
            <br />
            <sub><b>capitec-oss</b></sub>
        </a>
    </td>
    <td align="center">
        <a href="https://github.com/Makhubedu">
            <img src="https://avatars.githubusercontent.com/u/43409770?v=4" width="100;" alt="Makhubedu"/>
            <br />
            <sub><b>Makhubedu</b></sub>
        </a>
    </td></tr>
<tr>
    <td align="center">
        <a href="https://github.com/wscheffer">
            <img src="https://avatars.githubusercontent.com/u/16539629?v=4" width="100;" alt="wscheffer"/>
            <br />
            <sub><b>wscheffer</b></sub>
        </a>
    </td></tr>
</table>

<br>

[](#license)

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

<br>
<br>
<hr>
<br>
<br>
<br>
<p align="center">
    <picture>
        <source media="(prefers-color-scheme: dark)" srcset="./.tooling/readme/logos/capitec-logo-white.svg">
        <img alt="Capitec Logo" src="./.tooling/readme/logos/capitec-logo-color.svg" height="28">
    </picture>
</p>
<p align="center">We are hiring 🤝 Join us! 🇿🇦</p>
<p align="center">
    <a href="https://www.capitecbank.co.za/about-us/careers">https://www.capitecbank.co.za/about-us/careers</a>
</p>

omni-components

omni-components Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

omni-components

omni-components Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README