New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details → →
Socket
Book a DemoSign in
Socket
Book a DemoSign in

@dbcdk/react-components

Package Overview
Dependencies
Maintainers
1
Versions
57
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@dbcdk/react-components

Reusable React components for DBC projects

latest
npmnpm
Version
0.0.59
Version published
Maintainers
1
Created
Source

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

Keywords

react
components
ui
library

FAQs

Package last updated on 08 Apr 2026

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

Feross on TBPN: How North Korea Hijacked Axios

Security News

Feross on TBPN: How North Korea Hijacked Axios

Socket CEO Feross Aboukhadijeh breaks down how North Korea hijacked Axios and what it means for the future of software supply chain security.

By Sarah Gooding  -  Apr 08, 2026