Shadleaf

UI components for Spring Boot and Thymeleaf

Themeable, rendered by Thymeleaf.

Shadleaf is a Spring Boot starter. Add the dependency, write <sl:dialog> in a template, and your page gets an accessible dialog, rendered on the server.

Add Shadleaf to your project Browse the components

Version 1.0.2, for Spring Boot 4 and Java 17 or later.

You write

<sl:card>
  <sl:card-header>
    <sl:card-title level="3">Order #1042</sl:card-title>
    <sl:card-description>Placed on 12 September</sl:card-description>
    <sl:card-action><sl:badge variant="secondary">Shipped</sl:badge></sl:card-action>
  </sl:card-header>
  <sl:card-content>
    <p>Three items, delivered to the Antwerp warehouse.</p>
  </sl:card-content>
  <sl:card-footer>
    <sl:button as="a" href="/orders/1042" variant="outline">View order</sl:button>
  </sl:card-footer>
</sl:card>

Your users get

You write

<sl:field th:field="*{username}">
  <sl:field-label>Username</sl:field-label>
  <sl:input autocomplete="username"/>
  <sl:field-description>Letters, digits and dashes.</sl:field-description>
  <sl:field-error/>
</sl:field>

Your users get

You write

<sl:table>
  <caption>A list of your recent invoices.</caption>
  <thead>
    <tr>
      <th>Invoice</th>
      <th>Status</th>
      <th>Method</th>
      <sl:table-head align="end">Amount</sl:table-head>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>INV001</td>
      <td><sl:badge variant="secondary">Paid</sl:badge></td>
      <td>Credit card</td>
      <td data-align="end">€250.00</td>
    </tr>
    <tr>
      <td>INV002</td>
      <td><sl:badge variant="outline">Pending</sl:badge></td>
      <td>Bank transfer</td>
      <td data-align="end">€150.00</td>
    </tr>
    <tr>
      <td>INV003</td>
      <td><sl:badge variant="destructive">Overdue</sl:badge></td>
      <td>Credit card</td>
      <td data-align="end">€350.00</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Total</td>
      <td data-align="end">€750.00</td>
    </tr>
  </tfoot>
</sl:table>

Your users get

You write

<sl:button variant="outline" commandfor="edit-profile" command="show-modal">Edit profile</sl:button>
<form method="post" action="/profile">
  <sl:dialog id="edit-profile">
    <sl:dialog-header>
      <sl:dialog-title>Edit profile</sl:dialog-title>
      <sl:dialog-description>
        Make changes to your profile here. Click save when you're done.
      </sl:dialog-description>
    </sl:dialog-header>
    <sl:field-group>
      <sl:field for="profile-name">
        <sl:field-label>Name</sl:field-label>
        <sl:input name="name" value="Pedro Duarte"/>
      </sl:field>
      <sl:field for="profile-username">
        <sl:field-label>Username</sl:field-label>
        <sl:input name="username" value="@peduarte"/>
      </sl:field>
    </sl:field-group>
    <sl:dialog-footer>
      <sl:button variant="outline" commandfor="edit-profile" command="close">Cancel</sl:button>
      <sl:button type="submit">Save changes</sl:button>
    </sl:dialog-footer>
  </sl:dialog>
</form>

Your users get

What comes in the jar

Fits your build: The jar ships compiled CSS and JavaScript, so a plain Maven build is enough. Already compiling Tailwind? Switch to the embedded bundle and it fits into your own build.
Themed with CSS variables: Colours, radius and focus ring are CSS variables (--primary, --radius, --ring): redefine them once and every component follows, in light and dark mode.
Predefined skins: Nine skins, from Vega’s classic look to boxy Lyra, soft Luma and editorial Sera, and a hand-drawn Sketch for mockups. The shadleaf.skin property switches between them; your templates stay the same.
Ready for coding agents: Every docs page is also Markdown, listed in llms.txt. Paste the suggested rules into AGENTS.md or CLAUDE.md and your agent writes Shadleaf tags instead of React.
htmx-ready: Dialogs, menus and toasts keep working when htmx swaps them in or restores a page from history. An HX-Trigger header can pop up a toast.
Completion in your IDE: IntelliJ IDEA completes every component, prop and legal value as you type, from the web-types Shadleaf generates.

The application around your pages

Shadleaf comes with 10 layouts to copy into your project, from a sidebar that collapses to icons to a header with a user menu. Building a business application, a SaaS product, an admin tool or a customer portal? Copy a layout and you are up and running in no time. Browse the 10 layouts.

Catch a typo the first time the page renders

Every component declares its props and their legal values. Misspell a variant and the page stops with a message that lists the right ones. An icon-only button without an accessible name stops it too.

<sl:button variant="destructve">Delete</sl:button>

Invalid value 'destructve' for prop 'variant' of <sl:button>.
Must be one of: default, outline, ghost, destructive, secondary, link.

Ready to build your first page?

The getting started guide takes you from the Maven dependency to your first <sl:button>.

Add Shadleaf to your project Browse the components