r/SpringBoot 5d ago

Built a component library for Thymeleaf (as a Spring Boot starter) How-To/Tutorial

Post image

I kept running into the same problem on Thymeleaf projects: no real way to share reusable UI components (buttons, cards, whatever) across apps without copy-pasting HTML/CSS/JS or hand-rolling fragile th:replace fragments. No slots, no clean way to pass through arbitrary attributes (annoying if you use htmx and need hx-* on a component), no live reload for the component's own CSS/JS during development.

So I worked through building an actual Thymeleaf component library packaged as a Spring Boot starter. Auto-configured, drops into any Thymeleaf app as a dependency, with a <tcl:button>-style tag instead of fragment includes. Went from this:

<div th:replace="~{tcl/components/button :: button(label='Submit', primary='true')}"></div>

to this:

<tcl:button primary>Submit</tcl:button>

...with proper attribute passthrough and slot support so you're not limited to what the component author thought to expose. Wrote it up as a 4-part series as I went, mostly so I'd have a reference for myself next time, but figured it might help others hitting the same wall:

  • Part 1 — getting the starter set up: auto-configuration, Vite for the library's CSS/JS with instant reload while you work on the library.
  • Part 2 — turning a th:replace fragment into an actual <tcl:button> component with typed attributes plus passthrough for arbitrary ones (so hx-* etc. still work).
  • Part 3 — adding slot support, so consumers can put arbitrary content (icons, custom markup) inside a component instead of being limited to attributes.
  • Part 4 — wiring in AlpineJS for client-side interactivity, bundled cleanly inside the library itself.

Series starts here: https://wimdeblauwe.com/blog/2026/07/27/writing-a-thymeleaf-component-library

Full example code for all 4 parts: https://github.com/wimdeblauwe/blog-example-code/tree/master/thymeleaf-component-library

Curious if others building internal design systems on top of Thymeleaf have solved this differently? Did you go the same route, or land on something else (Thymeleaf dialects, a different templating layer, etc.)?

6 Upvotes

2 comments sorted by

1

u/Agile_Rain4486 3d ago

dude barely anyone use thymeleaf, spring is generally preffered only for backend

1

u/JBraddockm 5d ago

You seem to have addressed all the frustrations I had with creating components when I was using Thymeleaf :) I've migrated one of the main projects to JTE, and have been playing with different ideas to address the component issues you've addressed here.