Components can be used as react components or as web components.
TypeScript definitions are included.

Run one of the following commands to add @gyldendal/kobber-components to your project:

npm install @gyldendal/kobber-components

yarn add @gyldendal/kobber-components

Depending on you usage, you might need to to install the optional peerDependencies.

The Inter variable font is used by default. It can be installed separately from fontsource with one of these commands:

npm install @fontsource-variable/inter

yarn add @fontsource-variable/inter

And then imported in your project:

import '@fontsource-variable/inter';

Components can be imported as react components or as web components.

As a react component:

import { ProgressBar } from "@gyldendal/kobber-components/react";
const App = () => <ProgressBar />;

As a custom element:

<script>import "@gyldendal/kobber-components/web-components";</script>
<kobber-progress-bar />

As a web component:

import { ProgressBar } from "@gyldendal/kobber-components/web-components";
const progressBar = new ProgressBar();
document.body.appendChild(progressBar);

We recommend using normalize.css or something similar to normalize browser styles.

After making a new component, do the following steps to expose it to the world:

1. Export it from src/index.react.tsx and src/index.web-components.ts.
2. Run yarn build.
3. Commit changes, and publish according to changeset.