• Introduction
    • Why Liquid
    • Getting started
    • CSS vs. Web Components
    • Component assets
    • Type checking and intellisense
    • Server-side rendering
    • Event handling
    • Form validation
    • React bindings
    • Tailwind CSS integration
    • Design tokens
    • Sandbox applications
    • 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
    • Checkbox
    • Circular Progress
    • 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
    • Switch
      • Switch Item
    • Tabs
      • Tab
      • Tab List
      • Tab Panel
      • Tab Panel List
    • Toggle
    • Tooltip
    • Typography
  • Data Visualization
    • Getting Started
  1. Install
  2. Import and register Web Components
  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 #

We recommend importing and registering Liquid Web Components in a central place respectively the entry file of your application.

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

customElements.define('ld-button', LdButton)

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'