vardumper/picocss-storybook

Storybook.js for PicoCSS

v0.1.6 2025-10-26 12:41 UTC

Requires

• bentools/cartesian-product: ^1.4.1
• fakerphp/faker: ^1.24.1
• matthiasmullie/minify: ^1.3.73
• mnapoli/silly: ^1.9.1
• symfony/yaml: ^7.2.3
• twig/intl-extra: ^3.20.0

Requires (Dev)

• brainmaestro/composer-git-hooks: dev-master
• friendsofphp/php-cs-fixer: ^3.70.0
• phpmd/phpmd: ^2.15
• symplify/easy-ci: ^12.1
• symplify/easy-coding-standard: ^12.5.8
• twig/twig: ^3.20.0

MIT

• Erik Pöhler

• framework
• pico
• storybook
• storybook.js
• picocss

README

Storybook Skeleton for the PicoCSS Default Theme.

Requirements

You need NPM and Yarn installed on your machine to work with Storybook. On macOS, you can install them both with brew brew install npm yarn. Additionally, PHP and Twig are used to compile Stories. On macOS PHP is installed with brew install php.

Why does this repository exist?

Storybook is a great tool to develop and test components in isolation. It is also a great tool to document components. This repository is a skeleton for the PicoCSS Default Theme. It is a starting point to develop your own designs based on PicoCSS and document components.

Goals

The goal of this repository is to provide a starting point for developing PicoCSS Themes and Color Schemes. Starting off with a component library utilizing the PicoCSS Default Theme.

Getting Started

To get started, first clone this repository.

git clone [e-mail]:vardumper/picocss-storybook.git
cd picocss-storybook

And run:

composer install
# merge PicoCSS sepcification into the HTML5 specification
php bin/console picocss
# render stories for storybook (to be replaced with generators in extended-htmldocument)
php bin/console storybook
yarn install
yarn storybook

This will install Composer and Yarn dependencies, build the storybook, and finally start Storybook for you.