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/themes/dbc.css'

3) Add ThemeScript in your root layout (Next.js example)

The library's shared CSS foundation is still imported normally, but product-theme switching is handled by ThemeScript + useTheme(). ThemeScript restores the persisted color scheme and product theme before paint, so the app avoids a flash of the wrong theme on first load.

import { ReactNode } from 'react'

import { ThemeScript } from '@dbcdk/react-components'
import { TooltipProvider } from '@dbcdk/react-components/client'
import '@dbcdk/react-components/themes/dbc.css'

export default function RootLayout({ children }: Readonly<{ children: ReactNode }>) {
  return (
    <html lang="da" suppressHydrationWarning>
      <head>
        <ThemeScript defaultTheme="dbc" />
      </head>
      <body>
        <TooltipProvider>{children}</TooltipProvider>
      </body>
    </html>
  )
}

4) Switching theme in your application

Example using useTheme() when you want to control the theme:

'use client'

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

export default function Header() {
  const { theme, switchTheme } = useTheme({ defaultTheme: 'dbc' })

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

The hook updates data-product-theme, applies the selected product theme's token overrides, and persists the selection.

If you only need to read the active theme state, use useGetActiveTheme() instead of useTheme():

'use client'

import { useGetActiveTheme } from '@dbcdk/react-components/client'

export function ThemeBadge() {
  const { theme, colorScheme, themeKey } = useGetActiveTheme()

  return <span>{themeKey ?? `${theme} / ${colorScheme}`}</span>
}

useGetActiveTheme() is intentionally read-only. It reports the current active theme state as established by ThemeScript, persisted storage, or another mounted theme control. themeKey is only set when both theme and colorScheme are resolved, and is otherwise null. If your app passes a custom storageKey/colorSchemeStorageKey (see below), pass the same values here so it reads the right persisted state.

5) Running multiple apps on the same origin

useTheme, useColorScheme, useGetActiveTheme, ThemeScript, ThemeButton/ThemeMenuSection, and ColorSchemeButton/ColorSchemeMenuSection all persist to a cookie + localStorage under a shared default key. If two different apps built on this library run on the same origin (e.g. two products under one domain), they'll read and overwrite each other's theme selection by default.

To keep them independent, give each app its own key via storageKey (product theme) and/or colorSchemeStorageKey (color scheme, ThemeScript only — elsewhere it's the storageKey option passed to useColorScheme):

<ThemeScript
  defaultTheme="dbc"
  storageKey="my-app-theme"
  colorSchemeStorageKey="my-app-color-scheme"
/>

const { theme, switchTheme } = useTheme({ defaultTheme: 'dbc', storageKey: 'my-app-theme' })
const { colorScheme, switchColorScheme } = useColorScheme('system', {
  storageKey: 'my-app-color-scheme',
})

Use the same keys everywhere in a given app (ThemeScript, the hooks, and any switcher components), or the values will resolve inconsistently.

Package integration

Optional table integration

Table and useTableData are available from @dbcdk/react-components/client without TanStack. Pass the same ColumnItem<T>[] to the table and the hook's sorting.columns; the hook uses each column's accessor and optional sortFunction. Use the column id as sortBy.

Existing accessor-shaped columns (accessorKey / accessorFn), including typed TanStack columns, also work with the hook without introducing a TanStack dependency into core declarations. Explicit columnComparators override column-derived sorting.

useTableSettings, TableSettings, and TableSettingsMenuSection are also available from /client, together with their types and localStorageTableSettingsStorage. They accept the normal Table's columns and honor hidden and canHide. Existing TanStack columns with accessorKey, meta.hidden, and enableHiding remain compatible.

Install @tanstack/react-table for TanstackTable from /tanstack. Existing settings exports from /tanstack remain available as compatibility aliases.

Next.js configuration

Add transpilePackages: ['@dbcdk/react-components'] to your Next.js configuration so it processes the library's CSS Modules. Import interactive components and providers from /client. The packed-package integration check covers Next.js 16.2.6 with webpack and React 19.2.4.

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:

1. Browse components in the left-hand navigation
2. Open a story to see variants and states
3. Adjust props via Controls
4. 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