• Introduction
    • Why Liquid
    • Getting started
  • Guides
    • CSS vs. Web Components
    • Component assets
    • Type checking and intellisense
    • Server-side rendering
    • Event handling
    • Form validation
    • Framework integrations
      • React bindings
      • Vue bindings
    • Tailwind CSS integration
    • Design tokens
    • Sandbox applications
    • Troubleshooting
    • FAQ
  • Globals
    • Animations
    • Border-radius
    • Colors
    • Focus
    • Fonts
    • Shadows
    • Spacings
    • Theming
    • Typography
  • Components
    • Accordion
      • Accordion Panel
      • Accordion Section
      • Accordion Toggle
    • Background Cells
    • Badge
    • Breadcrumbs
      • Crumb
    • Button
    • Card
      • Card Stack
    • Checkbox
    • Circular Progress
    • Cookie Consent
    • Header
    • Icon
    • Input
    • Input Message
    • Label
    • Link
    • Loading Indicator
    • Modal
    • Notice
    • Notification
    • Pagination
    • Progress
    • Radio Button
    • Screen Reader Live
    • Screen Reader Only
    • Select
      • Option
    • Sidenav
      • Sidenav Accordion
      • Sidenav Back
      • Sidenav Header
      • Sidenav Heading
      • Sidenav Navitem
      • Sidenav Separator
      • Sidenav Slider
      • Sidenav Subnav
      • Sidenav Toggle Outsid
    • Slider
    • Stepper
      • Step
    • Switch
      • Switch Item
    • Table
      • Table Body
      • Table Caption
      • Table Cell
      • Table Colgroup
      • Table Footer
      • Table Head
      • Table Header
      • Table Row
      • Table Toolbar
    • Tabs
      • Tab
      • Tab List
      • Tab Panel
      • Tab Panel List
    • Toggle
    • Tooltip
    • Typography
  • Data Visualization
    • Getting Started
  1. Install
  2. Import and register Web Components
    1. self-lazy-loading bundle
    2. dist-custom-elements
  3. Import stylesheets
Introduction Getting started

Getting Started #

Install #

Install with your package manager of choice:

npm install @emdgroup-liquid/liquid
yarn add @emdgroup-liquid/liquid
pnpm add @emdgroup-liquid/liquid

Import and register Web Components #

There are multiple options to choose from when importing and registering Liquid Web Components:

self-lazy-loading bundle #

The self-lazy-loading bundle is a tree shakable bundle, which includes all Liquid components as well as polyfills. You just import it once, then it automatically loads components lazily whenever they are used in your app.

import { defineCustomElements } from '@emdgroup-liquid/liquid/dist/loader'

defineCustomElements()

dist-custom-elements #

The dist-custom-elements output target is used to generate custom elements in a more optimized way for tree shaking. The generated output consists of ES Modules which helps bundlers to parse and optimize the code.

import { LdButton } from '@emdgroup-liquid/liquid/dist/components/ld-button'

customElements.define('ld-button', LdButton)
Please be aware that when using React bindings you must use the self-lazy-loading bundle.

Learn more about the differences in the Stencil docs.

Import stylesheets #

We recommend importing Liquid stylesheets in a central place respectively the entry file of your application.

There are two options to choose from when importing stylesheets from Liquid. Depending on your needs you should choose one or the other.

  1. If you are using PurgeCSS you can import all styles from Liquid and let PurgeCSS remove unused classes from your bundle, no matter if you are using Web Components or CSS Components from liquid:
import '@emdgroup-liquid/liquid/dist/css/liquid.css'
  1. If you are not using PurgeCSS, or anything similar, you should import only what you need in order to keep your bundle small. When using Liquid you will always need to import a CSS file containing global styles (shared CSS custom properties, shared utils, font imports...). If you are using CSS Components (as opposed to Web Components), you will also need to import the CSS of the components you are using. An example:
import '@emdgroup-liquid/liquid/dist/css/liquid.global.css'
import '@emdgroup-liquid/liquid/dist/css/ld-button.css'