Download the PHP package viget/craft-parts-kit without Composer
On this page you can find all versions of the php package viget/craft-parts-kit. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Informations about the package craft-parts-kit
Craft CMS Parts Kit Plugin
A simple component library plugin for Craft CMS (think Storybook or Fractal).
It uses Craft's built-in Twig rendering and does not depend on build tools or npm packages.
This plugin scans your templates/parts-kit directory and serves a prebuilt UI that loads each component in an iframe.
The UI is provided by Viget's Parts Kit Web Component.
https://github.com/user-attachments/assets/b1205f58-1d8b-4c73-9bad-60b3e6eb2015
Key features
- Low abstraction: render with your real Twig templates
- Zero-build tools: Simply add Twig files to the
templates/parts-kitdirectory. - Clean URLs for each part (e.g.
/parts-kit/button/default)
Requirements
This plugin requires Craft CMS 5.0.0 or later, and PHP 8.2 or later.
Installation
You can install this plugin from the Craft Plugin Store (Coming Soon) or with Composer.
From the Plugin Store (Coming Soon)
Go to the Plugin Store in your project’s Control Panel and search for “Parts Kit”. Then press “Install”.
With Composer
Open your terminal and run the following commands:
Setup & Usage
-
Create templates in
templates/parts-kit(examples below). -
(Optional) Create a configuration file at
config/parts-kit.phpto customize settings. - Visit
/parts-kiton your site. The plugin registers this route and renders the UI.
That's it. The UI fetches its config from the plugin's JSON endpoint and lists your parts automatically.
Configuration
You can customize the plugin's behavior by creating a config/parts-kit.php file in your project:
Example Head Template
Create a partial at templates/_partials/head.twig:
This partial will be automatically included in the <head> of each parts kit page. You can also include this same partial in your main site layout to ensure consistency.
Creating & Organizing Your Parts (Twig templates)
Create Twig templates under templates/parts-kit. Folders become navigation groups; files become pages. File and folder names are humanized for display.
Hidden files/folders (names starting with a dot) are ignored. Root-level index.twig/index.html are also ignored.
Example tree
Each file is rendered at a clean URL that mirrors the path without the extension. For example:
templates/parts-kit/button/default.twig→/parts-kit/button/defaulttemplates/parts-kit/forms/text-input.twig→/parts-kit/forms/text-input
The Parts Kit plugin provides an Action URL that returns a JSON config used by our Parts Kit UI.
Show Example JSON
Example Usage in Templates
Create a file in the templates/parts-kit/button/default.twig directory and simply import and render your component:
That's it! No need to extend layouts or wrap your code in blocks.
Testing
The plugin uses Codeception with Craft's testing framework. Tests run against a real Craft instance, so a database is required.
-
Install the dev dependencies:
-
Create a
craft_testdatabase (MySQL or PostgreSQL). -
Copy the matching env example to
tests/.envand fill in your database credentials: - Run the suite:
Once the suite has run at least once, add --env fast to skip the database rebuild between runs (e.g. ./vendor/bin/codecept run unit --env fast).
Continuous integration runs the suite on PHP 8.2 against MySQL and PostgreSQL for every pull request and pushes to main (see .github/workflows/ci.yml).
Local development with DDEV
This repo ships a DDEV harness so you can boot a real Craft CMS install with the plugin loaded and live-editable. The plugin source lives at the repo root; a full Craft app lives in craft-install/ and loads the plugin via a Composer path repository (a symlink), so edits to src/ are reflected immediately.
Getting started
Then visit:
- https://craft-parts-kit.ddev.site/parts-kit — the component library, pre-populated with sample parts
- https://craft-parts-kit.ddev.site/admin — the control panel (login
admin/password)
The dev install ships a few sample parts under craft-install/templates/parts-kit/ and a craft-install/config/parts-kit.php that sets requireViewPermission => false, so /parts-kit is viewable anonymously without logging in. These dev-only files are excluded from the distributed plugin package and do not change the plugin's production defaults.
Useful commands
Gotcha:
composer_rootis set to.in.ddev/config.yaml, soddev composertargets the plugin's rootcomposer.json, not the Craft app. To manage Craft app dependencies, run them againstcraft-install/explicitly:Note: The browsing UI loads from the unpkg CDN, so the dev environment needs network access.
Credits
Built by Viget. The Parts Kit UI is powered by our JavaScript library documented at vigetlabs/parts-kit.