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

DcgRG · 2026-03-08T12:54:16Z

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

Add a new kit for Toolkit "Flowbite v4.0"

Kocal · 2026-03-12T21:11:04Z

🤯

on it :)

Kocal

I just looked at Alert and Button Group recipes for the moment, except the examples de-synchronization and the installation steps to improve for AssetMapper user, it's a very very good work, thanks you @DcgRG!

I did a minor review at symfony/ux.symfony.com#28 (review) too

Feel free to ping me for a new code review after doing the changes. Thanks!

Kocal · 2026-03-12T21:25:31Z

src/Toolkit/kits/flowbite-4/INSTALL.md

+- Install flowbite via npm — this creates the node_modules/flowbite
+```
+npm install flowbite --save
+```


This, and the @source "../../node_modules/flowbite"; is a no go. People using AssetMapper don't want to deal with Node.js, npm dependencies and cie.

Can't we have a workaround by running importmap:require flowbite? I see it downloads a dist/flowbite.index.js that seems to contain CSS classes, required for Tailwind discovery.

Thanks for you review and sorry for this big PR! 😅

I understand, i'll use by importmap, but with this method we dont have themes in sources so i'll had the design tokens like you made it for shadcn.

I would like to ask you about components such as modals and tabs. I created the stimulus controller with native JS like you did for the shadcn modal, but should I use the Flowbite Modal object? I used the same properties.

I think native is preferable, but I understand those who want to use Flowbite JS. Should I create a modal (Flowbite JS) and a native modal (same CSS classes but with a dialog object)?

Kocal · 2026-03-12T21:37:17Z

src/Toolkit/kits/flowbite-4/alert/examples/Demo.html.twig

Can you use instead the same examples from the documentation? The goal in our Toolkit documentation and components presentation is to mimic the official documentation, which is not the case here:

I just looked at Alert component, but please take care about all other recipes please, thanks! 🙏🏻

Yep, I copied the official documentation for most cases, but I'll see about catching up on the ones I adjusted.

Kocal · 2026-03-12T21:38:27Z

src/Toolkit/kits/flowbite-4/button-group/examples/Demo.html.twig

There is visual differences here, the buttons background is different:

DcgRG · 2026-03-13T08:21:31Z

@Kocal I still have to make some more changes, I'll ping you when it's okay.

Can you just answer my question about the js components when you have time, please?

MrYamous · 2026-03-13T11:38:46Z

src/Toolkit/kits/flowbite-4/table/templates/components/Table/Head.html.twig

@@ -0,0 +1,7 @@
+{# @block content The header cell content #}
+<th
+        class="{{ ('px-6 py-3 font-medium ' ~ attributes.render('class'))|tailwind_merge }}"


Suggested change

class="{{ ('px-6 py-3 font-medium ' ~ attributes.render('class'))|tailwind_merge }}"

class="{{ ('px-6 py-3 font-medium ' ~ attributes.render('class'))|tailwind_merge }}"

MrYamous · 2026-03-13T12:13:46Z

src/Toolkit/kits/flowbite-4/indicator/examples/Usage.html.twig

@@ -0,0 +1,5 @@
+<twig:Indicator
+    variant="brand | alternative | gray | danger | success | warning"


I didn't find reference to this alternative variant for Indicator component, did I miss something or some context ?

You right, this is fixed

MrYamous · 2026-03-13T12:25:11Z

src/Toolkit/kits/flowbite-4/badge/templates/components/Badge.html.twig

@@ -0,0 +1,39 @@
+{# @prop variant 'brand'|'alternative'|'gray'|'danger'|'success'|'warning' The visual style variant. Defaults to `brand` #}
+{# @prop size 'default'|'lg' The badge size. Defaults to `default` #}
+{# @prop shape 'default'|'pill' The badge shape. Defaults to `default` #}


Values 'default'|'pill' do not match the code which is about rounded or pill

MrYamous · 2026-03-13T12:26:45Z

src/Toolkit/kits/flowbite-4/badge/templates/components/Badge.html.twig

+{# @prop variant 'brand'|'alternative'|'gray'|'danger'|'success'|'warning' The visual style variant. Defaults to `brand` #}
+{# @prop size 'default'|'lg' The badge size. Defaults to `default` #}
+{# @prop shape 'default'|'pill' The badge shape. Defaults to `default` #}
+{# @prop border 'none'|'border' The badge border. Defaults to `none` #}


Value border do not match the code bordered

MrYamous · 2026-03-13T16:01:09Z

Thanks for this work 👍
I took a first look focusing mainly on the syntax/code doc. I'll try to do another round later

DcgRG · 2026-03-13T20:09:09Z

Thanks for this work 👍 I took a first look focusing mainly on the syntax/code doc. I'll try to do another round later

@MrYamous Thanks for you review !

MrYamous · 2026-03-14T10:05:54Z

src/Toolkit/kits/flowbite-4/tabs/templates/components/Tabs/List.html.twig

+        variant: {
+            default: 'border-b border-default',
+            line: 'border-b border-default',
+            pill: '',


The pill variant has no class, is that normal ?
If he exists, not mentioned in doc at the top of the file

MrYamous · 2026-03-14T10:16:37Z

src/Toolkit/kits/flowbite-4/pagination/templates/components/Pagination/Previous.html.twig

+    size="default"
+    size="{{ asIcon ? 'icon' : 'default' }}"


The size attribute seems to be in double here

MrYamous · 2026-03-14T10:21:25Z

src/Toolkit/kits/flowbite-4/label/templates/components/Label.html.twig

@@ -0,0 +1,18 @@
+{# @prop variant 'default'|'invalid' The visual style variant. Defaults to `brand` #}


Suggested change

{# @prop variant 'default'|'invalid' The visual style variant. Defaults to `brand` #}

{# @prop variant 'default'|'invalid' The visual style variant. Defaults to `default` #}

Kocal

I will take some time this lunchtime to review and hopefully merge this big PR 🤞🏻

Kocal · 2026-04-03T07:36:46Z

src/Toolkit/kits/shadcn/INSTALL.md

+@import "../vendor/flowbite/dist/flowbite.min.css";
+@source "../vendor/flowbite";


Thanks, i've reverted this

Kocal · 2026-04-04T06:30:29Z

(I'm on it 🤓)

Copilot

Pull request overview

Adds a new Flowbite v4 Toolkit kit, providing Twig-based UI components (with Tailwind classes) and accompanying assets/tests so the kit can be rendered and validated via functional snapshot tests.

Changes:

Introduces the new flowbite-4 kit manifest plus multiple component recipes (templates, manifests, examples).
Adds Stimulus controllers for interactive components (Tabs, Modal, Alert dismiss).
Adds/updates functional rendering snapshots and updates the Toolkit changelog.

Reviewed changes

Copilot reviewed 263 out of 263 changed files in this pull request and generated 17 comments.

Show a summary per file

File	Description
`src/Toolkit/CHANGELOG.md`	Announces the addition of the Flowbite v4 kit.
`src/Toolkit/kits/flowbite-4/manifest.json`	Declares the new kit (name/description/license/homepage).
`src/Toolkit/kits/flowbite-4/alert/manifest.json`	Registers Alert recipe and its dependencies.
`src/Toolkit/kits/flowbite-4/alert/templates/components/Alert.html.twig`	Implements Alert component structure, variants, and dismissible support.
`src/Toolkit/kits/flowbite-4/alert/templates/components/Alert/Title.html.twig`	Alert title subcomponent.
`src/Toolkit/kits/flowbite-4/alert/templates/components/Alert/Description.html.twig`	Alert description subcomponent.
`src/Toolkit/kits/flowbite-4/alert/templates/components/Alert/Action.html.twig`	Alert action slot container.
`src/Toolkit/kits/flowbite-4/alert/assets/controllers/alert_controller.js`	Stimulus controller wiring Flowbite’s dismiss behavior.
`src/Toolkit/kits/flowbite-4/alert/examples/Usage.html.twig`	Alert usage example.
`src/Toolkit/kits/flowbite-4/alert/examples/Action.html.twig`	Alert action example.
`src/Toolkit/kits/flowbite-4/alert/examples/With Icon.html.twig`	Alert with icon examples.
`src/Toolkit/kits/flowbite-4/alert/examples/With List.html.twig`	Alert list-content examples.
`src/Toolkit/kits/flowbite-4/alert/examples/Dismissing.html.twig`	Dismissible alert examples.
`src/Toolkit/kits/flowbite-4/alert/examples/Demo.html.twig`	Alert demo example.
`src/Toolkit/kits/flowbite-4/alert/examples/Border.html.twig`	Alert border variants examples.
`src/Toolkit/kits/flowbite-4/alert/examples/Accent.html.twig`	Alert accent-border examples.
`src/Toolkit/kits/flowbite-4/badge/manifest.json`	Registers Badge recipe and dependencies.
`src/Toolkit/kits/flowbite-4/badge/templates/components/Badge.html.twig`	Implements Badge variants/sizes/shapes/borders.
`src/Toolkit/kits/flowbite-4/badge/examples/Usage.html.twig`	Badge usage example.
`src/Toolkit/kits/flowbite-4/badge/examples/Pill.html.twig`	Badge pill examples.
`src/Toolkit/kits/flowbite-4/badge/examples/Large.html.twig`	Badge large examples.
`src/Toolkit/kits/flowbite-4/badge/examples/Icon.html.twig`	Badge with icon examples.
`src/Toolkit/kits/flowbite-4/badge/examples/Demo.html.twig`	Badge demo example.
`src/Toolkit/kits/flowbite-4/badge/examples/Bordered.html.twig`	Badge bordered examples.
`src/Toolkit/kits/flowbite-4/badge/examples/As link.html.twig`	Badge rendered as a link examples.
`src/Toolkit/kits/flowbite-4/button/manifest.json`	Registers Button recipe and dependencies.
`src/Toolkit/kits/flowbite-4/button/templates/components/Button.html.twig`	Implements Flowbite-styled Button with variants/sizes/shapes.
`src/Toolkit/kits/flowbite-4/button/examples/Usage.html.twig`	Button usage example.
`src/Toolkit/kits/flowbite-4/button/examples/Demo.html.twig`	Button demo example.
`src/Toolkit/kits/flowbite-4/button/examples/With icon.html.twig`	Button with icons examples.
`src/Toolkit/kits/flowbite-4/button/examples/Size.html.twig`	Button size examples.
`src/Toolkit/kits/flowbite-4/button/examples/Pill.html.twig`	Button pill examples.
`src/Toolkit/kits/flowbite-4/button/examples/Outline.html.twig`	Button outline examples.
`src/Toolkit/kits/flowbite-4/button/examples/Loader.html.twig`	Button loading-with-spinner example.
`src/Toolkit/kits/flowbite-4/button/examples/Icon.html.twig`	Icon-only button examples.
`src/Toolkit/kits/flowbite-4/button-group/manifest.json`	Registers Button Group recipe and dependencies.
`src/Toolkit/kits/flowbite-4/button-group/templates/components/ButtonGroup.html.twig`	Implements grouped button container with orientation support.
`src/Toolkit/kits/flowbite-4/button-group/examples/Usage.html.twig`	Button group usage example.
`src/Toolkit/kits/flowbite-4/button-group/examples/Size.html.twig`	Button group size example.
`src/Toolkit/kits/flowbite-4/button-group/examples/Orientation.html.twig`	Button group vertical orientation example.
`src/Toolkit/kits/flowbite-4/button-group/examples/Demo.html.twig`	Button group demo example.
`src/Toolkit/kits/flowbite-4/card/manifest.json`	Registers Card recipe and dependencies.
`src/Toolkit/kits/flowbite-4/card/templates/components/Card.html.twig`	Implements Card container styling.
`src/Toolkit/kits/flowbite-4/card/templates/components/Card/Header.html.twig`	Card header slot container.
`src/Toolkit/kits/flowbite-4/card/templates/components/Card/Content.html.twig`	Card content slot container.
`src/Toolkit/kits/flowbite-4/card/templates/components/Card/Footer.html.twig`	Card footer slot container.
`src/Toolkit/kits/flowbite-4/card/templates/components/Card/Title.html.twig`	Card title element with configurable tag.
`src/Toolkit/kits/flowbite-4/card/examples/Usage.html.twig`	Card usage example.
`src/Toolkit/kits/flowbite-4/card/examples/Demo.html.twig`	Card demo example.
`src/Toolkit/kits/flowbite-4/card/examples/With Button.html.twig`	Card with footer button example.
`src/Toolkit/kits/flowbite-4/card/examples/With image.html.twig`	Card with image/media example.
`src/Toolkit/kits/flowbite-4/card/examples/Form.html.twig`	Card-form layout example.
`src/Toolkit/kits/flowbite-4/checkbox/manifest.json`	Registers Checkbox recipe and dependencies.
`src/Toolkit/kits/flowbite-4/checkbox/templates/components/Checkbox.html.twig`	Implements Checkbox input styling.
`src/Toolkit/kits/flowbite-4/checkbox/examples/Usage.html.twig`	Checkbox usage example.
`src/Toolkit/kits/flowbite-4/checkbox/examples/Demo.html.twig`	Checkbox demo example.
`src/Toolkit/kits/flowbite-4/checkbox/examples/Disabled.html.twig`	Checkbox disabled examples.
`src/Toolkit/kits/flowbite-4/checkbox/examples/Bordered.html.twig`	Checkbox bordered-card examples.
`src/Toolkit/kits/flowbite-4/indicator/manifest.json`	Registers Indicator recipe and dependencies.
`src/Toolkit/kits/flowbite-4/indicator/templates/components/Indicator.html.twig`	Implements Indicator dot/count variants and sizes.
`src/Toolkit/kits/flowbite-4/indicator/examples/Usage.html.twig`	Indicator usage example.
`src/Toolkit/kits/flowbite-4/indicator/examples/Demo.html.twig`	Indicator demo example.
`src/Toolkit/kits/flowbite-4/indicator/examples/Count.html.twig`	Indicator count-on-button example.
`src/Toolkit/kits/flowbite-4/input/manifest.json`	Registers Input recipe and dependencies.
`src/Toolkit/kits/flowbite-4/input/templates/components/Input.html.twig`	Implements Input styling with invalid/disabled states.
`src/Toolkit/kits/flowbite-4/input/examples/Usage.html.twig`	Input usage example.
`src/Toolkit/kits/flowbite-4/input/examples/Demo.html.twig`	Input form demo.
`src/Toolkit/kits/flowbite-4/input/examples/Disabled.html.twig`	Disabled/readonly examples.
`src/Toolkit/kits/flowbite-4/input/examples/Invalid.html.twig`	Invalid-state example.
`src/Toolkit/kits/flowbite-4/input/examples/File.html.twig`	File input example.
`src/Toolkit/kits/flowbite-4/input/examples/With Button.html.twig`	Input with adjacent button example.
`src/Toolkit/kits/flowbite-4/kbd/manifest.json`	Registers Kbd recipe and dependencies.
`src/Toolkit/kits/flowbite-4/kbd/templates/components/Kbd.html.twig`	Implements keyboard key styling.
`src/Toolkit/kits/flowbite-4/kbd/examples/Usage.html.twig`	Kbd usage example.
`src/Toolkit/kits/flowbite-4/kbd/examples/Demo.html.twig`	Kbd demo example.
`src/Toolkit/kits/flowbite-4/kbd/examples/Arrow.html.twig`	Kbd arrow-key examples.
`src/Toolkit/kits/flowbite-4/label/manifest.json`	Registers Label recipe and dependencies.
`src/Toolkit/kits/flowbite-4/label/templates/components/Label.html.twig`	Implements Label variants (default/invalid).
`src/Toolkit/kits/flowbite-4/label/examples/Usage.html.twig`	Label usage example.
`src/Toolkit/kits/flowbite-4/label/examples/Demo.html.twig`	Label + input example.
`src/Toolkit/kits/flowbite-4/modal/manifest.json`	Registers Modal recipe and dependencies.
`src/Toolkit/kits/flowbite-4/modal/templates/components/Modal.html.twig`	Modal wrapper and internal id generation.
`src/Toolkit/kits/flowbite-4/modal/templates/components/Modal/Trigger.html.twig`	Provides trigger attribute helper.
`src/Toolkit/kits/flowbite-4/modal/templates/components/Modal/Content.html.twig`	Modal dialog element and close button option.
`src/Toolkit/kits/flowbite-4/modal/templates/components/Modal/Header.html.twig`	Modal header container.
`src/Toolkit/kits/flowbite-4/modal/templates/components/Modal/Title.html.twig`	Modal title element.
`src/Toolkit/kits/flowbite-4/modal/templates/components/Modal/Footer.html.twig`	Modal footer container.
`src/Toolkit/kits/flowbite-4/modal/templates/components/Modal/Close.html.twig`	Provides close attribute helper.
`src/Toolkit/kits/flowbite-4/modal/templates/components/Modal/Body.html.twig`	Modal body container.
`src/Toolkit/kits/flowbite-4/modal/assets/controllers/modal_controller.js`	Stimulus controller for dialog open/close and ARIA state.
`src/Toolkit/kits/flowbite-4/modal/examples/Usage.html.twig`	Modal usage example.
`src/Toolkit/kits/flowbite-4/modal/examples/Demo.html.twig`	Modal demo example.
`src/Toolkit/kits/flowbite-4/modal/examples/Static.html.twig`	Static-backdrop example.
`src/Toolkit/kits/flowbite-4/modal/examples/Popup.html.twig`	Popup-style modal example.
`src/Toolkit/kits/flowbite-4/pagination/manifest.json`	Registers Pagination recipe and dependencies.
`src/Toolkit/kits/flowbite-4/pagination/templates/components/Pagination.html.twig`	Pagination wrapper nav.
`src/Toolkit/kits/flowbite-4/pagination/templates/components/Pagination/Content.html.twig`	Pagination list container.
`src/Toolkit/kits/flowbite-4/pagination/templates/components/Pagination/Item.html.twig`	Pagination list item wrapper.
`src/Toolkit/kits/flowbite-4/pagination/templates/components/Pagination/Link.html.twig`	Pagination link rendered via Button.
`src/Toolkit/kits/flowbite-4/pagination/templates/components/Pagination/Previous.html.twig`	Previous link helper (text/icon).
`src/Toolkit/kits/flowbite-4/pagination/templates/components/Pagination/Next.html.twig`	Next link helper (text/icon).
`src/Toolkit/kits/flowbite-4/pagination/examples/Usage.html.twig`	Pagination usage example.
`src/Toolkit/kits/flowbite-4/pagination/examples/Icon.html.twig`	Icon-only pagination example.
`src/Toolkit/kits/flowbite-4/pagination/examples/Demo.html.twig`	Pagination demo example.
`src/Toolkit/kits/flowbite-4/radio/manifest.json`	Registers Radio recipe and dependencies.
`src/Toolkit/kits/flowbite-4/radio/templates/components/Radio.html.twig`	Implements radio input styling.
`src/Toolkit/kits/flowbite-4/radio/examples/Usage.html.twig`	Radio usage example.
`src/Toolkit/kits/flowbite-4/radio/examples/Demo.html.twig`	Radio demo example.
`src/Toolkit/kits/flowbite-4/radio/examples/Disabled.html.twig`	Disabled radio examples.
`src/Toolkit/kits/flowbite-4/radio/examples/Bordered.html.twig`	Bordered-card radio examples.
`src/Toolkit/kits/flowbite-4/select/manifest.json`	Registers Select recipe and dependencies.
`src/Toolkit/kits/flowbite-4/select/templates/components/Select.html.twig`	Implements Select styling.
`src/Toolkit/kits/flowbite-4/select/examples/Usage.html.twig`	Select usage example.
`src/Toolkit/kits/flowbite-4/select/examples/Demo.html.twig`	Select demo example.
`src/Toolkit/kits/flowbite-4/select/examples/Disabled.html.twig`	Disabled select example.
`src/Toolkit/kits/flowbite-4/select/examples/Multiple.html.twig`	Multi-select example.
`src/Toolkit/kits/flowbite-4/skeleton/manifest.json`	Registers Skeleton recipe and dependencies.
`src/Toolkit/kits/flowbite-4/skeleton/templates/components/Skeleton.html.twig`	Implements Skeleton shape variants.
`src/Toolkit/kits/flowbite-4/skeleton/examples/Usage.html.twig`	Skeleton usage example.
`src/Toolkit/kits/flowbite-4/skeleton/examples/Demo.html.twig`	Skeleton demo layout.
`src/Toolkit/kits/flowbite-4/skeleton/examples/Card.html.twig`	Skeleton-in-card example.
`src/Toolkit/kits/flowbite-4/spinner/manifest.json`	Registers Spinner recipe and dependencies.
`src/Toolkit/kits/flowbite-4/spinner/templates/components/Spinner.html.twig`	Implements SVG spinner with size/color customizations.
`src/Toolkit/kits/flowbite-4/spinner/examples/Usage.html.twig`	Spinner usage example (in disabled button).
`src/Toolkit/kits/flowbite-4/spinner/examples/Demo.html.twig`	Spinner demo example.
`src/Toolkit/kits/flowbite-4/spinner/examples/With Button.html.twig`	Spinner inside button example.
`src/Toolkit/kits/flowbite-4/spinner/examples/With Card.html.twig`	Spinner overlay in card example.
`src/Toolkit/kits/flowbite-4/spinner/examples/Size.html.twig`	Spinner size examples.
`src/Toolkit/kits/flowbite-4/spinner/examples/Color.html.twig`	Spinner color examples.
`src/Toolkit/kits/flowbite-4/spinner/examples/Alignment.html.twig`	Spinner alignment examples.
`src/Toolkit/kits/flowbite-4/spinner/examples/Progress.html.twig`	Spinner in progress list example.
`src/Toolkit/kits/flowbite-4/table/manifest.json`	Registers Table recipe and dependencies.
`src/Toolkit/kits/flowbite-4/table/templates/components/Table.html.twig`	Implements Table wrapper with border mode.
`src/Toolkit/kits/flowbite-4/table/templates/components/Table/Caption.html.twig`	Table caption component.
`src/Toolkit/kits/flowbite-4/table/templates/components/Table/Header.html.twig`	Table header wrapper.
`src/Toolkit/kits/flowbite-4/table/templates/components/Table/Body.html.twig`	Table body with highlight variants.
`src/Toolkit/kits/flowbite-4/table/templates/components/Table/Footer.html.twig`	Table footer wrapper.
`src/Toolkit/kits/flowbite-4/table/templates/components/Table/Row.html.twig`	Table row wrapper.
`src/Toolkit/kits/flowbite-4/table/templates/components/Table/Head.html.twig`	Table head cell component.
`src/Toolkit/kits/flowbite-4/table/templates/components/Table/Cell.html.twig`	Table cell component.
`src/Toolkit/kits/flowbite-4/table/examples/Usage.html.twig`	Table usage example.
`src/Toolkit/kits/flowbite-4/table/examples/Demo.html.twig`	Table demo example.
`src/Toolkit/kits/flowbite-4/table/examples/Without border.html.twig`	Borderless table example.
`src/Toolkit/kits/flowbite-4/table/examples/Highlight striped.html.twig`	Striped highlight example.
`src/Toolkit/kits/flowbite-4/tabs/manifest.json`	Registers Tabs recipe and dependencies.
`src/Toolkit/kits/flowbite-4/tabs/templates/components/Tabs.html.twig`	Tabs root component wiring Stimulus + orientation.
`src/Toolkit/kits/flowbite-4/tabs/templates/components/Tabs/List.html.twig`	Tabs list container + variants.
`src/Toolkit/kits/flowbite-4/tabs/templates/components/Tabs/Trigger.html.twig`	Tabs trigger button.
`src/Toolkit/kits/flowbite-4/tabs/templates/components/Tabs/Content.html.twig`	Tabs content panel.
`src/Toolkit/kits/flowbite-4/tabs/assets/controllers/tabs_controller.js`	Stimulus controller for switching active tab state.
`src/Toolkit/kits/flowbite-4/tabs/examples/Usage.html.twig`	Tabs usage example.
`src/Toolkit/kits/flowbite-4/tabs/examples/Demo.html.twig`	Tabs demo example.
`src/Toolkit/kits/flowbite-4/tabs/examples/With Icon.html.twig`	Tabs with icons example.
`src/Toolkit/kits/flowbite-4/tabs/examples/Vertical.html.twig`	Vertical tabs example.
`src/Toolkit/kits/flowbite-4/tabs/examples/Variant Line.html.twig`	Line variant example.
`src/Toolkit/kits/flowbite-4/tabs/examples/Variant Pill.html.twig`	Pill variant example.
`src/Toolkit/kits/flowbite-4/textarea/manifest.json`	Registers Textarea recipe and dependencies.
`src/Toolkit/kits/flowbite-4/textarea/templates/components/Textarea.html.twig`	Implements Textarea with merged classes and content block.
`src/Toolkit/kits/flowbite-4/textarea/examples/Usage.html.twig`	Textarea usage example.
`src/Toolkit/kits/flowbite-4/textarea/examples/Demo.html.twig`	Textarea demo example.
`src/Toolkit/kits/flowbite-4/textarea/examples/Default.html.twig`	Textarea default sizing example.
`src/Toolkit/kits/flowbite-4/textarea/examples/Disabled.html.twig`	Textarea disabled example.
`src/Toolkit/kits/flowbite-4/textarea/examples/With Label.html.twig`	Textarea + label layout example.
`src/Toolkit/kits/flowbite-4/toggle/manifest.json`	Registers Toggle recipe and dependencies.
`src/Toolkit/kits/flowbite-4/toggle/templates/components/Toggle.html.twig`	Implements Toggle markup/styling.
`src/Toolkit/kits/flowbite-4/toggle/examples/Usage.html.twig`	Toggle usage example.
`src/Toolkit/kits/flowbite-4/toggle/examples/Demo.html.twig`	Toggle demo example.
`src/Toolkit/kits/flowbite-4/toggle/examples/Disabled.html.twig`	Toggle disabled examples.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component toggle, code file Usage.html__1.html`	Snapshot for Toggle usage rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component toggle, code file Disabled.html__1.html`	Snapshot for Toggle disabled rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component toggle, code file Demo.html__1.html`	Snapshot for Toggle demo rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component textarea, code file With Label.html__1.html`	Snapshot for Textarea with label rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component textarea, code file Usage.html__1.html`	Snapshot for Textarea usage rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component textarea, code file Disabled.html__1.html`	Snapshot for Textarea disabled rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component textarea, code file Demo.html__1.html`	Snapshot for Textarea demo rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component textarea, code file Default.html__1.html`	Snapshot for Textarea default rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component table, code file Usage.html__1.html`	Snapshot for Table usage rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component spinner, code file With Button.html__1.html`	Snapshot for Spinner within button rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component spinner, code file Usage.html__1.html`	Snapshot for Spinner usage rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component spinner, code file Demo.html__1.html`	Snapshot for Spinner demo rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component skeleton, code file Usage.html__1.html`	Snapshot for Skeleton usage rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component skeleton, code file Demo.html__1.html`	Snapshot for Skeleton demo rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component select, code file Usage.html__1.html`	Snapshot for Select usage rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component select, code file Multiple.html__1.html`	Snapshot for Select multiple rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component select, code file Disabled.html__1.html`	Snapshot for Select disabled rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component select, code file Demo.html__1.html`	Snapshot for Select demo rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component radio, code file Usage.html__1.html`	Snapshot for Radio usage rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component radio, code file Disabled.html__1.html`	Snapshot for Radio disabled rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component radio, code file Demo.html__1.html`	Snapshot for Radio demo rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component pagination, code file Usage.html__1.html`	Snapshot for Pagination usage rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component pagination, code file Demo.html__1.html`	Snapshot for Pagination demo rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component modal, code file Usage.html__1.html`	Snapshot for Modal usage rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component label, code file Usage.html__1.html`	Snapshot for Label usage rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component label, code file Demo.html__1.html`	Snapshot for Label demo rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component kbd, code file Usage.html__1.html`	Snapshot for Kbd usage rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component kbd, code file Demo.html__1.html`	Snapshot for Kbd demo rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component input, code file With Button.html__1.html`	Snapshot for Input + button rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component input, code file Usage.html__1.html`	Snapshot for Input usage rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component input, code file Invalid.html__1.html`	Snapshot for invalid Input rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component input, code file File.html__1.html`	Snapshot for file Input rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component input, code file Disabled.html__1.html`	Snapshot for disabled Input rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component indicator, code file Usage.html__1.html`	Snapshot for Indicator usage rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component indicator, code file Demo.html__1.html`	Snapshot for Indicator demo rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component indicator, code file Count.html__1.html`	Snapshot for Indicator count rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component checkbox, code file Usage.html__1.html`	Snapshot for Checkbox usage rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component checkbox, code file Disabled.html__1.html`	Snapshot for Checkbox disabled rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component checkbox, code file Demo.html__1.html`	Snapshot for Checkbox demo rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component card, code file With Button.html__1.html`	Snapshot for Card with button rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component card, code file Usage.html__1.html`	Snapshot for Card usage rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component card, code file Demo.html__1.html`	Snapshot for Card demo rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component button, code file With icon.html__1.html`	Snapshot for Button with icons rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component button, code file Usage.html__1.html`	Snapshot for Button usage rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component button, code file Size.html__1.html`	Snapshot for Button sizes rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component button, code file Pill.html__1.html`	Snapshot for pill buttons rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component button, code file Outline.html__1.html`	Snapshot for outline buttons rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component button, code file Loader.html__1.html`	Snapshot for loader button rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component button, code file Demo.html__1.html`	Snapshot for Button demo rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component button-group, code file Usage.html__1.html`	Snapshot for ButtonGroup usage rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component button-group, code file Orientation.html__1.html`	Snapshot for ButtonGroup vertical rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component button-group, code file Demo.html__1.html`	Snapshot for ButtonGroup demo rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component badge, code file Usage.html__1.html`	Snapshot for Badge usage rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component badge, code file Pill.html__1.html`	Snapshot for pill badges rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component badge, code file Large.html__1.html`	Snapshot for large badges rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component badge, code file Demo.html__1.html`	Snapshot for Badge demo rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component badge, code file Bordered.html__1.html`	Snapshot for bordered badges rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component badge, code file As link.html__1.html`	Snapshot for Badge as link rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component alert, code file Usage.html__1.html`	Snapshot for Alert usage rendering.
`src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit flowbite-4, component alert, code file Action.html__1.html`	Snapshot for Alert action rendering.

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

src/Toolkit/kits/flowbite-4/toggle/templates/components/Toggle.html.twig

src/Toolkit/kits/flowbite-4/toggle/examples/Disabled.html.twig

src/Toolkit/kits/flowbite-4/card/templates/components/Card/Title.html.twig

src/Toolkit/kits/flowbite-4/pagination/templates/components/Pagination/Link.html.twig

Copilot · 2026-04-04T06:36:37Z

src/Toolkit/kits/flowbite-4/button-group/templates/components/ButtonGroup.html.twig

+{%- set style = html_cva(
+    base: 'inline-flex rounded-base shadow-xs -space-x-px [&>*]:rounded-none',
+    variants: {
+        orientation: {
+            horizontal: '[&>*:first-child]:rounded-s-base [&>*:last-child]:rounded-e-base',
+            vertical: 'flex-col [&>*:first-child]:rounded-t-base [&>*:last-child]:rounded-b-base',
+        },
+    },


The ButtonGroup base classes include -space-x-px even when orientation="vertical", which applies negative horizontal spacing to vertically stacked buttons. Move the spacing utility into the orientation variants (e.g., -space-x-px for horizontal and -space-y-px for vertical) to avoid layout issues.

src/Toolkit/kits/flowbite-4/indicator/examples/Usage.html.twig

src/Toolkit/kits/flowbite-4/select/examples/Multiple.html.twig

src/Toolkit/kits/flowbite-4/alert/examples/With List.html.twig

src/Toolkit/kits/flowbite-4/badge/templates/components/Badge.html.twig

Kocal · 2026-04-04T07:16:27Z

Thank you for this huge contribution!

There are still a few minor issues to sort out, but I’ve decided to merge your PR (and the one on ux.symfony.com) after rebasing and fixing a few other minor issues as well.

This way, we can iterate more easily on the final fixes needed:

the Disabled example for Textarea recipe, there is no visual difference with a non-disabled textarea, it's weird, no?

The following recipes will need their examples to be updated:
- Button group
- Button
- Indicator
- Input
- Kdb
- Label
- Pagination
- Radio
- Skeleton
- Table
- Toggle

It would be a pleasure to receive further contributions from you, or from anyone else who’d like to contribute! (Tip: read the Toolkit/CONTRIBUTING.md file)

DcgRG requested a review from Kocal as a code owner March 8, 2026 12:54

carsonbot added Feature New Feature Toolkit Status: Needs Review Needs to be reviewed labels Mar 8, 2026

Kocal requested changes Mar 12, 2026

View reviewed changes

carsonbot added Status: Needs Work Additional work is needed and removed Status: Needs Review Needs to be reviewed labels Mar 12, 2026

DcgRG force-pushed the toolkit-flowbite-base branch from dd4d83a to a219131 Compare March 13, 2026 08:19

carsonbot added Status: Needs Review Needs to be reviewed and removed Status: Needs Work Additional work is needed labels Mar 13, 2026

MrYamous reviewed Mar 13, 2026

View reviewed changes

MrYamous reviewed Mar 14, 2026

View reviewed changes

DcgRG force-pushed the toolkit-flowbite-base branch 2 times, most recently from 422f4a9 to ca7d830 Compare March 18, 2026 08:42

Kocal reviewed Apr 3, 2026

View reviewed changes

DcgRG force-pushed the toolkit-flowbite-base branch from 3578929 to d15fc91 Compare April 3, 2026 08:29

Kocal force-pushed the toolkit-flowbite-base branch 2 times, most recently from b10270f to ca7bbde Compare April 4, 2026 06:25

Kocal requested a review from Copilot April 4, 2026 06:30

Copilot started reviewing on behalf of Kocal April 4, 2026 06:30 View session

Copilot AI reviewed Apr 4, 2026

View reviewed changes

DcgRG added 21 commits April 4, 2026 09:02

[Toolkit][Flowbite] Add Badge component

17b010e

[Toolkit][Flowbite] Add Button component

91ada0b

[Toolkit][Flowbite] Add Kbd component

0c37dad

[Toolkit][Flowbite] Add Card component

bc280c5

[Toolkit][Flowbite] Add Table component

49c9d60

[Toolkit][Flowbite] Add Input and Label component

c8f56f8

[Toolkit][Flowbite] Add Textarea component

b304a74

[Toolkit][Flowbite] Add Select component

08189a6

[Toolkit][Flowbite] Add Checkbox component

49b949b

[Toolkit][Flowbite] Add Skeleton component

f8fa8b2

[Toolkit][Flowbite] Add Alert component

f9b6c7c

[Toolkit][Flowbite] Fix variant component

58ad73a

[Toolkit][Flowbite] Add Indicator component

8d1344b

[Toolkit][Flowbite] Add Toggle component

94c58a3

[Toolkit][Flowbite] Add Spinner component

95d1e45

[Toolkit][Flowbite] Add Modal component

bebc44f

[Toolkit][Flowbite] Add Button group component

e81b38d

[Toolkit][Flowbite] Add Pagination component

bfdaf26

[Toolkit][Flowbite] Add Radio component

9858a39

[Toolkit][Flowbite] Add Tabs component

89b443e

Tweaks

5e0e8ff

Kocal force-pushed the toolkit-flowbite-base branch from 4b81078 to 5e0e8ff Compare April 4, 2026 07:03

Kocal approved these changes Apr 4, 2026

View reviewed changes

carsonbot added Status: Reviewed Has been reviewed by a maintainer and removed Status: Needs Review Needs to be reviewed labels Apr 4, 2026

Kocal merged commit e20fd36 into symfony:2.x Apr 4, 2026
26 of 29 checks passed

	class="{{ ('px-6 py-3 font-medium ' ~ attributes.render('class'))\|tailwind_merge }}"
	class="{{ ('px-6 py-3 font-medium ' ~ attributes.render('class'))\|tailwind_merge }}"

		@@ -0,0 +1,5 @@
		<twig:Indicator
		variant="brand \| alternative \| gray \| danger \| success \| warning"

		@@ -0,0 +1,18 @@
		{# @prop variant 'default'\|'invalid' The visual style variant. Defaults to `brand` #}

		@import "../vendor/flowbite/dist/flowbite.min.css";
		@source "../vendor/flowbite";

Uh oh!

Conversation

DcgRG commented Mar 8, 2026

Uh oh!

Kocal commented Mar 12, 2026

Uh oh!

Kocal left a comment

Choose a reason for hiding this comment

Uh oh!

Kocal Mar 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

DcgRG commented Mar 13, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

MrYamous commented Mar 13, 2026

Uh oh!

DcgRG commented Mar 13, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Kocal left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

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!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI Apr 4, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Kocal commented Apr 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

Kocal Mar 12, 2026 •

edited

Loading

Kocal commented Apr 4, 2026 •

edited

Loading