# @peculiar/certificates-viewer
Peculiar Certificate Viewer web-components makes it easy for you to display certificate related details in your web application.
## 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 element in an HTML file, or where external assets are included in the online code editor:
```html
```
## NPM
To get started with using components install the `@peculiar/certificates-viewer` package:
```
npm install @peculiar/certificates-viewer
```
Import the components and stylesheets from peculiar in your main app file:
```ts
import { defineCustomElements } from '@peculiar/certificates-viewer/loader';
import '@peculiar/certificates-viewer/dist/peculiar/peculiar.css';
defineCustomElements();
```
Then you can use a components anywhere in your HTML.
```html
```
## Certificates viewer + React
To add the `@peculiar/certificates-viewer` to an already existing React project see the [react](https://www.npmjs.com/package/@peculiar/certificates-viewer-react) using guide.
## Examples
- [Root CAs](https://codepen.io/donskov/pen/gOpQGYa)
- [Subordinate CAs](https://codepen.io/donskov/pen/poJQWea)
- [Certificate details](https://codepen.io/donskov/pen/RwPqLLa)
### 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](./src/css/peculiar.scss) file.