open-index/open-npm huggingface dataset:
npm package: @fremtind/jkl-radio-button
Description: Jøkul style for radio button
Latest version: 10.2.26

# [`@fremtind/jkl-radio-button`](https://jokul.fremtind.no/komponenter/radiobutton)

Se portalen for [bruk og prinsipper](https://jokul.fremtind.no/komponenter/radiobutton).

## Installasjon

**Tips:** om du bruker [React-pakken](../radio-button-react/) trenger du ikke installere denne pakken direkte.

1. `npm i @fremtind/jkl-radio-button`.
2. Importér stil-pakken i prosjektet ditt.

```js
// Importer stilark via JavaScript med CSS-loader.
import "@fremtind/jkl-radio-button/radio-button.min.css";
```

```scss
// Eller importer stilark via SCSS.
@use "@fremtind/jkl-radio-button/radio-button";
```
npm package: @fremtind/jkl-radio-button-react
Description: Jøkul react radio button components
Latest version: 12.0.40

# [`@fremtind/jkl-radio-button-react`](https://jokul.fremtind.no/komponenter/radiobutton)

Se portalen for [bruk og prinsipper](https://jokul.fremtind.no/komponenter/radiobutton).

## Installasjon

**Tips:** [stilpakken](../radio-button/) blir automatisk installert som en avhengighet.

1. `npm i @fremtind/jkl-radio-button-react`.
2. Importér _både_ React-komponent og stilark i prosjektet ditt.

```js
import { RadioButton } from "@fremtind/jkl-radio-button-react";

// Importer stilark via JavaScript med CSS-loader.
import "@fremtind/jkl-radio-button/radio-button.min.css";
import "@fremtind/jkl-field-group/input-group.min.css";

// For enkelte features må du også ha denne CSSen importert.
import "@fremtind/jkl-icons/icons.min.css";
```

```scss
// Eller importer stilark via SCSS.
@use "@fremtind/jkl-radio-button/radio-button";
@use "@fremtind/jkl-field-group/input-group";

@use "@fremtind/jkl-icons/icons";
```
npm package: @fremtind/jkl-react-hooks
Description: Jøkul react button components
Latest version: 12.3.4

# [`@fremtind/jkl-react-hooks`](https://jokul.fremtind.no/komponenter/animation)

Se portalen for [en oversikt over hvilke hooks som finnes](https://jokul.fremtind.no/komponenter/animation) (velg Hooks i sidemenyen, eller filtrer med teksten `use`).

## Installasjon

1. `npm i @fremtind/jkl-react-hooks`.
2. Importer hooksene du trenger.

```js
import { useId } from "@fremtind/jkl-react-hooks";
```
npm package: @fremtind/jkl-select
Description: Jøkul style for select
Latest version: 11.1.46

# [`@fremtind/jkl-select`](https://jokul.fremtind.no/komponenter/select)

Se portalen for [bruk og prinsipper](https://jokul.fremtind.no/komponenter/select).

## Installasjon

**Tips:** om du bruker [React-pakken](../select-react/) trenger du ikke installere denne pakken direkte.

1. `npm i @fremtind/jkl-select`.
2. Importér stil-pakken i prosjektet ditt.

```js
// Importer stilark via JavaScript med CSS-loader.
import "@fremtind/jkl-select/select.min.css";
```

```scss
// Eller importer stilark via SCSS.
@use "@fremtind/jkl-select/select";
```
npm package: @fremtind/jkl-select-react
Description: Jøkul react select component
Latest version: 15.0.33

# [`@fremtind/jkl-select-react`](https://jokul.fremtind.no/komponenter/select)

Se portalen for [bruk og prinsipper](https://jokul.fremtind.no/komponenter/select).

## Installasjon

**Tips:** [stilpakken](../select/) blir automatisk installert som en avhengighet.

1. `npm i @fremtind/jkl-select-react`.
2. Importér _både_ React-komponent og stilark i prosjektet ditt.

```js
import { Select } from "@fremtind/jkl-select-react";

// Importer stilark via JavaScript med CSS-loader.
import "@fremtind/jkl-select/select.min.css";
import "@fremtind/jkl-icons/icons.min.css";
import "@fremtind/jkl-input-group/input-group.min.css";
```

```scss
// Eller importer stilark via SCSS.
@use "@fremtind/jkl-select/select";
@use "@fremtind/jkl-icons/icons";
@use "@fremtind/jkl-input-group/input-group";
```
npm package: @fremtind/jkl-slider-react
Description: > TODO: description
Latest version: 2.0.8

# [`@fremtind/jkl-slider-react`](https://jokul.fremtind.no/komponenter/slider)

## Beskrivelse

Se portalen for [bruk og prinsipper](https://jokul.fremtind.no/komponenter/slider).

## Kom i gang

[Lær hvordan du kan ta i bruk Jøkul](https://jokul.fremtind.no/komigang/bygg)
npm package: @fremtind/jkl-summary-table
Description: A simple table with two columns
Latest version: 10.0.42

# [`@fremtind/jkl-summary-table`](https://jokul.fremtind.no/komponenter/summarytable)

Se portalen for [bruk og prinsipper](https://jokul.fremtind.no/komponenter/summarytable).

## Installasjon

**Tips:** om du bruker [React-pakken](../summary-table-react/) trenger du ikke installere denne pakken direkte.

1. `npm i @fremtind/jkl-summary-table`.
2. Importér stil-pakken i prosjektet ditt.

```js
// Importer stilark via JavaScript med CSS-loader.
import "@fremtind/jkl-summary-table/summary-table.min.css";
```

```scss
// Eller importer stilark via SCSS.
@use "@fremtind/jkl-summary-table/summary-table";
```
npm package: @fremtind/jkl-summary-table-react
Description: A simple table with two columns.
Latest version: 10.0.43

# [`@fremtind/jkl-summary-table-react`](https://jokul.fremtind.no/komponenter/summarytable)

Se portalen for [bruk og prinsipper](https://jokul.fremtind.no/komponenter/summarytable).

## Installasjon

**Tips:** [stilpakken](../summary-table/) blir automatisk installert som en avhengighet.

1. `npm i @fremtind/jkl-summary-table-react`.
2. Importér _både_ React-komponent og stilark i prosjektet ditt.

```js
import { summary-table } from "@fremtind/jkl-summary-table-react";

// Importer stilark via JavaScript med CSS-loader.
import "@fremtind/jkl-summary-table/summary-table.min.css";
```

```scss
// Eller importer stilark via SCSS.
@use "@fremtind/jkl-summary-table/summary-table";
```
npm package: @fremtind/jkl-system-message
Description: Jøkul system message style
Latest version: 1.1.24

# [`@fremtind/jkl-system-message`](https://jokul.fremtind.no/komponenter/systemmessage)

Se portalen for [bruk og prinsipper](https://jokul.fremtind.no/komponenter/systemmessage).

## Installasjon

**Tips:** om du bruker [React-pakken](../system-message-react/) trenger du ikke installere denne pakken direkte.

1. `npm i @fremtind/jkl-system-message`.
2. Importér stil-pakken i prosjektet ditt.

```js
// Importer stilark via JavaScript med CSS-loader.
import "@fremtind/jkl-system-message/system-message.min.css";
```

```scss
// Eller importer stilark via SCSS.
@use "@fremtind/jkl-system-message/system-message";
```
npm package: @fremtind/jkl-table
Description: Jøkul style for tables
Latest version: 9.1.36

# [`@fremtind/jkl-table`](https://jokul.fremtind.no/komponenter/table)

Se portalen for [bruk og prinsipper](https://jokul.fremtind.no/komponenter/table).

## Installasjon

**Tips:** om du bruker [React-pakken](../table-react/) trenger du ikke installere denne pakken direkte.

1. `npm i @fremtind/jkl-table`.
2. Importér stil-pakken i prosjektet ditt.

```js
// Importer stilark via JavaScript med CSS-loader.
import "@fremtind/jkl-table/table.min.css";
```

```scss
// Eller importer stilark via SCSS.
@use "@fremtind/jkl-table/table";
```
npm package: @fremtind/jkl-table-react
Description: Jøkul react table components
Latest version: 12.0.6

# [`@fremtind/jkl-table-react`](https://jokul.fremtind.no/komponenter/table)

Se portalen for [bruk og prinsipper](https://jokul.fremtind.no/komponenter/table).

## Installasjon

**Tips:** [stilpakken](../table/) blir automatisk installert som en avhengighet.

1. `npm i @fremtind/jkl-table-react`.
2. Importér _både_ React-komponent og stilark i prosjektet ditt.

```js
import { Table } from "@fremtind/jkl-table-react";

// Importer stilark via JavaScript med CSS-loader.
import "@fremtind/jkl-table/table.min.css";

// For ekspanderbare rader må du også ha denne CSSen importert.
import "@fremtind/jkl-content-toggle/content-toggle.min.css";
import "@fremtind/jkl-expand-button/expand-button.min.css";
```

```scss
// Eller importer stilark via SCSS.
@use "@fremtind/jkl-table/table";
@use "@fremtind/jkl-content-toggle/content-toggle";
@use "@fremtind/jkl-expand-button/expand-button";
```
npm package: @fremtind/jkl-tabs-react
Description: Jøkul react tabs
Latest version: 7.0.4

# [`@fremtind/jkl-tabs-react`](https://jokul.fremtind.no/komponenter/tabs)

Se portalen for [bruk og prinsipper](https://jokul.fremtind.no/komponenter/tabs).

## Installasjon

**Tips:** [stilpakken](../tabs/) blir automatisk installert som en avhengighet.

1. `npm i @fremtind/jkl-tabs-react`.
2. Importér _både_ React-komponent og stilark i prosjektet ditt.

```js
import { Tab } from "@fremtind/jkl-tabs-react";

// Importer stilark via JavaScript med CSS-loader.
import "@fremtind/jkl-tabs/tabs.min.css";
```

```scss
// Eller importer stilark via SCSS.
@use "@fremtind/jkl-tabs/tabs";
```
npm package: @fremtind/jkl-tag
Description: Jøkul style for tags
Latest version: 6.0.15

# [`@fremtind/jkl-tag`](https://jokul.fremtind.no/komponenter/tag)

Se portalen for [bruk og prinsipper](https://jokul.fremtind.no/komponenter/tag).

## Installasjon

**Tips:** Om du bruker [React-pakken](../tag-react/) trenger du ikke installere denne pakken direkte.

1. `npm i @fremtind/jkl-tag`.
2. Importér stil-pakken i prosjektet ditt.

```js
// Importer stilark via JavaScript med CSS-loader.
import "@fremtind/jkl-tag/tag.min.css";
```

```scss
// Eller importer stilark via SCSS.
@use "@fremtind/jkl-tag/tag";
```
npm package: @fremtind/jkl-tag-react
Description: Jøkul React tag component
Latest version: 6.0.20

# [`@fremtind/jkl-tag-react`](https://jokul.fremtind.no/komponenter/tag)

Se portalen for [bruk og prinsipper](https://jokul.fremtind.no/komponenter/tag).

## Installasjon

**Tips:** [stilpakken](../tag/) blir automatisk installert som en avhengighet.

1. `npm i @fremtind/jkl-tag-react`.
2. Importér _både_ React-komponent og stilark i prosjektet ditt.

```js
import { Tag } from "@fremtind/jkl-tag-react";

// Importer stilark via JavaScript med CSS-loader.
import "@fremtind/jkl-tag/tag.min.css";

// Lukkbar Tag bruker IconButton internt, så du må også laste inn stilarket derfra.
import "@fremtind/jkl-icon-button/icon-button.min.css";
```

```scss
// Eller importer stilark via SCSS.
@use "@fremtind/jkl-tag/tag";
@use "@fremtind/jkl-icon-button/icon-button";
```
npm package: @fremtind/jkl-text-input
Description: Jøkul style for text input fields
Latest version: 12.1.51

# [`@fremtind/jkl-text-input`](https://jokul.fremtind.no/komponenter/text-input)

Se portalen for [bruk og prinsipper](https://jokul.fremtind.no/komponenter/text-input).

## Installasjon

**Tips:** om du bruker [React-pakken](../text-input-react/) trenger du ikke installere denne pakken direkte.

1. `npm i @fremtind/jkl-text-input`.
2. Importér stil-pakken i prosjektet ditt.

```js
// Importer stilark via JavaScript med CSS-loader.
import "@fremtind/jkl-text-input/text-input.min.css";
```

```scss
// Eller importer stilark via SCSS.
@use "@fremtind/jkl-text-input/text-input";
```
npm package: @fremtind/jkl-text-input-react
Description: Jøkul react text input component
Latest version: 16.0.26

# [`@fremtind/jkl-text-input-react`](https://jokul.fremtind.no/komponenter/textinput)

Se portalen for [bruk og prinsipper](https://jokul.fremtind.no/komponenter/textinput).

## Installasjon

**Tips:** [stilpakken](../text-input/) blir automatisk installert som en avhengighet.

1. `npm i @fremtind/jkl-text-input-react`.
2. Importer _både_ React-pakken (velg komponenten(e) du trenger) og stil-pakken i prosjektet ditt:

```js
import { TextInput, TextAera } from "@fremtind/jkl-text-input-react";

// Importer stilark via JavaScript med CSS-loader.
import "@fremtind/jkl-input-group/input-group.min.css";
import "@fremtind/jkl-text-input/text-input.min.css";

// For enkelte features må du også ha denne CSSen importert.
import "@fremtind/jkl-icon-button/icon-button.min.css";
import "@fremtind/jkl-icons/icons.min.css";
```

```scss
// Eller importer stilark via SCSS.
@use "@fremtind/jkl-input-group/input-group";
@use "@fremtind/jkl-text-input/text-input";

@use "@fremtind/jkl-icon-button/icon-button";
@use "@fremtind/jkl-icons/icons";
```
npm package: @fremtind/jkl-toast
Description: Jøkul style for toast
Latest version: 2.2.25

# [`@fremtind/jkl-toast`](https://jokul.fremtind.no/komponenter/toast)

Se portalen for [bruk og prinsipper](https://jokul.fremtind.no/komponenter/toast).

## Installasjon

**Tips:** om du bruker [React-pakken](../toast-react/) trenger du ikke installere denne pakken direkte.

1. `npm i @fremtind/jkl-toast`.
2. Importér stil-pakken i prosjektet ditt.

```js
// Importer stilark via JavaScript med CSS-loader.
import "@fremtind/jkl-toast/toast.min.css";
```

```scss
// Eller importer stilark via SCSS.
@use "@fremtind/jkl-toast/toast";
```
npm package: @fremtind/jkl-toast-react
Description: Jøkul react toast
Latest version: 2.4.4

# [`@fremtind/jkl-toast-react`](https://jokul.fremtind.no/komponenter/toast)

Se portalen for [bruk og prinsipper](https://jokul.fremtind.no/komponenter/toast).

## Installasjon

**Tips:** [stilpakken](../toast/) blir automatisk installert som en avhengighet.

1. `npm i @fremtind/jkl-toast-react`.
2. Importér _både_ React-komponent og stilark i prosjektet ditt.

```js
import { Toast } from "@fremtind/jkl-toast-react";

// Importer stilark via JavaScript med CSS-loader.
import "@fremtind/jkl-toast/toast.min.css";
```

```scss
// Eller importer stilark via SCSS.
@use "@fremtind/jkl-toast/toast";
```
npm package: @fremtind/jkl-toggle-switch
Description: Jøkul style for toggle switch
Latest version: 13.2.24

# [`@fremtind/jkl-toggle-switch`](https://jokul.fremtind.no/komponenter/toggleswitch)

Se portalen for [bruk og prinsipper](https://jokul.fremtind.no/komponenter/toggleswitch).

## Installasjon

**Tips:** om du bruker [React-pakken](../toggle-switch-react/) trenger du ikke installere denne pakken direkte.

1. `npm i @fremtind/jkl-toggle-switch`.
2. Importér stil-pakken i prosjektet ditt.

```js
// Importer stilark via JavaScript med CSS-loader.
import "@fremtind/jkl-toggle-switch/toggle-switch.min.css";
import "@fremtind/jkl-input-group/input-group.min.css";
```

```scss
// Eller importer stilark via SCSS.
@use "@fremtind/jkl-toggle-switch/toggle-switch";
@use "@fremtind/jkl-input-group/input-group";
```
npm package: @fremtind/jkl-toggle-switch-react
Description: Jøkul react toggle switch component
Latest version: 13.1.57

# [`@fremtind/jkl-toggle-switch-react`](https://jokul.fremtind.no/komponenter/toggleswitch)

Se portalen for [bruk og prinsipper](https://jokul.fremtind.no/komponenter/toggleswitch).

## Installasjon

**Tips:** [stilpakken](../toggle-switch/) blir automatisk installert som en avhengighet.

1. `npm i @fremtind/jkl-toggle-switch-react`.
2. Importér _både_ React-komponent og stilark i prosjektet ditt.

```js
import { ToggleSwitch, ToggleSlider } from "@fremtind/jkl-toggle-switch-react";

// Importer stilark via JavaScript med CSS-loader.
import "@fremtind/jkl-toggle-switch/toggle-switch.min.css";
import "@fremtind/jkl-icons/icons.min.css";
```

```scss
// Eller importer stilark via SCSS.
@use "@fremtind/jkl-toggle-switch/toggle-switch";
@use "@fremtind/jkl-icons/icons";
```
npm package: @fremtind/jkl-tooltip
Description: Jøkul style for tooltip
Latest version: 4.3.17

# [`@fremtind/jkl-tooltip`](https://jokul.fremtind.no/komponenter/tooltip)

Se portalen for [bruk og prinsipper](https://jokul.fremtind.no/komponenter/tooltip).

## Installasjon

**Tips:** Om du bruker [React-pakken](../tooltip-react/) trenger du ikke installere denne pakken direkte.

1. `npm i @fremtind/jkl-tooltip`.
2. Importér stil-pakken i prosjektet ditt.

```js
// Importer stilark via JavaScript med CSS-loader.
import "@fremtind/jkl-tooltip/tooltip.min.css";
```

```scss
// Eller importer stilark via SCSS.
@use "@fremtind/jkl-tooltip/tooltip";
```
npm package: @fremtind/jkl-webfonts
Description: Web fonts for Jøkul design system
Latest version: 4.0.3

# [`@fremtind/jkl-webfonts`](https://jokul.fremtind.no/komponenter/typography)

Denne pakken inneholder skrifttypene våre til bruk i nettløsninger. Disse kan ikke installeres lokalt på datamaskinen. Om du trenger Fremtind-fonten installert på maskinen din, spør en kollega om hjelp.

Fontfilene må gjøres tilgjengelige i løsningen ved at du legger dem i en mappe som blir publisert med appen din, for eksempel `/build`, `/dist` eller lignende.

Se portalen for [bruk og prinsipper](https://jokul.fremtind.no/komponenter/typography).

## Installasjon

1. `npm i @fremtind/jkl-webfonts`.
2. Importer CSSen som deklarerer fontfamilien Fremtind Grotesk med `@font-face`.
3. Legg til `jkl`-klassen på rotnivå i appen din, slik at fontfamilien blir brukt overalt.
4. Konfigurer byggverktøyet ditt til å kopiere fontfiler.
5. Sett riktig filsti til fontene i stilarket.

Avhengig av hvilke byggverktøy dere bruker i prosjektene vil fremgangsmåten være ulik. Konfigurasjonen har to mål:

1. Pakk selve fontfilene fra `node_modules/@fremtind/jkl-webfonts/fonts` med i prosjektet et sted på disk, for eksempel `/public/fonts`.
2. Generer CSS med riktig filsti for ditt prosjekt.

Om dere bruker Sass-stilark i prosjektet deres er dette ofte den enkleste måten. Antagelsen er at dere bruker en Sass-loader i tillegg til en loader som håndterer fontfiler, og om kan konverterer lokale filstier til riktige URLer.

```scss
// Variabelen `$webfonts-dir` angir hvor på disk filene ligger.
// Hvis den ikke spesifiseres vil stilarket se etter fontfilene i mappen `/fonts`.
@use "@fremtind/jkl-webfonts/webfonts.scss" with (
    $webfonts-dir:
        "../relative/path/to/node_modules/@fremtind/jkl-webfonts/fonts"
);
```

Om dere ikke bruker Sass kan dere bruke CSS-versjonen. Denne versjonen ser **kun** etter fontfilene på URLen `/fonts`, så det beste er å sørge for å kopiere fonter på en måte som gjør at du får den URLen.

Om dere er nødt til å legge fontfilene et annet sted må dere kopiere CSS-filen `node_modules/@fremtind/jkl-webfonts/webfonts.css` inn i prosjektet. Deretter må dere endre URLen i hver `@font-face`-definisjon manuelt så det stemmer med hvor fontfilene ligger. **Husk at dere må gjenta prosessen hver gang dere oppdaterer pakken!**

```css
@font-face {
    font-family: "Fremtind Grotesk";
    font-display: fallback;
    font-weight: normal;
    font-style: normal;
    src: local("Fremtind Grotesk"),
        /* Endre de to neste linjene så de stemmer */
            url("/relative/path/to/font/files/FremtindGrotesk-Regular-Web.woff2")
            format("woff2"), url("/relative/path/to/font/files/FremtindGrotesk-Regular-Web.woff")
            format("woff");
}
```
npm package: @fremtind/stylelint-config-jkl
Description: Styleint configuration for Jøkul
Latest version: 8.1.0

# `@fremtind/stylelint-config-jkl`

Jøkul config for [stylelint](https://github.com/stylelint/stylelint).

Based on the following rulesets:

-   [stylelint-config-standard](https://github.com/stylelint/stylelint-config-standard)
-   [stylelint-config-standard-scss](https://github.com/stylelint-scss/stylelint-config-standard-scss)

## Installing

```bash
npm i stylelint @fremtind/stylelint-config-jkl
```

## Usage

Create a file `stylelint.config.js` in the same directory as your `package.json`, and extend this config:

```javascript
module.exports = {
    extends: "@fremtind/stylelint-config-jkl",
};
```

Add a script to your `package.json`:

```json
"lint:styles": "stylelint '**/*.{css,scss,sass}' --cache"
```

Add `.stylelintcache` to your `.gitignore`.

## Rules

Rules are organized in separate files in the `rules/` folder according to their seciton in [List of rules](https://stylelint.io/user-guide/rules/list).

## Example and tests

The rules are tested against an example stylesheet in `examples/styles.scss`.
npm package: @french-thekid/react-ui-library
Description: This is a react component library.
Author: French-thekid
Latest version: 1.1.0

@french-thekid/react-ui-library

A small, demo React + TypeScript component library. Built with Rollup, typed with TypeScript, previewed in Storybook, tested with Jest, and released via semantic-release.

Install

# npm
npm install @french-thekid/react-ui-library

# or pnpm
pnpm add @french-thekid/react-ui-library

# or yarn
yarn add @french-thekid/react-ui-library

Peer dependencies
	•	react 19.2.0 (this library expects React v19.2)

Usage

// Your app entry or any React component file
import React from 'react';
import { YourComponent } from '@french-thekid/react-ui-library';

export default function Example() {
  return <YourComponent />;
}

	•	ESM build: dist/esm/index.js (tree-shake friendly)
	•	CJS build: dist/cjs/index.js
	•	Types: dist/index.d.ts

Replace YourComponent with actual exports as you add components.

⸻

Scripts

# Build library (ESM + CJS + type declarations)
npm run build

# Watch & rebuild for local dev
npm run dev

# Run tests (Jest + jsdom)
npm test

# Lint source (TypeScript + React rules)
npm run lint
npm run lint:fix

# Storybook (component playground & docs)
npm run storybook
npm run build-storybook

# Release (via semantic-release)
npm run semantic-release

Development

git clone https://github.com/French-Thekid/react-ui-library.git
cd react-ui-library
npm install

# run Storybook for local component dev
npm run storybook

# in another terminal, build/watch the library
npm run dev

Project notes
	•	Build: Rollup (@rollup/plugin-node-resolve, @rollup/plugin-commonjs, @rollup/plugin-typescript, rollup-plugin-dts, postcss)
	•	Types: TypeScript 5.9
	•	Styling: styled-components available if you want to use it inside components
	•	Docs/Playground: Storybook 10 (React + Vite)
	•	Tests: Jest (jsdom) + Testing Library
	•	Linting: ESLint (Standard with TypeScript + React plugin)
	•	Releases: semantic-release (automated changelog, GitHub releases, and npm publishing)

Releasing

This repo is set up for automated releases:
	1.	Use Conventional Commits (e.g. feat: add Button, fix: handle disabled state).
	2.	CI runs semantic-release on the main/next branches.
	3.	Changelog, GitHub release, and npm publish are handled automatically (requires GITHUB_TOKEN and NPM_TOKEN in repo secrets).

Example commit types:
	•	feat: … → minor version bump
	•	fix: … → patch version bump
	•	feat!: … or BREAKING CHANGE: in body → major version bump

License

MIT © French-thekid