https://github.com/arkitektum/dibk-design
Shared components for DIBK applications
https://github.com/arkitektum/dibk-design
design react styled-components webpack
Last synced: 3 months ago
JSON representation
Shared components for DIBK applications
- Host: GitHub
- URL: https://github.com/arkitektum/dibk-design
- Owner: Arkitektum
- License: gpl-3.0
- Created: 2018-10-29T15:20:00.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2026-03-09T08:28:20.000Z (4 months ago)
- Last Synced: 2026-03-09T12:41:50.124Z (4 months ago)
- Topics: design, react, styled-components, webpack
- Language: TypeScript
- Homepage: https://arkitektum.github.io/dibk-design/
- Size: 43.9 MB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# DIBK design
Shared components for DIBK applications
## Getting Started
1. **Install Dependencies**
This project uses [pnpm](https://pnpm.io/) as the package manager.
```bash
pnpm install
```
2. **Run Storybook for Development**
To view and work on components in isolation, run the Storybook development server:
```bash
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.
```bash
pnpm run build
```
### Build TypeScript Types
Only generates the TypeScript declaration files (`.d.ts`).
```bash
pnpm run build:types
```
### Build Storybook
Builds the Storybook as a static web application. The output is saved to the `/storybook-static` folder.
```bash
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:
```css
@import "tailwindcss";
@import "dibk-design/theme.css";
```
### Use without Tailwind
Import the plain tokens instead:
```css
@import "dibk-design/tokens.css";
```
## Use with Next.js
1. Import the CSS entrypoint in your `globals.css`
```css
@import "tailwindcss";
@import "dibk-design/theme.css";
```
2. Import component from the library
```jsx
"use client"
import React from 'react'
import { Button } from 'dibk-design'
const Home = () => {
return (
{}} size="small" color="primary" content="Button">
I'm a button
)
}
export default Home
```