Omni Components Demo

Logo

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

```
[](#api-reference) ## API Reference

Tag Name	Description
[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