All UIkit components at a glance.
UIkit offers over 30 modular and extendible components, which can be combined with each other. Components are divided into different compartments according to their purpose and functionality.
These components generally normalize HTML elements for cross browser functionality and add some very basic styling.
Apply our fully responsive fluid grid system and panels, common layout parts like blog articles and comments and useful utility classes.
UIkit offers different types of navigations, like navigation bars and side navigations. Use breadcrumbs or a pagination to steer through articles.
Style basic HTML elements, like tables and forms. These components use their own classes. They won't interfere with any default element styling.
Here you'll find components that you often use within your content, like buttons, icons, badges, thumbnails, progress bars and much more.
UIkit includes a number of responsive classes to style your content for different viewport widths. This table gives you an overview of the available breakpoints and the associated devices. You can adjust all breakpoints through the Customizer.
|Mini||up to 479px||Phones portrait|
|Small||480px to 767px||Phones landscape|
|Medium||768px to 959px||Tablets portrait|
|Large||960px to 1199px||Desktops & tablets landscape|
|Xlarge||1200px and larger||Large Desktops|
To avoid conflicts with other CSS frameworks, all UIkit classes are name-spaced with the
uk- prefix. Components are divided into the component itself, sub-objects and modifiers, whose class names always pick up the component name.
|Component||Components abstract recurring parts of a website into class-based modules, like buttons for example. These can be reused and combined.|
|Sub-object||Sub-objects are placed within a component to enhance its funtionality, for example a close button in an alert box.|
|Modifier||Modifier classes alter the style of components and their sub-objects, like button colors and sizes.|