webhubworks / mvb-design-system
MVB Design System for Craft CMS
Installs: 89
Dependents: 0
Suggesters: 0
Security: 0
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Language:CSS
Requires
- php: ^8.2
- craftcms/cms: ^5.0
- illuminate/collections: ^10.0
- nystudio107/craft-vite: ^5.0.0
- solspace/craft-freeform: ^5.10.16.1
- twig/intl-extra: ^3.21.0
- dev-master
- 1.0.51
- 1.0.50
- 1.0.49
- 1.0.48
- 1.0.47
- 1.0.46
- 1.0.45
- 1.0.44
- 1.0.43
- 1.0.42
- 1.0.41
- 1.0.40
- 1.0.39
- 1.0.38
- 1.0.37
- 1.0.36
- 1.0.35
- 1.0.34
- 1.0.33
- 1.0.32
- 1.0.31
- 1.0.30
- 1.0.29
- 1.0.28
- 1.0.27
- 1.0.26
- 1.0.25
- 1.0.24
- 1.0.23
- 1.0.22
- 1.0.21
- 1.0.20
- 1.0.19
- 1.0.18
- 1.0.17
- 1.0.16
- 1.0.15
- 1.0.14
- 1.0.13
- 1.0.12
- 1.0.11
- 1.0.10
- 1.0.9
- 1.0.8
- 1.0.7
- 1.0.6
- 1.0.5
- 1.0.4
- 1.0.3
- 1.0.0
- dev-johannes
This package is auto-updated.
Last update: 2025-07-04 14:48:31 UTC
README
This is a Storybook based design system packaged as a Craft CMS module for integrating with any Craft CMS project. Built on:
- Twig 3
- Vanilla JS
- Tailwind CSS 4
- Vite 5
With this module you can:
- Use the MVB Design System components in your Craft CMS templates.
- Use the provided Vite build script (You don't need to set up a build script yourself).
- Use the provided Storybook for discovering and testing the components.
Setup
Install the Craft module
composer require webhubworks/mvb-design-system
# or
ddev composer require webhubworks/mvb-design-system
Load the module
// config/app.php 'modules' => [ // other modules... 'mvbdesignsystem' => [ 'class' => \webhubworks\mvbdesignsystem\MvbDesignSystem::class ] ], // ... 'bootstrap' => ['mvbdesignsystem']
Enable Vite and Freeform
craft plugin/enable vite craft plugin/enable freeform
Add the Craft Vite plugin config
Copy the Craft Vite plugin config with this command:
cp vendor/webhubworks/mvb-design-system/stubs/vite.php ./config/vite.php
Add your theme.css
Copy the default theme.css
file from the webhubworks/mvb-design-system
module to the root directory of your Craft CMS project. This file is required to define your primary color and can be used to override the default styles of the design system.
cp vendor/webhubworks/mvb-design-system/stubs/theme.css ./theme.css
Required env variables
Make sure that your .env
file contains the following variables:
CRAFT_ENVIRONMENT PRIMARY_SITE_URL
Change node version in ddev config.yaml
nodejs_version: 22
Untrack dist files in .gitignore
/web/dist/**/*
Usage
Include the design system in your templates
{# In the <head> of your layout template #} {{ craft.vite.script('js/app.js', false) }}
Render your first component
{{ render('atoms.button', { label: 'Click me', }) }}
Build for production
There are two CLI commands ready to build the project for production:
# use this to build the assets of the design system and your own templates craft mvbdesignsystem/vite/build # use this to build the storybook for static hosting craft mvbdesignsystem/storybook/build
Develop
Configure DDEV
The dev servers run within DDEV, so you need to ensure that your DDEV project is set up correctly. Make sure you have the following in your .ddev/config.yaml
:
# ... web_extra_exposed_ports: - name: node-vite container_port: 5173 http_port: 5172 https_port: 5173 - name: storybook container_port: 6006 http_port: 6005 https_port: 6006 # ...
Run dev servers
To develop the design system, you can use the following command, which you typically run at the same time in two terminal windows:
# use this to start the development server for the design system craft mvbdesignsystem/vite/dev # use this to start the storybook for the design system craft mvbdesignsystem/storybook/dev # combined for fast update and build/dev ddev composer update webhubworks/mvb-design-system && ddev craft mvbdesignsystem/vite/build ddev composer update webhubworks/mvb-design-system && ddev craft mvbdesignsystem/vite/dev
Fix icon classes
All projects use prefixed Font Awesome icon classes. To make them compatible with the new Icons Atom, we’ve added a command that handles the necessary adjustments. After using the command, all "icon fields" needs to be converted to native icon fields via the CP:
craft mvbdesignsystem/fix-icons