punkt-components
Using Punkt design system components (React and Elements/Web Components). Covers component APIs, props, events, slots, and usage patterns for all Punkt UI components. Use when building UIs with Punkt components.
68
82%
Does it follow best practices?
Run evals on this skill
Adds up to 20 points to the overall score
View guide
Low
Low-risk findings worth noting
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-reactimport { 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-elementsimport '@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.
Form field sizes
Form fields accept an inputSize prop (input-size attribute in Elements) with three values:
| Value | Use |
|---|---|
"medium" | Default. Standard forms — the right choice unless you have a reason |
"small" | Dense interfaces such as toolbars, filter bars and table rows |
"xsmall" | Very tight spaces where a small field is still too tall |
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.
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:
| Component | Extra directive | Why |
|---|---|---|
| Global header, footer, header menu | connect-src https://cdn.web.oslo.kommune.no/ | Fetches the shared header/footer payload |
| Consent | script-src + style-src for the same domain | Loads a script and stylesheet from it |
| Global header search field | form-action https://www.oslo.kommune.no/ | Submits a GET form to the search target |
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.
Components
- Repository
- oslokommune/punkt-skills
- Commit
c1de050
- Last updated
- First committed
Is this your skill?
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.