UI Suite UIkit

UI Suite UIkit is a Drupal theme built on UIkit. Every part of the page is a Single Directory Component, so you can build pages, entity displays and views from them with Display Builder, and style the whole site from settings rather than code.

It follows the UI Suite initiative and builds on its smart logic, much of which has moved into Drupal core: components, UI Patterns, UI Skins, UI Styles and UI Icons.

Features

• More than 50 UIkit components, each with typed props, described slots and stories.
• Page, Header and Footer components with the right landmarks, used by the page template and by Display Builder page layouts.
• Every design token is a UI Skins variable, with light and dark values. Colors, fonts, spacing, corners and the focus ring change from the admin pages.
• Light, dark, or follow the operating system.
• Fonts hosted in the theme: Atkinson Hyperlegible Next and Mono, with Noto Sans Arabic for right-to-left text. No request to a font service.
• Sign-in screens for log in, register, password reset and log out, with six layouts and options for the site header and footer.
• A theme settings page grouped in sections, with visual pickers and a contrast check on the brand color.
• HTMX navigation that loads the page without a full reload.
• WCAG 2.2 Level AAA in light and dark mode, checked by webship-js tests.
• A starterkit: generate your own theme from it, with its own names.

Configuration first

Settings, UI Skins variables, UI Styles and Display Builder configuration carry the look of a site. A site builder, or an AI assistant, can restyle a site through configuration alone.

Used by

• Website Starter and Webship Starter site templates.
• Webtheme, generated from this starterkit.
• Pairs with UIkit Admin for the back office.