@gyldendal/kobber-components
v0.3.43
Published
Components can be used as react components or as web components.<br /> TypeScript definitions are included.
Downloads
1,248
Keywords
Readme
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
You will also need to install react and react-dom
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
CSS can be imported in JavaScript if supported by your bundler:
import "@gyldendal/kobber-base/css/components.css";
kobber-components assumes that box-sizing
is set to border-box
:
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
We recommend using normalize.css or something similar to normalize browser styles.