Amalitech Design System

Amalitech Design Sytem provides a comprehensive set of web components built with typescript to work with vanilla html and other frameworks

Setting things up

Install the component library in your project with npm, yarn or pnpm:

npm install @amalitech-design-system/core

yarn add @amalitech-design-system/core

pnpm add @amalitech-design-system/core

You can also add a CDN link fron https://cdn.jsdelivr.net into the head of your html template.

Plain HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@amalitech-design-system/core@<VERSION NUMBER>/dist/amalitech-design-system/amalitech-design-system.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@amalitech-design-system/core@<VERSION NUMBER>/dist/amalitech-design-system/amalitech-design-system.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@amalitech-design-system/core@<VERSION NUMBER>/dist/amalitech-design-system/amalitech-design-system.js"></script>

Replace @<VERSION NUMBER> with your desired version

Omit the @<VERSION NUMBER> to get the most recent version

With a bundler or ES modules

import '@amalitech-design-system/core/dist/amalitech-design-system/amalitech-design-system.css';
import { defineCustomElements, applyPolyfills } from '@amalitech-design-system/core/loader';

applyPolyfills().then(() => {
  defineCustomElements(window);
});

For more information view our full documentation on Storybook