Components
Every component is a Thymeleaf tag with the sl: prefix, rendered on the server. Each page shows examples, the
markup to write, and a table of the component’s attributes. Whole pages built from them are in
[Layouts](../layouts/.
Actions
ButtonA button, or a link that looks like one.
Theme ToggleSwitches the page between the light and the dark theme, and remembers the choice in the browser.
Forms
FieldA label, a control, a description and the binding's error messages, wired together from one th:field.
Form errorsThe 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.
LabelA label for a form control.
InputA text input, bound to a form field with th:field.
TextareaA multi-line text input, bound to a form field with th:field.
Selectshadcn/ui's Select on a real select element, bound with th:field; the browser's customizable select where it has one.
Select (Native)The browser's own select, styled, bound to a form field with th:field.
CheckboxThe browser's own checkbox, styled, bound to a form field with th:field.
Radio GroupA set of the browser's own radio buttons, styled, bound to a form field with th:field.
SwitchAn on/off control, bound to a boolean form field with th:field.
Overlays
DialogA modal window over the page, on the native dialog element.
Alert DialogA modal dialog that interrupts the user with something important and waits for an answer.
SheetA dialog that slides in from an edge of the screen.
PopoverRich content in a panel next to the button that opens it, on the browser's Popover API.
Dropdown MenuA menu of actions or links that opens from a button, on the browser's Popover API.
TooltipA short text that shows while the pointer rests on an element or the keyboard focuses it.
Feedback
AlertA callout for a message the user should notice.
ToastA short message in a corner of the page that closes itself, sent by the server; shadcn/ui's Sonner.
SkeletonA placeholder that pulses while content loads.
Data
TableA table in shadcn/ui's look, whose column headers sort it on the server.
PaginationLinks to the other pages of a list, built from the Spring Data Page the controller returns.
Query paramsHidden inputs that keep a table's order, page size and filters when a search form is sent.
Application shell
Start with the overview: Choosing between a sidebar and a header for the frame around every page, and what every layout needs whichever you pick.
SidebarThe application's navigation beside the page, and a panel over it on a phone.
Site HeaderA header bar across the top of the page, or at the top of the sidebar layout's page.
User MenuThe signed-in user with a menu that signs out, or a Sign in link, for the sidebar's footer or the site header.
BreadcrumbThe trail of pages above the one shown now, with a menu for the levels a long trail leaves out.
Skip LinkA link past the navigation to the page's content, for keyboard users.
Disclosure
TabsPanels of content shown one at a time, chosen from a row of tabs.
AccordionA stack of sections, each with a heading that shows or hides its content, on the browser's details element.
CollapsibleContent that a button shows and hides, on the browser's details element.
Display
CardA container for related content and actions, built from its parts.
BadgeA small label for a status, a count or a category.
AvatarA picture of a person, with initials when there is no picture.
IconInline SVG icons from lucide, or your own.
KbdA key on the keyboard, or a combination of keys.
SeparatorA thin line between content.