altinn-components

This package is a set of reusable components for building web applications for Altinn 3. This is not a general purpose library, but a library of components that are specifically designed for the Altinn platform, to ensure a consistent look and feel across all applications. It also contains a storybook with stories explaining the purpose and usage of each component, and with real examples of how to use them separately or together (composition).

Installation

To install the package, run the following command:

# for npm users
npm install @altinn/components
# for yarn users
yarn add @altinn/components 
# for pnpm users
pnpm add @altinn/components

Tested with Node.js 20.x <

Requirements

React >=18in your project as a peer dependency. And react-dom if needed.

Usage

Wrap your application in RootProvider to enable shared context across all components. Here’s a basic setup:

import { RootProvider } from '@altinn/components';

function App() {
  return (
    <RootProvider>
      { /* Your application here */ }
    </RootProvider>
  );
}

To use the components in your application, you need to import the components you want to use from the package. For example:

// example: import the Avatar component and type
import { Avatar, type AvatarVariant } from '@altinn/components';

and import the css file in your application once:

import '@altinn/altinn-components/lib/css/global.css';

for correct font-family and minimal collection of resets.

Using nextjs?

You probably need to transpile the package. Add the following to your next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['@altinn/components'],
}
module.exports = nextConfig

Documentation

The documentation for the components can be found in the Storybook