Røde Kors Design System Component Library (Norwegian Red Cross)

Live Documentation URL

https://norwegianredcross.github.io/DesignSystem/#

Overview

Welcome to the Røde Kors Design System! This repository contains a library of reusable UI components built with React, specifically tailored for Norwegian Red Cross digital projects.

It's developed leveraging the foundational components from Digdir's Designsystemet. This approach ensures a unified and recognizable visual identity across all applications for the Norwegian Red Cross. The system is pre-configured with the official Røde Kors brand theme, which is provided via a dedicated design token package.

The primary goal is to ensure brand consistency, improve development efficiency, and maintain high accessibility standards across all Røde Kors applications.

Available Components

The design system includes the following components:

| Component | Description |
|-----------|-------------|
| Alert | Display important messages and notifications |
| Avatar | Represent users or entities with images/initials |
| Badge | Show status indicators or counts |
| Breadcrumbs | Navigation showing current location in hierarchy |
| Button | Interactive buttons for actions |
| Card | Container for grouping related content |
| Carousel | Image gallery with navigation |
| Checkbox | Multi-select form inputs |
| Chip | Compact interactive elements for filtering |
| DateInput | Text input for dates with Norwegian formatting |
| DatePicker | Visual calendar for date selection |
| Details | Expandable/collapsible content sections |
| Dialog | Modal and non-modal dialog windows |
| Divider | Visual separator between content |
| Dropdown | Dropdown menus and action lists |
| ErrorSummary | Summary of form validation errors |
| Field | Form field wrapper with label and validation |
| Fieldset | Group related form fields |
| Header | Global application header |
| Input | Basic text input field |
| Link | Navigation links |
| List | Ordered and unordered lists |
| Pagination | Navigate between pages of content |
| Popover | Contextual overlays |
| Radio | Single-select form inputs |
| Search | Search input with button |
| Select | Dropdown selection |
| Skeleton | Loading placeholder |
| SkipLink | Accessibility skip navigation |
| Spinner | Loading indicator |
| Suggestion | Searchable select with autocomplete |
| Switch | Toggle on/off settings |
| Table | Structured data display |
| Tabs | Tabbed content navigation |
| Tag | Static labels for categorization |
| Textarea | Multi-line text input |
| Textfield | Text input with label and validation |
| ToggleGroup | Grouped toggle buttons |
| Tooltip | Hover/focus information overlays |

Quick Start for Next.js (Recommended)

$3

``bash
npm install rk-designsystem
`

$3

For Next.js projects, use next/font for optimal font loading:

`tsx
// src/app/layout.tsx (App Router)
import '@digdir/designsystemet-css/index.css';
import 'rk-design-tokens/design-tokens-build/theme.css';
import { Source_Sans_3 } from 'next/font/google';

const sourceSans3 = Source_Sans_3({
subsets: ['latin'],
weight: ['200', '300', '400', '500', '600', '700', '800', '900'],
style: ['normal', 'italic'],
});

export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (

{children}

);
}
`

Important: Use className, NOT variable. The variable option only creates a CSS custom property without actually applying the font.

$3

`tsx
import { Button, Alert } from 'rk-designsystem';

export default function Page() {
return (

Welcome to Røde Kors Design System!

);
}
`

---

Quick Start for Vite/CRA (Simple)

For non-Next.js projects, use the combined styles import:

$3

`bash
npm install rk-designsystem
`

$3

`typescript
// main.tsx or index.tsx
import 'rk-designsystem/styles';
`

This single import includes base styles, theme, and loads the font via Google Fonts.

$3

`tsx
import { Button, Alert } from 'rk-designsystem';

function App() {
return (

Welcome to Røde Kors Design System!

);
}
`

---

Next.js Pages Router

`tsx
// pages/_app.tsx
import '@digdir/designsystemet-css/index.css';
import 'rk-design-tokens/design-tokens-build/theme.css';
import { Source_Sans_3 } from 'next/font/google';
import type { AppProps } from 'next/app';

const sourceSans3 = Source_Sans_3({
subsets: ['latin'],
weight: ['200', '300', '400', '500', '600', '700', '800', '900'],
style: ['normal', 'italic'],
});

export default function App({ Component, pageProps }: AppProps) {
return (







);
}
`

---

AI-Assisted Development

For AI assistants (Claude Code, Cursor, etc.) working with this design system, an AI Design System Guide is available:

Direct URL:
`
https://norwegianredcross.github.io/DesignSystem/storybook/AI_DESIGN_SYSTEM_GUIDE.md
`

$3

`bash


macOS/Linux/Git Bash

curl -o AI_DESIGN_SYSTEM_GUIDE.md https://norwegianredcross.github.io/DesignSystem/storybook/AI_DESIGN_SYSTEM_GUIDE.md

Windows PowerShell

Invoke-WebRequest -Uri "https://norwegianredcross.github.io/DesignSystem/storybook/AI_DESIGN_SYSTEM_GUIDE.md" -OutFile "AI_DESIGN_SYSTEM_GUIDE.md"
`

$3

- Component Metadata: https://norwegianredcross.github.io/DesignSystem/storybook/metadata.json
- Design Tokens: https://norwegianredcross.github.io/design-tokens/theme.css
- GitHub Repository: https://github.com/norwegianredcross/DesignSystem

---

Contributing to the Component Library

This guide provides a set of standards and best practices for creating new components. Following these guidelines ensures that our component library remains consistent, accessible, and easy to maintain.

Getting Started (for Contributors)

Follow these steps to get the local development environment running. All commands should be run from the root of the project.

`bash


1. Install dependencies

pnpm i

2. Build all packages

pnpm build

3. Start the local Storybook server

pnpm storybook
`

Core Principles

Every component we build should adhere to these core principles:

1. Accessibility (A11y): Components must be usable by everyone, including people with disabilities. This means proper ARIA attributes, keyboard navigation, and semantic HTML.
2. Reusability: Components should be generic enough to be used in multiple contexts without modification.
3. Consistency: Components should follow our established design tokens (colors, spacing, typography) and have a consistent API and structure.
4. Documentation: Every component must be documented in Storybook to make it discoverable and easy for other developers to use.

When to Create a New Component

Before you start coding, determine what kind of component you need. Most of our needs fall into one of three categories:

1. Wrapped Component (Simple):
* What it is: A component that directly wraps and re-exports a component from @digdir/designsystemet-react with no modifications.
* When to use: When the base Digdir component meets our needs perfectly, but we want to include it in our own library for a consistent import source.
* Example: The Buttons component is a perfect example of this.

2. Wrapped Component (with Style Overrides):
* What it is: A wrapped Digdir component where we apply custom CSS to tweak its appearance to better match Røde Kors's specific design language.
* When to use: When a Digdir component is functionally correct but needs visual adjustments (e.g., different icons, border radius, padding).
* Example: The Alert component, which uses composes in its CSS to inherit base styles and then applies its own overrides.

3. Custom Component (from Scratch):
* What it is: A completely new component built when no existing Digdir component meets our requirements.
* When to use: For unique UI patterns or functionality not covered by the base library.
* Example: The DateInput component is a custom component with its own state, logic, and styling.

Component File Structure

To maintain consistency, every new component should follow this file structure. Create a new folder under src/components/ with the component's PascalCase name.

`text
src/
└── components/
└── MyNewComponent/
├── index.ts // Public API - exports the component and props
├── MyNewComponent.tsx // The React component logic and JSX
├── MyNewComponent.stories.tsx // Storybook stories for documentation
├── styles.module.css // Scoped CSS (only for custom components)
└── MyNewComponent.test.tsx // (Optional but Recommended) Unit tests
`

Coding Guidelines

$3

* TypeScript First: All components must be written in TypeScript. Define a Props interface for your component, extending from the base HTML element or Digdir component props if applicable.
* Forward Refs: Always use React.forwardRef to allow parent components to get a ref to the underlying DOM element.
* Accessibility is Mandatory:
* Use semantic HTML (, ,

Fly


{/ Icon inside Tag /}



Ny