Punkt Components

Skill for using Punkt design system components. Covers both React (@oslokommune/punkt-react) and Elements/Web Components (@oslokommune/punkt-elements).

For CSS classes, colors, typography, spacing, grid, and layout, see the punkt-css skill.

Getting started

All usage patterns require Punkt CSS. See the punkt-css skill for setup instructions.

React (NPM)

npm add @oslokommune/punkt-react

import { PktButton } from '@oslokommune/punkt-react';

<PktButton skin="primary" variant="icon-left" iconName="user">
  Click me
</PktButton>

Punkt components load icons, SVGs, and other resources from the CDN. If your project uses a Content Security Policy (CSP), you must configure it to allow resources from https://punkt-cdn.oslo.kommune.no/. See the CSP section below.

Punkt React components are pure React — they do not wrap web components, and the package has no runtime dependency on @oslokommune/punkt-elements. You can pick React or Elements independently; nothing forces you to ship both.

Elements (NPM)

npm add @oslokommune/punkt-elements

import '@oslokommune/punkt-elements/dist/pkt-button.js';

<pkt-button skin="primary">
  <span>Click me</span>
</pkt-button>

For reactive slot content (content that changes programmatically), wrap it in a container element like <span> or <div>.

Elements (CDN)

No build step required. Include CSS and component scripts directly:

<link href="https://punkt-cdn.oslo.kommune.no/19/css/pkt.min.css" rel="stylesheet" />
<script src="https://punkt-cdn.oslo.kommune.no/19/elements/pkt-button.js" type="module"></script>

If using CSP, see the CSP section below.

Form field sizes

Form fields accept an inputSize prop (input-size attribute in Elements) with three values:

Supported by: combobox, datepicker, searchinput, select, textarea, textinput and timepicker.

<PktTextinput label="Search" id="q" inputSize="small" />

<pkt-textinput label="Search" id="q" input-size="small"></pkt-textinput>

Keep the size consistent across fields that sit next to each other — mixing sizes in one form makes the fields look misaligned. Smaller fields also mean smaller touch targets, so prefer "medium" on touch-first interfaces.

Fields outside the form

A form field does not have to sit inside its <form>. Set form to the form's id and the browser submits the field with that form, wherever it is on the page:

<form id="application" onSubmit={handleSubmit} />

<PktTextinput id="name" name="name" label="Name" form="application" />
<PktRadioButton id="p1" name="priority" value="normal" label="Normal" form="application" />
<PktRadioButton id="p2" name="priority" value="express" label="Express" form="application" />

<form id="application"></form>

<pkt-textinput id="name" name="name" label="Name" form="application"></pkt-textinput>
<pkt-radiobutton id="p1" name="priority" value="normal" label="Normal" form="application"></pkt-radiobutton>
<pkt-radiobutton id="p2" name="priority" value="express" label="Express" form="application"></pkt-radiobutton>

Radio buttons linked to the same form form one group, whether they are inside it or outside it, so selecting one clears the others. Form reset works the same way.

Supported by: checkbox, combobox, datepicker, fileupload, radiobutton, select, textarea, textinput and timepicker. Button also takes form, to submit or reset a form it sits outside of.

Content Security Policy (CSP)

Punkt components load fonts, icons (SVG), and other resources from https://punkt-cdn.oslo.kommune.no/. If the application uses a Content Security Policy, the CSP must allow this origin. This applies to all setup methods (NPM and CDN).

Required CSP directives:

Content-Security-Policy:
  default-src 'self';
  font-src 'self' https://punkt-cdn.oslo.kommune.no/;
  img-src 'self' https://punkt-cdn.oslo.kommune.no/;
  script-src 'self' https://punkt-cdn.oslo.kommune.no/;
  style-src 'self' 'unsafe-inline' https://punkt-cdn.oslo.kommune.no/;
  connect-src 'self' https://punkt-cdn.oslo.kommune.no/;

Why 'unsafe-inline' in style-src? Because of the intricacies of SVG styling and certain web component features, Punkt requires 'unsafe-inline' in the style-src directive. Without it, some styles will be blocked by the browser. CSP nonces can be used as an alternative but require server-side configuration.

Important: Always instruct users to configure CSP when setting up Punkt components. Missing CSP configuration is a common cause of broken fonts, missing icons, and invisible components.

Components needing a second domain

PktHeader type="global", PktFooter / PktFooterSimple, PktHeaderMenu, and PktConsent also reach https://cdn.web.oslo.kommune.no/ — a different domain from the one above. The directives above are not enough for them:

They share the endpoint, so one connect-src entry covers all three. See header.md, footer.md, header-menu.md and consent.md for details and for the server-side data workaround.

Strings

All UI text comes from a single shared catalogue and can be overridden globally, per subtree, or per component. See Strings and overrides.

Components

1. Accordion
2. Alert
3. Backlink
4. Breadcrumbs
5. Button
6. Card
7. Checkbox
8. Combobox
9. Consent
10. Datepicker
11. File Upload
12. Footer
13. Header Menu
14. Header
15. Icon
16. Input Wrapper
17. Link
18. LinkCard
19. Loader
20. Messagebox
21. Modal
22. Progressbar
23. Radio Button
24. Search Input
25. Select
26. Steps
27. Switch
28. Table
29. Tabs
30. Tag
31. Text Input
32. Textarea
33. Timepicker