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

$3

``bash
npm install @dbcdk/react-components
`

---

$3

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

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

---

$3

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

`tsx
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 (


/themes/${themeId}.css} />

{children}

)
}
`

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

---

$3

Example using useTheme():

`tsx
'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 (

switchTheme(theme === 'light' ? 'dark' : 'light')}>
{theme === 'light' ? : }


)
}
`

The hook updates the tag automatically and persists the selected theme.

---

Using Storybook

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

$3

`bash
npm run storybook
`

Storybook runs on http://localhost:6006.

$3

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

`

``