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.

If you have unit tests, components that wrap Elements may need special setup — see individual component docs.

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/latest/css/pkt.min.css" rel="stylesheet" />
<script src="https://punkt-cdn.oslo.kommune.no/latest/elements/pkt-button.js" type="module"></script>

If using CSP, see the CSP section below.

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

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