Liquid Oxygen is a UI component library based on the Liquid Design System, focusing on accessibility and interoperability. It is built with Stencil.js and contains, inter alia, CSS Components and Web Components, bundled in several bundle formats, which you can use in a wide variety of platforms and projects.
Using Liquid Oxygen in your project is the recommended way to comply with the Liquid Design Standards and ensures a consistent look and feel across all related applications. You can read more about why you should use Liquid Oxygen on the Why Liquid Oxygen page.
Why Web Components? #
Web Components are ideal for building reusable, framework-agnostic and future-proof UI components. They are part of the Web standard and are supported by all relevant browsers.
The framework-agnostic nature of Web Components allows you to use Liquid Oxygen in any framework (e.g. React, Vue, Solid or Svelte) or even without a framework. This way, Liquid Oxygen does not demand any specific technology, and you can use the stack which fits your project best.
Although Liquid Oxygen components are Web Components, we provide first class support for React.
Getting Started #
You can add Liquid Oxygen easily to your existing project. It integrates seamlessly with any framework or library. See our comprehensive guides and detailed explanation of how to integrate Liquid Oxygen into your project.
Sandbox apps #
Besides the guides, we have created several sandbox apps to demonstrate the usage of Liquid Oxygen in various additional frameworks and libraries. You can find them on the Sandbox apps page.
Quick start #
You are curious and just want to try out Liquid Oxygen? Fastest way to get started with Liquid Oxygen is to use the jsdelivr CDN.
Just set the liquid asset path and import the stylesheet and the loader module.
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@emdgroup-liquid/liquid/dist/css/liquid.css"
/>
<script type="module">
// Import the loader
import { defineCustomElements } from 'https://cdn.jsdelivr.net/npm/@emdgroup-liquid/liquid/dist/loader/index.js'
// Register the custom elements
defineCustomElements()
</script>Now you can use the Liquid Oxygen Web Components in your website.
<ld-button>Click me</ld-button>See the full example in the Liquid + CDN Sandbox.
Although this is the fastest way to add Liquid Oxygen components to a website, we recommend using Liquid Oxygen together with a frontend library (e.g. React, Vue) and a bundler (e.g. vite, webpack).
Design #
Find the Liquid Design System on Figma. You can use the Figma file to get a better understanding of the design system and its usage.
Links #
Contributing #
If you'd like to contribute to the project, please read our code of conduct. Then proceed to the contributing docs.
License #
Liquid Oxygen is available under a custom license which restricts its usage to applications created for or by Merck KGaA, Darmstadt, Germany as well as its vendors.