Signet Design System

Signet is a design system that provides a set of UI components and design guidelines to create consistent and high-quality user interfaces. Signet is built with StencilJS, making it compatible with popular front-end frameworks such as React, Vue, and Angular. In this blog post, we will explain how to install Signet and its component libraries for each of these frameworks.

npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@episource/signet/-/signet-0.0.1.tgz - Not found
@episource/signet@https://registry.npmjs.org/@episource/signet/-/signet-0.0.1.tgz' is not in this registry.

Installing Signet

Before installing any of the component libraries, you must first install the Signet package itself. To do this, run the following command in your terminal:

npm install @episource/signet

Installing Signet for React Developers

If you are a React developer, you can install the Signet React component library by running the following command in your terminal:

npm install @episource/signet @episource/signet-react

After the installation is complete, you can import the components you need from the library like this:

import { SignetButton } from '@episource/signet-react';

Learn more about our React Library →

Installing Signet for Vue Developers

If you are a Vue developer, you can install the Signet Vue component library by running the following command in your terminal:

npm install @episource/signet @episource/signet-vue

After the installation is complete, you can register the components you need globally or locally in your Vue components like this:

import { SignetButton } from '@episource/signet-vue';

export default {
  components: {
    Button,
  },
  // ...
}

Learn more about our Vue Library →

Installing Signet for Angular Developers

If you are an Angular developer, you can install the Signet Angular component library by running the following command in your terminal:

npm install @episource/signet @episource/signet-angular

After the installation is complete, you can import the modules you need from the library like this:

import { EpiDesignSystemAngularModule } from '@episource/signet-angular'

imports: [
    BrowserModule, 
    EpiDesignSystemAngularModule
],

or

import { applyPolyfills, defineCustomElements as signetComponents } from '@episource/signet/loader';

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

Learn more about our Angular Library →