Skip to content
shadleaf

Shadleaf

Shadleaf brings the shadcn/ui design system to Thymeleaf. Add one dependency, include one fragment, and write <sl:button>:

Variants
Thymeleaf source
<sl:button>Default</sl:button>
<sl:button variant="outline">Outline</sl:button>
<sl:button variant="ghost">Ghost</sl:button>
<sl:button variant="destructive">Destructive</sl:button>
<sl:button variant="secondary">Secondary</sl:button>
<sl:button variant="link">Link</sl:button>
Rendered HTML
<button class="button" type="button">Default</button>
<button class="button" type="button" data-variant="outline">Outline</button>
<button class="button" type="button" data-variant="ghost">Ghost</button>
<button class="button" type="button" data-variant="destructive">Destructive</button>
<button class="button" type="button" data-variant="secondary">Secondary</button>
<button class="button" type="button" data-variant="link">Link</button>
  • No Node, no Tailwind in your application. The jar ships compiled CSS, served under /shadleaf/**.
  • shadcn’s token names, verbatim. --primary, --radius, --ring: any shadcn theme drops in unchanged.
  • Declared props. A typo such as variant="destructve" fails with the legal values, and an icon-only button without an aria-label fails too, instead of shipping.
  • Adjustable in five steps, from a prop to owning the template yourself: see the adjustability ladder.
  • Works under a strict Content-Security-Policy, with no 'unsafe-inline': see CSP.

Every preview on this site is rendered by the library itself, from the build that produced these pages, so it shows exactly the markup your application gets.