@dbcdk/react-components

v0.0.19

Published

4 days ago

Reusable React components for DBC projects

0High
0Medium
0Low

dbcdk

react components ui library

DBC React Components

Reusable React components for DBC projects.

This library provides a shared, themeable component system used across DBC’s internal (and selected external) applications. It is designed to promote consistency, speed up development, and improve overall quality and accessibility.

Purpose of the library

The goals of this component library are:

Consistency
Provide a unified look and feel across DBC’s digital products, especially internal tools.
Development speed
Reduce development and maintenance time by reusing well-tested components instead of rebuilding UI from scratch.
Quality & accessibility
Components are reviewed and built according to best practices, with accessibility and robustness in mind, ensuring a strong baseline quality.
Reduced third-party dependency
Increase digital independence by building and sharing our own components across the organisation, reducing reliance on external NPM packages.

Getting started

1) Install the package

npm install @dbcdk/react-components

2) Import global styles

Important: The component library requires global styles to be imported once in your application.

import '@dbcdk/react-components/styles.css'

3) Add the theme `<link>` in your root layout (Next.js example)

The library uses theme CSS files that are dynamically loaded via a <link> tag in <head>. You must use the exported LINK_ID so the useTheme() hook can update the active theme at runtime.

import { ReactNode } from 'react'
import { cookies } from 'next/headers'

import { LINK_ID } from '@dbcdk/react-components'
import '@dbcdk/react-components/styles.css'

export default async function RootLayout({ children }: Readonly<{ children: ReactNode }>) {
  const cookieStore = await cookies()
  const themeId = cookieStore.get('dbc_theme')?.value || 'light'

  return (
    <html lang="da">
      <head>
        <link id={LINK_ID} rel="stylesheet" href={`/themes/${themeId}.css`} />
      </head>
      <body>{children}</body>
    </html>
  )
}

Theme files are expected to be served from /themes/<theme>.css.

4) Switching theme in your application

Example using useTheme():

'use client'

import { AppHeader, Button, useTheme } from '@dbcdk/react-components'
import { Moon, Sun } from 'lucide-react'

export default function Header() {
  const { theme, switchTheme } = useTheme()

  return (
    <AppHeader>
      <Button variant="outlined" onClick={() => switchTheme(theme === 'light' ? 'dark' : 'light')}>
        {theme === 'light' ? <Moon /> : <Sun />}
      </Button>
    </AppHeader>
  )
}

The hook updates the <link> tag automatically and persists the selected theme.

Using Storybook

Storybook is the primary documentation and exploration tool for this library.

Local Storybook

npm run storybook

Storybook runs on http://localhost:6006.

In Storybook you can:

Browse components in the left-hand navigation
Open a story to see variants and states
Adjust props via Controls
Read guidelines and usage notes in the Docs tab

Themes

Use the 🎨 theme selector in the Storybook toolbar to switch between available themes (e.g. light and dark).

All components are styled using CSS variables defined in the theme files.

Accessibility (a11y)

Accessibility is a first-class concern in this library.

We aim to ensure that components:

Are usable with keyboard navigation
Have visible and consistent focus states
Work with screen readers
Follow common ARIA and semantic HTML best practices

Storybook includes the a11y addon to help identify issues during development.

Contributing

See CONTRIBUTING.md for detailed guidelines on:

Folder structure
Styling and theming rules
Storybook requirements
TypeScript conventions
Versioning and changesets

License

ISC