@odx/web-components

@odx/web-components provides ready-to-use custom elements for building unified and accessible UIs, forming the core of the ODX Design System.

Features

• Components: 80+ reusable web components.
• Localization: Built-in support for localization and internationalization.
• Dark Mode Support: Built-in dark mode support for better user experience in low-light environments.
• Breakpoint System: A responsive breakpoint system to create adaptable layouts across various devices.
• Browser Support: Baseline 2024

Install

PNPM

pnpm add @odx/web-components @odx/foundation @odx/icons

NPM

npm i @odx/web-components @odx/foundation @odx/icons --save 

We depend on the Lit package for building web elements because it offers a lightweight, efficient framework with a simple syntax for creating fast, reusable elements. Its powerful templating system ensures high performance and seamless user experience. Lit is also highly interoperable, making it easy to integrate with other frameworks and libraries.

Setup

You have to follow the setup instructions for the @odx/foundation package to ensure that the base styles and fonts are available.

Once installed, you can import the components and styles into your project:

JavaScript

// Register icon component
import '@odx/icons';
// Load core icon set
import '@odx/icons/core';

// Load global styles (in JS)
import '@odx/web-components/styles';

// Load all components
import '@odx/web-components/load';

// Load single components
import '@odx/web-components/load/button';
import '@odx/web-components/load/card';
// ...

CSS

/* Load global styles (in CSS) */
@import '@odx/web-components/styles'; /* @odx/web-components/dist/styles.css */

Framework integration

We currently do not provide any framework specific integration for the @odx/web-components package. However, you can easily integrate the web components into your framework of choice by following the standard practices for using web components in that framework.

Angular Example

import { Directive, input } from '@angular/core';
import { OdxTitle } from '@odx/web-components/title';

@Directive({
  selector: 'odx-title',
  host: {
    '[attr.level]': 'level() || null',
    '[attr.size]': 'size() || null'
  },
})
export class Title {
  level = input<OdxTitle['level']>();
  size = input<OdxTitle['size']>();
}

React Example

See Lit documentation for more information on how to use web components in React.

Documentation

For detailed documentation on how to use the @odx/web-components package, including examples and best practices, please visit our storybook documentation.