# Shadleaf > shadcn/ui for Thymeleaf, as a Spring Boot starter. Components are Thymeleaf tags with the `sl:` prefix > (``), rendered on the server. Not React: no JSX, no Radix, no `asChild`. These docs describe Shadleaf 0.9.0. The docs of other versions live next to this one, at //. Read "Using Shadleaf with coding agents" first: it lists the rules an agent most often gets wrong. Every component page ends with its attribute table (props, allowed values, defaults); the examples are the Thymeleaf source to write. ## Start here - [Shadleaf](https://shadleaf.dev/current/index.md): shadcn/ui for Thymeleaf, as a Spring Boot starter. - [Getting started](https://shadleaf.dev/current/getting-started.md): Add Shadleaf to a Spring Boot application. - [Coming from shadcn/ui](https://shadleaf.dev/current/coming-from-shadcn.md): What carries over from shadcn/ui unchanged, and where Shadleaf differs, and why. - [IDE completion](https://shadleaf.dev/current/ide-completion.md): Completion for sl:* tags, their attributes and values in IntelliJ IDEA and WebStorm. - [Using Shadleaf with coding agents](https://shadleaf.dev/current/coding-agents.md): Point Claude Code, Codex, Cursor, Copilot and other coding agents at these docs, and give them the rules they get wrong. ## Components - [Components](https://shadleaf.dev/current/components.md): Every Shadleaf component, in the groups of the sidebar, with one line on what each is for. ### Actions - [Button](https://shadleaf.dev/current/components/button.md): A button, or a link that looks like one. - [Theme Toggle](https://shadleaf.dev/current/components/theme-toggle.md): Switches the page between the light and the dark theme, and remembers the choice in the browser. ### Forms - [Field](https://shadleaf.dev/current/components/field.md): A label, a control, a description and the binding's error messages, wired together from one th:field. - [Form errors](https://shadleaf.dev/current/components/form-errors.md): The errors that belong to the whole form rather than one field, or all of the form's errors, read from the binding and shown above the fields. - [Label](https://shadleaf.dev/current/components/label.md): A label for a form control. - [Input](https://shadleaf.dev/current/components/input.md): A text input, bound to a form field with th:field. - [Textarea](https://shadleaf.dev/current/components/textarea.md): A multi-line text input, bound to a form field with th:field. - [Select](https://shadleaf.dev/current/components/select.md): shadcn/ui's Select on a real select element, bound with th:field; the browser's customizable select where it has one. - [Select (Native)](https://shadleaf.dev/current/components/select-native.md): The browser's own select, styled, bound to a form field with th:field. - [Checkbox](https://shadleaf.dev/current/components/checkbox.md): The browser's own checkbox, styled, bound to a form field with th:field. - [Radio Group](https://shadleaf.dev/current/components/radio-group.md): A set of the browser's own radio buttons, styled, bound to a form field with th:field. - [Switch](https://shadleaf.dev/current/components/switch.md): An on/off control, bound to a boolean form field with th:field. ### Overlays - [Dialog](https://shadleaf.dev/current/components/dialog.md): A modal window over the page, on the native dialog element. - [Alert Dialog](https://shadleaf.dev/current/components/alert-dialog.md): A modal dialog that interrupts the user with something important and waits for an answer. - [Sheet](https://shadleaf.dev/current/components/sheet.md): A dialog that slides in from an edge of the screen. - [Popover](https://shadleaf.dev/current/components/popover.md): Rich content in a panel next to the button that opens it, on the browser's Popover API. - [Dropdown Menu](https://shadleaf.dev/current/components/dropdown-menu.md): A menu of actions or links that opens from a button, on the browser's Popover API. - [Tooltip](https://shadleaf.dev/current/components/tooltip.md): A short text that shows while the pointer rests on an element or the keyboard focuses it. ### Feedback - [Alert](https://shadleaf.dev/current/components/alert.md): A callout for a message the user should notice. - [Toast](https://shadleaf.dev/current/components/toast.md): A short message in a corner of the page that closes itself, sent by the server; shadcn/ui's Sonner. - [Skeleton](https://shadleaf.dev/current/components/skeleton.md): A placeholder that pulses while content loads. ### Data - [Table](https://shadleaf.dev/current/components/table.md): A table in shadcn/ui's look, whose column headers sort it on the server. - [Pagination](https://shadleaf.dev/current/components/pagination.md): Links to the other pages of a list, built from the Spring Data Page the controller returns. - [Query params](https://shadleaf.dev/current/components/query-params.md): Hidden inputs that keep a table's order, page size and filters when a search form is sent. ### Application shell - [Application shell](https://shadleaf.dev/current/components/application-shell.md): Choosing between a sidebar and a header for the frame around every page, and what every layout needs whichever you pick. - [Sidebar](https://shadleaf.dev/current/components/sidebar.md): The application's navigation beside the page, and a panel over it on a phone. - [Site Header](https://shadleaf.dev/current/components/site-header.md): A header bar across the top of the page, or at the top of the sidebar layout's page. - [User Menu](https://shadleaf.dev/current/components/user-menu.md): The signed-in user with a menu that signs out, or a Sign in link, for the sidebar's footer or the site header. - [Breadcrumb](https://shadleaf.dev/current/components/breadcrumb.md): The trail of pages above the one shown now, with a menu for the levels a long trail leaves out. - [Skip Link](https://shadleaf.dev/current/components/skip-link.md): A link past the navigation to the page's content, for keyboard users. ### Disclosure - [Tabs](https://shadleaf.dev/current/components/tabs.md): Panels of content shown one at a time, chosen from a row of tabs. - [Accordion](https://shadleaf.dev/current/components/accordion.md): A stack of sections, each with a heading that shows or hides its content, on the browser's details element. - [Collapsible](https://shadleaf.dev/current/components/collapsible.md): Content that a button shows and hides, on the browser's details element. ### Display - [Card](https://shadleaf.dev/current/components/card.md): A container for related content and actions, built from its parts. - [Badge](https://shadleaf.dev/current/components/badge.md): A small label for a status, a count or a category. - [Avatar](https://shadleaf.dev/current/components/avatar.md): A picture of a person, with initials when there is no picture. - [Icon](https://shadleaf.dev/current/components/icon.md): Inline SVG icons from lucide, or your own. - [Kbd](https://shadleaf.dev/current/components/kbd.md): A key on the keyboard, or a combination of keys. - [Separator](https://shadleaf.dev/current/components/separator.md): A thin line between content. ## Layouts - [Layouts](https://shadleaf.dev/current/layouts.md): Whole layout files to copy into an application, each with a page that uses it and the CSS around it, after shadcn/ui's sidebar blocks. - [Grouped by section](https://shadleaf.dev/current/layouts/grouped-by-section.md): A sidebar of sections, each a group of pages under its label, with a version switcher and a search field, as documentation has. - [Collapsible sections](https://shadleaf.dev/current/layouts/collapsible-sections.md): A sidebar of sections whose labels open and close them, with a version switcher and a search field, as documentation has. - [Sub-menus](https://shadleaf.dev/current/layouts/sub-menus.md): A sidebar of sections with their pages in sub-menus that are always open, as documentation has. - [Floating, with sub-menus](https://shadleaf.dev/current/layouts/floating-sub-menus.md): The sections and sub-menus of the Sub-menus layout in a floating sidebar, wider and with more room between the sections. - [Collapsible sub-menus](https://shadleaf.dev/current/layouts/collapsible-sub-menus.md): A sidebar of sections that open and close, each with its pages in a sub-menu, only the current page's section open. - [Collapses to icons](https://shadleaf.dev/current/layouts/collapses-to-icons.md): A team switcher, collapsible sections and projects beside the page, collapsing to a strip of icons on a desktop, with the page as a card and the signed-in user's menu at the bottom. - [Inset with secondary navigation](https://shadleaf.dev/current/layouts/inset-secondary-navigation.md): Sections that are pages of their own with a chevron for their sub-menus, projects, a secondary navigation and the user menu, beside the page as a card. - [On the end](https://shadleaf.dev/current/layouts/sidebar-end.md): A table of contents in a sidebar on the end of the line, the right in a left-to-right page, with the trigger at the end of the page's header. - [Navigation in the header](https://shadleaf.dev/current/layouts/header.md): For an application with a handful of pages, the pages as a row of links in the site header and the page as a card below it; on a phone the same navigation is a panel. ## Guides - [The adjustability ladder](https://shadleaf.dev/current/guides/adjustability.md): Five ways to make the components your own, from a prop to owning the template. - [Content-Security-Policy](https://shadleaf.dev/current/guides/csp.md): Run Shadleaf under a strict CSP, with a nonce or a hash, and no 'unsafe-inline'. - [Spring Security](https://shadleaf.dev/current/guides/spring-security.md): The one matcher the library's assets need, the signed-in user in templates (#slUser), and htmx requests after the session expired. - [Signing in with OAuth2](https://shadleaf.dev/current/guides/oauth2.md): Keycloak (OpenID Connect, signing out at Keycloak too) and GitHub as the way users sign in, and what the user menu shows for each. - [Alpine.js](https://shadleaf.dev/current/guides/alpine.md): Let Shadleaf bring Alpine, use its CSP build, or register with the Alpine your application already loads. - [Forms with htmx](https://shadleaf.dev/current/guides/htmx.md): Post a Shadleaf form with htmx, get it back with its errors without a page load, and keep it working as a plain POST. - [Tables with htmx](https://shadleaf.dev/current/guides/tables-htmx.md): Search as you type, sort and page a server-side table with htmx, act on a row from its menu, load more rows, keep the focus and the back button, and keep it working without JavaScript. ## Optional - [All docs in one file](https://shadleaf.dev/current/llms-full.txt): every page above, in this order. - [All component pages](https://shadleaf.dev/current/llms-components.txt): the Components section in one file. - [All guides](https://shadleaf.dev/current/llms-guides.txt): the Start here, Layouts and Guides sections in one file.