[Toolkit][Flowbite] Add kit Flowbite 4.0 base by DcgRG · Pull Request #28 · symfony/ux.symfony.com

DcgRG · 2026-03-08T12:56:06Z

Q	A
Bug fix?	no
New feature?	yes
Issues
License	MIT

Kocal · 2026-03-12T21:29:03Z

config/packages/symfonycasts_tailwind.yaml


    input_css:
        - assets/styles/toolkit-shadcn.css
+        - assets/styles/toolkit-flowbite-4.css


This file is not built when running tailwind:build, only the first is (I don't know why this choice?)

But it now means that we should replace our calls to tailwind:build to:

bin/console tailwind:build assets/styles/toolkit-shadcn.css bin/console tailwind:build assets/styles/toolkit-flowbite-4.css

Maybe we can create a Composer script to make things easier?

Yep, i'll do it ! :)

src/Enum/ToolkitKitId.php

Kocal · 2026-04-04T08:01:29Z

Thank you!

Copilot

Pull request overview

Adds the Flowbite 4.0 Toolkit kit to the UX Toolkit site/docs so Flowbite components can be previewed and documented alongside existing kits.

Changes:

Introduces a new flowbite-4 kit ID with a main color, icon, and Twig helper to render kit color in the UI.
Adds Flowbite 4 component documentation templates (markdown Twig) and a dedicated Flowbite 4 asset entrypoint (JS + Tailwind/CSS).
Updates importmap, Tailwind inputs, and Composer scripts/lockfile to include Flowbite 4 dependencies and build steps.

Reviewed changes

Copilot reviewed 32 out of 34 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
templates/ux_packages/toolkit.html.twig	Uses a per-kit CSS variable color for kit tiles.
templates/toolkit/docs/flowbite-4/alert.md.twig	Adds Flowbite 4 Alert docs (demo/usage/examples).
templates/toolkit/docs/flowbite-4/badge.md.twig	Adds Flowbite 4 Badge docs.
templates/toolkit/docs/flowbite-4/button-group.md.twig	Adds Flowbite 4 ButtonGroup docs (incl. accessibility block).
templates/toolkit/docs/flowbite-4/button.md.twig	Adds Flowbite 4 Button docs.
templates/toolkit/docs/flowbite-4/card.md.twig	Adds Flowbite 4 Card docs.
templates/toolkit/docs/flowbite-4/checkbox.md.twig	Adds Flowbite 4 Checkbox docs.
templates/toolkit/docs/flowbite-4/indicator.md.twig	Adds Flowbite 4 Indicator docs.
templates/toolkit/docs/flowbite-4/input.md.twig	Adds Flowbite 4 Input docs.
templates/toolkit/docs/flowbite-4/kbd.md.twig	Adds Flowbite 4 KBD docs.
templates/toolkit/docs/flowbite-4/label.md.twig	Adds Flowbite 4 Label docs.
templates/toolkit/docs/flowbite-4/modal.md.twig	Adds Flowbite 4 Modal docs.
templates/toolkit/docs/flowbite-4/pagination.md.twig	Adds Flowbite 4 Pagination docs.
templates/toolkit/docs/flowbite-4/radio.md.twig	Adds Flowbite 4 Radio docs.
templates/toolkit/docs/flowbite-4/select.md.twig	Adds Flowbite 4 Select docs.
templates/toolkit/docs/flowbite-4/skeleton.md.twig	Adds Flowbite 4 Skeleton docs.
templates/toolkit/docs/flowbite-4/spinner.md.twig	Adds Flowbite 4 Spinner docs.
templates/toolkit/docs/flowbite-4/table.md.twig	Adds Flowbite 4 Table docs.
templates/toolkit/docs/flowbite-4/tabs.md.twig	Adds Flowbite 4 Tabs docs.
templates/toolkit/docs/flowbite-4/textarea.md.twig	Adds Flowbite 4 Textarea docs.
templates/toolkit/docs/flowbite-4/toggle.md.twig	Adds Flowbite 4 Toggle docs.
src/Twig/Extension/ToolkitRuntime.php	Adds runtime method to expose kit main color to Twig.
src/Twig/Extension/ToolkitExtension.php	Registers new `toolkit_main_color` Twig function.
src/Enum/ToolkitKitId.php	Adds `Flowbite4` enum case + main color mapping.
assets/toolkit-flowbite-4.js	New importmap entrypoint to load Flowbite + Stimulus controllers.
assets/styles/toolkit-flowbite-4.css	New Tailwind/CSS entry stylesheet for Flowbite 4 kit.
assets/icons/toolkit/flowbite-4.svg	Adds Toolkit icon for the Flowbite 4 kit.
importmap.php	Adds Flowbite 4 entrypoint, controllers, and Flowbite dependencies.
config/packages/symfonycasts_tailwind.yaml	Adds Flowbite 4 CSS to Tailwind build inputs.
composer.json	Adjusts post-install/update scripts and adds a multi-target Tailwind build script.
README.md	Documents building Toolkit assets via Composer script.
composer.lock	Updates symfony/ux-toolkit reference (and related metadata).
config/reference.php	Updates config reference type docs (likely from dependency update).
.twig-cs-fixer.dist.php	Adjusts Twig CS Fixer directory/file naming rules for toolkit docs.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-04T08:04:44Z

src/Twig/Extension/ToolkitExtension.php

        yield new TwigFunction('toolkit_code_example', [ToolkitRuntime::class, 'codeExample'], ['is_safe' => ['html']]);
        yield new TwigFunction('toolkit_code_demo', [ToolkitRuntime::class, 'codeDemo'], ['is_safe' => ['html']]);
        yield new TwigFunction('toolkit_code_usage', [ToolkitRuntime::class, 'codeUsage'], ['is_safe' => ['html']]);
+        yield new TwigFunction('toolkit_main_color', [ToolkitRuntime::class, 'kitColor'], ['is_safe' => ['html']]);


toolkit_main_color returns a plain string used inside an HTML attribute; marking the Twig function as is_safe: ['html'] disables escaping unnecessarily and makes it easier to introduce an injection if the implementation ever changes. Consider removing the is_safe flag (or using an attribute-safe strategy) so Twig keeps escaping by default.

Suggested change

yield new TwigFunction('toolkit_main_color', [ToolkitRuntime::class, 'kitColor'], ['is_safe' => ['html']]);

yield new TwigFunction('toolkit_main_color', [ToolkitRuntime::class, 'kitColor']);

Copilot · 2026-04-04T08:04:44Z

.twig-cs-fixer.dist.php

    ->addRule(new FileNameRule(case: FileNameRule::PASCAL_CASE, baseDirectory: 'templates/components'))
    ->addRule(new DirectoryNameRule(case: DirectoryNameRule::PASCAL_CASE, baseDirectory: 'demos/live_memory/components'))
    ->addRule(new FileNameRule(case: FileNameRule::PASCAL_CASE, baseDirectory: 'demos/live_memory/components'))
+    ->addRule(new DirectoryNameRule(case: FileNameRule::KEBAB_CASE, baseDirectory: 'templates/toolkit/docs/'))


DirectoryNameRule is being configured with case: FileNameRule::KEBAB_CASE. This looks like the wrong enum/constant source (DirectoryNameRule already uses its own constants, e.g. DirectoryNameRule::PASCAL_CASE above). Switch to the matching DirectoryNameRule::KEBAB_CASE constant to avoid misconfiguration or runtime errors if the constants diverge.

Suggested change

->addRule(new DirectoryNameRule(case: FileNameRule::KEBAB_CASE, baseDirectory: 'templates/toolkit/docs/'))

->addRule(new DirectoryNameRule(case: DirectoryNameRule::KEBAB_CASE, baseDirectory: 'templates/toolkit/docs/'))

templates/toolkit/docs/flowbite-4/input.md.twig

templates/toolkit/docs/flowbite-4/select.md.twig

Copilot · 2026-04-04T08:04:45Z

importmap.php

+    'flowbite-datepicker' => [
+        'version' => '2.0.0',
+    ],


flowbite-datepicker is added to the importmap but doesn't appear to be referenced anywhere else in the repository. If it's not required for the current Flowbite 4 base kit, consider removing it until a datepicker component is actually introduced to avoid extra downloads/maintenance.

Suggested change

'flowbite-datepicker' => [

'version' => '2.0.0',

],

Copilot · 2026-04-04T08:04:45Z

composer.json

+        "tailwind:build": [
+            "@php bin/console tailwind:build assets/styles/app-tailwind.css",
+            "@php bin/console tailwind:build assets/styles/toolkit-shadcn.css",
+            "@php bin/console tailwind:build assets/styles/toolkit-flowbite-4.css"


The new tailwind:build script uses @php bin/console ... while the rest of the Flex auto-scripts use symfony-cmd. Using symfony-cmd here as well keeps behavior consistent (env vars, Symfony CLI integration) and avoids differences between local/CI execution.

Kocal · 2026-04-04T09:10:43Z

Oops, I totally forgot that I asked GitHub Copilot for review, and merged before its review 😅

Kocal · 2026-04-04T11:21:15Z

Done in 20a1afc

Kocal requested changes Mar 12, 2026

View reviewed changes

Kocal mentioned this pull request Mar 12, 2026

[Toolkit][Flowbite] Add kit Flowbite 4.0 base symfony/ux#3368

Merged

DcgRG force-pushed the toolkit-flowbite-init branch from 1ed4f93 to deedb34 Compare March 18, 2026 08:43

DcgRG added 27 commits April 4, 2026 07:52

[Toolkit][Flowbite] Add Badge component

bbf8508

[Toolkit][Flowbite] Add Badge component

e6c3ef4

[Toolkit][Flowbite] Add Button component

70a141a

[Toolkit][Flowbite] Add Kbd component

116f752

[Toolkit][Flowbite] Add Card component

af4c59c

[Toolkit][Flowbite] Add Table component

2652b0c

[Toolkit][Flowbite] Add Input and Label component

d53f5e2

[Toolkit][Flowbite] Add Textarea component

bdd75b1

[Toolkit][Flowbite] Add Select component

a34c9f1

[Toolkit][Flowbite] Add Checkbox component

6fbee08

[Toolkit][Flowbite] Add Skeleton component

7192f5e

[Toolkit][Flowbite] Add Alert component

59c234a

[Toolkit][Flowbite] Add Indicator component

226f0c4

[Toolkit][Flowbite] Add Toggle component

4fdf938

[Toolkit][Flowbite] Add Spinner component

f8ef967

[Toolkit][Flowbite] Add Modal component

346e930

[Toolkit][Flowbite] Add Button group component

17f18c2

[Toolkit][Flowbite] Add Pagination component

e4a8ce6

[Toolkit][Flowbite] Add Radio component

d8aace8

[Toolkit][Flowbite] Add Tabs component

7935faf

[Toolkit][Flowbite] import flowbite

5bda055

[Toolkit][Flowbite] fix assets imports

d6d51ad

[Toolkit][Flowbite] add main color

8e56e1e

[Toolkit][Flowbite] update alert component

6a14628

[Toolkit][Flowbite] fix doc

8c2c0d9

[Toolkit][Flowbite] add composer script

a6514eb

[Toolkit][Flowbite] doc select + skeleton + spinner + tabs

279cd48

DcgRG and others added 2 commits April 4, 2026 07:54

[Toolkit][Flowbite] fix Alert

a6b76a9

tweaks

62d3254

Kocal force-pushed the toolkit-flowbite-init branch 2 times, most recently from 28def89 to 76d7153 Compare April 4, 2026 07:20

Tweaks

2019ac8

Kocal force-pushed the toolkit-flowbite-init branch from 76d7153 to 2019ac8 Compare April 4, 2026 07:55

Kocal approved these changes Apr 4, 2026

View reviewed changes

Kocal requested a review from Copilot April 4, 2026 07:58

Copilot started reviewing on behalf of Kocal April 4, 2026 07:59 View session

Kocal merged commit 1c63da4 into symfony:main Apr 4, 2026
5 of 6 checks passed

Copilot AI reviewed Apr 4, 2026

View reviewed changes

DcgRG deleted the toolkit-flowbite-init branch April 8, 2026 06:36

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[Toolkit][Flowbite] Add kit Flowbite 4.0 base#28

[Toolkit][Flowbite] Add kit Flowbite 4.0 base#28
Kocal merged 30 commits intosymfony:mainfrom
DcgRG:toolkit-flowbite-init

DcgRG commented Mar 8, 2026

Uh oh!

Kocal Mar 12, 2026

Uh oh!

DcgRG Mar 13, 2026

Uh oh!

Uh oh!

Uh oh!

Kocal commented Apr 4, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 4, 2026

Uh oh!

Copilot AI Apr 4, 2026

Uh oh!

Uh oh!

Uh oh!

Copilot AI Apr 4, 2026

Uh oh!

Copilot AI Apr 4, 2026

Uh oh!

Kocal commented Apr 4, 2026

Uh oh!

Kocal commented Apr 4, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	yield new TwigFunction('toolkit_main_color', [ToolkitRuntime::class, 'kitColor'], ['is_safe' => ['html']]);
	yield new TwigFunction('toolkit_main_color', [ToolkitRuntime::class, 'kitColor']);

	->addRule(new DirectoryNameRule(case: FileNameRule::KEBAB_CASE, baseDirectory: 'templates/toolkit/docs/'))
	->addRule(new DirectoryNameRule(case: DirectoryNameRule::KEBAB_CASE, baseDirectory: 'templates/toolkit/docs/'))

Uh oh!

Conversation

DcgRG commented Mar 8, 2026

Uh oh!

Kocal Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

DcgRG Mar 13, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Kocal commented Apr 4, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 4, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI Apr 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 4, 2026

Choose a reason for hiding this comment

Uh oh!

Kocal commented Apr 4, 2026

Uh oh!

Kocal commented Apr 4, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants