@quartzds/core

The Quartz Core package has the web components that make up the reusable UI building blocks of the Quartz design system. These components are designed to be used in traditional frontend view libraries/frameworks (such as React, Angular, or Vue) or on their own through traditional JavaScript in the browser.

💿 Installation

npm install @quartzds/core

📖 Usage

Vanilla HTML

The easiest way to start using the Quartz Core is by adding link and script tags to the CDN.

First, the fonts:

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap"
/>

Next, the platform and theme CSS custom properties:

<link
  rel="stylesheet"
  href="https://unpkg.com/@quartzds/generic-tokens-core/dist/platform/desktop.css"
/>
<link
  rel="stylesheet"
  href="https://unpkg.com/@quartzds/generic-tokens-core/dist/theme/light.css"
/>

Optionally, the dark theme:

<link
  rel="stylesheet"
  href="https://unpkg.com/@quartzds/generic-tokens-core/dist/theme/dark.css"
/>

Finally, bootstrap the components with their styling:

<script type="module">
  import { defineCustomElements } from 'https://unpkg.com/@quartzds/core/loader'
  import {
    setPlatform,
    setTheme,
  } from 'https://unpkg.com/@quartzds/core/components'

  setPlatform('desktop')
  setTheme('light')
  defineCustomElements()
</script>

Any Quartz component added to the webpage will automatically load with the proper platform and theme-specific styling. This includes writing the component tag directly in HTML or using JavaScript such as document.createElement('qds-button').

Framework Bindings

The @quartzds/core package can be used in vanilla HTML or JavaScript without any framework at all. Quartz also has packages that make it easier to integrate into a framework's ecosystem and patterns:

• @quartzds/core-angular
• @quartzds/core-react
• @quartzds/core-vue

Custom Elements

Besides the lazy-loading components built by Stencil, this package also exports each component as a stand-alone custom element from @quartzds/core. Each component extends HTMLElement and does not lazy-load itself. This is useful for projects already using a bundler such as Webpack or Vite. While all components are available to be imported, the custom element exports make sure bundlers only import what's used and tree-shake any unused components.

Below is an example of importing the qds-button custom element:

import { defineCustomElementQdsButton } from '@quartzds/core'

defineCustomElementQdsButton()

The defineCustomElementQdsButton function will automatically define the component as well as any child component that may be required.

The qds-button custom element can also be imported and registered manually:

import { QdsButton } from '@quartzds/core'

customElements.define('qds-button', QdsButton)

⚖️ License

See the LICENSE file for license rights and limitations.

• Some code borrowed from Ionic is licensed under MIT.
• Some code borrowed from Shoelace is licensed under MIT.