DIBK design

Shared components for DIBK applications

Getting Started

1. Install Dependencies

   This project uses pnpm as the package manager.

   pnpm install

2. Run Storybook for Development

   To view and work on components in isolation, run the Storybook development server:

   pnpm run storybook

   This will open Storybook in your browser, usually at http://localhost:6006.

Building for Production

When you need to create a distributable version of the library or the Storybook site, use the following commands.

Build Library

Bundles the library for production and generates TypeScript types. The output is saved to the /dist folder.

pnpm run build

Build TypeScript Types

Only generates the TypeScript declaration files (.d.ts).

pnpm run build:types

Build Storybook

Builds the Storybook as a static web application. The output is saved to the /storybook-static folder.

pnpm run build-storybook

Styles & tokens

This package ships two CSS entrypoints:

• dibk-design/theme.css — Tailwind-friendly theme tokens (via @theme)
• dibk-design/tokens.css — plain CSS variables for non-Tailwind apps

Use with Tailwind (recommended)

Import the theme tokens in your global CSS:

@import "tailwindcss";
@import "dibk-design/theme.css";

Use without Tailwind

Import the plain tokens instead:

@import "dibk-design/tokens.css";

Use with Next.js

1. Import the CSS entrypoint in your globals.css

@import "tailwindcss";
@import "dibk-design/theme.css";

2. Import component from the library

"use client"
import React from 'react'
import { Button } from 'dibk-design'

const Home = () => {
  return (
    <main>
      <Button onClick={() => {}} size="small" color="primary" content="Button">
          I'm a button
      </Button>
    </main>
  )
}

export default Home