<p align="center">
  <a href="https://fortifyapp.com/" rel="noopener" target="_blank"><img width="128" src="https://fortifyapp.com/favicons/android-chrome-512x512.png" alt="Fortify logo"></a></p>
</p>

<h1 align="center">Fortify Web components</h1>

Web-components for creating CSR or Certificate and viewing certificates list using Fortify App.

## CDN​

It's recommended to use [jsdelivr](https://www.jsdelivr.com/) to access the web-components from a CDN. To get the latest version, add the following inside the <head> element in an HTML file, or where external assets are included in the online code editor:

```html
<html>
  <head>
    <script type="module" src="https://cdn.jsdelivr.net/npm/@peculiar/fortify-webcomponents/dist/peculiar/peculiar.esm.js"></script>
    <script nomodule src="https://cdn.jsdelivr.net/npm/@peculiar/fortify-webcomponents/dist/peculiar/peculiar.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@peculiar/fortify-webcomponents/dist/peculiar/peculiar.css" />
  </head>
  <body>
    <peculiar-fortify-certificates />
  </body>
</html>
```

## NPM

To get started with using components install the `@peculiar/fortify-webcomponents` package:

```
npm install @peculiar/fortify-webcomponents
```

Import the components and stylesheets from peculiar in your main app file:

```ts
import { defineCustomElements } from '@peculiar/fortify-webcomponents/loader';
import '@peculiar/fortify-webcomponents/dist/peculiar/peculiar.css';

defineCustomElements();
```

Then you can use a components anywhere in your HTML.

```html
<body>
  <peculiar-fortify-certificates />
</body>
```

## Fortify Certificates + React​

To add the `@peculiar/fortify-webcomponents-react` to an already existing React project see the [react](https://www.npmjs.com/package/@peculiar/fortify-webcomponents-react) using guide.

## Examples

Are you looking for an example project to get started? [We host some](https://fortifyapp.com/examples#certificate_management).

## Documentation

Check out our [documentation website](https://fortifyapp.com/docs#overview).

### Customize the theme​

To customize the look and feel of the components, components have CSS variables you can override to provide a theme for your components. See the supported CSS variables in [peculiar.scss](https://github.com/PeculiarVentures/fortify-webcomponents/tree/master/packages/webcomponents/src/css/peculiar.scss) file.
