@gyldendal/kobber-components

Component library

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

Installation

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.

Inter font

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';

Usage

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);

CSS

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

Development

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.