@koetsier/design-system (3.0.1)
Installation
@koetsier:registry=npm config set @koetsier:registry=npm install @koetsier/design-system@3.0.1"@koetsier/design-system": "3.0.1"About this package
Koetsier Design System
The Koetsier Design System is a package designed to showcase and manage the design system for the Koetsier ecosystem. It provides reusable components and guidelines to ensure consistency across projects.
Renamed: this package was previously published as
@worldstream/design-system. Update the package name inpackage.jsonand all imports to@koetsier/design-system.
Getting Started
Development Setup
This project uses direnv for environment variables.
The package is published to the private Forgejo registry at code.koetsier.org. To install it, create .envrc.local with a Forgejo access token (scope: read:package):
export CI_TOKEN="your-forgejo-token"
Then allow direnv:
direnv allow
The CI_TOKEN is required for npm authentication with the private Forgejo registry (see .npmrc).
Running Storybook
To view the design system, you can start the Storybook development environment:
npm run dev-storybook
This will launch Storybook on your local machine, allowing you to explore and interact with the components.
Publishing a new version
Releases are automated with semantic-release. Push conventional commits to the main branch and the CI publishes a new version to the Forgejo npm registry, updates CHANGELOG.md, and creates a tag and release:
# minor version
feat: add a new component
# patch version
fix: correct button spacing
You can check the progress in the CI logs.
Features
- Reusable Components: A collection of React components built with accessibility and design consistency in mind.
- Storybook Integration: Visualize and test components in an isolated environment.
- TailwindCSS Support: Styled using TailwindCSS for rapid and consistent design.
Installation
To install the package, use:
npm install @koetsier/design-system
You can seamlessly integrate with Tailwind by doing the following:
- In your
tailwind.config.jsfile, import the config and it to the exported object:
const config = require('@koetsier/design-system/tailwind.config.js')
/**
* @type {import('tailwindcss').Config}
*/
module.exports = {
...config,
// your rules go here... for example the content rules for React Router
content: ['./app/**/*.{ts,tsx}']
}
- In your tailwind css file you can import the design system styles:
@import "tailwindcss";
@import '@koetsier/design-system/tailwind.css';
Scripts
npm run dev-storybook: Start the Storybook development server.npm run build: Build the package for production.npm run build-storybook: Generate a static build of Storybook.
Dependencies
Dependencies
| ID | Version |
|---|---|
| @hookform/resolvers | ^5.2.1 |
| @radix-ui/react-accordion | ^1.2.12 |
| @radix-ui/react-alert-dialog | ^1.1.15 |
| @radix-ui/react-aspect-ratio | ^1.1.7 |
| @radix-ui/react-avatar | ^1.1.10 |
| @radix-ui/react-checkbox | ^1.3.3 |
| @radix-ui/react-collapsible | ^1.1.12 |
| @radix-ui/react-context-menu | ^2.2.16 |
| @radix-ui/react-dialog | ^1.1.15 |
| @radix-ui/react-dropdown-menu | ^2.1.16 |
| @radix-ui/react-hover-card | ^1.1.15 |
| @radix-ui/react-label | ^2.1.7 |
| @radix-ui/react-menubar | ^1.1.16 |
| @radix-ui/react-navigation-menu | ^1.2.14 |
| @radix-ui/react-one-time-password-field | ^0.1.7 |
| @radix-ui/react-popover | ^1.1.15 |
| @radix-ui/react-progress | ^1.1.7 |
| @radix-ui/react-radio-group | ^1.3.8 |
| @radix-ui/react-scroll-area | ^1.2.10 |
| @radix-ui/react-select | ^2.2.6 |
| @radix-ui/react-separator | ^1.1.7 |
| @radix-ui/react-slider | ^1.3.6 |
| @radix-ui/react-slot | ^1.2.3 |
| @radix-ui/react-switch | ^1.2.6 |
| @radix-ui/react-tabs | ^1.1.13 |
| @radix-ui/react-toggle | ^1.1.10 |
| @radix-ui/react-toggle-group | ^1.1.11 |
| @radix-ui/react-tooltip | ^1.2.8 |
| class-variance-authority | ^0.7.1 |
| clsx | ^2.1.1 |
| cmdk | ^1.1.1 |
| date-fns | ^4.1.0 |
| embla-carousel-react | ^8.6.0 |
| input-otp | ^1.4.2 |
| lucide-react | ^0.532.0 |
| motion | ^12.7.4 |
| next-themes | ^0.4.6 |
| react | ^19.0 |
| react-day-picker | ^9.11.1 |
| react-dom | ^19.0 |
| react-hook-form | ^7.62.0 |
| react-resizable-panels | ^3.0.6 |
| recharts | ^2.15.4 |
| sonner | ^2.0.7 |
| tailwind-merge | ^3.4.0 |
| vaul | ^1.1.2 |
| zod | ^4.0.14 |
Development dependencies
| ID | Version |
|---|---|
| @semantic-release/changelog | ^6.0.3 |
| @semantic-release/git | ^10.0.1 |
| @semantic-release/gitlab | ^13.2.9 |
| @semantic-release/npm | ^13.1.3 |
| @storybook/addon-docs | ^9.1.1 |
| @storybook/addon-onboarding | ^9.1.1 |
| @storybook/addon-vitest | ^9.1.12 |
| @storybook/react-vite | ^9.1.1 |
| @tailwindcss/cli | ^4.1.18 |
| @tailwindcss/vite | ^4.1.18 |
| @types/node | ^22.14.1 |
| @types/react | ^19.1.2 |
| @types/react-dom | ^19.1.2 |
| @typescript-eslint/eslint-plugin | ^8.30.1 |
| @typescript-eslint/parser | ^8.30.1 |
| @vitejs/plugin-react | ^4.4.0 |
| @vitest/browser | ^3.2.4 |
| @vitest/coverage-v8 | ^3.2.4 |
| @vitest/ui | ^3.2.4 |
| eslint | ^9.24.0 |
| eslint-config-prettier | ^10.1.2 |
| eslint-plugin-jsx-a11y | ^6.10.2 |
| eslint-plugin-prettier | ^5.2.6 |
| eslint-plugin-react | ^7.37.5 |
| eslint-plugin-react-hooks | ^5.2.0 |
| eslint-plugin-storybook | 9.1.1 |
| markdown-to-jsx | ^9.7.13 |
| playwright | ^1.56.1 |
| semantic-release | ^25.0.2 |
| storybook | ^9.1.1 |
| tailwindcss | ^4.1.18 |
| tsup | ^8.4.0 |
| tw-animate-css | ^1.4.0 |
| typescript | ^5.8.3 |
| vite | ^6.3.1 |
| vitest | ^3.2.4 |
Peer dependencies
| ID | Version |
|---|---|
| react | ^19.0 |
| react-dom | ^19.0 |