# @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 used at Dräger.
### Features
- **Components**: 100+ reusable web components.
- **Accessibility**: All components are designed with accessibility in mind, following WCAG guidelines to ensure AA compliance.
- **Dark Mode Support**: Built-in dark mode support for better user experience in low-light environments.
- **Localization**: Built-in support for localization and internationalization.
- **Browser Support**: Baseline 2024
### Install
[
](https://npmjs.org/package/@odx/web-components)
##### PNPM
```bash
pnpm add @odx/web-components @odx/foundation @odx/icons
```
##### NPM
```bash
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. Lit is also highly interoperable, making it easy to integrate with other frameworks and libraries.
>
> [
](https://npmjs.org/package/lit)
### 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
```js
// 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
```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
```typescript
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();
size = input();
}
```
#### 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, please visit our storybook documentation.