Design system

npm install @arkitektbedriftene/fe-lib

@arkitektbedriftene/fe-lib/ui

The UI design system was built with Stitches (CSS-in-JS) and is based on the old visual profile.

Stitches is now discontinued, so this design system should be considered legacy. However, it is still widely used and must continue to live in parallel with the new Tailwind-based system.

@arkitektbedriftene/fe-lib/system

The System design system is built with Tailwind and is based on the new visual profile.
It is a work in progress (WIP) and was created in connection with the new website.

Most services now use /ui and /system in parallel.

Usage

app.css

@import "tailwindcss";

/* Import System base styles and Fonts */
@source "@arkitektbedriftene/fe-lib/dist/system";
@import "@arkitektbedriftene/fe-lib/dist/fonts.css";
@import "@arkitektbedriftene/fe-lib/dist/system.css";

App.tsx

import { Button as UIButton } from "@arkitektbedriftene/fe-lib/ui"
import { Button as SystemButton } from "@arkitektbedriftene/fe-lib/system/Button"

const App = () => {
  return (
    <>
      <UIButton>UI button</UIButton>
      <SystemButton>System button</SystemButton>
      <button className="btn">System button</button>
    </>
  )
}